# AI Citations and Provenance

> Show where an AI answer came from. Inline numbered markers that open a quote, source chips, evidence cards with the quoted passage, and a provenance line with model, latency, grounding and confidence.

Source: https://docs.nasaqui.com/components/ai-citations

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/ai-citations.json
```

An answer people can check. The text carries `[1]` style markers, each marker opens the quote it rests on, the sources
sit below as chips, and a provenance line says which model answered, how long it took and whether the answer was
grounded in sources. They hold no retrieval or model logic: you pass the answer and the sources you used.

## When to use

- Answers from retrieval (RAG), search or a knowledge base, where the reader must be able to verify a claim.
- Any AI output where you want to show the model, latency and confidence in one calm line.

## When not to use

- A plain summary with a source list only: [`AiSummary`](https://docs.nasaqui.com/components/ai-states) already has that.
- A full conversation: use [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat), which has its own non-interactive source row.

## Import

```tsx
import { AiCitedAnswer, type AiCitationSource } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
const sources: AiCitationSource[] = [
  { id: "s1", title: "Q3 report", url: "https://example.com/q3", quote: "Revenue grew 12% year on year.", locator: "p. 4" },
  { id: "s2", title: "Board notes", quote: "Churn fell to 2.1%." },
];

<AiCitedAnswer
  text="Revenue grew 12% [1] while churn fell [2]."
  sources={sources}
  provenance={{ model: "claude-sonnet", latencyMs: 1240, grounded: true, confidence: 0.86 }}
  onFeedback={(v) => save(v)}
/>;
```

## Anatomy

| Part | What it is |
| --- | --- |
| `AiCitedAnswer` | The whole answer: label, text, chips, evidence, coverage note, provenance, thumbs. |
| `AiCitedText` | Just the Markdown text with `[n]` markers turned into buttons. |
| `AiSourceChips` | The row of source chips. Hover or press one to light up its markers. |
| `AiEvidenceCard` | One source with its quote, locator, kind and match score. |
| `AiProvenance` | Model, latency, grounded state, source count, tokens, retrieval time, confidence. |

## API

### `AiCitationSource`

| Field | Type | Notes |
| --- | --- | --- |
| `id` | `string` | Stable id. Used for highlight state. |
| `title` | `string` | Shown on the chip and card. |
| `url` | `string?` | Only `http`, `https` and `mailto` links are rendered as links. |
| `quote` | `string?` | The passage the answer rests on. |
| `snippet` | `string?` | Fallback when there is no quote. |
| `locator` | `string?` | Page, section or timestamp: "p. 4". |
| `kind` | `string?` | "PDF", "Web", "Ticket". |
| `score` | `number?` | 0 to 1 match strength, shown as a percentage. |
| `highlight` | `string \| string[]?` | Words to mark inside the quote. Plain data, never HTML. |

### `AiCitedAnswer`

| Prop | Type | Notes |
| --- | --- | --- |
| `text` | `string` | Markdown with `[1]`, `[1, 2]` or `[2-4]` markers. Numbers with no source stay plain text. |
| `sources` | `AiCitationSource[]` | Marker 1 is `sources[0]`. |
| `provenance` | `AiProvenanceInfo?` | `model`, `latencyMs`, `grounded`, `sourceCount`, `tokens`, `retrieved`, `at`, `confidence`, `extra`. |
| `model` | `string?` | Name after the "AI generated" label. Defaults to `provenance.model`. |
| `defaultEvidenceOpen` | `boolean` | Start with the evidence cards open. |
| `feedback`, `onFeedback` | | Thumbs, controlled. |
| `onSourceOpen` | `(source) => void` | Fires when a chip is pressed. |
| `labels` | `Partial<AiCitationsLabels>` | Override any text. |

`AiCitedText`, `AiSourceChips`, `AiEvidenceCard` and `AiProvenance` take the matching subset, plus `activeId` and
`onActiveChange` where marker, chip and card share a highlight.

## Examples

- Text only, in a chat bubble: `<AiCitedText text={answer} sources={sources} />`.
- Sources you cite in a summary card: `<AiSourceChips sources={sources} citedIds={["s1"]} />`.
- Ungrounded answer: `provenance={{ model: "x", grounded: false }}` shows a "not grounded" state, so nobody reads it as checked.

## Accessibility

- A marker is a real button named "Source 1: title". Its popover shows the quote, and Escape closes it.
- Chips are buttons, and the evidence list is a labelled list.
- Grounded and confidence are text, never colour alone.
- Nothing moves on its own, so reduced motion needs no special handling.

## RTL and i18n

- English and Arabic labels come from `useOptionalNasaq()`, and every text can be replaced with `labels`.
- Markers and quotes use `dir="auto"`, so an Arabic answer with an English source title reads correctly.
- Numbers, latency, model names and URLs stay left to right inside their own `bdi`.

## Styling and tokens

Uses `--nq-accent`, `--nq-hover`, `--nq-success-text` and the border and popover tokens. The active marker, chip and
card share the accent ring, so there is one highlight to learn.

## Do / Don't

- Do put the quote the model actually used, not a paraphrase.
- Do list only sources the answer used.
- Don't show markers for sources that do not exist. Out-of-range numbers are left as text on purpose.
- Don't pass user-written HTML in `quote`. It is rendered as text.

## Related

[`AiSummary`](https://docs.nasaqui.com/components/ai-states), [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat), [`Markdown`](https://docs.nasaqui.com/components/markdown),
[`Popover`](https://docs.nasaqui.com/components/popover), [`AgentSteps`](https://docs.nasaqui.com/components/agent-steps).

## Code

### React

```tsx
const sources: AiCitationSource[] = [
  { id: "s1", title: "Q3 report", url: "https://example.com/q3", quote: "Revenue grew 12% year on year.", locator: "p. 4" },
  { id: "s2", title: "Board notes", quote: "Churn fell to 2.1%." },
];

