Chat Composer Input
@astryxdesign/core v0.7.1 · ChatComposerInput
Usage
Pass ChatComposerInput to ChatComposer's input slot when the draft needs trigger menus, inline tokens, history recall, dictation insertion, or file intake.
import { ChatComposerInput } from '@astryx-vue/core/Chat'Anatomy
| Element | Description |
|---|---|
| Input root | The themed container that forwards the root ref and BaseProps styling seams. |
| Editable surface | The labeled contenteditable textbox or combobox that owns text, selection, keyboard, paste, and drop behavior. |
| Placeholder | Visual guidance shown only while the serialized draft is empty. |
| Trigger menu | The suggestion popup rendered while a configured trigger is active. |
| Inline token | A non-editable badge or custom rendering with a stable serialized value. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Use the exposed handle for programmatic text or token insertion; inserted text follows the same change pipeline as typing. |
| Do | Use files for files pasted or dropped onto the editor, and keep file validation and upload progress in the product layer. |
| Don't | Use custom token rendering for ordinary mentions or commands; prefer the structured badge form so tokens remain predictable and themeable. |
Examples
Common configurations, variations, and states.
ChatComposerInput — Controlled
Controlled chat input with live value display. Use controlled mode when you need to read or transform the input value outside the composer.
ChatComposerInput — Disabled
Composer in a disabled state. Use when the input should be visible but not interactive, such as during streaming or when a prerequisite is unmet.
ChatComposerInput — Mentions
Chat input with an @ trigger that opens a typeahead menu for mentioning users. Selected names appear as inline tokens.
ChatComposerInput — Multiple Triggers
Chat input with both @ mentions and / commands. Each trigger type renders tokens in a distinct color so users can tell them apart at a glance.
ChatComposerInput — Slash Commands
Chat input with a / trigger for command selection. Use for AI assistants or bots that support structured commands.