Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Chat - Compact variant

Switch the Chat to a messenger-style layout with left-aligned messages, no bubbles, and author names as group headers.

Set variant="compact" on <ChatBox /> to switch the Chat to a compact layout. When features={{ conversationList: true }} is enabled, both the conversation list and the message list adapt automatically.

Component questions

Which component handles the composer?

Alice Chen
Alice Chen

Which component should I use for the message input area?

MUI Assistant
MUI Assistant

The composer is handled by the ChatBox automatically. You can override it with slots.composer.

Alice Chen
Alice Chen

And what about slotProps for passing sx to the input?

Compact mode behavior

Default Compact
Colored message bubbles Plain text, no background
User messages right-aligned All messages left-aligned
Timestamp below each message Timestamp in the group header, next to author
Conversation list shows avatar and preview Conversation list shows compact title and actions