Parse Viewer

1"use client";
2 
3import * as React from "react";
4 
5import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
6import {
7  FileViewer,
8  FileViewerContent,
9  FileViewerProvider,
10  FileViewerInset,
11  FileViewerViewport,
12} from "@/components/ui/file-viewer";
13import {
14  PdfViewerPages,
15  PdfViewerProvider,
16  type PdfViewerHandle,
17} from "@/components/ui/pdf-viewer";
18import {
19  ResizableHandle,
20  ResizablePanel,
21  ResizablePanelGroup,
22} from "@/components/ui/resizable";
23import { ViewerBody, ViewerRoot, ViewerSurface } from "@/components/ui/viewer";
24import type { ParseResponse } from "@/components/viewers/lib/parse-types";
25import {
26  ParseViewerHeader,
27  ParseViewerMarkdown,
28  ParseViewerProvider,
29  useParseViewerDocument,
30} from "@/components/viewers/parse/parse-viewer";
31import parseSample from "@/components/viewers/sample-data/parse.json";
32 
33const PDF_URL = "/samples/bank-statement-x4uhhi7t.pdf";
34 
35// A parse of the bank-statement sample: per-page, LLM-ready markdown with the
36// transactions reconstructed as a table.
37const PARSE_RESULT: ParseResponse = {
38  output: parseSample.output as ParseResponse["output"],
39  usage: parseSample.usage as ParseResponse["usage"],
40};
41 
42/**
43 * Parse viewer block — the source document beside its extracted markdown, kept
44 * in sync by page. `ParseViewer` owns the markdown pane (Rendered/Text toggle,
45 * page controls); the document surface here is FileViewer + PDF pages.
46 */
47export function ParseViewerBlock() {
48  return (
49    <div className="bg-background flex h-full min-h-[680px] flex-col">
50      <ParseViewerProvider result={PARSE_RESULT}>
51        <ViewerRoot className="bg-background h-full flex-1">
52          <ParseViewerHeader />
53          <ViewerBody>
54            <ResizablePanelGroup
55              orientation="horizontal"
56              className="min-h-0 flex-1"
57            >
58              <ResizablePanel defaultSize={52} minSize={28}>
59                <ViewerSurface className="h-full">
60                  <ParseSourceDocument />
61                </ViewerSurface>
62              </ResizablePanel>
63              <ResizableHandle withHandle />
64              <ResizablePanel defaultSize={48} minSize={28}>
65                <ViewerSurface className="h-full">
66                  <ParseViewerMarkdown />
67                </ViewerSurface>
68              </ResizablePanel>
69            </ResizablePanelGroup>
70          </ViewerBody>
71        </ViewerRoot>
72      </ParseViewerProvider>
73    </div>
74  );
75}
76 
77function ParseSourceDocument() {
78// … truncated