File size: 2,777 Bytes
e454383 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | "use client";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Message } from "@/lib/types";
import { useState } from "react";
import { Textarea } from "./ui/textarea";
interface RatingCategory {
name: string;
value: number;
}
export default function EvaluationModal({
open = false,
onOpenChange,
message,
prevMessage,
}: {
open: boolean;
onOpenChange: (open: boolean) => void;
message: Message;
prevMessage: Message;
}) {
const [ratings, setRatings] = useState<Record<string, number>>({
relevance: 0,
accuracy: 0,
clarity: 0,
engagement: 0,
});
const categories: RatingCategory[] = [
{ name: "Relevance", value: ratings.relevance },
{ name: "Accuracy", value: ratings.accuracy },
{ name: "Clarity", value: ratings.clarity },
{ name: "User Engagement", value: ratings.engagement },
];
const handleRating = (category: string, value: number) => {
const categoryKey =
category.toLowerCase() === "user engagement"
? "engagement"
: category.toLowerCase();
setRatings((prev) => ({
...prev,
[categoryKey]: value,
}));
};
const handleSubmit = () => {
console.log("Submitting ratings:", ratings);
onOpenChange(false);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="text-xl pb-2 border-b">
Evaluate this Response
</DialogTitle>
</DialogHeader>
<div className="space-y-6 py-4">
{categories.map((category) => (
<div key={category.name} className="space-y-2">
<label className="text-sm font-medium">{category.name}:</label>
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
onClick={() => handleRating(category.name, star)}
className="text-2xl focus:outline-none"
>
<span
className={`${
category.value >= star
? "text-yellow-400"
: "text-muted-foreground"
}`}
>
★
</span>
</button>
))}
</div>
</div>
))}
<Textarea placeholder="Additional comments..." />
<Button className="w-full" onClick={handleSubmit}>
Submit
</Button>
</div>
</DialogContent>
</Dialog>
);
}
|