Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

ChatAgentMark

The 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.

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

Usage

import { ChatAgentMark } from '@gaudi/design-system/chat';
<><ChatAgentMark name='Gaudi' state='thinking' /><ChatAgentMark name='Research agent' icon='Search' tone='discovery' size='sm' decorative /></>

Examples

Playground

Storybook

Motifs and glazes

Storybook

Status at every size

Storybook

Icon, image or monogram instead

Storybook

In a thread, with several agents

Storybook

API

12 props

Accessibility

role=img named after the agent unless decorative.

ChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.ChatActivityHistoryWhat happened in a conversation, newest last.ChatBubbleThe surface around a message, with seven variants and reactions.4 examplesChatDelegationWork handed to another agent: who took it, the brief, its status and its activity.1 exampleChatEffortSliderHow hard the assistant should think, as a stepped slider over named levels.ChatFeedbackCopy, rate and regenerate a finished reply.