Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Chat

The chat frame: a shell for a full page or a sidebar assistant that composes the Chat parts: the thread, the composer, sessions, files, the plan and activity.

Blocks@gaudi/design-system/blocks/ChatView in StorybookSource

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 Chat from '@gaudi/design-system/blocks/Chat';

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

Usage

import { ChatShell } from '@gaudi/design-system/blocks/Chat';import { ChatPlan, ChatSessionList, ChatMessageParts, ChatMessageScroller, ChatMessageScrollerContent, ChatMessageScrollerItem, ChatMessageScrollerProvider, ChatMessageScrollerViewport, ChatPromptComposer } from '@gaudi/design-system/chat';
<ChatMessageScrollerProvider autoScroll>  <ChatShell    title='Local-first drafts post'    navigation={<ChatSessionList sessions={sessions} activeId={activeId} onSelect={openChat} onRename={rename} onDelete={remove} />}    details={<ChatPlan steps={plan} />}    composer={<ChatPromptComposer status={streaming ? 'streaming' : 'ready'} onSubmit={send} onStop={stop} />}  >    <ChatMessageScroller>      <ChatMessageScrollerViewport aria-label='Conversation'>        <ChatMessageScrollerContent>          {turns.map((turn) => (            <ChatMessageScrollerItem key={turn.id} messageId={turn.id} scrollAnchor={turn.role === 'user'}>              <ChatMessageParts parts={turn.parts} streaming={turn.streaming} />            </ChatMessageScrollerItem>          ))}        </ChatMessageScrollerContent>      </ChatMessageScrollerViewport>    </ChatMessageScroller>  </ChatShell></ChatMessageScrollerProvider>

Examples

Agent at work: Plan and activity

Storybook

Full page: Reviewing a pull request

Storybook

New chat: Welcome and suggestions

Storybook
Storybook

API

7 props

Accessibility

The thread owns its scrolling (ChatMessageScroller) so the page never scrolls, the header names the conversation, Sheets restore focus to the button that opened them, and every icon action has a label.

ChatSessionListSession navigation inside a complete chat: grouped conversations with title search, new chat, rename and delete. The compact panel opens History in place of the transcript; the full-page composition uses ChatShell navigation and its narrow-screen Sheet. The host keeps a separate transcript and draft for each session.ChatMessageListThe conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.6 examplesChatMessageOne turn in a conversation: avatar, sender and time, the content stack and a status footer.4 examplesChatBubbleThe surface around a message, with seven variants and reactions.4 examplesChatInputThe composer: ChatPromptComposer with mentions, commands, attachments and send or stop; ChatPromptQueue; ChatModelSelect.3 examplesChatAgentMarkThe 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.