Fixed the buttons
This commit is contained in:
Patrick_Pluto
parent
19a9567a5d
commit
bb3db0ce1c
6 changed files with 103 additions and 164 deletions
|
|
@ -3,34 +3,28 @@ import React, { useEffect, useRef, useState } from "react";
|
|||
import ConversationFrontend from "../components/ConversationFrontend";
|
||||
import InputFrontend from "../components/InputFrontend";
|
||||
import axios from "axios";
|
||||
import { skip } from "node:test";
|
||||
|
||||
const InputOutputBackend: React.FC = () => {
|
||||
type Message = {
|
||||
role: string
|
||||
content:string
|
||||
content: string
|
||||
}
|
||||
|
||||
const [accessToken, setAccessToken] = useState("")
|
||||
const postWorkerRef = useRef<Worker| null>(null)
|
||||
const postWorkerRef = useRef<Worker | null>(null)
|
||||
const getWorkerRef = useRef<Worker | null>(null)
|
||||
const [messages, setMessages] = useState<Message[]>([{role:"assistant", content:"Hello! How can I help you?"}])
|
||||
const [messages, setMessages] = useState<Message[]>([{ role: "assistant", content: "Hello! How can I help you?" }])
|
||||
const [liveMessage, setLiveMessage] = useState("")
|
||||
const [inputMessage, setInputMessage] = useState<string>("")
|
||||
const [inputDisabled, setInputDisabled] = useState(false)
|
||||
const [lastMessage, setLastMessage] = useState<Message>({ role: "user", content: "Not supposed to happen." })
|
||||
|
||||
console.log(messages);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
console.log("getting access");
|
||||
axios.get("http://localhost:5000/interstellar/api/ai_create")
|
||||
.then(response => {
|
||||
setAccessToken(response.data.access_token)
|
||||
console.log(response.data.access_token);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("error:", error.message);
|
||||
|
||||
})
|
||||
getNewToken()
|
||||
|
||||
postWorkerRef.current = new Worker(new URL("./threads/PostWorker.js", import.meta.url))
|
||||
|
||||
|
|
@ -48,7 +42,7 @@ const InputOutputBackend: React.FC = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return () => {
|
||||
if (postWorkerRef.current) {
|
||||
postWorkerRef.current.terminate()
|
||||
|
|
@ -58,20 +52,33 @@ const InputOutputBackend: React.FC = () => {
|
|||
getWorkerRef.current.terminate()
|
||||
}
|
||||
}
|
||||
},[])
|
||||
}, [])
|
||||
|
||||
const getNewToken = () => {
|
||||
console.log("getting access");
|
||||
axios.get("http://localhost:5000/interstellar_ai/api/ai_create")
|
||||
.then(response => {
|
||||
setAccessToken(response.data.access_token)
|
||||
console.log(response.data.access_token);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("error:", error.message);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const startGetWorker = () => {
|
||||
if (!getWorkerRef.current) {
|
||||
getWorkerRef.current = new Worker(new URL("./threads/GetWorker.js", import.meta.url))
|
||||
|
||||
getWorkerRef.current.postMessage({ action: "start", access_token:accessToken})
|
||||
|
||||
addMessage("assistant","")
|
||||
|
||||
getWorkerRef.current.postMessage({ action: "start", access_token: accessToken })
|
||||
|
||||
addMessage("assistant", "")
|
||||
getWorkerRef.current.onmessage = (event) => {
|
||||
const data = event.data
|
||||
|
||||
|
||||
if (event.data == "error") {
|
||||
setLiveMessage("error getting AI response: "+ data.error)
|
||||
setLiveMessage("error getting AI response: " + data.error)
|
||||
} else {
|
||||
console.log("Received data:", data);
|
||||
editLastMessage(data.response)
|
||||
|
|
@ -81,12 +88,12 @@ const InputOutputBackend: React.FC = () => {
|
|||
getWorkerRef.current.onerror = (error) => {
|
||||
console.error("Worker error:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const endGetWorker = () => {
|
||||
if (getWorkerRef.current) {
|
||||
getWorkerRef.current.postMessage({action:"terminate"})
|
||||
getWorkerRef.current.postMessage({ action: "terminate" })
|
||||
getWorkerRef.current.terminate()
|
||||
getWorkerRef.current = null
|
||||
console.log(messages);
|
||||
|
|
@ -97,31 +104,32 @@ const InputOutputBackend: React.FC = () => {
|
|||
if (newContent == "") {
|
||||
newContent = "Generating answer..."
|
||||
}
|
||||
setMessages((prevMessages) => {
|
||||
const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
|
||||
if (updatedMessages.length > 0) {
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
updatedMessages[updatedMessages.length - 1] = {
|
||||
...lastMessage, // Keep the existing role and other properties
|
||||
content: newContent, // Update only the content
|
||||
};
|
||||
}
|
||||
return updatedMessages; // Return the updated array
|
||||
});
|
||||
};
|
||||
setMessages((prevMessages) => {
|
||||
const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
|
||||
if (updatedMessages.length > 0) {
|
||||
const lastMessage = updatedMessages[updatedMessages.length - 1];
|
||||
updatedMessages[updatedMessages.length - 1] = {
|
||||
...lastMessage, // Keep the existing role and other properties
|
||||
content: newContent, // Update only the content
|
||||
};
|
||||
}
|
||||
return updatedMessages; // Return the updated array
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const addMessage = (role: string, content: string) => {
|
||||
setMessages(previous => [...previous,{role,content}])
|
||||
}
|
||||
const handleSendClick = (inputValue: string) => {
|
||||
setMessages(previous => [...previous, { role, content }])
|
||||
}
|
||||
const handleSendClick = (inputValue: string, override: boolean) => {
|
||||
if (inputValue != "") {
|
||||
if (!inputDisabled) {
|
||||
console.log(inputDisabled)
|
||||
if (!inputDisabled || override) {
|
||||
setInputDisabled(true)
|
||||
if (postWorkerRef.current) {
|
||||
addMessage("user", inputValue)
|
||||
console.log("input:",inputValue);
|
||||
postWorkerRef.current.postMessage({messages:[...messages, { role: "user", content: inputValue }], ai_model:"phi3.5", access_token:accessToken})
|
||||
console.log("input:", inputValue);
|
||||
postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "phi3.5", access_token: accessToken })
|
||||
startGetWorker()
|
||||
}
|
||||
}
|
||||
|
|
@ -133,18 +141,33 @@ const InputOutputBackend: React.FC = () => {
|
|||
}
|
||||
|
||||
const handleResendClick = () => {
|
||||
// do stuff
|
||||
var temporary_message = messages[messages.length - 2]['content']
|
||||
const updatedMessages = messages.slice(0, -2)
|
||||
setMessages(updatedMessages)
|
||||
endGetWorker()
|
||||
getNewToken()
|
||||
setInputDisabled(false)
|
||||
handleSendClick(temporary_message, true)
|
||||
}
|
||||
|
||||
const handleEditClick = () => {
|
||||
// do stuff
|
||||
setInputMessage(messages[messages.length - 2]['content'])
|
||||
const updatedMessages = messages.slice(0, -2)
|
||||
setMessages(updatedMessages)
|
||||
endGetWorker()
|
||||
getNewToken()
|
||||
setInputDisabled(false)
|
||||
}
|
||||
|
||||
const handleCopyClick = () => {
|
||||
// do stuff
|
||||
const handleCopyClick = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(messages[messages.length - 1]['content']);
|
||||
} catch (err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<div>
|
||||
<ConversationFrontend
|
||||
messages={messages}
|
||||
|
|
@ -153,13 +176,13 @@ const InputOutputBackend: React.FC = () => {
|
|||
onCopyClick={handleCopyClick}
|
||||
/>
|
||||
<InputFrontend
|
||||
message=""
|
||||
message={inputMessage}
|
||||
onSendClick={handleSendClick}
|
||||
onMicClick={handleMicClick}
|
||||
inputDisabled={inputDisabled}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
export default InputOutputBackend
|
||||
|
|
@ -168,4 +191,3 @@ export default InputOutputBackend
|
|||
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue