Chat - Variants and density

Switch between bubble and compact layouts and control message spacing in the Chat.

Variants

ChatBox supports two visual variants that control how messages are laid out: default and compact.

Default variant

The default variant renders messages as colored bubbles. The default variant right-aligns the current user's messages with a primary-colored background and left-aligns everyone else's (assistants and other participants) with a neutral background. Set currentUser on ChatBox so the chat can identify which messages to treat as your own. Timestamps appear below each message. This is the standard layout used by most AI chat interfaces.

Compact variant

Set variant="compact" on ChatBox to switch to a dense, messenger-style layout:

<ChatBox variant="compact" adapter={adapter} />

Compact mode applies the following changes to the message list:

• No bubbles—messages render as plain text without background colors or padding.
• Left-aligned—all messages are left-aligned regardless of role (no right-aligned user messages).
• Group header timestamps—the timestamp moves from below each message to the group header, displayed next to the author name.
• Avatars preserved when available—the first message in each group still shows its resolved avatar.

The demo below shows the compact variant applied to a ChatBox:

When to use each variant

The compact variant suits conversations with many short messages from multiple participants, where bubbles would create visual noise.

Density

The density prop controls the vertical spacing between messages independently of the variant. Three values are available—compact, standard (default), and comfortable—mirroring the density model used in Data Grid—Density.

<ChatBox density="compact" adapter={adapter} />
<ChatBox density="standard" adapter={adapter} />
<ChatBox density="comfortable" adapter={adapter} />

Use the toggle in the demo below to compare the three density levels:

Density effects

Combining variant and density

The density prop is independent of variant—you can combine variant="compact" with any density value:

{
  /* Dense messenger-style layout with minimal spacing */
}
<ChatBox variant="compact" density="compact" adapter={adapter} />;

{
  /* Dense messenger-style layout with generous spacing */
}
<ChatBox variant="compact" density="comfortable" adapter={adapter} />;

This independence gives you fine-grained control over both the visual style (bubbles vs. plain text) and the spatial rhythm (tight vs. relaxed) of the chat surface.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChatBox />