"use client"; import * as React from "react"; import { type ReactNode } from "react"; import ReactMarkdown, { type Components } from "react-markdown"; import remarkGfm from "remark-gfm"; import rehypeRaw from "rehype-raw"; import { Check, ChevronLeft, ChevronRight, Copy, ScanText } from "lucide-react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { Spinner } from "@/components/ui/spinner"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "@/components/ui/resizable"; import { type ParseResponse, type ParseViewMode, } from "@/components/viewers/lib/parse-types"; /** Handlers the source-document surface receives so the markdown stays in sync. */ export interface ParseDocumentHandlers { onCurrentPageChange: (page: number) => void; onScrollProgressChange?: (progress: number) => void; } export interface ParseViewerProps { result: ParseResponse | null; isProcessing?: boolean; /** * Render the source document beside the extracted markdown. Omit to show the * markdown full-width. The document should tag its pages with * `data-page-number` so the two panes can scroll to each other. */ renderDocument?: (handlers: ParseDocumentHandlers) => ReactNode; /** Fired with the 1-based page nearest the top of the markdown viewport. */ onVisiblePageChange?: (page: number) => void; } export function ParseViewer({ result, isProcessing = false, renderDocument, onVisiblePageChange, }: ParseViewerProps) { const pages = result?.output?.pages ?? []; const hasOutput = result !== null && pages.length > 0; const [mode, setMode] = React.useState("rendered"); const [currentPage, setCurrentPage] = React.useState(1); // 1-based, tracks scroll // The markdown is a single scrolling document (like the image viewer); these // refs let the document pane and the page controls scroll it to a given page. const markdownViewportRef = React.useRef(null); const docRef = React.useRef(null); const scrollPaneToPage = ( ref: React.RefObject, page: number, ) => { ref.current ?.querySelector(`[data-page-number="${page}"]`) ?.scrollIntoView({ behavior: "smooth", block: "start" }); }; // Report the markdown page nearest the top of its viewport as it scrolls, // rAF-coalesced so the layout reads run at most once per frame. const scrollFrame = React.useRef(0); const lastReported = React.useRef(1); const measureScroll = React.useCallback(() => { scrollFrame.current = 0; const viewport = markdownViewportRef.current; if (!viewport) return; const rect = viewport.getBoundingClientRect(); const marker = rect.top + rect.height * 0.2; const pageEls = viewport.querySelectorAll("[data-page-number]"); let current = 1; for (const el of pageEls) { if (el.getBoundingClientRect().top <= marker) { current = Number(el.dataset.pageNumber); } else { break; } } if (current && current !== lastReported.current) { lastReported.current = current; setCurrentPage(current); onVisiblePageChange?.(current); } }, [onVisiblePageChange]); const handleMarkdownScroll = React.useCallback(() => { if (scrollFrame.current) return; scrollFrame.current = requestAnimationFrame(measureScroll); }, [measureScroll]); React.useEffect( () => () => { if (scrollFrame.current) cancelAnimationFrame(scrollFrame.current); }, [], ); // The document reports its visible page; scroll the markdown to match. The // ref work runs in an effect (not during render) so we never read refs inline. const [docPage, setDocPage] = React.useState(0); React.useEffect(() => { if (docPage > 0) scrollPaneToPage(markdownViewportRef, docPage); }, [docPage]); // Page controls → scroll the markdown (and the document, when paired). const goToPage = (page: number) => { const clamped = Math.min(Math.max(1, page), pages.length); scrollPaneToPage(markdownViewportRef, clamped); if (docRef.current) scrollPaneToPage(docRef, clamped); }; if (!hasOutput) { return (

{isProcessing ? ( <>

Parsing document…

) : ( <>

No parse output yet

Run a parse to see the extracted text and rendered markdown here.

)}

); } const output = (

{renderDocument ? "Extracted" : "Parsed output"} {pages.length > 1 ? (

{currentPage} / {pages.length}

) : null}

1 ? "" : "ml-auto")}>

{pages.map((markdown, i) => ( ))}

); if (!renderDocument) { return

{output}

; } return (

{renderDocument({ onCurrentPageChange: setDocPage })}

{output} ); } /** * One markdown page in the scrolling document — isomorphic to the image viewer's * `ImageFrame`. The page renders its markdown only when it nears the viewport * (gated by an IntersectionObserver), and its measured height is reserved while * off-screen so scroll height and scroll position stay stable. A generous * pre-render margin keeps scrolling ahead of the render. */ const ParsePage = React.memo(function ParsePage({ index, markdown, mode, }: { index: number; markdown: string; mode: ParseViewMode; }) { const [inView, setInView] = React.useState(false); const [height, setHeight] = React.useState(null); const wrapperRef = React.useCallback((el: HTMLDivElement | null) => { if (!el) return; // Resolve the scroll container from the DOM: ref callbacks fire children // first, so a parent ref isn't populated on first mount; closest() is live. const root = el.closest('[data-slot="scroll-area-viewport"]'); const io = new IntersectionObserver( (entries) => { for (const entry of entries) setInView(entry.isIntersecting); }, { root, rootMargin: "200% 0px" }, ); io.observe(el); // Measure the page's natural height while it's rendered; the value is reused // as the reserved height once it scrolls back out. const ro = new ResizeObserver(() => { if (el.offsetHeight > 0) setHeight(el.offsetHeight); }); ro.observe(el); return () => { io.disconnect(); ro.disconnect(); }; }, []); const reserved = height ?? estimateHeight(markdown); return (

{inView ? ( mode === "rendered" ? (

{markdown}

) : (

            {markdown}

) ) : (

)}

); }); // Rough height before a page has rendered, so the initial scroll height is // close. Refined to the exact measured height the first time the page is shown. function estimateHeight(text: string): number { const lines = text.split("\n").length; return Math.min(1800, Math.max(180, lines * 26 + 80)); } function ModeToggle({ mode, onChange, }: { mode: ParseViewMode; onChange: (mode: ParseViewMode) => void; }) { return ( onChange(value as ParseViewMode)}> Rendered Text ); } function CopyButton({ text }: { text: string }) { const [copied, setCopied] = React.useState(false); return ( ); } // Self-contained markdown styling so the viewer carries no `prose` dependency. const markdownComponents: Components = { h1: (props) =>

, h2: (props) =>

, h3: (props) =>

, h4: (props) =>

, p: (props) =>

, ul: (props) =>

, a: (props) => ( ), strong: (props) => , hr: (props) =>
, blockquote: (props) => (
), code: (props) => ( ), pre: (props) => ( ), table: (props) => ( ), thead: (props) => , th: (props) => ( ), td: (props) => ( ), };

, h2: (props) =>

, h3: (props) =>

, h4: (props) =>

, p: (props) => , ul: (props) => , ol: (props) => , li: (props) => , a: (props) => ( ), strong: (props) => , hr: (props) => , blockquote: (props) => ( ), code: (props) => ( ), pre: (props) => ( ), table: (props) => ( ), thead: (props) => , th: (props) => ( ), td: (props) => ( ), };

, p: (props) =>
, ul: (props) =>
, ol: (props) =>
, li: (props) =>
, a: (props) => ( ), strong: (props) => , hr: (props) =>
, blockquote: (props) => (
), code: (props) => ( `), pre: (props) => ( ), table: (props) => ( ), thead: (props) => , th: (props) => ( ), td: (props) => ( ), };`

Viewer blocks