Add a modal which allows users to provide more feedback

packages/web/src/components/apps/AiFeedbackModal.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@srcbook/components';
+import TextareaAutosize from 'react-textarea-autosize';
+
+interface AiFeedbackModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (feedback: string) => void;
+}
+
+export function AiFeedbackModal({ isOpen, onClose, onSubmit }: AiFeedbackModalProps) {
+  const [feedback, setFeedback] = React.useState('');
+
+  const handleSubmit = () => {
+    onSubmit(feedback);
+    setFeedback('');
+    onClose();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Provide Feedback</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <TextareaAutosize
+            placeholder="Tell us more about what went wrong..."
+            className="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            value={feedback}
+            onChange={(e) => setFeedback(e.target.value)}
+            onKeyDown={handleKeyDown}
+            minRows={3}
+            maxRows={10}
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Submit Feedback</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

packages/web/src/components/chat.tsx

@@ -9,7 +9,6 @@ import {
 import Markdown from './apps/markdown.js';
 import { diffFiles } from './apps/lib/diff.js';
 import TextareaAutosize from 'react-textarea-autosize';
-import { toast } from 'sonner';
 import {
   ArrowUp,
   Minus,
@@ -47,6 +46,7 @@ import type {
 import { DiffStats } from './apps/diff-stats.js';
 import { useApp } from './apps/use-app.js';
 import { usePackageJson } from './apps/use-package-json.js';
+import { AiFeedbackModal } from './apps/AiFeedbackModal';
 
 function Chat({
   history,
@@ -264,6 +264,21 @@ function DiffBox({
   version: number;
   planId: string;
 }) {
+  const [showFeedbackToast, setShowFeedbackToast] = React.useState(false);
+  const [feedbackGiven, _setFeedbackGiven] = React.useState<null | 'positive' | 'negative'>(null);
+  const [isFeedbackModalOpen, setIsFeedbackModalOpen] = React.useState(false);
+
+  const setFeedbackGiven = (feedback: 'positive' | 'negative') => {
+    setShowFeedbackToast(true);
+    _setFeedbackGiven(feedback);
+    setTimeout(() => setShowFeedbackToast(false), 2500);
+  };
+
+  const handleFeedbackSubmit = (feedbackText: string) => {
+    setFeedbackGiven('negative');
+    aiGenerationFeedback(app.id, { planId, feedback: { type: 'negative', text: feedbackText } });
+  };
+
   return (
     <>
       <div className="px-2 mx-2 pb-2 rounded border overflow-y-auto bg-ai border-ai-border text-ai-foreground">
@@ -287,30 +302,38 @@ function DiffBox({
       <div className="flex px-2 items-center gap-2 my-2">
         <Button
           variant="icon"
-          className="h-7 w-7 p-1.5 border-none text-tertiary-foreground"
+          className={cn(
+            'h-7 w-7 p-1.5 border-none',
+            feedbackGiven === 'positive' ? 'text-secondary-foreground' : 'text-tertiary-foreground',
+          )}
           aria-label="Upvote"
-          onClick={() => console.log('upvote', planId)}
+          onClick={() => {
+            setFeedbackGiven('positive');
+            aiGenerationFeedback(app.id, { planId, feedback: { type: 'positive' } });
+          }}
         >
-          <ThumbsUp
-            size={18}
-            onClick={() => {
-              aiGenerationFeedback(app.id, { planId, feedback: { type: 'positive' } });
-              toast.success('thanks for the feedback!');
-            }}
-          />
+          <ThumbsUp size={18} />
         </Button>
         <Button
           variant="icon"
-          className="h-7 w-7 p-1.5 border-none text-tertiary-foreground"
+          className={cn(
+            'h-7 w-7 p-1.5 border-none',
+            feedbackGiven === 'negative' ? 'text-secondary-foreground' : 'text-tertiary-foreground',
+          )}
           aria-label="Downvote"
-          onClick={() => {
-            aiGenerationFeedback(app.id, { planId, feedback: { type: 'negative' } });
-            toast.success('Thanks for the feedback!');
-          }}
+          onClick={() => setIsFeedbackModalOpen(true)}
         >
           <ThumbsDown size={18} />
         </Button>
+        {showFeedbackToast && (
+          <p className="text-sm text-tertiary-foreground">Thanks for the feedback!</p>
+        )}
       </div>
+      <AiFeedbackModal
+        isOpen={isFeedbackModalOpen}
+        onClose={() => setIsFeedbackModalOpen(false)}
+        onSubmit={handleFeedbackSubmit}
+      />
     </>
   );
 }