ChatVoice

Voice building blocks: ChatSpeechInput dictates into the composer, ChatMicSelector picks the input device, ChatVoiceSelector picks the voice that answers and ChatAudioPlayer plays voice messages and spoken replies.

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

Usage

import { ChatAudioPlayer, ChatMicSelector, ChatSpeechInput, ChatVoiceSelector } from '@gaudi/design-system/chat';
<><ChatMicSelector value={deviceId} onValueChange={setDeviceId} /><ChatSpeechInput deviceId={deviceId} onInterim={setPreview} onTranscript={append} onAudio={transcribe} /><ChatVoiceSelector voices={voices} groupBy='provider' value={voice} onValueChange={setVoice} onPreview={speakSample} /><ChatAudioPlayer src={reply.audioUrl} title='Reply' peaks={reply.peaks} download='reply.mp3' /></>

Examples

Voice mode

Storybook

Cancel capture and pending transcription

Storybook

API

26 props

Accessibility

ChatSpeechInput is a pressed-state button stopped by Escape that announces listening and transcribing politely and explains when it is disabled; ChatMicSelector names its select and explains a blocked permission; ChatVoiceSelector is a fieldset of native radios with named sample buttons; the ChatAudioPlayer scrubber is a slider that reads time.

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