4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1b0c,'use client'; import { cn } from '@/lib/utils'; /** * A detected entity span, matching the shape returned by `useExtractEntities` * (`@localmode/react`). Spans drive the redaction tokens. */ export interface DetectedEntity { /** The entity text as it appears in the input. */ text: string; /** Entity type (e.g. 'PER', 'LOC', 'ORG', 'MISC'). */ type: string; /** Start character offset in the source text. */ start: number; /** End character offset in the source text (exclusive). */ end: number; /** Confidence score (0–1). */ score?: number; } /** Display config for one entity type. */ export interface EntityTypeConfig { /** Human-readable label, shown in the token tooltip. Falls back to the type. */ label?: string; /** Token color (any CSS color). */ color: string; } /** A registry mapping entity-type keys → display config. */ export type EntityTypeRegistry = Record; /** Props for {@link RedactedTextDisplay}. */ export interface RedactedTextDisplayProps { /** The original source text. */ text: string; /** The detected entity spans (each with `start`/`end` offsets). */ entities: DetectedEntity[]; /** * Per-type display config (label + color). Types absent from the registry * render with a default color. * @default the built-in PER/LOC/ORG/MISC registry */ registry?: EntityTypeRegistry; /** * When true, render a scanning skeleton instead of text. * @default false */ isScanning?: boolean; /** * Rendered when there is no text. * @default "Nothing to display" */ emptyState?: React.ReactNode; /** Additional class names merged onto the root element. */ className?: string; } /** Default entity-type registry — colors wired to CSS variables. */ const DEFAULT_REGISTRY: EntityTypeRegistry = { PER: { label: 'Person', color: 'var(--color-sky-500, #0ea5e9)' }, LOC: { label: 'Location', color: 'var(--color-emerald-500, #10b981)' }, ORG: { label: 'Organization', color: 'var(--color-violet-500, #8b5cf6)' }, MISC: { label: 'Misc', color: 'var(--color-amber-500, #f59e0b)' }, }; const FALLBACK_COLOR = 'var(--color-muted-foreground, #6b7280)'; /** A plain-text or entity-token segment. */ type Segment = | { kind: 'text'; value: string } | { kind: 'entity'; value: string; entity: DetectedEntity }; /** * Interleave plain text with entity spans into an ordered segment list. Spans * are sorted by offset; overlaps are resolved by keeping the earliest. Exported * for reuse/testing. */ export function segmentText( text: string, entities: DetectedEntity[], ): Segment[] { const sorted = [...entities] .filter((e) => e.start >= 0 && e.end <= text.length && e.start < e.end) .sort((a, b) => a.start - b.start); const segments: Segment[] = []; let cursor = 0; const lastIsEntity = () => segments.length > 0 && segments[segments.length - 1].kind === 'entity'; for (const entity of sorted) { if (entity.start < cursor) continue; // skip overlapping span if (entity.start > cursor) { // Trim the whitespace that abuts a token on either side — each token's own // horizontal margin (mx-0.5) supplies the gap, so keeping the source space // would double it (a loose "in [LOC]London") or leave trailing // punctuation floating ("London ."). let inner = text.slice(cursor, entity.start).replace(/\s+$/, ''); if (lastIsEntity()) inner = inner.replace(/^\s+/, ''); if (inner) segments.push({ kind: 'text', value: inner }); } segments.push({ kind: 'entity', value: text.slice(entity.start, entity.end), entity, }); cursor = entity.end; } if (cursor < text.length) { // Trailing tail: trim the leading whitespace abutting the last token so // closing punctuation hugs it ("London." not "London ."). const tail = lastIsEntity() ? text.slice(cursor).replace(/^\s+/, '') : text.slice(cursor); if (tail) segments.push({ kind: 'text', value: tail }); } return segments; } /** * An inline-annotated text renderer that interleaves plain text with color-coded * redaction tokens (e.g. `[PER]`, `[LOC]`) styled per entity type, each * tooltipped (native `title`) with its entity type. Includes a scanning loading * skeleton and an empty placeholder. Pass the source text plus the detected * entity spans from `useExtractEntities`. * * @example * ```tsx * const { entities } = useExtractEntities({ model, text }); * * ``` */ export function RedactedTextDisplay({ text, entities, registry = DEFAULT_REGISTRY, isScanning = false, emptyState = 'Nothing to display', className, }: RedactedTextDisplayProps) { if (isScanning) { return (

{[100, 92, 78].map((w, i) => (

))}

{/* Scanning sweep. */}

); } if (!text) { return (

{emptyState}

); } const segments = segmentText(text, entities); return (

{segments.map((segment, i) => { if (segment.kind === 'text') { return {segment.value}; } const config = registry[segment.entity.type]; const color = config?.color ?? FALLBACK_COLOR; const typeLabel = config?.label ?? segment.entity.type; return ( [{segment.entity.type}] {segment.value} ); })}

); } export default RedactedTextDisplay; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/localmode/results/redacted-text-display/redacted-text-display.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]