Astryx Design System

Chat Layout@astryxdesign/core v0.0.15 · 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. Density adapts automatically via container width observation. Use it to wrap ChatMessageList and ChatComposer for a complete chat experience with built-in auto-scroll and a scroll-to-bottom button.

ts
import {ChatLayout} from '@astryxdesign/core/Chat'

Best practices

Guidance	Practices
Do	Pass ChatMessageList as children and ChatComposer as the composer prop for a complete chat interface.
Do	Provide an emptyState 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	Don't apply a fixed height on the layout; let it fill its container with flex: 1.
Don't	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

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.