React Message Actions Bar
The small toolbar under an assistant turn, and the one place a product quietly collects the data that improves the model. The design decision that matters: thumbs-down asks why.
The turbo pump on EQ-07 shows rising current over the last three wafers, consistent with early bearing wear. I’d schedule a PM before the next campaign rather than risk an unplanned excursion mid-lot.
Feedback: none. Thumbs-down asks why rather than discarding the signal.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| copyText | string | Text placed on the clipboard |
| feedback | Feedback | Controlled state: up, down, or null |
| onFeedback | (value, reason?) => void | Fires on thumbs, with a reason on down |
| onRegenerate | () => void | Show + wire the regenerate button |
| onBranch | () => void | Show + wire the branch button |
A rating with no reason is noise
A bare thumbs-down tells whoever tunes the model that something was wrong, which is almost useless. So down opens a one-tap reason — Inaccurate, Not helpful, Unsafe, Other — and passes it to onFeedback. That single extra tap is the difference between telemetry you can act on and a number that only measures vibes. Thumbs-up is a single tap, because "good" rarely needs elaboration and asking would just tax the happy path.
Copy confirms itself with a check for a beat, so a user isn't left wondering whether it worked, and the clipboard write fails safe if the browser withholds permission. Regenerate and Branch are opt-in — pass a handler and the button appears — so the bar carries only the actions a given surface actually supports.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.