A composer with file attachments, Search, Think and Create mode chips that retint the box, and a send button that morphs into a Stop pill while a response is running. Enter sends, Escape stops.
npx shadcn@latest add https://hyperblur.dev/r/prompt-box-modes.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/prompt-box-modes.tsx.
import { PromptBoxModes } from "@/components/hyperblur/prompt-box-modes"
<PromptBoxModes onSubmit={({ text, mode }) => ask(text, mode)} />| Prop | Type | Default | Description |
|---|---|---|---|
| modes | { id: string; label: string; placeholder: string; working: string; color: string; icon?: "search" | "think" | "create" }[] | Search, Think, Create | Mode chips. Each sets the placeholder, the status line and the tint. |
| mode | string | undefined | Controlled mode id. |
| defaultMode | string | first mode | Initial mode when uncontrolled. |
| onModeChange | (mode: string) => void | undefined | Called when a chip is chosen. |
| defaultValue | string | "" | Initial text. |
| defaultAttachments | { id: string; name: string; size: string; kind: "pdf" | "image" | "sheet" | "code" | "doc" }[] | two files | Files already attached. Picked files are added with their real name and size. |
| onSubmit | (payload: { text: string; mode: string; attachments: PromptAttachment[] }) => void | undefined | Called on send, before the box clears. |
| onStop | () => void | undefined | Called when Stop is pressed or Escape is hit while working. |
| workingTime | number | 2600 | How long the working state lasts before the box resets, in milliseconds. |
| maxRows | number | 6 | Rows the textarea grows to before it scrolls. |
| className | string | undefined | Extra classes on the root element. |