AI Input II
A rounded, motion-driven AI chat input — springy attachment menu with inline image previews, toggle pills that expand their label when active, a model selector, and a send button ringed by a character-usage orbit.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/orbit-composer.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/orbit-composer.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| models | string[] | ["orbit-2-pro", "orbit-2-flash", "orbit-2-lite"] | Model ids shown in the selector dropdown. |
| defaultModel | string | models[0] | Initially selected model. |
| placeholder | string | "Ask anything…" | Placeholder text for the prompt textarea. |
| maxLength | number | 2000 | Character limit — usage is drawn as the ring around the send button. |
| disabled | boolean | false | Disables all input while a response is streaming. |
| onSubmit | (message: OrbitMessage) => void | — | Called on send with { text, model, attachments, webSearch, deepThink }. |
| className | string | — | Additional CSS classes. |