JSON Form Sources

1"use client";
2 
3import * as React from "react";
4import type { JSONSchema7 } from "json-schema";
5import { useForm } from "react-hook-form";
6 
7import { extractionSourcesToSourceMap } from "@/lib/document-source";
8import {
9  FileViewer,
10  FileViewerContent,
11  FileViewerHeader,
12  FileViewerTitle,
13  FileViewerInset,
14  FileViewerProvider,
15  FileViewerSidebar,
16  FileViewerSidebarTrigger,
17  FileViewerControls,
18  FileViewerViewport,
19  type ViewerSource,
20  useFileViewerResource,
21} from "@/components/ui/file-viewer";
22import {
23  ImageViewerFrames,
24  ImageViewerProvider,
25  type ImageViewerHandle,
26} from "@/components/ui/image-viewer";
27import { PdfViewerPages, PdfViewerProvider } from "@/components/ui/pdf-viewer";
28import { ScrollArea } from "@/components/ui/scroll-area";
29import {
30  SegmentedDocumentProvider,
31  useSegmentedDocumentViewport,
32} from "@/components/ui/segmented-document-provider";
33import { sourceMapToEvidenceModel } from "@/components/ui/source-evidence";
34import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
35import { SourceIndicator } from "@/components/ui/source-indicator";
36import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
37import {
38  useSegmentedImageSourceOverlay,
39  useSegmentedImageViewerHandle,
40  useSegmentedPdfSourceOverlay,
41  useSegmentedPdfViewerHandle,
42} from "@/components/ui/source-segmented-document-overlays";
43import { JsonForm } from "@/components/json-form/json-form";
44import sourcesSample from "@/components/viewers/sample-data/json-form-sources.json";
45 
46const PDF_URL = "/samples/jane-doe-bank-statement-5-pages.pdf";
47const PDF_SOURCE = {
48  kind: "url" as const,
49  url: PDF_URL,
50  fileName: "jane-doe-bank-statement-5-pages.pdf",
51};
52const JSON_FORM_SOURCES_DEFAULT_OPEN_PATHS = ["transactions"] as const;
53 
54// An extraction of the bank-statement sample shaped like the
55// `GET /v1/extractions/{id}/sources` response: a JSON Schema, the extracted
56// values, and a parallel `sources` tree (leaves `{ value, source }`).
57const SAMPLE_SCHEMA = sourcesSample.schema as JSONSchema7;
58const SAMPLE_EXTRACTION = sourcesSample.extraction as Record<string, unknown>;
59const SAMPLE_SOURCES = sourcesSample.sources;
60 
61export type JsonFormSourcesBlockProps = {
62  defaultOpenPaths?: readonly string[];
63  documentKind?: "pdf" | "image";
64  extraction?: Record<string, unknown>;
65  fallbackFrameSize?: { width: number; height: number };
66  schema?: JSONSchema7;
67  source?: ViewerSource;
68  sources?: unknown;
69};
70 
71// … truncated