Chat Message List
A scroll container with smart stick-to-bottom and an empty-state slot; the IntersectionObserver root for lazy content images.
A scrollable message container with smart stick-to-bottom. As content grows it auto-scrolls to the newest message — but only while the user is already near the bottom, so scrolling up to re-read is never interrupted. It marks itself with data-scroll-container="true" so lazy content images (from @yuhuanowo/yunui/content) use it as their IntersectionObserver root. Place it as the flexible middle of a flex flex-col shell, between a header and a composer.
Import
1import { ChatMessageList } from "@yuhuanowo/yunui/chat";Example
Scroll up and the list stays put; it only re-sticks to the bottom when you're already there.
ChatMessageList
Empty state
Pass an empty node to show a centered placeholder when there are no messages.
ChatMessageList empty
No messages yet — say hello.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| autoScroll | boolean | true | Auto-stick to the bottom as content grows — but only while the user is already near the bottom, so scrolling up to read isn't interrupted. |
| children | ReactNode | — | The message rows (e.g. <ChatMessage/> elements). |
| className | string | — | |
| empty | ReactNode | — | Shown centered when there are no messages. |
| stickThreshold | number | 120 | Distance (px) from the bottom still considered "at the bottom". |