@axiom-lattice/react-sdk 2.1.11 → 2.1.13

package/dist/index.js

@@ -31,14 +31,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AgentConversations: () => AgentConversations,
   AgentThreadProvider: () => AgentThreadProvider,
+  AssistantContext: () => AssistantContext,
+  AssistantContextProvider: () => AssistantContextProvider,
   AxiomLatticeProvider: () => AxiomLatticeProvider,
   ChatUIContext: () => ChatUIContext,
   ChatUIContextProvider: () => ChatUIContextProvider,
   Chating: () => Chating,
   ColumnLayout: () => ColumnLayout,
+  ConversationContext: () => ConversationContext,
+  ConversationContextProvider: () => ConversationContextProvider,
   FileExplorer: () => FileExplorer,
   LatticeChat: () => LatticeChat,
+  LatticeChatShell: () => LatticeChatShell,
+  LatticeChatShellContext: () => LatticeChatShellContext,
+  LatticeChatShellContextProvider: () => LatticeChatShellContextProvider,
   MDMermaid: () => MDMermaid,
   MDResponse: () => MDResponse,
   MDViewFormItem: () => MDViewFormItem,
@@ -49,10 +57,12 @@ __export(index_exports, {
   useAgentGraph: () => useAgentGraph,
   useAgentState: () => useAgentState,
   useAgentThreadContext: () => useAgentThreadContext,
+  useAssistantContext: () => useAssistantContext,
   useAxiomLattice: () => useAxiomLattice,
   useChat: () => useChat,
   useChatUIContext: () => useChatUIContext,
-  useThread: () => useThread
+  useConversationContext: () => useConversationContext,
+  useLatticeChatShellContext: () => useLatticeChatShellContext
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -111,7 +121,6 @@ function useChat(threadId, options = {}) {
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null,
     interrupts: void 0,
     ...options.enableReturnStateWhenStreamCompleted ? { agentState: null } : {}
   });
@@ -189,7 +198,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message4, files, ...rest } = input || {};
+      const { message: message5, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -198,7 +207,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -435,10 +444,17 @@ function AgentThreadProvider({
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null,
     interrupts: void 0,
     agentState: null
   });
+  (0, import_react3.useEffect)(() => {
+    setState((prev) => ({
+      ...prev,
+      assistantId: clientAssistantId,
+      tenantId,
+      threadId
+    }));
+  }, [clientAssistantId, tenantId, threadId]);
   const stopStreamingRef = (0, import_react3.useRef)(null);
   const chunkMessageMerger = (0, import_react3.useRef)((0, import_client_sdk3.createSimpleMessageMerger)());
   const lastAgentStateCreatedAtRef = (0, import_react3.useRef)(null);
@@ -505,8 +521,7 @@ function AgentThreadProvider({
         ...prev,
         todos: todos || prev.todos,
         messages: updatedMessages,
-        isLoading: true,
-        streamingMessage: null
+        isLoading: true
       }));
     },
     []
@@ -521,16 +536,15 @@ function AgentThreadProvider({
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message4, files, ...rest } = input || {};
+      const { message: message5, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
-        error: null,
-        streamingMessage: null
+        error: null
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -569,8 +583,7 @@ function AgentThreadProvider({
               setState((prev) => ({
                 ...prev,
                 isLoading: false,
-                error,
-                streamingMessage: null
+                error
               }));
               stopStreamingRef.current = null;
             }
@@ -620,111 +633,148 @@ function AgentThreadProvider({
       setState((prev) => ({
         ...prev,
         messages: currentMessages,
-        isLoading: false,
-        streamingMessage: null
+        isLoading: false
       }));
     }
   }, []);
-  const loadMessages = (0, import_react3.useCallback)(
-    async (limit) => {
+  const resumeStream = (0, import_react3.useCallback)(
+    (messageId) => {
       if (!threadId) {
-        return;
+        throw new Error("Thread ID is required to resume stream");
+      }
+      let targetMessageId;
+      if (messageId) {
+        targetMessageId = messageId;
+      } else {
+        const messages = chunkMessageMerger.current.getMessages();
+        const lastMessage = messages[messages.length - 1];
+        if (!lastMessage) {
+          throw new Error(
+            "No message ID provided and no messages found in context"
+          );
+        }
+        targetMessageId = lastMessage.id;
       }
       if (stopStreamingRef.current) {
         stopStreamingRef.current();
         stopStreamingRef.current = null;
       }
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const agentState = await client.getAgentState(threadId);
-        const currentCreatedAt = agentState?.createdAt;
-        const needsUpdate = !lastAgentStateCreatedAtRef.current || currentCreatedAt !== lastAgentStateCreatedAtRef.current;
-        if (currentCreatedAt) {
-          lastAgentStateCreatedAtRef.current = currentCreatedAt;
-        }
-        let needUpdateFields = {};
-        let fetchedMessages = [];
-        needUpdateFields.agentState = agentState;
-        needUpdateFields.todos = agentState?.values?.todos;
-        const interrupts = agentState?.tasks?.flatMap(
-          (task) => {
-            return task.interrupts.map((interrupt) => {
-              return {
-                id: interrupt.id,
-                value: interrupt.value,
-                role: "ai",
-                type: "interrupt"
-              };
-            });
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        error: null
+      }));
+      const resumeStreamOptions = {
+        threadId,
+        messageId: targetMessageId,
+        knownContent: "",
+        pollInterval: options.resumeStreamPollInterval || 100
+      };
+      const stopResumeStream = client.resumeStream(
+        resumeStreamOptions,
+        handleStreamEvent,
+        async () => {
+          setState((prev) => ({
+            ...prev,
+            isLoading: false
+          }));
+          if (options.enableReturnStateWhenStreamCompleted) {
+            await fetchAndUpdateAgentState(threadId);
           }
-        );
-        needUpdateFields.interrupts = interrupts;
-        fetchedMessages = await client.getMessages({ threadId });
-        needUpdateFields.messages = fetchedMessages;
-        chunkMessageMerger.current.reset();
-        chunkMessageMerger.current.initialMessages(fetchedMessages);
-        setState((prev) => ({
-          ...prev,
-          ...needUpdateFields,
-          isLoading: false
-        }));
-        if (options.enableResumeStream && fetchedMessages.length > 0) {
-          const lastMessage = fetchedMessages[fetchedMessages.length - 1];
-          chunkMessageMerger.current.removeMessageById(lastMessage.id);
-          const stopResumeStream = client.resumeStream(
-            {
-              threadId,
-              messageId: lastMessage.id,
-              knownContent: "",
-              pollInterval: options.resumeStreamPollInterval || 100
-            },
-            handleStreamEvent,
-            async () => {
-              setState((prev) => ({
-                ...prev,
-                isLoading: false
-              }));
-              if (options.enableReturnStateWhenStreamCompleted) {
-                await fetchAndUpdateAgentState(threadId);
-              }
-              stopStreamingRef.current = null;
-            },
-            (error) => {
-              console.error("Resume stream error:", error);
-              setState((prev) => ({
-                ...prev,
-                error
-              }));
-              stopStreamingRef.current = null;
-            }
-          );
-          stopStreamingRef.current = stopResumeStream;
+          stopStreamingRef.current = null;
+        },
+        (error) => {
+          console.error("Resume stream error:", error);
+          setState((prev) => ({
+            ...prev,
+            isLoading: false,
+            error
+          }));
+          stopStreamingRef.current = null;
         }
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-      }
+      );
+      stopStreamingRef.current = stopResumeStream;
+      return stopResumeStream;
     },
     [
       client,
       threadId,
-      options.enableResumeStream,
       options.resumeStreamPollInterval,
+      options.enableReturnStateWhenStreamCompleted,
       handleStreamEvent,
       fetchAndUpdateAgentState
     ]
   );
+  const loadMessages = (0, import_react3.useCallback)(async () => {
+    if (!threadId) {
+      return;
+    }
+    if (stopStreamingRef.current) {
+      stopStreamingRef.current();
+      stopStreamingRef.current = null;
+    }
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const agentState = await client.getAgentState(threadId);
+      const currentCreatedAt = agentState?.createdAt;
+      const needsUpdate = !lastAgentStateCreatedAtRef.current || currentCreatedAt !== lastAgentStateCreatedAtRef.current;
+      if (currentCreatedAt) {
+        lastAgentStateCreatedAtRef.current = currentCreatedAt;
+      }
+      let needUpdateFields = {};
+      let fetchedMessages = [];
+      needUpdateFields.agentState = agentState;
+      needUpdateFields.todos = agentState?.values?.todos;
+      const interrupts = agentState?.tasks?.flatMap(
+        (task) => {
+          return task.interrupts.map((interrupt) => {
+            return {
+              id: interrupt.id,
+              value: interrupt.value,
+              role: "ai",
+              type: "interrupt"
+            };
+          });
+        }
+      );
+      needUpdateFields.interrupts = interrupts;
+      fetchedMessages = await client.getMessages({ threadId });
+      needUpdateFields.messages = fetchedMessages;
+      chunkMessageMerger.current.reset();
+      chunkMessageMerger.current.initialMessages(fetchedMessages);
+      setState((prev) => ({
+        ...prev,
+        ...needUpdateFields,
+        isLoading: false
+      }));
+      if (options.enableResumeStream && fetchedMessages.length > 0) {
+        const lastMessage = fetchedMessages[fetchedMessages.length - 1];
+        chunkMessageMerger.current.removeMessageById(lastMessage.id);
+        resumeStream(lastMessage.id);
+      }
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: error instanceof Error ? error : new Error(String(error))
+      }));
+    }
+  }, [
+    client,
+    threadId,
+    options.enableResumeStream,
+    options.resumeStreamPollInterval,
+    handleStreamEvent,
+    fetchAndUpdateAgentState,
+    resumeStream
+  ]);
   const clearMessages = (0, import_react3.useCallback)(() => {
     chunkMessageMerger.current.reset();
     lastAgentStateCreatedAtRef.current = null;
     setState((prev) => ({
       ...prev,
       messages: [],
-      interrupts: void 0,
-      streamingMessage: null
+      interrupts: void 0
     }));
   }, []);
   const clearError = (0, import_react3.useCallback)(() => {
@@ -751,6 +801,7 @@ function AgentThreadProvider({
     state,
     sendMessage,
     stopStreaming,
+    resumeStream,
     loadMessages,
     clearMessages,
     clearError
@@ -774,155 +825,28 @@ function useAgentChat(options) {
     ...context.state,
     sendMessage: context.sendMessage,
     stopStreaming: context.stopStreaming,
+    resumeStream: context.resumeStream,
     loadMessages: context.loadMessages,
     clearMessages: context.clearMessages,
     clearError: context.clearError
   };
 }
 
-// src/hooks/useThread.ts
-var import_react4 = require("react");
-function useThread() {
-  const client = useAxiomLattice();
-  const [state, setState] = (0, import_react4.useState)({
-    threads: [],
-    currentThread: null,
-    isLoading: false,
-    error: null
-  });
-  const createThread = (0, import_react4.useCallback)(
-    async (options = {}) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const threadId = await client.createThread(options);
-        const thread = await client.getThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          threads: [...prev.threads, thread],
-          currentThread: thread,
-          isLoading: false
-        }));
-        return threadId;
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
-      }
-    },
-    [client]
-  );
-  const getThread = (0, import_react4.useCallback)(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const thread = await client.getThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false
-        }));
-        return thread;
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
-      }
-    },
-    [client]
-  );
-  const listThreads = (0, import_react4.useCallback)(
-    async (limit, offset) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const threads = await client.listThreads({ limit, offset });
-        setState((prev) => ({
-          ...prev,
-          threads,
-          isLoading: false
-        }));
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-      }
-    },
-    [client]
-  );
-  const deleteThread = (0, import_react4.useCallback)(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        await client.deleteThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          threads: prev.threads.filter((t) => t.id !== threadId),
-          currentThread: prev.currentThread?.id === threadId ? null : prev.currentThread,
-          isLoading: false
-        }));
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
-      }
-    },
-    [client]
-  );
-  const selectThread = (0, import_react4.useCallback)(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const thread = await client.getThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          currentThread: thread,
-          isLoading: false
-        }));
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
-      }
-    },
-    [client]
-  );
-  return {
-    ...state,
-    createThread,
-    getThread,
-    listThreads,
-    deleteThread,
-    selectThread
-  };
-}
-
 // src/hooks/useAgentState.ts
