Chat - Message Actions

Add hover-triggered action buttons to messages for copy, edit, delete, and custom operations.

ChatMessageActions renders an action bar that appears when the user hovers over a message or focuses within it. The actions area is positioned in the message grid and transitions from hidden to visible using an opacity animation.

Import

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

Visibility behavior

The action bar is hidden by default (opacity: 0) and becomes visible when:

• The user hovers over the parent ChatMessage row
• Focus moves to an element inside the ChatMessage row (keyboard navigation)

The transition uses a short opacity animation. When the user prefers reduced motion, the transition is disabled.

/* Visibility is controlled by the parent message's hover/focus state */
.MuiChatMessage-root:hover .MuiChatMessage-actions,
.MuiChatMessage-root:focus-within .MuiChatMessage-actions {
  opacity: 1;
}

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

Adding custom actions

The MessageActions primitive renders a <div> (or custom slot element) that you populate with your own action buttons. Override the actions slot through ChatBox:

Accessing message context

Inside a custom actions component, use the ownerState prop to access the current message data and show different actions for user and assistant messages:

Owner state

The MessageActions component receives the message context as owner state, which slot components can use for conditional styling:

Slots

See also

• Message Appearance for the overall message layout and visual presentation

API

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

• <ChatMessageActions />