Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Message With Feedback AI Block for React

An assistant answer with Helpful and Not helpful choices that open a reason form in a fixed-height region: reason chips that change with the vote, an optional comment with a count out of 280, Send feedback and an Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Collect a rating and the reason for it, with this AI message with feedback for React with Base UI. A compact header names the product and a hairline frame holds one turn: a question in a secondary Bubble, the assistant's answer as plain prose and two choices, Helpful and Not helpful, built as native radios. Choosing one opens a form in a region that keeps its height: reason chips (Accurate, Clear, Complete for a thumbs up; Wrong, Unclear, Too long, Unsafe for a thumbs down), an optional comment in a Textarea with "0 / 280", and the block's one primary, a Shine Button "Send feedback". Changing the vote swaps the chips in place; sending ends in "Thanks. Saved on this page only." with an Undo. It's built from Bubble, Field, Textarea, Button, Shine Button and Guides. For assistants, help centres and answer-quality inboxes.

FAQ

What happens when I press Send feedback?

Nothing leaves the page. The vote, reasons and comment stay in state, the form is replaced by "Thanks. Saved on this page only." and the status line repeats it. To make it real, post the vote, the reasons and the comment with the answer's id from the submit handler and show the failure where the status line is, keeping the form.

Why doesn't the page move when I change the vote or send?

The region under the choices stacks its states in one cell: the hint before a vote, the form and the thanks. Only the current one is visible, the others are hidden from sight and from the keyboard, and the chips of both votes share a cell too, so the region is always as tall as the form.

What does Undo do?

It brings the form back with your vote, reasons and comment as you left them, and moves focus to Send feedback so you can change your mind and send again.

How does it work from the keyboard?

The two choices are radios in a labelled group (arrow keys move between them), the chips are checkboxes, and the comment is a labelled field. When the thanks replaces the form, focus moves to it so it is read out.

How does it look on a phone?

The chips wrap onto a second line, the comment keeps its height, and Send feedback stays under the count. Nothing changes height when the vote changes.

All 100 ai blocks