Cited span PDFPro

An answer beside the PDF it cites, with each citation jumping to its exact passage and each passage finding its sentence.

Markdown

On this page

ProAn answer about refund windows; each citation scrolls the policy to its passage and marks it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/cited-span-pdf

Usage

tsx

import { CitedSpanPdf } from "@/components/ui/chatcn/pro/cited-span-pdf"

<CitedSpanPdf
  question={question}
  answer={sentences}
  document={policy}
  spans={citations}
/>

The pro variant of the free source-document: anchors are spans, not pages. Give each span the page and the exact quote (text pages) or rects (scanned pages) your retriever returned. The answer is paragraphs of sentences, each with the span ids it cites, which is what most citation formats reduce to. Built on pdf-viewer.

Examples

States

ProStreaming sentence by sentence and before the first token.

Props

Prop	Type	Notes
`question`	`string`	Shown above the answer
`answer`	`CitedSentence[][]`	Paragraphs of `{ text, cite? }`
`document`	`PdfDocument`	As in `pdf-viewer`
`spans`	`PdfSpan[]`	`{ id, page, quote?, rects?, label? }`
`activeSpanId`, `defaultActiveSpanId`, `onActiveSpanChange`	`string \| null`	The marked passage
`streaming`	`boolean`	The answer is still arriving
`height`	`number \| string`	Default 600

Keyboard

Key	Action
Tab	Citations in reading order, then the PDF
Enter on a citation	Jumps to the passage without animation

Accessibility

Citations are pressed buttons named 1 p. 2, show in the document.
The cited sentence and its passage share the accent mark and an underline, not only a tint.

Motion

Pointer jumps scroll the PDF smoothly to the passage; keyboard jumps are instant. Reduced motion makes both instant.