feat: chat feedback

actions/chat/get-chat-conversations.ts

@@ -66,6 +66,7 @@ export const getChatConversations = async ({ sharedConversationId }: GetChatConv
         user: true,
         messages: {
           orderBy: { createdAt: 'asc' },
+          include: { feedback: true },
         },
       },
     });

app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-bubble.tsx

@@ -8,10 +8,18 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui';
 import { ChatCompletionRole } from '@/constants/open-ai';
 import { getFallbackName } from '@/lib/utils';
 
+import { ChatFeedback } from './chat-feedback';
+
 type ChatBubbleProps = {
   isShared?: boolean;
   isSubmitting?: boolean;
-  message: { role: string; content: string; model?: string };
+  message: {
+    role: string;
+    content: string;
+    model?: string;
+    id?: string;
+    feedback?: { feedback: string } | null;
+  };
   name: string;
   picture?: string | null;
   streamMessage?: string;
@@ -50,8 +58,9 @@ export const ChatBubble = ({
           </div>
           <MarkdownText text={text} />
           {isAssistant && !isSubmitting && (
-            <div className="flex gap-x-2 mt-4">
+            <div className="flex gap-x-3 mt-4">
               <CopyClipboard textToCopy={text} />
+              <ChatFeedback messageId={message.id} state={message.feedback?.feedback} />
             </div>
           )}
         </div>

app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-feedback.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { ChatMessage } from '@prisma/client';
+import { ThumbsDown, ThumbsUp } from 'lucide-react';
+import { SyntheticEvent, useState } from 'react';
+
+import { useToast } from '@/components/ui/use-toast';
+import { useChatStore } from '@/hooks/store/use-chat-store';
+import { fetcher } from '@/lib/fetcher';
+import { cn } from '@/lib/utils';
+
+const enum Feedback {
+  POSITIVE = 'positive',
+  NEGATIVE = 'negative',
+}
+
+type ChatFeedback = {
+  className?: string;
+  disabled?: boolean;
+  messageId?: string;
+  state?: string | null;
+};
+
+export const ChatFeedback = ({ className, disabled, messageId, state }: ChatFeedback) => {
+  const { toast } = useToast();
+
+  const { chatMessages, setChatMessages } = useChatStore((state) => ({
+    chatMessages: state.chatMessages,
+    setChatMessages: state.setChatMessages,
+  }));
+
+  const [isFetching, setIsFetching] = useState(false);
+  const [clicked, setClicked] = useState({
+    [Feedback.POSITIVE]: false,
+    [Feedback.NEGATIVE]: false,
+  });
+
+  const handleClick = async (event: SyntheticEvent & { currentTarget: { name: string } }) => {
+    const feedback = event.currentTarget.name;
+
+    setClicked((prev) => ({ ...prev, [feedback]: true }));
+
+    setTimeout(() => {
+      setClicked((prev) => ({ ...prev, [feedback]: false }));
+    }, 1000);
+
+    setIsFetching(true);
+
+    try {
+      const response = await fetcher.post('/api/chat/feedback', {
+        responseType: 'json',
+        body: { messageId, feedback },
+      });
+
+      const conversationId = response.message.conversationId;
+
+      const updatedChatMessages = {
+        ...chatMessages,
+        [conversationId]: chatMessages[conversationId].map((message) =>
+          message.id === messageId
+            ? {
+                ...message,
+                feedback: {
+                  ...(message as ChatMessage & { feedback: ChatFeedback })?.feedback,
+                  feedback: response.feedback,
+                },
+              }
+            : message,
+        ),
+      };
+
+      setChatMessages(updatedChatMessages);
+    } catch (error) {
+      toast({ isError: true });
+    } finally {
+      setIsFetching(false);
+    }
+  };
+
+  return (
+    <div className="flex gap-x-3">
+      <button onClick={handleClick} disabled={disabled || isFetching} name={Feedback.POSITIVE}>
+        <ThumbsUp
+          className={cn(
+            'h-4 w-4 hover:text-green-500 transition-all duration-300',
+            state === Feedback.POSITIVE && 'text-green-500',
+            clicked[Feedback.POSITIVE] ? 'animate-spin-once' : '',
+            className,
+          )}
+        />
+      </button>
+      <button onClick={handleClick} disabled={disabled || isFetching} name={Feedback.NEGATIVE}>
+        <ThumbsDown
+          className={cn(
+            'h-4 w-4 hover:text-red-500 transition-all duration-300',
+            state === Feedback.NEGATIVE && 'text-red-500',
+            clicked[Feedback.NEGATIVE] ? 'animate-spin-once' : '',
+            className,
+          )}
+        />
+      </button>
+    </div>
+  );
+};

app/api/chat/feedback/route.ts

@@ -0,0 +1,39 @@
+import { ReasonPhrases, StatusCodes } from 'http-status-codes';
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getCurrentUser } from '@/actions/auth/get-current-user';
+import { db } from '@/lib/db';
+
+export const POST = async (req: NextRequest) => {
+  try {
+    const user = await getCurrentUser();
+
+    if (!user?.hasSubscription) {
+      return new NextResponse(ReasonPhrases.UNAUTHORIZED, { status: StatusCodes.UNAUTHORIZED });
+    }
+
+    const { messageId, feedback } = await req.json();
+
+    if (!messageId) {
+      return new NextResponse(ReasonPhrases.BAD_REQUEST, { status: StatusCodes.BAD_REQUEST });
+    }
+
+    const updatedFeedback = await db.chatMessageFeedback.upsert({
+      where: { messageId },
+      update: { feedback },
+      create: {
+        messageId,
+        feedback,
+      },
+      include: { message: true },
+    });
+
+    return NextResponse.json(updatedFeedback);
+  } catch (error) {
+    console.error('[POST_CHAT_MESSAGE_FEEDBACK]', error);
+
+    return new NextResponse(ReasonPhrases.INTERNAL_SERVER_ERROR, {
+      status: StatusCodes.INTERNAL_SERVER_ERROR,
+    });
+  }
+};

package.json

@@ -26,7 +26,7 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@hookform/resolvers": "^3.3.4",
     "@plaiceholder/next": "^3.0.0",
-    "@prisma/client": "^5.21.1",
+    "@prisma/client": "^6.5.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -131,7 +131,7 @@
     "lint-staged": "^15.2.2",
     "postcss": "^8",
     "prettier": "^3.2.4",
-    "prisma": "^5.21.1",
+    "prisma": "^6.5.0",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },

prisma/schema.prisma

@@ -288,19 +288,36 @@ model CsmIssue {
 }
 
 // Chat Copilot
+enum ChatFeedback {
+  positive
+  negative
+}
+
 model ChatMessage {
-  id             String            @id @default(uuid())
+  id             String               @id @default(uuid())
   content        String
-  conversation   ChatConversation? @relation(fields: [conversationId], references: [id], onDelete: Cascade)
+  conversation   ChatConversation?    @relation(fields: [conversationId], references: [id], onDelete: Cascade)
   conversationId String?
-  createdAt      DateTime          @default(now())
+  createdAt      DateTime             @default(now())
+  feedback       ChatMessageFeedback?
   model          String
   role           String
-  updatedAt      DateTime          @updatedAt
+  updatedAt      DateTime             @updatedAt
 
   @@index([conversationId])
 }
 
+model ChatMessageFeedback {
+  id        String       @id @default(uuid())
+  createdAt DateTime     @default(now())
+  feedback  ChatFeedback
+  message   ChatMessage  @relation(fields: [messageId], references: [id], onDelete: Cascade)
+  messageId String       @unique
+  updatedAt DateTime     @updatedAt
+
+  @@index([messageId])
+}
+
 model ChatConversation {
   id        String                  @id @default(uuid())
   createdAt DateTime                @default(now())