no input while generating/empty

app/backend/InputOutputHandler.tsx

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

app/components/InputFrontend.tsx

@@ -4,21 +4,25 @@ interface InputProps {
   message: string;
   onSendClick: (message: string) => void;
   onMicClick: () => void;
+  inputDisabled:boolean
 }
 
 const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
-  ({ message, onSendClick, onMicClick }, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ message, onSendClick, onMicClick, inputDisabled }, ref: ForwardedRef<HTMLDivElement>) => {
     const [inputValue, setInputValue] = useState('');
+    
 
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(e.target.value);
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      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<HTMLDivElement, InputProps>(
           onChange={handleInputChange}
           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" />
         </button>
         <button type="button" onClick={onMicClick}>