Prompt Input
NEWA production-ready AI chat composer with an auto-growing textarea, streaming stop control, attachment chips with drag-and-drop and paste, an accessible model picker, prompt history, and keyboard-first send behavior.
Say something to start. Your message streams back a reply.
Press Enter to send, Shift and Enter for a new line. Press Escape to stop a reply.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/prompt-input
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| onSend | (payload: PromptSubmit) => void | Promise<void> | undefined | Called when the user sends. Throw or reject to put the message back in the box |
| streaming | boolean | false | While true the send button becomes a Stop button and Escape stops the reply |
| onStop | () => void | undefined | Callback fired when the user stops a streaming response |
| models | PromptModel[] | DEFAULT_MODELS | Models rendered in the accessible model picker listbox |
| model | string | undefined | Controlled model id |
| defaultModel | string | undefined | Initial model id when uncontrolled (defaults to the first model) |
| onModelChange | (id: string) => void | undefined | Callback fired when the selected model changes |
| placeholder | string | 'Message the assistant…' | Placeholder text for the textarea |
| maxLength | number | 8000 | Maximum character count before the message is flagged as over the limit |
| maxHeight | number | 224 | Tallest the textarea grows in pixels before it starts scrolling |
| allowAttachments | boolean | true | Enables the attach button, drag-and-drop, and paste file handling |
| maxFiles | number | 5 | Maximum number of attachments allowed at once |
| maxFileSizeMB | number | 10 | Maximum size per attachment in megabytes |
| accept | string | undefined | Accepted file types using the same format as an input accept attribute |
| disabled | boolean | false | Disables the composer and all of its controls |
| autoFocus | boolean | false | Focuses the textarea when the component mounts |
| enterToSend | boolean | desktop only | Enter sends and Shift+Enter adds a line. Defaults to true on fine pointers and false on touch devices. Cmd/Ctrl+Enter always sends |
| actions | ReactNode | undefined | Extra buttons rendered next to the model picker |
| hint | ReactNode | false | keyboard hint | Footer line under the box. Pass false to hide it |
| safeArea | boolean | false | Pads the bottom for the iPhone home indicator when pinned to the screen bottom |
| className | string | undefined | Custom Tailwind class names for the outer wrapper |