DOCX Sources

1"use client";
2 
3import * as React from "react";
4 
5import type { Source } from "@/lib/document-source";
6import {
7  sourceToDocxHighlight,
8  useDocxSourceTarget,
9} from "@/components/ui/docx-source";
10import { DocxViewer, type DocxViewerHandle } from "@/components/ui/docx-viewer";
11import {
12  FileViewer,
13  FileViewerContent,
14  FileViewerHeader,
15  FileViewerTitle,
16  FileViewerProvider,
17  FileViewerSidebar,
18  FileViewerSidebarContent,
19  FileViewerInset,
20  FileViewerControls,
21  FileViewerViewport,
22} from "@/components/ui/file-viewer";
23import { SegmentedDocumentProvider } from "@/components/ui/segmented-document-provider";
24import { useSegmentedSourceFieldLink } from "@/components/ui/source-field-link";
25import {
26  SourceFieldList,
27  type SourceField,
28} from "@/components/ui/source-field-list";
29import { createSourcesSegmentedDocumentModel } from "@/components/ui/source-segmented-document-model";
30import docxSample from "@/components/viewers/sample-data/docx-sources.json";
31 
32const DOCX_URL = "/samples/quarterly-business-review.docx";
33const DOCX_SOURCE = {
34  kind: "url" as const,
35  url: DOCX_URL,
36  fileName: "quarterly-business-review.docx",
37};
38 
39type DocxField = SourceField & { source: Source };
40 
41/** A short locator hint per anchor kind, matching the other source blocks. */
42function hintFor(source: Source): string | undefined {
43  const a = source.anchor;
44  if (a.kind === "docx_text_span") return `¶ ${a.paragraph + 1}`;
45  if (a.kind === "docx_table_cell")
46    return `Table ${a.table + 1} · R${a.row + 1}C${a.column + 1}`;
47  return undefined;
48}
49 
50const FIELDS = (docxSample as DocxField[]).map((field) => ({
51  ...field,
52  hint: hintFor(field.source),
53}));
54const FIELD_BY_KEY = new Map(FIELDS.map((field) => [field.key, field]));
55const SEGMENTED_DOCUMENT = createSourcesSegmentedDocumentModel(
56  FIELDS.map((field) => ({
57    id: field.key,
58    label: field.label,
59    source: field.source,
60  })),
61);
62 
63/**
64 * DOCX sources block — values extracted from a Word document, linked to where
65 * they came from. Hovering a field highlights its text in the document and
66 * scrolls to it. Segmented source interaction owns preview/selection while the
67 * DOCX source adapter owns rendered-document target navigation.
68 */
69export function DocxSourcesBlock() {
70  const viewerRef = React.useRef<DocxViewerHandle>(null);
71 
72  return (
73    <SegmentedDocumentProvider model={SEGMENTED_DOCUMENT}>
74      <DocxSourcesContent viewerRef={viewerRef} />
75    </SegmentedDocumentProvider>
76  );
77}
78 
79// … truncated