Orbeez kit
Conversation

Message

<Message />
One turn in the conversation. The user's message is a dark bubble on the right; an agent's is white, or tinted in its colour.
Can you find why the cart total is off?
??
It skips the last item. The loop stops one short.
I wrote a test that fails on two items.

Install

bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/message.json

Usage

tsx
<Message from="user">
  <MessageBody>
    <MessageContent from="user">Can you find why the cart total is off?</MessageContent>
  </MessageBody>
</Message>

<Message>
  <MessageAvatar hue="ink" mood={thinking ? 'thinking' : undefined} />
  <MessageBody>
    <MessageContent variant="plain" markdown>{answer}</MessageContent>
    <MessageActions>
      <CopyButton text={answer} />
      <FeedbackBeads size={18} />
    </MessageActions>
  </MessageBody>
</Message>

Good to know

  • Moods. MessageAvatar takes a mood: thinking while it reasons, working while it acts.
  • variant="plain" drops the bubble, which reads better for long answers.
  • MessageActions show on hover or focus, and always on touch screens.

System message

<SystemMessage />

A note from the app rather than from anyone in the conversation.

Agents can read and write files in this project.
You have 3 agent runs left today.
bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/system-message.json
tsx
<SystemMessage variant="warning" action={<Button size="sm">Upgrade</Button>}>
  You have 3 agent runs left today.
</SystemMessage>

Feedback bar

<FeedbackBar />

Asks whether an answer helped, with two bead buttons, and confirms the choice.

Was this helpful?Thanks, noted.
bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/feedback-bar.json
tsx
<FeedbackBar onFeedback={(helpful) => log(helpful)} onClose={dismiss} />

// just the beads, for message actions
<FeedbackBeads size={18} onFeedback={rate} />
  • Moods. The picked bead briefly plays love or sad. Both beads are muted until hovered or picked; the one not picked stays muted, so the answer can still be changed.

Branch picker

<BranchPicker />

Steps between the answers a message was given, when it was asked again or edited.

2 / 3
bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/branch-picker.json
tsx
<BranchPicker index={i} count={answers.length} onChange={setI} />
<CopyButton text={answer} />
PreviousFile uploadNextChat container