Extract Viewer

1"use client";
2 
3import type { JSONSchema7 } from "json-schema";
4import { useForm } from "react-hook-form";
5 
6import type { Source } from "@/lib/document-source";
7import {
8  FileViewerContent,
9  FileViewerHeader,
10  FileViewer,
11  FileViewerProvider,
12  FileViewerSidebar,
13  FileViewerSidebarContent,
14  FileViewerSidebarSection,
15  FileViewerSidebarSectionContent,
16  FileViewerSidebarSectionHeader,
17  FileViewerSidebarSectionTitle,
18  FileViewerSidebarTrigger,
19  FileViewerInset,
20  FileViewerViewport,
21} from "@/components/ui/file-viewer";
22import {
23  PdfViewerPages,
24  PdfViewerProvider,
25  type PdfDocumentSource,
26} from "@/components/ui/pdf-viewer";
27import {
28  SegmentedDocumentProvider,
29  useSegmentedDocumentViewport,
30} from "@/components/ui/segmented-document-provider";
31import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
32import { SourceIndicator } from "@/components/ui/source-indicator";
33import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
34import {
35  useSegmentedPdfSourceOverlay,
36  useSegmentedPdfViewerHandle,
37} from "@/components/ui/source-segmented-document-overlays";
38import { JsonForm } from "@/components/json-form/json-form";
39import extractSample from "@/components/viewers/sample-data/extract.json";
40 
41const PDF_URL = "/samples/jane-doe-bank-statement-5-pages.pdf";
42 
43type ExtractField = {
44  key: string;
45  label: string;
46  value: string;
47  /** Where this value was found in the document (its source). */
48  source: Source;
49};
50 
51// Extracted values from the bank-statement sample with true text coordinates
52// (normalized pdf_bbox anchors), so each field's source highlight lands on the page.
53const FIELDS = extractSample as ExtractField[];
54const schema: JSONSchema7 = {
55  type: "object",
56  properties: Object.fromEntries(
57    FIELDS.map((field) => [
58      field.key,
59      {
60        type: "string",
61        title: field.label,
62      },
63    ]),
64  ),
65};
66const defaultValues = Object.fromEntries(
67  FIELDS.map((field) => [field.key, field.value]),
68) as Record<string, unknown>;
69const PDF_SOURCE: PdfDocumentSource = {
70  kind: "url",
71  url: PDF_URL,
72  fileName: "jane-doe-bank-statement-5-pages.pdf",
73};
74const SOURCE_FIELDS = FIELDS.map((field) => ({
75  id: field.key,
76  label: field.label,
77  source: field.source,
78}));
79const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(SOURCE_FIELDS);
80 
81/**
82 * Extract viewer block — extracted fields beside the source document, linked by
83// … truncated