@axiom-lattice/react-sdk 2.1.13 → 2.1.14

package/dist/index.mjs

@@ -4449,6 +4449,9 @@ var LatticeChatShellContext = createContext4({
   updateConfigValue: () => {
   },
   resetConfig: () => {
+  },
+  settingsModalOpen: false,
+  setSettingsModalOpen: () => {
   }
 });
 var LatticeChatShellContextProvider = ({
@@ -4472,6 +4475,7 @@ var LatticeChatShellContextProvider = ({
     return { ...DEFAULT_CONFIG, ...initialConfig };
   }, [persistToLocalStorage, localStorageKey, initialConfig]);
   const [config, setConfig] = useState17(loadInitialConfig);
+  const [settingsModalOpen, setSettingsModalOpen] = useState17(false);
   const saveToLocalStorage = useCallback8(
     (newConfig) => {
       if (persistToLocalStorage && typeof window !== "undefined") {
@@ -4516,7 +4520,9 @@ var LatticeChatShellContextProvider = ({
         config,
         updateConfig,
         updateConfigValue,
-        resetConfig
+        resetConfig,
+        settingsModalOpen,
+        setSettingsModalOpen
       },
       children
     }
@@ -4741,22 +4747,30 @@ var AssistantContextProvider = ({
     }
   }, [autoLoad, listAssistants]);
   useEffect12(() => {
-    if (state.assistants.length > 0 && !state.currentAssistant) {
-      if (initialAssistantId) {
-        const assistant = state.assistants.find(
-          (a) => a.id === initialAssistantId
-        );
-        if (assistant) {
+    if (state.assistants.length > 0) {
+      const isCurrentAssistantValid = state.currentAssistant && state.assistants.some((a) => a.id === state.currentAssistant?.id);
+      if (!isCurrentAssistantValid) {
+        if (initialAssistantId) {
+          const assistant = state.assistants.find(
+            (a) => a.id === initialAssistantId
+          );
+          if (assistant) {
+            setState((prev) => ({
+              ...prev,
+              currentAssistant: assistant
+            }));
+          } else {
+            setState((prev) => ({
+              ...prev,
+              currentAssistant: prev.assistants[0]
+            }));
+          }
+        } else {
           setState((prev) => ({
             ...prev,
-            currentAssistant: assistant
+            currentAssistant: prev.assistants[0]
           }));
         }
-      } else {
-        setState((prev) => ({
-          ...prev,
-          currentAssistant: prev.assistants[0]
-        }));
       }
     }
   }, [initialAssistantId, state.assistants, state.currentAssistant]);
@@ -5139,7 +5153,6 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState21 } from "react";
 import { Divider as Divider2 } from "antd";
 import {
   MenuFoldOutlined,
@@ -5188,7 +5201,201 @@ var AssistantList = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { createStyles as createStyles11 } from "antd-style";
+import { createStyles as createStyles10 } from "antd-style";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var useStyles3 = createStyles10(({ token, css }) => ({
+  sidebar: css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: transparent;
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: hidden;
+  `,
+  content: 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;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  `,
+  sectionTitle: css`
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 600;
+    color: ${token.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 0 ${token.paddingXS}px;
+    margin-bottom: ${token.marginSM}px;
+  `,
+  footer: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: ${token.paddingSM}px;
+    background: transparent;
+    border-top: 1px solid ${token.colorBorderSecondary};
+    gap: ${token.marginXS}px;
+    flex-shrink: 0;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        ${token.colorBorder},
+        transparent
+      );
+    }
+  `,
+  actionButton: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: ${token.borderRadius}px;
+    border: none;
+    background: ${token.colorBgContainer};
+    color: ${token.colorTextSecondary};
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      background: ${token.colorPrimaryBg};
+      color: ${token.colorPrimary};
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+
+    .anticon {
+      font-size: 16px;
+    }
+  `,
+  divider: css`
+    margin: ${token.marginMD}px 0;
+    border-color: ${token.colorBorderSecondary};
+  `
+}));
+var ChatSidebar = ({
+  onSettingsClick,
+  defaultCollapsed = false
+}) => {
+  const { styles } = useStyles3();
+  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const { setSettingsModalOpen } = useLatticeChatShellContext();
+  const handleToggleCollapse = () => {
+    setMenuCollapsed(!menuCollapsed);
+  };
+  const handleSettingsClick = () => {
+    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, {})
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/components/Chat/LatticeChatView.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var LatticeChatView = (props) => {
+  const { assistantId, thread } = useConversationContext();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    config: { baseURL }
+  } = useLatticeChatShellContext();
+  return assistantId && thread ? /* @__PURE__ */ jsx38(
+    AxiomLatticeProvider,
+    {
+      config: {
+        baseURL,
+        apiKey: "",
+        assistantId,
+        transport: "sse"
+      },
+      children: /* @__PURE__ */ jsx38(
+        LatticeChat,
+        {
+          thread_id: thread?.id,
+          assistant_id: assistantId,
+          name: currentAssistant?.name,
+          description: currentAssistant?.description,
+          menu: /* @__PURE__ */ jsx38(ChatSidebar, {})
+        }
+      )
+    }
+  ) : null;
+};
 
 // src/components/Chat/SettingsModal.tsx
 import { useState as useState20, useEffect as useEffect14, useRef as useRef11 } from "react";
@@ -5217,11 +5424,11 @@ import {
   PlusOutlined,
   CloudServerOutlined
 } from "@ant-design/icons";
-import { createStyles as createStyles10 } from "antd-style";
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+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 { TextArea } = Input;
-var useStyles3 = createStyles10(({ token, css }) => ({
+var useStyles4 = createStyles11(({ token, css }) => ({
   //   settingsModal: css`
   //     .ant-modal {
   //       max-width: 100vw !important;
@@ -5567,19 +5774,19 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ jsx37(EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ jsx39(EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ jsx37(ApiOutlined, {})
+    icon: /* @__PURE__ */ jsx39(ApiOutlined, {})
   }
 ];
 var SettingsModal = ({
   open,
   onClose
 }) => {
-  const { styles } = useStyles3();
+  const { styles } = useStyles4();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
   const [connections, setConnections] = useState20(() => {
     if (typeof window !== "undefined") {
@@ -5675,11 +5882,11 @@ var SettingsModal = ({
       });
       clearTimeout(timeoutId);
       if (response.ok) {
-        updateConnectionStatus(serverId, {
-          connected: true,
-          connecting: false,
-          error: ""
-        });
+        setConnections(
+          (prev) => prev.map(
+            (conn) => conn.id === serverId ? { ...conn, connected: true, connecting: false, error: "" } : { ...conn, connected: false, connecting: false }
+          )
+        );
         if (url !== shellConfig.baseURL) {
           updateConfigValue("baseURL", url);
         }
@@ -5876,6 +6083,15 @@ var SettingsModal = ({
     }
     message4.success("Server deleted");
   };
+  const handleTabChange = (newTabKey) => {
+    setConnections(
+      (prev) => prev.map(
+        (conn) => conn.id === newTabKey ? conn : { ...conn, connected: false, connecting: false }
+        // Disconnect others
+      )
+    );
+    setActiveTabKey(newTabKey);
+  };
   const handleSave = async () => {
     const connection = connections.find((c) => c.id === activeTabKey);
     if (!connection || !connection.connected) {
@@ -6009,25 +6225,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs19("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsxs20("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx39(
         Alert3,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsxs19("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx37(
+          description: /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsxs20("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx39(
                 CheckCircleOutlined4,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ jsx37("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ jsx39("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs19("div", { children: [
-              /* @__PURE__ */ jsx37(ReloadOutlined2, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ jsx37("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ jsxs20("div", { children: [
+              /* @__PURE__ */ jsx39(ReloadOutlined2, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx39("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -6036,8 +6252,8 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx37("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx37(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__ */ jsx37(
+      /* @__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(
         TextArea,
         {
           value: config.envText,
@@ -6114,10 +6330,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs19("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx37("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx37(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." }) }),
-      config.models.map((model, index) => /* @__PURE__ */ jsxs19("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs19(
+    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." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ jsxs20("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs20(
           "div",
           {
             style: {
@@ -6129,12 +6345,12 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs19("div", { children: [
-                /* @__PURE__ */ jsxs19(Text11, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs20("div", { children: [
+                /* @__PURE__ */ jsxs20(Text11, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs19(
+                model.key && /* @__PURE__ */ jsxs20(
                   Text11,
                   {
                     type: "secondary",
@@ -6147,7 +6363,7 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ jsx37(
+              config.models.length > 1 && /* @__PURE__ */ jsx39(
                 Button12,
                 {
                   type: "text",
@@ -6164,10 +6380,10 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs19(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ jsx37(
+        /* @__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(
               Input,
               {
                 placeholder: "e.g., default, gpt-4, claude",
@@ -6176,11 +6392,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx39(
               Select,
               {
                 style: { width: "100%", height: 40 },
@@ -6196,9 +6412,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx39(
               Input,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
@@ -6208,9 +6424,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx39(
               Input.Password,
               {
                 placeholder: "Enter your API key",
@@ -6219,11 +6435,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx39(
               Input,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
@@ -6232,22 +6448,22 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsxs19(Space13, { children: [
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs20(Space13, { children: [
+            /* @__PURE__ */ jsx39(
               Switch,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx39(Text11, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs19("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ jsx37(
+          /* @__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(
                 Input,
                 {
                   type: "number",
@@ -6262,9 +6478,9 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs19("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsxs20("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx39(
                 Input,
                 {
                   type: "number",
@@ -6283,7 +6499,7 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39(
         Button12,
         {
           type: "dashed",
@@ -6311,8 +6527,8 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx39(
         CloudServerOutlined,
         {
           style: {
@@ -6321,14 +6537,14 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ jsx37("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx39("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx39(
         CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ jsx37(
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx39(
         CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
@@ -6339,35 +6555,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx37("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx37(Fragment5, { children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx37("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs19(
+    children: /* @__PURE__ */ jsx39("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx39(Fragment6, { children: /* @__PURE__ */ jsxs20("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx39("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs20(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ jsx37("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ jsx37("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ jsx39("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx39("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs19("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs19("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ jsx37(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs19(Text11, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ jsxs20("div", { className: styles.content, children: [
+        /* @__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: [
               activeMenu === "environment" && "Manage environment variables for the gateway server",
               activeMenu === "models" && "Configure and register model lattices for use by agents"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ jsx37(Button12, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx39(Button12, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx39(
               Button12,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ jsx37(SaveOutlined, {}),
+                icon: /* @__PURE__ */ jsx39(SaveOutlined, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -6375,9 +6591,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx37("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ jsx39("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsx37(
+    ] }) }) : /* @__PURE__ */ jsx39(
       "div",
       {
         style: {
@@ -6389,17 +6605,17 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
-          /* @__PURE__ */ jsx37(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ jsx37(Title2, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs19(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+        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: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
-          /* @__PURE__ */ jsx37(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ jsx37(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ jsx37(
+        ] }) : /* @__PURE__ */ jsxs20(Fragment6, { children: [
+          /* @__PURE__ */ jsx39(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx39(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx39(
             Text11,
             {
               type: "secondary",
@@ -6407,11 +6623,11 @@ QUEUE_NAME=tasks`,
               children: connection.error ? `Failed to connect to ${connection.url}. Please check the server URL and try again.` : `Click "Reconnect" to connect to ${connection.url}`
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39(
             Button12,
             {
               type: "primary",
-              icon: /* @__PURE__ */ jsx37(LinkOutlined, {}),
+              icon: /* @__PURE__ */ jsx39(LinkOutlined, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -6423,8 +6639,8 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsx39(
       Drawer,
       {
         open,
@@ -6432,11 +6648,11 @@ QUEUE_NAME=tasks`,
         footer: null,
         width: "100%",
         title: "Settings",
-        children: /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(
           Tabs2,
           {
             activeKey: activeTabKey,
-            onChange: setActiveTabKey,
+            onChange: handleTabChange,
             type: "editable-card",
             onEdit: (targetKey, action) => {
               if (action === "add") {
@@ -6446,7 +6662,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs19(
+            addIcon: /* @__PURE__ */ jsxs20(
               "div",
               {
                 style: {
@@ -6456,8 +6672,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx37(PlusOutlined, {}),
-                  /* @__PURE__ */ jsx37("span", { children: "Add Server" })
+                  /* @__PURE__ */ jsx39(PlusOutlined, {}),
+                  /* @__PURE__ */ jsx39("span", { children: "Add Server" })
                 ]
               }
             )
@@ -6465,7 +6681,7 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx39(
       Modal,
       {
         title: "Add New Server",
@@ -6479,10 +6695,10 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs19(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ jsx37(
+        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(
               Input,
               {
                 placeholder: "e.g., Production Server",
@@ -6491,11 +6707,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx39(
               Input,
               {
                 placeholder: "e.g., http://localhost:4001",
@@ -6504,11 +6720,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs19("div", { children: [
-            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx39(
               Input.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
@@ -6517,7 +6733,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -6525,215 +6741,26 @@ QUEUE_NAME=tasks`,
   ] });
 };
 
-// src/components/Chat/ChatSidebar.tsx
-import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-var useStyles4 = createStyles11(({ token, css }) => ({
-  sidebar: css`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    background: transparent;
-    border-radius: ${token.borderRadiusLG}px;
-    overflow: hidden;
-  `,
-  content: 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;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  `,
-  sectionTitle: css`
-    font-size: ${token.fontSizeSM}px;
-    font-weight: 600;
-    color: ${token.colorTextSecondary};
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding: 0 ${token.paddingXS}px;
-    margin-bottom: ${token.marginSM}px;
-  `,
-  footer: css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: ${token.paddingSM}px;
-    background: transparent;
-    border-top: 1px solid ${token.colorBorderSecondary};
-    gap: ${token.marginXS}px;
-    flex-shrink: 0;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: linear-gradient(
-        90deg,
-        transparent,
-        ${token.colorBorder},
-        transparent
-      );
-    }
-  `,
-  actionButton: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border-radius: ${token.borderRadius}px;
-    border: none;
-    background: ${token.colorBgContainer};
-    color: ${token.colorTextSecondary};
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-
-    &:hover {
-      background: ${token.colorPrimaryBg};
-      color: ${token.colorPrimary};
-      transform: translateY(-1px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
-    }
-
-    &:active {
-      transform: translateY(0);
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-    }
-
-    .anticon {
-      font-size: 16px;
-    }
-  `,
-  divider: css`
-    margin: ${token.marginMD}px 0;
-    border-color: ${token.colorBorderSecondary};
-  `
-}));
-var ChatSidebar = ({
-  onSettingsClick,
-  defaultCollapsed = false
-}) => {
-  const { styles } = useStyles4();
-  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
-  const [settingsModalOpen, setSettingsModalOpen] = useState21(false);
-  const handleToggleCollapse = () => {
-    setMenuCollapsed(!menuCollapsed);
-  };
-  const handleSettingsClick = () => {
-    setSettingsModalOpen(true);
-    onSettingsClick?.();
-  };
-  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
-    /* @__PURE__ */ jsxs20("div", { className: styles.sidebar, children: [
-      !menuCollapsed && /* @__PURE__ */ jsxs20("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
-          /* @__PURE__ */ jsx38("div", { className: styles.sectionTitle, children: "Assistants" }),
-          /* @__PURE__ */ jsx38(AssistantList, {})
-        ] }),
-        /* @__PURE__ */ jsx38(Divider2, { className: styles.divider }),
-        /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
-          /* @__PURE__ */ jsx38("div", { className: styles.sectionTitle, children: "Threads" }),
-          /* @__PURE__ */ jsx38(AgentConversations, {})
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs20("div", { className: styles.footer, children: [
-        /* @__PURE__ */ jsx38(
-          "button",
-          {
-            className: styles.actionButton,
-            onClick: handleToggleCollapse,
-            title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-            "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-            children: menuCollapsed ? /* @__PURE__ */ jsx38(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx38(MenuFoldOutlined, {})
-          }
-        ),
-        !menuCollapsed && /* @__PURE__ */ jsx38(
-          "button",
-          {
-            className: styles.actionButton,
-            onClick: handleSettingsClick,
-            title: "Settings",
-            "aria-label": "Settings",
-            children: /* @__PURE__ */ jsx38(SettingOutlined, {})
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx38(
-      SettingsModal,
-      {
-        open: settingsModalOpen,
-        onClose: () => setSettingsModalOpen(false)
-      }
-    )
-  ] });
-};
-
-// src/components/Chat/LatticeChatView.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-var LatticeChatView = (props) => {
-  const { assistantId, thread } = useConversationContext();
-  const { currentAssistant } = useAssistantContext();
-  const {
-    config: { baseURL }
-  } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ jsx39(
-    AxiomLatticeProvider,
+// src/components/Chat/AgentServerSetting.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var AgentServerSetting = () => {
+  const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
+  return /* @__PURE__ */ jsx40(
+    SettingsModal,
     {
-      config: {
-        baseURL,
-        apiKey: "",
-        assistantId,
-        transport: "sse"
-      },
-      children: /* @__PURE__ */ jsx39(
-        LatticeChat,
-        {
-          thread_id: thread?.id,
-          assistant_id: assistantId,
-          name: currentAssistant?.name,
-          description: currentAssistant?.description,
-          menu: /* @__PURE__ */ jsx39(ChatSidebar, {})
-        }
-      )
+      open: settingsModalOpen,
+      onClose: () => setSettingsModalOpen(false)
     }
-  ) : null;
+  );
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ jsx40(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ jsx40(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx40(ConversationContextProvider, { children: /* @__PURE__ */ jsx40(LatticeChatView, {}) }) }) });
+  return /* @__PURE__ */ jsxs21(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ jsx41(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx41(ConversationContextProvider, { children: /* @__PURE__ */ jsx41(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx41(AgentServerSetting, {})
+  ] });
 };
 export {
   AgentConversations,