<AiCitedAnswer
  text="Revenue grew 12% [1] while churn fell [2]."
  sources={sources}
  provenance={{ model: "claude-sonnet", latencyMs: 1240, grounded: true, confidence: 0.86 }}
  onFeedback={(v) => save(v)}
/>;
```

### shadcn

```tsx
const sources: AiCitationSource[] = [
  { id: "s1", title: "Q3 report", url: "https://example.com/q3", quote: "Revenue grew 12% year on year.", locator: "p. 4" },
  { id: "s2", title: "Board notes", quote: "Churn fell to 2.1%." },
];

<AiCitedAnswer
  text="Revenue grew 12% [1] while churn fell [2]."
  sources={sources}
  provenance={{ model: "claude-sonnet", latencyMs: 1240, grounded: true, confidence: 0.86 }}
  onFeedback={(v) => save(v)}
/>;
```

### Vue

```vue
<script setup lang="ts">
import { ref } from "vue";
import { NqAiCitedAnswer, type AiCitationSource } from "@fadymondy/nasaq/vue";

const sources: AiCitationSource[] = [
  { id: "s1", title: "Q3 report", url: "https://example.com/q3", quote: "Revenue grew 12% year on year.", locator: "p. 4" },
  { id: "s2", title: "Board notes", quote: "Churn fell to 2.1%." },
];
const feedback = ref<"up" | "down" | null>(null);
</script>

<template>
  <NqAiCitedAnswer
    text="Revenue grew 12% [1] while churn fell [2]."
    :sources="sources"
    :provenance="{ model: 'claude-sonnet', latencyMs: 1240, grounded: true, confidence: 0.86 }"
    :feedback="feedback"
    :on-feedback="(v) => (feedback = v)"
  />
</template>
```

### Blade

```blade
<x-nq::ai-citations feedback :sources="[
    ['id' => 's1', 'title' => 'Q3 report', 'url' => 'https://example.com/q3', 'quote' => 'Revenue grew 12% year over year, driven by renewals.', 'locator' => 'p. 4', 'highlight' => 'Revenue grew 12%', 'score' => 0.92],
    ['id' => 's2', 'title' => 'Board notes', 'quote' => 'Churn fell to 2.1% after the onboarding change.', 'kind' => 'Notes', 'score' => 0.74],
]" text="Revenue grew 12% [1] while churn fell [2].

