# Response Feedback

> The action bar under an assistant reply: a version pager after regenerating, Copy with a Markdown option, Good and Bad response, Read aloud with a live level, and Regenerate with Try again, longer, shorter, casual, formal and a Switch model submenu. Rating down opens an inline panel with reasons, a comment and a share-conversation checkbox, then settles into a thank-you.

- Slug: `response-feedback`
- Category: [AI chat](https://www.assembli.design/category/ai-chat.md)
- Type: component
- Tags: feedback, message, actions, regenerate, rating, chat
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: button, textarea, tooltip, dropdown-menu, @assembli/classic-checkbox
- Live preview: https://www.assembli.design/preview/response-feedback
- Page: https://www.assembli.design/components/response-feedback

![Response Feedback preview](https://www.assembli.design/thumbnails/response-feedback-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` |  | The reply as plain text, for Copy and Read aloud. |
| `markdown` | `string` |  | The reply's Markdown source, for Copy as Markdown. Falls back to `text`. |
| `versions` | `number` | `1` | How many versions of this reply exist. The pager shows from 2. |
| `version` | `number` | `versions` | The version on screen, 1-based. |
| `onVersionChange` | `(version: number) => void` |  |  |
| `models` | `ResponseModel[]` | `DEFAULT_MODELS` | Models offered under Regenerate › Retry with. |
| `model` | `string` |  | The model that wrote this reply; it gets the check in the menu. |
| `reasons` | `string[]` | `DEFAULT_REASONS` | Reasons offered when the reply is rated down. |
| `busy` | `boolean` | `false` | True while a new version is being written: the bar locks and the regenerate arrow turns. |
| `defaultRating` | `"up" \| "down" \| null` | `null` |  |
| `defaultFeedbackOpen` | `boolean` | `false` | Start with the thumbs-down panel open (for demos and restored state). |
| `defaultReasons` | `string[]` | `[]` |  |
| `onCopy` | `(format: "text" \| "markdown") => void` |  |  |
| `onRatingChange` | `(rating: "up" \| "down" \| null) => void` |  |  |
| `onFeedback` | `(feedback: ResponseFeedbackValue) => void` |  |  |
| `onRegenerate` | `(mode: RegenerateMode, model?: string) => void` |  |  |
| `onReadAloud` | `(playing: boolean) => void` |  | Called with true when reading starts and false when it stops or ends. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/response-feedback/response-feedback.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/response-feedback
```

Registry item JSON: https://www.assembli.design/r/response-feedback.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.