AI Feedback Collector

npx shadcn@latest add "https://haberui.com/h/ai-feedback-collector.json"

import { AIFeedbackCollector } from "@/components/haber-ui/ai-feedback-collector";
 
export function AIResponseWithFeedback() {
  const handleFeedback = async (feedback) => {
    console.log("User feedback:", feedback);
 
    // Example: Send feedback to your API
    await fetch("/api/feedback", {
      method: "POST",
      body: JSON.stringify(feedback),
    });
  };
 
  return (
    <div className="space-y-4">
      <div className="p-4 rounded-lg bg-card">
        <p>
          The capital of France is Paris, which is located on the Seine River
          and has a population of over 2 million people.
        </p>
      </div>
 
      <AIFeedbackCollector
        onFeedback={handleFeedback}
        allowComments={true}
        colorScheme="blue"
        size="sm"
      />
    </div>
  );
}