Message Bubble
.mdUser and assistant chat bubbles that spring in, group consecutive messages and reveal copy, retry and feedback actions on hover or focus.
aichatmessagebubblethreadfeedback
Installation
$npx shadcn@latest add @geturui/message-bubble
Also installs: Copy Button
Usage
usage.tsx
1import { MessageThread } from "@/components/ai/message-bubble";
2
3export function Thread() {
4 return (
5 <MessageThread
6 messages={[
7 { id: "1", role: "user", content: "Can I change the accent colour?", timestamp: "9:41 AM" },
8 { id: "2", role: "assistant", content: "Yes — update the --volt token.", timestamp: "9:41 AM" },
9 ]}
10 onRetry={(id) => regenerate(id)}
11 onFeedbackChange={(id, value) => track(id, value)}
12 />
13 );
14}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
role* | "user" | "assistant" | — | Sender; sets alignment, colours and the default avatar. |
children* | ReactNode | — | Message content. |
position | "single" | "first" | "middle" | "last" | "single" | Place within a run of messages from the same sender; MessageThread sets this for you. |
name | string | — | Sender name for initials and screen readers. |
avatar | ReactNode | — | Custom avatar. |
timestamp | string | — | Shown under the last bubble of a group. |
copyText | string | — | Text the copy action copies; defaults to string children. |
onRetry | () => void | — | Shows a retry action. |
feedback / onFeedbackChange | "up" | "down" | null | — | Controlled thumbs feedback (assistant only). |
hideActions | boolean | — | Hide the actions row. |
Accessibility
- MessageThread is a polite live log, so new messages are announced.
- Each bubble starts with a visually hidden “Name said:” prefix.
- Actions appear on hover and on keyboard focus (focus-within), and stay visible on touch devices.
- Thumbs buttons use aria-pressed.