Options
ChatLayout is configuration-first:conversation and prompt are typed props, not composed children, and both are optional.
Conversation slot
The three slot configurations side by side: the full column,conversation alone (a read-only or archived view, with no composer), and prompt alone (an empty landing state, ready for the first message). Either slot can be omitted independently — the other still renders correctly on its own.
Prompt slot
Theprompt composer is typically a PromptBar, rendered below conversation and pinned to the bottom of the region regardless of how much transcript precedes it.
Behavior
The transcript manages its own scroll position so a growing conversation never fights the reader.Stick to Bottom
The transcript sticks to the bottom on its own as messages arrive. The moment the user scrolls up to read history, it stops auto-scrolling — so incoming content never yanks them back down — and re-engages the lock once they scroll back to the bottom.Scroll to Latest
A floating “scroll to latest” button appears whenever the user has scrolled away from the bottom. Pressing it scrolls smoothly back to the latest content and re-engages the stick-to-bottom lock. Force the same scroll programmatically — e.g. right after the user sends a message — viacontrolRef’s scrollToBottom().
Usage Guidelines
When to Use
Use the Chat Layout when:- Structuring a conversation – Messages need a scrolling transcript with a composer, such as a Prompt Bar, pinned below it.
- Showing a read-only or archived conversation – Provide only the conversation and omit the composer.
- Starting an empty conversation – Provide only the prompt for a landing state ready for the first message.
- Streaming responses – Incoming content needs to stay on the latest message without pulling back a user who scrolled up to read history.
When not to use
Avoid using the Chat Layout for:- Arranging the header, history rail, or artifact panel – Use the App Shell instead, and place the Chat Layout in its chat region.
- Presenting the experience as a floating or fullscreen panel – Use the Window instead.
Keyboard Interaction
Users can scroll the transcript using standard keyboard controls.Patterns that use this component
- Agentic Experience Shell — Defines the conversation region