Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatMessage

One turn in a conversation: avatar, sender and time, the content stack and a status footer.

Chat@gaudi/design-system/chat/ChatMessageView 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 { ChatMessage } from '@gaudi/design-system/chat/ChatMessage';

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

Usage

import { ChatBubble, ChatBubbleContent, ChatMessage, ChatMessageAvatar, ChatMessageContent, ChatMessageFooter } from '@gaudi/design-system/chat';
<ChatMessage align='end'>  <ChatMessageAvatar><Avatar src={me.src} name={me.name} size='sm' alt='' /></ChatMessageAvatar>  <ChatMessageContent>    <ChatBubble align='end'><ChatBubbleContent>Moving the legend under the axis.</ChatBubbleContent></ChatBubble>    <ChatMessageFooter>Read 10:42</ChatMessageFooter>  </ChatMessageContent></ChatMessage>

Examples

Error, retry and suggestions

Storybook

Delivered files and data

Storybook

Assistant reply

Storybook

Team conversation

Storybook

API

4 props

Accessibility

Name the sender in a header or visually hidden text; side alone is lost when a thread is read aloud.

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 examplesChatBubbleThe surface around a message, with seven variants and reactions.4 examplesAttachmentFile attachments with metadata, previews, actions and upload states.4 examplesItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 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.ChatMessageListThe conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.6 examples