Source viewer

Opens a cited source beside the answer with the quoted passage highlighted, and steps between every place the answer used it.

Loading preview…

Install

  1. 1

    Run this command in your Tailwind CSS project. It adds components/ai/source-viewer-document.tsx and installs its dependencies.

    $ npx shadcn@latest add https://gradientdeck.com/ai-components/r/source-viewer-document.json

Usage & API

Example

source-viewer-document.tsx
import { SourceViewerDocument } from "@/components/ai/source-viewer-document"

<SourceViewerDocument
  answer={[]}
  citations={citations}
  sources={[]}
  open={null}
  onOpenChange={() => {}}
/>

Props SourceViewerDocument

PropType & descriptionRequired
answerAnswerSentence[][]Paragraphs of sentences. A sentence may end in a numbered citation.Required
citationsRecord<number, Citation>Citation number to the passage it points at.Required
sourcesPdfSource[]Required
openCitation | nullThe passage shown in the viewer, or null when it's closed.Required
onOpenChange(next: Citation | null) => voidRequired
beforeReactNodeRendered above the answer, e.g. the user's question.Optional
afterReactNodeRendered under the answer, e.g. message actions.Optional

Dependencies

  • React
  • Tailwind CSS
  • motion
  • lucide-react
Implementation notes

The document preview answers from a vendor contract. Citation buttons open a reader titled with the file. Back to answer and Close source dismiss it. Previous page, a page field and Next page move through the pages. Zoom out, a percent and Zoom in step through a fixed set of sizes. Quoted passages lists every cited quote in reading order, and Previous quote and Next quote move the highlight. The passage is marked in the page. The header can show who uploaded the file and when.

Choosing a layout

Use it when a numbered citation should show the actual sentence, not only a title and a domain. That is the difference from a source list or from the citation card inside report output. Report output previews a source. This reader stays on the passage and steps to the next quoted one.

Use the document variant for an uploaded file with pages, a running header and page controls. Use the web variant for several pages that should appear as a reader with a site name, an author and an external link. If the person is pointing at a screenshot rather than a quote, point and ask is the closer fit.

Does the reader load a real PDF or a live web page?

No. Both variants draw the pages or blocks you pass in. The web variant's new-tab button is the only control that leaves the page, and it uses the URL on the source.

What happens if several citations point at the same file?

They share one reader. Previous quote and Next quote, on the document, walk the quoted passages in reading order. On the web variant, each highlighted sentence keeps the citation number that first pointed at it, and the source tabs switch files.