Chunk inspectorPro

A document as the retriever sees it: chunk boundaries overlaid, overlap shaded, token count per chunk and the nearest vectors of the chunk you select.

Markdown

On this page

ProA handbook page in 160 token chunks with shaded overlap; selecting a chunk fetches its nearest vectors.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/chunk-inspector

Usage

tsx

import { ChunkInspector } from "@/components/ui/chatcn/pro/chunk-inspector"

<ChunkInspector
  document={{ title, text, source }}
  chunks={chunks}
  neighbors={neighbors}
  onSelectedChange={fetchNeighbors}
/>

Chunks are character offsets into the extracted text, the shape LlamaIndex and LangChain splitters already return. Neighbors alternate two chart hues so every boundary shows; where two chunks cover the same words both tints stack, and the words get a dotted underline. Set tokenLimit to flag chunks your embedding model would truncate, and tone="mono" for grays. chunkText in chatcn-pro-rag-a chunks text the same way in your scripts.

Examples

States

ProMono tone with chunks over the limit, a failed neighbor search, nothing selected, loading, empty and error.

Props

Prop	Type	Notes
`document`	`{ title, text, source? }`	The text the offsets point into
`chunks`	`{ id, start, end, tokens? }[]`	Tokens are estimated when omitted
`selectedId`, `defaultSelectedId`, `onSelectedChange`	`string \| null`	Controlled or not
`neighbors`	`ChunkNeighbor[]`	`{ id, score, text, source?, location?, chunkId? }`; a `chunkId` makes it a jump
`neighborsLoading`, `neighborsError`, `onRetryNeighbors`		Neighbor search states
`loading`, `error`, `onRetry`		Document states
`tokenLimit`	`number`	Flags chunks above it in amber
`tone`	`"color" \| "mono"`	Default `color`

Keyboard

Key	Action
Left and Right arrows on the ruler	Select the previous or next chunk and scroll to it
Home and End on the ruler	First and last chunk
Tab	Ruler, document text, then the selected chunk's actions and neighbors

Accessibility

The ruler is a toolbar of toggle buttons named Chunk 7, 412 tokens, so every chunk is reachable without the mouse.
Each chunk start carries its number and token count for screen readers.
Over the limit is said in words and a glyph, not only amber.

Motion

Jumps from the ruler, the neighbor list and Previous or Next scroll smoothly; reduced motion scrolls instantly. Tints change without transitions because hovering is constant.