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 axios from "axios";
import { log } from 'console';

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

  const [accessToken, setAccessToken] = useState("")
  const postWorkerRef = useRef<Worker| null>(null)
  const getWorkerRef = useRef<Worker | null>(null)
  const [messages, setMessages] = useState<Message[]>([{role:"assistant", content:"Hello! How can I help you?"}])
  const [liveMessage, setLiveMessage] = useState("")

  console.log(messages);
  

  useEffect(() => {
    console.log("getting access");
    axios.get("http://localhost:5000/interstellar/api/ai_create")
      .then(response => {
        setAccessToken(response.data.access_token)
        console.log(response.data.access_token);
      })
      .catch(error => {
      console.log("error:", error.message);
      
    })

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

    postWorkerRef.current.onmessage = (event) => {
      const status = event.data.status
      if (status == 200) {
        endGetWorker()
      } else if (status == 500) {
        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 startGetWorker = () => {
    if (!getWorkerRef.current) {
      getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
  
      getWorkerRef.current.postMessage({ action: "start", access_token:accessToken})
  
      addMessage("assistant","")
      getWorkerRef.current.onmessage = (event) => {
        const data = event.data
        
        if (event.data == "error") {
          setLiveMessage("error getting AI response: "+ data.error)
        } 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()
      console.log(messages);
    }
  }

  const editLastMessage = (newContent: string) => {
  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) => {
    if (postWorkerRef.current) {
      addMessage("user", inputValue)
      console.log("input:",inputValue);
      postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken})
      startGetWorker()
    }
  }

  const handleMicClick = () => {
    // do stuff
  }

  const handleResendClick = () => {
    // do stuff
  }

  const handleEditClick = () => {
    // do stuff
  }

  const handleCopyClick = () => {
    // do stuff
  }

    return (
    <div>
      <ConversationFrontend
        messages={messages}
        onResendClick={handleResendClick}
        onEditClick={handleEditClick}
        onCopyClick={handleCopyClick}
      />
      <InputFrontend
        message=""
        onSendClick={handleSendClick}
        onMicClick={handleMicClick}
      />
    </div>
    )
}

export default InputOutputBackend