fix: add GA

Author: Holybasil

src/components/AIModal/InitialPanel.tsx

@@ -1,3 +1,4 @@
+import { sendGAEvent } from "@next/third-parties/google"
 import { sampleSize } from "lodash"
 import Image from "next/image"
 import { useEffect, useState } from "react"
@@ -20,6 +21,14 @@ const InitialPanel = props => {
     }
   }, [aiModalVisible])
 
+  const handleClickDefaultQuestion = (question: string) => {
+    onChat(question)
+
+    sendGAEvent("event", "click_ai_default_question", {
+      label: question,
+    })
+  }
+
   return (
     <Stack
       direction="column"
@@ -49,7 +58,7 @@ const InitialPanel = props => {
             mb: "1.6rem",
             cursor: "pointer",
           }}
-          onClick={() => onChat(item)}
+          onClick={() => handleClickDefaultQuestion(item)}
         >
           <EnterSvg></EnterSvg>
           <Typography sx={{ fontSize: "1.6rem", lineHeight: "2.4rem", flex: 1, cursor: "inherit", textAlign: "left" }}>{item}</Typography>

src/components/AIModal/MessagePanel.tsx

@@ -1,3 +1,4 @@
+import { sendGAEvent } from "@next/third-parties/google"
 import clsx from "clsx"
 import { useEffect, useRef, useState } from "react"
 
@@ -18,7 +19,7 @@ const MessagePanel = props => {
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" })
-  }, [data])
+  }, [data[data.length - 1]?.text])
 
   if (!data || data.length === 0) {
     return null
@@ -27,11 +28,27 @@ const MessagePanel = props => {
   const handleThumbUp = id => {
     setFeedbackAlertVisible(true)
     onUpdateData({ id, feedback: "good" })
+
+    const messageIndex = data.findIndex(message => message.id === id)
+
+    sendGAEvent("event", "click_ai_feedback", {
+      label: data[messageIndex - 1].text,
+      id,
+      feedback: "good",
+    })
   }
 
   const handleThumbDown = id => {
     setFeedbackAlertVisible(true)
     onUpdateData({ id, feedback: "bad" })
+
+    const messageIndex = data.findIndex(message => message.id === id)
+
+    sendGAEvent("event", "click_ai_feedback", {
+      label: data[messageIndex - 1].text,
+      id,
+      feedback: "bad",
+    })
   }
   return (
     <Box
@@ -68,7 +85,7 @@ const MessagePanel = props => {
       <div ref={bottomRef}></div>
 
       <Box sx={{ position: "absolute", top: "2.4rem", left: "50%", transform: "translateX(-50%)" }}>
-        <FeedbackAlert open={feedbackAlertVisible} duration={3e3} onClose={() => setFeedbackAlertVisible(false)}>
+        <FeedbackAlert open={feedbackAlertVisible} duration={5e3} onClose={() => setFeedbackAlertVisible(false)}>
           Thanks for your feedback!
         </FeedbackAlert>
       </Box>

src/components/AIModal/actions.ts

@@ -22,6 +22,9 @@ export const chatWithAI = async ({ message, prevId }: { message: string; prevId?
     input: input as InputMessage[],
     previous_response_id: prevId ?? null,
     stream: true,
+    metadata: {
+      env: process.env.NEXT_PUBLIC_SCROLL_ENVIRONMENT,
+    },
   })
 
   return response.toReadableStream()

src/components/Header/AskAI.tsx

@@ -1,16 +1,33 @@
+import { sendGAEvent } from "@next/third-parties/google"
+import { useEffect, useRef } from "react"
+
 import { ButtonBase } from "@mui/material"
 
 import useGlobalStore from "@/stores/globalStore"
 
 const AskAI = props => {
   const { isMobile } = props
   const { aiModalVisible, changeAIModalVisible } = useGlobalStore()
+  const aiDurationRef = useRef<number>(null)
+
+  useEffect(() => {
+    if (aiModalVisible) {
+      aiDurationRef.current = Date.now()
+    } else {
+      if (aiDurationRef.current) {
+        const duration = Date.now() - aiDurationRef.current
+        sendGAEvent("event", "ai_modal_duration", { duration })
+        aiDurationRef.current = null // reset the start time
+      }
+    }
+  }, [aiModalVisible])
 
   const handleToggleAIModal = () => {
     if (aiModalVisible) {
       changeAIModalVisible(false)
     } else {
       changeAIModalVisible(true)
+      sendGAEvent("event", "click_ask_ai")
     }
   }