Added PostHog events to dev onboarding

Author: csansoon

apps/web/src/app/(onboarding)/onboarding/choice/page.tsx

@@ -12,7 +12,7 @@ import { ROUTES } from '$/services/routes'
 import { useHover } from '@latitude-data/web-ui/browser'
 import { cn } from '@latitude-data/web-ui/utils'
 
-type OnboardingChoice = 'scratch' | 'existing' | null
+type OnboardingChoice = 'product_engineer' | 'developer' | null
 
 function ChoiceCard({
   icon,
@@ -66,12 +66,12 @@ export default function OnboardingChoicePage() {
   })
 
   const handleStartFromScratch = useCallback(() => {
-    setOnboardingChoice('scratch')
+    setOnboardingChoice('product_engineer')
     router.push(ROUTES.onboarding.promptEngineering.pasteYourPrompt)
   }, [setOnboardingChoice, router])
 
   const handleExistingProject = useCallback(() => {
-    setOnboardingChoice('existing')
+    setOnboardingChoice('developer')
     router.push(ROUTES.onboarding.install)
   }, [setOnboardingChoice, router])
 

apps/web/src/app/(onboarding)/onboarding/install/_components/InviteDeveloperModal.tsx

@@ -15,6 +15,8 @@ import { Text } from '@latitude-data/web-ui/atoms/Text'
 import { TableSkeleton } from '@latitude-data/web-ui/molecules/TableSkeleton'
 import useUsers from '$/stores/users'
 import useCurrentWorkspace from '$/stores/currentWorkspace'
+import useLatitudeAction from '$/hooks/useLatitudeAction'
+import { publishEventAction } from '$/actions/events/publishEventAction'
 import { useCallback, useState } from 'react'
 
 function NewUserRow({
@@ -75,10 +77,17 @@ export default function InviteDeveloperModal({
 }) {
   const { data: workspace } = useCurrentWorkspace()
   const { data: users, isLoading, invite } = useUsers()
+  const { execute: publishEvent } = useLatitudeAction(publishEventAction)
 
   const onInviteUser = useCallback(
-    (name: string, email: string) => invite({ name, email }),
-    [invite],
+    (name: string, email: string) => {
+      invite({ name, email })
+      publishEvent({
+        eventType: 'onboardingUserInvited',
+        payload: { invitedEmail: email },
+      })
+    },
+    [invite, publishEvent],
   )
 
   return (

apps/web/src/app/(onboarding)/onboarding/install/_lib/OnboardingInstallProvider.tsx

@@ -51,7 +51,7 @@ const completion = await client.chat.completions.create({ ... });
   },
   {
     name: 'Anthropic',
-    icon: 'code',
+    icon: 'anthropic',
     autoInstrumentation: {
       import: "import * as Anthropic from '@anthropic-ai/sdk'",
       line: 'anthropic: Anthropic, // This enables automatic tracing for the Anthropic SDK',
@@ -67,7 +67,7 @@ const response = await client.messages.create({ ... });
   },
   {
     name: 'Azure OpenAI',
-    icon: 'code',
+    icon: 'openai',
     autoInstrumentation: {
       import: "import OpenAI from 'openai'",
       line: 'openai: OpenAI, // This enables automatic tracing for the Azure OpenAI SDK',
@@ -99,7 +99,7 @@ const response = await client.generate({ ... });
   },
   {
     name: 'Amazon Bedrock',
-    icon: 'code',
+    icon: 'amazonBedrock',
     autoInstrumentation: {
       import: "import * as Bedrock from '@aws-sdk/client-bedrock-runtime'",
       line: 'bedrock: Bedrock, // This enables automatic tracing for the Amazon Bedrock SDK',
@@ -134,7 +134,7 @@ const response = await client.generate({ ... });
   },
   {
     name: 'Vertex AI',
-    icon: 'code',
+    icon: 'googleVertex',
     autoInstrumentation: {
       import: "import * as VertexAI from '@google-cloud/vertexai'",
       line: 'vertexai: VertexAI, // This enables automatic tracing for the Google Vertex AI SDK',
@@ -151,7 +151,7 @@ const result = await model.generateContent({ ... });
   },
   {
     name: 'Google AI Platform',
-    icon: 'code',
+    icon: 'googleVertex',
     autoInstrumentation: {
       import: "import * as AIPlatform from '@google-cloud/aiplatform'",
       line: 'aiplatform: AIPlatform, // This enables automatic tracing for the Google AI Platform SDK',
@@ -225,7 +225,7 @@ const { text } = await generateText({
   },
   {
     name: 'Gemini',
-    icon: 'sparkles',
+    icon: 'googleGemini',
     manualInstrumentation: {
       completion: {
         imports: ["import { GoogleGenAI } from '@google/genai'"],

apps/web/src/app/(onboarding)/onboarding/install/frameworks.ts

@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { getOnboardingResources } from '$/data-access/onboarding'
 import { redirect } from 'next/navigation'
 import { ROUTES } from '$/services/routes'
-import { OnboardingInstallProvider } from './_lib/OnboardingInstallProvider'
+import { ProjectProvider } from '$/app/providers/ProjectProvider'
 
 export default async function OnboardingInstallLayout({
   children,
@@ -16,9 +16,5 @@ export default async function OnboardingInstallLayout({
     return redirect(ROUTES.onboarding.choice)
   }
 
-  return (
-    <OnboardingInstallProvider project={project}>
-      {children}
-    </OnboardingInstallProvider>
-  )
+  return <ProjectProvider project={project}>{children}</ProjectProvider>
 }

apps/web/src/app/(onboarding)/onboarding/install/layout.tsx

@@ -1,22 +1,23 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { Button } from '@latitude-data/web-ui/atoms/Button'
 import { Icon } from '@latitude-data/web-ui/atoms/Icons'
 import { Text } from '@latitude-data/web-ui/atoms/Text'
 import useLatitudeAction from '$/hooks/useLatitudeAction'
 import { skipOnboardingAction } from '$/actions/onboarding/skip'
+import { publishEventAction } from '$/actions/events/publishEventAction'
 import InviteDeveloperModal from './_components/InviteDeveloperModal'
 import {
   useLocalStorage,
   AppLocalStorage,
 } from '@latitude-data/web-ui/hooks/useLocalStorage'
 import useApiKeys from '$/stores/apiKeys'
-import { useOnboardingInstall } from './_lib/OnboardingInstallProvider'
 import { FrameworkDefinition, FRAMEWORKS } from './frameworks'
 import InstallationModal from './_components/InstallationModal'
 import { useHover } from '@latitude-data/web-ui/browser'
 import { cn } from '@latitude-data/web-ui/utils'
+import { useCurrentProject } from '$/app/providers/ProjectProvider'
 
 function FrameworkCard({
   framework,
@@ -58,6 +59,7 @@ export default function OnboardingInstallPage() {
   const [inviteModalOpen, setInviteModalOpen] = useState(false)
   const { execute: skipOnboarding, isPending: isSkipping } =
     useLatitudeAction(skipOnboardingAction)
+  const { execute: publishEvent } = useLatitudeAction(publishEventAction)
   const { setValue: setReplayOnboarding } = useLocalStorage<boolean>({
     key: AppLocalStorage.replayOnboarding,
     defaultValue: false,
@@ -66,8 +68,12 @@ export default function OnboardingInstallPage() {
   const [selectedFramework, setSelectedFramework] =
     useState<FrameworkDefinition | null>(null)
 
+  useEffect(() => {
+    publishEvent({ eventType: 'installOnboardingPageVisited' })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
   const { data: apiKeys } = useApiKeys()
-  const { project } = useOnboardingInstall()
+  const { project } = useCurrentProject()
 
   const firstApiKey = apiKeys?.[0]
 
@@ -102,14 +108,14 @@ export default function OnboardingInstallPage() {
         </div>
         <div className='flex items-center gap-3'>
           <Button
-            variant='outline'
             fancy
             onClick={onOpenInviteModal}
             iconProps={{ name: 'userRoundPlus', placement: 'left' }}
           >
             Invite developers
           </Button>
           <Button
+            variant='outline'
             fancy
             onClick={handleSkip}
             disabled={isSkipping}

apps/web/src/app/(onboarding)/onboarding/install/page.tsx

@@ -757,6 +757,23 @@ export type PasteYourPromptOnboardingCompleted = LatitudeEventGeneric<
   }
 >
 
+export type InstallOnboardingPageVisited = LatitudeEventGeneric<
+  'installOnboardingPageVisited',
+  {
+    workspaceId: number
+    userEmail: string
+  }
+>
+
+export type OnboardingUserInvited = LatitudeEventGeneric<
+  'onboardingUserInvited',
+  {
+    workspaceId: number
+    userEmail: string
+    invitedEmail: string
+  }
+>
+
 export type IssueCreatedEvent = LatitudeEventGeneric<
   'issueCreated',
   {
@@ -995,6 +1012,8 @@ export type LatitudeEvent =
   | GenerateDatasetOnboardingPageVisited
   | RunExperimentOnboardingPageVisited
   | PasteYourPromptOnboardingCompleted
+  | InstallOnboardingPageVisited
+  | OnboardingUserInvited
   | IssueCreatedEvent
   | IssueUpdatedEvent
   | IssueDeletedEvent
@@ -1083,6 +1102,8 @@ export interface IEventsHandlers {
   generateDatasetOnboardingPageVisited: EventHandler<GenerateDatasetOnboardingPageVisited>[]
   runExperimentOnboardingPageVisited: EventHandler<RunExperimentOnboardingPageVisited>[]
   pasteYourPromptOnboardingCompleted: EventHandler<PasteYourPromptOnboardingCompleted>[]
+  installOnboardingPageVisited: EventHandler<InstallOnboardingPageVisited>[]
+  onboardingUserInvited: EventHandler<OnboardingUserInvited>[]
   issueCreated: EventHandler<IssueCreatedEvent>[]
   issueUpdated: EventHandler<IssueUpdatedEvent>[]
   issueDeleted: EventHandler<IssueDeletedEvent>[]

packages/core/src/events/events.d.ts

@@ -110,6 +110,8 @@ export const EventHandlers: IEventsHandlers = {
   generateDatasetOnboardingPageVisited: [],
   runExperimentOnboardingPageVisited: [],
   pasteYourPromptOnboardingCompleted: [],
+  installOnboardingPageVisited: [],
+  onboardingUserInvited: [],
   issueCreated: [],
   issueUpdated: [],
   issueDeleted: [],