Merge pull request #43 from e2b-dev/posthog

Adds PostHog analytics
e2b-dev · Aug 28, 2024 · fc9bc55 · fc9bc55
2 parents e8c80e8 + 596a658
commit fc9bc55
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 34 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
-import { Analytics } from '@vercel/analytics/react'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { PostHogProvider } from './providers'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -17,10 +17,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
-        {children}
-        <Analytics />
-      </body>
+      <PostHogProvider>
+        <body className={inter.className}>
+          {children}
+        </body>
+      </PostHogProvider>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { experimental_useObject as useObject } from 'ai/react';
+import { experimental_useObject as useObject } from 'ai/react'
 import { useLocalStorage } from 'usehooks-ts'
+import { usePostHog } from 'posthog-js/react'
 import { ArtifactSchema, artifactSchema as schema } from '@/lib/schema'
 
 import { Chat } from '@/components/chat'
@@ -36,6 +37,8 @@ export default function Home() {
     model: 'claude-3-5-sonnet-20240620'
   })
 
+  const posthog = usePostHog()
+
   const [result, setResult] = useState<ExecutionResult>()
   const [messages, setMessages] = useState<Message[]>([])
 
@@ -112,6 +115,11 @@ export default function Home() {
     })
 
     setChatInput('')
+
+    posthog.capture('chat_submit', {
+      template: selectedTemplate,
+      model: languageModel.model,
+    })
   }
 
   function addMessage (message: Message) {
@@ -130,6 +138,11 @@ export default function Home() {
     setLanguageModel({ ...languageModel, ...e })
   }
 
+  function handleGitHubClick () {
+    window.open('https://github.com/e2b-dev/ai-artifacts', '_blank')
+    posthog.capture('github_click')
+  }
+
   return (
     <main className="flex min-h-screen max-h-screen">
       {
@@ -145,6 +158,7 @@ export default function Home() {
         models={modelsList.models}
         languageModel={languageModel}
         onLanguageModelChange={handleLanguageModelChange}
+        onGitHubClick={handleGitHubClick}
         apiKeyConfigurable={!process.env.NEXT_PUBLIC_USE_HOSTED_MODELS}
         baseURLConfigurable={!process.env.NEXT_PUBLIC_USE_HOSTED_MODELS}
       />

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,21 @@
+// app/providers.js
+'use client'
+import posthog from 'posthog-js'
+import { PostHogProvider as PostHogProviderJS } from 'posthog-js/react'
+
+if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_ENABLE_POSTHOG) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    person_profiles: 'identified_only'
+  })
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  return process.env.NEXT_PUBLIC_ENABLE_POSTHOG ? (
+    <PostHogProviderJS client={posthog}>
+      {children}
+    </PostHogProviderJS>
+  ) : (
+    children
+  )
+}
diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -38,6 +38,7 @@ export default function NavBar({
   onLanguageModelChange,
   apiKeyConfigurable,
   baseURLConfigurable,
+  onGitHubClick,
 }: {
   session: Session | null,
   showLogin: () => void,
@@ -50,6 +51,7 @@ export default function NavBar({
   onLanguageModelChange: (config: LLMModelConfig) => void,
   apiKeyConfigurable: boolean,
   baseURLConfigurable: boolean,
+  onGitHubClick: () => void,
 }) {
   return (
     <nav className="fixed top-0 left-0 right-0 bg-white">
@@ -62,7 +64,7 @@ export default function NavBar({
           <Link href="https://e2b.dev" className="underline decoration-[#ff8800] decoration-2 text-[#ff8800]" target="_blank">E2B</Link>
         </div>
         <div className="flex justify-end space-x-4">
-          <Button variant="outline" onClick={() => window.open('https://github.com/e2b-dev/ai-artifacts', '_blank')}>
+          <Button variant="outline" onClick={onGitHubClick}>
             <GithubIcon className="mr-2 h-4 w-4" /> Star us on GitHub
           </Button>
           <Separator orientation="vertical" />

diff --git a/lib/auth.ts b/lib/auth.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Session } from '@supabase/supabase-js'
 import { supabase } from './supabase'
+import { usePostHog } from 'posthog-js/react'
 
 interface UserTeam {
   id: string;
@@ -34,6 +35,7 @@ export async function getUserAPIKey (session: Session) {
 export function useAuth (setAuthDialog: (value: boolean) => void) {
   const [session, setSession] = useState<Session | null>(null)
   const [apiKey, setApiKey] = useState<string | undefined>(undefined)
+  const posthog = usePostHog()
 
   useEffect(() => {
     if (!supabase) {
@@ -53,10 +55,12 @@ export function useAuth (setAuthDialog: (value: boolean) => void) {
       if (_event === 'SIGNED_IN') {
         setAuthDialog(false)
         getUserAPIKey(session as Session).then(setApiKey)
+        posthog.identify(session?.user.id, { email: session?.user.email })
       }
 
       if (_event === 'SIGNED_OUT') {
         setApiKey(undefined)
+        posthog.reset()
       }
     })
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
     "@supabase/auth-ui-shared": "^0.1.8",
     "@supabase/supabase-js": "^2.45.1",
     "@upstash/ratelimit": "^2.0.1",
-    "@vercel/analytics": "^1.3.1",
     "@vercel/kv": "^2.0.0",
     "@xterm/addon-canvas": "^0.7.0",
     "@xterm/addon-fit": "^0.10.0",
@@ -39,6 +38,7 @@
     "lucide-react": "^0.396.0",
     "next": "14.2.4",
     "ollama-ai-provider": "^0.12.0",
+    "posthog-js": "^1.158.3",
     "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",