chat-message
A single chat turn with role-based alignment, optional avatar support, sender metadata, and message state indicators.
Overview
Represents a single conversation turn. Uses a grid layout to optionally accommodate a <user-avatar> alongside a <chat-bubble>. The data-role attribute controls alignment and bubble color.
Attributes
| Attribute | Values | Description |
|---|---|---|
data-role |
user, agent, system |
Controls alignment and color |
data-from |
string | Participant id (resolved by chat-window) |
data-from-label |
string | Display name rendered via CSS ::before |
data-status |
typing, sending, sent, error |
Message state |
data-model |
string | AI model identifier (informational) |
data-timestamp |
ISO 8601 | Message timestamp |
Layout Rules
| Role | Alignment | Bubble Style |
|---|---|---|
user |
Right | Primary color background |
agent |
Left | Sunken surface background |
system |
Center | Transparent, muted text |
User Message
Right-aligned with primary color. No avatar needed.
Agent Message
Left-aligned with optional <user-avatar>. The data-from-label attribute renders a sender name above the bubble.
System Message
Centered, full-width, with muted styling.
Typing State
Set data-status="typing" and leave the <chat-bubble> empty. CSS renders animated dots. When content arrives, populate the bubble and remove the status attribute.
The animation respects prefers-reduced-motion and degrades to a static indicator.
Model Attribution
Add data-model for AI contexts. This is informational metadata.
Error State
Messages with data-status="error" receive an error border.
Avatar Integration
Place a <user-avatar> as a direct child. The grid layout automatically creates a two-column arrangement. When no avatar is present, the layout collapses to a single column.
CSS Variables
| Variable | Default | Description |
|---|---|---|
--chat-user-bg |
var(--color-primary) |
User bubble background |
--chat-user-color |
var(--color-text-on-primary) |
User bubble text color |
--chat-agent-bg |
var(--color-surface-sunken) |
Agent bubble background |
--chat-agent-color |
var(--color-text) |
Agent bubble text color |
--chat-bubble-radius |
var(--radius-m) |
Bubble border radius |
--chat-meta-size |
var(--font-size-xs) |
Sender name font size |
--chat-meta-color |
var(--color-text-muted) |
Sender name color |
Related
<chat-thread>— Scrollable message container<chat-bubble>— Message content wrapper<user-avatar>— Avatar integration