feat(compass-assistant): track opening and closing the drawer sections COMPASS-9884

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

@@ -18,10 +18,12 @@ import {
   LgChatChatDisclaimer,
   Link,
   Icon,
+  useDrawerState,
 } from '@mongodb-js/compass-components';
 import { ConfirmationMessage } from './confirmation-message';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 import { NON_GENUINE_WARNING_MESSAGE } from '../preset-messages';
+import { ASSISTANT_DRAWER_ID } from '../compass-assistant-provider';
 
 const { DisclaimerText } = LgChatChatDisclaimer;
 const { ChatWindow } = LgChatChatWindow;
@@ -204,6 +206,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   const track = useTelemetry();
   const darkMode = useDarkMode();
 
+  const { currentDrawerTab } = useDrawerState();
   const { ensureOptInAndSend } = useContext(AssistantActionsContext);
   const { messages, status, error, clearError, setMessages } = useChat({
     chat,
@@ -326,9 +329,31 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
         void ensureOptInAndSend?.(undefined, {}, () => {});
       }
     },
-    [ensureOptInAndSend, setMessages]
+    [ensureOptInAndSend, setMessages, track]
   );
 
+  const prevCurrentDrawerTabRef = React.useRef<string | null>(null);
+
+  useEffect(() => {
+    if (currentDrawerTab === prevCurrentDrawerTabRef.current) {
+      // ignore unless it changed
+      return;
+    }
+
+    if (currentDrawerTab === ASSISTANT_DRAWER_ID) {
+      track('Assistant Opened', {});
+    }
+
+    if (
+      currentDrawerTab !== ASSISTANT_DRAWER_ID &&
+      prevCurrentDrawerTabRef.current === ASSISTANT_DRAWER_ID
+    ) {
+      track('Assistant Closed', {});
+    }
+
+    prevCurrentDrawerTabRef.current = currentDrawerTab;
+  }, [currentDrawerTab, track]);
+
   return (
     <div
       data-testid="assistant-chat"

packages/compass-components/src/components/drawer-portal.tsx

@@ -62,6 +62,16 @@ const DrawerOpenStateContext =
 const DrawerSetOpenStateContext =
   React.createContext<DrawerSetOpenStateContextValue>(() => {});
 
+type DrawerCurrentTabStateContextValue = string | null;
+
+type DrawerSetCurrentTabContextValue = (currentTab: string | null) => void;
+
+const DrawerCurrentTabStateContext =
+  React.createContext<DrawerCurrentTabStateContextValue>(null);
+
+const DrawerSetCurrentTabContext =
+  React.createContext<DrawerSetCurrentTabContextValue>(() => {});
+
 const DrawerActionsContext = React.createContext<DrawerActionsContextValue>({
   current: {
     openDrawer: () => undefined,
@@ -110,6 +120,8 @@ export const DrawerContentProvider: React.FunctionComponent = ({
   const [drawerState, setDrawerState] = useState<DrawerSectionProps[]>([]);
   const [drawerOpenState, setDrawerOpenState] =
     useState<DrawerOpenStateContextValue>(false);
+  const [drawerCurrentTab, setDrawerCurrentTab] =
+    useState<DrawerCurrentTabStateContextValue>(null);
   const drawerActions = useRef({
     openDrawer: () => undefined,
     closeDrawer: () => undefined,
@@ -139,9 +151,13 @@ export const DrawerContentProvider: React.FunctionComponent = ({
     <DrawerStateContext.Provider value={drawerState}>
       <DrawerOpenStateContext.Provider value={drawerOpenState}>
         <DrawerSetOpenStateContext.Provider value={setDrawerOpenState}>
-          <DrawerActionsContext.Provider value={drawerActions}>
-            {children}
-          </DrawerActionsContext.Provider>
+          <DrawerCurrentTabStateContext.Provider value={drawerCurrentTab}>
+            <DrawerSetCurrentTabContext.Provider value={setDrawerCurrentTab}>
+              <DrawerActionsContext.Provider value={drawerActions}>
+                {children}
+              </DrawerActionsContext.Provider>
+            </DrawerSetCurrentTabContext.Provider>
+          </DrawerCurrentTabStateContext.Provider>
         </DrawerSetOpenStateContext.Provider>
       </DrawerOpenStateContext.Provider>
     </DrawerStateContext.Provider>
@@ -152,11 +168,20 @@ const DrawerContextGrabber: React.FunctionComponent = ({ children }) => {
   const drawerToolbarContext = useDrawerToolbarContext();
   const actions = useContext(DrawerActionsContext);
   const openStateSetter = useContext(DrawerSetOpenStateContext);
+  const currentTabSetter = useContext(DrawerSetCurrentTabContext);
   actions.current.openDrawer = drawerToolbarContext.openDrawer;
   actions.current.closeDrawer = drawerToolbarContext.closeDrawer;
+
   useEffect(() => {
     openStateSetter(drawerToolbarContext.isDrawerOpen);
   }, [drawerToolbarContext.isDrawerOpen, openStateSetter]);
+
+  useEffect(() => {
+    const currentTab =
+      drawerToolbarContext.getActiveDrawerContent()?.id ?? null;
+    currentTabSetter(currentTab);
+  }, [drawerToolbarContext, currentTabSetter]);
+
   return <>{children}</>;
 };
 
@@ -463,12 +488,19 @@ export function useDrawerActions() {
 
 export const useDrawerState = () => {
   const drawerOpenStateContext = useContext(DrawerOpenStateContext);
+  const drawerCurrentTabStateContext = useContext(DrawerCurrentTabStateContext);
   const drawerState = useContext(DrawerStateContext);
+
+  const isDrawerOpen =
+    drawerOpenStateContext &&
+    // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
+    drawerState.length > 0;
+
+  const currentDrawerTab = isDrawerOpen ? drawerCurrentTabStateContext : null;
+
   return {
-    isDrawerOpen:
-      drawerOpenStateContext &&
-      // the second check is a workaround, because LG doesn't set isDrawerOpen to false when it's empty
-      drawerState.length > 0,
+    isDrawerOpen,
+    currentDrawerTab,
   };
 };
 

packages/compass-telemetry/src/telemetry-events.ts

@@ -1458,6 +1458,30 @@ type IndexDroppedEvent = ConnectionScopedEvent<{
   };
 }>;
 
+/**
+ * This event is fired when user opens the assistant chat. Either by switching
+ * to it via the drawer toolbar or by opening the drawer and the first tab is
+ * the assistant.
+ *
+ * @category Gen AI
+ */
+type AssistantOpenedEvent = CommonEvent<{
+  name: 'Assistant Opened';
+  payload: Record<string, never>;
+}>;
+
+/**
+ * This event is fired when user closes the assistant chat. Either by switching
+ * to another tab via the drawer toolbar or by closing the drawer when the
+ * active tab is the assistant.
+ *
+ * @category Gen AI
+ */
+type AssistantClosedEvent = CommonEvent<{
+  name: 'Assistant Closed';
+  payload: Record<string, never>;
+}>;
+
 /**
  * This event is fired when user enters a prompt in the assistant chat
  * and hits "enter".
@@ -3116,6 +3140,8 @@ export type TelemetryEvent =
   | AggregationTimedOutEvent
   | AggregationUseCaseAddedEvent
   | AggregationUseCaseSavedEvent
+  | AssistantOpenedEvent
+  | AssistantClosedEvent
   | AssistantPromptSubmittedEvent
   | AssistantResponseFailedEvent
   | AssistantFeedbackSubmittedEvent