Started changes the file structure

app/backend/InputOutputHandler.tsx

@@ -0,0 +1,109 @@
+"use client"
+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
+};
+
+const InputOutputBackend: React.FC = () => {
+    const [accessToken, setAccessToken] = useState("")
+    const workerRef = useRef<Worker | null>(null)
+
+    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(() => {
+        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 HandleGetRequest = (message: string, ai_model: string, system_prompt: string) => {
+        if (workerRef.current) {
+            workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt })
+            workerRef.current.onmessage = (e) => {
+                addMessage("AI: " + e.data)
+            }
+        }
+    }
+
+    const HandlePostRequest = (message: string, ai_model: string, system_prompt: string) => {
+        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>
+      <ConversationFrontend
+        messages={messages}
+        onResendClick={handleResendClick}
+        onEditClick={handleEditClick}
+        onCopyClick={handleCopyClick}
+      />
+      <InputFrontend
+        message=""
+        onSendClick={handleSendClick}
+        onMicClick={handleMicClick}
+      />
+    </div>
+  );
+}
+
+export default InputOutputBackend
+
+
+
+
+
+