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
Run this command in your Tailwind CSS project. It adds
components/ai/source-viewer-document.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/source-viewer-document.json
Usage & API
Example
import { SourceViewerDocument } from "@/components/ai/source-viewer-document"
<SourceViewerDocument
answer={[]}
citations={citations}
sources={[]}
open={null}
onOpenChange={() => {}}
/>Props SourceViewerDocument
| Prop | Type & description | Required |
|---|---|---|
answer | AnswerSentence[][]Paragraphs of sentences. A sentence may end in a numbered citation. | Required |
citations | Record<number, Citation>Citation number to the passage it points at. | Required |
sources | PdfSource[] | Required |
open | Citation | nullThe passage shown in the viewer, or null when it's closed. | Required |
onOpenChange | (next: Citation | null) => void | Required |
before | ReactNodeRendered above the answer, e.g. the user's question. | Optional |
after | ReactNodeRendered 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.
Example
import { SourceViewerWeb } from "@/components/ai/source-viewer-web"
<SourceViewerWeb
answer={[]}
citations={citations}
sources={[]}
open={null}
onOpenChange={() => {}}
/>Props SourceViewerWeb
| Prop | Type & description | Required |
|---|---|---|
answer | WebAnswerSentence[][] | Required |
citations | Record<number, WebCitation>Citation number to the highlighted sentence it points at. | Required |
sources | WebSource[] | Required |
open | WebCitation | nullThe source and sentence in view, or null when the reader is closed. | Required |
onOpenChange | (next: WebCitation | null) => void | Required |
before | ReactNode | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The web preview answers a home-energy question after a search, with a line for how many pages were searched and how many were cited. Each citation opens the reader. A tab row lists the sources in the answer. Back to answer and Close reader dismiss it. Open page in a new tab uses the source URL. While a different page loads, a loading state covers the article. The quoted sentence is highlighted, and hovering it can show which citation in the answer it belongs to. The header shows the site, the title, the author, the date and a read time.
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.