Chat Layout @astryx-svelte/core v0.3.0 · Chat
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
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.