interstellar_ai/app/backend/InputOutputHandler.tsx

"use client"
import React, { useEffect, useRef, useState } from "react";
import ConversationFrontend from '../components/ConversationFrontend';
import InputFrontend from "../components/InputFrontend";
import { sendToVoiceRecognition } from "./voice_backend"
import axios from "axios";

const InputOutputBackend: React.FC = () => {
  // # variables
  type Message = {
    role: string
    content: string
  }

  // Define state variables for user preferences and messages
  const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
  const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
  const [timeFormat, setTimeFormat] = useState<string>("24-hour");
  const [preferredMeasurement, setPreferredMeasurement] = useState<string>("metric");
  const [timeZone, setTimeZone] = useState<string>("GMT");
  const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
  const [messages, setMessages] = useState<Message[]>([]);
  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
  const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
  apiURL.hostname = window.location.hostname;

  // Fetch local storage values and update state on component mount
  useEffect(() => {
    setPreferredCurrency(localStorage.getItem("preferredCurrency") || "USD");
    setPreferredLanguage(localStorage.getItem("preferredLanguage") || "english");
    setTimeFormat(localStorage.getItem("timeFormat") || "24-hour");
    setPreferredMeasurement(localStorage.getItem("preferredMeasurement") || "metric");
    setTimeZone(localStorage.getItem("timeZone") || "GMT");
    setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
    setMyBoolean(localStorage.getItem('myBoolean') === 'true');
  }, []);

  // Update messages when any of the settings change
  useEffect(() => {
    const measurementString = (preferredMeasurement == "Metric")
      ? "All measurements follow the metric system. Refuse to use any other measurement system."
      : "All measurements follow the imperial system. Refuse to use any other measurement system.";

    const systemMessage = myBoolean
      ? `You are operating in the timezone: ${timeZone}. Use the ${timeFormat} time format and ${dateFormat} for dates. 
      ${measurementString} 
      The currency is ${preferredCurrency}. 
      Communicate in the language specified by the user (country code: ${preferredLanguage}), and only in this language.
      You are only able to change language if the user specifically states you must. 
      Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.
      You try to use html tags as often as possible in your responses. For images, links and tables you use markdown.`
      : `You are a helpful assistant
      You try to use html tags as often as possible in your responses. For images, links and tables you use markdown. You cannot use both at the same time.`;
    setMessages([
      { role: "system", content: systemMessage },
      { role: "assistant", content: "Hello! How may I help you?" },
    ]);
  }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);


  const conversationRef = useRef<HTMLDivElement>(null)
  const [copyClicked, setCopyClicked] = useState(false)
  const [accessToken, setAccessToken] = useState("")
  const postWorkerRef = useRef<Worker | null>(null)
  const getWorkerRef = useRef<Worker | null>(null)
  const [inputMessage, setInputMessage] = useState<string>("")
  const [inputDisabled, setInputDisabled] = useState(false)
  const [isRecording, setIsRecording] = useState(false)
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunks = useRef<Blob[]>([])

  useEffect(() => {
    getNewToken()

    postWorkerRef.current = new Worker(new URL("./threads/PostWorker.ts", import.meta.url))

    postWorkerRef.current.onmessage = (event) => {
      const status = event.data.status
      if (status == 200) {
        setInputDisabled(false)
        endGetWorker()
      } else if (status == 500) {
        setInputDisabled(false)
        if (getWorkerRef.current) {
          addMessage("assistant", "There was an Error with the AI response")
          getWorkerRef.current.postMessage("terminate")
          getWorkerRef.current.terminate()
        }
      }
    }

    return () => {
      if (postWorkerRef.current) {
        postWorkerRef.current.terminate()
      }
      if (getWorkerRef.current) {
        getWorkerRef.current.postMessage("terminate")
        getWorkerRef.current.terminate()
      }
    }
  }, [])

  const getNewToken = () => {
    axios.get(apiURL.href)
      .then(response => {
        setAccessToken(response.data.access_token)
      })
      .catch(error => {
        console.log("error:", error.message);

      })
  }

  const startGetWorker = () => {
    if (!getWorkerRef.current) {
      getWorkerRef.current = new Worker(new URL("./threads/GetWorker.ts", import.meta.url))

      const windowname = window.location.hostname

      getWorkerRef.current.postMessage({ action: "start", access_token: accessToken, windowname })

      addMessage("assistant", "")
      getWorkerRef.current.onmessage = (event) => {
        const data = event.data

        if (event.data == "error") {
          console.log("Error getting ai message.")
        } else {
          console.log("Received data:", data);
          editLastMessage(data.response)
        }
      }

      getWorkerRef.current.onerror = (error) => {
        console.error("Worker error:", error)
      }
    }
  }

  const endGetWorker = () => {
    if (getWorkerRef.current) {
      getWorkerRef.current.postMessage({ action: "terminate" })
      getWorkerRef.current.terminate()
      getWorkerRef.current = null
    }
  }

  const editLastMessage = (newContent: string) => {
    if (newContent == "") {
      newContent = "Generating answer..."
    }
    setMessages((prevMessages) => {
      const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
      if (updatedMessages.length > 0) {
        const lastMessage = updatedMessages[updatedMessages.length - 1];
        updatedMessages[updatedMessages.length - 1] = {
          ...lastMessage, // Keep the existing role and other properties
          content: newContent, // Update only the content
        };
      }
      return updatedMessages; // Return the updated array
    });
  };

  const addMessage = (role: string, content: string) => {
    setMessages(previous => [...previous, { role, content }])
  }
  const handleSendClick = (inputValue: string, override: boolean) => {
    if (inputValue != "") {
      if (!inputDisabled || override) {
        setInputDisabled(true)
        if (postWorkerRef.current) {
          addMessage("user", inputValue)
          const type = localStorage.getItem('type')
          let api_key: string = ""
          if (type != null && type != 'local') {
            const try_key = localStorage.getItem(type)
            if (try_key) {
              api_key = try_key
            }
          }
          setInputMessage("")
          const windowname = window.location.hostname
          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", model_type: type, access_token: accessToken, api_key: api_key, windowname })
          startGetWorker()
        }
      }
    }
  }

  const startRecording = async (): Promise<string> => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorderRef.current = mediaRecorder;

    audioChunks.current = []; // Initialize audio chunks

    // Create a promise that resolves when the onstop event is done
    const stopRecordingPromise = new Promise<string>((resolve) => {
      mediaRecorder.ondataavailable = (event) => {
        audioChunks.current.push(event.data);
      };

      mediaRecorder.onstop = async () => {
        const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" });
        audioChunks.current = [];

        const text_voice = await sendToVoiceRecognition(audioBlob);
        resolve(text_voice); // Resolve the promise with the recognized text
      };
    });

    mediaRecorder.start();
    setIsRecording(true);

    // Wait for the recording to stop and get the recognized text
    return stopRecordingPromise;
  };

  const stopRecording = () => {
    mediaRecorderRef.current?.stop();
    setIsRecording(false);
  };

  const handleMicClick = async () => {
    if (!isRecording) {
      const recognizedText = await startRecording();
      setInputMessage(recognizedText); // Set the recognized text after recording
    } else {
      stopRecording();
    }
  };

  const handleStopClick = () => {
    endGetWorker()
    getNewToken()
  }

  const handleResendClick = () => {
    const temporary_message = messages[messages.length - 2]['content']
    const updatedMessages = messages.slice(0, -2)
    setMessages(updatedMessages)
    endGetWorker()
    getNewToken()
    setInputDisabled(false)
    handleSendClick(temporary_message, true)
  }

  const handleEditClick = () => {
    const newestMessage = messages[messages.length - 2].content
    setInputMessage(newestMessage)
    const updatedMessages = messages.slice(0, messages.length - 2)
    setMessages(updatedMessages)
    endGetWorker()
    getNewToken()
    setInputDisabled(false)
  }

  const handleCopyClick = async () => {
    setCopyClicked(false)
    try {
      await navigator.clipboard.writeText(messages[messages.length - 1]['content']);
      fadeCopyText()
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }

  const wait = (time: number) => {
    return new Promise(resolve => setTimeout(resolve, time));
  }

  const fadeCopyText = async () => {
    setCopyClicked(true)
    await wait(1000)
    setCopyClicked(false)
  }


  return (
    <>
      <ConversationFrontend
        ref={conversationRef}
        messages={messages}
        onStopClick={handleStopClick}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
        isClicked={copyClicked}
      />
      <InputFrontend
        message={inputMessage}
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
        inputDisabled={inputDisabled}
        isRecording={isRecording}
      />
    </>
  )
}

export default InputOutputBackend