Partition Viewer

1"use client";
2 
3import {
4  FileViewerContent,
5  FileViewerHeader,
6  FileViewerTitle,
7  FileViewerLegend,
8  FileViewer,
9  FileViewerProvider,
10  FileViewerInset,
11  FileViewerControls,
12  FileViewerViewport,
13} from "@/components/ui/file-viewer";
14import { PdfViewerPages, PdfViewerProvider } from "@/components/ui/pdf-viewer";
15import type { PartitionResult } from "@/components/viewers/lib/partition-types";
16import {
17  PartitionViewerHeaderMeta,
18  PartitionViewerLegend,
19  PartitionViewerProvider,
20  PartitionViewerRibbon,
21  usePartitionViewerDocumentControls,
22} from "@/components/viewers/partition/partition-viewer";
23 
24const PDF_URL = "/samples/an-image-is-worth-16x16-words.pdf";
25 
26// A partition result: keyed chunks, each owning a set of 1-indexed pages.
27const PARTITION_RESULT: PartitionResult = {
28  output: [
29    { key: "abstract", pages: [1] },
30    { key: "introduction", pages: [1, 2] },
31    { key: "related_work", pages: [2] },
32    { key: "method", pages: [3, 4] },
33    { key: "experiments", pages: [4, 5, 6, 7, 8] },
34    { key: "conclusion", pages: [9] },
35    { key: "references", pages: [9, 10, 11, 12] },
36    { key: "appendix", pages: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22] },
37  ],
38  consensus: { choices: [], likelihoods: null },
39  usage: null,
40};
41 
42/**
43 * Partition viewer block — the file + legend + waterfall ribbon over keyed
44 * chunks. The provider owns the key and ribbon state; the document surface is
45 * visible JSX.
46 */
47export function PartitionViewerBlock() {
48  const source = {
49    kind: "url" as const,
50    url: PDF_URL,
51    fileName: "an-image-is-worth-16x16-words.pdf",
52  };
53 
54  return (
55    <div className="bg-background flex h-full min-h-[680px] flex-col">
56      <PartitionViewerProvider result={PARTITION_RESULT}>
57        <FileViewerProvider source={source}>
58          <FileViewer className="bg-background">
59            <PdfViewerProvider>
60              <FileViewerHeader>
61                  <FileViewerTitle />
62                  <PartitionViewerHeaderMeta />
63                  <FileViewerControls />
64              </FileViewerHeader>
65              <FileViewerContent>
66                <FileViewerInset>
67                  <FileViewerLegend>
68                    <PartitionViewerLegend className="px-3 py-2" />
69                  </FileViewerLegend>
70                  <PartitionViewerRibbon />
71                  <FileViewerViewport>
72                    <PartitionSourceDocument />
73                  </FileViewerViewport>
74                </FileViewerInset>
75// … truncated