Bot Message Tray React component
One inbox for everything your bots say to you: questions that need an answer, one-tap replies, and updates you can read and move on from.
About the Bot Message Tray component
Bot Message Tray gives your bots one place to ask for help. Questions and updates sit together, and the large number shows how many are waiting on you.
Open a message to answer it with one tap or in your own words. The bot confirms, the count goes down and you're back to the list in a click.
When to use it
Use it in agent dashboards and assistants, anywhere bots need a person's decision to carry on.
Keep it for messages that matter. If every step sends a note, people will stop opening the tray.
Installation
Add the Bot Message Tray component to your project with the shadcn CLI. It lands in components/bot-message-tray.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/bot-message-trayProps
<BotMessageTray /> accepts 4 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Messages from bots" |
| messages | { id: string; bot: string; role: string; time: string; kind: BotMessageKind; text: string; replies?: string[]; ack?: string }[] | DEFAULT_MESSAGES |
| onReply | (message: BotMessage, text: string) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Messages from bots"
- messages{ id: string; bot: string; role: string; time: string; kind: BotMessageKind; text: string; replies?: string[]; ack?: string }[]Default: DEFAULT_MESSAGES
- onReply(message: BotMessage, text: string) => void
Bot Message Tray FAQ
- Does it send anything?
- No. onReply gives you the message and the text, and your backend passes it on.
- Can people write their own reply?
- Yes. Each question has quick replies and a free text box.
- Does the tray change size?
- No. The list and the conversation share one grid cell.
- What's the difference between a question and an update?
- Questions count as waiting on you and offer replies. Updates only need reading.
