From 0983e3331ffb502ce7dcda246ea9da1cb286cf7a Mon Sep 17 00:00:00 2001
From: Dishen <44216194+DishenWang2023@users.noreply.github.com>
Date: Mon, 9 Oct 2023 10:07:48 -0500
Subject: [PATCH] DH-4718 [ai][admin-console]  add frontend analytics (#176)

---
 apps/ai/clients/admin-console/.env.example    |  6 ++-
 apps/ai/clients/admin-console/package.json    |  1 +
 apps/ai/clients/admin-console/pnpm-lock.yaml  | 13 +++++
 .../src/components/hoc/WithAnalytics.tsx      | 47 +++++++++++++++++++
 .../src/components/query/workspace.tsx        |  7 ++-
 apps/ai/clients/admin-console/src/config.ts   |  2 +
 .../clients/admin-console/src/pages/_app.tsx  | 15 ++++--
 7 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 apps/ai/clients/admin-console/src/components/hoc/WithAnalytics.tsx

diff --git a/apps/ai/clients/admin-console/.env.example b/apps/ai/clients/admin-console/.env.example
index 47063360..95d49cfc 100644
--- a/apps/ai/clients/admin-console/.env.example
+++ b/apps/ai/clients/admin-console/.env.example
@@ -8,4 +8,8 @@ AUTH0_BASE_URL='http://localhost:3000'
 AUTH0_SCOPE='openid profile email offline_access'
 AUTH0_API_AUDIENCE='https://hi-george.us.auth0.com/api/v2/'
 AUTH0_CLIENT_ID=
-AUTH0_CLIENT_SECRET=
\ No newline at end of file
+AUTH0_CLIENT_SECRET=
+
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST="https://app.posthog.com"
+NODE_ENV="development"
\ No newline at end of file
diff --git a/apps/ai/clients/admin-console/package.json b/apps/ai/clients/admin-console/package.json
index 5fbba290..154a6cf9 100644
--- a/apps/ai/clients/admin-console/package.json
+++ b/apps/ai/clients/admin-console/package.json
@@ -40,6 +40,7 @@
     "monaco-editor": "^0.40.0",
     "next": "13.4.10",
     "postcss": "8.4.26",
+    "posthog-js": "^1.81.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",
diff --git a/apps/ai/clients/admin-console/pnpm-lock.yaml b/apps/ai/clients/admin-console/pnpm-lock.yaml
index 064fe89d..a65cbc41 100644
--- a/apps/ai/clients/admin-console/pnpm-lock.yaml
+++ b/apps/ai/clients/admin-console/pnpm-lock.yaml
@@ -89,6 +89,9 @@ dependencies:
   postcss:
     specifier: 8.4.26
     version: 8.4.26
+  posthog-js:
+    specifier: ^1.81.1
+    version: 1.81.1
   react:
     specifier: 18.2.0
     version: 18.2.0
@@ -3166,6 +3169,10 @@ packages:
       bser: 2.1.1
     dev: true
 
+  /fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4759,6 +4766,12 @@ packages:
       source-map-js: 1.0.2
     dev: false
 
+  /posthog-js@1.81.1:
+    resolution: {integrity: sha512-pQfG9ZGVn3R7Uh1cC/S02trZ6u4TOLs1NhZG3WiNrqMKDA8MJQjZ/PqdkLO0/BeozRBfIbON6pw3xfOIneIclg==}
+    dependencies:
+      fflate: 0.4.8
+    dev: false
+
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
diff --git a/apps/ai/clients/admin-console/src/components/hoc/WithAnalytics.tsx b/apps/ai/clients/admin-console/src/components/hoc/WithAnalytics.tsx
new file mode 100644
index 00000000..fd00ad85
--- /dev/null
+++ b/apps/ai/clients/admin-console/src/components/hoc/WithAnalytics.tsx
@@ -0,0 +1,47 @@
+import { posthog } from 'posthog-js'
+import { useUser } from '@auth0/nextjs-auth0/client'
+import { useRouter } from 'next/router'
+import { FC, ReactNode, useEffect } from 'react'
+import { User } from '@/models/api'
+import { PostHogProvider } from 'posthog-js/react'
+import { POSTHOG_HOST, POSTHOG_KEY } from '@/config'
+
+type WithAnalyticsProps = {
+  children: ReactNode
+}
+
+const WithAnalytics: FC<WithAnalyticsProps> = ({ children }) => {
+  const router = useRouter()
+  const { user: authUser, error } = useUser()
+  const user = authUser as User
+
+  // Check that PostHog is client-side (used to handle Next.js SSR)
+  if (typeof window !== 'undefined') {
+    posthog.init(POSTHOG_KEY || '', {
+      api_host: POSTHOG_HOST || 'https://app.posthog.com',
+      // Enable debug mode in development
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') posthog.debug()
+      },
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+    })
+  }
+
+  useEffect(() => {
+    if (error) {
+      console.error('Error fetching user:', error)
+      return
+    }
+    if (user && user.email) {
+      posthog.identify(user.email, {
+        email: user.email,
+        name: user.name,
+        organization_name: user.organization.name,
+      })
+    }
+  }, [user, error, router])
+
+  return <PostHogProvider>{children}</PostHogProvider>
+}
+
+export default WithAnalytics
diff --git a/apps/ai/clients/admin-console/src/components/query/workspace.tsx b/apps/ai/clients/admin-console/src/components/query/workspace.tsx
index 5f03e914..f0bdcf3e 100644
--- a/apps/ai/clients/admin-console/src/components/query/workspace.tsx
+++ b/apps/ai/clients/admin-console/src/components/query/workspace.tsx
@@ -57,6 +57,7 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
   onPatchQuery,
 }) => {
   const {
+    id,
     question,
     question_date,
     response,
@@ -186,7 +187,11 @@ const QueryWorkspace: FC<QueryWorkspaceProps> = ({
 
   return (
     <>
-      <div className="grow flex flex-col gap-5">
+      <div
+        className="grow flex flex-col gap-5"
+        data-ph-capture-attribute-query_id={id}
+        data-ph-capture-attribute-asker={username}
+      >
         <div id="header" className="flex justify-between gap-3">
           <QueryQuestion {...{ username, question, questionDate }} />
           <div className="flex items-center self-start gap-5">
diff --git a/apps/ai/clients/admin-console/src/config.ts b/apps/ai/clients/admin-console/src/config.ts
index 8d50d995..76ae88d5 100644
--- a/apps/ai/clients/admin-console/src/config.ts
+++ b/apps/ai/clients/admin-console/src/config.ts
@@ -6,3 +6,5 @@ export const AUTH = {
   audience: process.env.AUTH0_API_AUDIENCE,
   scope: process.env.AUTH0_SCOPE,
 }
+export const POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY
+export const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST
diff --git a/apps/ai/clients/admin-console/src/pages/_app.tsx b/apps/ai/clients/admin-console/src/pages/_app.tsx
index fbe79fc5..b503494b 100644
--- a/apps/ai/clients/admin-console/src/pages/_app.tsx
+++ b/apps/ai/clients/admin-console/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import type { AppProps } from 'next/app'
 import { Lato, Source_Code_Pro } from 'next/font/google'
 import { FC, ReactNode } from 'react'
 import { SWRConfig } from 'swr'
+import WithAnalytics from '@/components/hoc/WithAnalytics'
 
 const sourceCode = Source_Code_Pro({
   subsets: ['latin'],
@@ -38,11 +39,15 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <UserProvider>
       <AuthProvider>
-        <SWRConfigWithAuth>
-          <div className={cn(lato.variable, sourceCode.variable, 'font-lato')}>
-            <Component {...pageProps} />
-          </div>
-        </SWRConfigWithAuth>
+        <WithAnalytics>
+          <SWRConfigWithAuth>
+            <div
+              className={cn(lato.variable, sourceCode.variable, 'font-lato')}
+            >
+              <Component {...pageProps} />
+            </div>
+          </SWRConfigWithAuth>
+        </WithAnalytics>
       </AuthProvider>
     </UserProvider>
   )