The outlook is stable." :provenance="['model' => 'claude-sonnet', 'latencyMs' => 1240, 'grounded' => true, 'sourceCount' => 2, 'confidence' => 0.86]" />
```

### HTML + Alpine

```html
<section data-slot="ai-cited-answer" x-data="nqAiCitations(false, 'nq-ai-000001')" x-on:nq-cite-active="setActive($event)" x-on:nq-cite-select="select($event)"
    class="flex min-w-0 flex-col gap-3">
    <div class="flex items-center justify-between gap-2">
        <span data-slot="ai-generated-label"     class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-accent/40 bg-nq-accent/15 text-nq-accent-text gap-1"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/>
  <path d="M20 2v4"/>
  <path d="M22 4h-4"/>
  <circle cx="4" cy="20" r="2"/>
</svg>    AI generated
    <bdi dir="ltr" class="font-normal opacity-80">claude-sonnet</bdi></span>
        <div data-slot="ai-feedback" role="group" x-data="nqAiFeedback(null)" x-modelable="value" class="inline-flex items-center">
    <button data-slot="button"
     type="button"                         data-value="up" aria-label="Good summary" x-bind:aria-pressed="pressed($el.dataset.value)" x-on:click="rate($el.dataset.value)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 aria-pressed:text-nq-success-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
  <path d="M7 10v12"/>
</svg></button>
    <button data-slot="button"
     type="button"                         data-value="down" aria-label="Not helpful" x-bind:aria-pressed="pressed($el.dataset.value)" x-on:click="rate($el.dataset.value)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 aria-pressed:text-nq-danger-text">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
  <path d="M17 14V2"/>
</svg></button>
    <span role="status" class="sr-only" x-text="value ? 'Thanks for the feedback' : ``"></span>
</div>
    </div>
    <div data-slot="ai-cited-text" class="flex min-w-0 flex-col gap-3 text-body text-nq-fg-body"><p data-slot="text" dir="auto" class="text-body text-nq-fg-body text-start">Revenue grew 12% <span x-data="nqAiCitationMarker('s1')" class="contents">
    <button type="button" data-slot="ai-citation-marker" aria-label="Source 1: Q3 report"
        x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" x-on:mouseenter="hoverIn()" x-on:mouseleave="hoverOut()" x-bind:aria-expanded="open"
        x-bind:data-popup-open="open ? `` : null" x-bind:data-active="$data.active === sid ? `` : null"
        class="mx-0.5 inline-grid h-4 min-w-4 -translate-y-0.5 place-items-center rounded-full border border-border bg-secondary px-1 align-middle text-[10px] leading-none tabular-nums text-foreground cursor-pointer outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-nq-focus data-active:border-nq-accent data-active:bg-nq-accent/15 data-popup-open:border-nq-accent"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</button>
    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-80 p-0"><div data-slot="ai-evidence-card"
        class="flex min-w-0 flex-col gap-2 rounded-control border-border p-3 text-start transition-colors duration-150 ease-nq data-active:border-nq-accent data-active:bg-nq-hover border-0 bg-transparent">
    <div class="flex items-start gap-2">
                    <span class="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-secondary text-[11px] tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                <div class="flex min-w-0 flex-1 flex-col">
            <span dir="auto" class="text-body-sm font-medium text-foreground">Q3 report</span>
            <span class="flex flex-wrap items-center gap-x-2 text-caption text-muted-foreground">
                <bdi dir="ltr">example.com</bdi>                <bdi dir="ltr">p. 4</bdi>            </span>
        </div>
            </div>
    <figure class="flex flex-col gap-1">
        <figcaption class="sr-only">Excerpt from the source</figcaption>
                    <blockquote dir="auto" class="flex gap-2 border-s-2 border-nq-line-strong ps-3 text-body-sm text-nq-fg-body">
                <svg aria-hidden="true" class="mt-0.5 size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
  <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
</svg>                <span><mark class="rounded-[2px] bg-nq-accent/20 px-0.5 text-foreground">Revenue grew 12%</mark> <span> year over year, driven by renewals.</span> </span>
            </blockquote>
            </figure>
    </div></div>
