Answer tabsPro

One response with Answer, Sources, Images and Steps tabs, counts that fill in while it streams, and citations that open their source.

Markdown

On this page

ProA pour over question: steps tick, sources and images arrive, then the answer streams with citations that open their source.

Installation

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

Usage

tsx

import { AnswerTabs } from "@/components/ui/chatcn/pro/answer-tabs"

<AnswerTabs
  answer={text}
  status={status}
  sources={sources}
  images={images}
  steps={steps}
/>

The answer engine layout: the answer stays the default view and its evidence is one tab away. While the search runs, the Steps tab spins, Sources and Images count up as they arrive, and the Answer tab carries the streaming mark. Write citations as [1] in the Markdown: each number becomes a mark that previews its source on hover and, when clicked, opens the Sources tab with that source highlighted and focused. Each tab remembers its scroll position, inside maxHeight when set or in the thread otherwise, and the panel never shrinks the frame while you switch. Omit sources, images or steps to hide that tab; pass an empty list to show its empty state.

Examples

States

ProSources open, steps still running, an answer that stopped with retry, no images, a capped height and loading.

Props

Prop	Type	Notes
`answer`	`string`	Markdown. `[1]` cites the first source
`status`	`"pending" \| "streaming" \| "done" \| "error"`	Default `done`
`sources`	`{ url, title?, snippet?, domain?, quote? }[]`	The Sources tab
`images`	`{ src, alt, url?, domain? }[]`	The Images tab, a 2 or 3 column grid
`steps`	`{ id, label, detail?, status?, durationMs? }[]`	The Steps tab. A `running` step spins on the tab
`value`, `defaultValue`, `onValueChange`	`"answer" \| "sources" \| "images" \| "steps"`	Controlled or not
`query`	`ReactNode`	Optional heading above the tabs
`sticky`	`boolean \| number`	Keep the tab row in view; a number is the top offset
`maxHeight`	`number \| string`	Panels scroll inside it
`error`, `onRetry`	`ReactNode`, `() => void`	For `error`
`loading`	`boolean`	Gray placeholders
`labels`	`Partial<…Labels>`	Every string, for translation

Keyboard

Key	Action
Left and Right	Move between tabs (mirrored right to left)
Home and End	First and last tab
Tab	From the tab row into the open panel

Accessibility

WAI tabs: a tablist with one tab stop, each tab controls its panel, and panels are focusable when they start with text.
Counts are read after the tab name, as in Sources, 6 sources.
Steps carry hidden Done, Running, Up next or Failed text; the icons are never the only signal.
A citation jump moves focus to the marked source, so a screen reader lands on it.

Motion

The underline slides between tabs in 200 ms on click and jumps when the arrow keys move it. A source or image that arrives while you watch rises 4 px in 180 ms, and its count swaps in place. Reduced motion keeps the fades and drops the travel.