MessageBubble
Role-aware chat message with avatar, name, and timestamp. Drop into any message list mapped from the AI SDK's UIMessage[] — no adapter needed.
Source
src/components/ai/message-bubble.tsxDefault
User and assistant bubbles with automatic alignment and role-tinted avatars.
10:00
Can you summarise this PDF in three bullets?
GPT-4o10:00
Sure — here are the three key points from the report.
System and tool roles
System messages render as centred pills; tool messages render as compact mono rows.
Conversation started10:00
search_web()Fetched 8 results for "agentic UI patterns"10:00
Outline variant
Transparent bubbles with a border — reads better over busy backgrounds.
What's the latency budget for streaming?
Claude
Aim for first-token under 500 ms on a warm path.
Minimal variant
Zero-chrome text flow for dense transcripts or nested contexts.
Haiku
Minimal variant drops the bubble so text reads like prose.