(fix:input-lag) localised the input state to messageInput

frontend/src/components/MessageInput.tsx

@@ -30,9 +30,7 @@ import SourcesPopup from './SourcesPopup';
 import ToolsPopup from './ToolsPopup';
 
 type MessageInputProps = {
-  value: string;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onSubmit: () => void;
+  onSubmit: (text: string) => void;
   loading: boolean;
   showSourceButton?: boolean;
   showToolButton?: boolean;
@@ -40,8 +38,6 @@ type MessageInputProps = {
 };
 
 export default function MessageInput({
-  value,
-  onChange,
   onSubmit,
   loading,
   showSourceButton = true,
@@ -50,6 +46,7 @@ export default function MessageInput({
 }: MessageInputProps) {
   const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
+  const [value, setValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const sourceButtonRef = useRef<HTMLButtonElement>(null);
   const toolButtonRef = useRef<HTMLButtonElement>(null);
@@ -232,6 +229,11 @@ export default function MessageInput({
     handleInput();
   }, []);
 
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(e.target.value);
+    handleInput();
+  };
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -248,7 +250,10 @@ export default function MessageInput({
   };
 
   const handleSubmit = () => {
-    onSubmit();
+    if (value.trim() && !loading) {
+      onSubmit(value);
+      setValue('');
+    }
   };
   return (
     <div className="mx-2 flex w-full flex-col">
@@ -334,7 +339,7 @@ export default function MessageInput({
             id="message-input"
             ref={inputRef}
             value={value}
-            onChange={onChange}
+            onChange={handleChange}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
             className="inputbox-style no-scrollbar w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-t-[23px] bg-lotion px-4 py-3 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 sm:px-6 sm:py-5"

frontend/src/conversation/Conversation.tsx

@@ -39,7 +39,6 @@ export default function Conversation() {
   const conversationId = useSelector(selectConversationId);
   const selectedAgent = useSelector(selectSelectedAgent);
 
-  const [input, setInput] = useState<string>('');
   const [uploadModalState, setUploadModalState] =
     useState<ActiveState>('INACTIVE');
   const [files, setFiles] = useState<File[]>([]);
@@ -143,19 +142,19 @@ export default function Conversation() {
   };
 
   const handleQuestionSubmission = (
-    updatedQuestion?: string,
+    question?: string,
     updated?: boolean,
     indx?: number,
   ) => {
     if (updated === true) {
-      handleQuestion({ question: updatedQuestion as string, index: indx });
-    } else if (input && status !== 'loading') {
+      handleQuestion({ question: question as string, index: indx });
+    } else if (question && status !== 'loading') {
       if (lastQueryReturnedErr) {
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: input,
+              prompt: question,
             },
           }),
         );
@@ -165,10 +164,9 @@ export default function Conversation() {
         });
       } else {
         handleQuestion({
-          question: input,
+          question,
         });
       }
-      setInput('');
     }
   };
 
@@ -207,9 +205,9 @@ export default function Conversation() {
           </label>
           <input {...getInputProps()} id="file-upload" />
           <MessageInput
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onSubmit={handleQuestionSubmission}
+            onSubmit={(text) => {
+              handleQuestionSubmission(text);
+            }}
             loading={status === 'loading'}
             showSourceButton={selectedAgent ? false : true}
             showToolButton={selectedAgent ? false : true}

frontend/src/conversation/SharedConversation.tsx

@@ -35,7 +35,6 @@ export const SharedConversation = () => {
   const apiKey = useSelector(selectClientAPIKey);
   const status = useSelector(selectStatus);
 
-  const [input, setInput] = useState('');
   const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
 
@@ -76,15 +75,15 @@ export const SharedConversation = () => {
         });
   };
 
-  const handleQuestionSubmission = () => {
-    if (input && status !== 'loading') {
+  const handleQuestionSubmission = (question?: string) => {
+    if (question && status !== 'loading') {
       if (lastQueryReturnedErr) {
         // update last failed query with new prompt
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: input,
+              prompt: question,
             },
           }),
         );
@@ -93,9 +92,8 @@ export const SharedConversation = () => {
           isRetry: true,
         });
       } else {
-        handleQuestion({ question: input });
+        handleQuestion({ question });
       }
-      setInput('');
     }
   };
 
@@ -156,9 +154,9 @@ export const SharedConversation = () => {
         <div className="flex w-full max-w-[1200px] flex-col items-center gap-4 pb-2 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
           {apiKey ? (
             <MessageInput
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onSubmit={() => handleQuestionSubmission()}
+              onSubmit={(text) => {
+                handleQuestionSubmission(text);
+              }}
               loading={status === 'loading'}
               showSourceButton={false}
               showToolButton={false}