multithread trial 2

app/backend/InputOutputHandler.tsx

@@ -2,78 +2,111 @@
 import React, { useEffect, useRef, useState } from "react";
 import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
-
-const handleMicClick = () => {
-  console.log('Mic clicked!');
-  // Do something when the mic button is clicked
-};
-
-
-const handleResendClick = () => {
-  console.log('Resend button clicked');
-  // Handle resend action
-};
-
-const handleEditClick = () => {
-  console.log('Edit button clicked');
-  // Handle edit action
-};
-
-const handleCopyClick = () => {
-  console.log('Copy button clicked');
-  // Handle copy action
-};
+import { error, log } from "console";
+import axios from "axios";
 
 const InputOutputBackend: React.FC = () => {
-    const [accessToken, setAccessToken] = useState("")
-    const workerRef = useRef<Worker | null>(null)
-    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:"system", content:"You are a helpful assistant"}])
+  const [liveMessage, setLiveMessage] = useState("")
 
-    const handleSendClick = (message:string) => {
-      var system:Message = {role:"system" ,content:"You are a helpful assistant."}
-
-      addMessage("user", message);
-      console.log("added User Message")
+  useEffect(() => {
+    axios.get("http://localhost:5000/interstellar/api/ai_create")
+      .then(response => {
+      setAccessToken(response.data.access_token)
+      })
+      .catch(error => {
+      console.log("error:", error.message);
       
-      HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
-    };
+    })
 
-    const [messages, setMessages] = useState([
-      { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } 
-    ]);
+    postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
 
-    const addMessage = (role:string ,content: string) => {
-        setMessages((prevMessages) => [...prevMessages, {role,content}]);
-    };
-
-
-
-    useEffect(() => {
-        workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url))
-        workerRef.current.postMessage({})
-        workerRef.current.onmessage = (e) => {
-            setAccessToken(e.data)
-        }
-        
-        return () => {
-            if (workerRef.current) {
-                workerRef.current.terminate()
-            }
-        }
-    },[])
-        
-        const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
-          if (workerRef.current) {
-            workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
-            workerRef.current.onmessage = (e) => {
-              addMessage("assistant",e.data)
-            }
+    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("start")
+  
+      getWorkerRef.current.onmessage = (event) => {
+        const data = event.data
+        
+        if (data.error) {
+          setLiveMessage("error getting AI response: "+ data.error)
+        } else {
+          console.log("Received data:", data);
+          setLiveMessage(data)
+        }
+      }
+
+      getWorkerRef.current.onerror = (error) => {
+        console.error("Worker error:", error)
+      }
+    }  
+  }
+
+  const endGetWorker = () => {
+    if (getWorkerRef.current) {
+      addMessage("assistant", liveMessage)
+      getWorkerRef.current.postMessage("terminate")
+      getWorkerRef.current.terminate()
+    }
+  }
+
+  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, 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