</template>
</span>
 while churn fell <span x-data="nqAiCitationMarker('s2')" class="contents">
    <button type="button" data-slot="ai-citation-marker" aria-label="Source 2: Board notes"
        x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" x-on:mouseenter="hoverIn()" x-on:mouseleave="hoverOut()" x-bind:aria-expanded="open"
        x-bind:data-popup-open="open ? `` : null" x-bind:data-active="$data.active === sid ? `` : null"
        class="mx-0.5 inline-grid h-4 min-w-4 -translate-y-0.5 place-items-center rounded-full border border-border bg-secondary px-1 align-middle text-[10px] leading-none tabular-nums text-foreground cursor-pointer outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-nq-focus data-active:border-nq-accent data-active:bg-nq-accent/15 data-popup-open:border-nq-accent"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</button>
    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-80 p-0"><div data-slot="ai-evidence-card"
        class="flex min-w-0 flex-col gap-2 rounded-control border-border p-3 text-start transition-colors duration-150 ease-nq data-active:border-nq-accent data-active:bg-nq-hover border-0 bg-transparent">
    <div class="flex items-start gap-2">
                    <span class="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-secondary text-[11px] tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                <div class="flex min-w-0 flex-1 flex-col">
            <span dir="auto" class="text-body-sm font-medium text-foreground">Board notes</span>
            <span class="flex flex-wrap items-center gap-x-2 text-caption text-muted-foreground">
                                            </span>
        </div>
        <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Notes</span>
    </div>
    <figure class="flex flex-col gap-1">
        <figcaption class="sr-only">Excerpt from the source</figcaption>
                    <blockquote dir="auto" class="flex gap-2 border-s-2 border-nq-line-strong ps-3 text-body-sm text-nq-fg-body">
                <svg aria-hidden="true" class="mt-0.5 size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
  <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
</svg>                <span><span>Churn fell to 2.1% after the onboarding change.</span> </span>
            </blockquote>
            </figure>
    </div></div>
</template>
</span>
.</p>
<p data-slot="text" dir="auto" class="text-body text-nq-fg-body text-start">The outlook is stable.</p>
</div>
            <p role="note" class="text-caption text-muted-foreground"><span class="text-nq-warning-text">1 of 2 paragraphs cite a source.</span> Some statements have no source. Check them before you rely on them.</p>
        <div data-slot="ai-source-chips" role="group" aria-label="Sources cited" x-data class="flex flex-col gap-1.5">
    <span class="text-caption text-muted-foreground">Sources</span>
    <ol class="flex flex-wrap gap-2">
                                <li class="min-w-0">
                <button type="button" class="flex max-w-56 items-center gap-2 rounded-control border border-border bg-card px-2 py-1.5 text-start outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus data-active:border-nq-accent data-active:bg-nq-hover" x-on:click="$dispatch(`nq-cite-select`, { id: 's1', index: 0 })" x-bind:data-active="$data.active === 's1' ? `` : null" x-on:mouseenter="$dispatch(`nq-cite-active`, { id: 's1' })" x-on:mouseleave="$dispatch(`nq-cite-active`, { id: null })" x-on:focus="$dispatch(`nq-cite-active`, { id: 's1' })" x-on:blur="$dispatch(`nq-cite-active`, { id: null })">
                    <span class="grid size-4 shrink-0 place-items-center rounded-full bg-secondary text-[10px] tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                    <span class="flex min-w-0 flex-col">
                        <span dir="auto" class="truncate text-caption text-foreground">Q3 report</span>
                        <bdi dir="ltr" class="truncate text-[11px] text-muted-foreground">example.com</bdi>                                            </span>
                </button>
            </li>
                                <li class="min-w-0">
                <button type="button" class="flex max-w-56 items-center gap-2 rounded-control border border-border bg-card px-2 py-1.5 text-start outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus data-active:border-nq-accent data-active:bg-nq-hover" x-on:click="$dispatch(`nq-cite-select`, { id: 's2', index: 1 })" x-bind:data-active="$data.active === 's2' ? `` : null" x-on:mouseenter="$dispatch(`nq-cite-active`, { id: 's2' })" x-on:mouseleave="$dispatch(`nq-cite-active`, { id: null })" x-on:focus="$dispatch(`nq-cite-active`, { id: 's2' })" x-on:blur="$dispatch(`nq-cite-active`, { id: null })">
                    <span class="grid size-4 shrink-0 place-items-center rounded-full bg-secondary text-[10px] tabular-nums text-muted-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                    <span class="flex min-w-0 flex-col">
                        <span dir="auto" class="truncate text-caption text-foreground">Board notes</span>
                                                                    </span>
                </button>
            </li>
            </ol>
</div>
            <div data-slot="collapsible" x-data="nqCollapsible(false)" x-modelable="open" x-id="['nq-collapsible']"
    :data-open="open ? '' : undefined" :data-closed="open ? undefined : ''"
     data-closed     x-model="evidenceOpen">
    <button type="button" data-slot="collapsible-trigger" x-bind:aria-controls="$id('nq-collapsible', 'panel')" x-bind:data-panel-open="open ? '' : undefined" x-on:click="toggle()" x-bind:aria-expanded="open" aria-expanded="false"
                                class="group/trigger inline-flex min-h-control-sm items-center gap-1.5 rounded-control text-caption text-muted-foreground outline-none hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus">
                <svg aria-hidden="true" class="size-3.5 transition-transform duration-150 ease-nq group-data-panel-open/trigger:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg>                <span x-text="open ? 'Hide evidence' : 'Show evidence'">Show evidence</span>
            </button>
            <div data-slot="collapsible-panel" x-ref="panel" x-nq-presence="open" :id="$id('nq-collapsible', 'panel')"
     data-closed style="display:none"     class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0"><ul aria-label="Evidence" class="mt-1 grid gap-2 sm:grid-cols-2">
                                            <li id="nq-ai-000001-ev-s1" class="min-w-0"><div data-slot="ai-evidence-card"
     x-bind:data-active="$data.active === 's1' ? `` : null" x-on:mouseenter="$dispatch(`nq-cite-active`, { id: 's1' })" x-on:mouseleave="$dispatch(`nq-cite-active`, { id: null })"     class="flex min-w-0 flex-col gap-2 rounded-control border border-border bg-card p-3 text-start transition-colors duration-150 ease-nq data-active:border-nq-accent data-active:bg-nq-hover">
    <div class="flex items-start gap-2">
                    <span class="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-secondary text-[11px] tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1</bdi>
</span>
                <div class="flex min-w-0 flex-1 flex-col">
            <span dir="auto" class="text-body-sm font-medium text-foreground">Q3 report</span>
            <span class="flex flex-wrap items-center gap-x-2 text-caption text-muted-foreground">
                <bdi dir="ltr">example.com</bdi>                <bdi dir="ltr">p. 4</bdi>            </span>
        </div>
            </div>
    <figure class="flex flex-col gap-1">
        <figcaption class="sr-only">Excerpt from the source</figcaption>
                    <blockquote dir="auto" class="flex gap-2 border-s-2 border-nq-line-strong ps-3 text-body-sm text-nq-fg-body">
                <svg aria-hidden="true" class="mt-0.5 size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
  <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
</svg>                <span><mark class="rounded-[2px] bg-nq-accent/20 px-0.5 text-foreground">Revenue grew 12%</mark> <span> year over year, driven by renewals.</span> </span>
            </blockquote>
            </figure>
            <div class="flex flex-wrap items-center justify-between gap-2 text-caption text-muted-foreground">
                            <span class="flex items-center gap-2">
                    Relevance
                    <div data-slot="progress" data-tone="default" role="progressbar"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="92"     aria-valuetext="92%" data-progressing
    aria-label="Relevance" class="flex flex-col gap-1.5 w-14">
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:92%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                    <span class="text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">92%</bdi>
</span>
                </span>
                                        <a href="https://example.com/q3" target="_blank" rel="noopener noreferrer"
                    class="inline-flex items-center gap-1 rounded-[2px] text-foreground underline decoration-nq-line-strong underline-offset-4 outline-none hover:decoration-current focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">
                    Open source
                    <svg aria-hidden="true" class="size-3 rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>                </a>
                    </div>
    </div>
</li>
                                            <li id="nq-ai-000001-ev-s2" class="min-w-0"><div data-slot="ai-evidence-card"
     x-bind:data-active="$data.active === 's2' ? `` : null" x-on:mouseenter="$dispatch(`nq-cite-active`, { id: 's2' })" x-on:mouseleave="$dispatch(`nq-cite-active`, { id: null })"     class="flex min-w-0 flex-col gap-2 rounded-control border border-border bg-card p-3 text-start transition-colors duration-150 ease-nq data-active:border-nq-accent data-active:bg-nq-hover">
    <div class="flex items-start gap-2">
                    <span class="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-secondary text-[11px] tabular-nums text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">2</bdi>
