Message Actions

Copy, feedback (mutually exclusive thumbs), regenerate and share for an assistant message. One tab stop (toolbar).

Import

import { MessageActions } from '@marbleui/ui'

Props

<MessageActions>

Prop	Type	Default	Description
text *required	`string`	`—`
className	`string`	`—`
defaultFeedback	`'up' \| 'down' \| null`	`null`
feedback	`'up' \| 'down' \| null`	`—`	The thumbs rating (controlled).
onFeedback	`(value: 'up' \| 'down' \| null) => void`	`—`
onRegenerate	`() => void`	`—`
onShare	`() => void`	`—`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ToggleButton · React Aria Toolbar. Follow the primitive's docs for the full keyboard map.

Usage notes

Copy, thumbs up/down, regenerate and share for an assistant reply. Pass it to ChatMessage’s actions, under the MarkdownResponse.

<MessageActions
  text={reply}
  onFeedback={(rating) => saveRating(message.id, rating)}
  onRegenerate={() => regenerate(message.id)}
/>

Copy is always shown and copies text as given, so pass the raw Markdown if that’s what people should paste. Regenerate and Share only appear when you pass onRegenerate or onShare.
The thumbs are mutually exclusive; onFeedback gets 'up', 'down', or null when a thumb is cleared. Pass feedback to show a saved rating (controlled) or defaultFeedback for a starting value.
It’s a Toolbar: one Tab stop, arrow keys move between buttons. Every button is labelled, and all but Copy show a tooltip.

Example source · show

import { MessageActions } from './message-actions'

export const styles = {
  Full: () => <MessageActions text="Northwind and Initech are your top churn risks." onRegenerate={() => {}} onShare={() => {}} />,
  Minimal: () => <MessageActions text="Copied text" />,
}

Source: packages/ui/src/message-actions/message-actions.tsx

Catalog

Category: ai-agents
Priority: Pro
Primitive: composed
React Aria: Toolbar
Base UI: Toolbar