From 615a58ce284592dad4480a239935061742dd4a4b Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Tue, 24 Sep 2024 13:50:46 +0200
Subject: [PATCH] no input while generating/empty

---
 app/backend/InputOutputHandler.tsx | 15 +++++++--------
 app/components/InputFrontend.tsx   | 16 ++++++++++------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 12f5d10..86bb594 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/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>
     )
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<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}>