feat(Header): Show `userCenterAgent` info

ui/src/components/Header/components/NavItems/index.tsx

@@ -6,6 +6,7 @@ import { NavLink, useNavigate } from 'react-router-dom';
 import type * as Type from '@/common/interface';
 import { Avatar, Icon } from '@/components';
 import { floppyNavigation } from '@/utils';
+import { userCenterStore } from '@/stores';
 
 interface Props {
   redDot: Type.NotificationStatus | undefined;
@@ -15,13 +16,14 @@ interface Props {
 
 const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
   const { t } = useTranslation();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const navigate = useNavigate();
+  const { agent: ucAgent } = userCenterStore();
   const handleLinkClick = (evt) => {
     if (floppyNavigation.shouldProcessLinkClick(evt)) {
       evt.preventDefault();
-      const { href } = evt.currentTarget;
-      const { pathname } = new URL(href);
-      navigate(pathname);
+      const href = evt.currentTarget.getAttribute('href');
+      navigate(href);
     }
   };
   return (
@@ -90,6 +92,32 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
           </Dropdown.Item>
         </Dropdown.Menu>
       </Dropdown>
+      {/* Dropdown for user center agent info */}
+      {ucAgent?.enabled && ucAgent?.agent_info ? (
+        <Dropdown align="end">
+          <Dropdown.Toggle
+            variant="success"
+            id="dropdown-uca"
+            as="span"
+            className="no-toggle pointer nav-link p-0">
+            <Icon name="grid-3x3-gap-fill" className="fs-4 ms-3" />
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu>
+            <Dropdown.Item href={ucAgent.agent_info.url}>
+              {ucAgent.agent_info.name}
+            </Dropdown.Item>
+            <Dropdown.Divider />
+            {ucAgent.agent_info.control_center?.map((ctrl) => {
+              return (
+                <Dropdown.Item key={ctrl.name} href={ctrl.url}>
+                  {ctrl.label}
+                </Dropdown.Item>
+              );
+            })}
+          </Dropdown.Menu>
+        </Dropdown>
+      ) : null}
     </>
   );
 };