FeedbackBar

Thumbs up/down rating bar for AI responses. Optionally reveals a comment textarea on thumbs-down.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

FeedbackBarThumbs up/down rating bar for AI responses. Optionally reveals a comment textarea on thumbs-down.

"use client";
import { useState } from "react";

type FeedbackBarProps = {
  onFeedback?: (v: "up" | "down") => void;
  showTextOnDown?: boolean;
};

export function FeedbackBar({ onFeedback, showTextOnDown = false }: FeedbackBarProps) {
  const [vote, setVote] = useState<"up" | "down" | null>(null);
  const [comment, setComment] = useState("");

  function handleVote(v: "up" | "down") {
    setVote(v);
    onFeedback?.(v);
  }

  return (
    <div className="pk-feedback">
      <span className="pk-feedback-label">Was this helpful?</span>
      <div className="pk-feedback-btns">
        <button
          className={`pk-feedback-btn${vote === "up" ? " pk-feedback-btn--active" : ""}`}
          onClick={() => handleVote("up")}
          aria-label="Thumbs up"
        >
          👍
        </button>
        <button
          className={`pk-feedback-btn${vote === "down" ? " pk-feedback-btn--active" : ""}`}
          onClick={() => handleVote("down")}
          aria-label="Thumbs down"
        >
          👎
        </button>
      </div>
      {showTextOnDown && vote === "down" && (
        <div className="pk-feedback-extra">
          <textarea
            className="pk-feedback-ta"
            placeholder="What went wrong?"
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            rows={2}
          />
        </div>
      )}
    </div>
  );
}

Props

Prop	Type	Default	Description
`onFeedback`	`(v: "up" \| "down") => void`	—	Called when user selects a rating
`showTextOnDown`	`boolean`	`false`	Reveal textarea when thumbs-down is selected