Image Sources

1"use client";
2 
3import type { Source } from "@/lib/document-source";
4import {
5  FileViewer,
6  FileViewerContent,
7  FileViewerHeader,
8  FileViewerTitle,
9  FileViewerProvider,
10  FileViewerSidebar,
11  FileViewerSidebarContent,
12  FileViewerInset,
13  FileViewerControls,
14  FileViewerViewport,
15} from "@/components/ui/file-viewer";
16import { ImageViewer } from "@/components/ui/image-viewer";
17import {
18  SegmentedDocumentProvider,
19  useSegmentedDocumentViewport,
20} from "@/components/ui/segmented-document-provider";
21import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
22import {
23  SourceFieldList,
24  type SourceField,
25} from "@/components/ui/source-field-list";
26import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
27import {
28  useSegmentedImageSourceOverlay,
29  useSegmentedImageViewerHandle,
30} from "@/components/ui/source-segmented-document-overlays";
31import imageSample from "@/components/viewers/sample-data/image-sources.json";
32 
33const IMAGE_URL = "/samples/an-image-is-worth-16x16-words-page-1.png";
34const IMAGE_SOURCE = {
35  kind: "url" as const,
36  url: IMAGE_URL,
37  fileName: "an-image-is-worth-16x16-words-page-1.png",
38};
39 
40type ImageField = SourceField & { source: Source };
41 
42// Real values read off the scanned page with normalized image_bbox anchors.
43const FIELDS = imageSample as ImageField[];
44const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(
45  FIELDS.map((field) => ({
46    id: field.key,
47    label: field.label,
48    source: field.source,
49  })),
50);
51 
52/**
53 * Image sources block — extracted fields beside a scanned page image. Hovering a
54 * field highlights its image_bbox region and scrolls to it through the segmented
55 * document provider.
56 */
57export function ImageSourcesBlock() {
58  return (
59    <SegmentedDocumentProvider model={SEGMENTED_DOCUMENT}>
60      <ImageSourcesContent />
61    </SegmentedDocumentProvider>
62  );
63}
64 
65function ImageSourcesContent() {
66  const link = useSegmentedSourceFieldLink({
67    initialSourcePath: FIELDS[0]?.key,
68  });
69  const { documentHandlers } = useSegmentedDocumentViewport();
70  const renderFrameOverlay = useSegmentedImageSourceOverlay(link);
71  const setImageViewerHandle = useSegmentedImageViewerHandle();
72 
73  return (
74    <FileViewerProvider
75      source={IMAGE_SOURCE}
76      fallbackFrameSize={{ width: 1224, height: 1584 }}
77      defaultSidebarOpen
78    >
79      <FileViewer
80        className="bg-background h-full min-h-[680px]"
81       
82      >
83        <FileViewerHeader>
84// … truncated