refactor: enhance auto-focus behavior in Composer component

- Implemented a mechanism to auto-focus the editor immediately after the first message is sent, improving user experience by allowing quick follow-up queries.
- Introduced a reference to track the previous state of the thread to ensure focus only occurs during the transition from empty to non-empty.
This commit is contained in:
Anish Sarkar 2025-12-26 01:55:45 +05:30
parent 7f809ffa1b
commit ad5a49c2c6

View file

@ -409,6 +409,7 @@ const Composer: FC = () => {
const setMentionedDocumentIds = useSetAtom(mentionedDocumentIdsAtom);
const composerRuntime = useComposerRuntime();
const hasAutoFocusedRef = useRef(false);
const prevIsThreadEmptyRef = useRef(true);
// Check if thread is empty (new chat)
const isThreadEmpty = useAssistantState(({ thread }) => thread.isEmpty);
@ -428,11 +429,20 @@ const Composer: FC = () => {
}
}, [isThreadEmpty]);
// Reset auto-focus flag when thread becomes non-empty (user sent a message)
// Auto-focus editor immediately after first message is sent (when thread transitions from empty to non-empty)
// This allows the user to start typing the second query right away
useEffect(() => {
if (!isThreadEmpty) {
hasAutoFocusedRef.current = false;
// Only focus when transitioning from empty to non-empty (first message sent)
if (prevIsThreadEmptyRef.current && !isThreadEmpty && editorRef.current) {
// Small delay to ensure the editor is ready after the message is sent
const timeoutId = setTimeout(() => {
editorRef.current?.focus();
}, 50);
prevIsThreadEmptyRef.current = isThreadEmpty;
return () => clearTimeout(timeoutId);
}
// Update the ref to track the previous state
prevIsThreadEmptyRef.current = isThreadEmpty;
}, [isThreadEmpty]);
// Sync mentioned document IDs to atom for use in chat request