YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

no input while generating/empty

Browse source
This commit is contained in:
YasinOnm08 2024-09-24 13:50:46 +02:00
parent 37177a7856
commit 615a58ce28
2 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/backend/InputOutputHandler.tsx
View file

@ -4,9 +4,6 @@ import ConversationFrontend from "../components/ConversationFrontend";
import InputFrontend from "../components/InputFrontend"; import InputFrontend from "../components/InputFrontend";
import axios from "axios"; import axios from "axios";
let sendable = true
const InputOutputBackend: React.FC = () => { const InputOutputBackend: React.FC = () => {
type Message = { type Message = {
role: string role: string
@ -18,6 +15,7 @@ const InputOutputBackend: React.FC = () => {
const getWorkerRef = 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 [liveMessage, setLiveMessage] = useState("")
const [inputDisabled, setInputDisabled] = useState(false)
console.log(messages); console.log(messages);
@ -39,10 +37,10 @@ const InputOutputBackend: React.FC = () => {
postWorkerRef.current.onmessage = (event) => { postWorkerRef.current.onmessage = (event) => {
const status = event.data.status const status = event.data.status
if (status == 200) { if (status == 200) {
sendable = true setInputDisabled(false)
endGetWorker() endGetWorker()
} else if (status == 500) { } else if (status == 500) {
sendable = true setInputDisabled(false)
if (getWorkerRef.current) { if (getWorkerRef.current) {
addMessage("assistant", "There was an Error with the AI response") addMessage("assistant", "There was an Error with the AI response")
getWorkerRef.current.postMessage("terminate") getWorkerRef.current.postMessage("terminate")
@ -97,7 +95,7 @@ const InputOutputBackend: React.FC = () => {
const editLastMessage = (newContent: string) => { const editLastMessage = (newContent: string) => {
if (newContent == "") { if (newContent == "") {
newContent = "Loading..." newContent = "Generating answer..."
} }
setMessages((prevMessages) => { setMessages((prevMessages) => {
const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
@ -118,8 +116,8 @@ const InputOutputBackend: React.FC = () => {
} }
const handleSendClick = (inputValue: string) => { const handleSendClick = (inputValue: string) => {
if (inputValue != "") { if (inputValue != "") {
if (sendable) { if (!inputDisabled) {
sendable=false setInputDisabled(true)
if (postWorkerRef.current) { if (postWorkerRef.current) {
addMessage("user", inputValue) addMessage("user", inputValue)
console.log("input:",inputValue); console.log("input:",inputValue);
@ -158,6 +156,7 @@ const InputOutputBackend: React.FC = () => {
message="" message=""
onSendClick={handleSendClick} onSendClick={handleSendClick}
onMicClick={handleMicClick} onMicClick={handleMicClick}
inputDisabled={inputDisabled}
/> />
</div> </div>
) )

16
app/components/InputFrontend.tsx
View file

@ -4,21 +4,25 @@ interface InputProps {
message: string; message: string;
onSendClick: (message: string) => void; onSendClick: (message: string) => void;
onMicClick: () => void; onMicClick: () => void;
inputDisabled:boolean
} }
const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>( const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => { ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef<HTMLDivElement>) => {
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value); setInputValue(e.target.value);
}; };
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') { if (!inputDisabled) {
onSendClick(inputValue); // Call the function passed via props if (event.key === 'Enter') {
setInputValue(''); // Optionally clear input after submission onSendClick(inputValue); // Call the function passed via props
event.preventDefault(); // Prevent default action (e.g., form submission) setInputValue(''); // Optionally clear input after submission
event.preventDefault(); // Prevent default action (e.g., form submission)
}
} }
}; };
@ -32,7 +36,7 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
<button type="button" onClick={() => onSendClick(inputValue)}> <button type="button" onClick={() => onSendClick(inputValue)} disabled={inputDisabled?true:false}>
<img src="/img/send.svg" alt="send" /> <img src="/img/send.svg" alt="send" />
</button> </button>
<button type="button" onClick={onMicClick}> <button type="button" onClick={onMicClick}>