chore(compass-assistant): add feedback submission and telemetry COMPASS-9608

Author: gagik

package-lock.json

@@ -247,6 +247,7 @@ export const runAIPipelineGeneration = (
     track(
       'AI Prompt Submitted',
       () => ({
+        source: 'natural language query' as const,
         editor_view_type,
         user_input_length: userInput.length,
         request_id: requestId,

packages/compass-aggregations/src/modules/pipeline-builder/pipeline-ai.ts

@@ -53,6 +53,7 @@
     "@mongodb-js/atlas-service": "^0.56.0",
     "@mongodb-js/compass-app-registry": "^9.4.20",
     "@mongodb-js/compass-components": "^1.49.0",
+    "@mongodb-js/compass-telemetry": "^1.14.0",
     "@mongodb-js/connection-info": "^0.17.1",
     "@mongodb-js/compass-logging": "^1.7.12",
     "mongodb-connection-string-url": "^3.0.1",

packages/compass-assistant/package.json

@@ -11,16 +11,6 @@ import { createMockChat } from '../test/utils';
 import type { AssistantMessage } from './compass-assistant-provider';
 
 describe('AssistantChat', function () {
-  let originalScrollTo: typeof Element.prototype.scrollTo;
-  // Mock scrollTo method for DOM elements to prevent test failures
-  before(function () {
-    originalScrollTo = Element.prototype.scrollTo.bind(Element.prototype);
-    Element.prototype.scrollTo = () => {};
-  });
-  after(function () {
-    Element.prototype.scrollTo = originalScrollTo;
-  });
-
   const mockMessages: AssistantMessage[] = [
     {
       id: 'user',
@@ -41,8 +31,9 @@ describe('AssistantChat', function () {
 
   function renderWithChat(messages: AssistantMessage[]) {
     const chat = createMockChat({ messages });
+    const result = render(<AssistantChat chat={chat} />);
     return {
-      result: render(<AssistantChat chat={chat} />),
+      result,
       chat,
     };
   }
@@ -131,8 +122,9 @@ describe('AssistantChat', function () {
     );
   });
 
-  it('calls sendMessage when form is submitted', function () {
-    const { chat } = renderWithChat([]);
+  it('calls sendMessage when form is submitted', async function () {
+    const { chat, result } = renderWithChat([]);
+    const { track } = result;
     const inputField = screen.getByPlaceholderText(
       'Ask MongoDB Assistant a question'
     );
@@ -143,6 +135,12 @@ describe('AssistantChat', function () {
 
     expect(chat.sendMessage.calledWith({ text: 'What is aggregation?' })).to.be
       .true;
+
+    await waitFor(() => {
+      expect(track).to.have.been.calledWith('Assistant Prompt Submitted', {
+        user_input_length: 'What is aggregation?'.length,
+      });
+    });
   });
 
   it('clears input field after successful submission', function () {
@@ -160,8 +158,9 @@ describe('AssistantChat', function () {
     expect(inputField.value).to.equal('');
   });
 
-  it('trims whitespace from input before sending', function () {
-    const { chat } = renderWithChat([]);
+  it('trims whitespace from input before sending', async function () {
+    const { chat, result } = renderWithChat([]);
+    const { track } = result;
 
     const inputField = screen.getByPlaceholderText(
       'Ask MongoDB Assistant a question'
@@ -172,6 +171,12 @@ describe('AssistantChat', function () {
 
     expect(chat.sendMessage.calledWith({ text: 'What is sharding?' })).to.be
       .true;
+
+    await waitFor(() => {
+      expect(track).to.have.been.calledWith('Assistant Prompt Submitted', {
+        user_input_length: 'What is sharding?'.length,
+      });
+    });
   });
 
   it('does not call sendMessage when input is empty or whitespace-only', function () {
@@ -272,4 +277,143 @@ describe('AssistantChat', function () {
     expect(screen.queryByText('Another part that should not display.')).to.not
       .exist;
   });
+
+  describe('feedback buttons', function () {
+    it('shows feedback buttons only for assistant messages', function () {
+      renderWithChat(mockMessages);
+
+      const userMessage = screen.getByTestId('assistant-message-user');
+      const assistantMessage = screen.getByTestId(
+        'assistant-message-assistant'
+      );
+
+      // User messages should not have feedback buttons
+      expect(userMessage.querySelector('[aria-label="Thumbs Up Icon"]')).to.not
+        .exist;
+      expect(userMessage.querySelector('[aria-label="Thumbs Down Icon"]')).to
+        .not.exist;
+
+      // Assistant messages should have feedback buttons
+      expect(assistantMessage.querySelector('[aria-label="Thumbs Up Icon"]')).to
+        .exist;
+      expect(assistantMessage.querySelector('[aria-label="Thumbs Down Icon"]'))
+        .to.exist;
+    });
+
+    it('tracks positive feedback when thumbs up is clicked', async function () {
+      const { result } = renderWithChat(mockMessages);
+      const { track } = result;
+
+      const assistantMessage = screen.getByTestId(
+        'assistant-message-assistant'
+      );
+
+      // Find and click the thumbs up button
+      const thumbsUpButton = assistantMessage.querySelector(
+        '[aria-label="Thumbs Up Icon"]'
+      ) as HTMLElement;
+
+      userEvent.click(thumbsUpButton);
+
+      await waitFor(() => {
+        expect(track).to.have.callCount(1);
+        expect(track).to.have.been.calledWith('Assistant Feedback Submitted', {
+          feedback: 'positive',
+          text: undefined,
+          request_id: null,
+        });
+      });
+    });
+
+    it('tracks negative feedback when thumbs down is clicked', async function () {
+      const { result } = renderWithChat(mockMessages);
+      const { track } = result;
+
+      const assistantMessage = screen.getByTestId(
+        'assistant-message-assistant'
+      );
+
+      // Find and click the thumbs down button
+      const thumbsDownButton = assistantMessage.querySelector(
+        '[aria-label="Thumbs Down Icon"]'
+      ) as HTMLElement;
+
+      userEvent.click(thumbsDownButton);
+
+      await waitFor(() => {
+        expect(track).to.have.callCount(1);
+
+        expect(track).to.have.been.calledWith('Assistant Feedback Submitted', {
+          feedback: 'negative',
+          text: undefined,
+          request_id: null,
+        });
+      });
+    });
+
+    it('tracks detailed feedback when feedback text is submitted', async function () {
+      const { result } = renderWithChat(mockMessages);
+      const { track } = result;
+
+      const assistantMessage = screen.getByTestId(
+        'assistant-message-assistant'
+      );
+
+      // First click thumbs down to potentially open feedback form
+      const thumbsDownButton = assistantMessage.querySelector(
+        '[aria-label="Thumbs Down Icon"]'
+      ) as HTMLElement;
+
+      userEvent.click(thumbsDownButton);
+
+      // Look for feedback text area (the exact implementation depends on LeafyGreen)
+      const feedbackTextArea = screen.getByTestId(
+        'lg-chat-message_actions-feedback_textarea'
+      );
+
+      userEvent.type(feedbackTextArea, 'This response was not helpful');
+
+      // Look for submit button
+      const submitButton = screen.getByText('Submit');
+
+      userEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(track).to.have.callCount(2);
+
+        expect(track).to.have.been.calledWith('Assistant Feedback Submitted', {
+          feedback: 'negative',
+          text: undefined,
+          request_id: null,
+        });
+
+        expect(track).to.have.been.calledWith('Assistant Feedback Submitted', {
+          feedback: 'negative',
+          text: 'This response was not helpful',
+          request_id: null,
+        });
+      });
+    });
+
+    it('does not show feedback buttons when there are no assistant messages', function () {
+      const userOnlyMessages: AssistantMessage[] = [
+        {
+          id: 'user1',
+          role: 'user',
+          parts: [{ type: 'text', text: 'Hello!' }],
+        },
+        {
+          id: 'user2',
+          role: 'user',
+          parts: [{ type: 'text', text: 'How are you?' }],
+        },
+      ];
+
+      renderWithChat(userOnlyMessages);
+
+      // Should not find any feedback buttons in the entire component
+      expect(screen.queryByLabelText('Thumbs Up Icon')).to.not.exist;
+      expect(screen.queryByLabelText('Thumbs Down Icon')).to.not.exist;
+    });
+  });
 });

packages/compass-assistant/src/assistant-chat.spec.tsx

@@ -7,16 +7,19 @@ import {
   LgChatLeafygreenChatProvider,
   LgChatMessage,
   LgChatMessageFeed,
+  LgChatMessageActions,
   LgChatInputBar,
   spacing,
   css,
   Banner,
 } from '@mongodb-js/compass-components';
+import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
 const { ChatWindow } = LgChatChatWindow;
 const { LeafyGreenChatProvider, Variant } = LgChatLeafygreenChatProvider;
 const { Message } = LgChatMessage;
 const { MessageFeed } = LgChatMessageFeed;
+const { MessageActions } = LgChatMessageActions;
 const { InputBar } = LgChatInputBar;
 
 interface AssistantChatProps {
@@ -52,6 +55,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   const { messages, sendMessage, status, error, clearError } = useChat({
     chat,
   });
+  const track = useTelemetry();
 
   // Transform AI SDK messages to LeafyGreen chat format
   const lgMessages = messages.map((message) => ({
@@ -70,10 +74,43 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
     (messageBody: string) => {
       const trimmedMessageBody = messageBody.trim();
       if (trimmedMessageBody) {
+        track('Assistant Prompt Submitted', {
+          user_input_length: trimmedMessageBody.length,
+        });
         void sendMessage({ text: trimmedMessageBody });
       }
     },
-    [sendMessage]
+    [sendMessage, track]
+  );
+
+  const handleFeedback = useCallback(
+    (
+      event,
+      state:
+        | {
+            feedback: string;
+            rating: string;
+          }
+        | {
+            rating: string;
+          }
+        | undefined
+    ) => {
+      if (!state) {
+        return;
+      }
+      const { rating } = state;
+      const textFeedback = 'feedback' in state ? state.feedback : undefined;
+      const feedback: 'positive' | 'negative' =
+        rating === 'liked' ? 'positive' : 'negative';
+
+      track('Assistant Feedback Submitted', () => ({
+        feedback,
+        text: textFeedback,
+        request_id: null,
+      }));
+    },
+    [track]
   );
 
   return (
@@ -94,7 +131,14 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                 sourceType="markdown"
                 {...messageFields}
                 data-testid={`assistant-message-${messageFields.id}`}
-              />
+              >
+                {messageFields.isSender === false && (
+                  <MessageActions
+                    onRatingChange={handleFeedback}
+                    onSubmitFeedback={handleFeedback}
+                  />
+                )}
+              </Message>
             ))}
             {status === 'submitted' && (
               <Message

packages/compass-assistant/src/assistant-chat.tsx

@@ -178,6 +178,7 @@ export const runAIQuery = (
     track(
       'AI Prompt Submitted',
       () => ({
+        source: 'natural language query' as const,
         editor_view_type: 'find' as const,
         user_input_length: userInput.length,
         has_sample_documents: provideSampleDocuments,