From 2f84f1b547166c55782adbd99e12ee884b965a48 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 18 Jan 2026 19:43:46 +0530
Subject: [PATCH] refactor: streamline DocumentMentionPicker integration in
 Composer

- Removed unnecessary wrapper div around DocumentMentionPicker for cleaner rendering.
- Added containerStyle prop to DocumentMentionPicker for improved positioning flexibility.
- Adjusted debounce timing in DocumentMentionPicker to enhance responsiveness during user input.
---
 .../components/assistant-ui/thread.tsx        | 29 ++++++++-----------
 .../new-chat/document-mention-picker.tsx      | 12 ++++++--
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 1bdc424cc..7a06f82eb 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -392,10 +392,17 @@ const Composer: FC = () => {
 				{showDocumentPopover &&
 					typeof document !== "undefined" &&
 					createPortal(
-						<div
-							className="fixed shadow-2xl rounded-lg border border-border overflow-hidden bg-popover"
-							style={{
-								zIndex: 9999,
+						<DocumentMentionPicker
+							ref={documentPickerRef}
+							searchSpaceId={Number(search_space_id)}
+							onSelectionChange={handleDocumentsMention}
+							onDone={() => {
+								setShowDocumentPopover(false);
+								setMentionQuery("");
+							}}
+							initialSelectedDocuments={mentionedDocuments}
+							externalSearch={mentionQuery}
+							containerStyle={{
 								bottom: editorContainerRef.current
 									? `${window.innerHeight - editorContainerRef.current.getBoundingClientRect().top + 8}px`
 									: "200px",
@@ -403,19 +410,7 @@ const Composer: FC = () => {
 									? `${editorContainerRef.current.getBoundingClientRect().left}px`
 									: "50%",
 							}}
-						>
-							<DocumentMentionPicker
-								ref={documentPickerRef}
-								searchSpaceId={Number(search_space_id)}
-								onSelectionChange={handleDocumentsMention}
-								onDone={() => {
-									setShowDocumentPopover(false);
-									setMentionQuery("");
-								}}
-								initialSelectedDocuments={mentionedDocuments}
-								externalSearch={mentionQuery}
-							/>
-						</div>,
+						/>,
 						document.body
 					)}
 				<ComposerAction />
diff --git a/surfsense_web/components/new-chat/document-mention-picker.tsx b/surfsense_web/components/new-chat/document-mention-picker.tsx
index c7d4d9e84..7e39c6100 100644
--- a/surfsense_web/components/new-chat/document-mention-picker.tsx
+++ b/surfsense_web/components/new-chat/document-mention-picker.tsx
@@ -27,11 +27,13 @@ interface DocumentMentionPickerProps {
 	onDone: () => void;
 	initialSelectedDocuments?: Pick<Document, "id" | "title" | "document_type">[];
 	externalSearch?: string;
+	/** Positioning styles for the container */
+	containerStyle?: React.CSSProperties;
 }
 
 const PAGE_SIZE = 20;
 const MIN_SEARCH_LENGTH = 2;
-const DEBOUNCE_MS = 300;
+const DEBOUNCE_MS = 100;
 
 /**
  * Debounce hook - waits until user stops typing before firing
@@ -66,7 +68,7 @@ export const DocumentMentionPicker = forwardRef<
 	DocumentMentionPickerRef,
 	DocumentMentionPickerProps
 >(function DocumentMentionPicker(
-	{ searchSpaceId, onSelectionChange, onDone, initialSelectedDocuments = [], externalSearch = "" },
+	{ searchSpaceId, onSelectionChange, onDone, initialSelectedDocuments = [], externalSearch = "", containerStyle },
 	ref
 ) {
 	const queryClient = useQueryClient();
@@ -426,7 +428,11 @@ export const DocumentMentionPicker = forwardRef<
 
 	return (
 		<div
-			className="flex flex-col w-[280px] sm:w-[320px] bg-popover rounded-lg"
+			className="fixed shadow-2xl rounded-lg border border-border overflow-hidden bg-popover flex flex-col w-[280px] sm:w-[320px]"
+			style={{
+				zIndex: 9999,
+				...containerStyle,
+			}}
 			onKeyDown={handleKeyDown}
 			role="listbox"
 			tabIndex={-1}