Chat composer · UI Kit

Home

size="lg": 656 wide × 103 when empty (8 + 57 two-row editor at 15/21 + 30 for the 28px action row + 8). Surface #fff | #303030 with a constant composer ring (light: outer 1px black 12 %, dark: inset 1px white 8 %); hover never changes it, focus-within only deepens the drop shadow (3.5 → 7.5 %). Send (brand, 28) replaces voice once there is text.

Empty

Light

Dark

With text (send enabled)

Autosize: 4 lines

Max height: scrolls inside after 384

Line 1 of a long prompt that grows the editor
Line 2 of a long prompt that grows the editor
Line 3 of a long prompt that grows the editor
Line 4 of a long prompt that grows the editor
Line 5 of a long prompt that grows the editor
Line 6 of a long prompt that grows the editor
Line 7 of a long prompt that grows the editor
Line 8 of a long prompt that grows the editor
Line 9 of a long prompt that grows the editor
Line 10 of a long prompt that grows the editor
Line 11 of a long prompt that grows the editor
Line 12 of a long prompt that grows the editor
Line 13 of a long prompt that grows the editor
Line 14 of a long prompt that grows the editor
Line 15 of a long prompt that grows the editor
Line 16 of a long prompt that grows the editor
Line 17 of a long prompt that grows the editor
Line 18 of a long prompt that grows the editor
Line 19 of a long prompt that grows the editor
Line 20 of a long prompt that grows the editor
Line 21 of a long prompt that grows the editor
Line 22 of a long prompt that grows the editor

Running (Stop, Esc)

Disabled

Incognito: dashed border, no mode switch

Tray

Attachments sit in a tray at the bottom of the card (AttachmentGroup variant="composer"); a pasted or dropped file emits `files`. Attachments make the composer submittable.

Tray with tiles

Reply

The conversation composer: one 28px row (card 768 × 44) with + at the start and dictate (44 × 28) + send at the end from a 768px viewport, stacked below. The chin under the card (48) holds the disclaimer (13/17 secondary) and the 24px model selector.

Inline + chin

Stacked (below 768px)

Phone dock (390)ChatComposerDock mode="reply" is sticky at the bottom with 24px above.

Conversation content…

Code and pill

code: a 28px control row (card 44), 14/20 text, a ghost return-key send that only exists with text. pill: the settings memory field, radius 24 with a .5px border and a round brand send. Both sit on the popover surface.

Code

Pill

Keyboard and events

Enter submits on fine pointers (a newline on touch), Shift+Enter inserts a newline, Enter during IME composition is ignored, Escape stops a running response. Clicking empty card padding focuses the input.

Event log

Submit, stop or paste a file in a composer above…