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.
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