Docs / Components / AI Feedback Bar
AI Feedback Bar
An AI response feedback bar with helpful thumbs up/down icons that smoothly morphs into an expanded feedback text card on dislike with submit loading state.
Was this response helpful?
Dependencies
Install the following dependencies to use this component:
1npm install framer-motion lucide-react clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add ai-feedback-bar
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | 'Was this response helpful?' | Question or prompt text shown in the feedback bar. |
| textareaPlaceholder | string | 'What went wrong with this response or how could it be improved?' | Placeholder text for detailed feedback textarea. |
| submitButtonText | string | 'Submit' | Label text for the submit button. |
| showFeedbackFormOnDislike | boolean | true | Whether clicking dislike morphs the bar into the detailed feedback textarea card. |
| onLike | () => void | Promise<void> | - | Callback triggered when helpful/thumbs-up is clicked. |
| onDislike | () => void | Promise<void> | - | Callback triggered when not helpful/thumbs-down is clicked. |
| onSubmitFeedback | (text: string) => void | Promise<void> | - | Callback triggered when the feedback text form is submitted. |
| onClose | () => void | - | Callback triggered when the bar is closed / dismissed. |
| className | string | '' | Additional CSS classes for the outer container. |