Chat Composer
@astryxdesign/core v0.7.1 · ChatComposer
Usage
ChatComposer is the message-entry shell for a chat surface. It coordinates a controlled or uncontrolled draft, provides a default token-capable input and send/stop action, and arranges optional drawer, header, footer, and status content. Custom inputs and send controls can join the same value, submission, disabled, stop, and focus contract through useChatComposerContext().
import { ChatComposer } from '@astryx-vue/core/Chat'Anatomy
| Element | Description |
|---|---|
| Composer frame | Outer composition root that groups the body with an optional status message above or below it. |
| Composer body | Rounded, elevated surface containing the header, input, and footer. |
| Drawer | Content before the body for attachments or other expandable context, typically ChatComposerDrawer. |
| Header | Row for start-aligned actions and end-aligned contextual information. |
| Input | Default ChatComposerInput or a custom editor connected through useChatComposerContext(). |
| Footer | Row for caller-supplied footer and send actions plus the primary action. |
| Send or stop action | Default ChatSendButton or a custom sendButton; it submits the current draft or requests interruption. |
| Status message | Error or warning feedback rendered before or after the composer body. |
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 — Flat
The composer is raised by default (elevation="low"). Set elevation="none" to flatten it; it then draws a border with the same rest / hover / focus treatment as a text input.
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.