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

refactor: integrate mobile preview functionality in citation components and enhance styling for improved usability

Browse source
This commit is contained in:
Anish Sarkar 2026-05-15 04:13:58 +05:30
parent 4dd5871318
commit 5092bd3e8c
3 changed files with 80 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

49
surfsense_web/components/assistant-ui/inline-citation.tsx
View file

@ -8,6 +8,7 @@ import type { FC } from "react";
import { useState } from "react"; import { useState } from "react";
import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom"; import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom";
import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context"; import { useCitationMetadata } from "@/components/assistant-ui/citation-metadata-context";
import { CitationPanelContent } from "@/components/citation-panel/citation-panel";
import { Citation } from "@/components/tool-ui/citation"; import { Citation } from "@/components/tool-ui/citation";
import { CitationHoverPopover } from "@/components/tool-ui/citation/citation-hover-popover"; import { CitationHoverPopover } from "@/components/tool-ui/citation/citation-hover-popover";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -80,19 +81,45 @@ export const InlineCitation: FC<InlineCitationProps> = ({ chunkId, isDocsChunk =
}; };
const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => { const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
const isTouchLike = useMediaQuery("(hover: none), (pointer: coarse)");
const openCitationPanel = useSetAtom(openCitationPanelAtom); const openCitationPanel = useSetAtom(openCitationPanelAtom);
const [mobilePreviewOpen, setMobilePreviewOpen] = useState(false);
const handleClick = () => {
if (isTouchLike) {
setMobilePreviewOpen(true);
return;
}
openCitationPanel({ chunkId });
};
return ( return (
<Button <>
type="button" <Button
variant="ghost" type="button"
onClick={() => openCitationPanel({ chunkId })} variant="ghost"
className="ml-0.5 inline-flex h-5 min-w-5 items-center justify-center gap-0.5 rounded-md bg-popover px-1.5 text-[11px] font-medium text-popover-foreground/80 align-baseline" onClick={handleClick}
title={`View source chunk #${chunkId}`} className="ml-0.5 inline-flex h-5 min-w-5 items-center justify-center gap-0.5 rounded-md bg-popover px-1.5 text-[11px] font-medium text-popover-foreground/80 align-baseline"
aria-label={`View cited chunk ${chunkId}`} title={`View source chunk #${chunkId}`}
> aria-label={`View cited chunk ${chunkId}`}
{chunkId} >
</Button> {chunkId}
</Button>
<Drawer open={mobilePreviewOpen} onOpenChange={setMobilePreviewOpen} shouldScaleBackground={false}>
<DrawerContent
className="h-[85vh] max-h-[85vh] z-80 overflow-hidden"
overlayClassName="z-80"
>
<DrawerHandle />
<DrawerHeader className="pb-0">
<DrawerTitle>Citation</DrawerTitle>
</DrawerHeader>
<div className="min-h-0 flex-1 flex flex-col overflow-hidden">
<CitationPanelContent chunkId={chunkId} showHeader={false} />
</div>
</DrawerContent>
</Drawer>
</>
); );
}; };
@ -131,7 +158,7 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => {
</CitationHoverPopover> </CitationHoverPopover>
<Drawer open={mobilePreviewOpen} onOpenChange={setMobilePreviewOpen} shouldScaleBackground={false}> <Drawer open={mobilePreviewOpen} onOpenChange={setMobilePreviewOpen} shouldScaleBackground={false}>
<DrawerContent <DrawerContent
className="max-h-[85vh] z-80 bg-popover text-popover-foreground" className="max-h-[85vh] z-80"
overlayClassName="z-80" overlayClassName="z-80"
> >
<DrawerHandle /> <DrawerHandle />

110
surfsense_web/components/citation-panel/citation-panel.tsx
View file

@ -2,9 +2,9 @@
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useSetAtom } from "jotai"; import { useSetAtom } from "jotai";
import { ChevronDown, ChevronUp, ExternalLink, XIcon } from "lucide-react"; import { XIcon } from "lucide-react";
import type { FC } from "react"; import type { FC } from "react";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef } from "react";
import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom"; import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
import { MarkdownViewer } from "@/components/markdown-viewer"; import { MarkdownViewer } from "@/components/markdown-viewer";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -12,29 +12,27 @@ import { Spinner } from "@/components/ui/spinner";
import { documentsApiService } from "@/lib/apis/documents-api.service"; import { documentsApiService } from "@/lib/apis/documents-api.service";
const DEFAULT_CHUNK_WINDOW = 5; const DEFAULT_CHUNK_WINDOW = 5;
const EXPANDED_CHUNK_WINDOW = 50;
interface CitationPanelContentProps { interface CitationPanelContentProps {
chunkId: number; chunkId: number;
onClose?: () => void; onClose?: () => void;
showHeader?: boolean;
} }
/** /**
* Right-panel citation viewer. Shows the cited chunk surrounded by * Right-panel citation viewer. Shows the cited chunk surrounded by
* adjacent chunks (±N chunks via the API's `chunk_window` parameter), * adjacent chunks (±N chunks via the API's `chunk_window` parameter),
* with the cited one visually highlighted and auto-scrolled into view. * with the cited one visually highlighted and auto-scrolled into view.
* The window can be expanded to a wider range, or the user can jump to * The user can jump to the full document via the editor panel.
* the full document via the editor panel.
*/ */
export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, onClose }) => { export const CitationPanelContent: FC<CitationPanelContentProps> = ({
chunkId,
onClose,
showHeader = true,
}) => {
const openEditorPanel = useSetAtom(openEditorPanelAtom); const openEditorPanel = useSetAtom(openEditorPanelAtom);
const [expanded, setExpanded] = useState(false);
useEffect(() => { const chunkWindow = DEFAULT_CHUNK_WINDOW;
setExpanded(false);
}, []);
const chunkWindow = expanded ? EXPANDED_CHUNK_WINDOW : DEFAULT_CHUNK_WINDOW;
const { data, isLoading, error } = useQuery({ const { data, isLoading, error } = useQuery({
queryKey: ["citation-panel", chunkId, chunkWindow] as const, queryKey: ["citation-panel", chunkId, chunkWindow] as const,
@ -87,30 +85,42 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, o
return ( return (
<> <>
<div className="shrink-0"> <div className="shrink-0">
<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b"> {showHeader && (
<h2 className="select-none text-lg font-semibold">Citation</h2> <div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
<div className="flex items-center gap-1 shrink-0"> <h2 className="select-none text-lg font-semibold">Citation</h2>
{onClose && ( <div className="flex items-center gap-1 shrink-0">
<Button {onClose && (
variant="ghost" <Button
size="icon" variant="ghost"
onClick={onClose} size="icon"
className="h-8 w-8 rounded-full shrink-0 text-muted-foreground hover:text-accent-foreground" onClick={onClose}
> className="h-8 w-8 rounded-full shrink-0 text-muted-foreground hover:text-accent-foreground"
<XIcon className="h-4 w-4" /> >
<span className="sr-only">Close citation panel</span> <XIcon className="h-4 w-4" />
</Button> <span className="sr-only">Close citation panel</span>
)} </Button>
)}
</div>
</div> </div>
</div> )}
<div className="flex h-10 items-center justify-between gap-2 border-b px-4"> <div className="grid h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
<div className="min-w-0 flex flex-1 items-center gap-2"> <div className="min-w-0 flex flex-1 items-center gap-2">
<p className="truncate text-sm text-muted-foreground"> <p className="truncate text-sm text-muted-foreground">
{data?.title ?? (isLoading ? "Loading…" : `Chunk #${chunkId}`)} {data?.title ?? (isLoading ? "Loading…" : `Chunk #${chunkId}`)}
</p> </p>
</div> </div>
<div className="flex items-center gap-1 shrink-0 text-[11px] text-muted-foreground"> <div className="flex items-center gap-3 shrink-0 text-[11px] text-muted-foreground">
{totalChunks > 0 && <span>{totalChunks} chunks</span>} {totalChunks > 0 && <span>{totalChunks} chunks</span>}
{!isLoading && !error && data && (
<Button
variant="default"
size="sm"
className="h-6 px-1.5 text-[11px]"
onClick={handleOpenFullDocument}
>
Open
</Button>
)}
</div> </div>
</div> </div>
</div> </div>
@ -145,8 +155,8 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, o
data-cited={isCited || undefined} data-cited={isCited || undefined}
className={ className={
isCited isCited
? "rounded-md border-2 border-primary bg-primary/5 px-4 py-3 shadow-sm" ? "rounded-md border-2 border-primary bg-accent px-4 py-3 shadow-sm"
: "rounded-md border border-border/40 bg-muted/20 px-4 py-3 opacity-70 transition-opacity hover:opacity-100" : "rounded-md bg-accent px-4 py-3 opacity-70 transition-opacity hover:opacity-100"
} }
> >
<div className="mb-1.5 flex items-center justify-between"> <div className="mb-1.5 flex items-center justify-between">
@ -179,44 +189,6 @@ export const CitationPanelContent: FC<CitationPanelContentProps> = ({ chunkId, o
</> </>
)} )}
</div> </div>
{!isLoading && !error && data && (
<div className="shrink-0 flex flex-wrap items-center justify-end gap-2 border-t px-4 py-3">
<div className="flex items-center gap-2">
{(hasMoreAbove || hasMoreBelow) && !expanded && (
<Button
variant="ghost"
size="sm"
className="h-8 text-xs"
onClick={() => setExpanded(true)}
>
<ChevronDown className="mr-1 size-3.5" />
More context
</Button>
)}
{expanded && (
<Button
variant="ghost"
size="sm"
className="h-8 text-xs"
onClick={() => setExpanded(false)}
>
<ChevronUp className="mr-1 size-3.5" />
Less
</Button>
)}
<Button
variant="default"
size="sm"
className="h-8 text-xs"
onClick={handleOpenFullDocument}
>
<ExternalLink className="mr-1 size-3.5" />
Open full document
</Button>
</div>
</div>
)}
</> </>
); );
}; };

2
surfsense_web/components/editor-panel/editor-panel.tsx
View file

@ -463,7 +463,7 @@ export function EditorPanelContent({
</Button> </Button>
</div> </div>
</div> </div>
<div className="flex h-10 items-center justify-between gap-2 border-b px-4"> <div className="grid h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
<div className="min-w-0 flex flex-1 items-center gap-2"> <div className="min-w-0 flex flex-1 items-center gap-2">
<p className="truncate text-sm text-muted-foreground">{displayTitle}</p> <p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
</div> </div>