Source document

A document source with its cited page. Opens the document with the passage highlighted and scrolled into view.

Markdown

On this page

Chips with the cited page open the document with the passage highlighted.

Installation

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

Usage

tsx

import { SourceDocument } from "@/components/ui/chatcn/source-document"

<SourceDocument
  document={{ title: "Help center readability study", filename, pages }}
  page={4}
  quote="9 percent more often than readers in layout A"
/>

documentFromPart(part) maps an AI SDK source-document part to the document prop. Add pages with the extracted text when you have it, or pass viewerLoading while you fetch it.

Examples

In a side panel

With viewer="none" the chip only calls onOpen, so a DocumentViewer elsewhere can follow the citation. hideTitle keeps the chips short and active marks the one in view.

Citations in an answer drive a document panel: page, highlight and scroll follow the click.

Props

Prop	Type	Notes
`document`	`DocumentSource`	`title`, `filename?`, `pageCount?`, `pages?`, `url?`
`page`	`number`	Cited page, shown as p. 4
`quote`	`string`	Highlighted in the viewer, quoted on the card
`index`	`number`	Citation number instead of the file icon
`variant`	`"chip" \| "card"`	Inline in prose, or a row for source lists
`viewer`	`"dialog" \| "none"`	Built-in dialog or your own panel
`onOpen`	`() => void`	Called on every open
`hideTitle`, `active`	`boolean`	Compact chip and the selected state for panels
`viewerLoading`, `viewerError`, `onViewerRetry`		Passed to the viewer
`open`, `defaultOpen`, `onOpenChange`		Dialog state, controlled or not

Keyboard

Key	Action
`Enter`, `Space`	Open the document
`Esc`	Close the dialog and return focus to the chip

Accessibility

The chip is a button named Open, the title and the page, with aria-haspopup="dialog". In panel mode it is a toggle with aria-pressed.
The dialog is labelled by the document title and traps focus while open.

Motion

Press feedback scales the chip to 0.97 over 100 ms.
The dialog grows from 0.96 over 220 ms with the scrim, and opens instantly from the keyboard. The highlight is already centered when it appears.