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>
     )