@axiom-lattice/react-sdk 2.1.11 → 2.1.12

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 } : {}
   });
@@ -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
       }));
     },
     []
@@ -480,8 +487,7 @@ function AgentThreadProvider({
       setState((prev) => ({
         ...prev,
         isLoading: true,
-        error: null,
-        streamingMessage: null
+        error: null
       }));
       const userMessage = {
         id: Date.now().toString(),
@@ -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",
@@ -1617,7 +1564,7 @@ var ConfirmFeedback = ({
 }) => {
   const { message: message4, 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 }),
     options ? /* @__PURE__ */ jsx7(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx7(
@@ -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 [expandedRowKeys, setExpandedRowKeys] = useState9([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
     ...item,
@@ -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,
@@ -2743,7 +2690,7 @@ var AttachmentsCard = ({
   showDownloadButton = false
 }) => {
   const { Text: Text11 } = Typography7;
-  const [showAll, setShowAll] = useState12(false);
+  const [showAll, setShowAll] = useState11(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
     switch (size) {
@@ -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,21 +3336,42 @@ 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();
-  const toolCallData = data;
-  const { openSideApp } = useChatUIContext();
+  `,
+  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) {
     return null;
   }
   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,11 +3500,11 @@ 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 = ({
@@ -3534,9 +3513,9 @@ var LazyBubble = ({
   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,7 +3535,7 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  useEffect10(() => {
+  useEffect9(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
@@ -3589,12 +3568,12 @@ 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 renderContent = useCallback7((message4) => {
     const { content } = message4;
     try {
       const json = JSON.parse(content);
@@ -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,1007 @@ 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";
+  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 { useState as useState18 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+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 { 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 createStyles10 } from "antd-style";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+var useStyles3 = createStyles10(({ token, css }) => ({
+  sidebar: css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: transparent;
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: hidden;
+  `,
+  content: css`
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: ${token.paddingMD}px ${token.paddingSM}px;
+    padding-bottom: ${token.paddingLG}px;
+
+    /* Custom scrollbar styling */
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 3px;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  section: css`
+    margin-bottom: ${token.marginLG}px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  `,
+  sectionTitle: css`
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 600;
+    color: ${token.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 0 ${token.paddingXS}px;
+    margin-bottom: ${token.marginSM}px;
+  `,
+  footer: css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: ${token.paddingSM}px;
+    background: transparent;
+    border-top: 1px solid ${token.colorBorderSecondary};
+    gap: ${token.marginXS}px;
+    flex-shrink: 0;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        ${token.colorBorder},
+        transparent
+      );
+    }
+  `,
+  actionButton: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: ${token.borderRadius}px;
+    border: none;
+    background: ${token.colorBgContainer};
+    color: ${token.colorTextSecondary};
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      background: ${token.colorPrimaryBg};
+      color: ${token.colorPrimary};
+      transform: translateY(-1px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &:active {
+      transform: translateY(0);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    }
+
+    .anticon {
+      font-size: 16px;
+    }
+  `,
+  divider: css`
+    margin: ${token.marginMD}px 0;
+    border-color: ${token.colorBorderSecondary};
+  `
+}));
+var ChatSidebar = ({
+  onSettingsClick,
+  defaultCollapsed = false
+}) => {
+  const { styles } = useStyles3();
+  const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const handleToggleCollapse = () => {
+    setMenuCollapsed(!menuCollapsed);
+  };
+  const handleSettingsClick = () => {
+    onSettingsClick?.();
+  };
+  return /* @__PURE__ */ jsxs19("div", { className: styles.sidebar, children: [
+    !menuCollapsed && /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Assistants" }),
+        /* @__PURE__ */ jsx37(AssistantList, {})
+      ] }),
+      /* @__PURE__ */ jsx37(Divider2, { className: styles.divider }),
+      /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Threads" }),
+        /* @__PURE__ */ jsx37(AgentConversations, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: styles.footer, children: [
+      /* @__PURE__ */ jsx37(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleToggleCollapse,
+          title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+          "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+          children: menuCollapsed ? /* @__PURE__ */ jsx37(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx37(MenuFoldOutlined, {})
+        }
+      ),
+      !menuCollapsed && /* @__PURE__ */ jsx37(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleSettingsClick,
+          title: "Settings",
+          "aria-label": "Settings",
+          children: /* @__PURE__ */ jsx37(SettingOutlined, {})
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Chat/LatticeChatView.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var LatticeChatView = (props) => {
+  const { assistantId, thread } = useConversationContext();
+  const { currentAssistant } = useAssistantContext();
+  const {
+    config: { baseURL }
+  } = useLatticeChatShellContext();
+  return assistantId && thread ? /* @__PURE__ */ jsx38(
+    AxiomLatticeProvider,
+    {
+      config: {
+        baseURL,
+        apiKey: "",
+        assistantId,
+        transport: "sse"
+      },
+      children: /* @__PURE__ */ jsx38(
+        LatticeChat,
+        {
+          thread_id: thread?.id,
+          assistant_id: assistantId,
+          name: currentAssistant?.name,
+          description: currentAssistant?.description,
+          menu: /* @__PURE__ */ jsx38(ChatSidebar, {})
+        }
+      )
+    }
+  ) : null;
+};
+
+// src/components/Chat/LatticeChatShell.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var LatticeChatShell = (props) => {
+  return /* @__PURE__ */ jsx39(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ jsx39(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx39(ConversationContextProvider, { children: /* @__PURE__ */ jsx39(LatticeChatView, {}) }) }) });
+};
 export {
+  AgentConversations,
   AgentThreadProvider,
+  AssistantContext,
+  AssistantContextProvider,
   AxiomLatticeProvider,
   ChatUIContext,
   ChatUIContextProvider,
   Chating,
   ColumnLayout,
+  ConversationContext,
+  ConversationContextProvider,
   FileExplorer,
   LatticeChat,
+  LatticeChatShell,
+  LatticeChatShellContext,
+  LatticeChatShellContextProvider,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
@@ -4452,9 +5413,11 @@ export {
   useAgentGraph,
   useAgentState,
   useAgentThreadContext,
+  useAssistantContext,
   useAxiomLattice,
   useChat,
   useChatUIContext,
-  useThread
+  useConversationContext,
+  useLatticeChatShellContext
 };
 //# sourceMappingURL=index.mjs.map