A message composer with animated attachment chips, a slash-command menu that opens on "/" and a send button with idle, ready, sending and sent states.
npx shadcn@latest add https://hyperblur.dev/r/agent-composer-attachments.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/agent-composer-attachments.tsx.
import { AgentComposerAttachments } from "@/components/hyperblur/agent-composer-attachments"
<AgentComposerAttachments onSend={async (text, files) => { await submit(text, files); }} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Controlled message text. Pair with onValueChange. | |
| defaultValue | string | "" | Initial text when uncontrolled. |
| onValueChange | (value: string) => void | Called on every edit of the message. | |
| attachments | { id: string; name: string; size?: number }[] | Controlled attachments. Pair with onAttachmentsChange. | |
| defaultAttachments | ComposerAttachment[] | [] | Initial attachments when uncontrolled. |
| onAttachmentsChange | (attachments: ComposerAttachment[]) => void | Called when files are added or a chip is removed. | |
| commands | { name: string; description: string }[] | four sample commands | Slash commands offered when the text ends with a word starting with /. |
| onSend | (text: string, attachments: ComposerAttachment[]) => void | Promise<void> | Called on Enter or on the send button. Return a promise to keep the button in its sending state until it settles. | |
| sending | boolean | Forces the sending state from outside. | |
| placeholder | string | "Message the agent" | Placeholder of the text field. |
| accept | string | Value for the file input accept attribute. | |
| accent | string | "#2f7bff" | Color of the send button, focus ring and command names. |