updated modal

frontend/src/components/thread/feedback-modal.tsx

@@ -4,68 +4,83 @@ import { ThumbsDown, ThumbsUp } from "lucide-react";
 import { useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { toast } from "sonner";
+import { apiClient } from '@/lib/api-client';
 
+interface FeedbackProps {
+  messageId: string;
+}
 
-export default function Feedback({ messageId }: { messageId: string }) {
+export default function Feedback({ messageId }: FeedbackProps) {
   const [open, setOpen] = useState<boolean>(false);
-  const [feedback, setFeedback] = useState<'positive' | 'negative' | null>(null);
+  const [responseIsGood, setResponseIsGood] = useState<boolean | null>(null);
-  const [comment, setComment] = useState<string>('');
+  const [feedback, setFeedback] = useState<string>('');
+  const [submitting, setSubmitting] = useState(false);
 
-  const handleClick = (feedback: 'positive' | 'negative') => {
+  const handleClick = (isGood: boolean) => {
-    setFeedback(feedback);
+    setResponseIsGood(isGood);
     setOpen(true);
-  }
+  };
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
-    if(!feedback) return;
+    if (responseIsGood === null) return;
-    console.log(messageId, feedback, comment);
+    setSubmitting(true);
-    setOpen(false);
+    const { success } = await apiClient.post('/api/feedback', {
-    setFeedback(null);
+      message_id: messageId,
-    setComment('');
+      response_is_good: responseIsGood,
-    toast.success('Feedback submitted');
+      comment: feedback.trim() || null,
-  }
+    });
+    setSubmitting(false);
+    if (success) {
+      toast.success('Feedback submitted - thank you!');
+      setOpen(false);
+      setFeedback('');
+      setResponseIsGood(null);
+    }
+  };
 
   return (
     <div className="flex items-center gap-1">
       <Button 
-        className="opacity-70 hover:opacity-100" 
+        className="h-7 w-7 opacity-70 hover:opacity-100" 
         variant="ghost"
-        onClick={() => handleClick('positive')}
+        onClick={() => handleClick(true)}
       >
-        <ThumbsUp />
+        <ThumbsUp className="h-4 w-4" />
-        <span className="sr-only">Positive feedback</span>
+        <span className="sr-only">Good response</span>
       </Button>
       <Button 
-        className="opacity-70 hover:opacity-100" 
+        className="h-7 w-7 opacity-70 hover:opacity-100" 
         size="icon" 
         variant="ghost"
-        onClick={() => handleClick('negative')}
+        onClick={() => handleClick(false)}
       >
-        <ThumbsDown />
+        <ThumbsDown className="h-4 w-4" />
-        <span className="sr-only">Negative feedback</span>
+        <span className="sr-only">Bad response</span>
       </Button>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>Feedback</DialogTitle>
+            <DialogTitle>{responseIsGood ? 'Good response' : 'Bad response'}</DialogTitle>
           </DialogHeader>
           <span 
             className="text-sm text-muted-foreground"
           >
-            {`What was ${feedback === 'negative' ? 'un' : ''}satisifying about this response?`}
+            {`What was ${responseIsGood === false ? 'un' : ''}satisifying about this response?`}
           </span>
           <Textarea 
             className="resize-none my-2" 
             placeholder="Please provide feedback..." 
-            value={comment}
+            value={feedback}
-            onChange={(e) => setComment(e.target.value)}
+            onChange={(e) => setFeedback(e.target.value)}
           />
           <DialogFooter className="gap-2">
             <DialogClose asChild>
               <Button variant="outline">Cancel</Button>
             </DialogClose>
-            <Button onClick={handleSubmit}>Submit</Button>
+            <Button onClick={handleSubmit} disabled={submitting || responseIsGood === null}>
+              {submitting ? 'Submitting...' : 'Submit'}
+            </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>