Models dropdown (#1321)

Author: namansleeps

gui/pages/Dashboard/TopBar.js

@@ -10,6 +10,9 @@ 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);
@@ -19,14 +22,48 @@ 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: '/' });
     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.css

@@ -231,6 +231,18 @@ input[type="range"]::-moz-range-track {
     z-index: 10;
 }
 
+.dropdown_container_models {
+    flex-direction: column;
+    align-items: flex-start;
+    border-radius: 8px;
+    background: #2E293F;
+    box-shadow: -2px 2px 24px rgba(0, 0, 0, 0.4);
+    position: absolute;
+    width: fit-content;
+    height: fit-content;
+    padding: 8px;
+}
+
 .dropdown_container {
     width: 150px;
     height: auto;
@@ -771,6 +783,7 @@ p {
 .mt_74{margin-top: 74px;}
 .mt_80{margin-top: 80px;}
 .mt_90{margin-top: 90px;}
+.mt_130{margin-top: 130px;}
 
 .mb_1{margin-bottom: 1px;}
 .mb_2{margin-bottom: 2px;}
@@ -1907,4 +1920,24 @@ tr{
     border-radius: 6px;
 }
 
+.text_dropdown {
+    color: #FFFFFF;
+    font-family: Plus Jakarta Sans, sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.text_dropdown_18 {
+    font-size: 18px;
+}
+
+.vertical_divider {
+    background: transparent;
+    /*border-color: rgba(255, 255, 255, 0.08);*/
+    border: 1.2px solid rgba(255, 255, 255, 0.08);;
+    height: 20px;
+    width: 0;
+}
+