convo with new prompts

app/ConversationFrontend.tsx

@@ -1,7 +1,12 @@
 import React, { ForwardedRef, useEffect, useRef } from 'react';
 
+type Message = {
+  role: string
+  content: string
+}
+
 interface ConversationProps {
-  messages: string[];
+  messages: Message[];
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
@@ -22,14 +27,16 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       <div className="output">
         <div className="conversation resize" id="conversation" ref={ref}>
           {messages.map((message, index) => {
-            const isUserMessage = message.startsWith('User:');
+            let isUserMessage
-            console.log(messages)
+            if (message.role == "user") {
+              isUserMessage = message
+            }
             return (
               <div
                 key={index}
                 className={isUserMessage ? 'user-message' : 'ai-message'}
               >
-                <p> {message}</p>
+                <p> {message.content}</p>
               </div>
             );
           })}

app/InputOutputHandler.tsx

@@ -27,30 +27,31 @@ const handleCopyClick = () => {
 const InputOutputBackend: React.FC = () => {
     const [accessToken, setAccessToken] = useState("")
     const workerRef = useRef<Worker | null>(null)
+    type Message = {
+      role: string
+      content: string
+    }
+    type SystemPrompt = {
+        
+    }
 
-    const handleSendClick = (message: string) => {
+    const handleSendClick = (message:string) => {
-        var system = "You give really short answers (maximum of 30 sentences). The following is the chat history."
+      var system:Message = {role:"system" ,content:"You are a helpful assistant that gives short answers."}
-        for (let index = 0; index < messages.length; index++) {
-            system += messages[index] + " ";
-        };
 
-        HandlePostRequest(message, "phi3.5", system)
+        addMessage("user",message);
-
+        HandlePostRequest(messages, "phi3.5", system)
-        addMessage('User: ' + message);
     };
 
     const [messages, setMessages] = useState([
-        'User: Hello!',
+      { role:"assistant", content:'Hello. I\'m Your AI Virtual Assistant' } 
-        'AI: Hi there!',
-        'User: How are you?',
-        'AI: I’m good, thank you!'
     ]);
 
-    const addMessage = (message: string) => {
+    const addMessage = (role:string ,content: string) => {
-        setMessages((prevMessages) => [...prevMessages, message]);
+        setMessages((prevMessages) => [...prevMessages, {role,content}]);
     };
 
 
+
     useEffect(() => {
         workerRef.current = new Worker(new URL("./ProcessAPI.js", import.meta.url))
         workerRef.current.postMessage({})
@@ -65,20 +66,20 @@ const InputOutputBackend: React.FC = () => {
         }
     },[])
     
-    const HandleGetRequest = (message: string, ai_model: string, system_prompt: string) => {
+    const HandleGetRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
         if (workerRef.current) {
-            workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt })
+            workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
             workerRef.current.onmessage = (e) => {
-                addMessage("AI: " + e.data)
+                addMessage("assistant",e.data)
             }
         }
     }
 
-    const HandlePostRequest = (message: string, ai_model: string, system_prompt: string) => {
+    const HandlePostRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
         if (workerRef.current) {
-            workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, message: message, ai_model: ai_model, system_prompt: system_prompt })
+            workerRef.current.postMessage({ functionName: "postRequest", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
             workerRef.current.onmessage = (e) => {
-                HandleGetRequest(message,ai_model,system_prompt)
+                HandleGetRequest(messages,ai_model,system_prompt)
             }
         }
     }
@@ -97,7 +98,7 @@ const InputOutputBackend: React.FC = () => {
         onMicClick={handleMicClick}
       />
     </div>
-  );
+    )
 }
 
 export default InputOutputBackend

app/ProcessAPI.js

@@ -1,32 +1,39 @@
 import axios from 'axios'
+import { type } from 'os';
 
 onmessage = function (e) {
-    const { functionName = "getAccess", access_token = "", message = "", ai_model = "phi3.5", system_prompt = "You are a helpful assistant" } = e.data
+    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
-    const data = {
+    
-        "ai_model": ai_model,
+    
-        "message": message,
+    let data = {
-        "system_prompt": system_prompt,
+        ai_model: ai_model,
-        "access_token": access_token
+        messages: messages,
+        access_token: access_token
     };
+    console.log(messages)
     switch (functionName) {
         case "getAccess":
-            axios.get('https://127.0.0.1:5000/interstellar/api/ai_create')
+            console.log("getting access...")
-                .then(Response => {
+            axios.get('https://localhost:5000/interstellar/api/ai_create')
-                    postMessage(Response.data.access_token)
+            .then(Response => {
-                }).catch(error => {
+                postMessage(Response.data.access_token)
-                    console.error("Error with GET Token request:", error)
+            }).catch(error => {
-                })
+                console.error("Error with GET Token request:", error)
+            })
             break
         case "postRequest":
-            axios.post('https://127.0.0.1:5000/interstellar/api/ai_send', data)
+            messages.unshift(system_prompt)
-                .then(Response => {
+            console.log("sending...")
-                    postMessage(Response.data)
+            console.log(messages)
-                }).catch(error => {
+            axios.post('https://localhost:5000/interstellar/api/ai_send', data)
-                    console.error("Error:", error)
+            .then(Response => {
-                })
+                postMessage(Response.data)
+            }).catch(error => {
+                console.error("Error:", error)
+            })
             break
         case "getResponse":
-            axios.get('https://127.0.0.1:5000/interstellar/api/ai_get?access_token=' + access_token)
+            axios.get('https://localhost:5000/interstellar/api/ai_get?access_token=' + access_token)
                 .then(Response => {
                     postMessage(Response.data.response)
                 }).catch(error => {