AI Message Bubble
Chat bubbles — a user message and the assistant's reply, each in its own bubble to keep the exchange readable.
Loading demo: ai-message-bubble-real-world
Installation
npx sdaia-ui@latest add ai-message-bubble
Usage
import { AiMessageBubble } from "sdaia-ui"1<AiMessageBubble state="user">2Can you summarize Saudi Vision 2030 for me?3</AiMessageBubble>4<AiMessageBubble state="ai" variant="brand">6Saudi Vision 2030 is a strategic framework to diversify the economy…7</AiMessageBubble>8<AiMessageBubble state="streaming">{partialReply}</AiMessageBubble>10<AiMessageBubble state="error" onRetry={regenerate} />
Examples
Conversation
A user turn and the assistant reply, alternating to build a scannable transcript.
Loading demo: ai-message-bubble-default
User
The user message — a right-aligned brand bubble with no avatar.
Loading demo: ai-message-bubble-user
AI
The assistant reply — a left-aligned bubble with the sparkle avatar.
Loading demo: ai-message-bubble-ai
Streaming
A reply arriving live, with a pulsing caret at the end of the text.
Loading demo: ai-message-bubble-streaming
Error
A failed message — a danger-tinted bubble with a Retry action.
Loading demo: ai-message-bubble-error
Brand
Brand style — a high-emphasis, brand-coloured assistant bubble.
Loading demo: ai-message-bubble-brand
Outline
Outline style — a bordered, transparent assistant bubble.
Loading demo: ai-message-bubble-outline
RTL
Right-to-left layout — the bubble flips side and the tail corner follows the sender.
Loading demo: ai-message-bubble-rtl
API Reference
Prop | Type | Default | Required |
|---|---|---|---|
state | 'user' | 'ai' | 'streaming' | 'error' | 'ai' | optional |
variant | 'neutral' | 'brand' | 'outline' | 'neutral' | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
children | ReactNode | — | optional |
maxWidth | number | string | 520 | optional |
avatar | ReactNode | — | optional |
avatarIcon | string | sparklesStroke | optional |
showAvatar | boolean | true | optional |
retryLabel | ReactNode | 'Retry' | optional |
onRetry | (e) => void | — | optional |
showRetry | boolean | true | optional |
retryIcon | string | refreshStroke | optional |