From 5092bd3e8cab4da3172ebca86f87f967e1609ce0 Mon Sep 17 00:00:00 2001 From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com> Date: Fri, 15 May 2026 04:13:58 +0530 Subject: [PATCH] refactor: integrate mobile preview functionality in citation components and enhance styling for improved usability --- .../assistant-ui/inline-citation.tsx | 49 ++++++-- .../citation-panel/citation-panel.tsx | 110 +++++++----------- .../components/editor-panel/editor-panel.tsx | 2 +- 3 files changed, 80 insertions(+), 81 deletions(-) diff --git a/surfsense_web/components/assistant-ui/inline-citation.tsx b/surfsense_web/components/assistant-ui/inline-citation.tsx index 28b4c43c3..886002c83 100644 --- a/surfsense_web/components/assistant-ui/inline-citation.tsx +++ b/surfsense_web/components/assistant-ui/inline-citation.tsx @@ -8,6 +8,7 @@ import type { FC } from "react"; import { useState } from "react"; import { openCitationPanelAtom } from "@/atoms/citation/citation-panel.atom"; 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 { CitationHoverPopover } from "@/components/tool-ui/citation/citation-hover-popover"; import { Button } from "@/components/ui/button"; @@ -80,19 +81,45 @@ export const InlineCitation: FC = ({ chunkId, isDocsChunk = }; const NumericChunkCitation: FC<{ chunkId: number }> = ({ chunkId }) => { + const isTouchLike = useMediaQuery("(hover: none), (pointer: coarse)"); const openCitationPanel = useSetAtom(openCitationPanelAtom); + const [mobilePreviewOpen, setMobilePreviewOpen] = useState(false); + + const handleClick = () => { + if (isTouchLike) { + setMobilePreviewOpen(true); + return; + } + openCitationPanel({ chunkId }); + }; return ( - + <> + + + + + + Citation + +
+ +
+ + + ); }; @@ -131,7 +158,7 @@ const SurfsenseDocCitation: FC<{ chunkId: number }> = ({ chunkId }) => { diff --git a/surfsense_web/components/citation-panel/citation-panel.tsx b/surfsense_web/components/citation-panel/citation-panel.tsx index 715facbde..a63efa296 100644 --- a/surfsense_web/components/citation-panel/citation-panel.tsx +++ b/surfsense_web/components/citation-panel/citation-panel.tsx @@ -2,9 +2,9 @@ import { useQuery } from "@tanstack/react-query"; import { useSetAtom } from "jotai"; -import { ChevronDown, ChevronUp, ExternalLink, XIcon } from "lucide-react"; +import { XIcon } from "lucide-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 { MarkdownViewer } from "@/components/markdown-viewer"; import { Button } from "@/components/ui/button"; @@ -12,29 +12,27 @@ import { Spinner } from "@/components/ui/spinner"; import { documentsApiService } from "@/lib/apis/documents-api.service"; const DEFAULT_CHUNK_WINDOW = 5; -const EXPANDED_CHUNK_WINDOW = 50; interface CitationPanelContentProps { chunkId: number; onClose?: () => void; + showHeader?: boolean; } /** * Right-panel citation viewer. Shows the cited chunk surrounded by * adjacent chunks (±N chunks via the API's `chunk_window` parameter), * 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 full document via the editor panel. + * The user can jump to the full document via the editor panel. */ -export const CitationPanelContent: FC = ({ chunkId, onClose }) => { +export const CitationPanelContent: FC = ({ + chunkId, + onClose, + showHeader = true, +}) => { const openEditorPanel = useSetAtom(openEditorPanelAtom); - const [expanded, setExpanded] = useState(false); - useEffect(() => { - setExpanded(false); - }, []); - - const chunkWindow = expanded ? EXPANDED_CHUNK_WINDOW : DEFAULT_CHUNK_WINDOW; + const chunkWindow = DEFAULT_CHUNK_WINDOW; const { data, isLoading, error } = useQuery({ queryKey: ["citation-panel", chunkId, chunkWindow] as const, @@ -87,30 +85,42 @@ export const CitationPanelContent: FC = ({ chunkId, o return ( <>
-
-

Citation

-
- {onClose && ( - - )} + {showHeader && ( +
+

Citation

+
+ {onClose && ( + + )} +
-
-
+ )} +

{data?.title ?? (isLoading ? "Loading…" : `Chunk #${chunkId}`)}

-
+
{totalChunks > 0 && {totalChunks} chunks} + {!isLoading && !error && data && ( + + )}
@@ -145,8 +155,8 @@ export const CitationPanelContent: FC = ({ chunkId, o data-cited={isCited || undefined} className={ isCited - ? "rounded-md border-2 border-primary bg-primary/5 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 border-2 border-primary bg-accent px-4 py-3 shadow-sm" + : "rounded-md bg-accent px-4 py-3 opacity-70 transition-opacity hover:opacity-100" } >
@@ -179,44 +189,6 @@ export const CitationPanelContent: FC = ({ chunkId, o )}
- - {!isLoading && !error && data && ( -
-
- {(hasMoreAbove || hasMoreBelow) && !expanded && ( - - )} - {expanded && ( - - )} - -
-
- )} ); }; diff --git a/surfsense_web/components/editor-panel/editor-panel.tsx b/surfsense_web/components/editor-panel/editor-panel.tsx index d2dbd2127..3cb30cee6 100644 --- a/surfsense_web/components/editor-panel/editor-panel.tsx +++ b/surfsense_web/components/editor-panel/editor-panel.tsx @@ -463,7 +463,7 @@ export function EditorPanelContent({
-
+

{displayTitle}