Prompt inputPro
Chat composer that grows, takes files by picker, paste or drop, and turns into Stop while generating.
Enter to send · Shift+Enter for a new line · drop or paste files
When to use
- Chat and AI composers with attachments and a stop button.
When not to use
- Plain comments: use a textarea.
Installation
Usage
Import it from @/components/ui/prompt-input after installing.
example.tsx
import { PromptInput } from "@/components/ui/prompt-input";
export function Composer({ send, generating, stop }: { send: (t: string, f: File[]) => void; generating: boolean; stop: () => void }) {
return <PromptInput onSubmit={send} generating={generating} onStop={stop} />;
}API reference
PromptInput
Grows with text, takes files by picker, paste or drop, Enter to send.
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit | (text, files) => void | – | Called on send. |
| generating / onStop | boolean / () => void | – | Turns send into stop. |
| toolbar | ReactNode | – | Model picker or other controls. |
| placeholder / maxLength | string / number | "Ask anything…" / 8000 | Text limits. |
Keyboard interactions
| Keys | Action |
|---|---|
| Enter | Send |
| Shift+Enter | New line |
| ⌘VorCtrl+V | Paste files |
Accessibility
- All buttons labelled; attachments have labelled remove buttons.
- Enter is ignored while composing with an IME.
Motion
- Attachments pop in; send morphs into stop.
Responsive behavior
- Full width; toolbar wraps.
Performance
- Auto-resize on input only.
Notes for AI
- Clear your own state after onSubmit; the input clears itself.
This page as Markdown, for assistants and coding agents:
/components/prompt-input/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt