interstellar_ai/app/backend/InputOutputHandler.tsx

"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