Response actions

The control row ranked by what people actually do. Copy comes first because it is used most, then the thumbs pair, then retry, with the rest behind an overflow. A thumbs-down that collects a category is worth more than one that collects a bit.

npx shadcn@latest add button dropdown-menu
npm i lucide-react

Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --border, --chart-1

────────────────────────────────────────────────────────────────────────
// ResponseActions.tsx
────────────────────────────────────────────────────────────────────────

import { Copy, RotateCcw, ThumbsDown, ThumbsUp, MoreHorizontal } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export type Rating = "up" | "down" | null;

/** A thumbs-down is one bit. The follow-up turns it into a category, and the
 *  set is closed so the numbers add up across turns. */
export type Reason = "wrong" | "too long" | "off topic";
export const REASONS: Reason[] = ["wrong", "too long", "off topic"];

export type OverflowItem = { label: string; onSelect: () => void };

type Props = {
  /** What copy takes. The caller decides markdown, rendered text or raw. */
  copyText: string;
  rating: Rating;
  onRate: (rating: Rating) => void;
  onReason: (reason: Reason) => void;
  onRetry: () => void;
  /** Everything past the top four. Read aloud, share, report: they exist,
   *  they are one click further away. */
  overflow: OverflowItem[];
  /** Where a rating goes once clicked. Required, because a control that
   *  quietly feeds a pipeline is asking for trust it has not explained. */
  feedbackUse: string;
  /** The newest turn keeps its row; older turns reveal it on hover or focus,
   *  so the keyboard reaches it the same way the pointer does. */
  pinned?: boolean;
  onCopy?: () => void;
};

export function ResponseActions({
  copyText, rating, onRate, onReason, onRetry, overflow, feedbackUse, pinned = false, onCopy,
}: Props) {
  const copy = () => {
    navigator.clipboard?.writeText(copyText);
    onCopy?.();
  };
  const reveal = pinned ? "" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100";

  return (
    <div className={`text-[11px] ${reveal}`}>
      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" className="h-7 gap-1.5 border-chart-1 px-2.5 text-[11px] text-chart-1 hover:text-chart-1" onClick={copy}>
          <Copy className="size-3" /> copy
        </Button>
        <Button variant="outline" size="sm" className={`h-7 w-8 px-0 ${rating === "up" ? "text-card-foreground" : "text-muted-foreground"}`} aria-label="helpful" aria-pressed={rating === "up"} onClick={() => onRate(rating === "up" ? null : "up")}>
          <ThumbsUp className="size-3" />
        </Button>
        <Button variant="outline" size="sm" className={`h-7 w-8 px-0 ${rating === "down" ? "text-card-foreground" : "text-muted-foreground"}`} aria-label="not helpful" aria-pressed={rating === "down"} onClick={() => onRate(rating === "down" ? null : "down")}>
          <ThumbsDown className="size-3" />
        </Button>
        <Button variant="outline" size="sm" className="h-7 gap-1.5 px-2.5 text-[11px] text-card-foreground" onClick={onRetry}>
          <RotateCcw className="size-3" /> retry
        </Button>
        <DropdownMenu modal={false}>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm" className="h-7 w-8 px-0 text-muted-foreground" aria-label="more">
              <MoreHorizontal className="size-3" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            {overflow.map((item) => (
              <DropdownMenuItem key={item.label} onSelect={item.onSelect}>{item.label}</DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* Optional, one click, and it says where the answer goes. */}
      {rating === "down" && (
        <div className="ml-24 mt-4 w-[340px] max-w-full rounded-lg border bg-muted p-3">
          <p className="text-sm text-card-foreground">What went wrong?</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {REASONS.map((r) => (
              <Button key={r} variant="outline" size="sm" className="h-6 rounded-full px-2.5 text-[11px]" onClick={() => onReason(r)}>{r}</Button>
            ))}
          </div>
          <p className="mt-3 text-muted-foreground">{feedbackUse}</p>
        </div>
      )}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { ResponseActions, type Rating } from "./ResponseActions";

const ANSWER =
  "The break clause is at 12.1: six months' written notice, exercisable at the end of year two, conditional on the rent being paid up to date and vacant possession on the break date.";

/**
 * The newest turn, so the row is pinned. It opens on a thumbs-down with the
 * follow-up showing; picking a reason closes it, and thumbs-up clears it.
 */
export default function Demo() {
  const [rating, setRating] = useState<Rating>("down");
  return (
    <div className="group rounded-lg border bg-card p-4">
      <p className="text-sm leading-relaxed text-card-foreground">{ANSWER}</p>
      <div className="mt-4">
        <ResponseActions
          copyText={ANSWER}
          rating={rating}
          onRate={setRating}
          onReason={() => setRating(null)}
          onRetry={() => {}}
          overflow={[
            { label: "read aloud", onSelect: () => {} },
            { label: "share this turn", onSelect: () => {} },
            { label: "report", onSelect: () => {} },
          ]}
          feedbackUse="used to tune retrieval, not to train the model"
          pinned
        />
      </div>
    </div>
  );
}