Components · AI
The composer for a chat: an auto-growing text field with Send, which turns into Stop while a reply streams.
import { Prompt Input } from '@nexub/react';When to use
Reach for this component when…
When not to use
Pick a different component if…
Enter sends, Shift+Enter adds a line. Send stays inert until there is text.
Send a message: the button turns into Stop for three seconds. Stop or Escape ends it early.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| value / defaultValue / onValueChange | string | — | — | Controlled or uncontrolled text. Uncontrolled input clears itself after a submit. |
| onSubmit | (value: string) => void | — | — | Called with the text on Enter or Send. Not called while empty, disabled or not `idle`. |
| onStop | () => void | — | — | Called by Stop, or Escape in the field, while `status="streaming"`. |
| status | 'idle' | 'submitting' | 'streaming' | 'idle' | — | `streaming` swaps Send for Stop; `submitting` holds Send until the request is accepted. |
| maxRows | number | 8 | — | Rows the field grows to before it scrolls. |
| attachments | ReactNode | — | — | Rendered above the text, e.g. removable Chips. |
| actions | ReactNode | — | — | Rendered bottom-start, e.g. an attach IconButton or a model picker. |
| surface | 'solid' | 'glass' | 'solid' | — | Glass material for composers floating over content. |
| label | string | messages.promptLabel ('Message') | — | Accessible name of the text field. |
| messages | Partial<PromptInputMessages> | — | — | Local overrides for `promptLabel`, `sendMessage`, `stopGenerating`, `promptHint`. |
| textareaClassName | string | — | — | Class for the textarea; `className` goes to the outer container. |