apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-20 23:21:06 +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 && {showDocumentPopover &&
typeof document !== "undefined" && typeof document !== "undefined" &&
createPortal( createPortal(
<div <DocumentMentionPicker
className="fixed shadow-2xl rounded-lg border border-border overflow-hidden bg-popover" ref={documentPickerRef}
style={{ searchSpaceId={Number(search_space_id)}
zIndex: 9999, onSelectionChange={handleDocumentsMention}
onDone={() => {
setShowDocumentPopover(false);
setMentionQuery("");
}}
initialSelectedDocuments={mentionedDocuments}
externalSearch={mentionQuery}
containerStyle={{
bottom: editorContainerRef.current bottom: editorContainerRef.current
? `${window.innerHeight - editorContainerRef.current.getBoundingClientRect().top + 8}px` ? `${window.innerHeight - editorContainerRef.current.getBoundingClientRect().top + 8}px`
: "200px", : "200px",
@ -403,19 +410,7 @@ const Composer: FC = () => {
? `${editorContainerRef.current.getBoundingClientRect().left}px` ? `${editorContainerRef.current.getBoundingClientRect().left}px`
: "50%", : "50%",
}} }}
> />,
<DocumentMentionPicker
ref={documentPickerRef}
searchSpaceId={Number(search_space_id)}
onSelectionChange={handleDocumentsMention}
onDone={() => {
setShowDocumentPopover(false);
setMentionQuery("");
}}
initialSelectedDocuments={mentionedDocuments}
externalSearch={mentionQuery}
/>
</div>,
document.body document.body
)} )}
<ComposerAction /> <ComposerAction />

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

@ -27,11 +27,13 @@ interface DocumentMentionPickerProps {
onDone: () => void; onDone: () => void;
initialSelectedDocuments?: Pick<Document, "id" | "title" | "document_type">[]; initialSelectedDocuments?: Pick<Document, "id" | "title" | "document_type">[];
externalSearch?: string; externalSearch?: string;
/** Positioning styles for the container */
containerStyle?: React.CSSProperties;
} }
const PAGE_SIZE = 20; const PAGE_SIZE = 20;
const MIN_SEARCH_LENGTH = 2; const MIN_SEARCH_LENGTH = 2;
const DEBOUNCE_MS = 300; const DEBOUNCE_MS = 100;
/** /**
* Debounce hook - waits until user stops typing before firing * Debounce hook - waits until user stops typing before firing
@ -66,7 +68,7 @@ export const DocumentMentionPicker = forwardRef<
DocumentMentionPickerRef, DocumentMentionPickerRef,
DocumentMentionPickerProps DocumentMentionPickerProps
>(function DocumentMentionPicker( >(function DocumentMentionPicker(
{ searchSpaceId, onSelectionChange, onDone, initialSelectedDocuments = [], externalSearch = "" }, { searchSpaceId, onSelectionChange, onDone, initialSelectedDocuments = [], externalSearch = "", containerStyle },
ref ref
) { ) {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -426,7 +428,11 @@ export const DocumentMentionPicker = forwardRef<
return ( return (
<div <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} onKeyDown={handleKeyDown}
role="listbox" role="listbox"
tabIndex={-1} tabIndex={-1}