Components / AI chat
Chat composer
The message field with tools, attachments, send and stop.
@fabrials/ai-ui
Nothing is sent. Press Enter to try it.
Installation
Import the control from
@fabrials/ai-ui, after setting the app up.TypeScript import { ChatComposer, ComposerToggle, ComposerButton } from "@fabrials/ai-ui";import "@fabrials/ai-ui/styles.css";
API reference
| Prop / export | Type | Description |
|---|---|---|
value | string | Controlled with onValueChange. defaultValue works uncontrolled. |
onSubmit | (value) => void | Enter sends; Shift+Enter adds a line. |
status | ChatComposerStatus | ready, submitting or streaming. Streaming turns send into stop, which calls onStop. |
tools | ReactNode | ComposerButton and ComposerToggle on the left. trailing holds voice input. |
attachments | ReactNode | Attachments shown above the field. |
onPasteFiles | (files) => void | Receives pasted files. Backspace in an empty field calls the remove-last handler. |
Behavior
Presentational. The host sends the message, uploads pasted files and owns the tool state.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.