app/backend/InputOutputHandler.tsx

@@ -2,77 +2,136 @@
 import React, { useEffect, useRef, useState } from "react";
 import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
-
+import axios from "axios";
-const handleMicClick = () => {
+import { log } from 'console';
-  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
-};
 
 const InputOutputBackend: React.FC = () => {
-    const [accessToken, setAccessToken] = useState("")
+  type Message = {
-    const workerRef = useRef<Worker | null>(null)
+    role: string
-    type Message = {
+    content:string
-      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()
+        }
+      }
     }
     
-    const handleSendClick = (message:string) => {
+    return () => {
-      var system:Message = {role:"system" ,content:"You are a helpful assistant."}
+      if (postWorkerRef.current) {
-
+        postWorkerRef.current.terminate()
-      addMessage("user", message);
+      }
-      console.log("added User Message")
+      if (getWorkerRef.current) {
-      
+        getWorkerRef.current.postMessage("terminate")
-      HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
+        getWorkerRef.current.terminate()
-    };
+      }
-
-    const [messages, setMessages] = useState([
-      { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } 
-    ]);
-
-    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)
-            }
-        }
     }
+  },[])
+
+  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>

app/backend/ProcessAPI.js

@@ -1,51 +0,0 @@
-import axios from 'axios'
-import { type } from 'os';
-
-onmessage = function (e) {
-    const { functionName = "getAccess", access_token = "", messages = [], ai_model = "phi3.5", system_prompt = {role:"system" ,content: "You are a helpful assistant that gives short answers"}} = e.data
-    
-    let data = {
-        ai_model: ai_model,
-        messages: messages,
-        access_token: access_token
-    };
-
-    const getResponse = () => {
-        messageComplete:boolean = false
-        while(!messageComplete)
-        axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token)
-                .then(Response => {
-                    postMessage(Response.data.response)
-                    if (Response.data.status == 200) {
-                        messageComplete = true
-                    }
-                }).catch(error => {
-                    console.error("Error with GET response request:", error)
-                })
-    }
-
-    switch (functionName) {
-        case "getAccess":
-            console.log("getting access...")
-            axios.get('https://localhost:5000/interstellar/api/ai_create')
-            .then(Response => {
-                postMessage(Response.data.access_token)
-            }).catch(error => {
-                console.error("Error with GET Token request:", error)
-            })
-            break
-        case "postRequest":
-            messages.unshift(system_prompt)
-            console.log("sending...")
-            console.log(messages)
-            axios.post('https://localhost:5000/interstellar/api/ai_send', data)
-            .then(Response => {
-                getResponse()
-            }).catch(error => {
-                console.error("Error:", error)
-            })
-            break
-    }
-
-
-}

app/backend/threads/GetWorker.js

@@ -0,0 +1,34 @@
+import axios from "axios";
+
+let accesstoken
+onmessage = (event) => {
+    const { action, access_token } = event.data
+    accesstoken=access_token
+    
+    if (action === "start") {
+        fetchData()
+    } else if (action === "terminate") {
+    }
+}
+
+console.log('starting get loop');
+
+const fetchData = () => {
+    console.log(accesstoken);
+    
+    
+    const apiURL = "http://localhost:5000/interstellar/api/ai_get?access_token="+accesstoken
+    
+    axios.get(apiURL)
+        .then(response => {
+            const data = response.data
+            console.log(data);
+            postMessage(data)
+            setTimeout(fetchData,100)
+        })
+        .catch(error => {
+            console.log('Error fetching data:', error);
+            postMessage({error:"failed fetching data"})
+        
+    })
+}

app/backend/threads/PostWorker.js

@@ -0,0 +1,29 @@
+import axios from "axios";
+
+onmessage = (e) => {
+    const { messages = [{ role: "assistant", content: "Hello! How can I help you?" }], ai_model = "phi3.5", access_token } = e.data
+    messages.unshift({ role: "system", content: "You are a Helpful assistant" })
+
+    const Message = {
+        messages: messages,
+        ai_model: "phi3.5",
+        model_type:"local",
+        access_token:access_token
+    }
+
+    console.log(Message);
+    
+
+    axios.post("http://localhost:5000/interstellar/api/ai_send",Message)
+        .then(response => {
+            const status = response.data.status
+            console.log(status);
+            postMessage({ status })
+            console.log('message posted');
+            
+        })
+        .catch(error => {
+            console.log("Error calling API:", error)
+            postMessage({status:500})
+    })
+}