Chat
Full-height layout shell for a chat surface: a pinned header, a scrollable conversation body, and a pinned composer. Pure structure — no state, no context — with the min-h-0 flex discipline that hands scrolling to the body so the page never scrolls.
The shell composes a ChatMessageList body with an optional header and PromptInput composer. Send a message to watch the body scroll while the composer stays pinned. For the complete streaming stack, open the live playground.
01 Examples
Full conversation surface
Chat beside an artifact panel
02 Anatomy
Chat is deliberately thin: three stacked regions and nothing else.
header— an optional pinned bar (border-b). Put a title, model picker, or connection badge here. Never scrolls.children— the scrollable body. Drop a ChatMessageList here; it is the one element that scrolls, not the shell.composer— an optional pinned footer (border-t) — e.g. a PromptInput. Never scrolls.
The shell is a full-height flex column with min-h-0 on
the body, so the body can shrink below its content and delegate overflow to its scrollable
child. Because of that, Chat fills its parent's height — give the parent a concrete
height (or put it inside another flex/grid track that does). Chat holds no state and opens no context;
the conversation array lives entirely in the consumer.
03 Accessibility
Structure, not a landmark
Chat renders plain <div> regions — it does
not impose role="banner", <main> or <form> semantics, because those belong to the
page around it and the children within it. Rest attributes land on the root, so if the
conversation is a standalone view, name it — pass aria-label or wrap it in a labelled <section>.
Meaning comes from children
The accessible semantics are supplied by what you place inside: ChatMessageList exposes the scrollable role="log" region plus a screen-reader status
channel, and PromptInput ships the labelled textarea
and send/stop buttons. Chat only guarantees they stack in the right order.
Scroll ownership
Because only the body scrolls, keyboard scrolling (Page Up / Page Down) lands on the focusable list region, never on the page — while the header and composer stay reachable and in view.
04 API Reference
No matching properties |