ChatMessageInlineMeta API
API reference docs for the React ChatMessageInlineMeta component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChatMessageInlineMeta } from '@mui/x-chat/ChatMessage';
// or
import { ChatMessageInlineMeta } from '@mui/x-chat';Learn about the difference by reading this guide on minimizing bundle size.
Wrapper that renders a spacer + the MessageMeta absolutely positioned at the bottom-right of the parent bubble. Uses the Telegram-style "spacer + absolute positioning" trick so the meta appears inline with short text and at the bottom-right for long text.
Must be rendered inside a bubble with position: relative.
| Name | Type | Default | Description |
|---|---|---|---|
| slotProps | object | {} | The props used for each component slot. |
| slots | object | {} | Overridable component slots. See Slots API below for more details. |
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| meta | 'div'; a styled 'span' in `ChatMessageInlineMeta` | The component that renders the meta. | |
| timestamp | 'span' | The component that renders the timestamp. | |
| status | 'span' | The component that renders the status. | |
| edited | 'span' | The component that renders the edited. | |
| streamingProgress | ProgressRoot (Base UI Progress.Root wrapper) | The root element of the streaming progress indicator. Rendered by Base UI Progress.Root when message.status === 'streaming'. Provides role="progressbar" and aria-valuetext for screen readers. | |
| streamingProgressTrack | ProgressTrack (Base UI Progress.Track wrapper) | The track element wrapping the streaming progress indicator. | |
| streamingProgressIndicator | ProgressIndicator (Base UI Progress.Indicator wrapper) | The animated indicator bar inside the streaming progress track. |
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.