## Cited Answer (S—488)

A streaming AI answer with inline citation chips, quote cards with verification, a linked source list and actions.

- URL: https://sundaeui.dev/components/cited-answer
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/cited-answer.json`
- Tags: chat, rag, answer, grounding, llm, perplexity, sources, streaming, ai, citations

Write the answer with [1]-style markers and pass the sources. Each marker becomes a numbered chip that pops in as the text streams; hovering or focusing it opens a card with the site, the page title, the supporting quote, and whether that quote was verified on the page.
Below the answer, the sources it actually cited form a compact grid that lights up with the chip you’re on (and the other way round). When streaming ends, copy, thumbs up/down and regenerate fade in; copy draws a tick in place of the icon.
Text is rendered as text, never HTML, so model output can’t inject markup.

### Usage

```tsx
import { CitedAnswer } from '@/components/sundae/cited-answer'

<CitedAnswer
  text={answer}            // "…announced politely [1]. Cancel the reader [3][4]."
  streaming={isStreaming}
  citations={[
    { id: 1, title: 'ARIA live regions', url: 'https://developer.mozilla.org/…', quote: 'Polite: updates are announced…', verified: true },
  ]}
  onRegenerate={regenerate}
  onFeedback={(v) => track('answer_feedback', v)}
/>
```

### Props

- `text` (`string`, required): Answer with [n] markers; blank lines separate paragraphs. Rendered as plain text.
- `citations` (`Citation[]`, required): { id, title, url, quote?, verified? }. Only cited ones appear in the list.
- `streaming` (`boolean`, default `false`): Shows a caret and holds back the actions.
- `onCopy / onRegenerate / onFeedback` (`functions`): Copy copies the text without markers. onFeedback gets "up" or "down".
- `theme` (`'auto' | 'light' | 'dark'`, default `'auto'`): auto follows a .dark ancestor.

### When to use

- Answers grounded in documents or web results (RAG, search assistants).
- Anywhere people need to check where a claim came from.

### When not to use

- Showing the research process: use Web Search.
- Plain chat with no sources: use AI Composer.

### Accessibility

- Citation chips are buttons labelled with the source title; their card is a tooltip linked with aria-describedby, opened on focus as well as hover, closed with Escape.
- The answer is aria-busy while streaming; copying is announced through a polite region.
- Feedback buttons use aria-pressed.