Layout shell for a chat composer. Arranges named slots (drawer, header, input, footer, send) with page-radius container, hover/focus shadows, and concentric inner radius for child elements.
ts
import{ChatComposer}from'@astryxdesign/core/Chat'
Examples
Common configurations, variations, and states.
ChatComposer — Attachments
Chat composer with removable file tokens in a collapsible drawer. Use when users can attach files or context to their message.
ChatComposer — Footer Actions
Chat composer with dropdown menus for a model selector and settings in the footer, and a mic button in the send actions slot.
ChatComposer — Full Featured
Chat composer with all slots populated: collapsible attachment drawer, header actions, context progress bar, footer dropdown menus, and mic button. Shows the maximum composer configuration.
ChatComposer — Simple
Minimal chat composer with a placeholder and submit handler. The simplest way to drop a message input into a page.
ChatComposer — Streaming
Chat composer with streaming state and a stop button. Use when the assistant is generating a response and the user can cancel.
ChatComposer — Validation
Chat composer with error and warning status messages. Status can appear above or below the composer to surface validation or system feedback.