ChatMessageGroup API
API reference docs for the React ChatMessageGroup component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChatMessageGroup } from '@mui/x-chat/ChatMessage';
// or
import { ChatMessageGroup } from '@mui/x-chat';Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| messageId* | string | - | The id of the message this row belongs to. |
| children | node | - | The content of the component. |
| groupKey | func | (message) => message.author?.id ?? message.role ?? '' | A function that maps a message to a group key. Messages that resolve to the same key are visually grouped (shared avatar, author name, etc.). Use |
| index | number | - | The index of the row in |
| items | Array<string> | - | The ids of the messages in the list, in order. |
| slotProps | object | {} | The props used for each component slot. |
| slots | object | {} | Overridable component slots. See Slots API below for more details. |
| sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| messageGroup | The per-author group wrapper around consecutive messages. | ||
| messageRoot | Styled root of <ChatMessage> (wrapper-only); the default avatar/content/meta tree still renders inside it. | ||
| messageAvatar | Avatar component. Pass null to hide the avatar entirely and drop the reserved avatar grid track. | ||
| messageContent | The message bubble component. | ||
| messageMeta | External meta (compact variant). Pass null to hide. | ||
| messageInlineMeta | Inline meta rendered inside the bubble (default variant). Pass null to hide. | ||
| messageError | Error card shown under the bubble when the message status is error. Pass null to hide the error surface entirely (no component is mounted). | ||
| messageActions | Actions row component (receives { messageId }). Pass null to hide actions entirely; omit to render only the declarative extraActions from slotProps.messageActions if provided. | ||
| messageAuthorName | Author name label rendered by the group wrapper (default variant: above the bubble; compact variant: inside the message grid). Pass null to hide. | ||
| streamingIndicator | The animated dots shown while an assistant response is in flight: as a trailing row while waiting for the response to start, then inside the assistant bubble while it streams. Controlled by features.streamingIndicator ('auto' by default). Pass null to hide it. |
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.