forked from React-Group/interstellar_ai
109 lines
No EOL
3 KiB
TypeScript
109 lines
No EOL
3 KiB
TypeScript
"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)
|
||
|
||
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
|
||
|
||
|
||
|
||
|
||
|
||
|