Retrieved chunks

What the retriever handed the model, for RAG debugging: each passage with its source and page, similarity as a bar and a figure, the query terms it matched, its token count and whether the answer used it. A cutoff grays out weak matches.

Markdown

On this page

Score order with a 0.72 cutoff. The chunk with the plan limits fell just below it.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/retrieved-chunks.json

Usage

tsx

import { RetrievedChunks } from "@/components/ui/chatcn/retrieved-chunks"

<RetrievedChunks query={query} chunks={chunks} threshold={0.72} />

Each chunk has its text, a source path or title, an optional location such as a page or section, a similarity score from 0 to 1, tokens, and used when the answer drew on it. Query terms are found in query with stop words dropped, and match at the start of words, so refund also lights up refunds. Pass terms to choose them yourself.

With a threshold, chunks under it step back to lighter grays and every score bar shows a tick at the cutoff. In score order the weak chunks are contiguous, so a dashed line marks where the cut falls; in rank order each one is labelled in place.

Examples

Retriever order

Rank order with explicit highlight terms and two-line chunks.

Retrieving

The skeleton holds the final layout, then the chunks land.

States

No results, an indexing error, and everything below the cutoff.

Props

Prop	Type	Notes
`chunks`	`RetrievedChunk[]`	`{ id, text, source, href?, location?, score, tokens?, used?, rank? }`
`query`	`string`	Shown in the header. Its content words are highlighted
`terms`	`string[]`	Highlight these instead. Multi-word terms work
`threshold`	`number`	Similarity cutoff
`sort`, `defaultSort`, `onSortChange`	`"rank" \| "score"`	Defaults to `score`
`lineClamp`	`number`	Lines before Show more. Defaults to 3
`loading`	`boolean`	Skeleton chunks and a Retrieving label
`error`, `onRetry`	`ReactNode`, `() => void`	Say what failed and how to fix it
`onChunkSelect`	`(chunk) => void`	Makes each source a button, for example to open the document
`emptyState`	`ReactNode`	Replaces the no results message
`title`, `maxHeight`	`ReactNode`, `number \| string`	Header label and scroll height

Helpers

Function	Does
`queryTerms(query)`	Content words of a query, longest first
`highlightChunkTerms(text, terms)`	Splits text into plain and matched runs

Accessibility

An ordered list of chunks. Rank, similarity and Not used are spoken even where they are drawn as marks.
Matched terms use mark. The cutoff line is a labelled separator.
Show more is a button with aria-expanded that controls its passage, and appears only when the text is actually clamped.
Source paths dim the directory and keep the file name whole when space runs out.

Motion

None beyond color: a debugging view should hold still. Show more opens instantly.
While retrieving, the header shows the kit's one shimmer label. Skeletons do not shimmer.