@axiom-lattice/react-sdk 2.1.15 → 2.1.16

package/dist/index.js

@@ -1045,9 +1045,9 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
       }
 
       &.collapsed {
-        width: 64px;
-        height: fit-content;
-        border-radius: 32px;
+        width: 16px;
+        height: 100%;
+        margin-right: -16px;
         .ant-conversations {
           width: 64px;
         }
@@ -1302,7 +1302,7 @@ var ColumnLayout = ({
     menu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
-        className: `${styles.menu} ${"open"} ${menuCollapsed ? "collapsed" : ""}`,
+        className: `${styles.menu} ${"open"} ${sideAppVisible || menuCollapsed ? "collapsed" : ""}`,
         children: [
           logo,
           menu
@@ -2707,7 +2707,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text12 } = import_antd8.Typography;
+  const { Text: Text13 } = import_antd8.Typography;
   const [showAll, setShowAll] = (0, import_react12.useState)(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -2782,7 +2782,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Text12,
+    Text13,
     {
       type: "secondary",
       style: {
@@ -2854,7 +2854,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text13, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -3809,6 +3809,7 @@ var FileExplorerButton = ({}) => {
 var import_x3 = require("@ant-design/x");
 var import_react16 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+var { Text: Text10 } = import_antd18.Typography;
 var AgentHeader = (props) => {
   const { description, avatar, name, extra, extraMeta } = props;
   const extraMetaComponents = (0, import_react16.useMemo)(() => {
@@ -3839,7 +3840,7 @@ var AgentHeader = (props) => {
       {
         style: { padding: 8 },
         variant: "borderless",
-        description,
+        description: description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text10, { ellipsis: { tooltip: description }, children: description }) : void 0,
         icon: avatar ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_antd18.Avatar, { src: avatar, size: 48 }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_antd18.Avatar, { size: 48, children: name?.charAt(0).toUpperCase() }),
         title: name ? name : void 0,
         extra: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_antd18.Space, { children: [
@@ -4092,7 +4093,7 @@ var Chating = ({
 
 // src/components/GenUI/elements/task_detail.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var { Text: Text10 } = import_antd20.Typography;
+var { Text: Text11 } = import_antd20.Typography;
 var TaskDetail = ({ data, component_key, interactive = true }) => {
   const { description, subagent_type, thread_id } = data || {};
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -5116,6 +5117,7 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
+var import_react23 = require("react");
 var import_antd24 = require("antd");
 var import_icons13 = require("@ant-design/icons");
 
@@ -5171,7 +5173,7 @@ var useStyles3 = (0, import_antd_style10.createStyles)(({ token, css }) => ({
     position: relative;
     background: transparent;
     border-radius: ${token.borderRadiusLG}px;
-    overflow: hidden;
+    overflow: visible;
   `,
   content: css`
     flex: 1;
@@ -5198,6 +5200,52 @@ var useStyles3 = (0, import_antd_style10.createStyles)(({ 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;
 
@@ -5239,6 +5287,18 @@ var useStyles3 = (0, import_antd_style10.createStyles)(({ token, css }) => ({
         transparent
       );
     }
+
+    &.collapsed {
+      border: 0;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 0px;
+      }
+    }
   `,
   actionButton: css`
     display: flex;
@@ -5279,8 +5339,9 @@ var ChatSidebar = ({
   defaultCollapsed = false
 }) => {
   const { styles } = useStyles3();
-  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen } = useLatticeChatShellContext();
+  const [isHovered, setIsHovered] = (0, import_react23.useState)(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
@@ -5288,41 +5349,103 @@ var ChatSidebar = ({
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.sidebar, children: [
-    !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantList, {})
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Divider, { className: styles.divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AgentConversations, {})
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.footer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleToggleCollapse,
-          title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          children: menuCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuFoldOutlined, {})
-        }
-      ),
-      !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleSettingsClick,
-          title: "Settings",
-          "aria-label": "Settings",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SettingOutlined, {})
-        }
-      )
-    ] })
-  ] }) });
+  const isCollapsed = menuCollapsed || sideAppVisible;
+  const handleMouseEnter = () => {
+    if (isCollapsed) {
+      setIsHovered(true);
+    }
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        className: styles.sidebar,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.content, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantList, {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Divider, { className: styles.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AgentConversations, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.footer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleToggleCollapse,
+                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSettingsClick,
+                title: "Settings",
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SettingOutlined, {})
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "div",
+      {
+        className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.hoverContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantList, {})
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Divider, { className: styles.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AgentConversations, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.footer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleToggleCollapse,
+                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSettingsClick,
+                title: "Settings",
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SettingOutlined, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
@@ -5357,12 +5480,12 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_antd25 = require("antd");
 var import_icons14 = require("@ant-design/icons");
 var import_antd_style11 = require("antd-style");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var { Text: Text11, Title: Title2 } = import_antd25.Typography;
+var { Text: Text12, Title: Title2 } = import_antd25.Typography;
 var { TextArea } = import_antd25.Input;
 var useStyles4 = (0, import_antd_style11.createStyles)(({ token, css }) => ({
   //   settingsModal: css`
@@ -5724,7 +5847,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles4();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = (0, import_react23.useState)(() => {
+  const [connections, setConnections] = (0, import_react24.useState)(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -5747,21 +5870,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = (0, import_react23.useState)({});
-  const connectionsRef = (0, import_react23.useRef)(connections);
-  (0, import_react23.useEffect)(() => {
+  const [serverConfigs, setServerConfigs] = (0, import_react24.useState)({});
+  const connectionsRef = (0, import_react24.useRef)(connections);
+  (0, import_react24.useEffect)(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = (0, import_react23.useState)(
+  const [activeTabKey, setActiveTabKey] = (0, import_react24.useState)(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = (0, import_react23.useState)("environment");
-  const [loading, setLoading] = (0, import_react23.useState)(false);
-  const [showAddServerModal, setShowAddServerModal] = (0, import_react23.useState)(false);
-  const [newServerUrl, setNewServerUrl] = (0, import_react23.useState)("");
-  const [newServerName, setNewServerName] = (0, import_react23.useState)("");
-  const [newServerApiKey, setNewServerApiKey] = (0, import_react23.useState)("");
-  const [addingServer, setAddingServer] = (0, import_react23.useState)(false);
+  const [activeMenu, setActiveMenu] = (0, import_react24.useState)("environment");
+  const [loading, setLoading] = (0, import_react24.useState)(false);
+  const [showAddServerModal, setShowAddServerModal] = (0, import_react24.useState)(false);
+  const [newServerUrl, setNewServerUrl] = (0, import_react24.useState)("");
+  const [newServerName, setNewServerName] = (0, import_react24.useState)("");
+  const [newServerApiKey, setNewServerApiKey] = (0, import_react24.useState)("");
+  const [addingServer, setAddingServer] = (0, import_react24.useState)(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -5951,7 +6074,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -5960,7 +6083,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -6188,7 +6311,7 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsx)(
         TextArea,
         {
@@ -6267,7 +6390,7 @@ QUEUE_NAME=tasks`,
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.card, children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
           "div",
@@ -6282,12 +6405,12 @@ QUEUE_NAME=tasks`,
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text12, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
                 model.key && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-                  Text11,
+                  Text12,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -6318,7 +6441,7 @@ QUEUE_NAME=tasks`,
         ),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_antd25.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Key *" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input,
               {
@@ -6328,10 +6451,10 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Provider *" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Select,
               {
@@ -6349,7 +6472,7 @@ QUEUE_NAME=tasks`,
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Model Name *" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input,
               {
@@ -6361,7 +6484,7 @@ QUEUE_NAME=tasks`,
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "API Key" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input.Password,
               {
@@ -6371,10 +6494,10 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Base URL" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input,
               {
@@ -6384,7 +6507,7 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_antd25.Space, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -6394,11 +6517,11 @@ QUEUE_NAME=tasks`,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { children: "Enable Streaming" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { children: "Enable Streaming" })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Max Tokens" }),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 import_antd25.Input,
                 {
@@ -6415,7 +6538,7 @@ QUEUE_NAME=tasks`,
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { className: styles.formLabel, children: "Temperature" }),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 import_antd25.Input,
                 {
@@ -6508,7 +6631,7 @@ QUEUE_NAME=tasks`,
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.contentHeader, children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: styles.contentHeaderLeft, children: [
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text11, { className: styles.contentDescription, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(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"
             ] })
@@ -6544,7 +6667,7 @@ QUEUE_NAME=tasks`,
         children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons14.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Title2, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Text12, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
@@ -6552,7 +6675,7 @@ QUEUE_NAME=tasks`,
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons14.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            Text11,
+            Text12,
             {
               type: "secondary",
               style: { textAlign: "center", maxWidth: 400 },
@@ -6577,12 +6700,13 @@ QUEUE_NAME=tasks`,
   }));
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-      import_antd25.Drawer,
+      import_antd25.Modal,
       {
         open,
-        onClose,
+        onCancel: onClose,
+        height: "70%",
+        width: "80%",
         footer: null,
-        width: "100%",
         title: "Settings",
         children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           import_antd25.Tabs,
@@ -6633,7 +6757,7 @@ QUEUE_NAME=tasks`,
         className: styles.addServerModal,
         children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_antd25.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input,
               {
@@ -6643,10 +6767,10 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input,
               {
@@ -6656,10 +6780,10 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
             /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               import_antd25.Input.Password,
               {
@@ -6669,7 +6793,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text12, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }