Mixpanel integration (#1256)

Mix Panel
TransformerOptimus · Sep 18, 2023 · 2ccbd4b · 2ccbd4b
1 parent 0db35bb
commit 2ccbd4b
Show file tree

Hide file tree

Showing 21 changed files with 666 additions and 45 deletions.
diff --git a/gui/package-lock.json b/gui/package-lock.json
diff --git a/gui/package.json b/gui/package.json
@@ -20,6 +20,7 @@
     "eslint-config-next": "13.4.2",
     "jszip": "^3.10.1",
     "mitt": "^3.0.0",
+    "mixpanel-browser": "^2.47.0",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.43",
     "next": "13.4.2",

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
@@ -11,15 +11,9 @@ import {
   updateExecution,
   uploadFile,
   getAgentDetails, addAgentRun, fetchModels,
-  getAgentWorkflows, validateOrAddModels, publishTemplateToMarketplace
+  getAgentWorkflows, publishTemplateToMarketplace
 } from "@/pages/api/DashboardService";
-import {
-  formatBytes,
-  openNewTab,
-  removeTab,
-  setLocalStorageValue,
-  setLocalStorageArray, returnResourceIcon, getUserTimezone, createInternalId, preventDefault, excludedToolkits
-} from "@/utils/utils";
+import {formatBytes, openNewTab, removeTab, setLocalStorageValue, setLocalStorageArray, returnResourceIcon, getUserTimezone, createInternalId, preventDefault, excludedToolkits, getUserClick} from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
 import styles from "@/pages/Content/Agents/Agents.module.css";
 import styles1 from "@/pages/Content/Knowledge/Knowledge.module.css";
@@ -1365,7 +1359,7 @@ export default function AgentCreate({
               <div className="primary_button"
                    style={{backgroundColor: 'white', marginBottom: '4px', paddingLeft: '0', paddingRight: '5px'}}>
                 <button disabled={!createClickable} className="primary_button" style={{paddingRight: '5px'}}
-                        onClick={handleAddAgent}>{createClickable ? 'Create and Run' : 'Creating Agent...'}</button>
+                        onClick={() => {handleAddAgent(); getUserClick('Agent Created Succesfully', {})}}>{createClickable ? 'Create and Run' : 'Creating Agent...'}</button>
                 <button onClick={() => setCreateDropdown(!createDropdown)}
                         style={{border: 'none', backgroundColor: 'white'}}>
                   <Image width={20} height={21}

diff --git a/gui/pages/Content/Agents/AgentSchedule.js b/gui/pages/Content/Agents/AgentSchedule.js
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useRef} from 'react';
-import {setLocalStorageValue, convertToGMT, preventDefault} from "@/utils/utils";
+import {setLocalStorageValue, convertToGMT, preventDefault, getUserClick} from "@/utils/utils";
 import styles from "@/pages/Content/Agents/Agents.module.css";
 import styles1 from "@/pages/Content/Agents/react-datetime.css";
 import Image from "next/image";
@@ -151,6 +151,7 @@ export default function AgentSchedule({
         "expiry_date": expiryType === 'Specific Date' ? expiryDate : null,
       }
       EventBus.emit('handleAgentScheduling', scheduleData);
+      getUserClick('Agent Scheduled', {'Type': 'New Agent'})
     } else {
       if (type === "schedule_agent") {
         const requestData = {
@@ -166,6 +167,7 @@ export default function AgentSchedule({
             const {schedule_id} = response.data;
             toast.success('Scheduled successfully!', {autoClose: 1800});
             setCreateModal();
+            getUserClick('Agent Scheduled', {'Type': 'Existing Agent'})
             EventBus.emit('reFetchAgents', {});
             setTimeout(() => {
                 EventBus.emit('refreshDate', {});

diff --git a/gui/pages/Content/Agents/AgentTemplatesList.js b/gui/pages/Content/Agents/AgentTemplatesList.js
@@ -3,7 +3,7 @@ import Image from "next/image";
 import styles from '../Marketplace/Market.module.css';
 import {fetchAgentTemplateListLocal} from "@/pages/api/DashboardService";
 import AgentCreate from "@/pages/Content/Agents/AgentCreate";
-import {setLocalStorageValue, openNewTab} from "@/utils/utils";
+import {setLocalStorageValue, openNewTab, getUserClick} from "@/utils/utils";
 
 export default function AgentTemplatesList({
                                              sendAgentData,
@@ -41,15 +41,18 @@ export default function AgentTemplatesList({
   }, [internalId])
 
   function redirectToCreateAgent() {
+    getUserClick('Agent Creating From Scratch', {})
     setLocalStorageValue("agent_create_click_" + String(internalId), true, setCreateAgentClicked);
   }
 
   function openMarketplace() {
+    getUserClick('Going To Marketplace to see Agent Templates', {})
     openNewTab(-4, "Marketplace", "Marketplace", false);
     localStorage.setItem('marketplace_tab', 'market_agents');
   }
 
   function handleTemplateClick(item) {
+    getUserClick('Agent Creating Using Template', {})
     setSendTemplate(item);
     setLocalStorageValue("agent_create_click_" + String(internalId), true, setCreateAgentClicked);
   }

diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -9,7 +9,7 @@ import RunHistory from "./RunHistory";
 import ActionConsole from "./ActionConsole";
 import Details from "./Details";
 import ResourceManager from "./ResourceManager";
-import {createInternalId, preventDefault} from "@/utils/utils";
+import {createInternalId, getUserClick, preventDefault} from "@/utils/utils";
 import {
   getAgentDetails,
   getAgentExecutions,
@@ -171,6 +171,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
         fetchAgentDetails(agentId, selectedRun?.id);
         EventBus.emit('reFetchAgents', {});
         toast.success("New run created", {autoClose: 1800});
+        getUserClick('Agent New Run Created Successfully',{})
       })
       .catch((error) => {
         console.error('Error creating execution:', error);

diff --git a/gui/pages/Content/Agents/Agents.js b/gui/pages/Content/Agents/Agents.js
@@ -1,19 +1,22 @@
 import React from 'react';
 import Image from "next/image";
 import 'react-toastify/dist/ReactToastify.css';
-import {createInternalId} from "@/utils/utils";
+import {createInternalId, getUserClick} from "@/utils/utils";
+import mixpanel from 'mixpanel-browser'
 
 export default function Agents({sendAgentData, agents}) {
   return (<>
       <div className="container">
         <p className="text_14 mt_8 mb_12 ml_8">Agents</p>
         <div className="w_100 mb_10">
-          <button className="secondary_button w_100" onClick={() => sendAgentData({
-            id: -1,
-            name: "new agent",
-            contentType: "Create_Agent",
-            internalId: createInternalId()
-          })}>
+          <button className="secondary_button w_100" onClick={() => {
+            sendAgentData({
+              id: -1,
+              name: "new agent",
+              contentType: "Create_Agent",
+              internalId: createInternalId()
+            }); getUserClick('Agent Create Clicked', {'Click Position': 'Sidebar'})
+          }}>
             + Create Agent
           </button>
         </div>

diff --git a/gui/pages/Content/Knowledge/Knowledge.js b/gui/pages/Content/Knowledge/Knowledge.js
@@ -2,20 +2,20 @@ import React from 'react';
 import Image from "next/image";
 import styles from '../Toolkits/Tool.module.css';
 import styles1 from '../Agents/Agents.module.css'
-import {createInternalId} from "@/utils/utils";
+import {createInternalId, getUserClick} from "@/utils/utils";
 
 export default function Knowledge({sendKnowledgeData, knowledge}) {
   return (
     <>
       <div className="container">
         <p className="text_14 mt_8 mb_12 ml_8">Knowledges</p>
         <div className="w_100 mb_10">
-          <button className="secondary_button w_100" onClick={() => sendKnowledgeData({
+          <button className="secondary_button w_100" onClick={() => {sendKnowledgeData({
             id: -6,
             name: "new knowledge",
             contentType: "Add_Knowledge",
             internalId: createInternalId()
-          })}>
+          }); getUserClick('Knowledge Added', {})}}>
             + Add Knowledge
           </button>
         </div>

diff --git a/gui/pages/Content/Knowledge/KnowledgeForm.js b/gui/pages/Content/Knowledge/KnowledgeForm.js
@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useRef} from 'react';
 import styles1 from '@/pages/Content/Knowledge/Knowledge.module.css'
-import {removeTab, setLocalStorageValue, setLocalStorageArray, createInternalId} from "@/utils/utils";
+import {removeTab, setLocalStorageValue, setLocalStorageArray, createInternalId, getUserClick} from "@/utils/utils";
 import styles from "@/pages/Content/Agents/Agents.module.css";
 import Image from "next/image";
 import {ToastContainer, toast} from "react-toastify";
@@ -101,6 +101,7 @@ export default function KnowledgeForm({
           internalId: createInternalId()
         });
         EventBus.emit('reFetchKnowledge', {});
+        getUserClick('Knowledge Added Successfully', {})
       })
       .catch((error) => {
         toast.error("Unable to add knowledge", {autoClose: 1800});

diff --git a/gui/pages/Content/Marketplace/AgentTemplate.js b/gui/pages/Content/Marketplace/AgentTemplate.js
@@ -8,7 +8,7 @@ import styles2 from "./Market.module.css"
 import {fetchAgentTemplateConfig, installAgentTemplate} from "@/pages/api/DashboardService";
 import {EventBus} from "@/utils/eventBus";
 import axios from 'axios';
-import {loadingTextEffect} from "@/utils/utils";
+import {getUserClick, loadingTextEffect} from "@/utils/utils";
 
 export default function AgentTemplate({template, env}) {
   const [tools, setTools] = useState([])
@@ -60,6 +60,7 @@ export default function AgentTemplate({template, env}) {
 
   function handleInstallClick() {
     setIsInstalled(true)
+    getUserClick("Agent Template Installed",{"Agent Template Name": template.name})
     if (window.location.href.toLowerCase().includes('marketplace')) {
       localStorage.setItem('agent_to_install', template.id);
       if (env === 'PROD') {

diff --git a/gui/pages/Content/Marketplace/MarketAgent.js b/gui/pages/Content/Marketplace/MarketAgent.js
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from "react";
 import Image from "next/image";
 import {fetchAgentTemplateList} from "@/pages/api/DashboardService";
 import {EventBus} from "@/utils/eventBus";
-import {loadingTextEffect} from "@/utils/utils";
+import {loadingTextEffect, getUserClick} from "@/utils/utils";
 import axios from 'axios';
 
 export default function MarketAgent() {
@@ -39,6 +39,7 @@ export default function MarketAgent() {
   }, []);
 
   function handleTemplateClick(item) {
+    getUserClick("Marketplace Agent Template Viewed", {"Agent Template Name": item.name})
     const contentType = 'agent_template';
     EventBus.emit('openTemplateDetails', {item, contentType});
   }

diff --git a/gui/pages/Content/Models/ModelForm.js b/gui/pages/Content/Models/ModelForm.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from "react";
-import {removeTab, openNewTab, createInternalId, modelGetAuth} from "@/utils/utils";
+import {removeTab, openNewTab, createInternalId, modelGetAuth, getUserClick} from "@/utils/utils";
 import Image from "next/image";
 import {fetchApiKey, storeModel, verifyEndPoint} from "@/pages/api/DashboardService";
 import {BeatLoader, ClipLoader} from "react-spinners";
@@ -66,8 +66,10 @@ export default function ModelForm({internalId, getModels, sendModelData}){
             {
                 const modelProviderId = response.data[0].id
                 verifyEndPoint(response.data[0].api_key, modelEndpoint, selectedModel).then((response) =>{
-                    if(response.data.success)
+                    if(response.data.success) {
                         storeModelDetails(modelProviderId)
+                        getUserClick("Model Added Successfully",{'type': selectedModel})
+                    }
                     else {
                         toast.error("The Endpoint is not Valid",{autoClose: 1800});
                         setIsLoading(false);
@@ -134,7 +136,7 @@ export default function ModelForm({internalId, getModels, sendModelData}){
                 <div className="vertical_containers">
                     <span className="text_12 color_white lh_16">The <b>{selectedModel}</b> auth token is not added to your settings. In order to start using the model, you need to add the auth token to your settings. You can find the auth token in the <b>{selectedModel}</b> dashboard. </span>
                     <div className="horizontal_container mt_16">
-                        <button className="primary_button_small" onClick={() => openNewTab(-3, "Settings", "Settings", false)}>Add auth token</button>
+                        <button className="primary_button_small" onClick={() => {openNewTab(-3, "Settings", "Settings", false); getUserClick('Get Auth Token CLicked',{})}}>Add auth token</button>
                         <button className="secondary_button_small ml_8"
                                 onClick={() => window.open(modelGetAuth(selectedModel), "_blank")}>Get auth token<Image src="/images/open_in_new.svg" alt="deploy_icon" width={12} height={12} className="ml_4" /></button>
                     </div>

diff --git a/gui/pages/Content/Models/Models.js b/gui/pages/Content/Models/Models.js
@@ -1,10 +1,11 @@
 import React from "react";
 import 'react-toastify/dist/ReactToastify.css';
-import {createInternalId} from "@/utils/utils";
+import {createInternalId, getUserClick} from "@/utils/utils";
 
 export default function Models({sendModelData, models}){
 
     const handleModelSelect = (model) => {
+        getUserClick('Existing Model Clicked', {})
         model.contentType = 'Model'
         sendModelData(model)
     }
@@ -15,7 +16,7 @@ export default function Models({sendModelData, models}){
                 <p className="text_14 mt_8 mb_12 ml_8">Models</p>
                 <div className="w_100 mb_10">
                     <button className="secondary_button w_100"
-                            onClick={() => sendModelData({id: -5, name: "new model", contentType: "Add_Model", internalId: createInternalId()})}>
+                            onClick={() => {sendModelData({id: -5, name: "new model", contentType: "Add_Model", internalId: createInternalId()}); getUserClick('Add Model Clicked',{})}}>
                         + Add Model
                     </button>
                 </div>

diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
@@ -30,7 +30,7 @@ import {useRouter} from 'next/router';
 import querystring from 'querystring';
 import styles1 from '../Content/Agents/Agents.module.css';
 import AddTool from "@/pages/Content/Toolkits/AddTool";
-import {createInternalId, resetLocalStorage, preventDefault} from "@/utils/utils";
+import {createInternalId, resetLocalStorage, preventDefault, getUserClick} from "@/utils/utils";
 import AddDatabase from "@/pages/Dashboard/Settings/AddDatabase";
 import DatabaseDetails from "@/pages/Dashboard/Settings/DatabaseDetails";
 
@@ -54,6 +54,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
       const apmTab = tabs.find(tab => tab.contentType === 'APM');
       setIsApmOpened(!!apmTab);
       setPrevView(selectedView);
+      getUserClick('APM Closed',{})
     }
   }, [selectedView, tabs, prevView]);
 
@@ -345,12 +346,12 @@ export default function Content({env, selectedView, selectedProjectId, organisat
             <div>
               <div><Image width={264} height={144} src="/images/watermark.png" alt="empty-state"/></div>
               <div style={{width: '100%', display: 'flex', justifyContent: 'center', marginTop: '30px'}}>
-                <button onClick={() => addTab({
+                <button onClick={() => {addTab({
                   id: -1,
                   name: "new agent",
                   contentType: "Create_Agent",
                   internalId: createInternalId()
-                })} className={styles.empty_state_button}>
+                }); getUserClick('Agent Create Clicked', {'Click Position': 'Content'})}} className={styles.empty_state_button}>
                   Create new agent&nbsp;<Image width={17} height={17} src="/images/arrow_forward_secondary.svg"
                                                alt="forward-arrow"/>
                 </button>

diff --git a/gui/pages/Dashboard/Settings/Model.js b/gui/pages/Dashboard/Settings/Model.js
@@ -4,7 +4,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import agentStyles from "@/pages/Content/Agents/Agents.module.css";
 import {storeApiKey, fetchApiKeys, validateLLMApiKey, fetchApiKey} from "@/pages/api/DashboardService";
 import {EventBus} from "@/utils/eventBus";
-import {removeTab} from "@/utils/utils";
+import {getUserClick, removeTab} from "@/utils/utils";
 import Image from "next/image";
 
 export default function Model({organisationId}) {
@@ -54,8 +54,10 @@ export default function Model({organisationId}) {
     if(model_provider === 'OpenAi')
       model_provider = 'OpenAI'
     storeApiKey(model_provider,api_key).then((response) => {
-      if(response.status === 200)
+      if(response.status === 200) {
+        getUserClick('API Key Updated', {'Model': model_provider})
         toast.success(`Successfully Stored the API Key of ${model_provider}`, {autoClose: 1800})
+      }
       else
         toast.error("Error", {autoClose: 1800})
     })

diff --git a/gui/pages/Dashboard/SideBar.js b/gui/pages/Dashboard/SideBar.js
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import Image from 'next/image';
 import styles from './Dashboard.module.css';
-import {openNewTab} from "@/utils/utils";
+import {getUserClick, openNewTab} from "@/utils/utils";
 
 export default function SideBar({onSelectEvent, env}) {
     const [sectionSelected, setSelection] = useState('');
@@ -15,6 +15,7 @@ export default function SideBar({onSelectEvent, env}) {
     ];
 
     const handleClick = (value) => {
+        getUserClick(value + "SIDEBAR ICON", {})
         setSelection(value);
         onSelectEvent(value);
         if (value === 'apm') {

diff --git a/gui/pages/Dashboard/TopBar.js b/gui/pages/Dashboard/TopBar.js
@@ -4,7 +4,7 @@ import styles from './Dashboard.module.css';
 import {useRouter} from 'next/router';
 import {ToastContainer, toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import {refreshUrl, openNewTab} from "@/utils/utils";
+import {refreshUrl, openNewTab, getUserClick} from "@/utils/utils";
 
 export default function TopBar({selectedProject, userName, env}) {
   const [dropdown, setDropdown] = useState(false);
@@ -16,7 +16,7 @@ export default function TopBar({selectedProject, userName, env}) {
     if (typeof window === 'undefined') {
       return;
     }
-
+    getUserClick('Logged Out',{})
     localStorage.removeItem('accessToken');
     refreshUrl();
     router.reload();
@@ -38,7 +38,7 @@ export default function TopBar({selectedProject, userName, env}) {
       </div>
       <div className="top_right">
         <div className="horizontal_container gap_20">
-          <div className="horizontal_container w_fit_content cursor_pointer gap_4" onClick={() => window.open("https://superagi.com/docs", "_blank")}>
+          <div className="horizontal_container w_fit_content cursor_pointer gap_4" onClick={() => {window.open("https://superagi.com/docs", "_blank"); getUserClick('SuperAGI Docs Visited', {})}}>
             <Image width={20} height={20} src="/images/docs_icon.svg" alt="docs-icon" />
             <p className="top_bar_font">Docs</p>
           </div>
@@ -54,7 +54,7 @@ export default function TopBar({selectedProject, userName, env}) {
 
         <div className="horizontal_bar mr_22 ml_22" />
 
-        <Image onClick={() => openNewTab(-3, "Settings", "Settings", false)} className="top_right_icon" width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/>
+        <Image onClick={() => {openNewTab(-3, "Settings", "Settings", false); getUserClick('Settings Viewed', {})}} className="top_right_icon" width={16} height={16} src="/images/settings.svg" alt="dropdown-icon"/>
         <div className="top_right_icon" onMouseEnter={() => setDropdown(true)}
              onMouseLeave={() => setDropdown(false)}>
           <Image width={20} height={20} src="/images/profile_pic.png" alt="dropdown-icon"/>