apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: streamline DocumentMentionPicker integration in Composer

Browse source 
- 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.
This commit is contained in:
Anish Sarkar 2026-01-18 19:43:46 +05:30
parent 8c29f21acb
commit 2f84f1b547
2 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 />

12
surfsense_web/components/new-chat/document-mention-picker.tsx
View file

@ -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}