Add metric report for thumbup and thumbdown buttons in chat

CHANGELOG.md

@@ -34,4 +34,5 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Use smaller and compressed variants of buttons and form components ([#250](https://github.com/opensearch-project/dashboards-assistant/pull/250))
 - Support insight with RAG in alert analysis assistant and refine the UX ([#266](https://github.com/opensearch-project/dashboards-assistant/pull/266))
 - Add assistant enabled capabilities to control rendering component([#267](https://github.com/opensearch-project/dashboards-assistant/pull/267))
-- Add data to summary API([#295](https://github.com/opensearch-project/dashboards-assistant/pull/295))
+- Add data to summary API([#295](https://github.com/opensearch-project/dashboards-assistant/pull/295))
+- Report click metrics for thumbup/thumbdown buttons in chat ([#263](https://github.com/opensearch-project/dashboards-assistant/pull/263))

opensearch_dashboards.json

@@ -17,7 +17,9 @@
   ],
   "optionalPlugins": [
     "dataSource",
-    "dataSourceManagement"
+    "dataSourceManagement",
+    "usageCollection",
+    "telemetry"
   ],
   "requiredBundles": [],
   "configPath": [

package.json

@@ -22,16 +22,17 @@
     "csv-parser": "^3.0.0",
     "dompurify": "^3.0.11",
     "jsdom": "^21.1.2",
-    "postinstall": "^0.7.4"
+    "postinstall": "^0.7.4",
+    "uuid": "3.3.2"
   },
   "devDependencies": {
     "@types/autosize": "^4.0.1",
     "@types/dompurify": "^3.0.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jsdom": "^21.1.2",
-    "@types/react-test-renderer": "^16.9.1",
+    "@types/react-test-renderer": "^18.0.0",
     "eslint": "^6.8.0",
-    "husky": "^8.0.0",
+    "husky": "^8.0.3",
     "jest-dom": "^4.0.0",
     "lint-staged": "^13.1.0",
     "ts-jest": "^29.1.0"
@@ -44,4 +45,4 @@
     "braces": "^3.0.3",
     "micromatch": "^4.0.8"
   }
-}
+}

public/tabs/chat/messages/message_bubble.test.tsx

@@ -10,10 +10,12 @@ import { MessageBubble } from './message_bubble';
 import { IOutput } from '../../../../common/types/chat_saved_object_attributes';
 import * as useFeedbackHookExports from '../../../hooks/use_feed_back';
 import * as useChatActionsExports from '../../../hooks/use_chat_actions';
+import * as coreHookExports from '../../../contexts/core_context';
 
 describe('<MessageBubble />', () => {
   const sendFeedbackMock = jest.fn();
   const executeActionMock = jest.fn();
+  const reportUiStatsMock = jest.fn();
 
   beforeEach(() => {
     jest
@@ -28,6 +30,19 @@ describe('<MessageBubble />', () => {
       abortAction: jest.fn(),
       regenerate: jest.fn(),
     });
+
+    jest.spyOn(coreHookExports, 'useCore').mockReturnValue({
+      services: {
+        setupDeps: {
+          usageCollection: {
+            reportUiStats: reportUiStatsMock,
+            METRIC_TYPE: {
+              CLICK: 'click',
+            },
+          },
+        },
+      },
+    });
   });
 
   afterEach(() => {
@@ -209,6 +224,11 @@ describe('<MessageBubble />', () => {
     render(<MessageBubble showActionBar={true} message={message} />);
     fireEvent.click(screen.getByLabelText('feedback thumbs up'));
     expect(sendFeedbackMock).toHaveBeenCalledWith(message, true);
+    expect(reportUiStatsMock).toHaveBeenCalledWith(
+      'chat',
+      'click',
+      expect.stringMatching(/^thumbup/)
+    );
   });
 
   it('should send thumbs down feedback', () => {
@@ -220,6 +240,11 @@ describe('<MessageBubble />', () => {
     render(<MessageBubble showActionBar={true} message={message} />);
     fireEvent.click(screen.getByLabelText('feedback thumbs down'));
     expect(sendFeedbackMock).toHaveBeenCalledWith(message, false);
+    expect(reportUiStatsMock).toHaveBeenCalledWith(
+      'chat',
+      'click',
+      expect.stringMatching(/^thumbdown/)
+    );
   });
 
   it('should not send feedback if message has already rated', () => {

public/tabs/chat/messages/message_bubble.tsx

@@ -19,6 +19,7 @@ import React, { useCallback } from 'react';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import cx from 'classnames';
 // TODO: Replace with getChrome().logos.Chat.url
+import { v4 as uuidv4 } from 'uuid';
 import { useChatActions } from '../../../hooks';
 import chatIcon from '../../../assets/chat.svg';
 import {
@@ -28,6 +29,7 @@ import {
   Interaction,
 } from '../../../../common/types/chat_saved_object_attributes';
 import { useFeedback } from '../../../hooks/use_feed_back';
+import { useCore } from '../../../contexts';
 
 type MessageBubbleProps = {
   showActionBar: boolean;
@@ -57,13 +59,26 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
     props.message.type === 'output' &&
     props.message.contentType === 'markdown';
 
+  const usageCollection = useCore()?.services?.setupDeps?.usageCollection || null;
+
+  const reportMetric = usageCollection
+    ? (metric: string) => {
+        usageCollection.reportUiStats(
+          `chat`,
+          usageCollection.METRIC_TYPE.CLICK,
+          metric + '-' + uuidv4()
+        );
+      }
+    : () => {};
+
   const feedbackOutput = useCallback(
     (correct: boolean, result: boolean | undefined) => {
       // No repeated feedback.
       if (result !== undefined || !('message' in props)) {
         return;
       }
       sendFeedback(props.message as IOutput, correct);
+      reportMetric(correct ? 'thumbup' : 'thumbdown');
     },
     [props, sendFeedback]
   );