Components · AI
Message Bubble
One message in a conversation. User messages sit in a bubble at the end; assistant replies run full width. MessageActions adds copy, feedback and regenerate.
import { MessageBubble } from '@nexub/react';Usage
Each turn in a chat or assistant thread, inside Conversation.
MessageActions under assistant replies the user may want to copy, rate or retry.
Comment threads and activity logs: use ActivityFeed or NotificationItem.
Model output as HTML: render text or React elements as children, never `dangerouslySetInnerHTML`.
Examples
Conversation
Hover or focus the assistant reply to show its actions.
Failed to send
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fromrequired | 'user' | 'assistant' | 'system' | — | Who sent it. Sets layout and the default accessible name. |
| avatar | ReactNode | — | Assistant only: shown at the inline start. |
| name | string | — | Accessible name of the message. Defaults to "You said" or "Assistant said". |
| status | 'sending' | 'error' | — | sending sets aria-busy; error shows "Failed to send". |
| onRetry | () => void | — | With status="error", adds a Retry button. |
| messages | Partial<MessageStrings> | — | Local string overrides. |
| MessageActions text | string | — | Text Copy puts on the clipboard. |
| MessageActions copy | boolean | true | Set false to hide Copy. |
| MessageActions feedback / defaultFeedback / onFeedback | 'up' | 'down' | null | — | Thumbs up/down appear when onFeedback is set. Pressing the active one clears it. |
| MessageActions onRegenerate | () => void | — | Shows Regenerate when set. |
Accessibility
ARIA roles
Keyboard
- Tab
Moves through the action buttons; focusing one reveals the row.
- Space / Enter
Activates an action. Feedback buttons toggle.
Screen reader
Each message is an `article` named "You said" or "Assistant said", so users can jump between messages.
Feedback buttons expose `aria-pressed`. Copy announces "Copied" through a status region.
The action row is only visually hidden until hover; it stays in the tab order and accessibility tree.
On iOS & Android
Web only