ChatMessageSource API

API reference docs for the React ChatMessageSource component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

import { ChatMessageSource } from '@mui/x-chat/ChatMessageSources';
// or
import { ChatMessageSource } from '@mui/x-chat';

Name	Type	Description
href*	string	The URL this source links to.
classes	Partial	See CSS classes API below for more details.
index	number	1-based position number displayed as a muted badge.
slotProps	ChatMessageSourceSlotProps
slots	ChatMessageSourceSlots	See Slots API below for more details.
title	string	Display title for the source. Falls back to `href` when omitted.

The component cannot hold a ref.

Slot name	Class name	Default component	Description
index	.MuiChatMessageSource-index	`'span'`	The numeric index badge.
link	.MuiChatMessageSource-link	`'a'`	The anchor link.
root	.MuiChatMessageSource-root	`'li'`	The root list item element.

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiChatMessageSource-index	index	Styles applied to the index badge element.
.MuiChatMessageSource-link	link	Styles applied to the link element.
.MuiChatMessageSource-root	root	Styles applied to the root element.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.