live message! (limit:1)

app/backend/InputOutputHandler.tsx

@@ -6,12 +6,20 @@ 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([{role:"assistant", content:"Hello! How can I help you?"}])
+  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")
@@ -56,6 +64,7 @@ const InputOutputBackend: React.FC = () => {
   
       getWorkerRef.current.postMessage({ action: "start", access_token:accessToken})
   
+      addMessage("assistant","")
       getWorkerRef.current.onmessage = (event) => {
         const data = event.data
         
@@ -63,7 +72,7 @@ const InputOutputBackend: React.FC = () => {
           setLiveMessage("error getting AI response: "+ data.error)
         } else {
           console.log("Received data:", data);
-          setLiveMessage(data)
+          editLastMessage(data.response)
         }
       }
 
@@ -75,13 +84,27 @@ const InputOutputBackend: React.FC = () => {
 
   const endGetWorker = () => {
     if (getWorkerRef.current) {
-      addMessage("assistant", liveMessage)
       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}])
   }  
@@ -89,7 +112,7 @@ const InputOutputBackend: React.FC = () => {
     if (postWorkerRef.current) {
       addMessage("user", inputValue)
       console.log("input:",inputValue);
-      postWorkerRef.current.postMessage({messages:messages, ai_model:"phi3.5", access_token:accessToken})
+      postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken})
       startGetWorker()
     }
   }