From 9daaf12658b935c7ac2a3252ffd4f1850ed1fdca Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Tue, 2 Jun 2026 23:44:36 +0530 Subject: [PATCH] fix(thread): adjust Composer component height for improved user experience --- .../components/assistant-ui/thread.tsx | 14 ++++++-- surfsense_web/lib/chat/example-prompts.ts | 32 +++++++++---------- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx index 5748b441c..458bdabfb 100644 --- a/surfsense_web/components/assistant-ui/thread.tsx +++ b/surfsense_web/components/assistant-ui/thread.tsx @@ -445,6 +445,7 @@ const Composer: FC = () => { const [actionQuery, setActionQuery] = useState(""); const [suggestionAnchorPoint, setSuggestionAnchorPoint] = useState(null); + const [isComposerInputEmpty, setIsComposerInputEmpty] = useState(true); const editorRef = useRef(null); const prevMentionedDocsRef = useRef>(new Map()); const documentPickerRef = useRef(null); @@ -536,6 +537,7 @@ const Composer: FC = () => { // short-circuit keeps pure-text keystrokes from churning the atom. const handleEditorChange = useCallback( (text: string, docs: MentionedDocument[]) => { + setIsComposerInputEmpty(text.trim().length === 0 && docs.length === 0); aui.composer().setText(text); setMentionedDocuments((prev) => { if (prev.length === docs.length) { @@ -651,6 +653,7 @@ const Composer: FC = () => { : action.prompt; editorRef.current?.setText(finalPrompt); aui.composer().setText(finalPrompt); + setIsComposerInputEmpty(false); setShowPromptPicker(false); setActionQuery(""); setSuggestionAnchorPoint(null); @@ -662,6 +665,7 @@ const Composer: FC = () => { (prompt: string) => { editorRef.current?.setText(prompt); aui.composer().setText(prompt); + setIsComposerInputEmpty(false); editorRef.current?.focus(); }, [aui] @@ -676,6 +680,7 @@ const Composer: FC = () => { : `${action.prompt}\n\n${clipboardInitialText}`; editorRef.current?.setText(finalPrompt); aui.composer().setText(finalPrompt); + setIsComposerInputEmpty(false); setShowPromptPicker(false); setActionQuery(""); setSuggestionAnchorPoint(null); @@ -755,6 +760,7 @@ const Composer: FC = () => { aui.composer().send(); editorRef.current?.clear(); + setIsComposerInputEmpty(true); setMentionedDocuments([]); }, [ showDocumentPopover, @@ -904,7 +910,7 @@ const Composer: FC = () => { onDismiss={() => setClipboardInitialText(undefined)} /> )} -
+
{ onDocumentRemove={handleDocumentRemove} onSubmit={handleSubmit} onKeyDown={handleKeyDown} - className="min-h-[24px] **:data-slate-placeholder:font-normal" + className="min-h-[48px] sm:min-h-[24px] **:data-slate-placeholder:font-normal" />
@@ -926,7 +932,9 @@ const Composer: FC = () => { isThreadEmpty={isThreadEmpty} onVisibleChange={setConnectToolsTrayVisible} /> - {isThreadEmpty && } + {isThreadEmpty && isComposerInputEmpty ? ( + + ) : null}
); diff --git a/surfsense_web/lib/chat/example-prompts.ts b/surfsense_web/lib/chat/example-prompts.ts index f7cb52b7d..4dd7a00c0 100644 --- a/surfsense_web/lib/chat/example-prompts.ts +++ b/surfsense_web/lib/chat/example-prompts.ts @@ -23,40 +23,40 @@ export const CHAT_EXAMPLE_CATEGORIES: ChatExampleCategory[] = [ id: "search", label: "Search & Summarize", prompts: [ - "Summarize the key points across all the documents in this space.", - "What do my files say about [topic]? Answer with citations.", - "Find every mention of [keyword] and list the sources.", - "Compare these two documents and highlight the differences.", + "Summarize the key points across all the documents in this space", + "What do my files say about [topic]? Answer with citations", + "Find every mention of [keyword] and list the sources", + "Compare these two documents and highlight the differences", ], }, { id: "create", label: "Create", prompts: [ - "Write a cited research report on [topic] from my documents.", - "Turn this folder into a two-host podcast I can listen to.", - "Create a slide deck and a narrated video overview from these sources.", - "Tailor my resume to this job description so it gets past ATS and lands an interview.", + "Write a cited research report on [topic] from my documents", + "Turn this folder into a two-host podcast I can listen to", + "Create a slide deck and a narrated video overview from these sources", + "Tailor my resume to this job description so it gets past ATS and lands an interview", ], }, { id: "automate", label: "Automate", prompts: [ - "Email me a daily brief of new documents in my knowledge base every morning.", - "When a PDF lands in my Research folder, generate a cited AI summary.", - "Generate a weekly status report from my Slack and Gmail every Friday.", - "Build an automation that turns new meeting notes into minutes with action items.", + "Email me a daily brief of new documents in my knowledge base every morning", + "When a PDF lands in my Research folder, generate a cited AI summary", + "Generate a weekly status report from my Slack and Gmail every Friday", + "Build an automation that turns new meeting notes into minutes with action items", ], }, { id: "tools", label: "Across your tools", prompts: [ - "Search across my Notion, Slack, Google Drive and Gmail for [topic].", - "Post this research summary to my Notion workspace.", - "Send these meeting action items to our team Slack channel.", - "Create a Jira ticket from this bug report.", + "Search across my Notion, Slack, Google Drive and Gmail for [topic]", + "Post this research summary to my Notion workspace", + "Send these meeting action items to our team Slack channel", + "Create a Jira ticket from this bug report", ], }, ];