@axiom-lattice/react-sdk 2.1.11 → 2.1.13

package/dist/index.mjs

@@ -59,7 +59,6 @@ function useChat(threadId, options = {}) {
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null,
     interrupts: void 0,
     ...options.enableReturnStateWhenStreamCompleted ? { agentState: null } : {}
   });
@@ -137,7 +136,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,
@@ -146,7 +145,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -367,7 +366,9 @@ import {
   useEffect as useEffect3,
   useRef as useRef2
 } from "react";
-import { createSimpleMessageMerger as createSimpleMessageMerger2 } from "@axiom-lattice/client-sdk";
+import {
+  createSimpleMessageMerger as createSimpleMessageMerger2
+} from "@axiom-lattice/client-sdk";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var AgentThreadContext = createContext2(
   null
@@ -390,10 +391,17 @@ function AgentThreadProvider({
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
-    streamingMessage: null,
     interrupts: void 0,
     agentState: null
   });
+  useEffect3(() => {
+    setState((prev) => ({
+      ...prev,
+      assistantId: clientAssistantId,
+      tenantId,
+      threadId
+    }));
+  }, [clientAssistantId, tenantId, threadId]);
   const stopStreamingRef = useRef2(null);
   const chunkMessageMerger = useRef2(createSimpleMessageMerger2());
   const lastAgentStateCreatedAtRef = useRef2(null);
@@ -460,8 +468,7 @@ function AgentThreadProvider({
         ...prev,
         todos: todos || prev.todos,
         messages: updatedMessages,
-        isLoading: true,
-        streamingMessage: null
+        isLoading: true
       }));
     },
     []
@@ -476,16 +483,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"
       };
@@ -524,8 +530,7 @@ function AgentThreadProvider({
               setState((prev) => ({
                 ...prev,
                 isLoading: false,
-                error,
-                streamingMessage: null
+                error
               }));
               stopStreamingRef.current = null;
             }
@@ -575,111 +580,148 @@ function AgentThreadProvider({
       setState((prev) => ({
         ...prev,
         messages: currentMessages,
-        isLoading: false,
-        streamingMessage: null
+        isLoading: false
       }));
     }
   }, []);
