ChatSources

Numbered citations that open a hover card (with a carousel when one marker cites several sources) and the list of sources under a reply.

Chat@gaudi/design-system/chat/ChatSourcesView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import ChatSources from '@gaudi/design-system/chat/ChatSources';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/chat-sources-research-citations.json.

Usage

import { ChatMessageCitation, ChatMessageSources } from '@gaudi/design-system/chat';
<><p>  Readers leave early <ChatMessageCitation index={1} source={sources[0]} /> on long posts  <ChatMessageCitation index={2} sources={[sources[1], sources[2]]} />.</p><ChatMessageSources sources={sources} /></>

Examples

Research with citations

Storybook

API

8 props

Accessibility

Citations are buttons named “Source n: title”. The card opens on hover without taking focus, and on click, tap, Enter or Space with focus inside; arrow keys and buttons page the carousel and the position is announced.

Notes

See Cited answer on this page for grouped citations [1, 3] beside a SchemaDisplay tool result.

SchemaDisplayRead an API endpoint or a JSON Schema: method badge, path with highlighted parameters, and request and response schemas as an expandable property tree.ChatMessageOne turn in a conversation: avatar, sender and time, the content stack and a status footer.4 examples ChatBubbleThe surface around a message, with seven variants and reactions.4 examples AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples ChatAgentMarkThe assistant’s mark: a Gaudí-inspired motif glazed in a tile hue picked from a seed, or an icon, image or monogram on a token tile, with an optional activity badge.ChatFeedbackCopy, rate and regenerate a finished reply.