"use client"; import * as React from "react"; import { FileText, WrapText } from "lucide-react"; import { cn } from "@/lib/utils"; import { FileViewer, FileViewerContent, FileViewerControls, FileViewerHeader, FileViewerInset, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerSidebarTrigger, FileViewerTitle, FileViewerViewport, } from "@/components/ui/file-viewer"; import { TextViewer } from "@/components/ui/text-viewer"; import { SEGMENT_PALETTE } from "@/lib/segments"; import txtOutputs from "@/components/viewers/sample-data/txt-splitting.json"; const SOURCE_ID = "source"; const SOURCE_NAME = "intake-batch.txt"; const TEXT_URL = "/samples/intake-batch.txt"; const SOURCE_SOURCE = { kind: "url" as const, url: TEXT_URL, fileName: SOURCE_NAME, }; type TxtId = keyof typeof txtOutputs; /** * One document the text splitter carved out of the batch file. `kind` is the * document type it was classified as; `detection` is the boundary cue that * separated it from its neighbours. The document text itself lives in the * sample-data JSON, keyed by `id`. */ type TxtOutput = { id: TxtId; fileName: string; kind: string; detection: string; }; const TXT_OUTPUTS: TxtOutput[] = [ { id: "cover-letter", fileName: "cover-letter.txt", kind: "Cover letter", detection: "Salutation and signature block", }, { id: "invoice", fileName: "invoice.txt", kind: "Invoice", detection: "Invoice number and line-item table", }, { id: "delivery-receipt", fileName: "delivery-receipt.txt", kind: "Delivery receipt", detection: "Received-by header and gate pass", }, { id: "purchase-order", fileName: "purchase-order.txt", kind: "Purchase order", detection: "PO number and not-to-exceed amount", }, ]; // Stable {kind:"text"} source per document so selecting one swaps the viewer // without re-creating the resource on every render. const TXT_SOURCE_BY_ID = new Map( TXT_OUTPUTS.map((output) => [ output.id, { kind: "text" as const, text: txtOutputs[output.id], fileName: output.fileName, }, ]), ); function lineCount(id: TxtId) { return txtOutputs[id].split("\n").length; } function outputColor(index: number) { return SEGMENT_PALETTE[index % SEGMENT_PALETTE.length]; } /** * Text splitting block — one plain-text batch file separated into several * documents. A left sidebar lists the source file first, then every document * the splitter carved out. Selecting an entry swaps the viewer to that * document: the full batch file for the source, each carved-out text otherwise. */ export function TxtSplittingViewerBlock() { const [activeId, setActiveId] = React.useState(SOURCE_ID); const isSource = activeId === SOURCE_ID; const activeSource = isSource ? SOURCE_SOURCE : TXT_SOURCE_BY_ID.get(activeId as TxtId)!; return (

Split output

Source file → {TXT_OUTPUTS.length} documents

setActiveId(SOURCE_ID)} />
Split documents
setActiveId(output.id)} />

); } /** The source batch file — the first sidebar entry. */ function SourceRow({ active, onSelect, }: { active: boolean; onSelect: () => void; }) { return ( ); } /** One carved-out document in the sidebar. */ function TxtOutputRow({ output, color, lines, active, onSelect, }: { output: TxtOutput; color: string; lines: number; active: boolean; onSelect: () => void; }) { return ( ); }