Citation card
Where a fact in the conversation came from. Stack of cards below a message, or inline numeric badges wired to jump to the matching source.
Included in the single kansho full pack. Components are not offered as separate installs.
Card — kinds
event ∈ {tool, read, write, delete, network, approval, auth, run}. New types require a migration.
return commit.touchesSchema ? 'high' : 'medium';
Inline citations in prose
The audit-log enum requires a migration whenever a new event type is added . The current diff adds delete without a backfill , which contradicts the documented procedure.
Source pills with favicons
Search the world's information, including webpages, images, videos and more....
Stacked under a message
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Conversation rich
components/agent/conversation-rich.tsxURL favicon
components/agent/url-favicon.tsxComponent documentation
Citation Card
components/agent/citation-card.tsxPurpose
Presents a numbered source card or compact inline citation reference.
Appropriate use
Use to connect generated claims to web, document, code, or memory evidence.
Example
components/agent/citation-card.tsx has a representative live example in the "Card — kinds" section on /components/citation-card.
States
Kinds are web, doc, code, and memory; cards may include URL, snippet, retrieved time, and index; inline citations may be static or clickable.
API and props
CitationCard accepts index, title, source, url, snippet, retrievedAt, kind, and className; InlineCitation accepts index, title, onClick, and className.
Dependencies
Direct imports are React, Lucide icons, UrlFavicon, and cn.
Accessibility
Linked cards use anchors; clickable InlineCitation renders a named button, while decorative icons are hidden.
Limitations
It does not validate URLs, fetch metadata, manage footnote focus, or guarantee source trustworthiness.
Source
Source: components/agent/citation-card.tsx.
Full pack
components/agent/citation-card.tsx is documented at /components/citation-card and installs only through the single Kansho full pack; no individual component install is offered.
Conversation rich
components/agent/conversation-rich.tsxPurpose
Provides rich conversation layout, image attachments, source pills, groups, and a small copy action.
Appropriate use
Use to compose evidence-rich assistant messages around MessageBubble rather than as a standalone chat system.
Example
components/agent/conversation-rich.tsx has a representative live example in the "Source pills with favicons" section on /components/citation-card.
States
ChatContainer supports compact or comfortable density; images expose only supplied actions; source pills can be links or static and active; groups wrap supplied pills.
API and props
Exports ChatContainer, ChatImageAttachment, SourcePill, SourcePillGroup, and InlineCopyButton with content, image, link, action, density, and className props.
Dependencies
Direct imports are React, Lucide icons, UrlFavicon, IconButton, and cn.
Accessibility
Image actions are rendered only when wired and have accessible names; image alt text is required, and linked source pills retain anchor semantics.
Limitations
It does not fetch images, download files, copy text, validate links, or announce an active source automatically.
Source
Source: components/agent/conversation-rich.tsx.
Full pack
components/agent/conversation-rich.tsx is documented at /components/citation-card and installs only through the single Kansho full pack; no individual component install is offered.
URL favicon
components/agent/url-favicon.tsxPurpose
Provides a neutral local monogram or globe tile for URL-related surfaces without network requests.
Appropriate use
Use as a decorative source cue beside visible domain or link text.
Example
components/agent/url-favicon.tsx has a representative live example in the "Source pills with favicons" section on /components/citation-card.
States
Supports sm or full shape, a seed-derived monogram, and an empty-seed globe fallback.
API and props
UrlFavicon accepts seed, shape, and className.
Dependencies
Direct imports are React, Lucide icons, and cn.
Accessibility
The tile is always aria-hidden because nearby visible text must identify the source.
Limitations
It does not fetch a real favicon, validate domains, or provide a standalone accessible label.
Source
Source: components/agent/url-favicon.tsx.
Full pack
components/agent/url-favicon.tsx is documented at /components/citation-card and installs only through the single Kansho full pack; no individual component install is offered.