Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
User message
<chat-message data-role="user"> <chat-bubble><p>Hello, I need help with my order.</p></chat-bubble></chat-message>Agent Message
Left-aligned with optional <user-avatar>. The data-from-label attribute renders a sender name above the bubble.
Agent message with avatar
<chat-message data-role="agent" data-from-label="Sarah Chen"> <user-avatar data-size="sm"> <span data-fallback>SC</span> </user-avatar> <chat-bubble><p>Hi! I can look into that for you.</p></chat-bubble></chat-message>System Message
Centered, full-width, with muted styling.
System message
<chat-message data-role="system"> <chat-bubble>Sarah joined the conversation.</chat-bubble></chat-message>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.
Typing indicator
<chat-message data-role="agent" data-status="typing" data-from-label="Sarah Chen"> <user-avatar data-size="sm"> <span data-fallback>SC</span> </user-avatar> <chat-bubble></chat-bubble></chat-message>The animation respects prefers-reduced-motion and degrades to a static indicator.
Model Attribution
Add data-model for AI contexts. This is informational metadata.
AI model attribution
<chat-message data-role="agent" data-from-label="Assistant" data-model="claude-sonnet-4-6"> <chat-bubble><p>Here's what I found...</p></chat-bubble></chat-message>Error State
Messages with data-status="error" receive an error border.
Error state
<chat-message data-role="user" data-status="error"> <chat-bubble><p>This message failed to send.</p></chat-bubble></chat-message>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