feat: add feedback tracking for assistant messages (#1597)

* add feedback tracking for assistant messages

* style: apply biome auto-fixes [skip ci]

* don't show during onboarding

* coderabbit suggestions

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 2 people

frontend/app/chat/_components/assistant-message.tsx

@@ -11,13 +11,15 @@ const MarkdownRenderer = dynamic(
   { ssr: false },
 );
 
+import { trackButton } from "@/lib/analytics";
 import { cn } from "@/lib/utils";
 import type {
   FunctionCall,
   TokenUsage as TokenUsageType,
 } from "../_types/types";
 import { FunctionCalls } from "./function-calls";
 import { Message } from "./message";
+import MessageActions from "./message-actions";
 import { TokenUsage } from "./token-usage";
 
 interface AssistantMessageProps {
@@ -35,6 +37,8 @@ interface AssistantMessageProps {
   delay?: number;
   isInitialGreeting?: boolean;
   usage?: TokenUsageType;
+  timestamp?: Date;
+  showFeedback?: boolean;
 }
 
 export function AssistantMessage({
@@ -52,7 +56,19 @@ export function AssistantMessage({
   delay = 0.2,
   isInitialGreeting = false,
   usage,
+  timestamp,
+  showFeedback = true,
 }: AssistantMessageProps) {
+  const trackFeedback = (feedback: "like" | "dislike") => {
+    trackButton({
+      action: feedback,
+      elementId: "message-feedback",
+      namespace: "chat",
+      CTA: feedback === "like" ? "Like Message" : "Dislike Message",
+      timestamp: timestamp?.getTime(),
+    });
+  };
+
   return (
     <motion.div
       initial={animate ? { opacity: 0, y: -20 } : { opacity: 1, y: 0 }}
@@ -151,6 +167,9 @@ export function AssistantMessage({
               }
             />
             {usage && !isStreaming && <TokenUsage usage={usage} />}
+            {!isInitialGreeting && showFeedback && !isStreaming && (
+              <MessageActions trackFeedback={trackFeedback} />
+            )}
           </motion.div>
         </div>
       </Message>

frontend/app/chat/_components/message-actions.tsx

@@ -0,0 +1,58 @@
+import { ThumbsDown, ThumbsUp } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+interface MessageActionsProps {
+  trackFeedback: (feedback: "like" | "dislike") => void;
+}
+
+const MessageActions = ({ trackFeedback }: MessageActionsProps) => {
+  const [feedbackSelected, setFeedbackSelected] = useState<
+    "like" | "dislike" | null
+  >(null);
+
+  const handleFeedback = (feedback: "like" | "dislike") => {
+    if (feedbackSelected === feedback) return; // Prevent multiple tracking events for the same feedback
+    trackFeedback(feedback);
+    setFeedbackSelected(feedback);
+  };
+
+  return (
+    <div className="flex space-x-2 mt-2">
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Like"
+        aria-pressed={feedbackSelected === "like"}
+        className={
+          feedbackSelected !== "like"
+            ? "text-muted-foreground hover:text-foreground"
+            : ""
+        }
+        onClick={() => handleFeedback("like")}
+      >
+        <ThumbsUp
+          className={`h-4 w-4 ${feedbackSelected === "like" ? "fill-current" : ""}`}
+        />
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        aria-label="Dislike"
+        aria-pressed={feedbackSelected === "dislike"}
+        className={
+          feedbackSelected !== "dislike"
+            ? "text-muted-foreground hover:text-foreground"
+            : ""
+        }
+        onClick={() => handleFeedback("dislike")}
+      >
+        <ThumbsDown
+          className={`h-4 w-4 ${feedbackSelected === "dislike" ? "fill-current" : ""}`}
+        />
+      </Button>
+    </div>
+  );
+};
+
+export default MessageActions;

frontend/app/chat/_types/types.ts

@@ -21,6 +21,12 @@ export interface Message {
   usage?: TokenUsage;
 }
 
+export const INITIAL_ASSISTANT_MESSAGE: Message = {
+  role: "assistant",
+  content: "How can I assist?",
+  timestamp: new Date(),
+};
+
 export interface FunctionCall {
   name: string;
   arguments?: Record<string, unknown>;

frontend/app/chat/page.tsx

@@ -28,6 +28,7 @@ import type {
   RequestBody,
   ToolCallResult,
 } from "./_types/types";
+import { INITIAL_ASSISTANT_MESSAGE } from "./_types/types";
 
 function ChatPage() {
   const isDebugMode = process.env.NEXT_PUBLIC_OPENRAG_DEBUG === "true";
@@ -52,11 +53,7 @@ function ChatPage() {
     setLoading,
   } = useChat();
   const [messages, setMessages] = useState<Message[]>([
-    {
-      role: "assistant",
-      content: "How can I assist?",
-      timestamp: new Date(),
-    },
+    INITIAL_ASSISTANT_MESSAGE,
   ]);
   const [input, setInput] = useState("");
   const { setChatError } = useChat();
@@ -327,13 +324,7 @@ function ChatPage() {
       // Abort any in-flight streaming so it doesn't bleed into new chat
       abortStream();
       // Reset chat UI even if context state was already 'new'
-      setMessages([
-        {
-          role: "assistant",
-          content: "How can I assist?",
-          timestamp: new Date(),
-        },
-      ]);
+      setMessages([INITIAL_ASSISTANT_MESSAGE]);
       setInput("");
       setExpandedFunctionCalls(new Set());
       setIsFilterHighlighted(false);
@@ -571,13 +562,7 @@ function ChatPage() {
   useEffect(() => {
     if (placeholderConversation && currentConversationId === null) {
       console.log("Starting new conversation");
-      setMessages([
-        {
-          role: "assistant",
-          content: "How can I assist?",
-          timestamp: new Date(),
-        },
-      ]);
+      setMessages([INITIAL_ASSISTANT_MESSAGE]);
       lastLoadedConversationRef.current = null;
 
       // Focus input when starting a new conversation
@@ -1054,9 +1039,11 @@ function ChatPage() {
                             isInitialGreeting={
                               index === 0 &&
                               messages.length === 1 &&
-                              message.content === "How can I assist?"
+                              message.content ===
+                                INITIAL_ASSISTANT_MESSAGE.content
                             }
                             usage={message.usage}
+                            timestamp={message.timestamp}
                           />
                         )}
                       </div>

frontend/app/onboarding/_components/onboarding-content.tsx

@@ -287,6 +287,7 @@ export function OnboardingContent({
                 onToggle={() => {}}
                 isStreaming={!!streamingMessage}
                 isCompleted={currentStep > 3}
+                showFeedback={false}
               />
             )}
 

frontend/contexts/chat-context.tsx

@@ -11,6 +11,7 @@ import {
   useState,
 } from "react";
 import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
+import { INITIAL_ASSISTANT_MESSAGE } from "@/app/chat/_types/types";
 
 export type EndpointType = "chat" | "langflow";
 
@@ -346,7 +347,7 @@ export function ChatProvider({ children }: ChatProviderProps) {
       messages: [
         {
           role: "assistant",
-          content: "How can I assist?",
+          content: INITIAL_ASSISTANT_MESSAGE.content,
           timestamp: new Date().toISOString(),
         },
       ],

frontend/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {