Chat - Message actions

Reveal per-message action buttons on hover or focus for copy, edit, delete, and custom operations.

ChatMessageActions renders an action bar that appears on hover, on keyboard drill-in (Enter on the focused message), or while focus is inside the bar. The actions area occupies the actions grid area of the message row; the reveal uses a short opacity transition.

Playground

Toggle action buttons, variant, and density to preview the hover-revealed toolbar:

Import

import { ChatMessageActions } from '@mui/x-chat';

Visibility behavior

The action bar is hidden by default and becomes visible when:

• The user hovers over the parent ChatMessage row
• The user drills into the focused message with Enter (the message list sets data-actionable="true" on the row — see keyboard navigation)
• Focus is inside the action bar itself (:focus-within)

While hidden, the bar uses visibility: hidden in addition to opacity: 0, so the action buttons are removed from the tab order and from hit-testing — tabbing through the chat never stops on an invisible control. The reveal uses a short opacity transition; when the user prefers reduced motion, the transition is disabled.

/* Selectors used by the built-in styles */
.MuiChatMessage-root:hover .MuiChatMessage-actions,
.MuiChatMessage-root[data-actionable='true'] .MuiChatMessage-actions,
.MuiChatMessage-actions:focus-within {
  opacity: 1;
  visibility: visible;
}

Component anatomy

ChatMessageActions occupies the actions grid area in the message row layout:

ChatMessage (grid)
  ├── ChatMessageAvatar    → grid-area: avatar
  ├── ChatMessageContent   → grid-area: content
  ├── ChatMessageMeta      → grid-area: meta
  └── ChatMessageActions   → grid-area: actions

The built-in styles render the bar as a small elevated chip (paper background, rounded corners, shadow) anchored under the bubble. For the current user's own messages it aligns to the end of the row (justify-self: end), matching the right-aligned bubble. Override either through the .MuiChatMessage-actions class.

Adding custom actions

ChatMessageActions renders a <div> (or custom slot element) that you populate with action buttons. When using ChatBox, provide the messageActions slot to render an action row — ChatBox renders no actions until you do. Your component receives { messageId } and is wrapped in the styled hover-revealed bar:

Accessing message context

The component you pass to the messageActions slot receives a messageId prop. Pass it to the useMessage() hook (exported from @mui/x-chat/headless) to read the current message and show different actions for user and assistant messages. Reach the runtime actions with useChatActions()—it returns sendMessage, retry, regenerate, and the rest without subscribing to message state, so the toolbar does not re-render while a response streams:

Adding actions declaratively

Instead of replacing the messageActions slot component, pass a function to slotProps.messageActions and return extraActions. The function receives the message context, so you can target specific rows—for example, a working "Regenerate" button on assistant replies. Each action's onClick receives (event, { message, chat }); call chat.regenerate(message.id) to request a fresh reply through the runtime:

Owner state

The standalone ChatMessageActions component forwards the message context as owner state to its actions slot, so slot components can style themselves conditionally (when using the ChatBox messageActions slot, read the same data with useMessage(messageId) instead):

Slots

See also

• Message appearance for the overall message layout and visual presentation
• Message list—Accessibility for the keyboard navigation model that reveals the action bar (Enter to drill in, Escape to leave)

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChatMessageActions />