Sources first answerPro

An answer that shows where it comes from before it says anything: a row of source cards above the text, tied both ways to the citations.

Markdown

On this page

ProA home baker’s question: the sources land as cards first, then the answer streams with citations tied to them.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sources-first-answer

Usage

tsx

import { SourcesFirstAnswer, citeText } from "@/components/ui/chatcn/pro/sources-first-answer"

<SourcesFirstAnswer sources={sources} status={status} read={19}>
  <MessageContent>
    <p>{citeText(text)}</p>
  </MessageContent>
</SourcesFirstAnswer>

While searching, skeleton cards hold the exact final geometry and the header shimmers; sources replace them one by one as they arrive. Three cards show, then a card with the rest as stacked tiles and a count that opens them all in place. Point at or focus a card and its citations in the answer take the accent; point at a citation and its card does. citeText turns [1] markers in plain text into SourceCite, the free Citation with its preview card; use SourceCite directly inside your own Markdown renderer. On phones the row scrolls sideways. A failed search says what that means for the answer and offers a retry; an answer without a search says so in one quiet line.

Examples

States

ProSearching with skeletons, sources arriving, all sources opened, two sources, no search, and a failed search.

Props

Prop	Type	Notes
`sources`	`Source[]`	Citation order: the first is `[1]`. May grow while searching
`status`	`"searching" \| "answering" \| "done" \| "error"`	Default `done`
`read`	`number`	Pages read in total, when more were read than kept
`visible`	`number`	Cards before the overflow card. Default 3
`expected`	`number`	Skeleton cards while searching. Default `visible`
`expanded`, `defaultExpanded`, `onExpandedChange`	`boolean`	All cards shown
`onRetry`	`() => void`	Shown with the error
`labels`	`Partial<SourcesFirstLabels>`	Every string, for translation

Accessibility

The cards are a numbered list of links named by the source count.
Each citation is named Source 2: title and opens its preview on focus.
A failed search is announced with role="alert"; the searching label is a polite live region.

Motion

The linked highlight changes instantly, in step with the pointer. Cards press to 0.98. The shimmer on Searching is the only animation; under reduced motion it is static.