Text Splitting

1"use client";
2 
3import * as React from "react";
4import { FileText, WrapText } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import {
8  FileViewer,
9  FileViewerContent,
10  FileViewerControls,
11  FileViewerHeader,
12  FileViewerInset,
13  FileViewerProvider,
14  FileViewerSidebar,
15  FileViewerSidebarContent,
16  FileViewerSidebarTrigger,
17  FileViewerTitle,
18  FileViewerViewport,
19} from "@/components/ui/file-viewer";
20import { TextViewer } from "@/components/ui/text-viewer";
21import { SEGMENT_PALETTE } from "@/lib/segments";
22import txtOutputs from "@/components/viewers/sample-data/txt-splitting.json";
23 
24const SOURCE_ID = "source";
25const SOURCE_NAME = "intake-batch.txt";
26const TEXT_URL = "/samples/intake-batch.txt";
27 
28const SOURCE_SOURCE = {
29  kind: "url" as const,
30  url: TEXT_URL,
31  fileName: SOURCE_NAME,
32};
33 
34type TxtId = keyof typeof txtOutputs;
35 
36/**
37 * One document the text splitter carved out of the batch file. `kind` is the
38 * document type it was classified as; `detection` is the boundary cue that
39 * separated it from its neighbours. The document text itself lives in the
40 * sample-data JSON, keyed by `id`.
41 */
42type TxtOutput = {
43  id: TxtId;
44  fileName: string;
45  kind: string;
46  detection: string;
47};
48 
49const TXT_OUTPUTS: TxtOutput[] = [
50  {
51    id: "cover-letter",
52    fileName: "cover-letter.txt",
53    kind: "Cover letter",
54    detection: "Salutation and signature block",
55  },
56  {
57    id: "invoice",
58    fileName: "invoice.txt",
59    kind: "Invoice",
60    detection: "Invoice number and line-item table",
61  },
62  {
63    id: "delivery-receipt",
64    fileName: "delivery-receipt.txt",
65    kind: "Delivery receipt",
66    detection: "Received-by header and gate pass",
67  },
68  {
69    id: "purchase-order",
70    fileName: "purchase-order.txt",
71    kind: "Purchase order",
72    detection: "PO number and not-to-exceed amount",
73  },
74];
75 
76// Stable {kind:"text"} source per document so selecting one swaps the viewer
77// without re-creating the resource on every render.
78const TXT_SOURCE_BY_ID = new Map(
79  TXT_OUTPUTS.map((output) => [
80    output.id,
81    {
82      kind: "text" as const,
83      text: txtOutputs[output.id],
84      fileName: output.fileName,
85    },
86  ]),
87);
88 
89function lineCount(id: TxtId) {
90  return txtOutputs[id].split("\n").length;
91}
92 
93function outputColor(index: number) {
94  return SEGMENT_PALETTE[index % SEGMENT_PALETTE.length];
95}
96 
97/**
98 * Text splitting block — one plain-text batch file separated into several
99// … truncated