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.
| Name | Type | Default | Description |
|---|---|---|---|
| messageId* | string | - | |
| classes | Partial | - | See CSS classes API below for more details. |
| 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 Signature: function(message: ChatMessage) => string | number |
| index | number | - | |
| items | Array<string> | - | |
| slotProps | MessageGroupSlotProps | - | |
| slots | Partial | - | See Slots API below for more details. |
The component cannot hold a ref.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| authorName | |||
| group | |||
| groupTimestamp | 'span' | The timestamp element rendered next to the author name in compact mode. Only rendered when `variant === 'compact'` and the message has a `createdAt` value. |
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.