-var import_react5 = require("react");
+var import_react4 = require("react");
 function useAgentState(threadId, options = {}) {
   const client = useAxiomLattice();
-  const [agentState, setAgentState] = (0, import_react5.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const pollingIntervalRef = (0, import_react5.useRef)(null);
-  const pollingTimeoutRef = (0, import_react5.useRef)(null);
+  const [agentState, setAgentState] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const pollingIntervalRef = (0, import_react4.useRef)(null);
+  const pollingTimeoutRef = (0, import_react4.useRef)(null);
   const {
     pollingInterval = 2e3,
     // 2 seconds by default
     autoStart = true
   } = options;
-  const fetchAgentState = (0, import_react5.useCallback)(async () => {
+  const fetchAgentState = (0, import_react4.useCallback)(async () => {
     if (!threadId) {
       return;
     }
@@ -937,7 +861,7 @@ function useAgentState(threadId, options = {}) {
       setIsLoading(false);
     }
   }, [client, threadId]);
-  const startPolling = (0, import_react5.useCallback)(() => {
+  const startPolling = (0, import_react4.useCallback)(() => {
     if (!threadId) {
       return;
     }
@@ -958,17 +882,17 @@ function useAgentState(threadId, options = {}) {
     };
     poll();
   }, [threadId, pollingInterval, fetchAgentState]);
-  const stopPolling = (0, import_react5.useCallback)(() => {
+  const stopPolling = (0, import_react4.useCallback)(() => {
     pollingIntervalRef.current = null;
     if (pollingTimeoutRef.current) {
       clearTimeout(pollingTimeoutRef.current);
       pollingTimeoutRef.current = null;
     }
   }, []);
-  const refresh = (0, import_react5.useCallback)(async () => {
+  const refresh = (0, import_react4.useCallback)(async () => {
     await fetchAgentState();
   }, [fetchAgentState]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (threadId && autoStart) {
       startPolling();
     } else {
@@ -989,13 +913,13 @@ function useAgentState(threadId, options = {}) {
 }
 
 // src/hooks/useAgentGraph.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 function useAgentGraph() {
   const client = useAxiomLattice();
-  const [graphImage, setGraphImage] = (0, import_react6.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const fetchGraph = (0, import_react6.useCallback)(async () => {
+  const [graphImage, setGraphImage] = (0, import_react5.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const fetchGraph = (0, import_react5.useCallback)(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -1019,9 +943,9 @@ function useAgentGraph() {
 __reExport(index_exports, require("@axiom-lattice/protocols"), module.exports);
 
 // src/components/Chat/ChatUIContext.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var ChatUIContext = (0, import_react7.createContext)({
+var ChatUIContext = (0, import_react6.createContext)({
   sideAppVisible: false,
   setSideAppVisible: () => {
   },
@@ -1034,22 +958,26 @@ var ChatUIContext = (0, import_react7.createContext)({
   openSideApp: () => {
   },
   closeSideApp: () => {
+  },
+  menuCollapsed: false,
+  setMenuCollapsed: () => {
   }
 });
 var ChatUIContextProvider = ({
   children
 }) => {
-  const [sideAppVisible, setSideAppVisible] = (0, import_react7.useState)(false);
-  const [sideAppSize, setSideAppSize] = (0, import_react7.useState)("large");
-  const [sideAppSelectedCard, setSideAppSelectedCard] = (0, import_react7.useState)(null);
-  const openSideApp = (0, import_react7.useCallback)(
+  const [sideAppVisible, setSideAppVisible] = (0, import_react6.useState)(false);
+  const [sideAppSize, setSideAppSize] = (0, import_react6.useState)("large");
+  const [sideAppSelectedCard, setSideAppSelectedCard] = (0, import_react6.useState)(null);
+  const [menuCollapsed, setMenuCollapsed] = (0, import_react6.useState)(false);
+  const openSideApp = (0, import_react6.useCallback)(
     (card) => {
       setSideAppSelectedCard(card);
       setSideAppVisible(true);
     },
     [setSideAppSelectedCard, setSideAppVisible]
   );
-  const closeSideApp = (0, import_react7.useCallback)(() => {
+  const closeSideApp = (0, import_react6.useCallback)(() => {
     setSideAppSelectedCard(null);
     setSideAppVisible(false);
   }, [setSideAppSelectedCard, setSideAppVisible]);
@@ -1064,14 +992,16 @@ var ChatUIContextProvider = ({
         sideAppSelectedCard,
         setSideAppSelectedCard,
         openSideApp,
-        closeSideApp
+        closeSideApp,
+        menuCollapsed,
+        setMenuCollapsed
       },
       children
     }
   );
 };
 var useChatUIContext = () => {
-  return (0, import_react7.useContext)(ChatUIContext);
+  return (0, import_react6.useContext)(ChatUIContext);
 };
 
 // src/components/Chat/useStyle.tsx
@@ -1089,7 +1019,6 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
       position: relative;
       overflow: hidden;
       padding: 16px;
-      padding-top: 2px;
       gap: 16px;
 
       .ant-prompts {
@@ -1098,7 +1027,7 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
     `,
     menu: css`
       background: ${token.colorBgContainer}90;
-      width: 280px;
+      width: 240px;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -1216,6 +1145,17 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
         min-width: 200px;
         max-width: 466px;
       }
+      .ant-bubble-content-updating {
+        background-image: linear-gradient(
+          90deg,
+          #ff6b23 0%,
+          #af3cb8 31%,
+          #53b6ff 89%
+        );
+        background-size: 100% 2px;
+        background-repeat: no-repeat;
+        background-position: bottom;
+      }
     `,
     detailPanel: css`
       display: flex;
@@ -1350,10 +1290,25 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
 
 // src/components/Chat/ColumnLayout.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ColumnLayout = ({ left, right }) => {
+var ColumnLayout = ({
+  left,
+  right,
+  logo,
+  menu
+}) => {
   const { styles } = useStyle();
-  const { sideAppVisible, sideAppSize, sideAppSelectedCard } = useChatUIContext();
+  const { sideAppVisible, sideAppSize, sideAppSelectedCard, menuCollapsed } = useChatUIContext();
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `fina_chat ${styles.layout}`, children: [
+    menu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: `${styles.menu} ${"open"} ${menuCollapsed ? "collapsed" : ""}`,
+        children: [
+          logo,
+          menu
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${styles.mainContent} ${sideAppVisible ? "open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${styles.chat}`, children: left }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
@@ -1373,28 +1328,28 @@ var import_icons12 = require("@ant-design/icons");
 
 // src/components/GenUI/elements/confirm_feedback.tsx
 var import_antd = require("antd");
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/components/GenUI/MDResponse.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_antd_style2 = require("antd-style");
 var import_rehype_raw = __toESM(require("rehype-raw"));
 
 // src/components/GenUI/MDMermaid.tsx
 var import_mermaid = __toESM(require("mermaid"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_uuid = require("uuid");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var MDMermaid = ({ children = [] }) => {
-  const domId = (0, import_react8.useRef)(`dom${(0, import_uuid.v4)()}`);
+  const domId = (0, import_react7.useRef)(`dom${(0, import_uuid.v4)()}`);
   const code = String(children);
-  const target = (0, import_react8.useRef)(null);
-  const targetInternal = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const target = (0, import_react7.useRef)(null);
+  const targetInternal = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     if (target.current && code) {
       import_mermaid.default.initialize({
         startOnLoad: true,
@@ -1551,7 +1506,7 @@ var MDResponse = ({
   noGenUI
 }) => {
   const { styles } = useStyles();
-  const config = (0, import_react9.useMemo)(
+  const config = (0, import_react8.useMemo)(
     () => ({
       components: {
         a({ node, ...props }) {
@@ -1623,9 +1578,9 @@ var MDViewFormItem = ({ value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MDResponse, { content: value || "" });
 };
 var IFrameCard = ({ src }) => {
-  const containerRef = (0, import_react9.useRef)(null);
-  const [width, setWidth] = (0, import_react9.useState)("640px");
-  const [height, setHeight] = (0, import_react9.useState)("320px");
+  const containerRef = (0, import_react8.useRef)(null);
+  const [width, setWidth] = (0, import_react8.useState)("640px");
+  const [height, setHeight] = (0, import_react8.useState)("320px");
   const valid_images = [
     "jpg",
     "jpeg",
@@ -1655,11 +1610,11 @@ var ConfirmFeedback = ({
   data,
   interactive = true
 }) => {
-  const { message: message4, type, config, feedback, options } = data ?? {};
+  const { message: message5, type, config, feedback, options } = data ?? {};
   const { sendMessage } = useAgentChat();
-  const [clicked, setClicked] = (0, import_react10.useState)(false);
+  const [clicked, setClicked] = (0, import_react9.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MDResponse, { content: message4 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MDResponse, { content: message5 }),
     options ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_antd.Button,
       {
@@ -1736,13 +1691,13 @@ var ConfirmFeedback = ({
 
 // src/components/GenUI/elements/generic_data_table.tsx
 var import_antd2 = require("antd");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_icons = require("@ant-design/icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var { Text: Text2 } = import_antd2.Typography;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message4 } = data ?? {};
-  const [expandedRowKeys, setExpandedRowKeys] = (0, import_react11.useState)([]);
+  const { dataSource, message: message5 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = (0, import_react10.useState)([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
     ...item,
@@ -1825,7 +1780,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message5 || "" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Space, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_antd2.Button,
@@ -1846,8 +1801,8 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
               onClick: () => {
                 openSideApp({
                   component_key: "generic_data_table",
-                  message: message4 || "",
-                  data: { dataSource, message: message4 }
+                  message: message5 || "",
+                  data: { dataSource, message: message5 }
                 });
               },
               children: [
@@ -2351,7 +2306,7 @@ var WriteTodos = ({
 };
 
 // src/components/GenUI/FileExplorer.tsx
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_antd7 = require("antd");
 var import_icons7 = require("@ant-design/icons");
 var import_antd_style5 = require("antd-style");
@@ -2583,17 +2538,17 @@ var FileExplorer = ({
 }) => {
   const { files } = data ?? {};
   const { styles, cx } = useStyles2();
-  const [fileList, setFileList] = (0, import_react12.useState)([]);
-  const [selectedKey, setSelectedKey] = (0, import_react12.useState)("");
-  const [expandedKeys, setExpandedKeys] = (0, import_react12.useState)([]);
-  const [copied, setCopied] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const [fileList, setFileList] = (0, import_react11.useState)([]);
+  const [selectedKey, setSelectedKey] = (0, import_react11.useState)("");
+  const [expandedKeys, setExpandedKeys] = (0, import_react11.useState)([]);
+  const [copied, setCopied] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     if (copied) {
       const timer = setTimeout(() => setCopied(false), 2e3);
       return () => clearTimeout(timer);
     }
   }, [copied]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     let list = [];
     if (Array.isArray(files)) {
       list = files;
@@ -2609,11 +2564,11 @@ var FileExplorer = ({
       setSelectedKey(list[0].name);
     }
   }, [files]);
-  const treeData = (0, import_react12.useMemo)(
+  const treeData = (0, import_react11.useMemo)(
     () => buildTreeData(fileList, expandedKeys),
     [fileList, expandedKeys]
   );
-  (0, import_react12.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (treeData.length > 0 && expandedKeys.length === 0) {
       const getAllKeys = (nodes) => {
         let keys = [];
@@ -2630,7 +2585,7 @@ var FileExplorer = ({
       setExpandedKeys(getAllKeys(treeData));
     }
   }, [treeData.length]);
-  const selectedFile = (0, import_react12.useMemo)(() => {
+  const selectedFile = (0, import_react11.useMemo)(() => {
     return fileList.find((f) => f.name === selectedKey);
   }, [fileList, selectedKey]);
   const handleCopy = () => {
@@ -2743,7 +2698,7 @@ var FileExplorer = ({
 var import_x = require("@ant-design/x");
 var import_antd8 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var AttachmentsCard = ({
   data,
@@ -2752,8 +2707,8 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text11 } = import_antd8.Typography;
-  const [showAll, setShowAll] = (0, import_react13.useState)(false);
+  const { Text: Text12 } = import_antd8.Typography;
+  const [showAll, setShowAll] = (0, import_react12.useState)(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
     switch (size) {
@@ -2827,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)(
-    Text11,
+    Text12,
     {
       type: "secondary",
       style: {
@@ -2899,7 +2854,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -2934,14 +2889,14 @@ var AttachmentsCard = ({
 
 // src/components/GenUI/elements/attachments_viewer_side_app.tsx
 var import_antd9 = require("antd");
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function AttachmentsViewerSideApp({
   data,
   component_key
 }) {
-  const [fileUri, setFileUri] = (0, import_react14.useState)();
-  const [loading, setLoading] = (0, import_react14.useState)(true);
+  const [fileUri, setFileUri] = (0, import_react13.useState)();
+  const [loading, setLoading] = (0, import_react13.useState)(true);
   const { file_id } = data ?? {};
   if (loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_antd9.Skeleton, { active: true });
@@ -3004,7 +2959,7 @@ function AttachmentsViewerSideApp({
 var import_antd11 = require("antd");
 
 // src/components/GenUI/elements/ContentPreviewCollapse.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_antd10 = require("antd");
 var import_antd_style6 = require("antd-style");
 var import_icons8 = require("@ant-design/icons");
@@ -3074,18 +3029,18 @@ var ContentPreviewCollapse = ({
   showAllText = "Show all content",
   showLessText = "Show less"
 }) => {
-  const [showFullContent, setShowFullContent] = (0, import_react15.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react15.useState)(false);
-  const contentRef = (0, import_react15.useRef)(null);
+  const [showFullContent, setShowFullContent] = (0, import_react14.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react14.useState)(false);
+  const contentRef = (0, import_react14.useRef)(null);
   const showShadow = isOverflowing && !showFullContent;
   const { styles, cx } = useStyle4({ showShadow });
-  const checkOverflow = (0, import_react15.useCallback)(() => {
+  const checkOverflow = (0, import_react14.useCallback)(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
       setIsOverflowing(scrollHeight > collapsedMaxHeight);
     }
   }, [collapsedMaxHeight]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const element = contentRef.current;
     if (!element) return;
     checkOverflow();
@@ -3270,8 +3225,7 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 var { Text: Text8 } = import_antd13.Typography;
 var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => ({
   card: css`
-    max-width: 600px;
-    background: ${token.colorBgContainer};
+    background: rgba(0, 0, 0, 0.02);
     border: 1px solid ${token.colorBorderSecondary};
     border-radius: 16px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -3281,17 +3235,17 @@ var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => ({
     &:hover {
       border-color: ${token.colorPrimary};
       box-shadow: 0 8px 24px rgba(24, 144, 255, 0.12);
-      transform: translateX(4px);
+      // transform: translateX(4px);
     }
     &::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
-      bottom: 0;
-      width: 4px;
+      right: 0;
+      height: 4px;
       background: linear-gradient(
-        180deg,
+        90deg,
         ${token.colorPrimary} 0%,
         ${token.colorPrimaryHover} 100%
       );
@@ -3393,6 +3347,26 @@ var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => ({
     color: ${token.colorTextTertiary};
     font-size: 14px;
     transition: all 0.2s ease;
+  `,
+  responseSection: css`
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding-top: 16px;
+    border-top: 1px solid ${token.colorBorderSecondary};
+  `,
+  responseHeader: css`
+    font-size: 13px;
+    font-weight: 600;
+    color: ${token.colorTextSecondary};
+    margin-bottom: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  `,
+  responseContent: css`
+    padding: 12px;
+    background: ${token.colorFillAlter};
+    border-radius: 8px;
+    border: 1px solid ${token.colorBorderSecondary};
   `
 }));
 var TaskCard = ({
@@ -3408,6 +3382,7 @@ var TaskCard = ({
   }
   const { description, subagent_type, assignee } = toolCallData?.args || {};
   const status = toolCallData.status || "pending";
+  const response = toolCallData.response || null;
   const { threadId } = useAgentChat();
   const subagent_thread_id = (threadId || "") + "____" + subagent_type + "_" + toolCallData.id;
   const getStatusConfig = (status2) => {
@@ -3437,6 +3412,7 @@ var TaskCard = ({
     }
   };
   const statusConfig = getStatusConfig(status);
+  const showResponse = status === "success" && response;
   const handleCardClick = () => {
     openSideApp({
       component_key: "task",
@@ -3497,7 +3473,18 @@ var TaskCard = ({
             )
           ] }),
           interactive && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.RightOutlined, { className: styles.actionIcon })
-        ] })
+        ] }),
+        showResponse && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "div",
+          {
+            className: styles.responseSection,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text8, { className: styles.responseHeader, children: "Response" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.responseContent, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MDResponse, { content: response }) })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3514,17 +3501,17 @@ var import_x4 = require("@ant-design/x");
 var import_x2 = require("@ant-design/x");
 var import_antd14 = require("antd");
 var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var LazyBubble = ({
-  message: message4,
+  message: message5,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = (0, import_react16.useRef)(null);
-  const [isVisible, setIsVisible] = (0, import_react16.useState)(false);
-  const [wasEverVisible, setWasEverVisible] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const ref = (0, import_react15.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react15.useState)(false);
+  const [wasEverVisible, setWasEverVisible] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -3544,16 +3531,16 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message4.content ? Math.min(100, message4.content.length / 5) : 100;
+    const estimatedHeight = message5.content ? Math.min(100, message5.content.length / 5) : 100;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message5) : getPlaceholder() }) });
 };
-var MemoizedBubbleList = (0, import_react16.memo)(
+var MemoizedBubbleList = (0, import_react15.memo)(
   ({
     items,
     role,
@@ -3576,14 +3563,14 @@ var MessageList = ({
 }) => {
   const { styles } = useStyle();
   const { openSideApp } = useChatUIContext();
-  const messageLengthRef = (0, import_react16.useRef)(messages?.length ?? 0);
-  (0, import_react16.useEffect)(() => {
+  const messageLengthRef = (0, import_react15.useRef)(messages?.length ?? 0);
+  (0, import_react15.useEffect)(() => {
     if (messages?.length) {
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = (0, import_react16.useCallback)((message4) => {
-    const { content } = message4;
+  const renderContent = (0, import_react15.useCallback)((message5) => {
+    const { content } = message5;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -3591,7 +3578,7 @@ var MessageList = ({
       }
     } catch (error) {
     }
-    const tool_calls_md = message4.tool_calls?.map((tool_call) => {
+    const tool_calls_md = message5.tool_calls?.map((tool_call) => {
       return `\`\`\`tool_call
 ${JSON.stringify(tool_call)}
 \`\`\``;
@@ -3599,18 +3586,18 @@ ${JSON.stringify(tool_call)}
     const content_md = [content, ...tool_calls_md].join("\n");
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_antd14.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MDResponse, { content: content_md }) });
   }, []);
-  const items = (0, import_react16.useMemo)(
-    () => messages.map((message4, index) => ({
-      key: message4.id,
-      role: message4.role,
+  const items = (0, import_react15.useMemo)(
+    () => messages.map((message5, index) => ({
+      key: message5.id,
+      role: message5.role,
       typing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         LazyBubble,
         {
-          message: message4,
+          message: message5,
           renderContent,
           autoLoadRightPanel: () => {
-            const { content, role: role2 } = message4;
+            const { content, role: role2 } = message5;
             const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
             if (index === messages.length - 1 && isNewAddedMessage && role2 === "ai") {
               try {
@@ -3678,7 +3665,7 @@ ${JSON.stringify(tool_call)}
 
 // src/components/Chat/Chating.tsx
 var import_antd19 = require("antd");
-var import_react18 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/GenUI/HITLContainer.tsx
 var import_antd15 = require("antd");
@@ -3820,11 +3807,11 @@ var FileExplorerButton = ({}) => {
 
 // src/components/Chat/AgentHeader.tsx
 var import_x3 = require("@ant-design/x");
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var AgentHeader = (props) => {
   const { description, avatar, name, extra, extraMeta } = props;
-  const extraMetaComponents = (0, import_react17.useMemo)(() => {
+  const extraMetaComponents = (0, import_react16.useMemo)(() => {
     if (extraMeta && extraMeta.length > 0) {
       return extraMeta.map((meta) => {
         const Element = getElement(meta.id)?.card_view;
@@ -3853,8 +3840,8 @@ var AgentHeader = (props) => {
         style: { padding: 8 },
         variant: "borderless",
         description,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_antd18.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
-        title: name || "Fina",
+        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: [
           extra,
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TodoProgress, {}),
@@ -3891,12 +3878,12 @@ var Chating = ({
   showHITL = true,
   showRefreshButton = false
 }) => {
-  const [content, setContent] = (0, import_react18.useState)("");
-  const [attachedFiles, setAttachedFiles] = (0, import_react18.useState)([]);
+  const [content, setContent] = (0, import_react17.useState)("");
+  const [attachedFiles, setAttachedFiles] = (0, import_react17.useState)([]);
   const { styles } = useStyle();
-  const [headerOpen, setHeaderOpen] = (0, import_react18.useState)(false);
-  const attachmentsRef = (0, import_react18.useRef)(null);
-  const senderRef = import_react18.default.useRef(null);
+  const [headerOpen, setHeaderOpen] = (0, import_react17.useState)(false);
+  const attachmentsRef = (0, import_react17.useRef)(null);
+  const senderRef = import_react17.default.useRef(null);
   const {
     messages,
     sendMessage,
@@ -3908,7 +3895,7 @@ var Chating = ({
     tenantId,
     clearError
   } = useAgentChat();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -4199,7 +4186,7 @@ var regsiterElement = (language, ElementMeta) => {
 // src/components/Chat/SideAppViewBrowser.tsx
 var import_antd21 = require("antd");
 var import_antd_style9 = require("antd-style");
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var useStyle7 = (0, import_antd_style9.createStyles)(({ token, css }) => {
   return {
@@ -4234,10 +4221,10 @@ var SideAppViewBrowser = () => {
     openSideApp,
     closeSideApp
   } = useChatUIContext();
-  const [activeKey, setActiveKey] = (0, import_react19.useState)(
+  const [activeKey, setActiveKey] = (0, import_react18.useState)(
     JSON.stringify(sideAppSelectedCard)
   );
-  const [items, setItems] = (0, import_react19.useState)([]);
+  const [items, setItems] = (0, import_react18.useState)([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -4273,7 +4260,7 @@ var SideAppViewBrowser = () => {
       remove(targetKey);
     }
   };
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const SideAppView = getElement(sideAppSelectedCard?.component_key).side_app_view || EmptySideAppView;
     const key = JSON.stringify(sideAppSelectedCard);
     if (items.find((item) => item.key === key)) {
@@ -4378,7 +4365,7 @@ var SideAppViewBrowser = () => {
 // src/components/Chat/LatticeChat.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var LatticeChat = (props) => {
-  const { assistant_id, thread_id, ...chatingProps } = props;
+  const { assistant_id, thread_id = "", menu, ...chatingProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     AgentThreadProvider,
     {
@@ -4392,7 +4379,8 @@ var LatticeChat = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ColumnLayout,
         {
-          left: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Chating, { ...chatingProps }),
+          menu,
+          left: thread_id ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Chating, { ...chatingProps }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
           right: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SideAppViewBrowser, {})
         }
       ) })
@@ -4400,22 +4388,2307 @@ var LatticeChat = (props) => {
   );
 };
 
-// src/components/Chat/AgentConversations.tsx
-var import_icons13 = require("@ant-design/icons");
-var import_x5 = require("@ant-design/x");
-var import_antd22 = require("antd");
+// src/components/Chat/ConversationContext.tsx
+var import_react21 = require("react");
+
+// src/components/Chat/AssistantContext.tsx
 var import_react20 = require("react");
+var import_client_sdk4 = require("@axiom-lattice/client-sdk");
+
+// src/components/Chat/LatticeChatShellContext.tsx
+var import_react19 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var DEFAULT_CONFIG = {
+  baseURL: "http://localhost:4001",
+  apiKey: "",
+  transport: "sse",
+  timeout: 3e5,
+  headers: {}
+};
+var LatticeChatShellContext = (0, import_react19.createContext)({
+  config: DEFAULT_CONFIG,
+  updateConfig: () => {
+  },
+  updateConfigValue: () => {
+  },
+  resetConfig: () => {
+  }
+});
+var LatticeChatShellContextProvider = ({
+  children,
+  initialConfig = {},
+  persistToLocalStorage = false,
+  localStorageKey = "lattice_chat_shell_config"
+}) => {
+  const loadInitialConfig = (0, import_react19.useCallback)(() => {
+    if (persistToLocalStorage && typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(localStorageKey);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          return { ...DEFAULT_CONFIG, ...parsed, ...initialConfig };
+        }
+      } catch (error) {
+        console.warn("Failed to load config from localStorage:", error);
+      }
+    }
+    return { ...DEFAULT_CONFIG, ...initialConfig };
+  }, [persistToLocalStorage, localStorageKey, initialConfig]);
+  const [config, setConfig] = (0, import_react19.useState)(loadInitialConfig);
+  const saveToLocalStorage = (0, import_react19.useCallback)(
+    (newConfig) => {
+      if (persistToLocalStorage && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(localStorageKey, JSON.stringify(newConfig));
+        } catch (error) {
+          console.warn("Failed to save config to localStorage:", error);
+        }
+      }
+    },
+    [persistToLocalStorage, localStorageKey]
+  );
+  const updateConfig = (0, import_react19.useCallback)(
+    (updates) => {
+      setConfig((prev) => {
+        const newConfig = { ...prev, ...updates };
+        saveToLocalStorage(newConfig);
+        return newConfig;
+      });
+    },
+    [saveToLocalStorage]
+  );
+  const updateConfigValue = (0, import_react19.useCallback)(
+    (key, value) => {
+      setConfig((prev) => {
+        const newConfig = { ...prev, [key]: value };
+        saveToLocalStorage(newConfig);
+        return newConfig;
+      });
+    },
+    [saveToLocalStorage]
+  );
+  const resetConfig = (0, import_react19.useCallback)(() => {
+    const defaultConfig = { ...DEFAULT_CONFIG, ...initialConfig };
+    setConfig(defaultConfig);
+    saveToLocalStorage(defaultConfig);
+  }, [initialConfig, saveToLocalStorage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    LatticeChatShellContext.Provider,
+    {
+      value: {
+        config,
+        updateConfig,
+        updateConfigValue,
+        resetConfig
+      },
+      children
+    }
+  );
+};
+var useLatticeChatShellContext = () => {
+  const context = (0, import_react19.useContext)(LatticeChatShellContext);
+  if (!context) {
+    throw new Error(
+      "useLatticeChatShellContext must be used within a LatticeChatShellContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/AssistantContext.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var AssistantContext = (0, import_react20.createContext)({
+  assistants: [],
+  currentAssistant: null,
+  isLoading: false,
+  error: null,
+  listAssistants: async () => {
+  },
+  getAssistant: async () => {
+    throw new Error("Not implemented");
+  },
+  createAssistant: async () => {
+    throw new Error("Not implemented");
+  },
+  updateAssistant: async () => {
+    throw new Error("Not implemented");
+  },
+  deleteAssistant: async () => {
+  },
+  selectAssistant: async () => {
+  },
+  clearCurrentAssistant: () => {
+  },
+  refresh: async () => {
+  }
+});
+var AssistantContextProvider = ({
+  children,
+  autoLoad = true,
+  initialAssistantId = null
+}) => {
+  const {
+    config: { baseURL, apiKey = "", transport = "sse" }
+  } = useLatticeChatShellContext();
+  const client = (0, import_react20.useMemo)(
+    () => new import_client_sdk4.Client({
+      baseURL,
+      apiKey,
+      assistantId: "",
+      transport
+    }),
+    [baseURL, apiKey, transport]
+  );
+  const [state, setState] = (0, import_react20.useState)({
+    assistants: [],
+    currentAssistant: null,
+    isLoading: false,
+    error: null
+  });
+  const assistantsRef = (0, import_react20.useRef)([]);
+  (0, import_react20.useEffect)(() => {
+    assistantsRef.current = state.assistants;
+  }, [state.assistants]);
+  const listAssistants = (0, import_react20.useCallback)(async () => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const assistants = await client.assistants.list();
+      setState((prev) => ({
+        ...prev,
+        assistants,
+        isLoading: false
+      }));
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: error instanceof Error ? error : new Error(String(error))
+      }));
+    }
+  }, [client]);
+  const getAssistant = (0, import_react20.useCallback)(
+    async (id) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const assistant = await client.assistants.get(id);
+        setState((prev) => ({
+          ...prev,
+          // Update assistant in list if it exists
+          assistants: prev.assistants.map((a) => a.id === id ? assistant : a),
+          isLoading: false
+        }));
+        return assistant;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const createAssistant = (0, import_react20.useCallback)(
+    async (options) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const newAssistant = await client.assistants.create(options);
+        setState((prev) => ({
+          ...prev,
+          assistants: [...prev.assistants, newAssistant],
+          isLoading: false
+        }));
+        return newAssistant;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const updateAssistant = (0, import_react20.useCallback)(
+    async (id, options) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const updatedAssistant = await client.assistants.update(id, options);
+        setState((prev) => ({
+          ...prev,
+          assistants: prev.assistants.map(
+            (a) => a.id === id ? updatedAssistant : a
+          ),
+          currentAssistant: prev.currentAssistant?.id === id ? updatedAssistant : prev.currentAssistant,
+          isLoading: false
+        }));
+        return updatedAssistant;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const deleteAssistant = (0, import_react20.useCallback)(
+    async (id) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        await client.assistants.delete(id);
+        setState((prev) => ({
+          ...prev,
+          assistants: prev.assistants.filter((a) => a.id !== id),
+          currentAssistant: prev.currentAssistant?.id === id ? null : prev.currentAssistant,
+          isLoading: false
+        }));
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const selectAssistant = (0, import_react20.useCallback)(
+    async (id) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const assistant = assistantsRef.current.find((a) => a.id === id);
+        if (!assistant) {
+          const fetchedAssistant = await client.assistants.get(id);
+          setState((prev) => ({
+            ...prev,
+            assistants: [...prev.assistants, fetchedAssistant],
+            currentAssistant: fetchedAssistant,
+            isLoading: false
+          }));
+        } else {
+          setState((prev) => ({
+            ...prev,
+            currentAssistant: assistant,
+            isLoading: false
+          }));
+        }
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const clearCurrentAssistant = (0, import_react20.useCallback)(() => {
+    setState((prev) => ({
+      ...prev,
+      currentAssistant: null
+    }));
+  }, []);
+  const refresh = (0, import_react20.useCallback)(async () => {
+    await listAssistants();
+  }, [listAssistants]);
+  (0, import_react20.useEffect)(() => {
+    if (autoLoad) {
+      listAssistants();
+    }
+  }, [autoLoad, listAssistants]);
+  (0, import_react20.useEffect)(() => {
+    if (state.assistants.length > 0 && !state.currentAssistant) {
+      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]
+        }));
+      }
+    }
+  }, [initialAssistantId, state.assistants, state.currentAssistant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    AssistantContext.Provider,
+    {
+      value: {
+        ...state,
+        listAssistants,
+        getAssistant,
+        createAssistant,
+        updateAssistant,
+        deleteAssistant,
+        selectAssistant,
+        clearCurrentAssistant,
+        refresh
+      },
+      children
+    }
+  );
+};
+var useAssistantContext = () => {
+  const context = (0, import_react20.useContext)(AssistantContext);
+  if (!context) {
+    throw new Error(
+      "useAssistantContext must be used within an AssistantContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/ConversationContext.tsx
+var import_client_sdk5 = require("@axiom-lattice/client-sdk");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var ConversationContext = (0, import_react21.createContext)({
+  assistantId: null,
+  thread: null,
+  threadId: null,
+  threads: [],
+  isLoading: false,
+  error: null,
+  setThread: () => {
+  },
+  selectThread: () => {
+  },
+  createThread: async () => {
+    throw new Error("Not implemented");
+  },
+  listThreads: async () => [],
+  updateThread: async () => {
+  },
+  getThreadById: () => null,
+  deleteThread: async () => {
+  },
+  clearThread: () => {
+  },
+  refresh: async () => {
+  }
+});
+function convertThreadToConversationThread(thread, label) {
+  return {
+    id: thread.id,
+    label: label || thread.metadata?.label || new Date(thread.createdAt).toLocaleString()
+  };
+}
+function getThreadMetadata(label) {
+  return label ? { label } : {};
+}
+var ConversationContextProvider = ({
+  children
+}) => {
+  const { currentAssistant } = useAssistantContext();
+  const assistantId = currentAssistant?.id || null;
+  const {
+    config: { baseURL, apiKey = "", transport = "sse" }
+  } = useLatticeChatShellContext();
+  const client = (0, import_react21.useMemo)(
+    () => new import_client_sdk5.Client({
+      baseURL,
+      apiKey,
+      assistantId: assistantId || "",
+      transport
+    }),
+    [baseURL, apiKey, assistantId, transport]
+  );
+  const [threads, setThreads] = (0, import_react21.useState)([]);
+  const [threadId, setThreadId] = (0, import_react21.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
+  const loadedAssistantIdRef = (0, import_react21.useRef)(null);
+  const prevAssistantIdRef = (0, import_react21.useRef)(null);
+  const isLoadingRef = (0, import_react21.useRef)(false);
+  const clientRef = (0, import_react21.useRef)(client);
+  (0, import_react21.useEffect)(() => {
+    clientRef.current = client;
+  }, [client]);
+  const loadThreads = (0, import_react21.useCallback)(async () => {
+    const currentClient = clientRef.current;
+    if (!assistantId || !currentClient.assistantId) {
+      setThreads([]);
+      loadedAssistantIdRef.current = null;
+      return;
+    }
+    if (isLoadingRef.current && loadedAssistantIdRef.current === assistantId) {
+      return;
+    }
+    isLoadingRef.current = true;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const apiThreads = await currentClient.threads.list();
+      const conversationThreads = apiThreads.map(
+        (t) => convertThreadToConversationThread(t)
+      );
+      if (conversationThreads.length === 0) {
+        try {
+          const apiThread = await currentClient.threads.create({
+            metadata: getThreadMetadata()
+          });
+          const newThread = convertThreadToConversationThread(apiThread);
+          setThreads([newThread]);
+          setThreadId(newThread.id);
+        } catch (createErr) {
+          const createError = createErr instanceof Error ? createErr : new Error(String(createErr));
+          setError(createError);
+          console.error("Failed to create initial thread:", createError);
+          setThreads([]);
+        }
+      } else {
+        setThreads(conversationThreads);
+        setThreadId((currentThreadId) => {
+          if (!currentThreadId) {
+            const latestThread = conversationThreads[conversationThreads.length - 1];
+            return latestThread.id;
+          }
+          const threadExists = conversationThreads.some(
+            (t) => t.id === currentThreadId
+          );
+          if (!threadExists) {
+            const latestThread = conversationThreads[conversationThreads.length - 1];
+            return latestThread.id;
+          }
+          return currentThreadId;
+        });
+      }
+      loadedAssistantIdRef.current = assistantId;
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      console.error("Failed to load threads:", error2);
+    } finally {
+      setIsLoading(false);
+      isLoadingRef.current = false;
+    }
+  }, [assistantId]);
+  (0, import_react21.useEffect)(() => {
+    const currentClient = clientRef.current;
+    const prevAssistantId = prevAssistantIdRef.current;
+    const assistantChanged = prevAssistantId !== assistantId;
+    if (assistantId && currentClient.assistantId === assistantId) {
+      if (assistantChanged) {
+        setThreadId(null);
+        prevAssistantIdRef.current = assistantId;
+      }
+      if (loadedAssistantIdRef.current !== assistantId) {
+        loadThreads();
+      }
+    } else {
+      setThreadId(null);
+      setThreads([]);
+      loadedAssistantIdRef.current = null;
+      prevAssistantIdRef.current = null;
+    }
+  }, [assistantId, loadThreads]);
+  const thread = (0, import_react21.useMemo)(() => {
+    if (!assistantId || !threadId) {
+      return null;
+    }
+    return threads.find((t) => t.id === threadId) || null;
+  }, [assistantId, threadId, threads]);
+  const setThread = (0, import_react21.useCallback)((newThread) => {
+    if (newThread) {
+      setThreadId(newThread.id);
+    } else {
+      setThreadId(null);
+    }
+  }, []);
+  const selectThread = (0, import_react21.useCallback)(
+    (targetThreadId) => {
+      const foundThread = threads.find((t) => t.id === targetThreadId);
+      if (foundThread) {
+        setThreadId(targetThreadId);
+      }
+    },
+    [threads]
+  );
+  const createThread = (0, import_react21.useCallback)(
+    async (label) => {
+      if (!assistantId || !client.assistantId) {
+        throw new Error("No assistant selected");
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        const apiThread = await client.threads.create({
+          metadata: getThreadMetadata(label)
+        });
+        const newThread = convertThreadToConversationThread(apiThread, label);
+        await loadThreads();
+        setThreadId(newThread.id);
+        return newThread;
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [assistantId, client, loadThreads]
+  );
+  const listThreads = (0, import_react21.useCallback)(async () => {
+    if (!assistantId || !client.assistantId) {
+      return [];
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const apiThreads = await client.threads.list();
+      const conversationThreads = apiThreads.map(
+        (t) => convertThreadToConversationThread(t)
+      );
+      setThreads(conversationThreads);
+      return conversationThreads;
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error(String(err));
+      setError(error2);
+      return threads;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [assistantId, client, threads]);
+  const updateThread = (0, import_react21.useCallback)(
+    async (newThread) => {
+      if (!assistantId || !client.assistantId) {
+        throw new Error("No assistant selected");
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        await client.threads.update(newThread.id, {
+          metadata: getThreadMetadata(newThread.label)
+        });
+        await loadThreads();
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [assistantId, client, loadThreads]
+  );
+  const getThreadById = (0, import_react21.useCallback)(
+    (targetThreadId) => {
+      return threads.find((t) => t.id === targetThreadId) || null;
+    },
+    [threads]
+  );
+  const deleteThread = (0, import_react21.useCallback)(
+    async (targetThreadId) => {
+      if (!assistantId || !client.assistantId) {
+        throw new Error("No assistant selected");
+      }
+      setIsLoading(true);
+      setError(null);
+      try {
+        await client.threads.delete(targetThreadId);
+        await loadThreads();
+        if (targetThreadId === threadId) {
+          setThreadId(null);
+        }
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error(String(err));
+        setError(error2);
+        throw error2;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [threadId, assistantId, client, loadThreads]
+  );
+  const clearThread = (0, import_react21.useCallback)(() => {
+    setThreadId(null);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ConversationContext.Provider,
+    {
+      value: {
+        assistantId,
+        thread,
+        threadId,
+        threads,
+        isLoading,
+        error,
+        setThread,
+        selectThread,
+        createThread,
+        listThreads,
+        updateThread,
+        getThreadById,
+        deleteThread,
+        clearThread,
+        refresh: loadThreads
+      },
+      children
+    }
+  );
+};
+var useConversationContext = () => {
+  const context = (0, import_react21.useContext)(ConversationContext);
+  if (!context) {
+    throw new Error(
+      "useConversationContext must be used within a ConversationContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/AgentConversations.tsx
+var import_x5 = require("@ant-design/x");
+var import_antd22 = require("antd");
+var import_react22 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var AgentConversations = () => {
+  const { token } = import_antd22.theme.useToken();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    assistantId,
+    thread,
+    selectThread,
+    createThread,
+    listThreads,
+    threads
+  } = useConversationContext();
+  const style = {
+    width: "100%",
+    background: "transparent",
+    borderRadius: token.borderRadius
+  };
+  const threadItems = (0, import_react22.useMemo)(() => {
+    return threads || [];
+  }, [threads]);
+  const items = threadItems.map((thread2) => ({
+    key: thread2.id,
+    label: thread2.label
+  }));
+  const newChatClick = async () => {
+    if (!assistantId) {
+      return;
+    }
+    await createThread();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_x5.Conversations,
+    {
+      creation: {
+        onClick: newChatClick
+      },
+      items,
+      activeKey: thread?.id,
+      style,
+      groupable: true,
+      onActiveChange: (key) => {
+        selectThread(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+var import_react24 = require("react");
+var import_antd25 = require("antd");
+var import_icons14 = require("@ant-design/icons");
+
+// src/components/Chat/AssistantList.tsx
+var import_x6 = require("@ant-design/x");
+var import_antd23 = require("antd");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var AssistantList = () => {
+  const { token } = import_antd23.theme.useToken();
+  const { assistants, selectAssistant, currentAssistant } = useAssistantContext();
+  const style = {
+    width: "100%",
+    background: "transparent",
+    borderRadius: token.borderRadius
+  };
+  const items = assistants.map((assistant) => ({
+    key: assistant.id,
+    label: assistant.name,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_antd23.Avatar,
+      {
+        size: "small",
+        style: {
+          backgroundColor: token.colorFillSecondary,
+          color: token.colorText
+        },
+        children: assistant.name.charAt(0).toUpperCase()
+      }
+    )
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_x6.Conversations,
+    {
+      items,
+      activeKey: currentAssistant?.id,
+      style,
+      onActiveChange: (key) => {
+        selectAssistant(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+var import_antd_style11 = require("antd-style");
+
+// src/components/Chat/SettingsModal.tsx
+var import_react23 = require("react");
+var import_antd24 = require("antd");
+var import_icons13 = require("@ant-design/icons");
+var import_antd_style10 = require("antd-style");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var { Text: Text11, Title: Title2 } = import_antd24.Typography;
+var { TextArea } = import_antd24.Input;
+var useStyles3 = (0, import_antd_style10.createStyles)(({ token, css }) => ({
+  //   settingsModal: css`
+  //     .ant-modal {
+  //       max-width: 100vw !important;
+  //       width: 100vw !important;
+  //       margin: 0 !important;
+  //       top: 0 !important;
+  //       padding-bottom: 0 !important;
+  //     }
+  //     .ant-modal-content {
+  //       padding: 0;
+  //       height: 100vh;
+  //       max-height: 100vh;
+  //       border-radius: 0;
+  //       overflow: hidden;
+  //       width: 100%;
+  //     }
+  //     .ant-modal-body {
+  //       padding: 0;
+  //       height: 100%;
+  //       display: flex;
+  //       overflow: hidden;
+  //       width: 100%;
+  //     }
+  //   `,
+  tabsContainer: css`
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ant-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ant-tabs-content-holder {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .ant-tabs-nav {
+      margin: 0;
+      padding: 0 ${token.paddingLG}px;
+      background: ${token.colorBgContainer};
+      border-bottom: 1px solid ${token.colorBorder};
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+
+    .ant-tabs-tab {
+      padding: ${token.paddingMD}px ${token.paddingLG}px;
+      margin: ${token.paddingSM}px ${token.marginXS}px 0 0;
+      border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+      }
+
+      &.ant-tabs-tab-active {
+        background: ${token.colorBgContainer};
+        border-bottom-color: ${token.colorBgContainer};
+      }
+    }
+  `,
+  tabContent: css`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: linear-gradient(
+      135deg,
+      ${token.colorBgLayout} 0%,
+      ${token.colorFillQuaternary} 100%
+    );
+  `,
+  sidebar: css`
+    width: 280px;
+    background: linear-gradient(
+      180deg,
+      ${token.colorBgContainer} 0%,
+      ${token.colorFillQuaternary} 100%
+    );
+    border-right: 1px solid ${token.colorBorder};
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex-shrink: 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
+
+    /* Custom scrollbar */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 4px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  sidebarHeader: css`
+    padding: ${token.paddingXL}px ${token.paddingLG}px;
+    border-bottom: 1px solid ${token.colorBorder};
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimaryBg} 0%,
+      ${token.colorBgContainer} 100%
+    );
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+  `,
+  sidebarTitle: css`
+    font-size: ${token.fontSizeXL}px;
+    font-weight: 700;
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimary} 0%,
+      ${token.colorPrimaryHover} 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+    letter-spacing: -0.5px;
+  `,
+  menuItem: css`
+    padding: ${token.paddingMD}px ${token.paddingLG}px;
+    margin: ${token.marginXS}px ${token.paddingSM}px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: ${token.borderRadiusLG}px;
+    display: flex;
+    align-items: center;
+    gap: ${token.marginMD}px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: ${token.colorPrimary};
+      transform: scaleY(0);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      border-radius: 0 2px 2px 0;
+    }
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+      transform: translateX(4px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &.active {
+      background: linear-gradient(
+        135deg,
+        ${token.colorPrimaryBg} 0%,
+        ${token.colorFillTertiary} 100%
+      );
+      color: ${token.colorPrimary};
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+      transform: translateX(4px);
+
+      &::before {
+        transform: scaleY(1);
+      }
+
+      .menuItemIcon {
+        transform: scale(1.1);
+      }
+    }
+  `,
+  menuItemIcon: css`
+    font-size: 18px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  `,
+  menuItemText: css`
+    font-size: ${token.fontSize}px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+  `,
+  content: css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+  `,
+  contentHeader: css`
+    padding: ${token.paddingLG}px ${token.paddingXL * 2}px;
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorBorder};
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    backdrop-filter: blur(10px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: ${token.marginLG}px;
+  `,
+  contentHeaderLeft: css`
+    flex: 1;
+  `,
+  contentHeaderRight: css`
+    display: flex;
+    gap: ${token.marginMD}px;
+    flex-shrink: 0;
+  `,
+  contentTitle: css`
+    font-size: ${token.fontSizeHeading3}px;
+    font-weight: 700;
+    color: ${token.colorTextHeading};
+    margin: 0 0 ${token.marginSM}px 0;
+    letter-spacing: -0.5px;
+  `,
+  contentDescription: css`
+    color: ${token.colorTextSecondary};
+    font-size: ${token.fontSize}px;
+    margin: 0;
+    line-height: 1.6;
+  `,
+  contentBody: css`
+    flex: 1;
+    overflow-y: auto;
+    padding: ${token.paddingXL * 2}px ${token.paddingXL * 2}px;
+    background: transparent;
+
+    /* Custom scrollbar */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 4px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  formContainer: css`
+    width: 100%;
+    max-width: 100%;
+  `,
+  formLabel: css`
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+    margin-bottom: ${token.marginMD}px;
+    display: block;
+    font-size: ${token.fontSize}px;
+  `,
+  formDescription: css`
+    color: ${token.colorTextSecondary};
+    font-size: ${token.fontSizeSM}px;
+    margin-top: ${token.marginSM}px;
+    line-height: 1.6;
+  `,
+  card: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    padding: ${token.paddingXL}px;
+    margin-bottom: ${token.marginLG}px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+      border-color: ${token.colorPrimary};
+    }
+  `,
+  alertCard: css`
+    border-radius: ${token.borderRadiusLG}px;
+    margin-bottom: ${token.marginLG}px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border: 1px solid ${token.colorBorder};
+  `,
+  textArea: css`
+    border-radius: ${token.borderRadius}px;
+    border: 1px solid ${token.colorBorder};
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      border-color: ${token.colorPrimaryHover};
+    }
+
+    &:focus {
+      border-color: ${token.colorPrimary};
+      box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
+    }
+  `,
+  connectionStatus: css`
+    display: flex;
+    align-items: center;
+    gap: ${token.marginXS}px;
+    margin-left: ${token.marginSM}px;
+  `,
+  addServerModal: css`
+    .ant-modal-body {
+      padding: ${token.paddingXL}px;
+    }
+  `
+}));
+var SETTINGS_MENU_ITEMS = [
+  {
+    key: "environment",
+    label: "Environment Variables",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.EnvironmentOutlined, {})
+  },
+  {
+    key: "models",
+    label: "Model Configuration",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.ApiOutlined, {})
+  }
+];
+var SettingsModal = ({
+  open,
+  onClose
+}) => {
+  const { styles } = useStyles3();
+  const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
+  const [connections, setConnections] = (0, import_react23.useState)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem("lattice_server_connections");
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          return parsed;
+        }
+      } catch (error) {
+        console.warn("Failed to load connections from localStorage:", error);
+      }
+    }
+    if (shellConfig.baseURL) {
+      return [
+        {
+          id: "default",
+          name: "Default",
+          url: shellConfig.baseURL
+        }
+      ];
+    }
+    return [];
+  });
+  const [serverConfigs, setServerConfigs] = (0, import_react23.useState)({});
+  const connectionsRef = (0, import_react23.useRef)(connections);
+  (0, import_react23.useEffect)(() => {
+    connectionsRef.current = connections;
+  }, [connections]);
+  const [activeTabKey, setActiveTabKey] = (0, import_react23.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 saveConnections = (newConnections) => {
+    setConnections(newConnections);
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(
+          "lattice_server_connections",
+          JSON.stringify(newConnections)
+        );
+      } catch (error) {
+        console.warn("Failed to save connections to localStorage:", error);
+      }
+    }
+  };
+  const initializeServerConfig = (serverId) => {
+    if (!serverConfigs[serverId]) {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          envText: "",
+          models: [
+            {
+              key: "",
+              model: "",
+              provider: "openai",
+              streaming: false,
+              apiKey: "",
+              baseURL: ""
+            }
+          ]
+        }
+      }));
+    }
+  };
+  const checkConnection = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection) return;
+    const url = connection.url;
+    if (!url) {
+      updateConnectionStatus(serverId, { connected: false });
+      return;
+    }
+    try {
+      updateConnectionStatus(serverId, { connecting: true, error: "" });
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5e3);
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/config`, {
+        method: "GET",
+        signal: controller.signal,
+        headers
+      });
+      clearTimeout(timeoutId);
+      if (response.ok) {
+        updateConnectionStatus(serverId, {
+          connected: true,
+          connecting: false,
+          error: ""
+        });
+        if (url !== shellConfig.baseURL) {
+          updateConfigValue("baseURL", url);
+        }
+      } else {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: "Server returned an error"
+        });
+      }
+    } catch (error) {
+      if (error.name === "AbortError") {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: "Connection timeout"
+        });
+      } else {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: error.message || "Failed to connect to server"
+        });
+      }
+    }
+  };
+  const updateConnectionStatus = (serverId, updates) => {
+    setConnections(
+      (prev) => prev.map(
+        (conn) => conn.id === serverId ? { ...conn, ...updates } : conn
+      )
+    );
+  };
+  const loadCurrentConfig = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection || !connection.connected) return;
+    const url = connection.url;
+    if (!url) return;
+    try {
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/config`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data) {
+          const lines = [];
+          const configData = data.data;
+          if (configData.port !== void 0) {
+            lines.push(`PORT=${configData.port}`);
+          }
+          if (configData.queueServiceType) {
+            lines.push(`QUEUE_SERVICE_TYPE=${configData.queueServiceType}`);
+          }
+          if (configData.redisUrl) {
+            lines.push(`REDIS_URL=${configData.redisUrl}`);
+          }
+          if (configData.redisPassword) {
+            lines.push(`REDIS_PASSWORD=`);
+          }
+          if (configData.queueName) {
+            lines.push(`QUEUE_NAME=${configData.queueName}`);
+          }
+          setServerConfigs((prev) => ({
+            ...prev,
+            [serverId]: {
+              ...prev[serverId],
+              envText: lines.join("\n")
+            }
+          }));
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load configuration:", error);
+      import_antd24.message.error("Failed to load current configuration");
+    }
+  };
+  const loadModelsConfig = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection || !connection.connected) return;
+    const url = connection.url;
+    if (!url) return;
+    try {
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/models`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data)) {
+          if (data.data.length > 0) {
+            setServerConfigs((prev) => ({
+              ...prev,
+              [serverId]: {
+                ...prev[serverId],
+                models: data.data
+              }
+            }));
+          } else {
+            setServerConfigs((prev) => ({
+              ...prev,
+              [serverId]: {
+                ...prev[serverId],
+                models: [
+                  {
+                    key: "",
+                    model: "",
+                    provider: "openai",
+                    streaming: false,
+                    apiKey: "",
+                    baseURL: ""
+                  }
+                ]
+              }
+            }));
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load models configuration:", error);
+    }
+  };
+  (0, import_react23.useEffect)(() => {
+    if (open && activeTabKey) {
+      initializeServerConfig(activeTabKey);
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection && !connection.connected && !connection.connecting) {
+        checkConnection(activeTabKey);
+      }
+    }
+  }, [open, activeTabKey]);
+  (0, import_react23.useEffect)(() => {
+    if (open && activeTabKey) {
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection?.connected) {
+        if (activeMenu === "environment") {
+          loadCurrentConfig(activeTabKey);
+        } else if (activeMenu === "models") {
+          loadModelsConfig(activeTabKey);
+        }
+      }
+    }
+  }, [open, activeTabKey, activeMenu]);
+  const handleAddServer = async () => {
+    if (!newServerUrl.trim()) {
+      import_antd24.message.error("Please enter a server URL");
+      return;
+    }
+    let normalizedUrl = newServerUrl.trim();
+    if (!normalizedUrl.startsWith("http://") && !normalizedUrl.startsWith("https://")) {
+      normalizedUrl = `http://${normalizedUrl}`;
+    }
+    const serverName = newServerName.trim() || normalizedUrl.replace(/^https?:\/\//, "");
+    const newConnection = {
+      id: `conn_${Date.now()}`,
+      name: serverName,
+      url: normalizedUrl,
+      apiKey: newServerApiKey.trim() || void 0,
+      connected: false
+    };
+    setAddingServer(true);
+    const newConnections = [...connections, newConnection];
+    saveConnections(newConnections);
+    setActiveTabKey(newConnection.id);
+    initializeServerConfig(newConnection.id);
+    await checkConnection(newConnection.id);
+    setAddingServer(false);
+    setShowAddServerModal(false);
+    setNewServerUrl("");
+    setNewServerName("");
+    setNewServerApiKey("");
+    import_antd24.message.success("Server added successfully");
+  };
+  const handleDeleteServer = (serverId) => {
+    const newConnections = connections.filter((c) => c.id !== serverId);
+    saveConnections(newConnections);
+    setServerConfigs((prev) => {
+      const newConfigs = { ...prev };
+      delete newConfigs[serverId];
+      return newConfigs;
+    });
+    if (activeTabKey === serverId) {
+      if (newConnections.length > 0) {
+        setActiveTabKey(newConnections[0].id);
+      } else {
+        setActiveTabKey("");
+      }
+    }
+    import_antd24.message.success("Server deleted");
+  };
+  const handleSave = async () => {
+    const connection = connections.find((c) => c.id === activeTabKey);
+    if (!connection || !connection.connected) {
+      import_antd24.message.error("Please connect to a server first");
+      return;
+    }
+    const url = connection.url;
+    if (!url) {
+      import_antd24.message.error("Please connect to a server first");
+      return;
+    }
+    try {
+      setLoading(true);
+      const config = serverConfigs[activeTabKey];
+      if (activeMenu === "environment") {
+        const configObj = {};
+        const lines = config.envText.split("\n");
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+          if (!trimmedLine || trimmedLine.startsWith("#")) {
+            continue;
+          }
+          const equalIndex = trimmedLine.indexOf("=");
+          if (equalIndex === -1) {
+            continue;
+          }
+          const key = trimmedLine.substring(0, equalIndex).trim();
+          const value = trimmedLine.substring(equalIndex + 1).trim();
+          if (!key) {
+            continue;
+          }
+          const upperKey = key.toUpperCase();
+          if (upperKey === "PORT") {
+            if (value) {
+              configObj.port = Number(value);
+            }
+          } else if (upperKey === "QUEUE_SERVICE_TYPE") {
+            if (value) {
+              configObj.queueServiceType = value;
+            }
+          } else if (upperKey === "REDIS_URL") {
+            if (value) {
+              configObj.redisUrl = value;
+            }
+          } else if (upperKey === "REDIS_PASSWORD") {
+            if (value) {
+              configObj.redisPassword = value;
+            }
+          } else if (upperKey === "QUEUE_NAME") {
+            if (value) {
+              configObj.queueName = value;
+            }
+          } else {
+            if (value) {
+              configObj[key] = value;
+            }
+          }
+        }
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (connection.apiKey) {
+          headers["Authorization"] = `Bearer ${connection.apiKey}`;
+        }
+        const response = await fetch(`${url}/api/config`, {
+          method: "PUT",
+          headers,
+          body: JSON.stringify({ config: configObj })
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          if (data.requiresRestart && data.requiresRestart.length > 0) {
+            import_antd24.message.warning(
+              `Configuration saved. Please restart the server for ${data.requiresRestart.join(
+                ", "
+              )} to take effect.`,
+              5
+            );
+          } else {
+            import_antd24.message.success("Configuration saved and applied successfully");
+          }
+          if (data.warnings && data.warnings.length > 0) {
+            data.warnings.forEach((warning) => {
+              import_antd24.message.warning(warning, 5);
+            });
+          }
+          onClose();
+        } else {
+          import_antd24.message.error(data.error || "Failed to save configuration");
+        }
+      } else if (activeMenu === "models") {
+        const validModels = config.models.filter(
+          (m) => m.key && m.model && m.provider
+        );
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (connection.apiKey) {
+          headers["Authorization"] = `Bearer ${connection.apiKey}`;
+        }
+        const response = await fetch(`${url}/api/models`, {
+          method: "PUT",
+          headers,
+          body: JSON.stringify({ models: validModels })
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          import_antd24.message.success(
+            "Model configuration saved and registered successfully"
+          );
+          onClose();
+        } else {
+          import_antd24.message.error(data.error || "Failed to save model configuration");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to save configuration:", error);
+      import_antd24.message.error(error.message || "Failed to save configuration");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const renderEnvironmentSettings = (serverId) => {
+    const config = serverConfigs[serverId] || { envText: "", models: [] };
+    const setEnvText = (text) => {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          envText: text
+        }
+      }));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_antd24.Alert,
+        {
+          message: "Configuration Effect",
+          description: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_icons13.CheckCircleOutlined,
+                {
+                  style: { color: "#52c41a", marginRight: 8 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Immediately effective:" }),
+              " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Requires restart:" }),
+              " PORT (server must be restarted to change port)"
+            ] })
+          ] }),
+          type: "info",
+          showIcon: true,
+          className: styles.alertCard
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(
+        TextArea,
+        {
+          value: config.envText,
+          onChange: (e) => setEnvText(e.target.value),
+          placeholder: `PORT=4001
+QUEUE_SERVICE_TYPE=redis
+REDIS_URL=redis://localhost:6379
+REDIS_PASSWORD=
+QUEUE_NAME=tasks`,
+          rows: 18,
+          className: styles.textArea,
+          style: {
+            fontFamily: "SF Mono, Monaco, Inconsolata, Roboto Mono, monospace",
+            fontSize: 13,
+            padding: "16px",
+            lineHeight: 1.6
+          }
+        }
+      )
+    ] });
+  };
+  const renderModelSettings = (serverId) => {
+    const config = serverConfigs[serverId] || {
+      envText: "",
+      models: [
+        {
+          key: "",
+          model: "",
+          provider: "openai",
+          streaming: false,
+          apiKey: "",
+          baseURL: ""
+        }
+      ]
+    };
+    const handleModelChange = (index, field, value) => {
+      const newModels = [...config.models];
+      newModels[index] = { ...newModels[index], [field]: value };
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          models: newModels
+        }
+      }));
+    };
+    const handleAddModel = () => {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          models: [
+            ...config.models,
+            {
+              key: "",
+              model: "",
+              provider: "openai",
+              streaming: false,
+              apiKey: "",
+              baseURL: ""
+            }
+          ]
+        }
+      }));
+    };
+    const handleRemoveModel = (index) => {
+      if (config.models.length > 1) {
+        setServerConfigs((prev) => ({
+          ...prev,
+          [serverId]: {
+            ...prev[serverId],
+            models: config.models.filter((_, i) => i !== index)
+          }
+        }));
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.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." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.card, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 24,
+              paddingBottom: 20,
+              borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                  "Model ",
+                  index + 1
+                ] }),
+                model.key && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                  Text11,
+                  {
+                    type: "secondary",
+                    style: { marginLeft: 8, fontSize: 12 },
+                    children: [
+                      "(",
+                      model.key,
+                      ")"
+                    ]
+                  }
+                )
+              ] }),
+              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Button,
+                {
+                  type: "text",
+                  danger: true,
+                  size: "small",
+                  onClick: () => handleRemoveModel(index),
+                  style: {
+                    borderRadius: 6,
+                    transition: "all 0.2s"
+                  },
+                  children: "Remove"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., default, gpt-4, claude",
+                value: model.key,
+                onChange: (e) => handleModelChange(index, "key", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Select,
+              {
+                style: { width: "100%", height: 40 },
+                value: model.provider,
+                onChange: (value) => handleModelChange(index, "provider", value),
+                options: [
+                  { label: "OpenAI", value: "openai" },
+                  { label: "Azure", value: "azure" },
+                  { label: "DeepSeek", value: "deepseek" },
+                  { label: "SiliconCloud", value: "siliconcloud" },
+                  { label: "VolcEngine", value: "volcengine" }
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
+                value: model.model,
+                onChange: (e) => handleModelChange(index, "model", e.target.value),
+                style: { height: 40 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input.Password,
+              {
+                placeholder: "Enter your API key",
+                value: model.apiKey,
+                onChange: (e) => handleModelChange(index, "apiKey", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., https://api.openai.com/v1",
+                value: model.baseURL,
+                onChange: (e) => handleModelChange(index, "baseURL", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Switch,
+              {
+                checked: model.streaming,
+                onChange: (checked) => handleModelChange(index, "streaming", checked)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { children: "Enable Streaming" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Input,
+                {
+                  type: "number",
+                  placeholder: "e.g., 4096",
+                  value: model.maxTokens,
+                  onChange: (e) => handleModelChange(
+                    index,
+                    "maxTokens",
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  style: { height: 40 }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Input,
+                {
+                  type: "number",
+                  step: "0.1",
+                  placeholder: "e.g., 0.7",
+                  value: model.temperature,
+                  onChange: (e) => handleModelChange(
+                    index,
+                    "temperature",
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  style: { height: 40 }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_antd24.Button,
+        {
+          type: "dashed",
+          onClick: handleAddModel,
+          block: true,
+          size: "large",
+          style: { marginTop: 24, height: 48 },
+          children: "+ Add Model"
+        }
+      )
+    ] });
+  };
+  const renderContent = (serverId) => {
+    switch (activeMenu) {
+      case "environment":
+        return renderEnvironmentSettings(serverId);
+      case "models":
+        return renderModelSettings(serverId);
+      default:
+        return null;
+    }
+  };
+  const activeMenuItem = SETTINGS_MENU_ITEMS.find(
+    (item) => item.key === activeMenu
+  );
+  const currentConnection = connections.find((c) => c.id === activeTabKey);
+  const renderTabLabel = (connection) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CloudServerOutlined,
+        {
+          style: {
+            marginRight: 8,
+            color: connection.connected ? "#52c41a" : connection.connecting ? "#1890ff" : "#d9d9d9"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CheckCircleFilled,
+        {
+          style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
+        }
+      ),
+      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CloseCircleFilled,
+        {
+          style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
+        }
+      )
+    ] });
+  };
+  const tabItems = connections.map((connection) => ({
+    key: connection.id,
+    label: renderTabLabel(connection),
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "div",
+        {
+          className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
+          onClick: () => setActiveMenu(item.key),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.menuItemText, children: item.label })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(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__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Button, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Button,
+              {
+                type: "primary",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SaveOutlined, {}),
+                onClick: handleSave,
+                loading,
+                children: "Save Configuration"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
+      ] })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 16,
+          padding: 48
+        },
+        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+            "Connecting to ",
+            connection.url
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            Text11,
+            {
+              type: "secondary",
+              style: { textAlign: "center", maxWidth: 400 },
+              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__ */ (0, import_jsx_runtime37.jsx)(
+            import_antd24.Button,
+            {
+              type: "primary",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, {}),
+              onClick: () => checkConnection(connection.id),
+              loading: connection.connecting,
+              style: { marginTop: 16 },
+              children: "Reconnect"
+            }
+          )
+        ] })
+      }
+    ) }),
+    closable: connections.length > 1
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_antd24.Drawer,
+      {
+        open,
+        onClose,
+        footer: null,
+        width: "100%",
+        title: "Settings",
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_antd24.Tabs,
+          {
+            activeKey: activeTabKey,
+            onChange: setActiveTabKey,
+            type: "editable-card",
+            onEdit: (targetKey, action) => {
+              if (action === "add") {
+                setShowAddServerModal(true);
+              } else if (action === "remove") {
+                handleDeleteServer(targetKey);
+              }
+            },
+            items: tabItems,
+            addIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "4px 8px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.PlusOutlined, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "Add Server" })
+                ]
+              }
+            )
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_antd24.Modal,
+      {
+        title: "Add New Server",
+        open: showAddServerModal,
+        onOk: handleAddServer,
+        onCancel: () => {
+          setShowAddServerModal(false);
+          setNewServerUrl("");
+          setNewServerName("");
+          setNewServerApiKey("");
+        },
+        confirmLoading: addingServer,
+        className: styles.addServerModal,
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., Production Server",
+                value: newServerName,
+                onChange: (e) => setNewServerName(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., http://localhost:4001",
+                value: newServerUrl,
+                onChange: (e) => setNewServerUrl(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input.Password,
+              {
+                placeholder: "Optional: Enter API key for authentication",
+                value: newServerApiKey,
+                onChange: (e) => setNewServerApiKey(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/ChatSidebar.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var useStyles4 = (0, import_antd_style11.createStyles)(({ 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] = (0, import_react24.useState)(false);
+  const handleToggleCollapse = () => {
+    setMenuCollapsed(!menuCollapsed);
+  };
+  const handleSettingsClick = () => {
+    setSettingsModalOpen(true);
+    onSettingsClick?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.sidebar, children: [
+      !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssistantList, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd25.Divider, { className: styles.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AgentConversations, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.footer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(import_icons14.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons14.MenuFoldOutlined, {})
+          }
+        ),
+        !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "button",
+          {
+            className: styles.actionButton,
+            onClick: handleSettingsClick,
+            title: "Settings",
+            "aria-label": "Settings",
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons14.SettingOutlined, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      SettingsModal,
+      {
+        open: settingsModalOpen,
+        onClose: () => setSettingsModalOpen(false)
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/LatticeChatView.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var LatticeChatView = (props) => {
+  const { assistantId, thread } = useConversationContext();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    config: { baseURL }
+  } = useLatticeChatShellContext();
+  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    AxiomLatticeProvider,
+    {
+      config: {
+        baseURL,
+        apiKey: "",
+        assistantId,
+        transport: "sse"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        LatticeChat,
+        {
+          thread_id: thread?.id,
+          assistant_id: assistantId,
+          name: currentAssistant?.name,
+          description: currentAssistant?.description,
+          menu: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChatSidebar, {})
+        }
+      )
+    }
+  ) : null;
+};
+
+// src/components/Chat/LatticeChatShell.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var LatticeChatShell = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LatticeChatView, {}) }) }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentConversations,
   AgentThreadProvider,
+  AssistantContext,
+  AssistantContextProvider,
   AxiomLatticeProvider,
   ChatUIContext,
   ChatUIContextProvider,
   Chating,
   ColumnLayout,
+  ConversationContext,
+  ConversationContextProvider,
   FileExplorer,
   LatticeChat,
+  LatticeChatShell,
+  LatticeChatShellContext,
+  LatticeChatShellContextProvider,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
@@ -4426,10 +6699,12 @@ var import_jsx_runtime32 = require("react/jsx-runtime");
   useAgentGraph,
   useAgentState,
   useAgentThreadContext,
+  useAssistantContext,
   useAxiomLattice,
   useChat,
   useChatUIContext,
-  useThread,
+  useConversationContext,
+  useLatticeChatShellContext,
   ...require("@axiom-lattice/protocols")
 });
 //# sourceMappingURL=index.js.map