Citation Sources

Demo & usage

More examples

<sv-citation-sources variant="cards" [answer]="answer()" [citations]="citations()" [sources]="sources()" />
<sv-citation-sources variant="panel" [answer]="answer()" [citations]="citations()" [sources]="sources()" />

When to use

• A RAG answer where the reader has to be able to check a claim against its source.
• Any surface where the important question is not "what did it say" but "what is this resting on".
• For the retrieval pipeline itself — chunks, hit scores, index health — use the RAG Knowledge Base.

Async states

• loading
• error
• retry

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-citation-sources
  [citations]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `citations`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• `[claims]` makes claim ids the **first** anchor: a citation carrying `claimId` resolves to that claim’s text before `anchorText` and before offsets, and an id that is not in the answer leaves the citation unplaced and says so rather than falling back to stale offsets. `(claimsOpened)` emits the claim ids behind a source when the reader opens it, which is what lets a host persist ‘the reader checked this’ across re-generations.
• `answer`, `citations` and `sources` are inputs and all default to empty; import `DEMO_ANSWER` / `DEMO_CITATIONS` / `DEMO_SOURCES` for a demo.
• Three layouts via `variant`: `inline` (superscript chips in the prose), `cards` (chips plus a source list) and `panel` (a docked source list).
• A chip is a button, not a superscript — it emits `sourceSelect` with the source and the citation the reader activated.
• Coverage is exposed as a strip: percentage attributed, distinct source count, and the uncited passages themselves, longest first.
• `[uncitedMinChars]` (40, from the still-exported `SV_UNCITED_MIN_CHARS`) is the floor below which a gap is not worth reporting — the whitespace between two adjacent citations is not an unsourced claim. Forty characters is a sentence in English prose, two or three in Chinese and most of a bullet in a summary-style answer, so the figure is yours to set; `svCitationCoverage` takes it as an optional last argument.
• Free tier: uses only free icons.
• `anchorText` on a citation is the exact words of the ANSWER it covers, and it is placed by *finding* those words. Character offsets are the wrong anchor and every pipeline proves it: a trim, a collapsed double space, a markdown pass or a prepended greeting shifts every offset by the same amount, the chips slide off the claims they belong to, and nothing fails. Offsets stay as the fallback for a host that has not adopted it.
• When a citation cannot be located, or lands somewhere its own offsets disagree with, the component **says so in the surface** (`[data-sv-placement-notice]`) instead of clipping it away. An answer whose citations moved is worse than an uncited one, because it looks checked.
• `claimId` is identity rather than placement: the same claim re-worded keeps its id, so a host can persist 'the reader checked this' across re-generations.
• `[allowedUrlProtocols]` defaults to `http:`, `https:` and `mailto:`. A source URL is model output, which is untrusted input, and Angular renders a `javascript:` href as a dead `unsafe:` link — safe, and silent. A refused URL is shown as **text** with its scheme named: that the answer cited something unreachable is evidence about the answer. Relative and protocol-relative URLs are refused rather than resolved, since this component does not know the host's base URL.

Best practices

• Do: Pass character offsets from your generator, not a post-hoc string match. A citation matched by searching for the quote lands on the wrong sentence whenever the answer repeats a phrase.
• Do: Read the coverage strip. A six-chip answer with a 40 % coverage score has a long unattributed passage in it, and that passage is the one to check.
• Don't: Do not number citations per occurrence. One document quoted five times is one source; five numbers makes it read as five sources agreeing.
• Tip: Overlapping citations are ordinary, because chunks overlap. The answer is segmented on citation boundaries so every character renders exactly once.

Accessibility

• Chips are real buttons with accessible names naming the source they resolve to, not bare superscripts.
• The coverage percentage is stated in words as well as drawn as a bar.
• Uncited passages are listed as text, so the finding does not depend on noticing an absence of highlighting.