From 128fb867dd2c609277b4ee288d3ed30c625a2d82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Mon, 21 Oct 2024 13:20:26 +0100
Subject: [PATCH] chore: add Plausible events to Unleash AI chat

---
 frontend/src/component/ai/AIChat.tsx      | 29 +++++++++++++++++++++--
 frontend/src/hooks/usePlausibleTracker.ts |  3 ++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/ai/AIChat.tsx b/frontend/src/component/ai/AIChat.tsx
index bc411e19e2e1..703e9ff4bc7d 100644
--- 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
index 5a532128027e..d9662112d884 100644
--- 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);