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-thread
Scrollable message container for chat conversations. Grows to fill available height with smooth scrolling and automatic scroll anchoring.
Overview
A flex-column container that holds <chat-message> elements. Handles vertical overflow with smooth scrolling and keeps the view pinned to the latest message via overflow-anchor.
Attributes
| Attribute | Values | Description |
|---|---|---|
role |
log |
Required ARIA role — signals live region semantics |
aria-label |
string | Describes the conversation context |
aria-live |
polite |
Announces new messages to screen readers |
Usage
Place <chat-message> elements inside. The thread scrolls vertically when content overflows.
Basic chat thread
<chat-thread role="log" aria-label="Support conversation" aria-live="polite"> <chat-message data-role="agent" data-from-label="Bot"> <chat-bubble><p>Welcome! How can I help?</p></chat-bubble> </chat-message> <chat-message data-role="user"> <chat-bubble><p>I have a question.</p></chat-bubble> </chat-message></chat-thread>CSS Variables
| Variable | Default | Description |
|---|---|---|
--chat-thread-gap |
var(--size-m) |
Gap between messages |
--chat-thread-padding |
var(--size-m) |
Internal padding |
Related
<chat-message>— Individual message turns<chat-bubble>— Message content wrapper