@axiom-lattice/react-sdk 2.1.18 → 2.1.20

package/dist/index.mjs

@@ -972,8 +972,8 @@ var useStyle = createStyles(({ token, css }) => {
       font-family: ${token.fontFamily}, sans-serif;
       position: relative;
       overflow: hidden;
-      padding: 16px;
-      gap: 16px;
+      padding: 8px;
+      gap: 8px;
 
       .ant-prompts {
         color: ${token.colorText};
@@ -994,14 +994,14 @@ var useStyle = createStyles(({ token, css }) => {
       &.open {
         background: transparent;
         box-shadow: none;
-        margin-left: -16px;
+        margin-left: -8px;
         height: 100%;
       }
 
       &.collapsed {
-        width: 16px;
+        width: 8px;
         height: 100%;
-        margin-right: -16px;
+        margin-right: -8px;
         .ant-conversations {
           width: 64px;
         }
@@ -1291,7 +1291,7 @@ import { useState as useState9 } from "react";
 
 // src/components/GenUI/MDResponse.tsx
 import XMarkdown from "@ant-design/x-markdown";
-import { useRef as useRef5, useState as useState8 } from "react";
+import { useRef as useRef5, useState as useState8, useMemo as useMemo2 } from "react";
 import { createStyles as createStyles2 } from "antd-style";
 
 // src/components/GenUI/Code.tsx
@@ -1521,6 +1521,7 @@ var mdComponents = {
 
 // src/components/GenUI/MDResponse.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
+var memoizedMdComponents = mdComponents;
 var useStyles = createStyles2(({ token, css }) => ({
   markdownTableContainer: css`
     overflow-x: auto;
@@ -1610,10 +1611,11 @@ var MDResponse = ({
   noGenUI
 }) => {
   const { styles } = useStyles();
+  const stableComponents = useMemo2(() => memoizedMdComponents, []);
   return /* @__PURE__ */ jsx9("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx9(
     XMarkdown,
     {
-      components: mdComponents,
+      components: stableComponents,
       content,
       paragraphTag: "div"
     }
@@ -2228,7 +2230,7 @@ var WriteTodos = ({
 };
 
 // src/components/GenUI/FileExplorer.tsx
-import { useState as useState11, useEffect as useEffect6, useMemo as useMemo2 } from "react";
+import { useState as useState11, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 import { Splitter, Tree, Empty, Button as Button4, Tooltip, message } from "antd";
 import {
   FolderOutlined,
@@ -2500,7 +2502,7 @@ var FileExplorer = ({
       setSelectedKey(list[0].name);
     }
   }, [files]);
-  const treeData = useMemo2(
+  const treeData = useMemo3(
     () => buildTreeData(fileList, expandedKeys),
     [fileList, expandedKeys]
   );
@@ -2521,7 +2523,7 @@ var FileExplorer = ({
       setExpandedKeys(getAllKeys(treeData));
     }
   }, [treeData.length]);
-  const selectedFile = useMemo2(() => {
+  const selectedFile = useMemo3(() => {
     return fileList.find((f) => f.name === selectedKey);
   }, [fileList, selectedKey]);
   const handleCopy = () => {
@@ -3464,7 +3466,7 @@ import {
   memo,
   useCallback as useCallback7,
   useEffect as useEffect9,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useRef as useRef7,
   useState as useState15
 } from "react";
@@ -3552,7 +3554,7 @@ ${JSON.stringify(tool_call)}
     const content_md = [content, ...tool_calls_md].join("\n");
     return /* @__PURE__ */ jsx25(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx25(MDResponse, { content: content_md }) });
   }, []);
-  const items = useMemo3(
+  const items = useMemo4(
     () => messages.map((message5, index) => ({
       key: message5.id,
       role: message5.role,
@@ -3636,7 +3638,7 @@ import {
   Button as Button11,
   message as message3
 } from "antd";
-import React6, { useEffect as useEffect10, useRef as useRef8, useState as useState16 } from "react";
+import React7, { useEffect as useEffect10, useRef as useRef8, useState as useState16 } from "react";
 
 // src/components/GenUI/HITLContainer.tsx
 import {
@@ -3783,12 +3785,12 @@ var FileExplorerButton = ({}) => {
 
 // src/components/Chat/AgentHeader.tsx
 import { Welcome } from "@ant-design/x";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var { Text: Text10 } = Typography12;
 var AgentHeader = (props) => {
   const { description, avatar, name, extra, extraMeta } = props;
-  const extraMetaComponents = useMemo4(() => {
+  const extraMetaComponents = useMemo5(() => {
     if (extraMeta && extraMeta.length > 0) {
       return extraMeta.map((meta) => {
         const Element = getElement(meta.id)?.card_view;
@@ -3817,7 +3819,17 @@ var AgentHeader = (props) => {
         style: { padding: 8 },
         variant: "borderless",
         description: description ? /* @__PURE__ */ jsx29(Text10, { ellipsis: { tooltip: description }, children: description }) : void 0,
-        icon: avatar ? /* @__PURE__ */ jsx29(Avatar2, { src: avatar, size: 48 }) : /* @__PURE__ */ jsx29(Avatar2, { size: 48, children: name?.charAt(0).toUpperCase() }),
+        icon: /* @__PURE__ */ jsx29(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: avatar ? /* @__PURE__ */ jsx29(Avatar2, { src: avatar, size: 48 }) : /* @__PURE__ */ jsx29(Avatar2, { size: 48, children: name?.charAt(0).toUpperCase() })
+          }
+        ),
         title: name ? name : void 0,
         extra: /* @__PURE__ */ jsxs16(Space12, { children: [
           extra,
@@ -3860,7 +3872,7 @@ var Chating = ({
   const { styles } = useStyle();
   const [headerOpen, setHeaderOpen] = useState16(false);
   const attachmentsRef = useRef8(null);
-  const senderRef = React6.useRef(null);
+  const senderRef = React7.useRef(null);
   const {
     messages,
     sendMessage,
@@ -4509,9 +4521,9 @@ var SideAppViewBrowser = () => {
 };
 
 // src/components/Chat/LatticeChat.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var LatticeChat = (props) => {
-  const { assistant_id, thread_id = "", menu, ...chatingProps } = props;
+  const { assistant_id, thread_id = "", menu, header, ...chatingProps } = props;
   return /* @__PURE__ */ jsx34(
     AgentThreadProvider,
     {
@@ -4522,12 +4534,26 @@ var LatticeChat = (props) => {
         enableReturnStateWhenStreamCompleted: true,
         enableResumeStream: true
       },
-      children: /* @__PURE__ */ jsx34(ChatUIContextProvider, { children: /* @__PURE__ */ jsx34(
-        ColumnLayout,
+      children: /* @__PURE__ */ jsx34(ChatUIContextProvider, { children: /* @__PURE__ */ jsxs20(
+        "div",
         {
-          menu,
-          left: thread_id ? /* @__PURE__ */ jsx34(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx34("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
-          right: /* @__PURE__ */ jsx34(SideAppViewBrowser, {})
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%"
+          },
+          children: [
+            header,
+            /* @__PURE__ */ jsx34(
+              ColumnLayout,
+              {
+                menu,
+                left: thread_id ? /* @__PURE__ */ jsx34(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx34("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
+                right: /* @__PURE__ */ jsx34(SideAppViewBrowser, {})
+              }
+            )
+          ]
         }
       ) })
     }
@@ -4540,7 +4566,7 @@ import {
   useCallback as useCallback10,
   useContext as useContext6,
   useEffect as useEffect13,
-  useMemo as useMemo6,
+  useMemo as useMemo7,
   useRef as useRef10,
   useState as useState20
 } from "react";
@@ -4551,7 +4577,7 @@ import {
   useCallback as useCallback9,
   useContext as useContext5,
   useEffect as useEffect12,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef9,
   useState as useState19
 } from "react";
@@ -4705,7 +4731,7 @@ var AssistantContextProvider = ({
   const {
     config: { baseURL, apiKey = "", transport = "sse" }
   } = useLatticeChatShellContext();
-  const client = useMemo5(
+  const client = useMemo6(
     () => new Client2({
       baseURL,
       apiKey,
@@ -4979,7 +5005,7 @@ var ConversationContextProvider = ({
   const {
     config: { baseURL, apiKey = "", transport = "sse" }
   } = useLatticeChatShellContext();
-  const client = useMemo6(
+  const client = useMemo7(
     () => new Client3({
       baseURL,
       apiKey,
@@ -5077,7 +5103,7 @@ var ConversationContextProvider = ({
       prevAssistantIdRef.current = null;
     }
   }, [assistantId, loadThreads]);
-  const thread = useMemo6(() => {
+  const thread = useMemo7(() => {
     if (!assistantId || !threadId) {
       return null;
     }
@@ -5236,7 +5262,7 @@ var useConversationContext = () => {
 // src/components/Chat/AgentConversations.tsx
 import { Conversations } from "@ant-design/x";
 import { theme } from "antd";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var AgentConversations = () => {
   const { token } = theme.useToken();
@@ -5254,7 +5280,7 @@ var AgentConversations = () => {
     background: "transparent",
     borderRadius: token.borderRadius
   };
-  const threadItems = useMemo7(() => {
+  const threadItems = useMemo8(() => {
     return threads || [];
   }, [threads]);
   const items = threadItems.map((thread2) => ({
@@ -5285,8 +5311,8 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState21 } from "react";
-import { Divider as Divider2 } from "antd";
+import { useState as useState21, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { Divider as Divider2, Tooltip as Tooltip4 } from "antd";
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -5335,7 +5361,7 @@ var AssistantList = () => {
 
 // src/components/Chat/ChatSidebar.tsx
 import { createStyles as createStyles11 } from "antd-style";
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
 var useStyles3 = createStyles11(({ token, css }) => ({
   sidebar: css`
     display: flex;
@@ -5346,6 +5372,11 @@ var useStyles3 = createStyles11(({ token, css }) => ({
     background: transparent;
     border-radius: ${token.borderRadiusLG}px;
     overflow: visible;
+
+    &.firstTimeHighlight {
+      border: 2px dashed ${token.colorPrimary};
+      background: ${token.colorPrimaryBg};
+    }
   `,
   content: css`
     flex: 1;
@@ -5504,8 +5535,34 @@ var useStyles3 = createStyles11(({ token, css }) => ({
   divider: css`
     margin: ${token.marginMD}px 0;
     border-color: ${token.colorBorderSecondary};
+  `,
+  hintTooltip: css`
+    position: absolute;
+    top: ${token.paddingMD}px;
+    left: ${token.paddingMD}px;
+    right: ${token.paddingMD}px;
+    padding: ${token.paddingSM}px ${token.paddingMD}px;
+    background: ${token.colorPrimary};
+    color: ${token.colorTextLightSolid};
+    border-radius: ${token.borderRadius}px;
+    font-size: ${token.fontSizeSM}px;
+    z-index: 1001;
+    animation: slideIn 0.3s ease-out;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+    @keyframes slideIn {
+      from {
+        opacity: 0;
+        transform: translateY(-10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   `
 }));
+var FIRST_COLLAPSE_KEY = "chat-sidebar-first-collapse-seen";
 var ChatSidebar = ({
   onSettingsClick,
   defaultCollapsed = false
@@ -5514,6 +5571,8 @@ var ChatSidebar = ({
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
   const { setSettingsModalOpen } = useLatticeChatShellContext();
   const [isHovered, setIsHovered] = useState21(false);
+  const [isFirstCollapse, setIsFirstCollapse] = useState21(false);
+  const prevIsCollapsedRef = useRef11(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
@@ -5522,77 +5581,109 @@ var ChatSidebar = ({
     onSettingsClick?.();
   };
   const isCollapsed = menuCollapsed || sideAppVisible;
+  useEffect14(() => {
+    const prevIsCollapsed = prevIsCollapsedRef.current;
+    if (isCollapsed) {
+      const hasSeenFirstCollapse = localStorage.getItem(FIRST_COLLAPSE_KEY);
+      if (!hasSeenFirstCollapse) {
+        setIsFirstCollapse(true);
+      }
+    } else if (prevIsCollapsed && !isCollapsed) {
+      setIsFirstCollapse((prev) => {
+        if (prev) {
+          return false;
+        }
+        return prev;
+      });
+    }
+    prevIsCollapsedRef.current = isCollapsed;
+  }, [isCollapsed]);
   const handleMouseEnter = () => {
     if (isCollapsed) {
       setIsHovered(true);
+      if (isFirstCollapse) {
+        localStorage.setItem(FIRST_COLLAPSE_KEY, "true");
+        setIsFirstCollapse(false);
+      }
     }
   };
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsxs21(
       "div",
       {
-        className: styles.sidebar,
+        className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        children: !isCollapsed && /* @__PURE__ */ jsxs20(Fragment5, { children: [
-          /* @__PURE__ */ jsxs20("div", { className: styles.content, children: [
-            /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Assistants" }),
-              /* @__PURE__ */ jsx40(AssistantList, {})
+        children: [
+          /* @__PURE__ */ jsx40(
+            Tooltip4,
+            {
+              title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
+              open: isFirstCollapse,
+              placement: "right",
+              children: isFirstCollapse && /* @__PURE__ */ jsx40("div", { style: { marginTop: "400px" } })
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsxs21(Fragment5, { children: [
+            /* @__PURE__ */ jsxs21("div", { className: styles.content, children: [
+              /* @__PURE__ */ jsxs21("div", { className: styles.section, children: [
+                /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Assistants" }),
+                /* @__PURE__ */ jsx40(AssistantList, {})
+              ] }),
+              /* @__PURE__ */ jsx40(Divider2, { className: styles.divider }),
+              /* @__PURE__ */ jsxs21("div", { className: styles.section, children: [
+                /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Threads" }),
+                /* @__PURE__ */ jsx40(AgentConversations, {})
+              ] })
             ] }),
-            /* @__PURE__ */ jsx40(Divider2, { className: styles.divider }),
-            /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ jsx40(AgentConversations, {})
+            /* @__PURE__ */ jsxs21("div", { className: styles.footer, children: [
+              /* @__PURE__ */ jsx40(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleToggleCollapse,
+                  title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                  "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                  children: isCollapsed ? /* @__PURE__ */ jsx40(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx40(MenuFoldOutlined, {})
+                }
+              ),
+              /* @__PURE__ */ jsx40(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleSettingsClick,
+                  title: "Settings",
+                  "aria-label": "Settings",
+                  children: /* @__PURE__ */ jsx40(SettingOutlined, {})
+                }
+              )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs20("div", { className: styles.footer, children: [
-            /* @__PURE__ */ jsx40(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleToggleCollapse,
-                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ jsx40(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx40(MenuFoldOutlined, {})
-              }
-            ),
-            /* @__PURE__ */ jsx40(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSettingsClick,
-                title: "Settings",
-                "aria-label": "Settings",
-                children: /* @__PURE__ */ jsx40(SettingOutlined, {})
-              }
-            )
           ] })
-        ] })
+        ]
       }
     ),
-    isCollapsed && /* @__PURE__ */ jsxs20(
+    isCollapsed && /* @__PURE__ */ jsxs21(
       "div",
       {
         className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ jsxs20("div", { className: styles.hoverContent, children: [
-            /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
+          /* @__PURE__ */ jsxs21("div", { className: styles.hoverContent, children: [
+            /* @__PURE__ */ jsxs21("div", { className: styles.section, children: [
               /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Assistants" }),
               /* @__PURE__ */ jsx40(AssistantList, {})
             ] }),
             /* @__PURE__ */ jsx40(Divider2, { className: styles.divider }),
-            /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
+            /* @__PURE__ */ jsxs21("div", { className: styles.section, children: [
               /* @__PURE__ */ jsx40("div", { className: styles.sectionTitle, children: "Threads" }),
               /* @__PURE__ */ jsx40(AgentConversations, {})
             ] })
           ] }),
-          /* @__PURE__ */ jsxs20("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsxs21("div", { className: styles.footer, children: [
             /* @__PURE__ */ jsx40(
               "button",
               {
@@ -5652,7 +5743,7 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState22, useEffect as useEffect14, useRef as useRef11 } from "react";
+import { useState as useState22, useEffect as useEffect15, useRef as useRef12 } from "react";
 import {
   Modal,
   Input,
@@ -5678,7 +5769,7 @@ import {
   CloudServerOutlined
 } from "@ant-design/icons";
 import { createStyles as createStyles12 } from "antd-style";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 var { Text: Text13, Title: Title2 } = Typography15;
 var { TextArea } = Input;
 var useStyles4 = createStyles12(({ token, css }) => ({
@@ -6065,8 +6156,8 @@ var SettingsModal = ({
     return [];
   });
   const [serverConfigs, setServerConfigs] = useState22({});
-  const connectionsRef = useRef11(connections);
-  useEffect14(() => {
+  const connectionsRef = useRef12(connections);
+  useEffect15(() => {
     connectionsRef.current = connections;
   }, [connections]);
   const [activeTabKey, setActiveTabKey] = useState22(
@@ -6268,7 +6359,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -6277,7 +6368,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -6478,13 +6569,13 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs21("div", { className: styles.formContainer, children: [
+    return /* @__PURE__ */ jsxs22("div", { className: styles.formContainer, children: [
       /* @__PURE__ */ jsx42(
         Alert3,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs21("div", { children: [
-            /* @__PURE__ */ jsxs21("div", { style: { marginBottom: 8 }, children: [
+          description: /* @__PURE__ */ jsxs22("div", { children: [
+            /* @__PURE__ */ jsxs22("div", { style: { marginBottom: 8 }, children: [
               /* @__PURE__ */ jsx42(
                 CheckCircleOutlined4,
                 {
@@ -6494,7 +6585,7 @@ var SettingsModal = ({
               /* @__PURE__ */ jsx42("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs21("div", { children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
               /* @__PURE__ */ jsx42(ReloadOutlined2, { style: { color: "#faad14", marginRight: 8 } }),
               /* @__PURE__ */ jsx42("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
@@ -6583,10 +6674,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs21("div", { className: styles.formContainer, children: [
+    return /* @__PURE__ */ jsxs22("div", { className: styles.formContainer, children: [
       /* @__PURE__ */ jsx42("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx42(Text13, { 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__ */ jsxs21("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs21(
+      config.models.map((model, index) => /* @__PURE__ */ jsxs22("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             style: {
@@ -6598,12 +6689,12 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs21("div", { children: [
-                /* @__PURE__ */ jsxs21(Text13, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs22("div", { children: [
+                /* @__PURE__ */ jsxs22(Text13, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs21(
+                model.key && /* @__PURE__ */ jsxs22(
                   Text13,
                   {
                     type: "secondary",
@@ -6633,8 +6724,8 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs21(Space14, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs21("div", { children: [
+        /* @__PURE__ */ jsxs22(Space14, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Key *" }),
             /* @__PURE__ */ jsx42(
               Input,
@@ -6647,7 +6738,7 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Provider *" }),
             /* @__PURE__ */ jsx42(
               Select,
@@ -6665,7 +6756,7 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Model Name *" }),
             /* @__PURE__ */ jsx42(
               Input,
@@ -6677,7 +6768,7 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "API Key" }),
             /* @__PURE__ */ jsx42(
               Input.Password,
@@ -6690,7 +6781,7 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Base URL" }),
             /* @__PURE__ */ jsx42(
               Input,
@@ -6703,7 +6794,7 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsxs21(Space14, { children: [
+          /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsxs22(Space14, { children: [
             /* @__PURE__ */ jsx42(
               Switch,
               {
@@ -6713,8 +6804,8 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs21("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs21("div", { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs22("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Max Tokens" }),
               /* @__PURE__ */ jsx42(
                 Input,
@@ -6731,7 +6822,7 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs21("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsxs22("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsx42(Text13, { className: styles.formLabel, children: "Temperature" }),
               /* @__PURE__ */ jsx42(
                 Input,
@@ -6780,7 +6871,7 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center" }, children: [
+    return /* @__PURE__ */ jsxs22("div", { style: { display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx42(
         CloudServerOutlined,
         {
@@ -6808,8 +6899,8 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx42("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx42(Fragment6, { children: /* @__PURE__ */ jsxs21("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx42("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs21(
+    children: /* @__PURE__ */ jsx42("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx42(Fragment6, { children: /* @__PURE__ */ jsxs22("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx42("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs22(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
@@ -6821,16 +6912,16 @@ QUEUE_NAME=tasks`,
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs21("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs21("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs21("div", { className: styles.contentHeaderLeft, children: [
+      /* @__PURE__ */ jsxs22("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs22("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs22("div", { className: styles.contentHeaderLeft, children: [
             /* @__PURE__ */ jsx42(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs21(Text13, { className: styles.contentDescription, children: [
+            /* @__PURE__ */ jsxs22(Text13, { className: styles.contentDescription, children: [
               activeMenu === "environment" && "Manage environment variables for the gateway server",
               activeMenu === "models" && "Configure and register model lattices for use by agents"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: styles.contentHeaderRight, children: [
+          /* @__PURE__ */ jsxs22("div", { className: styles.contentHeaderRight, children: [
             /* @__PURE__ */ jsx42(Button14, { onClick: onClose, children: "Cancel" }),
             /* @__PURE__ */ jsx42(
               Button14,
@@ -6858,14 +6949,14 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs21(Fragment6, { children: [
+        children: connection.connecting ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
           /* @__PURE__ */ jsx42(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
           /* @__PURE__ */ jsx42(Title2, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs21(Text13, { type: "secondary", style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsxs22(Text13, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs21(Fragment6, { children: [
+        ] }) : /* @__PURE__ */ jsxs22(Fragment6, { children: [
           /* @__PURE__ */ jsx42(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
           /* @__PURE__ */ jsx42(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
           /* @__PURE__ */ jsx42(
@@ -6892,7 +6983,7 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
     /* @__PURE__ */ jsx42(
       Modal,
       {
@@ -6916,7 +7007,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs21(
+            addIcon: /* @__PURE__ */ jsxs22(
               "div",
               {
                 style: {
@@ -6949,8 +7040,8 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs21(Space14, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs21("div", { children: [
+        children: /* @__PURE__ */ jsxs22(Space14, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
             /* @__PURE__ */ jsx42(
               Input,
@@ -6963,7 +7054,7 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
             /* @__PURE__ */ jsx42(
               Input,
@@ -6976,7 +7067,7 @@ QUEUE_NAME=tasks`,
             ),
             /* @__PURE__ */ jsx42(Text13, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsxs22("div", { children: [
             /* @__PURE__ */ jsx42(Text13, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
             /* @__PURE__ */ jsx42(
               Input.Password,
@@ -7009,9 +7100,9 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx44, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ jsxs22(LatticeChatShellContextProvider, { ...props, children: [
+  return /* @__PURE__ */ jsxs23(LatticeChatShellContextProvider, { ...props, children: [
     /* @__PURE__ */ jsx44(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx44(ConversationContextProvider, { children: /* @__PURE__ */ jsx44(LatticeChatView, {}) }) }),
     /* @__PURE__ */ jsx44(AgentServerSetting, {})
   ] });