InlineCitation
A source-reference chip set inside prose.
Usage
Basic
Loading demo...
Streaming Answer
A citation pops in as the prose reaches it; the host orchestrates the answer, and the component renders one chip.
Word reveal + inline citation + sources + follow-ups
Loading demo...
Best Practices
- Listen for
open, or clicking a citation does nothing. - Keep to two or three citations per paragraph; a dense run reads as a list.
- Usually leave
labelempty: the hostname fallback shows where a claim came from. - Keep
source.idstable in streaming surfaces, so a broken favicon isn't retried as nodes are reused. - Use
TxSourcesfor the source list at the end of an answer; both shareAiSourceItemand often appear together.
API Reference
Props
| Name | Type | Default | Description |
|---|---|---|---|
source | AiSourceItem | — | The reference, { id, url, title?, favicon? }. Required. |
label | string | — | Chip text; falls back to source.title, then the www.-stripped hostname, then the raw url. |
appear | boolean | true | Plays the entrance pop on mount; set false when re-rendering a settled answer. |
Events
| Name | Payload | Description |
|---|---|---|
open | (source: AiSourceItem) | Fires on click; navigation is prevented and left to the host. |
Slots
| Name | Scope | Description |
|---|---|---|
default | { source, label } | Replaces the chip text, rich content included. |
icon | { source } | Replaces the leading favicon. |
Overview
- It renders a real
<a href>; a click callspreventDefault()and emitsopen, so it never navigates an Electron renderer away. The browser's "open in new tab" and "copy link address" still work. - A favicon that fails to load stops rendering, and the chip degrades to text.
- The icon carries
alt=""andaria-hidden; the accessible name comes from the chip text. - The chip sits in the text flow; line height belongs to the surrounding paragraph.
- The entrance plays once, on mount; flipping
appearlater replays nothing.
Technologies
- Adapted from Beautiful UI (© 2026 Shane Levine, MIT).
- Source:
packages/tuffex/packages/components/src/inline-citation/.
查看源码
packages/tuffex/packages/components/src/inline-citation/index.ts