diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx index bf8a191..86bb594 100644 --- a/app/backend/InputOutputHandler.tsx +++ b/app/backend/InputOutputHandler.tsx @@ -3,7 +3,6 @@ import React, { useEffect, useRef, useState } from "react"; import ConversationFrontend from "../components/ConversationFrontend"; import InputFrontend from "../components/InputFrontend"; import axios from "axios"; -import { log } from 'console'; const InputOutputBackend: React.FC = () => { type Message = { @@ -16,6 +15,7 @@ const InputOutputBackend: React.FC = () => { const getWorkerRef = useRef(null) const [messages, setMessages] = useState([{role:"assistant", content:"Hello! How can I help you?"}]) const [liveMessage, setLiveMessage] = useState("") + const [inputDisabled, setInputDisabled] = useState(false) console.log(messages); @@ -37,8 +37,10 @@ const InputOutputBackend: React.FC = () => { postWorkerRef.current.onmessage = (event) => { const status = event.data.status if (status == 200) { + setInputDisabled(false) endGetWorker() } else if (status == 500) { + setInputDisabled(false) if (getWorkerRef.current) { addMessage("assistant", "There was an Error with the AI response") getWorkerRef.current.postMessage("terminate") @@ -86,11 +88,15 @@ const InputOutputBackend: React.FC = () => { if (getWorkerRef.current) { getWorkerRef.current.postMessage({action:"terminate"}) getWorkerRef.current.terminate() + getWorkerRef.current = null console.log(messages); } } const editLastMessage = (newContent: string) => { + if (newContent == "") { + newContent = "Generating answer..." + } setMessages((prevMessages) => { const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages if (updatedMessages.length > 0) { @@ -109,11 +115,16 @@ const InputOutputBackend: React.FC = () => { setMessages(previous => [...previous,{role,content}]) } const handleSendClick = (inputValue: string) => { - 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}) - startGetWorker() + if (inputValue != "") { + if (!inputDisabled) { + 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}) + startGetWorker() + } + } } } @@ -145,6 +156,7 @@ const InputOutputBackend: React.FC = () => { message="" onSendClick={handleSendClick} onMicClick={handleMicClick} + inputDisabled={inputDisabled} /> ) diff --git a/app/backend/threads/GetWorker.js b/app/backend/threads/GetWorker.js index 23d8e63..fcdcc2f 100644 --- a/app/backend/threads/GetWorker.js +++ b/app/backend/threads/GetWorker.js @@ -29,6 +29,6 @@ const fetchData = () => { .catch(error => { console.log('Error fetching data:', error); postMessage({error:"failed fetching data"}) - + setTimeout(() => fetchData(),1000) }) } \ No newline at end of file diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js index 730c852..d6f6b04 100644 --- a/app/backend/threads/PostWorker.js +++ b/app/backend/threads/PostWorker.js @@ -2,7 +2,7 @@ import axios from "axios"; onmessage = (e) => { const { messages = [{ role: "assistant", content: "Hello! How can I help you?" }], ai_model = "phi3.5", access_token } = e.data - messages.unshift({ role: "system", content: "You are a Helpful assistant" }) + messages.unshift({ role: "system", content: "You are a Helpful assistant. you give short answers" }) const Message = { messages: messages, diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 96721bd..26a3f99 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,5 +1,5 @@ // Header.tsx -import React from 'react'; +import React, { useState } from 'react'; import Login from './Login'; interface HeaderProps { @@ -11,29 +11,32 @@ interface HeaderProps { } const Header: React.FC = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => { + const [menuOpen, setMenuOpen] = useState(false) + + const toggleMenu = () => { + setMenuOpen(!menuOpen) + } + return ( <>
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • - {showToggle && showHistoryModelsToggle && ( -
  • - + + {showToggle && showHistoryModelsToggle && ( + -
    • - )} -
+ )} + + {/* */}
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index cf9dffc..f22ee57 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -4,21 +4,25 @@ interface InputProps { message: string; onSendClick: (message: string) => void; onMicClick: () => void; + inputDisabled:boolean } const InputFrontend = React.forwardRef( - ({ message, onSendClick, onMicClick }, ref: ForwardedRef) => { + ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef) => { const [inputValue, setInputValue] = useState(''); + const handleInputChange = (e: React.ChangeEvent) => { setInputValue(e.target.value); }; const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - onSendClick(inputValue); // Call the function passed via props - setInputValue(''); // Optionally clear input after submission - event.preventDefault(); // Prevent default action (e.g., form submission) + if (!inputDisabled) { + if (event.key === 'Enter') { + onSendClick(inputValue); // Call the function passed via props + setInputValue(''); // Optionally clear input after submission + event.preventDefault(); // Prevent default action (e.g., form submission) + } } }; @@ -32,7 +36,7 @@ const InputFrontend = React.forwardRef( onChange={handleInputChange} onKeyDown={handleKeyDown} /> -