Merge branch 'sageTheDm-main'

app/backend/InputOutputHandler.tsx

@@ -0,0 +1,100 @@
+"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)
+    type Message = {
+      role: string
+      content: string
+    }
+
+    const handleSendClick = (message:string) => {
+      var system:Message = {role:"system" ,content:"You are a helpful assistant."}
+
+      addMessage("user", message);
+      console.log("added User Message")
+      
+      HandlePostRequest([...messages, { role: "user", content: message }], "phi3.5", system);
+    };
+
+    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)
+            }
+        }
+    }
+    
+    return (
+    <div>
+      <ConversationFrontend
+        messages={messages}
+        onResendClick={handleResendClick}
+        onEditClick={handleEditClick}
+        onCopyClick={handleCopyClick}
+      />
+      <InputFrontend
+        message=""
+        onSendClick={handleSendClick}
+        onMicClick={handleMicClick}
+      />
+    </div>
+    )
+}
+
+export default InputOutputBackend
+
+
+
+
+
+