Add analytics tracking and thumbs feedback to AI sidekick (V2 editor)

src/routes/v2/shared/components/AiChat/AiChatContent.tsx

@@ -10,6 +10,7 @@ import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { useAiProviderSettings } from "@/hooks/useAiProviderSettings";
 import useToastNotification from "@/hooks/useToastNotification";
+import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { useBackend } from "@/providers/BackendProvider";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 import { fetchPipelineRuns } from "@/services/pipelineRunService";
@@ -50,6 +51,7 @@ export const AiChatContent = observer(function AiChatContent({
 }: AiChatContentProps) {
   const aiChat = useAiChatStore();
   const notify = useToastNotification();
+  const { track } = useAnalytics();
   const { navigation } = useSharedStores();
   const { backendUrl } = useBackend();
   const authStorage = useAuthLocalStorage();
@@ -103,17 +105,32 @@ export const AiChatContent = observer(function AiChatContent({
 
   const thread = aiChat.activeThread;
 
-  function handleSend(prompt: string) {
+  async function handleSend(prompt: string) {
     if (!thread) return;
     const recentRuns = recentRunsData
       ? projectRecentRuns(recentRunsData)
       : undefined;
-    thread.sendMessage(prompt, {
+
+    track("ai_assistant.message.submitted", {
+      prompt,
+      thread_message_count: thread.messages.length,
+    });
+
+    await thread.sendMessage(prompt, {
       onError: (msg) => notify(msg, "error"),
       bridge,
       aiConfig,
       ...(recentRuns && { recentRuns }),
     });
+
+    const lastMessage = thread.messages[thread.messages.length - 1];
+    if (lastMessage?.role === "assistant") {
+      track("ai_assistant.response.received", {
+        prompt,
+        response: lastMessage.content,
+        thread_message_count: thread.messages.length,
+      });
+    }
   }
 
   if (!isAiConfigured) {

src/routes/v2/shared/components/AiChat/components/ChatMessage.tsx

@@ -3,12 +3,14 @@ import type { ChatMessage as ChatMessageType } from "@/routes/v2/shared/componen
 
 import { MessageBubble } from "./MessageBubble";
 import { renderMarkdown } from "./renderMarkdown";
+import { ResponseFeedback } from "./ResponseFeedback";
 
 interface ChatMessageProps {
   message: ChatMessageType;
+  prompt?: string;
 }
 
-export function ChatMessage({ message }: ChatMessageProps) {
+export function ChatMessage({ message, prompt }: ChatMessageProps) {
   const isUser = message.role === "user";
 
   return (
@@ -18,9 +20,14 @@ export function ChatMessage({ message }: ChatMessageProps) {
           {message.content}
         </Text>
       ) : (
-        <div className="text-sm break-words min-w-0 overflow-x-auto">
-          {renderMarkdown(message.content, message.componentReferences)}
-        </div>
+        <>
+          <div className="text-sm break-words min-w-0 overflow-x-auto">
+            {renderMarkdown(message.content, message.componentReferences)}
+          </div>
+          {prompt !== undefined && (
+            <ResponseFeedback prompt={prompt} response={message.content} />
+          )}
+        </>
       )}
     </MessageBubble>
   );

src/routes/v2/shared/components/AiChat/components/ChatMessageList.tsx

@@ -34,9 +34,19 @@ export function ChatMessageList({
 
   return (
     <BlockStack gap="2" className="flex-1 overflow-y-auto p-3">
-      {messages.map((msg) => (
-        <ChatMessage key={msg.id} message={msg} />
-      ))}
+      {messages.map((msg, i) => {
+        const precedingUserMessage =
+          msg.role === "assistant" && messages[i - 1]?.role === "user"
+            ? messages[i - 1].content
+            : undefined;
+        return (
+          <ChatMessage
+            key={msg.id}
+            message={msg}
+            prompt={precedingUserMessage}
+          />
+        );
+      })}
       {thinkingText && <ThinkingMessage text={thinkingText} />}
       <div ref={bottomRef} />
     </BlockStack>

src/routes/v2/shared/components/AiChat/components/ResponseFeedback.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+
+import { Icon } from "@/components/ui/icon";
+import { cn } from "@/lib/utils";
+import { useAnalytics } from "@/providers/AnalyticsProvider";
+
+interface ResponseFeedbackProps {
+  prompt: string;
+  response: string;
+}
+
+type FeedbackState = "idle" | "submitted";
+
+export function ResponseFeedback({ prompt, response }: ResponseFeedbackProps) {
+  const { track } = useAnalytics();
+  const [state, setState] = useState<FeedbackState>("idle");
+  const [showThanks, setShowThanks] = useState(false);
+
+  function handleFeedback(rating: "positive" | "negative") {
+    if (state !== "idle") return;
+    setState("submitted");
+    track("ai_assistant.response.feedback", { rating, prompt, response });
+    setTimeout(() => setShowThanks(true), 200);
+  }
+
+  return (
+    <div className="relative flex items-center h-5 mt-1.5">
+      <div
+        className={cn(
+          "flex gap-0.5 transition-opacity duration-200",
+          state === "submitted" ? "opacity-0" : "opacity-100",
+        )}
+        aria-hidden={state === "submitted"}
+      >
+        <button
+          onClick={() => handleFeedback("positive")}
+          disabled={state !== "idle"}
+          className="text-muted-foreground/30 hover:text-info transition-colors duration-150 p-0.5 rounded cursor-pointer"
+          aria-label="Helpful response"
+        >
+          <Icon name="ThumbsUp" size="xs" />
+        </button>
+        <button
+          onClick={() => handleFeedback("negative")}
+          disabled={state !== "idle"}
+          className="text-muted-foreground/30 hover:text-info transition-colors duration-150 p-0.5 rounded cursor-pointer"
+          aria-label="Not helpful response"
+        >
+          <Icon name="ThumbsDown" size="xs" />
+        </button>
+      </div>
+      <span
+        className={cn(
+          "absolute left-0 text-xs text-muted-foreground transition-opacity duration-300",
+          showThanks ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+      >
+        Thank you for sharing your feedback
+      </span>
+    </div>
+  );
+}