</span>
                <div class="flex min-w-0 flex-1 flex-col">
            <span dir="auto" class="text-body-sm font-medium text-foreground">Board notes</span>
            <span class="flex flex-wrap items-center gap-x-2 text-caption text-muted-foreground">
                                            </span>
        </div>
        <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Notes</span>
    </div>
    <figure class="flex flex-col gap-1">
        <figcaption class="sr-only">Excerpt from the source</figcaption>
                    <blockquote dir="auto" class="flex gap-2 border-s-2 border-nq-line-strong ps-3 text-body-sm text-nq-fg-body">
                <svg aria-hidden="true" class="mt-0.5 size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
  <path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"/>
</svg>                <span><span>Churn fell to 2.1% after the onboarding change.</span> </span>
            </blockquote>
            </figure>
            <div class="flex flex-wrap items-center justify-between gap-2 text-caption text-muted-foreground">
                            <span class="flex items-center gap-2">
                    Relevance
                    <div data-slot="progress" data-tone="default" role="progressbar"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="74"     aria-valuetext="74%" data-progressing
    aria-label="Relevance" class="flex flex-col gap-1.5 w-14">
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:74%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-primary"></div>
    </div>
</div>
                    <span class="text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">74%</bdi>
</span>
                </span>
                                </div>
    </div>
</li>
                                    </ul></div>
</div>
                <div data-slot="ai-provenance" x-data="nqCollapsible(false)" x-modelable="open" x-id="['nq-collapsible']"
    :data-open="open ? '' : undefined" :data-closed="open ? undefined : ''"
     data-closed     class="rounded-control border border-border bg-secondary">
    <button type="button" data-slot="collapsible-trigger" x-bind:aria-controls="$id('nq-collapsible', 'panel')" x-bind:data-panel-open="open ? '' : undefined" x-on:click="toggle()" x-bind:aria-expanded="open" aria-expanded="false"
                class="group/trigger flex min-h-control-sm w-full flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1.5 text-start text-caption text-muted-foreground outline-none focus-visible:outline-2 focus-visible:outline-nq-focus">
                    <svg aria-hidden="true" class="size-3.5 shrink-0 text-nq-success-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>
  <path d="m9 12 2 2 4-4"/>
</svg>                <span class="sr-only">How this answer was made</span>
        <span class="text-foreground">Grounded in 2 sources</span>        <bdi dir="ltr">claude-sonnet</bdi>        <span><bdi data-slot="num" data-numeric="" class="tabular-nums">1.2</bdi>
 s</span>        <span class="flex-1"></span>
        <svg aria-hidden="true" class="size-3.5 shrink-0 transition-transform duration-150 ease-nq group-data-panel-open/trigger:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg>    </button>
    <div data-slot="collapsible-panel" x-ref="panel" x-nq-presence="open" :id="$id('nq-collapsible', 'panel')"
     data-closed style="display:none"     class="h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-200 ease-nq motion-reduce:transition-none data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0"><div class="flex flex-col gap-3 border-t border-border px-3 py-2">
            <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-caption">
                                    <div class="contents"><dt class="text-muted-foreground">Model</dt><dd class="min-w-0 text-foreground"><bdi dir="ltr">claude-sonnet</bdi></dd></div>
                                                    <div class="contents"><dt class="text-muted-foreground">Response time</dt><dd class="min-w-0 text-foreground"><bdi data-slot="num" data-numeric="" class="tabular-nums">1.2</bdi>
 s</dd></div>
                                                                                            </dl>
            <div data-slot="ai-confidence" data-level="high" class="flex items-center gap-2 text-caption text-muted-foreground">
    <span>Confidence</span>
    <div data-slot="progress" data-tone="success" role="progressbar"     aria-valuemin="0" aria-valuemax="100"  aria-valuenow="86"     aria-valuetext="86%" data-progressing
    aria-label="Confidence" class="flex flex-col gap-1.5 w-16">
        <div data-slot="progress-track" data-progressing class="relative block w-full overflow-hidden rounded-full bg-nq-surface-soft h-1">
        <div data-slot="progress-indicator" data-progressing style="inset-inline-start:0;width:86%"
            class="block h-full rounded-full transition-[width] duration-300 ease-nq motion-reduce:transition-none bg-nq-success"></div>
    </div>
</div>
    <span class="text-foreground">High <bdi data-slot="num" data-numeric="" class="tabular-nums">86%</bdi>
</span>
</div>
        </div></div>
</div>
    </section>
```