Chat Layout
@astryxdesign/core v0.7.1 · ChatLayout
Usage
ChatLayout is the layout shell for full-page chat interfaces. It renders messages in normal page flow and docks the composer to the bottom with a frosted glass blur layer. Set the density prop to control spacing; it defaults to balanced. Use it to wrap ChatMessageList and ChatComposer for a complete chat experience with built-in auto-scroll and a scroll-to-bottom button.
import { ChatLayout } from '@astryx-vue/core/Chat'Anatomy
| Element | Description |
|---|---|
| Message area | Scrollable region for messages. Renders children (typically ChatMessageList) in a flex column that pushes content to the bottom when the list is short. |
| Frosted glass dock | Sticky or fixed container at the bottom with a backdrop-blur layer. Houses the scroll button and composer. |
| Scroll-to-bottom button | Appears when the user scrolls up or new messages arrive. Defaults to ChatLayoutScrollButton; pass null to hide or a custom element to override. |
| Composer | The input area for sending messages, typically ChatComposer. Docked at the bottom inside the frosted glass layer. |
| Empty state | Centered placeholder shown when no messages exist. Use EmptyState for a consistent look. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Pass ChatMessageList as children and ChatComposer as the composer slot for a complete chat interface. |
| Do | Provide an empty slot so new conversations show a prompt instead of a blank screen. |
| Do | Use scrollRef when the chat is embedded in a page where a parent element handles scrolling. |
| Don't | Apply a fixed height on the layout; let it fill its container with flex: 1. |
| Don't | Render multiple ChatLayout instances in the same scroll container; each expects to own its scroll context. |
Examples
Common configurations, variations, and states.
ChatLayout — Panel View
I'll check the Button component now.
Found the issue — the border radius was hardcoded. Replaced with the theme token.
Checking the component now.
Found the issue — the border radius was hardcoded. Replaced with the theme token.
Narrow sidebar chat in a constrained container that triggers compact density. Use for side panels, drawers, or embedded chat widgets where horizontal space is limited.