| "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> |
| ); |
| } |
|
|
