Chat Composer

Chat Composer@astryxdesign/core v0.1.1 · ChatComposer

Usage

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

Open in Playground

Chat composer with removable file tokens in a collapsible drawer. Use when users can attach files or context to their message.

ChatComposer — Footer Actions

Open in Playground

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

Open in Playground

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

Open in Playground

Minimal chat composer with a placeholder and submit handler. The simplest way to drop a message input into a page.

ChatComposer — Streaming

Open in Playground

Chat composer with streaming state and a stop button. Use when the assistant is generating a response and the user can cancel.

ChatComposer — Validation

Open in Playground

Chat composer with error and warning status messages. Status can appear above or below the composer to surface validation or system feedback.