Fix: Autoselect input text box on pageload and conversation reset (#2177) (#2194)

* Fix: Autoselect input text box on pageload and conversation reset

- Added autoFocus to useEffect dependency array in MessageInput
- Added key prop to MessageInput to force remount on conversation reset
- Implemented refocus after message submission
- Removed duplicate input clearing logic in handleKeyDown

Fixes #2177

* fix: optimize input handling

---------

Co-authored-by: Alex <a@tushynski.me>

frontend/src/components/MessageInput.tsx

@@ -500,7 +500,7 @@ export default function MessageInput({
     return () => clearInterval(interval);
   }, [attachments, dispatch]);
 
-  const handleInput = () => {
+  const handleInput = useCallback(() => {
     if (inputRef.current) {
       if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
       else inputRef.current.style.height = '64px';
@@ -509,12 +509,21 @@ export default function MessageInput({
         96,
       )}px`;
     }
-  };
+  }, []);
+
+  const isMountedRef = useRef(true);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     if (autoFocus) inputRef.current?.focus();
     handleInput();
-  }, []);
+  }, [autoFocus, handleInput]);
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
@@ -525,10 +534,7 @@ export default function MessageInput({
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
-      if (inputRef.current) {
-        inputRef.current.value = '';
-        handleInput();
-      }
+      handleInput();
     }
   };
 
@@ -565,6 +571,14 @@ export default function MessageInput({
     if (value.trim() && !loading) {
       onSubmit(value);
       setValue('');
+      // Refocus input after submission if autoFocus is enabled
+      if (autoFocus) {
+        setTimeout(() => {
+          if (isMountedRef.current) {
+            inputRef.current?.focus();
+          }
+        }, 0);
+      }
     }
   };
 

frontend/src/conversation/Conversation.tsx

@@ -179,6 +179,7 @@ export default function Conversation() {
       <div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
         <div className="flex w-full items-center rounded-[40px] px-2">
           <MessageInput
+            key={conversationId || 'new'}
             onSubmit={(text) => {
               handleQuestionSubmission(text);
             }}