Sources
A collapsible list of cited sources.
Usage
Basic
Loading demo...
Stacked Sources
variant="stack" swaps the header globe for the leading favicons, so the cited sites show while the list is collapsed.
Appears once a streaming answer settles
Loading demo...
Best Practices
- Handle
open; without a listener, clicking a citation does nothing. - On desktop, open links in the external browser with
noopenerrather than navigating the app window. - Use stable ids: failed favicons are recorded by
id, so a changing id retries broken images. - Override
labelFormatteron non-English surfaces; the default is English and pluralizes in English.
API Reference
Props
| Name | Type | Default | Description |
|---|---|---|---|
sources | AiSourceItem[] | — | The citations, { id, url, title?, favicon? }. Required. |
labelFormatter | (count: number) => string | — | Collapsed header text; defaults to Used N source(s). |
defaultOpen | boolean | false | Initial open state, read once on mount. |
variant | 'default' | 'stack' | 'default' | stack replaces the header globe with overlapped favicons. |
Events
| Name | Payload | Description |
|---|---|---|
open | (source: AiSourceItem) | Fires when a citation is clicked; navigation is prevented and left to the host. |
Overview
- A click calls
preventDefault()and emitsopen; thehrefstays on the<a>, so "open in new tab" and "copy link address" still work. stackdraws at most the first three sources that have a usable favicon and falls back to the globe when none do; a favicon that fails drops out and the next source takes its place.- The ring around stacked favicons is
--tx-sources-stack-ring, the page background by default; repoint it when the header sits on another surface. - An empty
titleshows the hostname withoutwww.; an unparseableurlshows verbatim. - A favicon that fails to load is recorded and never re-requested.
- The list is an
<ol>numbered by render order; favicons carryalt=""andaria-hidden, and the title and domain carry the accessible name.