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