diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx index 750b0b12..86bb0f6d 100644 --- a/frontend/src/components/MessageInput.tsx +++ b/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) => { 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); + } } }; diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx index 2ab193ec..62fe7c54 100644 --- a/frontend/src/conversation/Conversation.tsx +++ b/frontend/src/conversation/Conversation.tsx @@ -179,6 +179,7 @@ export default function Conversation() {
{ handleQuestionSubmission(text); }}