Composer
The assistant input card. Pin activity chrome, mix layout slots, and compare send/stop states.
Playground
Set each activity state with a button. Mix slots and accents on the same card. Success remounts so the halo replays.
AI can make mistakes. Check important info.
Activity
Accent
Slots
Activity states
Working paints the spectrum ring. Success is a one-shot halo. Disabled dims the card.
Idle
Working
Success
Disabled
Slots
Surfaces the card can attach around the editor: footerStart and footerEnd,
the one-row layout="compact", an attachments strip inside the card,
validationMessage and disclaimer copy, a tucked bottomElement, an attached
topElement (also used for queued actions), a floating topSlot, and an
activeSlot takeover such as the question tool.
disclaimer has no background, so it sits on whatever surface hosts the
composer.
When topElement stacks several strips, such as a usage notice and the message
queue, render one ComposerAttachedWash first and keep the strips transparent.
The wash paints a single surface from the top strip down past the card, so it
doesn't break around the queue.
Footer start
Footer end
Compact
Validation
Attachments
Disclaimer
AI can make mistakes. Check important info.
Top surface
Bottom surface
Top slot
Which brand should this agent use?
The first turn is scoped to this brand.
Queued actions
- Compare visibility for Ramp vs Brex
- Draft a follow-up prompt for citations
Takeover
Pick a brand to continue.
Question tool
Question tool
The ask-user prompt takes over the card through activeSlot. Single choice,
multi choice, free text, and multi-step prompts share the same chrome. With
layout="compact", pass a compact question tool to promptSlot instead, so
it sits above the one-row editor.
Send button
Idle dims send. Typing enables it. Streaming swaps the control for stop.
Composer renders this button for you; it is exported for custom footers.
Idle
Typing
Streaming
Accents
Working chrome can be tinted with the same appearance tokens as an agent.
Blue
Red
Orange
Green
Purple
Gray
Usage
Composer is presentational. Product chats derive activityState from
streaming and submit flags, then pass the result in.
Composer Properties
Visual chrome on the card. Working paints the spectrum ring. Success is a one-shot halo. Disabled dims the card and also disables send and design-system Buttons in the footer slots.
Default: idle
CSS color for the working spectrum and success pulse. Defaults to fill-blue.
Increments so the success halo remounts and replays.
Default: 0
Send/stop visual role. Derived from activity and sendDisabled when omitted.
Blocks submitting a new message. Stopping an in-flight response stays available.
Default: false
Called when the user submits from the send button.
Called when the user clicks stop during streaming.
Tooltip and aria label for send.
Default: Send message
Tooltip and aria label for stop.
Default: Stop generation
Visible send text, shown in place of the arrow while not streaming.
Leading icon beside sendText. Takes an icon name or descriptor.
Shows a spinner on send while a submission is pending.
Default: false
Compact puts the footer slots, editor, and send on one row and hides attachments.
Default: default
Called once per compact session when the editor grows past one line. Switch layout back to default here.
Slot on the leading edge of the composer footer.
Slot on the trailing edge of the footer, before send/stop.
Helper text rendered below the visible composer card.
Floating slot rendered above the card.
Interactive clarification rendered above the editor card, such as a compact question tool.
Identity used to remount the prompt content when it changes.
Surface rendered immediately above and behind the composer card. Product queues sit here, not as an activity state.
Surface tucked under the floating card. Paints its own background and rounding.
Replaces the editor and footer when a product flow takes over the card.
Keeps the outgoing activeSlot content mounted out of flow while the editor returns.
Keeps an interactive slot's footer in place while the card height animates.
Leading control in the interactive slot's footer rail.
Attachment strip above the editor. Stays interactive when the card is disabled.
Validation copy rendered beneath the card.
Viewport control above every composer surface. Left unset, the frame reserves its height. Pass null when the surface owns spacing.
Editor surface supplied by the consumer.
Extra classes on the outer frame.
Attributes spread onto the visible card.
Ref to the outer frame.
Ref to the visible card.
Marks the whole frame as non-interactive.
ComposerSendButton Properties
Idle is dimmed, typing is enabled, streaming shows stop.
Disables send. Ignored while streaming.
Send or stop action.
Accessible name. Defaults to Send or Stop from state.
Visible send text. Turns the circle into a labeled pill. Stop stays circular.
Leading icon beside text. Ignored without text or while streaming.
Shows a spinner and disables send. Ignored while streaming.
Default: false
Extra classes on the button.