Usage
variant selects. It composes MessageList (which holds ChatScroll, Message and SystemMessage). It extends those existing components rather than adding a second set: everything it does, they do, and the block only picks their options together.
| Variant | Messages | Time | Composer |
|---|---|---|---|
Default | The reader's own in bubbles, the others plain | After the name | Floats over the block end of the transcript on a fade |
Annotation | Plain for both sides | Under the name | Docked under the transcript, with a rule between |
messageVariant and showAuthor override the variant's choice for a host the form factor does not fit. With showAuthor={false} each name stays for assistive technology and each time drops to a caption under its message; pair it with messageVariant={MessageVariant.Bubble} so the bubble marks the turn.
items are MessageList's: { kind, id, props }. A message carries Message's own props, so a turn is told by its AI SDK role and an identity, and takes its parts through slots:
reasoning, parts and attachments are slots on the message; the body is children, which is where TokenizedText or a response part goes.
composer is a slot that takes a ChatInput. The block imports no input and sets no prop on it, so the caller passes the input's layout, and the form factor decides which:
| Variant | ChatInput layout | Why |
|---|---|---|
Default | ChatInputLayout.Reflow | The surface floats over the transcript, and its controls wrap around the text as it grows |
Annotation | ChatInputLayout.Stacked | The surface sits flush under the rule, with the controls in a row under the text, in a narrow popover |
composer for a read-only or archived transcript. It sits outside the log, so typing and sending are not announced as transcript. The panel keeps the latest message clear of a floating composer as the input grows with its lines.
With no items the empty state shows inside the log (emptyTitle, emptyDescription, emptyIcon), and the floating composer still floats over its end.
unreadCount, jumpUnreadLabel, onReachStart and onAtEndChange are ChatScroll's, passed through. Loading earlier messages uses MessageList's loading and errorRow, which the block does not expose; use MessageList directly for a transcript that pages history.
Chat becomes ChatPanel, a ChatInput in composer and MessageList items, with one density and required copy props. The prop-by-prop mapping, the ChatMessage and PromptInput tables, the Ally avatar and the out-of-scope dictation are in Migrating from ui-ai-elements.