added usePostHogAg hook

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -1,6 +1,5 @@
 import {useState, useEffect, useMemo} from "react"
 import {useRouter} from "next/router"
-import {usePostHog} from "posthog-js/react"
 import {PlusOutlined} from "@ant-design/icons"
 import {Input, Modal, ConfigProvider, theme, Spin, Card, Button, notification, Divider} from "antd"
 import AppCard from "./AppCard"
@@ -12,7 +11,6 @@ import Welcome from "./Welcome"
 import {getApikeys, isAppNameInputValid, isDemo} from "@/lib/helpers/utils"
 import {
     createAndStartTemplate,
-    getProfile,
     getTemplates,
     removeApp,
     waitForAppToStart,
@@ -25,6 +23,7 @@ import {createUseStyles} from "react-jss"
 import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import CreateAppStatusModal from "./modals/CreateAppStatusModal"
+import {usePostHogAg} from "@/hooks/usePostHogAg"
 
 type StyleProps = {
     themeMode: "dark" | "light"
@@ -97,7 +96,7 @@ const timeout = isDemo() ? 60000 : 30000
 
 const AppSelector: React.FC = () => {
     const router = useRouter()
-    const posthog = usePostHog()
+    const posthog = usePostHogAg()
     const {appTheme} = useAppTheme()
     const classes = useStyles({themeMode: appTheme} as StyleProps)
     const [isCreateAppModalOpen, setIsCreateAppModalOpen] = useState(false)
@@ -120,7 +119,6 @@ const AppSelector: React.FC = () => {
         appId: undefined,
     })
 
-    const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true"
     const showCreateAppModal = async () => {
         setIsCreateAppModalOpen(true)
     }
@@ -210,16 +208,13 @@ const AppSelector: React.FC = () => {
                     setFetchingTemplate(false)
                 if (status === "success") {
                     mutate()
-
-                    if (trackingEnabled) {
-                        posthog.capture("app_deployment", {
-                            properties: {
-                                app_id: appId,
-                                environment: "UI",
-                                deployed_by: user?.id,
-                            },
-                        })
-                    }
+                    posthog.capture("app_deployment", {
+                        properties: {
+                            app_id: appId,
+                            environment: "UI",
+                            deployed_by: user?.id,
+                        },
+                    })
                 }
             },
         })

agenta-web/src/components/Playground/Views/ParametersView.tsx

@@ -1,13 +1,13 @@
 import {Environment, Parameter, Variant} from "@/lib/Types"
 import type {CollapseProps} from "antd"
-import {usePostHog} from "posthog-js/react"
 import {Button, Col, Collapse, Row, Space, Tooltip, message} from "antd"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import {ModelParameters, ObjectParameters, StringParameters} from "./ParametersCards"
 import PublishVariantModal from "./PublishVariantModal"
 import {removeVariant} from "@/lib/services/api"
 import {CloudUploadOutlined, DeleteOutlined, SaveOutlined} from "@ant-design/icons"
+import {usePostHogAg} from "@/hooks/usePostHogAg"
 
 interface Props {
     variant: Variant
@@ -71,7 +71,7 @@ const ParametersView: React.FC<Props> = ({
     tabID,
 }) => {
     const classes = useStyles()
-    const posthog = usePostHog()
+    const posthog = usePostHogAg()
     const [messageApi, contextHolder] = message.useMessage()
     const [isPublishModalOpen, setPublishModalOpen] = useState(false)
     const isVariantExisting = !!variant.variantId

agenta-web/src/components/Playground/Views/PublishVariantModal.tsx

@@ -1,9 +1,9 @@
+import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {Environment, Variant} from "@/lib/Types"
 import {fetchEnvironments, publishVariant} from "@/lib/services/api"
 import {Button, Checkbox, Modal, Space, Typography, message} from "antd"
 import type {CheckboxChangeEvent} from "antd/es/checkbox"
 import {useRouter} from "next/router"
-import {usePostHog} from "posthog-js/react"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
@@ -36,7 +36,7 @@ const PublishVariantModal: React.FC<Props> = ({
         setSelectedEnvs([])
     }
     const router = useRouter()
-    const posthog = usePostHog()
+    const posthog = usePostHogAg()
     const appId = router.query.app_id as string
 
     const [selectedEnvs, setSelectedEnvs] = useState<string[]>([])

agenta-web/src/contexts/profile.context.tsx

@@ -1,10 +1,10 @@
+import {usePostHogAg} from "@/hooks/usePostHogAg"
 import {useSession} from "@/hooks/useSession"
 import useStateCallback from "@/hooks/useStateCallback"
 import {isDemo} from "@/lib/helpers/utils"
 import {getOrgsList, getProfile} from "@/lib/services/api"
 import {Org, User} from "@/lib/Types"
 import {useRouter} from "next/router"
-import {usePostHog} from "posthog-js/react"
 import {
     PropsWithChildren,
     createContext,
@@ -55,7 +55,7 @@ const profileContextValues = {...initialValues}
 export const getProfileValues = () => profileContextValues
 
 const ProfileContextProvider: React.FC<PropsWithChildren> = ({children}) => {
-    const posthog = usePostHog()
+    const posthog = usePostHogAg()
     const router = useRouter()
     const [user, setUser] = useState<User | null>(null)
     const [orgs, setOrgs] = useState<Org[]>([])
@@ -67,7 +67,7 @@ const ProfileContextProvider: React.FC<PropsWithChildren> = ({children}) => {
         setLoading(true)
         Promise.all([getProfile(), getOrgsList()])
             .then(([profile, orgs]) => {
-                posthog.identify(isDemo() ? profile.data.email : profile.data.id)
+                posthog.identify()
                 setUser(profile.data)
                 setOrgs(orgs.data)
                 setSelectedOrg(

agenta-web/src/hooks/usePostHogAg.ts

@@ -0,0 +1,34 @@
+import {useProfileData} from "@/contexts/profile.context"
+import {isDemo} from "@/lib/helpers/utils"
+import {usePostHog} from "posthog-js/react"
+import {useLayoutEffect} from "react"
+
+export const usePostHogAg = () => {
+    const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true"
+    const {user} = useProfileData()
+    const posthog = usePostHog()
+
+    const _id = isDemo() ? user?.email : user?.id
+
+    const capture: typeof posthog.capture = (...args) => {
+        if (trackingEnabled && user?.id) {
+            posthog.capture(...args)
+        }
+    }
+
+    const identify: typeof posthog.identify = (id, ...args) => {
+        if (trackingEnabled && user?.id) {
+            posthog.identify(_id || id, ...args)
+        }
+    }
+
+    useLayoutEffect(() => {
+        if (!trackingEnabled) posthog.opt_out_capturing()
+    }, [trackingEnabled])
+
+    useLayoutEffect(() => {
+        if (posthog.get_distinct_id() !== _id) identify()
+    }, [user?.id])
+
+    return {...posthog, identify, capture}
+}