AI Input I
An editorial AI chat input — attachment dropdown for images and documents, web-search and deep-think toggles, a model selector, and a live character counter.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/prompt-composer.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/prompt-composer.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| models | string[] | ["mellow-4-opus", "mellow-4-sonnet", "mellow-4-mini"] | Model ids shown in the selector dropdown. |
| defaultModel | string | models[0] | Initially selected model. |
| placeholder | string | "Set your question in type…" | Placeholder text for the prompt textarea. |
| maxLength | number | 4000 | Character limit, reflected in the live counter. |
| disabled | boolean | false | Disables all input while a response is streaming. |
| enableSound | boolean | true | Play a synthesized typewriter carriage-return (thock + faint bell) on submit. |
| onSubmit | (message: PromptMessage) => void | — | Called on send with { text, model, attachments, webSearch, deepThink }. |
| className | string | — | Additional CSS classes. |