multithread implementation

app/AI.tsx

@@ -1,12 +1,12 @@
 // AI.tsx
 import React from 'react';
-import InputBackend from './InputBackend';
+import InputOutputBackend from './InputOutputHandler';
 
 const AI: React.FC = () => {
   return (
     <div>
       <div className="ai-container">
-        <InputBackend />
+        <InputOutputBackend />
       </div>
     </div>
   );

app/ConversationFrontend.tsx

@@ -23,7 +23,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
         <div className="conversation resize" id="conversation" ref={ref}>
           {messages.map((message, index) => {
             const isUserMessage = message.startsWith('User:');
-            console.log("output: "+messages)
+            console.log(messages)
             return (
               <div
                 key={index}

app/InputBackend.tsx

@@ -40,7 +40,6 @@ const InputBackend: React.FC = () => {
     if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
       if (chatResponse.choices[0].message.content) {
         addMessage('AI: ' + chatResponse.choices[0].message.content);
-        console.log(messages)
       }
     } else {
       console.error('Error: Unexpected API response:', chatResponse);

app/InputOutputHandler.tsx

@@ -1,43 +1,103 @@
 "use client"
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
-import axios from 'axios';
+import ConversationFrontend from "./ConversationFrontend";
+import InputFrontend from "./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
+};
 
-type lol = {
-    message: string[]
-}
 const InputOutputBackend: React.FC = () => {
-    const [getMessage, setGetMessage] = useState("")
     const [accessToken, setAccessToken] = useState("")
-    const [postMessage, setPostMessage] = useState("")
+    const workerRef = useRef<Worker | null>(null)
-    const [input, setInput] = useState("")
+
+    const handleSendClick = (message: string) => {
+        var system = "You give really short answers (maximum of 30 sentences). The following is the chat history."
+        for (let index = 0; index < messages.length; index++) {
+            system += messages[index] + " ";
+        };
+
+        HandlePostRequest(message, "phi3.5", system)
+
+        addMessage('User: ' + message);
+    };
+
+    const [messages, setMessages] = useState([
+        'User: Hello!',
+        'AI: Hi there!',
+        'User: How are you?',
+        'AI: I’m good, thank you!'
+    ]);
+
+    const addMessage = (message: string) => {
+        setMessages((prevMessages) => [...prevMessages, message]);
+    };
+
 
     useEffect(() => {
-        const worker = new Worker(new URL("./ProcessAPI.js", import.meta.url))
+        workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url))
-        worker.postMessage({})
+        workerRef.current.postMessage({})
-        worker.onmessage = (e) => {
+        workerRef.current.onmessage = (e) => {
-            setAccessToken(e.data.access_token)
+            setAccessToken(e.data)
-            console.log(accessToken)
         }
-
+        
         return () => {
-            worker.terminate()
+            if (workerRef.current) {
+                workerRef.current.terminate()
+            }
         }
-    })
+    },[])
     
-    const HandleGetRequest = () => {
+    const HandleGetRequest = (message: string, ai_model: string, system_prompt: string) => {
-        axios.get('/interstellar/api/ai_get')
+        if (workerRef.current) {
-            .then(Response => {
+            workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt })
-                setAccessToken(Response.data.response)
+            workerRef.current.onmessage = (e) => {
-            }).catch(error => {
+                addMessage("AI: " + e.data)
-            console.error("Error with GET response request:", error)
+            }
-        })
+        }
     }
 
-    const HandlePostRequest = () => {
+    const HandlePostRequest = (message: string, ai_model: string, system_prompt: string) => {
-        axios.post('/interstellar/api/ai_send', {})
+        if (workerRef.current) {
+            workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt })
+            workerRef.current.onmessage = (e) => {
+                HandleGetRequest(message,ai_model,system_prompt)
+            }
+        }
     }
     
-    return <div>Hello {accessToken}</div>
+    return (
+    <div>
+      <ConversationFrontend
+        messages={messages}
+        onResendClick={handleResendClick}
+        onEditClick={handleEditClick}
+        onCopyClick={handleCopyClick}
+      />
+      <InputFrontend
+        message=""
+        onSendClick={handleSendClick}
+        onMicClick={handleMicClick}
+      />
+    </div>
+  );
 }
 
 export default InputOutputBackend

app/ProcessAPI.js

@@ -2,23 +2,23 @@ import axios from 'axios'
 
 onmessage = function (e) {
     const { functionName = "getAccess", access_token = "", message = "", ai_model = "phi3.5", system_prompt = "You are a helpful assistant" } = e.data
+    const data = {
+        "ai_model": ai_model,
+        "message": message,
+        "system_prompt": system_prompt,
+        "access_token": access_token
+    };
     switch (functionName) {
         case "getAccess":
-            axios.get('http://localhost:5000/interstellar/api/ai_create')
+            axios.get('https://localhost:5000/interstellar/api/ai_create')
-            .then(Response => {
+                .then(Response => {
                 postMessage(Response.data.access_token)
             }).catch(error => {
             console.error("Error with GET Token request:", error)
             })
             break
         case "postRequest":
-            const data = {
+            axios.post('https://localhost:5000/interstellar/api/ai_send', data)
-                ai_model: ai_model,
-                message: message,
-                system_prompt: system_prompt,
-                access_token: access_token
-            };
-            axios.post('http://localhost:5000/interstellar/api/ai_send', data)
                 .then(Response => {
                     postMessage(Response.data)
                 }).catch(error => {
@@ -26,7 +26,7 @@ onmessage = function (e) {
                 })
             break
         case "getResponse":
-            axios.get('http://localhost:5000/interstellar/api/ai_get')
+            axios.get('https://localhost:5000/interstellar/api/ai_get?access_token='+access_token)
             .then(Response => {
                 postMessage(Response.data.response)
             }).catch(error => {