mixpanel additions for dev (#1345)

gui/pages/Content/Agents/AgentCreate.js

@@ -529,7 +529,7 @@ export default function AgentCreate({
               const name = response.data.name;
               const executionId = response.data.execution_id;
               fetchAgents();
-              getUserClick('Agent Created Successfully', {})
+              getUserClick('Agent Created Successfully', {'templateName': template?.id ? template.name : ''})
               getUserClick('Agent Run created successfully', {})
               uploadResources(agentId, name, executionId)
             })

gui/pages/Dashboard/TopBar.js

@@ -7,10 +7,12 @@ import 'react-toastify/dist/ReactToastify.css';
 import {refreshUrl, openNewTab, getUserClick} from "@/utils/utils";
 import Cookies from 'js-cookie';
 
-
 export default function TopBar({selectedProject, userName, env}) {
   const [dropdown, setDropdown] = useState(false);
   const router = useRouter();
+  const [showDropdown, setShowDropdown] = useState(false)
+  const [selectedImagePath, setSelectedImagePath] = useState('/images/agents_icon_dropdown.svg')
+  const [selectedOption, setSelectedOption] = useState('Agents')
 
   const logoutUser = () => {
     setDropdown(false);
@@ -20,14 +22,49 @@ export default function TopBar({selectedProject, userName, env}) {
     }
     getUserClick('Logged Out',{})
     localStorage.removeItem('accessToken');
-    Cookies.remove('accessToken');
+    Cookies.set('accessToken', '', { expires: new Date(0),domain: '.superagi.com', path: '/'});
+    Cookies.set('Source', 'app.superagi', {domain: '.superagi.com', path: '/'});
     refreshUrl();
     router.reload();
   };
 
+  function handleClick (option) {
+    if (option === 'Models') {
+      setSelectedImagePath("/images/models_icon_dropdown.svg")
+      setSelectedOption('Models')
+      window.location.href = 'https://models.superagi.com'
+    } else {
+      setSelectedImagePath("/images/agents_icon_dropdown.svg")
+      setSelectedOption('Agents')
+    }
+    setShowDropdown(false)
+  }
+
   return (
     <div className="top_bar">
       <div className="top_left">
+        <div className="top_bar_section cursor_default">
+          {env === 'PROD' && false && <div className="horizontal_container">
+            <div onClick={() => setShowDropdown(!showDropdown)} className="horizontal_container align-middle cursor-pointer">
+              <Image className="mr_8" width={20} height={20} src={selectedImagePath} alt="models-icon" />
+              <span className="text_dropdown text_dropdown_18">{selectedOption}</span>
+              <Image className="ml_8" width={14} height={14} src="/images/arrow_down.svg" alt="down_arrow" />
+            </div>
+            {showDropdown && <div className="dropdown_container_models mt_130">
+              <ul className="padding_0 margin_0">
+                <li className="dropdown_item text_dropdown_15" onClick={() => handleClick('Models')}>
+                  <Image className="mr_8" width={20} height={20} src="/images/models_icon_dropdown.svg" alt="models-icon" />
+                  <span className="text_dropdown">Models</span>
+                </li>
+                <li className="dropdown_item text_dropdown_15" onClick={() => handleClick('Agents')}>
+                  <Image className="mr_8" width={20} height={20} src="/images/agents_icon_dropdown.svg" alt="agents-icon" />
+                  <span className="text_dropdown">Agents</span>
+                </li>
+              </ul>
+            </div>}
+          </div>}
+        </div>
+        {env === 'PROD' && false && <div className="vertical_divider ml_12 mr_20 responsiveness" />}
         <div className="top_bar_section top_bar_input cursor_default">
           <div className="horizontal_container">
             <Image width={14} height={14} src="/images/project.svg" alt="project-icon"/>

gui/pages/_app.js

@@ -28,7 +28,6 @@ import {toast} from "react-toastify";
 import mixpanel from 'mixpanel-browser';
 import Cookies from 'js-cookie';
 
-
 export default function App() {
   const [selectedView, setSelectedView] = useState('');
   const [applicationState, setApplicationState] = useState("LOADING");
@@ -62,7 +61,6 @@ export default function App() {
       });
   }
 
-
   const installFromMarketplace = () => {
     const toolkitName = localStorage.getItem('toolkit_to_install') || null;
     const agentTemplateId = localStorage.getItem('agent_to_install') || null;
@@ -112,6 +110,7 @@ export default function App() {
       .then((response) => {
         const env = response.data.env;
         setEnv(env);
+        const mixpanelInitialized = Cookies.get('mixpanel_initialized') === 'true'
 
         if (typeof window !== 'undefined') {
           if(response.data.env === 'PROD' && mixpanelId())
@@ -124,7 +123,7 @@ export default function App() {
           const queryParams = router.asPath.split('?')[1];
           const parsedParams = querystring.parse(queryParams);
           let access_token = parsedParams.access_token || null;
-          let first_login = parsedParams.first_time_login || false
+          let first_login = parsedParams.first_time_login || ''
 
           const utmParams = getUTMParametersFromURL();
           if (utmParams) {
@@ -138,6 +137,7 @@ export default function App() {
 
           if (typeof window !== 'undefined' && access_token) {
             localStorage.setItem('accessToken', access_token);
+            Cookies.set('accessToken', access_token, { domain: '.superagi.com', path: '/' });
             refreshUrl();
           }
           validateAccessToken()
@@ -146,16 +146,18 @@ export default function App() {
               sendGAEvent(response.data.email, 'Signed Up Successfully', {'utm_source': signupSource || '', 'utm_medium': signupMedium || '', 'campaign': singupCampaign || ''})
               if(mixpanelId())
                 mixpanel.identify(response.data.email)
-              if(first_login)
+              if(first_login === 'True')
                 getUserClick('New Sign Up', {})
-              else
-                getUserClick('User Logged In', {})
+              else {
+                if (first_login === 'False')
+                  getUserClick('User Logged In', {})
+              }
 
               if(signupSource) {
                 handleSignUpSource(signupSource)
               }
-              Cookies.set('accessToken', access_token, { domain: '.superagi.com', path: '/' });
               fetchOrganisation(response.data.id);
+              Cookies.set('mixpanel_initialized', 'true', {domain: '.superagi.com', path: '/'});
             })
             .catch((error) => {
               console.error('Error validating access token:', error);
@@ -167,6 +169,7 @@ export default function App() {
       .catch((error) => {
         console.error('Error fetching project:', error);
       });
+
   }, []);
 
   useEffect(() => {
@@ -183,7 +186,11 @@ export default function App() {
 
   useEffect(() => {
     if (selectedProject !== null) {
-      setApplicationState("AUTHENTICATED");
+      const source = Cookies.get('Source')
+      if (source === 'models.superagi')
+        window.open('https://models.superagi.com/', '_self');
+      else
+        setApplicationState("AUTHENTICATED");
     }
   }, [selectedProject]);