ChatPersona

The assistant’s presence in a voice conversation: an orb that rests, connects, listens, thinks, speaks, sleeps or shows an error, drawn by one of eight renderers.

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

Usage

import { ChatPersona, useAudioLevel } from '@gaudi/design-system/chat';
const { levelRef, waveformRef } = useAudioLevel(micStream);
<><ChatPersona name='Gaudi' state='listening' variant='waveform' size='lg' levelRef={levelRef} waveformRef={waveformRef} /><ChatPersona name='Gaudi' state='speaking' variant='iridescent' level={replyLevel} showLabel /></>

Examples

Playground

Storybook

Orbs and states

Storybook

API

15 props

Accessibility

role=img named after the assistant and state, with a polite status for changes; the still frame differs per state, and animation stops off screen, when asleep and for reduced motion.

ChatActivityHistoryWhat happened in a conversation, newest last.ChatActivityIndicatorWhat the assistant is doing: idle, thinking, streaming, tool, done or error.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.ChatBubbleThe surface around a message, with seven variants and reactions.4 examples ChatDelegationWork handed to another agent: who took it, the brief, its status and its activity.1 example ChatEffortSliderHow hard the assistant should think, as a stepped slider over named levels.