interstellar_ai/app/InputOutputHandler.tsx

"use client"
import React, { useEffect, useRef, useState } from "react";
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
};

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) => {
      var system:Message = {role:"system" ,content:"You are a helpful assistant that gives short answers."}

        addMessage("user",message);
        HandlePostRequest(messages, "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 HandleGetRequest = (messages: Message[], ai_model: string, system_prompt: Message) => {
        if (workerRef.current) {
            workerRef.current.postMessage({ functionName: "getResponse", access_token: accessToken, messages: messages, ai_model: ai_model, system_prompt: system_prompt })
            workerRef.current.onmessage = (e) => {
                addMessage("assistant",e.data)
            }
        }
    }

    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) => {
                HandleGetRequest(messages,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