Citation

Free · MIT

An inline [n]. Opens the source in a popover on click or Enter, so evidence is one step away without leaving the thread. A source the message doesn't list renders as a plain bracket rather than a guess.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/citation

Brings in: chat, locale, popover, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { Citation, SourceList } from "@/components/citation"
import type { MessageSource } from "@/lib/chat"

const sources: MessageSource[] = [
  { id: "s1", marker: 1, kind: "document", label: "Returns policy", origin: "Help centre", snippet: "Items can be returned within 30 days of delivery." },
  { id: "s2", marker: 2, kind: "query", label: "Order #4821", origin: "Orders database" },
]

export default function Example() {
  return (
    <div className="flex max-w-lg flex-col gap-3 text-sm">
      <p>
        You can return it until 14 December <Citation source={sources[0]} /> since it was delivered on 14 November <Citation source={sources[1]} />.
      </p>
      <SourceList sources={sources} />
    </div>
  )
}

<Citation>

Prop	Type	Default	Description
source	`MessageSource \| undefined`	—	The source this marker points to; without it the marker says it's unknown.
marker	`number \| undefined`	—	The number to show when there's no source.

<SourceList>

The sources under a reply, as chips that open the same detail.

Prop	Type	Default	Description
sourcesrequired	`MessageSource[]`	—	Every source the reply used, in marker order.
className	`string \| undefined`	—	Extra classes for the outer element.

<SourceDetail>

Prop	Type	Default	Description
sourcerequired	`MessageSource`	—	The source this marker points to; without it the marker says it's unknown.

Strings

The fixed words, in English by default. Change any of them under citation in <LocaleProvider strings={{ … }}>; the table is exported as citationStrings.

Key	English
document	Document
web	Web page
query	Query
data	Data
code	Code
workflow	Workflow
knowledge	Knowledge
source	Source
notVerified	The agent cites this but hasn’t verified it.
sourceLabel	Source {marker}: {label}
sources	Sources