ChatDelegation

Work handed to another agent: who took it, the brief, its status and its activity.

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

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

Usage

import { ChatMessageDelegation, ChatMessageTool } from '@gaudi/design-system/chat';
<ChatMessageDelegation agent={{ name: 'Research agent' }} status='running' instructions={brief}>  <ChatMessageTool name='web_search' status='done' /></ChatMessageDelegation>

Examples

Handing work to another agent

Storybook

API

5 props

Accessibility

The status is named in text, not colour alone.

ChatMessageOne turn in a conversation: avatar, sender and time, the content stack and a status footer.4 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.ChatMessageListThe conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.6 examples