-  const loadMessages = useCallback2(
-    async (limit) => {
+  const resumeStream = useCallback2(
+    (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 = useCallback2(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 = useCallback2(() => {
     chunkMessageMerger.current.reset();
     lastAgentStateCreatedAtRef.current = null;
     setState((prev) => ({
       ...prev,
       messages: [],
-      interrupts: void 0,
-      streamingMessage: null
+      interrupts: void 0
     }));
   }, []);
   const clearError = useCallback2(() => {
@@ -706,6 +748,7 @@ function AgentThreadProvider({
     state,
     sendMessage,
     stopStreaming,
+    resumeStream,
     loadMessages,
     clearMessages,
     clearError
@@ -729,147 +772,20 @@ 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
-import { useState as useState4, useCallback as useCallback3 } from "react";
-function useThread() {
-  const client = useAxiomLattice();
-  const [state, setState] = useState4({
-    threads: [],
-    currentThread: null,
-    isLoading: false,
-    error: null
-  });
-  const createThread = useCallback3(
-    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 = useCallback3(
-    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 = useCallback3(
-    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 = useCallback3(
-    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 = useCallback3(
-    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
-import { useState as useState5, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useState as useState4, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3 } from "react";
 function useAgentState(threadId, options = {}) {
   const client = useAxiomLattice();
-  const [agentState, setAgentState] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(false);
-  const [error, setError] = useState5(null);
+  const [agentState, setAgentState] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
   const pollingIntervalRef = useRef3(null);
   const pollingTimeoutRef = useRef3(null);
   const {
@@ -877,7 +793,7 @@ function useAgentState(threadId, options = {}) {
     // 2 seconds by default
     autoStart = true
   } = options;
-  const fetchAgentState = useCallback4(async () => {
+  const fetchAgentState = useCallback3(async () => {
     if (!threadId) {
       return;
     }
@@ -892,7 +808,7 @@ function useAgentState(threadId, options = {}) {
       setIsLoading(false);
     }
   }, [client, threadId]);
-  const startPolling = useCallback4(() => {
+  const startPolling = useCallback3(() => {
     if (!threadId) {
       return;
     }
@@ -913,17 +829,17 @@ function useAgentState(threadId, options = {}) {
     };
     poll();
   }, [threadId, pollingInterval, fetchAgentState]);
-  const stopPolling = useCallback4(() => {
+  const stopPolling = useCallback3(() => {
     pollingIntervalRef.current = null;
     if (pollingTimeoutRef.current) {
       clearTimeout(pollingTimeoutRef.current);
       pollingTimeoutRef.current = null;
     }
   }, []);
-  const refresh = useCallback4(async () => {
+  const refresh = useCallback3(async () => {
     await fetchAgentState();
   }, [fetchAgentState]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (threadId && autoStart) {
       startPolling();
     } else {
@@ -944,13 +860,13 @@ function useAgentState(threadId, options = {}) {
 }
 
 // src/hooks/useAgentGraph.ts
-import { useState as useState6, useCallback as useCallback5 } from "react";
+import { useState as useState5, useCallback as useCallback4 } from "react";
 function useAgentGraph() {
   const client = useAxiomLattice();
-  const [graphImage, setGraphImage] = useState6(null);
-  const [isLoading, setIsLoading] = useState6(false);
-  const [error, setError] = useState6(null);
-  const fetchGraph = useCallback5(async () => {
+  const [graphImage, setGraphImage] = useState5(null);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const fetchGraph = useCallback4(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -974,7 +890,7 @@ function useAgentGraph() {
 export * from "@axiom-lattice/protocols";
 
 // src/components/Chat/ChatUIContext.tsx
-import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useState as useState7 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useState as useState6 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ChatUIContext = createContext3({
   sideAppVisible: false,
@@ -989,22 +905,26 @@ var ChatUIContext = createContext3({
   openSideApp: () => {
   },
   closeSideApp: () => {
+  },
+  menuCollapsed: false,
+  setMenuCollapsed: () => {
   }
 });
 var ChatUIContextProvider = ({
   children
 }) => {
-  const [sideAppVisible, setSideAppVisible] = useState7(false);
-  const [sideAppSize, setSideAppSize] = useState7("large");
-  const [sideAppSelectedCard, setSideAppSelectedCard] = useState7(null);
-  const openSideApp = useCallback6(
+  const [sideAppVisible, setSideAppVisible] = useState6(false);
+  const [sideAppSize, setSideAppSize] = useState6("large");
+  const [sideAppSelectedCard, setSideAppSelectedCard] = useState6(null);
+  const [menuCollapsed, setMenuCollapsed] = useState6(false);
+  const openSideApp = useCallback5(
     (card) => {
       setSideAppSelectedCard(card);
       setSideAppVisible(true);
     },
     [setSideAppSelectedCard, setSideAppVisible]
   );
-  const closeSideApp = useCallback6(() => {
+  const closeSideApp = useCallback5(() => {
     setSideAppSelectedCard(null);
     setSideAppVisible(false);
   }, [setSideAppSelectedCard, setSideAppVisible]);
@@ -1019,7 +939,9 @@ var ChatUIContextProvider = ({
         sideAppSelectedCard,
         setSideAppSelectedCard,
         openSideApp,
-        closeSideApp
+        closeSideApp,
+        menuCollapsed,
+        setMenuCollapsed
       },
       children
     }
@@ -1044,7 +966,6 @@ var useStyle = createStyles(({ token, css }) => {
       position: relative;
       overflow: hidden;
       padding: 16px;
-      padding-top: 2px;
       gap: 16px;
 
       .ant-prompts {
@@ -1053,7 +974,7 @@ var useStyle = createStyles(({ token, css }) => {
     `,
     menu: css`
       background: ${token.colorBgContainer}90;
-      width: 280px;
+      width: 240px;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -1171,6 +1092,17 @@ var useStyle = 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;
@@ -1305,10 +1237,25 @@ var useStyle = createStyles(({ token, css }) => {
 
 // src/components/Chat/ColumnLayout.tsx
 import { Fragment, jsx as jsx4, jsxs } from "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__ */ jsxs("div", { className: `fina_chat ${styles.layout}`, children: [
+    menu && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.menu} ${"open"} ${menuCollapsed ? "collapsed" : ""}`,
+        children: [
+          logo,
+          menu
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx4("div", { className: `${styles.mainContent} ${sideAppVisible ? "open" : ""}`, children: /* @__PURE__ */ jsx4("div", { className: `${styles.chat}`, children: left }) }),
     /* @__PURE__ */ jsxs(
       "div",
@@ -1333,20 +1280,20 @@ import {
 
 // src/components/GenUI/elements/confirm_feedback.tsx
 import { Button, Space, Typography } from "antd";
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/GenUI/MDResponse.tsx
 import ReactMarkdown from "react-markdown";
 import { Prism } from "react-syntax-highlighter";
 import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import remarkGfm from "remark-gfm";
-import { useMemo as useMemo2, useRef as useRef5, useState as useState8 } from "react";
+import { useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
 import { createStyles as createStyles2 } from "antd-style";
 import rehypeRaw from "rehype-raw";
 
 // src/components/GenUI/MDMermaid.tsx
 import mermaid from "mermaid";
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
 import { v4 } from "uuid";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var MDMermaid = ({ children = [] }) => {
@@ -1354,7 +1301,7 @@ var MDMermaid = ({ children = [] }) => {
   const code = String(children);
   const target = useRef4(null);
   const targetInternal = useRef4(null);
-  useEffect6(() => {
+  useEffect5(() => {
     if (target.current && code) {
       mermaid.initialize({
         startOnLoad: true,
@@ -1584,8 +1531,8 @@ var MDViewFormItem = ({ value }) => {
 };
 var IFrameCard = ({ src }) => {
   const containerRef = useRef5(null);
-  const [width, setWidth] = useState8("640px");
-  const [height, setHeight] = useState8("320px");
+  const [width, setWidth] = useState7("640px");
+  const [height, setHeight] = useState7("320px");
   const valid_images = [
     "jpg",
     "jpeg",
@@ -1615,11 +1562,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] = useState9(false);
+  const [clicked, setClicked] = useState8(false);
   return /* @__PURE__ */ jsxs2(Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx7(MDResponse, { content: message4 }),
+    /* @__PURE__ */ jsx7(MDResponse, { content: message5 }),
     options ? /* @__PURE__ */ jsx7(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx7(
       Button,
       {
@@ -1696,13 +1643,13 @@ var ConfirmFeedback = ({
 
 // src/components/GenUI/elements/generic_data_table.tsx
 import { Table, Typography as Typography2, Button as Button2, Flex, Space as Space2 } from "antd";
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var { Text: Text2 } = Typography2;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message4 } = data ?? {};
-  const [expandedRowKeys, setExpandedRowKeys] = useState10([]);
+  const { dataSource, message: message5 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = useState9([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
     ...item,
@@ -1785,7 +1732,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ jsxs3(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx8(Space2, { children: /* @__PURE__ */ jsx8(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ jsx8(Space2, { children: /* @__PURE__ */ jsx8(Text2, { strong: true, style: { fontSize: 16 }, children: message5 || "" }) }),
         /* @__PURE__ */ jsxs3(Space2, { children: [
           /* @__PURE__ */ jsx8(
             Button2,
@@ -1806,8 +1753,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: [
@@ -2319,7 +2266,7 @@ var WriteTodos = ({
 };
 
 // src/components/GenUI/FileExplorer.tsx
-import { useState as useState11, useEffect as useEffect7, useMemo as useMemo3 } from "react";
+import { useState as useState10, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 import { Splitter, Tree, Empty, Button as Button3, Tooltip, message } from "antd";
 import {
   FolderOutlined,
@@ -2565,17 +2512,17 @@ var FileExplorer = ({
 }) => {
   const { files } = data ?? {};
   const { styles, cx } = useStyles2();
-  const [fileList, setFileList] = useState11([]);
-  const [selectedKey, setSelectedKey] = useState11("");
-  const [expandedKeys, setExpandedKeys] = useState11([]);
-  const [copied, setCopied] = useState11(false);
-  useEffect7(() => {
+  const [fileList, setFileList] = useState10([]);
+  const [selectedKey, setSelectedKey] = useState10("");
+  const [expandedKeys, setExpandedKeys] = useState10([]);
+  const [copied, setCopied] = useState10(false);
+  useEffect6(() => {
     if (copied) {
       const timer = setTimeout(() => setCopied(false), 2e3);
       return () => clearTimeout(timer);
     }
   }, [copied]);
-  useEffect7(() => {
+  useEffect6(() => {
     let list = [];
     if (Array.isArray(files)) {
       list = files;
@@ -2595,7 +2542,7 @@ var FileExplorer = ({
     () => buildTreeData(fileList, expandedKeys),
     [fileList, expandedKeys]
   );
-  useEffect7(() => {
+  useEffect6(() => {
     if (treeData.length > 0 && expandedKeys.length === 0) {
       const getAllKeys = (nodes) => {
         let keys = [];
@@ -2733,7 +2680,7 @@ import {
   Button as Button4
 } from "antd";
 import dayjs from "dayjs";
-import { useState as useState12 } from "react";
+import { useState as useState11 } from "react";
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var AttachmentsCard = ({
   data,
@@ -2742,8 +2689,8 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text11 } = Typography7;
-  const [showAll, setShowAll] = useState12(false);
+  const { Text: Text12 } = Typography7;
+  const [showAll, setShowAll] = useState11(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
     switch (size) {
@@ -2817,7 +2764,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx16(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx16(Space7, { children: /* @__PURE__ */ jsx16(
-    Text11,
+    Text12,
     {
       type: "secondary",
       style: {
@@ -2889,7 +2836,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs9(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs9(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -2924,14 +2871,14 @@ var AttachmentsCard = ({
 
 // src/components/GenUI/elements/attachments_viewer_side_app.tsx
 import { Button as Button5, Empty as Empty2, Skeleton } from "antd";
-import { useState as useState13 } from "react";
+import { useState as useState12 } from "react";
 import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function AttachmentsViewerSideApp({
   data,
   component_key
 }) {
-  const [fileUri, setFileUri] = useState13();
-  const [loading, setLoading] = useState13(true);
+  const [fileUri, setFileUri] = useState12();
+  const [loading, setLoading] = useState12(true);
   const { file_id } = data ?? {};
   if (loading) {
     return /* @__PURE__ */ jsx17(Skeleton, { active: true });
@@ -2994,7 +2941,7 @@ function AttachmentsViewerSideApp({
 import { Button as Button6, Space as Space8, Typography as Typography8 } from "antd";
 
 // src/components/GenUI/elements/ContentPreviewCollapse.tsx
-import { useRef as useRef6, useState as useState14, useEffect as useEffect9, useCallback as useCallback7 } from "react";
+import { useRef as useRef6, useState as useState13, useEffect as useEffect8, useCallback as useCallback6 } from "react";
 import { Collapse as Collapse4 } from "antd";
 import { createStyles as createStyles6 } from "antd-style";
 import { DownOutlined as DownOutlined2, UpOutlined } from "@ant-design/icons";
@@ -3064,18 +3011,18 @@ var ContentPreviewCollapse = ({
   showAllText = "Show all content",
   showLessText = "Show less"
 }) => {
-  const [showFullContent, setShowFullContent] = useState14(false);
-  const [isOverflowing, setIsOverflowing] = useState14(false);
+  const [showFullContent, setShowFullContent] = useState13(false);
+  const [isOverflowing, setIsOverflowing] = useState13(false);
   const contentRef = useRef6(null);
   const showShadow = isOverflowing && !showFullContent;
   const { styles, cx } = useStyle4({ showShadow });
-  const checkOverflow = useCallback7(() => {
+  const checkOverflow = useCallback6(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
       setIsOverflowing(scrollHeight > collapsedMaxHeight);
     }
   }, [collapsedMaxHeight]);
-  useEffect9(() => {
+  useEffect8(() => {
     const element = contentRef.current;
     if (!element) return;
     checkOverflow();
@@ -3267,8 +3214,7 @@ import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var { Text: Text8 } = Typography10;
 var useStyle5 = createStyles7(({ 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);
@@ -3278,17 +3224,17 @@ var useStyle5 = createStyles7(({ 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%
       );
@@ -3390,14 +3336,34 @@ var useStyle5 = createStyles7(({ token, css }) => ({
     color: ${token.colorTextTertiary};
     font-size: 14px;
     transition: all 0.2s ease;
-  `
-}));
-var TaskCard = ({
-  data,
-  component_key,
-  interactive = true
-}) => {
-  const { styles } = useStyle5();
+  `,
+  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 = ({
+  data,
+  component_key,
+  interactive = true
+}) => {
+  const { styles } = useStyle5();
   const toolCallData = data;
   const { openSideApp } = useChatUIContext();
   if (!toolCallData) {
@@ -3405,6 +3371,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) => {
@@ -3434,6 +3401,7 @@ var TaskCard = ({
     }
   };
   const statusConfig = getStatusConfig(status);
+  const showResponse = status === "success" && response;
   const handleCardClick = () => {
     openSideApp({
       component_key: "task",
@@ -3494,7 +3462,18 @@ var TaskCard = ({
             )
           ] }),
           interactive && /* @__PURE__ */ jsx22(RightOutlined2, { className: styles.actionIcon })
-        ] })
+        ] }),
+        showResponse && /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: styles.responseSection,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx22(Text8, { className: styles.responseHeader, children: "Response" }),
+              /* @__PURE__ */ jsx22("div", { className: styles.responseContent, children: /* @__PURE__ */ jsx22(MDResponse, { content: response }) })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -3521,22 +3500,22 @@ import { Space as Space10 } from "antd";
 import ErrorBoundary from "antd/es/alert/ErrorBoundary";
 import {
   memo,
-  useCallback as useCallback8,
-  useEffect as useEffect10,
+  useCallback as useCallback7,
+  useEffect as useEffect9,
   useMemo as useMemo4,
   useRef as useRef7,
-  useState as useState15
+  useState as useState14
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message4,
+  message: message5,
   renderContent,
   autoLoadRightPanel
 }) => {
   const ref = useRef7(null);
-  const [isVisible, setIsVisible] = useState15(false);
-  const [wasEverVisible, setWasEverVisible] = useState15(false);
-  useEffect10(() => {
+  const [isVisible, setIsVisible] = useState14(false);
+  const [wasEverVisible, setWasEverVisible] = useState14(false);
+  useEffect9(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -3556,14 +3535,14 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  useEffect10(() => {
+  useEffect9(() => {
     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__ */ jsx23("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message5) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
@@ -3589,13 +3568,13 @@ var MessageList = ({
   const { styles } = useStyle();
   const { openSideApp } = useChatUIContext();
   const messageLengthRef = useRef7(messages?.length ?? 0);
-  useEffect10(() => {
+  useEffect9(() => {
     if (messages?.length) {
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = useCallback8((message4) => {
-    const { content } = message4;
+  const renderContent = useCallback7((message5) => {
+    const { content } = message5;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -3603,7 +3582,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)}
 \`\`\``;
@@ -3612,17 +3591,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ jsx23(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx23(MDResponse, { content: content_md }) });
   }, []);
   const items = useMemo4(
-    () => messages.map((message4, index) => ({
-      key: message4.id,
-      role: message4.role,
+    () => messages.map((message5, index) => ({
+      key: message5.id,
+      role: message5.role,
       typing: false,
       content: /* @__PURE__ */ jsx23(
         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 {
@@ -3695,7 +3674,7 @@ import {
   Button as Button10,
   message as message3
 } from "antd";
-import React6, { useEffect as useEffect11, useRef as useRef8, useState as useState16 } from "react";
+import React6, { useEffect as useEffect10, useRef as useRef8, useState as useState15 } from "react";
 
 // src/components/GenUI/HITLContainer.tsx
 import {
@@ -3875,8 +3854,8 @@ var AgentHeader = (props) => {
         style: { padding: 8 },
         variant: "borderless",
         description,
-        icon: /* @__PURE__ */ jsx27(Avatar2, { src: avatar || "/images/avatar.jpeg", size: 48 }),
-        title: name || "Fina",
+        icon: avatar ? /* @__PURE__ */ jsx27(Avatar2, { src: avatar, size: 48 }) : /* @__PURE__ */ jsx27(Avatar2, { size: 48, children: name?.charAt(0).toUpperCase() }),
+        title: name ? name : void 0,
         extra: /* @__PURE__ */ jsxs16(Space12, { children: [
           extra,
           /* @__PURE__ */ jsx27(TodoProgress, {}),
@@ -3913,10 +3892,10 @@ var Chating = ({
   showHITL = true,
   showRefreshButton = false
 }) => {
-  const [content, setContent] = useState16("");
-  const [attachedFiles, setAttachedFiles] = useState16([]);
+  const [content, setContent] = useState15("");
+  const [attachedFiles, setAttachedFiles] = useState15([]);
   const { styles } = useStyle();
-  const [headerOpen, setHeaderOpen] = useState16(false);
+  const [headerOpen, setHeaderOpen] = useState15(false);
   const attachmentsRef = useRef8(null);
   const senderRef = React6.useRef(null);
   const {
@@ -3930,7 +3909,7 @@ var Chating = ({
     tenantId,
     clearError
   } = useAgentChat();
-  useEffect11(() => {
+  useEffect10(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -4221,7 +4200,7 @@ var regsiterElement = (language, ElementMeta) => {
 // src/components/Chat/SideAppViewBrowser.tsx
 import { Button as Button11, Tabs } from "antd";
 import { createStyles as createStyles9 } from "antd-style";
-import { useEffect as useEffect12, useState as useState17 } from "react";
+import { useEffect as useEffect11, useState as useState16 } from "react";
 import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var useStyle7 = createStyles9(({ token, css }) => {
   return {
@@ -4256,10 +4235,10 @@ var SideAppViewBrowser = () => {
     openSideApp,
     closeSideApp
   } = useChatUIContext();
-  const [activeKey, setActiveKey] = useState17(
+  const [activeKey, setActiveKey] = useState16(
     JSON.stringify(sideAppSelectedCard)
   );
-  const [items, setItems] = useState17([]);
+  const [items, setItems] = useState16([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -4295,7 +4274,7 @@ var SideAppViewBrowser = () => {
       remove(targetKey);
     }
   };
-  useEffect12(() => {
+  useEffect11(() => {
     const SideAppView = getElement(sideAppSelectedCard?.component_key).side_app_view || EmptySideAppView;
     const key = JSON.stringify(sideAppSelectedCard);
     if (items.find((item) => item.key === key)) {
@@ -4400,7 +4379,7 @@ var SideAppViewBrowser = () => {
 // src/components/Chat/LatticeChat.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
 var LatticeChat = (props) => {
-  const { assistant_id, thread_id, ...chatingProps } = props;
+  const { assistant_id, thread_id = "", menu, ...chatingProps } = props;
   return /* @__PURE__ */ jsx31(
     AgentThreadProvider,
     {
@@ -4414,7 +4393,8 @@ var LatticeChat = (props) => {
       children: /* @__PURE__ */ jsx31(ChatUIContextProvider, { children: /* @__PURE__ */ jsx31(
         ColumnLayout,
         {
-          left: /* @__PURE__ */ jsx31(Chating, { ...chatingProps }),
+          menu,
+          left: thread_id ? /* @__PURE__ */ jsx31(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx31("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
           right: /* @__PURE__ */ jsx31(SideAppViewBrowser, {})
         }
       ) })
@@ -4422,26 +4402,2356 @@ var LatticeChat = (props) => {
   );
 };
 
-// src/components/Chat/AgentConversations.tsx
+// src/components/Chat/ConversationContext.tsx
 import {
-  CodeOutlined as CodeOutlined4,
-  FileImageOutlined as FileImageOutlined3,
-  FileSearchOutlined,
-  SignatureOutlined
-} from "@ant-design/icons";
-import { Conversations } from "@ant-design/x";
-import { theme } from "antd";
-import { useState as useState18 } from "react";
+  createContext as createContext6,
+  useCallback as useCallback10,
+  useContext as useContext6,
+  useEffect as useEffect13,
+  useMemo as useMemo7,
+  useRef as useRef10,
+  useState as useState19
+} from "react";
+
+// src/components/Chat/AssistantContext.tsx
+import {
+  createContext as createContext5,
+  useCallback as useCallback9,
+  useContext as useContext5,
+  useEffect as useEffect12,
+  useMemo as useMemo6,
+  useRef as useRef9,
+  useState as useState18
+} from "react";
+import {
+  Client as Client2
+} from "@axiom-lattice/client-sdk";
+
+// src/components/Chat/LatticeChatShellContext.tsx
+import {
+  createContext as createContext4,
+  useCallback as useCallback8,
+  useContext as useContext4,
+  useState as useState17
+} from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
+var DEFAULT_CONFIG = {
+  baseURL: "http://localhost:4001",
+  apiKey: "",
+  transport: "sse",
+  timeout: 3e5,
+  headers: {}
+};
+var LatticeChatShellContext = createContext4({
+  config: DEFAULT_CONFIG,
+  updateConfig: () => {
+  },
+  updateConfigValue: () => {
+  },
+  resetConfig: () => {
+  }
+});
+var LatticeChatShellContextProvider = ({
+  children,
+  initialConfig = {},
+  persistToLocalStorage = false,
+  localStorageKey = "lattice_chat_shell_config"
+}) => {
+  const loadInitialConfig = useCallback8(() => {
+    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] = useState17(loadInitialConfig);
+  const saveToLocalStorage = useCallback8(
+    (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 = useCallback8(
+    (updates) => {
+      setConfig((prev) => {
+        const newConfig = { ...prev, ...updates };
+        saveToLocalStorage(newConfig);
+        return newConfig;
+      });
+    },
+    [saveToLocalStorage]
+  );
+  const updateConfigValue = useCallback8(
+    (key, value) => {
+      setConfig((prev) => {
+        const newConfig = { ...prev, [key]: value };
+        saveToLocalStorage(newConfig);
+        return newConfig;
+      });
+    },
+    [saveToLocalStorage]
+  );
+  const resetConfig = useCallback8(() => {
+    const defaultConfig = { ...DEFAULT_CONFIG, ...initialConfig };
+    setConfig(defaultConfig);
+    saveToLocalStorage(defaultConfig);
+  }, [initialConfig, saveToLocalStorage]);
+  return /* @__PURE__ */ jsx32(
+    LatticeChatShellContext.Provider,
+    {
+      value: {
+        config,
+        updateConfig,
+        updateConfigValue,
+        resetConfig
+      },
+      children
+    }
+  );
+};
+var useLatticeChatShellContext = () => {
+  const context = useContext4(LatticeChatShellContext);
+  if (!context) {
+    throw new Error(
+      "useLatticeChatShellContext must be used within a LatticeChatShellContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/AssistantContext.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var AssistantContext = createContext5({
+  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 = useMemo6(
+    () => new Client2({
+      baseURL,
+      apiKey,
+      assistantId: "",
+      transport
+    }),
+    [baseURL, apiKey, transport]
+  );
+  const [state, setState] = useState18({
+    assistants: [],
+    currentAssistant: null,
+    isLoading: false,
+    error: null
+  });
+  const assistantsRef = useRef9([]);
+  useEffect12(() => {
+    assistantsRef.current = state.assistants;
+  }, [state.assistants]);
+  const listAssistants = useCallback9(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 = useCallback9(
+    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 = useCallback9(
+    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 = useCallback9(
+    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 = useCallback9(
+    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 = useCallback9(
+    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 = useCallback9(() => {
+    setState((prev) => ({
+      ...prev,
+      currentAssistant: null
+    }));
+  }, []);
+  const refresh = useCallback9(async () => {
+    await listAssistants();
+  }, [listAssistants]);
+  useEffect12(() => {
+    if (autoLoad) {
+      listAssistants();
+    }
+  }, [autoLoad, listAssistants]);
+  useEffect12(() => {
+    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__ */ jsx33(
+    AssistantContext.Provider,
+    {
+      value: {
+        ...state,
+        listAssistants,
+        getAssistant,
+        createAssistant,
+        updateAssistant,
+        deleteAssistant,
+        selectAssistant,
+        clearCurrentAssistant,
+        refresh
+      },
+      children
+    }
+  );
+};
+var useAssistantContext = () => {
+  const context = useContext5(AssistantContext);
+  if (!context) {
+    throw new Error(
+      "useAssistantContext must be used within an AssistantContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/ConversationContext.tsx
+import { Client as Client3 } from "@axiom-lattice/client-sdk";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var ConversationContext = createContext6({
+  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 = useMemo7(
+    () => new Client3({
+      baseURL,
+      apiKey,
+      assistantId: assistantId || "",
+      transport
+    }),
+    [baseURL, apiKey, assistantId, transport]
+  );
+  const [threads, setThreads] = useState19([]);
+  const [threadId, setThreadId] = useState19(null);
+  const [isLoading, setIsLoading] = useState19(false);
+  const [error, setError] = useState19(null);
+  const loadedAssistantIdRef = useRef10(null);
+  const prevAssistantIdRef = useRef10(null);
+  const isLoadingRef = useRef10(false);
+  const clientRef = useRef10(client);
+  useEffect13(() => {
+    clientRef.current = client;
+  }, [client]);
+  const loadThreads = useCallback10(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]);
+  useEffect13(() => {
+    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 = useMemo7(() => {
+    if (!assistantId || !threadId) {
+      return null;
+    }
+    return threads.find((t) => t.id === threadId) || null;
+  }, [assistantId, threadId, threads]);
+  const setThread = useCallback10((newThread) => {
+    if (newThread) {
+      setThreadId(newThread.id);
+    } else {
+      setThreadId(null);
+    }
+  }, []);
+  const selectThread = useCallback10(
+    (targetThreadId) => {
+      const foundThread = threads.find((t) => t.id === targetThreadId);
+      if (foundThread) {
+        setThreadId(targetThreadId);
+      }
+    },
+    [threads]
+  );
+  const createThread = useCallback10(
+    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 = useCallback10(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 = useCallback10(
+    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 = useCallback10(
+    (targetThreadId) => {
+      return threads.find((t) => t.id === targetThreadId) || null;
+    },
+    [threads]
+  );
+  const deleteThread = useCallback10(
+    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 = useCallback10(() => {
+    setThreadId(null);
+  }, []);
+  return /* @__PURE__ */ jsx34(
+    ConversationContext.Provider,
+    {
+      value: {
+        assistantId,
+        thread,
+        threadId,
+        threads,
+        isLoading,
+        error,
+        setThread,
+        selectThread,
+        createThread,
+        listThreads,
+        updateThread,
+        getThreadById,
+        deleteThread,
+        clearThread,
+        refresh: loadThreads
+      },
+      children
+    }
+  );
+};
+var useConversationContext = () => {
+  const context = useContext6(ConversationContext);
+  if (!context) {
+    throw new Error(
+      "useConversationContext must be used within a ConversationContextProvider"
+    );
+  }
+  return context;
+};
+
+// src/components/Chat/AgentConversations.tsx
+import { Conversations } from "@ant-design/x";
+import { theme } from "antd";
+import { useMemo as useMemo8 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var AgentConversations = () => {
+  const { token } = theme.useToken();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    assistantId,
+    thread,
+    selectThread,
+    createThread,
+    listThreads,
+    threads
+  } = useConversationContext();
+  const style = {
+    width: "100%",
+    background: "transparent",
+    borderRadius: token.borderRadius
+  };
+  const threadItems = useMemo8(() => {
+    return threads || [];
+  }, [threads]);
+  const items = threadItems.map((thread2) => ({
+    key: thread2.id,
+    label: thread2.label
+  }));
+  const newChatClick = async () => {
+    if (!assistantId) {
+      return;
+    }
+    await createThread();
+  };
+  return /* @__PURE__ */ jsx35(
+    Conversations,
+    {
+      creation: {
+        onClick: newChatClick
+      },
+      items,
+      activeKey: thread?.id,
+      style,
+      groupable: true,
+      onActiveChange: (key) => {
+        selectThread(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+import { useState as useState21 } from "react";
+import { Divider as Divider2 } from "antd";
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined
+} from "@ant-design/icons";
+
+// src/components/Chat/AssistantList.tsx
+import { Conversations as Conversations2 } from "@ant-design/x";
+import { Avatar as Avatar3, theme as theme2 } from "antd";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var AssistantList = () => {
+  const { token } = theme2.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__ */ jsx36(
+      Avatar3,
+      {
+        size: "small",
+        style: {
+          backgroundColor: token.colorFillSecondary,
+          color: token.colorText
+        },
+        children: assistant.name.charAt(0).toUpperCase()
+      }
+    )
+  }));
+  return /* @__PURE__ */ jsx36(
+    Conversations2,
+    {
+      items,
+      activeKey: currentAssistant?.id,
+      style,
+      onActiveChange: (key) => {
+        selectAssistant(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+import { createStyles as createStyles11 } from "antd-style";
+
+// src/components/Chat/SettingsModal.tsx
+import { useState as useState20, useEffect as useEffect14, useRef as useRef11 } from "react";
+import {
+  Modal,
+  Input,
+  Button as Button12,
+  message as message4,
+  Typography as Typography13,
+  Alert as Alert3,
+  Select,
+  Switch,
+  Space as Space13,
+  Tabs as Tabs2,
+  Drawer
+} from "antd";
+import {
+  SaveOutlined,
+  EnvironmentOutlined,
+  ReloadOutlined as ReloadOutlined2,
+  CheckCircleOutlined as CheckCircleOutlined4,
+  ApiOutlined,
+  LinkOutlined,
+  CheckCircleFilled,
+  CloseCircleFilled,
+  PlusOutlined,
+  CloudServerOutlined
+} from "@ant-design/icons";
+import { createStyles as createStyles10 } from "antd-style";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var { Text: Text11, Title: Title2 } = Typography13;
+var { TextArea } = Input;
+var useStyles3 = createStyles10(({ 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__ */ jsx37(EnvironmentOutlined, {})
+  },
+  {
+    key: "models",
+    label: "Model Configuration",
+    icon: /* @__PURE__ */ jsx37(ApiOutlined, {})
+  }
+];
+var SettingsModal = ({
+  open,
+  onClose
+}) => {
+  const { styles } = useStyles3();
+  const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
+  const [connections, setConnections] = useState20(() => {
+    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] = useState20({});
+  const connectionsRef = useRef11(connections);
+  useEffect14(() => {
+    connectionsRef.current = connections;
+  }, [connections]);
+  const [activeTabKey, setActiveTabKey] = useState20(
+    connections.length > 0 ? connections[0].id : ""
+  );
+  const [activeMenu, setActiveMenu] = useState20("environment");
+  const [loading, setLoading] = useState20(false);
+  const [showAddServerModal, setShowAddServerModal] = useState20(false);
+  const [newServerUrl, setNewServerUrl] = useState20("");
+  const [newServerName, setNewServerName] = useState20("");
+  const [newServerApiKey, setNewServerApiKey] = useState20("");
+  const [addingServer, setAddingServer] = useState20(false);
+  const 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);
+      message4.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);
+    }
+  };
+  useEffect14(() => {
+    if (open && activeTabKey) {
+      initializeServerConfig(activeTabKey);
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection && !connection.connected && !connection.connecting) {
+        checkConnection(activeTabKey);
+      }
+    }
+  }, [open, activeTabKey]);
+  useEffect14(() => {
+    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()) {
+      message4.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("");
+    message4.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("");
+      }
+    }
+    message4.success("Server deleted");
+  };
+  const handleSave = async () => {
+    const connection = connections.find((c) => c.id === activeTabKey);
+    if (!connection || !connection.connected) {
+      message4.error("Please connect to a server first");
+      return;
+    }
+    const url = connection.url;
+    if (!url) {
+      message4.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) {
+            message4.warning(
+              `Configuration saved. Please restart the server for ${data.requiresRestart.join(
+                ", "
+              )} to take effect.`,
+              5
+            );
+          } else {
+            message4.success("Configuration saved and applied successfully");
+          }
+          if (data.warnings && data.warnings.length > 0) {
+            data.warnings.forEach((warning) => {
+              message4.warning(warning, 5);
+            });
+          }
+          onClose();
+        } else {
+          message4.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) {
+          message4.success(
+            "Model configuration saved and registered successfully"
+          );
+          onClose();
+        } else {
+          message4.error(data.error || "Failed to save model configuration");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to save configuration:", error);
+      message4.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__ */ jsxs19("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx37(
+        Alert3,
+        {
+          message: "Configuration Effect",
+          description: /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsxs19("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx37(
+                CheckCircleOutlined4,
+                {
+                  style: { color: "#52c41a", marginRight: 8 }
+                }
+              ),
+              /* @__PURE__ */ jsx37("strong", { children: "Immediately effective:" }),
+              " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
+            ] }),
+            /* @__PURE__ */ jsxs19("div", { children: [
+              /* @__PURE__ */ jsx37(ReloadOutlined2, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx37("strong", { children: "Requires restart:" }),
+              " PORT (server must be restarted to change port)"
+            ] })
+          ] }),
+          type: "info",
+          showIcon: true,
+          className: styles.alertCard
+        }
+      ),
+      /* @__PURE__ */ jsx37("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
+      /* @__PURE__ */ jsx37(
+        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__ */ jsxs19("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx37("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ jsxs19("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 24,
+              paddingBottom: 20,
+              borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs19("div", { children: [
+                /* @__PURE__ */ jsxs19(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                  "Model ",
+                  index + 1
+                ] }),
+                model.key && /* @__PURE__ */ jsxs19(
+                  Text11,
+                  {
+                    type: "secondary",
+                    style: { marginLeft: 8, fontSize: 12 },
+                    children: [
+                      "(",
+                      model.key,
+                      ")"
+                    ]
+                  }
+                )
+              ] }),
+              config.models.length > 1 && /* @__PURE__ */ jsx37(
+                Button12,
+                {
+                  type: "text",
+                  danger: true,
+                  size: "small",
+                  onClick: () => handleRemoveModel(index),
+                  style: {
+                    borderRadius: 6,
+                    transition: "all 0.2s"
+                  },
+                  children: "Remove"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs19(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx37(
+              Input,
+              {
+                placeholder: "e.g., default, gpt-4, claude",
+                value: model.key,
+                onChange: (e) => handleModelChange(index, "key", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx37(
+              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__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx37(
+              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__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx37(
+              Input.Password,
+              {
+                placeholder: "Enter your API key",
+                value: model.apiKey,
+                onChange: (e) => handleModelChange(index, "apiKey", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx37(
+              Input,
+              {
+                placeholder: "e.g., https://api.openai.com/v1",
+                value: model.baseURL,
+                onChange: (e) => handleModelChange(index, "baseURL", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+          ] }),
+          /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsxs19(Space13, { children: [
+            /* @__PURE__ */ jsx37(
+              Switch,
+              {
+                checked: model.streaming,
+                onChange: (checked) => handleModelChange(index, "streaming", checked)
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { children: "Enable Streaming" })
+          ] }) }),
+          /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs19("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx37(
+                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__ */ jsxs19("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx37(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx37(
+                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__ */ jsx37(
+        Button12,
+        {
+          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__ */ jsxs19("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx37(
+        CloudServerOutlined,
+        {
+          style: {
+            marginRight: 8,
+            color: connection.connected ? "#52c41a" : connection.connecting ? "#1890ff" : "#d9d9d9"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx37("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx37(
+        CheckCircleFilled,
+        {
+          style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
+        }
+      ),
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx37(
+        CloseCircleFilled,
+        {
+          style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
+        }
+      )
+    ] });
+  };
+  const tabItems = connections.map((connection) => ({
+    key: connection.id,
+    label: renderTabLabel(connection),
+    children: /* @__PURE__ */ jsx37("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx37(Fragment5, { children: /* @__PURE__ */ jsxs19("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx37("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
+          onClick: () => setActiveMenu(item.key),
+          children: [
+            /* @__PURE__ */ jsx37("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx37("span", { className: styles.menuItemText, children: item.label })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs19("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs19("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx37(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs19(Text11, { className: styles.contentDescription, children: [
+              activeMenu === "environment" && "Manage environment variables for the gateway server",
+              activeMenu === "models" && "Configure and register model lattices for use by agents"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx37(Button12, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx37(
+              Button12,
+              {
+                type: "primary",
+                icon: /* @__PURE__ */ jsx37(SaveOutlined, {}),
+                onClick: handleSave,
+                loading,
+                children: "Save Configuration"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx37("div", { className: styles.contentBody, children: renderContent(connection.id) })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsx37(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 16,
+          padding: 48
+        },
+        children: connection.connecting ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          /* @__PURE__ */ jsx37(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx37(Title2, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs19(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+            "Connecting to ",
+            connection.url
+          ] })
+        ] }) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          /* @__PURE__ */ jsx37(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx37(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx37(
+            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__ */ jsx37(
+            Button12,
+            {
+              type: "primary",
+              icon: /* @__PURE__ */ jsx37(LinkOutlined, {}),
+              onClick: () => checkConnection(connection.id),
+              loading: connection.connecting,
+              style: { marginTop: 16 },
+              children: "Reconnect"
+            }
+          )
+        ] })
+      }
+    ) }),
+    closable: connections.length > 1
+  }));
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx37(
+      Drawer,
+      {
+        open,
+        onClose,
+        footer: null,
+        width: "100%",
+        title: "Settings",
+        children: /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(
+          Tabs2,
+          {
+            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__ */ jsxs19(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "4px 8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx37(PlusOutlined, {}),
+                  /* @__PURE__ */ jsx37("span", { children: "Add Server" })
+                ]
+              }
+            )
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx37(
+      Modal,
+      {
+        title: "Add New Server",
+        open: showAddServerModal,
+        onOk: handleAddServer,
+        onCancel: () => {
+          setShowAddServerModal(false);
+          setNewServerUrl("");
+          setNewServerName("");
+          setNewServerApiKey("");
+        },
+        confirmLoading: addingServer,
+        className: styles.addServerModal,
+        children: /* @__PURE__ */ jsxs19(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx37(
+              Input,
+              {
+                placeholder: "e.g., Production Server",
+                value: newServerName,
+                onChange: (e) => setNewServerName(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx37(
+              Input,
+              {
+                placeholder: "e.g., http://localhost:4001",
+                value: newServerUrl,
+                onChange: (e) => setNewServerUrl(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+          ] }),
+          /* @__PURE__ */ jsxs19("div", { children: [
+            /* @__PURE__ */ jsx37(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx37(
+              Input.Password,
+              {
+                placeholder: "Optional: Enter API key for authentication",
+                value: newServerApiKey,
+                onChange: (e) => setNewServerApiKey(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx37(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/ChatSidebar.tsx
+import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var useStyles4 = createStyles11(({ token, css }) => ({
+  sidebar: css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: transparent;
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: hidden;
+  `,
+  content: css`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: ${token.paddingMD}px ${token.paddingSM}px;
+    padding-bottom: ${token.paddingLG}px;
+
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 3px;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  section: css`
+    margin-bottom: ${token.marginLG}px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  `,
+  sectionTitle: css`
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 600;
+    color: ${token.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 0 ${token.paddingXS}px;
+    margin-bottom: ${token.marginSM}px;
+  `,
+  footer: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: ${token.paddingSM}px;
+    background: transparent;
+    border-top: 1px solid ${token.colorBorderSecondary};
+    gap: ${token.marginXS}px;
+    flex-shrink: 0;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        ${token.colorBorder},
+        transparent
+      );
+    }
+  `,
+  actionButton: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: ${token.borderRadius}px;
+    border: none;
+    background: ${token.colorBgContainer};
+    color: ${token.colorTextSecondary};
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      background: ${token.colorPrimaryBg};
+      color: ${token.colorPrimary};
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+
+    .anticon {
+      font-size: 16px;
+    }
+  `,
+  divider: css`
+    margin: ${token.marginMD}px 0;
+    border-color: ${token.colorBorderSecondary};
+  `
+}));
+var ChatSidebar = ({
+  onSettingsClick,
+  defaultCollapsed = false
+}) => {
+  const { styles } = useStyles4();
+  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const [settingsModalOpen, setSettingsModalOpen] = useState21(false);
+  const handleToggleCollapse = () => {
+    setMenuCollapsed(!menuCollapsed);
+  };
+  const handleSettingsClick = () => {
+    setSettingsModalOpen(true);
+    onSettingsClick?.();
+  };
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsxs20("div", { className: styles.sidebar, children: [
+      !menuCollapsed && /* @__PURE__ */ jsxs20("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
+          /* @__PURE__ */ jsx38("div", { className: styles.sectionTitle, children: "Assistants" }),
+          /* @__PURE__ */ jsx38(AssistantList, {})
+        ] }),
+        /* @__PURE__ */ jsx38(Divider2, { className: styles.divider }),
+        /* @__PURE__ */ jsxs20("div", { className: styles.section, children: [
+          /* @__PURE__ */ jsx38("div", { className: styles.sectionTitle, children: "Threads" }),
+          /* @__PURE__ */ jsx38(AgentConversations, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: styles.footer, children: [
+        /* @__PURE__ */ jsx38(
+          "button",
+          {
+            className: styles.actionButton,
+            onClick: handleToggleCollapse,
+            title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: menuCollapsed ? /* @__PURE__ */ jsx38(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx38(MenuFoldOutlined, {})
+          }
+        ),
+        !menuCollapsed && /* @__PURE__ */ jsx38(
+          "button",
+          {
+            className: styles.actionButton,
+            onClick: handleSettingsClick,
+            title: "Settings",
+            "aria-label": "Settings",
+            children: /* @__PURE__ */ jsx38(SettingOutlined, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx38(
+      SettingsModal,
+      {
+        open: settingsModalOpen,
+        onClose: () => setSettingsModalOpen(false)
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/LatticeChatView.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var LatticeChatView = (props) => {
+  const { assistantId, thread } = useConversationContext();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    config: { baseURL }
+  } = useLatticeChatShellContext();
+  return assistantId && thread ? /* @__PURE__ */ jsx39(
+    AxiomLatticeProvider,
+    {
+      config: {
+        baseURL,
+        apiKey: "",
+        assistantId,
+        transport: "sse"
+      },
+      children: /* @__PURE__ */ jsx39(
+        LatticeChat,
+        {
+          thread_id: thread?.id,
+          assistant_id: assistantId,
+          name: currentAssistant?.name,
+          description: currentAssistant?.description,
+          menu: /* @__PURE__ */ jsx39(ChatSidebar, {})
+        }
+      )
+    }
+  ) : null;
+};
+
+// src/components/Chat/LatticeChatShell.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var LatticeChatShell = (props) => {
+  return /* @__PURE__ */ jsx40(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ jsx40(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx40(ConversationContextProvider, { children: /* @__PURE__ */ jsx40(LatticeChatView, {}) }) }) });
+};
 export {
+  AgentConversations,
   AgentThreadProvider,
+  AssistantContext,
+  AssistantContextProvider,
   AxiomLatticeProvider,
   ChatUIContext,
   ChatUIContextProvider,
   Chating,
   ColumnLayout,
+  ConversationContext,
+  ConversationContextProvider,
   FileExplorer,
   LatticeChat,
+  LatticeChatShell,
+  LatticeChatShellContext,
+  LatticeChatShellContextProvider,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
@@ -4452,9 +6762,11 @@ export {
   useAgentGraph,
   useAgentState,
   useAgentThreadContext,
+  useAssistantContext,
   useAxiomLattice,
   useChat,
   useChatUIContext,
-  useThread
+  useConversationContext,
+  useLatticeChatShellContext
 };
 //# sourceMappingURL=index.mjs.map