@axiom-lattice/react-sdk 2.1.14 → 2.1.16

package/dist/index.mjs

@@ -992,9 +992,9 @@ var useStyle = createStyles(({ token, css }) => {
       }
 
       &.collapsed {
-        width: 64px;
-        height: fit-content;
-        border-radius: 32px;
+        width: 16px;
+        height: 100%;
+        margin-right: -16px;
         .ant-conversations {
           width: 64px;
         }
@@ -1249,7 +1249,7 @@ var ColumnLayout = ({
     menu && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `${styles.menu} ${"open"} ${menuCollapsed ? "collapsed" : ""}`,
+        className: `${styles.menu} ${"open"} ${sideAppVisible || menuCollapsed ? "collapsed" : ""}`,
         children: [
           logo,
           menu
@@ -2689,7 +2689,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text12 } = Typography7;
+  const { Text: Text13 } = Typography7;
   const [showAll, setShowAll] = useState11(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -2764,7 +2764,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx16(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx16(Space7, { children: /* @__PURE__ */ jsx16(
-    Text12,
+    Text13,
     {
       type: "secondary",
       style: {
@@ -2836,7 +2836,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs9(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs9(Text13, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -3480,7 +3480,7 @@ var TaskCard = ({
 };
 
 // src/components/GenUI/elements/task_detail.tsx
-import { Typography as Typography12 } from "antd";
+import { Typography as Typography13 } from "antd";
 
 // src/components/Chat/Chating.tsx
 import {
@@ -3736,7 +3736,7 @@ var HITLContainer = () => {
 };
 
 // src/components/Chat/AgentHeader.tsx
-import { Avatar as Avatar2, Space as Space12 } from "antd";
+import { Avatar as Avatar2, Space as Space12, Typography as Typography12 } from "antd";
 
 // src/components/Chat/TodoProgress.tsx
 import { Popover, Tooltip as Tooltip2, Progress } from "antd";
@@ -3823,6 +3823,7 @@ var FileExplorerButton = ({}) => {
 import { Welcome } from "@ant-design/x";
 import { useMemo as useMemo5 } from "react";
 import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var { Text: Text10 } = Typography12;
 var AgentHeader = (props) => {
   const { description, avatar, name, extra, extraMeta } = props;
   const extraMetaComponents = useMemo5(() => {
@@ -3853,7 +3854,7 @@ var AgentHeader = (props) => {
       {
         style: { padding: 8 },
         variant: "borderless",
-        description,
+        description: description ? /* @__PURE__ */ jsx27(Text10, { ellipsis: { tooltip: description }, children: description }) : void 0,
         icon: avatar ? /* @__PURE__ */ jsx27(Avatar2, { src: avatar, size: 48 }) : /* @__PURE__ */ jsx27(Avatar2, { size: 48, children: name?.charAt(0).toUpperCase() }),
         title: name ? name : void 0,
         extra: /* @__PURE__ */ jsxs16(Space12, { children: [
@@ -4106,7 +4107,7 @@ var Chating = ({
 
 // src/components/GenUI/elements/task_detail.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
-var { Text: Text10 } = Typography12;
+var { Text: Text11 } = Typography13;
 var TaskDetail = ({ data, component_key, interactive = true }) => {
   const { description, subagent_type, thread_id } = data || {};
   return /* @__PURE__ */ jsx29(
@@ -5153,6 +5154,7 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
+import { useState as useState20 } from "react";
 import { Divider as Divider2 } from "antd";
 import {
   MenuFoldOutlined,
@@ -5212,7 +5214,7 @@ var useStyles3 = createStyles10(({ token, css }) => ({
     position: relative;
     background: transparent;
     border-radius: ${token.borderRadiusLG}px;
-    overflow: hidden;
+    overflow: visible;
   `,
   content: css`
     flex: 1;
@@ -5239,6 +5241,52 @@ var useStyles3 = createStyles10(({ token, css }) => ({
       }
     }
   `,
+  hoverOverlay: css`
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 240px;
+    background: ${token.colorBgContainer};
+    box-shadow: ${token.boxShadowSecondary};
+    border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding-top: ${token.paddingMD}px;
+
+    &.visible {
+      transform: translateX(0);
+    }
+  `,
+  hoverContent: css`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: ${token.paddingMD}px ${token.paddingSM}px;
+    padding-bottom: ${token.paddingLG}px;
+
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 3px;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
   section: css`
     margin-bottom: ${token.marginLG}px;
 
@@ -5280,6 +5328,18 @@ var useStyles3 = createStyles10(({ token, css }) => ({
         transparent
       );
     }
+
+    &.collapsed {
+      border: 0;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 0px;
+      }
+    }
   `,
   actionButton: css`
     display: flex;
@@ -5320,8 +5380,9 @@ var ChatSidebar = ({
   defaultCollapsed = false
 }) => {
   const { styles } = useStyles3();
-  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen } = useLatticeChatShellContext();
+  const [isHovered, setIsHovered] = useState20(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
@@ -5329,41 +5390,103 @@ var ChatSidebar = ({
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
-  return /* @__PURE__ */ jsx37(Fragment5, { children: /* @__PURE__ */ jsxs19("div", { className: styles.sidebar, children: [
-    !menuCollapsed && /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
-        /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Assistants" }),
-        /* @__PURE__ */ jsx37(AssistantList, {})
-      ] }),
-      /* @__PURE__ */ jsx37(Divider2, { className: styles.divider }),
-      /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
-        /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Threads" }),
-        /* @__PURE__ */ jsx37(AgentConversations, {})
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs19("div", { className: styles.footer, children: [
-      /* @__PURE__ */ jsx37(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleToggleCollapse,
-          title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          children: menuCollapsed ? /* @__PURE__ */ jsx37(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx37(MenuFoldOutlined, {})
-        }
-      ),
-      !menuCollapsed && /* @__PURE__ */ jsx37(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleSettingsClick,
-          title: "Settings",
-          "aria-label": "Settings",
-          children: /* @__PURE__ */ jsx37(SettingOutlined, {})
-        }
-      )
-    ] })
-  ] }) });
+  const isCollapsed = menuCollapsed || sideAppVisible;
+  const handleMouseEnter = () => {
+    if (isCollapsed) {
+      setIsHovered(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx37(
+      "div",
+      {
+        className: styles.sidebar,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: !isCollapsed && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
+            /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Assistants" }),
+              /* @__PURE__ */ jsx37(AssistantList, {})
+            ] }),
+            /* @__PURE__ */ jsx37(Divider2, { className: styles.divider }),
+            /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ jsx37(AgentConversations, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsx37(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleToggleCollapse,
+                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: isCollapsed ? /* @__PURE__ */ jsx37(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx37(MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ jsx37(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSettingsClick,
+                title: "Settings",
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ jsx37(SettingOutlined, {})
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    isCollapsed && /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxs19("div", { className: styles.hoverContent, children: [
+            /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Assistants" }),
+              /* @__PURE__ */ jsx37(AssistantList, {})
+            ] }),
+            /* @__PURE__ */ jsx37(Divider2, { className: styles.divider }),
+            /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ jsx37(AgentConversations, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsx37(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleToggleCollapse,
+                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: isCollapsed ? /* @__PURE__ */ jsx37(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx37(MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ jsx37(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSettingsClick,
+                title: "Settings",
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ jsx37(SettingOutlined, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
@@ -5398,19 +5521,18 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState20, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { useState as useState21, useEffect as useEffect14, useRef as useRef11 } from "react";
 import {
   Modal,
   Input,
   Button as Button12,
   message as message4,
-  Typography as Typography13,
+  Typography as Typography14,
   Alert as Alert3,
   Select,
   Switch,
   Space as Space13,
-  Tabs as Tabs2,
-  Drawer
+  Tabs as Tabs2
 } from "antd";
 import {
   SaveOutlined,
@@ -5426,7 +5548,7 @@ import {
 } from "@ant-design/icons";
 import { createStyles as createStyles11 } from "antd-style";
 import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
-var { Text: Text11, Title: Title2 } = Typography13;
+var { Text: Text12, Title: Title2 } = Typography14;
 var { TextArea } = Input;
 var useStyles4 = createStyles11(({ token, css }) => ({
   //   settingsModal: css`
@@ -5788,7 +5910,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles4();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState20(() => {
+  const [connections, setConnections] = useState21(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -5811,21 +5933,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState20({});
+  const [serverConfigs, setServerConfigs] = useState21({});
   const connectionsRef = useRef11(connections);
   useEffect14(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState20(
+  const [activeTabKey, setActiveTabKey] = useState21(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState20("environment");
-  const [loading, setLoading] = useState20(false);
-  const [showAddServerModal, setShowAddServerModal] = useState20(false);
-  const [newServerUrl, setNewServerUrl] = useState20("");
-  const [newServerName, setNewServerName] = useState20("");
-  const [newServerApiKey, setNewServerApiKey] = useState20("");
-  const [addingServer, setAddingServer] = useState20(false);
+  const [activeMenu, setActiveMenu] = useState21("environment");
+  const [loading, setLoading] = useState21(false);
+  const [showAddServerModal, setShowAddServerModal] = useState21(false);
+  const [newServerUrl, setNewServerUrl] = useState21("");
+  const [newServerName, setNewServerName] = useState21("");
+  const [newServerApiKey, setNewServerApiKey] = useState21("");
+  const [addingServer, setAddingServer] = useState21(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -6252,7 +6374,7 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
+      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx39(Text12, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
       /* @__PURE__ */ jsx39(
         TextArea,
         {
@@ -6331,7 +6453,7 @@ QUEUE_NAME=tasks`,
       }
     };
     return /* @__PURE__ */ jsxs20("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
+      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx39(Text12, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
       config.models.map((model, index) => /* @__PURE__ */ jsxs20("div", { className: styles.card, children: [
         /* @__PURE__ */ jsxs20(
           "div",
@@ -6346,12 +6468,12 @@ QUEUE_NAME=tasks`,
             },
             children: [
               /* @__PURE__ */ jsxs20("div", { children: [
-                /* @__PURE__ */ jsxs20(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                /* @__PURE__ */ jsxs20(Text12, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
                 model.key && /* @__PURE__ */ jsxs20(
-                  Text11,
+                  Text12,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -6382,7 +6504,7 @@ QUEUE_NAME=tasks`,
         ),
         /* @__PURE__ */ jsxs20(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Key *" }),
             /* @__PURE__ */ jsx39(
               Input,
               {
@@ -6392,10 +6514,10 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Provider *" }),
             /* @__PURE__ */ jsx39(
               Select,
               {
@@ -6413,7 +6535,7 @@ QUEUE_NAME=tasks`,
             )
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Model Name *" }),
             /* @__PURE__ */ jsx39(
               Input,
               {
@@ -6425,7 +6547,7 @@ QUEUE_NAME=tasks`,
             )
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "API Key" }),
             /* @__PURE__ */ jsx39(
               Input.Password,
               {
@@ -6435,10 +6557,10 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Base URL" }),
             /* @__PURE__ */ jsx39(
               Input,
               {
@@ -6448,7 +6570,7 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx39(Text12, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
           /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs20(Space13, { children: [
             /* @__PURE__ */ jsx39(
@@ -6458,11 +6580,11 @@ QUEUE_NAME=tasks`,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx39(Text12, { children: "Enable Streaming" })
           ] }) }),
           /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 20 }, children: [
             /* @__PURE__ */ jsxs20("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Max Tokens" }),
               /* @__PURE__ */ jsx39(
                 Input,
                 {
@@ -6479,7 +6601,7 @@ QUEUE_NAME=tasks`,
               )
             ] }),
             /* @__PURE__ */ jsxs20("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx39(Text12, { className: styles.formLabel, children: "Temperature" }),
               /* @__PURE__ */ jsx39(
                 Input,
                 {
@@ -6572,7 +6694,7 @@ QUEUE_NAME=tasks`,
         /* @__PURE__ */ jsxs20("div", { className: styles.contentHeader, children: [
           /* @__PURE__ */ jsxs20("div", { className: styles.contentHeaderLeft, children: [
             /* @__PURE__ */ jsx39(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs20(Text11, { className: styles.contentDescription, children: [
+            /* @__PURE__ */ jsxs20(Text12, { className: styles.contentDescription, children: [
               activeMenu === "environment" && "Manage environment variables for the gateway server",
               activeMenu === "models" && "Configure and register model lattices for use by agents"
             ] })
@@ -6608,7 +6730,7 @@ QUEUE_NAME=tasks`,
         children: connection.connecting ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
           /* @__PURE__ */ jsx39(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
           /* @__PURE__ */ jsx39(Title2, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs20(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsxs20(Text12, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
@@ -6616,7 +6738,7 @@ QUEUE_NAME=tasks`,
           /* @__PURE__ */ jsx39(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
           /* @__PURE__ */ jsx39(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
           /* @__PURE__ */ jsx39(
-            Text11,
+            Text12,
             {
               type: "secondary",
               style: { textAlign: "center", maxWidth: 400 },
@@ -6641,12 +6763,13 @@ QUEUE_NAME=tasks`,
   }));
   return /* @__PURE__ */ jsxs20(Fragment6, { children: [
     /* @__PURE__ */ jsx39(
-      Drawer,
+      Modal,
       {
         open,
-        onClose,
+        onCancel: onClose,
+        height: "70%",
+        width: "80%",
         footer: null,
-        width: "100%",
         title: "Settings",
         children: /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(
           Tabs2,
@@ -6697,7 +6820,7 @@ QUEUE_NAME=tasks`,
         className: styles.addServerModal,
         children: /* @__PURE__ */ jsxs20(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx39(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
             /* @__PURE__ */ jsx39(
               Input,
               {
@@ -6707,10 +6830,10 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx39(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx39(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
             /* @__PURE__ */ jsx39(
               Input,
               {
@@ -6720,10 +6843,10 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx39(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
           /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx39(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
             /* @__PURE__ */ jsx39(
               Input.Password,
               {
@@ -6733,7 +6856,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx39(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }