MessageListRoot API
API reference docs for the React MessageListRoot component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { MessageListRoot } from '@mui/x-chat/headless';Props of the native component are also available.
| Name | Type | Description |
|---|
The component cannot hold a ref.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| messageList | ScrollRoot (Base UI ScrollArea.Root wrapper); a styled 'div' in `ChatMessageList` | The component that renders the message list. | |
| messageListScroller | ScrollViewport (Base UI ScrollArea.Viewport wrapper), or 'div' when `slots.messageList` is set; a styled 'div' in `ChatMessageList` | The component that renders the message list scroller. | |
| messageListContent | 'div' | The component that renders the message list content. | |
| messageListOverlay | 'div' | The component that renders the message list overlay. | |
| messageListScrollbar | ScrollScrollbar (Base UI ScrollArea.Scrollbar wrapper); not rendered when `slots.messageList` is set, as in `ChatMessageList` | The component that renders the message list scrollbar. | |
| messageListScrollbarThumb | ScrollThumb (Base UI ScrollArea.Thumb wrapper); not rendered when `slots.messageList` is set, as in `ChatMessageList` | The component that renders the message list scrollbar thumb. | |
| messageListStatus | 'div' | The visually-hidden role="status" element announcing streaming transitions ("Assistant is responding" / "Response complete") to screen readers. Pass null-rendering component to silence the announcements. |
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.