apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-05 13:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor: enhance auto-focus behavior in Composer component

Browse source 
- 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
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
surfsense_web/components/assistant-ui/thread.tsx
View file

@ -409,6 +409,7 @@ const Composer: FC = () => {
const setMentionedDocumentIds = useSetAtom(mentionedDocumentIdsAtom); const setMentionedDocumentIds = useSetAtom(mentionedDocumentIdsAtom);
const composerRuntime = useComposerRuntime(); const composerRuntime = useComposerRuntime();
const hasAutoFocusedRef = useRef(false); const hasAutoFocusedRef = useRef(false);
const prevIsThreadEmptyRef = useRef(true);
// Check if thread is empty (new chat) // Check if thread is empty (new chat)
const isThreadEmpty = useAssistantState(({ thread }) => thread.isEmpty); const isThreadEmpty = useAssistantState(({ thread }) => thread.isEmpty);
@ -428,11 +429,20 @@ const Composer: FC = () => {
} }
}, [isThreadEmpty]); }, [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(() => { useEffect(() => {
if (!isThreadEmpty) { // Only focus when transitioning from empty to non-empty (first message sent)
hasAutoFocusedRef.current = false; 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]); }, [isThreadEmpty]);
// Sync mentioned document IDs to atom for use in chat request // Sync mentioned document IDs to atom for use in chat request