frontend prototype

frontend/src/components/thread/content/ThreadContent.tsx

@@ -18,6 +18,7 @@ import { KortixLogo } from '@/components/sidebar/kortix-logo';
 import { AgentLoader } from './loader';
 import { parseXmlToolCalls, isNewXmlFormat, extractToolNameFromStream } from '@/components/thread/tool-views/xml-parser';
 import { parseToolResult } from '@/components/thread/tool-views/tool-result-parser';
+import Feedback from '@/components/thread/feedback-modal';
 
 // Define the set of  tags whose raw XML should be hidden during streaming
 const HIDE_STREAMING_XML_TAGS = new Set([
@@ -605,7 +606,7 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
                                     } else if (group.type === 'assistant_group') {
                                         return (
                                             <div key={group.key} ref={groupIndex === groupedMessages.length - 1 ? latestMessageRef : null}>
-                                                <div className="flex flex-col gap-2">
+                                                <div className="flex flex-col gap-2 group">
                                                     <div className="flex items-center">
                                                         <div className="rounded-md flex items-center justify-center">
                                                             {(() => {
@@ -893,6 +894,20 @@ export const ThreadContent: React.FC<ThreadContentProps> = ({
                                                             )}
                                                         </div>
                                                     </div>
+
+                                                    {(() => {
+                                                        const firstAssistant = group.messages.find(msg => msg.type === 'assistant');
+                                                        const messageId = firstAssistant?.message_id;
+                                                        if (!messageId) return null;
+
+                                                        
+
+                                                        return (
+                                                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                                                                <Feedback messageId={messageId} />
+                                                            </div>
+                                                        );
+                                                    })()}
                                                 </div>
                                             </div>
                                         );

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

@@ -0,0 +1,74 @@
+import { Dialog, DialogTitle, DialogHeader, DialogContent, DialogTrigger, DialogFooter, DialogClose } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ThumbsDown, ThumbsUp } from "lucide-react";
+import { useState } from "react";
+import { Textarea } from "../ui/textarea";
+import { toast } from "sonner";
+
+
+export default function Feedback({ messageId }: { messageId: string }) {
+  const [open, setOpen] = useState<boolean>(false);
+  const [feedback, setFeedback] = useState<'positive' | 'negative' | null>(null);
+  const [comment, setComment] = useState<string>('');
+
+  const handleClick = (feedback: 'positive' | 'negative') => {
+    setFeedback(feedback);
+    setOpen(true);
+  }
+
+  const handleSubmit = () => {
+    if(!feedback) return;
+    console.log(messageId, feedback, comment);
+    setOpen(false);
+    setFeedback(null);
+    setComment('');
+    toast.success('Feedback submitted');
+  }
+
+  return (
+    <div className="flex items-center gap-1">
+      <Button 
+        className="opacity-70 hover:opacity-100" 
+        variant="ghost"
+        onClick={() => handleClick('positive')}
+      >
+        <ThumbsUp />
+        <span className="sr-only">Positive feedback</span>
+      </Button>
+      <Button 
+        className="opacity-70 hover:opacity-100" 
+        size="icon" 
+        variant="ghost"
+        onClick={() => handleClick('negative')}
+      >
+        <ThumbsDown />
+        <span className="sr-only">Negative feedback</span>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Feedback</DialogTitle>
+          </DialogHeader>
+          <span 
+            className="text-sm text-muted-foreground"
+          >
+            {`What was ${feedback === 'negative' ? 'un' : ''}satisifying about this response?`}
+          </span>
+          <Textarea 
+            className="resize-none my-2" 
+            placeholder="Please provide feedback..." 
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+          />
+          <DialogFooter className="gap-2">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button onClick={handleSubmit}>Submit</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}