Command Palette

Search for a command to run...

AI Elements / Chat/AI Response Actions

AI Response Actions

Action buttons for AI responses: copy, regenerate, thumbs up/down, share

Open in v0Open in

Overview

A set of action buttons for AI responses including copy, regenerate, and feedback (thumbs up/down). Supports compact mode for inline usage.

Installation

bunx shadcn@latest add @elements/response-actions

Usage

import { ResponseActions } from "@/components/elements/ai-elements/chat/response-actions";

export function ResponseWithActions() {
  return (
    <div>
      <p>AI response content here...</p>
      <ResponseActions
        content="The response content to copy"
        onRegenerate={() => console.log("Regenerate")}
        onFeedback={(type) => console.log("Feedback:", type)}
      />
    </div>
  );
}

Props

PropTypeDefaultDescription
contentstring-Content for copy functionality
onRegenerate() => void-Callback for regenerate action
onFeedback(type: "positive" | "negative") => void-Callback for feedback
onShare() => void-Callback for share action
compactbooleanfalseCompact button layout
classNamestring-Additional CSS classes

Features

  • Copy to clipboard
  • Regenerate response
  • Thumbs up/down feedback
  • Share functionality
  • Compact mode for space-constrained layouts