A chat composer with an auto-growing textarea, attach and mic buttons, a model picker and a send button. Enter sends, Shift+Enter adds a line.
npx shadcn@latest add https://hyperblur.dev/r/prompt-bar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/prompt-bar.tsx.
import { PromptBar } from "@/components/hyperblur/prompt-bar"
<PromptBar models={["relay-2", "relay-2-mini"]} onSend={(text, model) => send(text, model)} />| Prop | Type | Default | Description |
|---|---|---|---|
| models | string[] | ["default"] | Models offered in the picker. |
| defaultModel | string | Initially selected model. Defaults to the first entry. | |
| maxRows | number | 6 | Rows the textarea grows to before it scrolls. |
| placeholder | string | "Send a message" | Placeholder and accessible label of the textarea. |
| disabled | boolean | false | Disable the whole composer. |
| color | string | "#2f7bff" | Focus ring and send button color. |
| attachIcon | ReactNode | Replaces the default attach icon. | |
| micIcon | ReactNode | Replaces the default mic icon. | |
| onAttach | () => void | Called when the attach button is pressed. | |
| onMic | () => void | Called when the mic button is pressed. | |
| onSend | (text: string, model: string) => void | Called with the trimmed text and the selected model. The field clears afterwards. |