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