chore: add Plausible events to Unleash AI chat

Unleash · Oct 21, 2024 · 128fb86 · 128fb86
1 parent 0f3e7ec
commit 128fb86
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/frontend/src/component/ai/AIChat.tsx b/frontend/src/component/ai/AIChat.tsx
@@ -15,6 +15,7 @@ import { AIChatMessage } from './AIChatMessage';
 import { AIChatHeader } from './AIChatHeader';
 import { Resizable } from 'component/common/Resizable/Resizable';
 import { AIChatDisclaimer } from './AIChatDisclaimer';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const AI_ERROR_MESSAGE = {
     role: 'assistant',
@@ -90,6 +91,7 @@ export const AIChat = () => {
     const [loading, setLoading] = useState(false);
     const { setToastApiError } = useToast();
     const { chat, newChat } = useAIApi();
+    const { trackEvent } = usePlausibleTracker();
 
     const [messages, setMessages] = useState<ChatMessage[]>([]);
 
@@ -136,6 +138,12 @@ export const AIChat = () => {
     const onSend = async (content: string) => {
         if (!content.trim() || loading) return;
 
+        trackEvent('unleash-ai-chat', {
+            props: {
+                eventType: 'send',
+            },
+        });
+
         try {
             setLoading(true);
             setMessages((currentMessages) => [
@@ -168,7 +176,17 @@ export const AIChat = () => {
     if (!open) {
         return (
             <StyledAIIconContainer>
-                <StyledAIIconButton size='large' onClick={() => setOpen(true)}>
+                <StyledAIIconButton
+                    size='large'
+                    onClick={() => {
+                        trackEvent('unleash-ai-chat', {
+                            props: {
+                                eventType: 'open',
+                            },
+                        });
+                        setOpen(true);
+                    }}
+                >
                     <SmartToyIcon />
                 </StyledAIIconButton>
             </StyledAIIconContainer>
@@ -187,7 +205,14 @@ export const AIChat = () => {
                 <StyledChat>
                     <AIChatHeader
                         onNew={onNewChat}
-                        onClose={() => setOpen(false)}
+                        onClose={() => {
+                            trackEvent('unleash-ai-chat', {
+                                props: {
+                                    eventType: 'close',
+                                },
+                            });
+                            setOpen(false);
+                        }}
                     />
                     <StyledChatContent>
                         <AIChatDisclaimer />

diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
@@ -70,7 +70,8 @@ export type CustomEvents =
     | 'event-timeline'
     | 'onboarding'
     | 'personal-dashboard'
-    | 'order-environments';
+    | 'order-environments'
+    | 'unleash-ai-chat';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);