@axiom-lattice/react-sdk 2.1.5 → 2.1.7

package/dist/index.js

@@ -31,22 +31,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AgentThreadProvider: () => AgentThreadProvider,
   AxiomLatticeProvider: () => AxiomLatticeProvider,
+  ChatUIContext: () => ChatUIContext,
+  ChatUIContextProvider: () => ChatUIContextProvider,
   Chating: () => Chating,
   FileExplorer: () => FileExplorer,
+  LatticeChat: () => LatticeChat,
   MDMermaid: () => MDMermaid,
   MDResponse: () => MDResponse,
   MDViewFormItem: () => MDViewFormItem,
   SideAppViewBrowser: () => SideAppViewBrowser,
-  ThinkingChain: () => ThinkingChain,
-  ThinkingChainGroup: () => ThinkingChainGroup,
-  chatContext: () => chatContext,
   getElement: () => getElement,
   regsiterElement: () => regsiterElement,
+  useAgentChat: () => useAgentChat,
   useAgentGraph: () => useAgentGraph,
   useAgentState: () => useAgentState,
+  useAgentThreadContext: () => useAgentThreadContext,
   useAxiomLattice: () => useAxiomLattice,
   useChat: () => useChat,
+  useChatUIContext: () => useChatUIContext,
   useThread: () => useThread
 });
 module.exports = __toCommonJS(index_exports);
@@ -77,14 +81,25 @@ function AxiomLatticeProvider({
   const value = (0, import_react.useMemo)(() => ({ client }), [client]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AxiomLatticeContext.Provider, { value, children });
 }
-function useAxiomLattice() {
+function useAxiomLattice({
+  assistantId
+} = {}) {
   const context = (0, import_react.useContext)(AxiomLatticeContext);
-  if (!context.client) {
+  const [client, setClient] = (0, import_react.useState)(context.client);
+  (0, import_react.useEffect)(() => {
+    if (assistantId && context.client && context.client.assistantId !== assistantId) {
+      const newClient = context.client.clone({ assistantId });
+      setClient(newClient);
+    } else {
+      setClient(context.client);
+    }
+  }, [assistantId, context.client]);
+  if (!client) {
     throw new Error(
       "useAxiomLattice must be used within an AxiomLatticeProvider"
     );
   }
-  return context.client;
+  return client;
 }
 
 // src/hooks/useChat.ts
@@ -173,7 +188,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message3, files, ...rest } = input || {};
+      const { message: message4, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -182,7 +197,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message3 || command?.resume?.message || "",
+        content: message4 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -394,71 +409,177 @@ function useChat(threadId, options = {}) {
   };
 }
 
-// src/hooks/useThread.ts
+// src/context/AgentThreadContext.tsx
 var import_react3 = require("react");
-function useThread() {
-  const client = useAxiomLattice();
+var import_client_sdk3 = require("@axiom-lattice/client-sdk");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var AgentThreadContext = (0, import_react3.createContext)(
+  null
+);
+function AgentThreadProvider({
+  threadId,
+  assistantId,
+  options = {},
+  children
+}) {
+  const client = useAxiomLattice({ assistantId });
+  const { assistantId: clientAssistantId, tenantId } = client;
+  if (!threadId) {
+    return null;
+  }
   const [state, setState] = (0, import_react3.useState)({
-    threads: [],
-    currentThread: null,
+    assistantId: clientAssistantId,
+    tenantId,
+    threadId,
+    messages: options.initialMessages || [],
     isLoading: false,
-    error: null
+    error: null,
+    streamingMessage: null,
+    interrupts: void 0,
+    agentState: null
   });
-  const createThread = (0, import_react3.useCallback)(
-    async (options = {}) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+  const stopStreamingRef = (0, import_react3.useRef)(null);
+  const chunkMessageMerger = (0, import_react3.useRef)((0, import_client_sdk3.createSimpleMessageMerger)());
+  const fetchAndUpdateAgentState = (0, import_react3.useCallback)(
+    async (threadId2) => {
+      if (!options.enableReturnStateWhenStreamCompleted) return;
       try {
-        const threadId = await client.createThread(options);
-        const thread = await client.getThread(threadId);
+        const agentState = await client.getAgentState(threadId2);
         setState((prev) => ({
           ...prev,
-          threads: [...prev.threads, thread],
-          currentThread: thread,
-          isLoading: false
+          agentState,
+          interrupts: agentState?.tasks?.flatMap((task) => {
+            return task.interrupts.map((interrupt) => {
+              return {
+                id: interrupt.id,
+                value: interrupt.value,
+                role: "ai",
+                type: "interrupt"
+              };
+            });
+          })
         }));
-        return threadId;
       } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
+        console.warn("Failed to fetch agent state:", error);
       }
     },
-    [client]
+    [client, options.enableReturnStateWhenStreamCompleted]
   );
-  const getThread = (0, import_react3.useCallback)(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const thread = await client.getThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false
-        }));
-        return thread;
-      } catch (error) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: error instanceof Error ? error : new Error(String(error))
-        }));
-        throw error;
+  (0, import_react3.useEffect)(() => {
+    if (options.initialMessages && options.initialMessages.length > 0) {
+      chunkMessageMerger.current.initialMessages(options.initialMessages);
+    }
+  }, [options.initialMessages]);
+  const handleStreamEvent = (0, import_react3.useCallback)(
+    (chunk) => {
+      let interrupt;
+      if (chunk.type === "interrupt") {
+        interrupt = chunk;
+      } else {
+        chunkMessageMerger.current.push(chunk);
+      }
+      let todos;
+      if (chunk.type === "tool" && chunk.data && typeof chunk.data.content === "string" && chunk.data.content.startsWith("```todo_list")) {
+        try {
+          const content = chunk.data.content;
+          const match = content.match(/```todo_list\s*([\s\S]*?)\s*```/);
+          if (match && match[1]) {
+            todos = JSON.parse(match[1]);
+          }
+        } catch (e) {
+          console.error("Failed to parse todo list from chunk", e);
+        }
       }
+      const updatedMessages = chunkMessageMerger.current.getMessages();
+      setState((prev) => ({
+        ...prev,
+        todos: todos || prev.todos,
+        messages: updatedMessages,
+        isLoading: true,
+        streamingMessage: null
+      }));
     },
-    [client]
+    []
   );
-  const listThreads = (0, import_react3.useCallback)(
-    async (limit, offset) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+  const sendMessage = (0, import_react3.useCallback)(
+    async (data) => {
+      if (!threadId) {
+        throw new Error("Thread ID is required to send messages");
+      }
+      if (stopStreamingRef.current) {
+        stopStreamingRef.current();
+        stopStreamingRef.current = null;
+      }
+      const { input, command, streaming = true } = data;
+      const { message: message4, files, ...rest } = input || {};
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        error: null,
+        streamingMessage: null
+      }));
+      const userMessage = {
+        id: Date.now().toString(),
+        content: message4 || command?.resume?.message || "",
+        files,
+        role: "human"
+      };
+      chunkMessageMerger.current.push({
+        type: "human",
+        data: {
+          id: userMessage.id,
+          content: userMessage.content
+        }
+      });
+      setState((prev) => ({
+        ...prev,
+        messages: chunkMessageMerger.current.getMessages()
+      }));
       try {
-        const threads = await client.listThreads({ limit, offset });
-        setState((prev) => ({
-          ...prev,
-          threads,
-          isLoading: false
-        }));
+        if (options.streaming !== false && streaming !== false) {
+          const stopStreaming2 = client.chat.stream(
+            {
+              threadId,
+              messages: [userMessage],
+              command,
+              ...rest
+            },
+            (chunk) => handleStreamEvent(chunk),
+            async () => {
+              setState((prev) => ({
+                ...prev,
+                isLoading: false
+              }));
+              if (options.enableReturnStateWhenStreamCompleted) {
+                await fetchAndUpdateAgentState(threadId);
+              }
+              stopStreamingRef.current = null;
+            },
+            (error) => {
+              setState((prev) => ({
+                ...prev,
+                isLoading: false,
+                error,
+                streamingMessage: null
+              }));
+              stopStreamingRef.current = null;
+            }
+          );
+          stopStreamingRef.current = stopStreaming2;
+        } else {
+          const response = await client.chat.send({
+            threadId,
+            messages: [userMessage],
+            command,
+            ...rest
+          });
+          chunkMessageMerger.current.initialMessages(response.messages);
+          setState((prev) => ({
+            ...prev,
+            messages: chunkMessageMerger.current.getMessages(),
+            isLoading: false
+          }));
+        }
       } catch (error) {
         setState((prev) => ({
           ...prev,
@@ -467,33 +588,278 @@ function useThread() {
         }));
       }
     },
-    [client]
+    [
+      client,
+      threadId,
+      options.streaming,
+      options.enableReturnStateWhenStreamCompleted,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
   );
-  const deleteThread = (0, import_react3.useCallback)(
-    async (threadId) => {
+  const stopStreaming = (0, import_react3.useCallback)(() => {
+    if (stopStreamingRef.current) {
+      stopStreamingRef.current();
+      stopStreamingRef.current = null;
+      const currentMessages = chunkMessageMerger.current.getMessages().map((msg) => ({
+        id: msg.id,
+        role: msg.role === "ai" ? "assistant" : msg.role === "human" ? "user" : msg.role === "system" ? "system" : "tool",
+        content: typeof msg.content === "string" ? msg.content : JSON.stringify(msg.content || ""),
+        createdAt: (/* @__PURE__ */ new Date()).toISOString()
+      }));
+      setState((prev) => ({
+        ...prev,
+        messages: currentMessages,
+        isLoading: false,
+        streamingMessage: null
+      }));
+    }
+  }, []);
+  const loadMessages = (0, import_react3.useCallback)(
+    async (limit) => {
+      if (!threadId) {
+        return;
+      }
+      if (stopStreamingRef.current) {
+        stopStreamingRef.current();
+        stopStreamingRef.current = null;
+      }
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
-        await client.deleteThread(threadId);
+        const agentState = await client.getAgentState(threadId);
+        const interrupts = agentState?.tasks?.flatMap(
+          (task) => {
+            return task.interrupts.map((interrupt) => {
+              return {
+                id: interrupt.id,
+                value: interrupt.value,
+                role: "ai",
+                type: "interrupt"
+              };
+            });
+          }
+        );
+        const fetchedMessages = await client.getMessages({ threadId });
+        chunkMessageMerger.current.reset();
+        chunkMessageMerger.current.initialMessages(fetchedMessages);
         setState((prev) => ({
           ...prev,
-          threads: prev.threads.filter((t) => t.id !== threadId),
-          currentThread: prev.currentThread?.id === threadId ? null : prev.currentThread,
+          agentState,
+          interrupts,
+          todos: agentState?.values?.todos,
+          messages: chunkMessageMerger.current.getMessages(),
           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;
+        }
       } catch (error) {
         setState((prev) => ({
           ...prev,
           isLoading: false,
           error: error instanceof Error ? error : new Error(String(error))
         }));
-        throw error;
       }
     },
-    [client]
-  );
-  const selectThread = (0, import_react3.useCallback)(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    [
+      client,
+      threadId,
+      options.enableResumeStream,
+      options.resumeStreamPollInterval,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
+  );
+  const clearMessages = (0, import_react3.useCallback)(() => {
+    chunkMessageMerger.current.reset();
+    setState((prev) => ({
+      ...prev,
+      messages: [],
+      interrupts: void 0,
+      streamingMessage: null
+    }));
+  }, []);
+  const clearError = (0, import_react3.useCallback)(() => {
+    setState((prev) => ({
+      ...prev,
+      error: null
+    }));
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (threadId) {
+      loadMessages();
+    } else {
+      clearMessages();
+    }
+    return () => {
+      if (stopStreamingRef.current) {
+        stopStreamingRef.current();
+        stopStreamingRef.current = null;
+      }
+    };
+  }, [threadId, loadMessages, clearMessages]);
+  const value = {
+    state,
+    sendMessage,
+    stopStreaming,
+    loadMessages,
+    clearMessages,
+    clearError
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AgentThreadContext.Provider, { value, children });
+}
+function useAgentThreadContext() {
+  const context = (0, import_react3.useContext)(AgentThreadContext);
+  if (!context) {
+    throw new Error(
+      "useAgentThreadContext must be used within an AgentThreadProvider"
+    );
+  }
+  return context;
+}
+
+// src/hooks/useAgentChat.ts
+function useAgentChat(options) {
+  const context = useAgentThreadContext();
+  return {
+    ...context.state,
+    sendMessage: context.sendMessage,
+    stopStreaming: context.stopStreaming,
+    loadMessages: context.loadMessages,
+    clearMessages: context.clearMessages,
+    clearError: context.clearError
+  };
+}
+
+// src/hooks/useThread.ts
+var import_react4 = require("react");
+function useThread() {
+  const client = useAxiomLattice();
+  const [state, setState] = (0, import_react4.useState)({
+    threads: [],
+    currentThread: null,
+    isLoading: false,
+    error: null
+  });
+  const createThread = (0, import_react4.useCallback)(
+    async (options = {}) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const threadId = await client.createThread(options);
+        const thread = await client.getThread(threadId);
+        setState((prev) => ({
+          ...prev,
+          threads: [...prev.threads, thread],
+          currentThread: thread,
+          isLoading: false
+        }));
+        return threadId;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const getThread = (0, import_react4.useCallback)(
+    async (threadId) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const thread = await client.getThread(threadId);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false
+        }));
+        return thread;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const listThreads = (0, import_react4.useCallback)(
+    async (limit, offset) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const threads = await client.listThreads({ limit, offset });
+        setState((prev) => ({
+          ...prev,
+          threads,
+          isLoading: false
+        }));
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+      }
+    },
+    [client]
+  );
+  const deleteThread = (0, import_react4.useCallback)(
+    async (threadId) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        await client.deleteThread(threadId);
+        setState((prev) => ({
+          ...prev,
+          threads: prev.threads.filter((t) => t.id !== threadId),
+          currentThread: prev.currentThread?.id === threadId ? null : prev.currentThread,
+          isLoading: false
+        }));
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const selectThread = (0, import_react4.useCallback)(
+    async (threadId) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         const thread = await client.getThread(threadId);
         setState((prev) => ({
@@ -523,20 +889,20 @@ function useThread() {
 }
 
 // src/hooks/useAgentState.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useAgentState(threadId, options = {}) {
   const client = useAxiomLattice();
-  const [agentState, setAgentState] = (0, import_react4.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const pollingIntervalRef = (0, import_react4.useRef)(null);
-  const pollingTimeoutRef = (0, import_react4.useRef)(null);
+  const [agentState, setAgentState] = (0, import_react5.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const pollingIntervalRef = (0, import_react5.useRef)(null);
+  const pollingTimeoutRef = (0, import_react5.useRef)(null);
   const {
     pollingInterval = 2e3,
     // 2 seconds by default
     autoStart = true
   } = options;
-  const fetchAgentState = (0, import_react4.useCallback)(async () => {
+  const fetchAgentState = (0, import_react5.useCallback)(async () => {
     if (!threadId) {
       return;
     }
@@ -551,7 +917,7 @@ function useAgentState(threadId, options = {}) {
       setIsLoading(false);
     }
   }, [client, threadId]);
-  const startPolling = (0, import_react4.useCallback)(() => {
+  const startPolling = (0, import_react5.useCallback)(() => {
     if (!threadId) {
       return;
     }
@@ -572,17 +938,17 @@ function useAgentState(threadId, options = {}) {
     };
     poll();
   }, [threadId, pollingInterval, fetchAgentState]);
-  const stopPolling = (0, import_react4.useCallback)(() => {
+  const stopPolling = (0, import_react5.useCallback)(() => {
     pollingIntervalRef.current = null;
     if (pollingTimeoutRef.current) {
       clearTimeout(pollingTimeoutRef.current);
       pollingTimeoutRef.current = null;
     }
   }, []);
-  const refresh = (0, import_react4.useCallback)(async () => {
+  const refresh = (0, import_react5.useCallback)(async () => {
     await fetchAgentState();
   }, [fetchAgentState]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (threadId && autoStart) {
       startPolling();
     } else {
@@ -603,13 +969,13 @@ function useAgentState(threadId, options = {}) {
 }
 
 // src/hooks/useAgentGraph.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useAgentGraph() {
   const client = useAxiomLattice();
-  const [graphImage, setGraphImage] = (0, import_react5.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const fetchGraph = (0, import_react5.useCallback)(async () => {
+  const [graphImage, setGraphImage] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const fetchGraph = (0, import_react6.useCallback)(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -632,138 +998,732 @@ function useAgentGraph() {
 // src/index.ts
 __reExport(index_exports, require("@axiom-lattice/protocols"), module.exports);
 
-// src/components/GenUI/MDResponse.tsx
-var import_react_markdown = __toESM(require("react-markdown"));
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
-var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
-var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_react13 = require("react");
-var import_antd_style6 = require("antd-style");
-var import_rehype_raw = __toESM(require("rehype-raw"));
-
-// src/components/GenUI/elements/confirm_feedback.tsx
-var import_antd = require("antd");
-var import_react6 = require("react");
-var import_antd_style = require("antd-style");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var { Text } = import_antd.Typography;
-var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => ({
-  card: css`
-    max-width: 1200px;
-    background: linear-gradient(
-      919deg,
-      rgb(232 67 157 / 8%),
-      rgb(250 235 206 / 28%) 43%
-    );
-  `
-}));
-var ConfirmFeedback = ({
-  data,
-  eventHandler,
-  interactive = true
+// src/components/Chat/ChatUIContext.tsx
+var import_react7 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ChatUIContext = (0, import_react7.createContext)({
+  sideAppVisible: false,
+  setSideAppVisible: () => {
+  },
+  sideAppSize: "large",
+  setSideAppSize: () => {
+  },
+  sideAppSelectedCard: null,
+  setSideAppSelectedCard: () => {
+  },
+  openSideApp: () => {
+  },
+  closeSideApp: () => {
+  }
+});
+var ChatUIContextProvider = ({
+  children
 }) => {
-  const { message: message3, type, config, feedback, options } = data ?? {};
-  const [clicked, setClicked] = (0, import_react6.useState)(false);
-  const { styles } = useStyle();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_antd.Tag,
-      {
-        bordered: false,
-        color: "orange",
-        style: {
-          fontSize: 14,
-          fontWeight: "bold",
-          background: "#ffffff8f",
-          padding: 4,
-          borderRadius: 8
-        },
-        children: "\u8BF7\u6C42\u786E\u8BA4"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MDResponse, { content: message3 }),
-    options ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_antd.Button,
-      {
-        title: option.description,
-        disabled: !interactive || clicked || feedback,
-        style: {
-          border: feedback?.data?.action === option.value ? "2px dashed rgb(74 73 77)" : "none"
-        },
-        onClick: () => {
-          setClicked(true);
-          eventHandler(
-            "confirm_feedback",
-            { action: option.value, config },
-            option.label
-          );
-        },
-        children: option.label
+  const [sideAppVisible, setSideAppVisible] = (0, import_react7.useState)(false);
+  const [sideAppSize, setSideAppSize] = (0, import_react7.useState)("large");
+  const [sideAppSelectedCard, setSideAppSelectedCard] = (0, import_react7.useState)(null);
+  const openSideApp = (0, import_react7.useCallback)(
+    (card) => {
+      setSideAppSelectedCard(card);
+      setSideAppVisible(true);
+    },
+    [setSideAppSelectedCard, setSideAppVisible]
+  );
+  const closeSideApp = (0, import_react7.useCallback)(() => {
+    setSideAppSelectedCard(null);
+    setSideAppVisible(false);
+  }, [setSideAppSelectedCard, setSideAppVisible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ChatUIContext.Provider,
+    {
+      value: {
+        sideAppVisible,
+        setSideAppVisible,
+        sideAppSize,
+        setSideAppSize,
+        sideAppSelectedCard,
+        setSideAppSelectedCard,
+        openSideApp,
+        closeSideApp
       },
-      option.value
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_antd.Button,
-        {
-          disabled: !interactive || clicked || feedback,
-          style: {
-            border: feedback?.data?.action === "yes" ? "2px dashed rgb(74 73 77)" : "none"
-          },
-          type: "primary",
-          onClick: () => {
-            setClicked(true);
-            eventHandler(
-              "confirm_feedback",
-              {
-                action: "yes",
-                config
-              },
-              "\u786E\u8BA4"
-            );
-          },
-          children: "\u786E\u8BA4"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_antd.Button,
-        {
-          disabled: !interactive || clicked || feedback,
-          type: "default",
-          style: {
-            border: feedback?.data?.action === "no" ? "2px dashed rgb(74 73 77)" : "none"
-          },
-          onClick: () => {
-            setClicked(true);
-            eventHandler(
-              "confirm_feedback",
-              {
-                action: "no",
-                config
-              },
-              "\u62D2\u7EDD"
-            );
-          },
-          children: "\u62D2\u7EDD"
-        }
-      )
-    ] })
-  ] }) });
+      children
+    }
+  );
+};
+var useChatUIContext = () => {
+  return (0, import_react7.useContext)(ChatUIContext);
 };
 
-// src/components/GenUI/elements/generic_data_table.tsx
-var import_antd2 = require("antd");
-var import_react7 = require("react");
-var import_icons = require("@ant-design/icons");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var { Text: Text2 } = import_antd2.Typography;
-var GenericDataTable = ({
-  data,
-  eventHandler,
-  interactive = true,
-  default_open_in_side_app = true
+// src/components/Chat/useStyle.tsx
+var import_antd_style = require("antd-style");
+var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
+  return {
+    layout: css`
+      width: 100%;
+      /* min-width: 1000px; */
+      height: 100%;
+      border-radius: ${token.borderRadius}px;
+      display: flex;
+      background: ${token.colorBgLayout}95;
+      font-family: ${token.fontFamily}, sans-serif;
+      position: relative;
+      overflow: hidden;
+      padding: 16px;
+      padding-top: 2px;
+      gap: 16px;
+
+      .ant-prompts {
+        color: ${token.colorText};
+      }
+    `,
+    menu: css`
+      background: ${token.colorBgContainer}90;
+      width: 280px;
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      transition: all 0.3s ease;
+      overflow: hidden;
+      position: relative;
+      border-radius: ${token.borderRadiusLG}px;
+      box-shadow: ${token.boxShadow};
+
+      &.open {
+        background: transparent;
+        box-shadow: none;
+        margin-left: -16px;
+        height: 100%;
+      }
+
+      &.collapsed {
+        width: 64px;
+        height: fit-content;
+        border-radius: 32px;
+        .ant-conversations {
+          width: 64px;
+        }
+
+        .ant-conversations-list {
+          display: none !important;
+        }
+
+        .btn-text {
+          display: none !important;
+        }
+      }
+    `,
+    menuToggle: css`
+      position: relative;
+      bottom: 20px;
+      left: 24px;
+      z-index: 1;
+
+      &.collapsed {
+        left: 16px;
+      }
+    `,
+    logoutBtn: css`
+      position: absolute;
+      bottom: 32px;
+      left: 24px;
+      z-index: 1;
+      color: ${token.colorTextSecondary};
+
+      &:hover {
+        color: ${token.colorError};
+      }
+
+      &.collapsed {
+        left: 16px;
+      }
+
+      .btn-text {
+        margin-left: 8px;
+        transition: opacity 0.3s ease, width 0.3s ease;
+      }
+
+      &.collapsed .btn-text {
+        display: none;
+      }
+    `,
+    conversations: css`
+      padding: 0 12px;
+      flex: 1;
+      overflow-y: auto;
+      transition: padding 0.3s ease;
+
+      .collapsed & {
+        padding: 0 4px;
+      }
+    `,
+    mainContent: css`
+      min-width: 320px;
+      flex: 1;
+      display: flex;
+      position: relative;
+      overflow: hidden;
+      gap: 16px;
+      justify-content: center;
+      &.open {
+        box-shadow: ${token.boxShadow};
+        background: ${token.colorBgContainer}90;
+        margin-left: 0px;
+      }
+      border-radius: ${token.borderRadiusLG}px;
+      .ant-bubble-content {
+        .ant-card {
+          background: #ffffff4f;
+        }
+      }
+
+      pre {
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    `,
+    chat: css`
+      width: 100%;
+      max-width: 1000px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: ${token.paddingXS}px;
+      gap: 0px;
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+
+      &.drawer-open {
+        min-width: 200px;
+        max-width: 466px;
+      }
+    `,
+    detailPanel: css`
+      display: flex;
+      flex-direction: column;
+      width: 0;
+      background: ${token.colorBgContainer}90;
+
+      transition: all 0.3s ease;
+      overflow: hidden;
+      flex-shrink: 0;
+      border-radius: ${token.borderRadiusLG}px;
+
+      &.open {
+        width: 66%;
+        box-shadow: ${token.boxShadow};
+      }
+
+      &.small {
+        width: 22%;
+      }
+
+      &.middle {
+        width: 44%;
+      }
+
+      &.large {
+        width: 66%;
+      }
+      &.full {
+        width: 98%;
+        position: absolute;
+        background-color: rgba(255, 255, 255, 0.7);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        //border: 1px solid rgba(255, 255, 255, 0.2);
+        z-index: 10;
+        bottom: 16px;
+        top: 2px;
+      }
+    `,
+    detailContent: css`
+      padding: 8px 8px;
+      height: 100%;
+      flex: 1;
+      overflow: hidden;
+      pre {
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    `,
+    detailHeader: css`
+      padding: 16px 24px;
+      border-bottom: 1px solid ${token.colorBorder};
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      h3 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 500;
+      }
+    `,
+    messages: css`
+      padding: 0 20px;
+      flex: 1;
+      overflow: hidden;
+    `,
+    placeholder: css`
+      padding-top: 32px;
+    `,
+    sender: css`
+      box-shadow: ${token.boxShadow};
+    `,
+    logo: css`
+      display: flex;
+      height: 72px;
+      align-items: center;
+      justify-content: start;
+      padding: 0 24px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      overflow: hidden;
+      transition: padding 0.3s ease;
+
+      img {
+        width: 24px;
+        height: 24px;
+        display: inline-block;
+      }
+
+      span {
+        display: inline-block;
+        margin: 0 8px;
+        font-weight: bold;
+        color: ${token.colorText};
+        font-size: 16px;
+        opacity: 1;
+        transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
+      }
+
+      &.collapsed {
+        padding: 0 20px;
+        justify-content: center;
+
+        span {
+          opacity: 0;
+          width: 0;
+          margin: 0;
+        }
+      }
+    `,
+    addBtn: css`
+      background: #1677ff0f;
+      border: 1px solid #1677ff34;
+      width: calc(100% - 24px);
+      margin: 0 12px 24px 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      transition: all 0.3s ease;
+
+      &.collapsed {
+        width: 48px;
+        min-width: 48px;
+        margin: 0 auto 24px auto;
+        justify-content: center;
+        padding: 0;
+      }
+    `
+  };
+});
+
+// src/components/Chat/ColumnLayout.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ColumnLayout = ({ left, right }) => {
+  const { styles } = useStyle();
+  const { sideAppVisible, sideAppSize, sideAppSelectedCard } = useChatUIContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `fina_chat ${styles.layout}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${styles.mainContent} ${sideAppVisible ? "open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `${styles.chat}`, children: left }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: `${styles.detailPanel} ${sideAppVisible ? `open ${sideAppSize || "large"}` : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {}),
+          sideAppSelectedCard && sideAppVisible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.detailContent, children: right }) })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/SideAppViewBrowser.tsx
+var import_icons12 = require("@ant-design/icons");
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+var import_antd = require("antd");
+var import_react10 = require("react");
+
+// src/components/GenUI/MDResponse.tsx
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
+var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_react9 = require("react");
+var import_antd_style2 = require("antd-style");
+var import_rehype_raw = __toESM(require("rehype-raw"));
+
+// src/components/GenUI/MDMermaid.tsx
+var import_mermaid = __toESM(require("mermaid"));
+var import_react8 = require("react");
+var import_uuid = require("uuid");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MDMermaid = ({ children = [] }) => {
+  const domId = (0, import_react8.useRef)(`dom${(0, import_uuid.v4)()}`);
+  const code = String(children);
+  const target = (0, import_react8.useRef)(null);
+  const targetInternal = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (target.current && code) {
+      import_mermaid.default.initialize({
+        startOnLoad: true,
+        theme: "default",
+        securityLevel: "loose",
+        themeCSS: `
+          g.classGroup rect {
+            fill: #282a36;
+            stroke: #6272a4;
+          } 
+          g.classGroup text {
+            fill: #f8f8f2;
+          }
+          g.classGroup line {
+            stroke: #f8f8f2;
+            stroke-width: 0.5;
+          }
+          .classLabel .box {
+            stroke: #21222c;
+            stroke-width: 3;
+            fill: #21222c;
+            opacity: 1;
+          }
+          .classLabel .label {
+            fill: #f1fa8c;
+          }
+          .relation {
+            stroke: #ff79c6;
+            stroke-width: 1;
+          }
+          #compositionStart, #compositionEnd {
+            fill: #bd93f9;
+            stroke: #bd93f9;
+            stroke-width: 1;
+          }
+          #aggregationEnd, #aggregationStart {
+            fill: #21222c;
+            stroke: #50fa7b;
+            stroke-width: 1;
+          }
+          #dependencyStart, #dependencyEnd {
+            fill: #00bcd4;
+            stroke: #00bcd4;
+            stroke-width: 1;
+          } 
+          #extensionStart, #extensionEnd {
+            fill: #f8f8f2;
+            stroke: #f8f8f2;
+            stroke-width: 1;
+          }
+          `,
+        fontFamily: "Fira Code",
+        sequence: { showSequenceNumbers: true }
+      });
+      import_mermaid.default.render(domId.current, code, target.current).then((result) => {
+        target.current.innerHTML = result.svg;
+      }).catch((error) => {
+        console.log(error);
+      });
+    }
+  }, [code]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { id: domId.current, style: { display: "none" } }) });
+};
+
+// src/components/GenUI/MDResponse.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SyntaxHighlighter = import_react_syntax_highlighter.Prism;
+var useStyles = (0, import_antd_style2.createStyles)(({ token, css }) => ({
+  markdownTableContainer: css`
+    overflow-x: auto;
+    width: 100%;
+  `,
+  markdownTable: css`
+    width: 100%;
+    border-collapse: collapse;
+    margin: 16px 0;
+    border-radius: ${token.borderRadius}px;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+  `,
+  markdownTh: css`
+    background: ${token.colorFillAlter};
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 1px solid ${token.colorBorder};
+    color: ${token.colorTextHeading};
+    font-size: ${token.fontSize}px;
+  `,
+  markdownTd: css`
+    padding: 12px 16px;
+    border-bottom: 1px solid ${token.colorBorder};
+    color: ${token.colorText};
+    font-size: ${token.fontSize}px;
+
+    &:last-child {
+      border-right: none;
+    }
+  `,
+  markdownTr: css`
+    &:hover {
+      background: ${token.colorFillTertiary};
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+  `,
+  markdownContainer: css`
+    white-space: normal;
+
+    /* 为整个markdown内容添加基础样式 */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: ${token.colorTextHeading};
+      margin-top: 24px;
+      margin-bottom: 16px;
+    }
+
+    p {
+      color: ${token.colorText};
+      line-height: 1.6;
+      margin-bottom: 16px;
+    }
+
+    blockquote {
+      border-left: 4px solid ${token.colorPrimary};
+      background: ${token.colorFillAlter};
+      padding: 16px;
+      margin: 16px 0;
+      border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0;
+    }
+
+    code:not(pre code) {
+      background: ${token.colorFillAlter};
+      padding: 2px 6px;
+      border-radius: ${token.borderRadius}px;
+      font-family: ${token.fontFamilyCode};
+      color: ${token.colorError};
+    }
+  `
+}));
+var MDResponse = ({
+  content = "",
+  context,
+  embeddedLink,
+  interactive,
+  userData,
+  noGenUI
+}) => {
+  const { styles } = useStyles();
+  const config = (0, import_react9.useMemo)(
+    () => ({
+      components: {
+        a({ node, ...props }) {
+          if (embeddedLink) {
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { ...props });
+        },
+        table({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("table", { className: styles.markdownTable, ...props }) });
+        },
+        th({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { className: styles.markdownTh, ...props });
+        },
+        td({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: styles.markdownTd, ...props });
+        },
+        tr({ node, ...props }) {
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { className: styles.markdownTr, ...props });
+        },
+        code({ children, className, node, ...rest }) {
+          const match = /language-(\w+)/.exec(className || "");
+          const language = match?.[1];
+          if (language) {
+            const Element = getElement(language)?.card_view;
+            if (Element) {
+              let childrenData;
+              try {
+                childrenData = JSON.parse(children);
+              } catch (error) {
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                Element,
+                {
+                  context,
+                  interactive,
+                  component_key: language,
+                  data: childrenData
+                }
+              );
+            }
+            switch (language) {
+              case "mermaid":
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MDMermaid, { children });
+              default:
+                return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  SyntaxHighlighter,
+                  {
+                    ...rest,
+                    PreTag: "div",
+                    language,
+                    style: import_prism.dark,
+                    children: String(children).replace(/\n$/, "")
+                  }
+                );
+            }
+          } else {
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("code", { ...rest, className, children });
+          }
+        }
+      },
+      remarkPlugins: [import_remark_gfm.default],
+      rehypePlugins: [import_rehype_raw.default]
+    }),
+    [userData, interactive, embeddedLink, styles]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_markdown.default, { ...config, children: content }) });
+};
+var MDViewFormItem = ({ value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MDResponse, { content: value || "" });
+};
+var IFrameCard = ({ src }) => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const [width, setWidth] = (0, import_react9.useState)("640px");
+  const [height, setHeight] = (0, import_react9.useState)("320px");
+  const valid_images = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "bmp",
+    "svg",
+    "tif",
+    "tiff",
+    "webp"
+  ];
+  if (!src) {
+    return null;
+  }
+  const spitedSrc = src.split(".");
+  if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("img", { src, style: { width: "100%" } }) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { href: src, target: "_black", children: src }) });
+  }
+};
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var { Text } = import_antd.Typography;
+var ConfirmFeedback = ({
+  data,
+  interactive = true
 }) => {
-  const { dataSource, message: message3 } = data ?? {};
-  const [expandedRowKeys, setExpandedRowKeys] = (0, import_react7.useState)([]);
+  const { message: message4, type, config, feedback, options } = data ?? {};
+  const { sendMessage } = useAgentChat();
+  const [clicked, setClicked] = (0, import_react10.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MDResponse, { content: message4 }),
+    options ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_antd.Button,
+      {
+        title: option.description,
+        disabled: !interactive || clicked || feedback,
+        style: {
+          border: feedback?.data?.action === option.value ? "2px dashed rgb(74 73 77)" : "none"
+        },
+        onClick: () => {
+          setClicked(true);
+          sendMessage({
+            command: {
+              resume: {
+                action: option.value,
+                data: config,
+                message: option.label
+              }
+            }
+          });
+        },
+        children: option.label
+      },
+      option.value
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_antd.Button,
+        {
+          disabled: !interactive || clicked || feedback,
+          style: {
+            border: feedback?.data?.action === "yes" ? "2px dashed rgb(74 73 77)" : "none"
+          },
+          type: "primary",
+          onClick: () => {
+            setClicked(true);
+            sendMessage({
+              command: {
+                resume: {
+                  action: "yes",
+                  data: config,
+                  message: "\u786E\u8BA4"
+                }
+              }
+            });
+          },
+          children: "\u786E\u8BA4"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_antd.Button,
+        {
+          disabled: !interactive || clicked || feedback,
+          type: "default",
+          style: {
+            border: feedback?.data?.action === "no" ? "2px dashed rgb(74 73 77)" : "none"
+          },
+          onClick: () => {
+            setClicked(true);
+            sendMessage({
+              command: {
+                resume: {
+                  action: "no",
+                  data: config,
+                  message: "\u62D2\u7EDD"
+                }
+              }
+            });
+          },
+          children: "\u62D2\u7EDD"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/GenUI/elements/generic_data_table.tsx
+var import_antd2 = require("antd");
+var import_react11 = require("react");
+var import_icons = require("@ant-design/icons");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var { Text: Text2 } = import_antd2.Typography;
+var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
+  const { dataSource, message: message4 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = (0, import_react11.useState)([]);
+  const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
     ...item,
     key: `${index}_${JSON.stringify(item).slice(0, 20)}`
@@ -812,14 +1772,14 @@ var GenericDataTable = ({
     if (!expandItem) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "16px" }, children: [
-      expandItem.content && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MDResponse, { content: expandItem.content })
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { padding: "16px" }, children: [
+      expandItem.content && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MDResponse, { content: expandItem.content })
       ] }),
-      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           GenericDataTable,
           {
             component_key: `nested_${record.key}`,
@@ -827,7 +1787,6 @@ var GenericDataTable = ({
               dataSource: expandItem.dataSource,
               message: void 0
             },
-            eventHandler,
             interactive
           }
         )
@@ -836,46 +1795,43 @@ var GenericDataTable = ({
   };
   const exportToExcel = () => {
     if (!processedData || processedData.length === 0) return;
-    console.warn("Export to Excel not implemented in SDK yet (requires xlsx dependency)");
+    console.warn(
+      "Export to Excel not implemented in SDK yet (requires xlsx dependency)"
+    );
   };
   const hasExpandableRows = processedData.some((item) => item.expandItem);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_antd2.Table,
     {
       size: "small",
-      title: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message3 || "" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Space, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      title: () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Space, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_antd2.Button,
             {
               type: "text",
               size: "small",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.DownloadOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.DownloadOutlined, {}),
               onClick: exportToExcel,
               disabled: !processedData || processedData.length === 0,
               children: "\u5BFC\u51FAExcel"
             }
           ),
-          eventHandler && default_open_in_side_app && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          default_open_in_side_app && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             import_antd2.Button,
             {
               type: "link",
               size: "small",
               onClick: () => {
-                eventHandler(
-                  "__open_side_app",
-                  {
-                    component_key: "generic_data_table",
-                    message: message3 || "",
-                    data: { dataSource, message: message3 },
-                    size: "large"
-                  },
-                  ""
-                );
+                openSideApp({
+                  component_key: "generic_data_table",
+                  message: message4 || "",
+                  data: { dataSource, message: message4 }
+                });
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ExpandAltOutlined, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ExpandAltOutlined, {}),
                 "\u5C55\u5F00"
               ]
             }
@@ -904,9 +1860,9 @@ var GenericDataTable = ({
 };
 
 // src/components/GenUI/elements/generic_data_table_side_app.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var GenericDataTableSideApp = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GenericDataTable, { ...props, default_open_in_side_app: false });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GenericDataTable, { ...props, default_open_in_side_app: false });
 };
 
 // src/components/GenUI/elements/ToolCall.tsx
@@ -916,11 +1872,11 @@ var import_icons3 = require("@ant-design/icons");
 
 // src/components/GenUI/elements/ToolCard.tsx
 var import_antd3 = require("antd");
-var import_antd_style2 = require("antd-style");
+var import_antd_style3 = require("antd-style");
 var import_icons2 = require("@ant-design/icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var { Text: Text3, Title } = import_antd3.Typography;
-var useStyle2 = (0, import_antd_style2.createStyles)(({ token, css }) => ({
+var useStyle2 = (0, import_antd_style3.createStyles)(({ token, css }) => ({
   card: css`
     max-width: 500px;
     background: linear-gradient(
@@ -984,12 +1940,11 @@ var useStyle2 = (0, import_antd_style2.createStyles)(({ token, css }) => ({
 var ToolCard = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
   const { styles } = useStyle2();
   if (!data || !data.name) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd3.Card, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text3, { type: "secondary", children: "Invalid tool data" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd3.Card, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text3, { type: "secondary", children: "Invalid tool data" }) });
   }
   const formatToolName = (name) => {
     return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
@@ -1032,7 +1987,7 @@ var ToolCard = ({
     return typeof value;
   };
   const hasParameters = data.parameters && Object.keys(data.parameters).length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_antd3.Card,
     {
       size: "small",
@@ -1040,13 +1995,13 @@ var ToolCard = ({
       bordered: false,
       bodyStyle: { padding: "16px" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.header, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
-            data.type && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_antd3.Tag, { color: "blue", className: styles.typeTag, children: data.type })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd3.Space, { align: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
+            data.type && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd3.Tag, { color: "blue", className: styles.typeTag, children: data.type })
           ] }),
-          data.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             Text3,
             {
               type: "secondary",
@@ -1055,19 +2010,19 @@ var ToolCard = ({
             }
           )
         ] }),
-        hasParameters ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", style: { marginBottom: "12px" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Text3, { strong: true, style: { fontSize: "14px" }, children: [
+        hasParameters ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd3.Space, { align: "center", style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text3, { strong: true, style: { fontSize: "14px" }, children: [
               "Parameters (",
               Object.keys(data.parameters).length,
               ")"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: styles.parameterItem, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterName, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: key }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.parameterItem, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.parameterName, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd3.Space, { align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 import_antd3.Tag,
                 {
                   color: getTypeColor(value),
@@ -1076,11 +2031,11 @@ var ToolCard = ({
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles.parameterValue, children: formatParameterValue(value) })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.parameterValue, children: formatParameterValue(value) })
           ] }, index)) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Space, { align: "center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd3.Space, { align: "center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons2.CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
         ] })
       ]
     }
@@ -1088,18 +2043,18 @@ var ToolCard = ({
 };
 
 // src/components/GenUI/elements/ToolCall.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function getStatusIcon(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.CheckCircleOutlined, { style: { color: "#52c41a" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.CheckCircleOutlined, { style: { color: "#52c41a" } });
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.InfoCircleOutlined, { style: { color: "#ff4d4f" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.InfoCircleOutlined, { style: { color: "#ff4d4f" } });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.LoadingOutlined, { style: { color: "#1890ff" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons3.LoadingOutlined, { style: { color: "#1890ff" } });
   }
 }
-var ToolCall = ({ data, eventHandler }) => {
+var ToolCall = ({ data }) => {
   const toolCallData = data;
   const formatToolName = (name) => {
     if (!name) {
@@ -1119,9 +2074,9 @@ var ToolCall = ({ data, eventHandler }) => {
       return "Error parsing args";
     }
   };
-  const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_antd4.Flex, { align: "center", wrap: "wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_antd4.Typography.Text, { strong: true, children: formatToolName(toolCallData.name) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd4.Flex, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd4.Typography.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_antd4.Typography.Text,
       {
         type: "secondary",
@@ -1135,19 +2090,17 @@ var ToolCall = ({ data, eventHandler }) => {
     parameters: toolCallData.args,
     type: "tool_call"
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: "8px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { marginTop: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ToolCard,
       {
         data: toolCardData,
         component_key: `${toolCallData.id}-params`,
-        eventHandler: () => {
-        },
         interactive: false
       }
     ),
-    toolCallData.response && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { marginTop: "12px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    toolCallData.response && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { marginTop: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_antd4.Typography.Text,
         {
           strong: true,
@@ -1155,7 +2108,7 @@ var ToolCall = ({ data, eventHandler }) => {
           children: "Response:"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MDResponse, { content: toolCallData.response })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: toolCallData.response })
     ] })
   ] });
   const expandIcon = ({ isActive }) => {
@@ -1165,18 +2118,17 @@ var ToolCall = ({ data, eventHandler }) => {
   if (toolCallElement) {
     return toolCallElement.card_view({
       data: toolCallData,
-      component_key: toolCallData.id,
-      eventHandler
+      component_key: toolCallData.id
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_antd4.Collapse,
     {
       size: "small",
       bordered: false,
       defaultActiveKey: [],
       expandIcon,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_CollapsePanel.default,
         {
           header,
@@ -1191,11 +2143,11 @@ var ToolCall = ({ data, eventHandler }) => {
 
 // src/components/GenUI/elements/Todo.tsx
 var import_antd5 = require("antd");
-var import_antd_style3 = require("antd-style");
+var import_antd_style4 = require("antd-style");
 var import_icons4 = require("@ant-design/icons");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var { Text: Text4 } = import_antd5.Typography;
-var useStyle3 = (0, import_antd_style3.createStyles)(({ token, css }) => ({
+var useStyle3 = (0, import_antd_style4.createStyles)(({ token, css }) => ({
   card: css`
     max-width: 1200px;
     background: linear-gradient(
@@ -1224,18 +2176,17 @@ var useStyle3 = (0, import_antd_style3.createStyles)(({ token, css }) => ({
 var Todo = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
   const { styles } = useStyle3();
-  const getStatusIcon3 = (status) => {
+  const getStatusIcon2 = (status) => {
     switch (status) {
       case "completed":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.CheckCircleOutlined, { style: { color: "#52c41a" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons4.CheckCircleOutlined, { style: { color: "#52c41a" } });
       case "in_progress":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.ArrowRightOutlined, { style: { fontWeight: "500" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons4.ArrowRightOutlined, { style: { fontWeight: "500" } });
       case "pending":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons4.ClockCircleOutlined, { style: { color: "gray" } });
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons4.ClockCircleOutlined, { style: { color: "gray" } });
       default:
         return null;
     }
@@ -1277,35 +2228,35 @@ var Todo = ({
     }
   };
   if (!data || !Array.isArray(data)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_antd5.Card,
       {
         size: "small",
         className: `shadow-sm ${styles.card}`,
         bordered: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text4, { type: "secondary", children: "No todo items available" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text4, { type: "secondary", children: "No todo items available" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd5.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd5.Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd5.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_antd5.Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_antd5.List,
       {
         size: "small",
         dataSource: data,
-        renderItem: (item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        renderItem: (item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           import_antd5.List.Item,
           {
             className: `${styles.todoItem} ${getItemClassName(item.status)}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd5.Space, { align: "center", style: { width: "100%" }, children: [
-              getStatusIcon3(item.status),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text4, { style: { flex: 1 }, children: item.content })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_antd5.Space, { align: "center", style: { width: "100%" }, children: [
+              getStatusIcon2(item.status),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text4, { style: { flex: 1 }, children: item.content })
             ] })
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Text4, { type: "secondary", style: { fontSize: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text4, { type: "secondary", style: { fontSize: 12 }, children: [
       "Total items: ",
       data.length,
       " | Completed:",
@@ -1324,12 +2275,11 @@ var Todo = ({
 var import_antd6 = require("antd");
 var import_icons5 = require("@ant-design/icons");
 var import_CollapsePanel2 = __toESM(require("antd/es/collapse/CollapsePanel"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var { Text: Text5 } = import_antd6.Typography;
 var WriteTodos = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
   const toolCallData = data;
@@ -1339,11 +2289,11 @@ var WriteTodos = ({
     (item) => item.status === "completed"
   ).length;
   const expandIcon = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons5.UnorderedListOutlined, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons5.UnorderedListOutlined, {});
   };
-  const header = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd6.Space, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text5, { strong: true, children: "Todos" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
+  const header = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_antd6.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text5, { strong: true, children: "Todos" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
       completedCount,
       "/",
       totalCount,
@@ -1353,24 +2303,23 @@ var WriteTodos = ({
   if (!toolCallData) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_antd6.Collapse,
     {
       size: "small",
       bordered: false,
       defaultActiveKey: [toolCallData.id],
       expandIcon,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_CollapsePanel2.default,
         {
           header,
           style: { minWidth: 400 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             Todo,
             {
               data: data.args.todos,
               component_key,
-              eventHandler,
               interactive
             }
           )
@@ -1382,48 +2331,48 @@ var WriteTodos = ({
 };
 
 // src/components/GenUI/FileExplorer.tsx
-var import_react8 = require("react");
+var import_react12 = require("react");
 var import_antd7 = require("antd");
 var import_icons7 = require("@ant-design/icons");
-var import_antd_style4 = require("antd-style");
+var import_antd_style5 = require("antd-style");
 
 // src/components/GenUI/elements/getFileIcon.tsx
 var import_icons6 = require("@ant-design/icons");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var getFileIcon = (filename) => {
   const ext = filename?.split(".")?.pop()?.toLowerCase();
   const iconStyle = { fontSize: 14, marginRight: 4, verticalAlign: "middle" };
   switch (ext) {
     case "ts":
     case "tsx":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#3178c6" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#3178c6" } });
     case "js":
     case "jsx":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#f7df1e" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#f7df1e" } });
     case "html":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
     case "css":
     case "less":
     case "scss":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
     case "md":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
     case "json":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
     case "png":
     case "jpg":
     case "jpeg":
     case "gif":
     case "svg":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons6.FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
   }
 };
 
 // src/components/GenUI/FileExplorer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var useStyles = (0, import_antd_style4.createStyles)(({ token, css }) => ({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var useStyles2 = (0, import_antd_style5.createStyles)(({ token, css }) => ({
   container: css`
     height: 100%;
     background: ${token.colorBgContainer};
@@ -1554,7 +2503,7 @@ var getFolderIcon = (expanded) => {
     color: "#dcb67a",
     verticalAlign: "middle"
   };
-  return expanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.FolderOutlined, { style: iconStyle });
+  return expanded ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.FolderOutlined, { style: iconStyle });
 };
 var sortTreeNodes = (nodes) => {
   return nodes.sort((a, b) => {
@@ -1579,7 +2528,7 @@ var buildTreeData = (files, expandedKeys) => {
       const key = parts.slice(0, index + 1).join("/");
       let existingNode = currentLevel.find((node) => node.key === key);
       if (!existingNode) {
-        const title = part === "" && index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        const title = part === "" && index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
             style: {
@@ -1609,23 +2558,22 @@ var buildTreeData = (files, expandedKeys) => {
 };
 var FileExplorer = ({
   data,
-  eventHandler,
   interactive = true,
   default_open_in_side_app = true
 }) => {
   const { files } = data ?? {};
-  const { styles, cx } = useStyles();
-  const [fileList, setFileList] = (0, import_react8.useState)([]);
-  const [selectedKey, setSelectedKey] = (0, import_react8.useState)("");
-  const [expandedKeys, setExpandedKeys] = (0, import_react8.useState)([]);
-  const [copied, setCopied] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
+  const { styles, cx } = useStyles2();
+  const [fileList, setFileList] = (0, import_react12.useState)([]);
+  const [selectedKey, setSelectedKey] = (0, import_react12.useState)("");
+  const [expandedKeys, setExpandedKeys] = (0, import_react12.useState)([]);
+  const [copied, setCopied] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
     if (copied) {
       const timer = setTimeout(() => setCopied(false), 2e3);
       return () => clearTimeout(timer);
     }
   }, [copied]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let list = [];
     if (Array.isArray(files)) {
       list = files;
@@ -1641,11 +2589,11 @@ var FileExplorer = ({
       setSelectedKey(list[0].name);
     }
   }, [files]);
-  const treeData = (0, import_react8.useMemo)(
+  const treeData = (0, import_react12.useMemo)(
     () => buildTreeData(fileList, expandedKeys),
     [fileList, expandedKeys]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (treeData.length > 0 && expandedKeys.length === 0) {
       const getAllKeys = (nodes) => {
         let keys = [];
@@ -1662,7 +2610,7 @@ var FileExplorer = ({
       setExpandedKeys(getAllKeys(treeData));
     }
   }, [treeData.length]);
-  const selectedFile = (0, import_react8.useMemo)(() => {
+  const selectedFile = (0, import_react12.useMemo)(() => {
     return fileList.find((f) => f.name === selectedKey);
   }, [fileList, selectedKey]);
   const handleCopy = () => {
@@ -1689,7 +2637,7 @@ var FileExplorer = ({
   };
   const renderContent = () => {
     if (!selectedFile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_antd7.Empty,
         {
           description: "Select a file to preview",
@@ -1698,38 +2646,38 @@ var FileExplorer = ({
       ) });
     }
     const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         style: { minHeight: "100%", display: "flex", flexDirection: "column" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Tooltip, { title: "Copy Content", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: styles.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_antd7.Tooltip, { title: "Copy Content", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               import_antd7.Button,
               {
                 type: "text",
-                icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.CheckOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.CopyOutlined, {}),
+                icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.CheckOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.CopyOutlined, {}),
                 onClick: handleCopy,
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Tooltip, { title: "Download File", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_antd7.Tooltip, { title: "Download File", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               import_antd7.Button,
               {
                 type: "text",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.DownloadOutlined, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons7.DownloadOutlined, {}),
                 onClick: handleDownload,
                 size: "small"
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.contentBody, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MDResponse, { content }) })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.contentBody, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MDResponse, { content }) })
         ]
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd7.Splitter, { className: styles.splitter, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Splitter.Panel, { defaultSize: "25%", min: "15%", max: "40%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.leftPanel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_antd7.Splitter, { className: styles.splitter, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_antd7.Splitter.Panel, { defaultSize: "25%", min: "15%", max: "40%", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.leftPanel, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_antd7.Tree,
       {
         showIcon: true,
@@ -1767,7 +2715,7 @@ var FileExplorer = ({
         }
       }
     ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Splitter.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.rightPanel, children: renderContent() }) })
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_antd7.Splitter.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.rightPanel, children: renderContent() }) })
   ] }) });
 };
 
@@ -1775,18 +2723,18 @@ var FileExplorer = ({
 var import_x = require("@ant-design/x");
 var import_antd8 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
-var import_react9 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var AttachmentsCard = ({
   data,
-  eventHandler,
   component_key,
   size = "medium",
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text8 } = import_antd8.Typography;
-  const [showAll, setShowAll] = (0, import_react9.useState)(false);
+  const { Text: Text11 } = import_antd8.Typography;
+  const [showAll, setShowAll] = (0, import_react13.useState)(false);
+  const { openSideApp } = useChatUIContext();
   const getStyles = () => {
     switch (size) {
       case "small":
@@ -1811,14 +2759,11 @@ var AttachmentsCard = ({
   };
   const styles = getStyles();
   const handleItemClick = (item) => {
-    eventHandler?.(
-      "__open_side_app",
-      {
-        component_key: "attachments",
-        data: { file_id: item.id, message: "\u9884\u89C8\uFF1A" + item.name }
-      },
-      ""
-    );
+    openSideApp({
+      component_key: "attachments",
+      data: { file_id: item.id, message: "\u9884\u89C8\uFF1A" + item.name },
+      message: "\u9884\u89C8\uFF1A" + item.name
+    });
   };
   const getCardStyle = (item) => {
     if (item.is_failure && columns > 1) {
@@ -1847,7 +2792,7 @@ var AttachmentsCard = ({
   };
   const DownloadButton = ({ item }) => {
     if (!showDownloadButton) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         style: {
@@ -1861,8 +2806,8 @@ var AttachmentsCard = ({
       }
     );
   };
-  const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    Text8,
+  const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Text11,
     {
       type: "secondary",
       style: {
@@ -1875,34 +2820,30 @@ var AttachmentsCard = ({
     const displayData2 = data || [];
     const shouldShowViewMore2 = displayData2.length > 4;
     const visibleData2 = showAll ? displayData2 : displayData2.slice(0, 4);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Flex, { vertical: true, gap: "small", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Row, { gutter: [8, 8], children: visibleData2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Col, { span: 24 / columns, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd8.Flex, { vertical: true, gap: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Row, { gutter: [8, 8], children: visibleData2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Col, { span: 24 / columns, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "div",
         {
           onClick: (evt) => {
             evt.stopPropagation();
             handleItemClick(item);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadButton, { item }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_x.Attachments.FileCard,
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DownloadButton, { item }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_x.FileCard,
               {
                 style: getFileCardStyle(item),
-                item: {
-                  name: item.name,
-                  size: item.size,
-                  uid: item.id,
-                  description: renderFileDescription(item)
-                }
+                name: item.name,
+                byte: item.size,
+                description: renderFileDescription(item)
               }
             ),
-            item.files && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            item.files && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               AttachmentsCard,
               {
                 data: item.files,
                 component_key: `${component_key}_${item.id}`,
-                eventHandler,
                 size: "small",
                 columns: 2,
                 showDownloadButton
@@ -1911,7 +2852,7 @@ var AttachmentsCard = ({
           ] })
         }
       ) }, item.id)) }),
-      shouldShowViewMore2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      shouldShowViewMore2 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         import_antd8.Button,
         {
           type: "link",
@@ -1925,33 +2866,29 @@ var AttachmentsCard = ({
   const displayData = data || [];
   const shouldShowViewMore = displayData.length > 4;
   const visibleData = showAll ? displayData : displayData.slice(0, 4);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Flex, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
-    visibleData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadButton, { item }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_x.Attachments.FileCard,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd8.Flex, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
+    visibleData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DownloadButton, { item }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_x.FileCard,
         {
           style: getFileCardStyle(item),
-          item: {
-            name: item.name,
-            size: item.size,
-            uid: item.id,
-            description: renderFileDescription(item)
-          }
+          name: item.name,
+          byte: item.size,
+          description: renderFileDescription(item)
         }
       ),
-      item.files && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Text8, { type: "secondary", style: { fontSize: "12px" }, children: [
+      item.files && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           AttachmentsCard,
           {
             data: item.files,
             component_key: `${component_key}_${item.id}`,
-            eventHandler,
             size: "small",
             columns: 2,
             showDownloadButton
@@ -1959,7 +2896,7 @@ var AttachmentsCard = ({
         )
       ] })
     ] }) }, item.id)),
-    shouldShowViewMore && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    shouldShowViewMore && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_antd8.Button,
       {
         type: "link",
@@ -1977,18 +2914,17 @@ var AttachmentsCard = ({
 
 // src/components/GenUI/elements/attachments_viewer_side_app.tsx
 var import_antd9 = require("antd");
-var import_react10 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function AttachmentsViewerSideApp({
   data,
-  eventHandler,
   component_key
 }) {
-  const [fileUri, setFileUri] = (0, import_react10.useState)();
-  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const [fileUri, setFileUri] = (0, import_react14.useState)();
+  const [loading, setLoading] = (0, import_react14.useState)(true);
   const { file_id } = data ?? {};
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd9.Skeleton, { active: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_antd9.Skeleton, { active: true });
   }
   const canPreviewInIframe = (fileName) => {
     if (!fileName) return false;
@@ -2023,18 +2959,18 @@ function AttachmentsViewerSideApp({
     return previewableExtensions.includes(extension);
   };
   const isPreviewable = fileUri?.fileName ? canPreviewInIframe(fileUri.fileName) : false;
-  return isPreviewable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return isPreviewable ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "iframe",
     {
       style: { width: "100%", height: "100%", border: 0 },
       src: fileUri?.url
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_antd9.Empty,
     {
-      description: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: "\u6682\u65F6\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u67E5\u770B\u3002" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_antd9.Button, { type: "link", href: fileUri?.url, download: fileUri?.fileName, children: [
+      description: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { children: "\u6682\u65F6\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u67E5\u770B\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_antd9.Button, { type: "link", href: fileUri?.url, download: fileUri?.fileName, children: [
           "\u4E0B\u8F7D",
           fileUri?.fileName
         ] })
@@ -2048,15 +2984,15 @@ function AttachmentsViewerSideApp({
 var import_antd11 = require("antd");
 
 // src/components/GenUI/elements/ContentPreviewCollapse.tsx
-var import_react11 = require("react");
+var import_react15 = require("react");
 var import_antd10 = require("antd");
-var import_antd_style5 = require("antd-style");
+var import_antd_style6 = require("antd-style");
 var import_icons8 = require("@ant-design/icons");
 var import_CollapsePanel3 = __toESM(require("antd/es/collapse/CollapsePanel"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DEFAULT_COLLAPSED_MAX_HEIGHT = 180;
 var DEFAULT_EXPANDED_MAX_HEIGHT = 500;
-var useStyle4 = (0, import_antd_style5.createStyles)(
+var useStyle4 = (0, import_antd_style6.createStyles)(
   ({ css }, { showShadow }) => ({
     collapse: css`
       .ant-collapse-header {
@@ -2118,18 +3054,18 @@ var ContentPreviewCollapse = ({
   showAllText = "Show all content",
   showLessText = "Show less"
 }) => {
-  const [showFullContent, setShowFullContent] = (0, import_react11.useState)(false);
-  const [isOverflowing, setIsOverflowing] = (0, import_react11.useState)(false);
-  const contentRef = (0, import_react11.useRef)(null);
+  const [showFullContent, setShowFullContent] = (0, import_react15.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react15.useState)(false);
+  const contentRef = (0, import_react15.useRef)(null);
   const showShadow = isOverflowing && !showFullContent;
   const { styles, cx } = useStyle4({ showShadow });
-  const checkOverflow = (0, import_react11.useCallback)(() => {
+  const checkOverflow = (0, import_react15.useCallback)(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
       setIsOverflowing(scrollHeight > collapsedMaxHeight);
     }
   }, [collapsedMaxHeight]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const element = contentRef.current;
     if (!element) return;
     checkOverflow();
@@ -2145,7 +3081,7 @@ var ContentPreviewCollapse = ({
     e.stopPropagation();
     setShowFullContent(!showFullContent);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_antd10.Collapse,
     {
       className: styles.collapse,
@@ -2153,29 +3089,29 @@ var ContentPreviewCollapse = ({
       bordered: false,
       defaultActiveKey: defaultExpanded ? [panelKey] : [],
       expandIcon,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         import_CollapsePanel3.default,
         {
           header,
           extra,
           style: { minWidth },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "div",
               {
                 className: cx(styles.contentContainer, showFullContent && "expanded"),
                 style: {
                   maxHeight: showFullContent ? expandedMaxHeight : collapsedMaxHeight
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: contentRef, className: styles.content, children })
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: contentRef, className: styles.content, children })
               }
             ),
-            isOverflowing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: styles.toggleButton, onClick: handleToggleContent, children: showFullContent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.UpOutlined, { style: { fontSize: 10 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: showLessText })
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.DownOutlined, { style: { fontSize: 10 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: showAllText })
+            isOverflowing && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.toggleButton, onClick: handleToggleContent, children: showFullContent ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons8.UpOutlined, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: showLessText })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons8.DownOutlined, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: showAllText })
             ] }) })
           ]
         },
@@ -2186,45 +3122,41 @@ var ContentPreviewCollapse = ({
 };
 
 // src/components/GenUI/elements/WriteFile.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var { Text: Text6 } = import_antd11.Typography;
 var WriteFile = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
   const toolCallData = data;
   const { file_path, content } = toolCallData?.args || {};
+  const { openSideApp } = useChatUIContext();
   if (!toolCallData) {
     return null;
   }
   const expandIcon = () => getFileIcon(file_path);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_antd11.Space, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text6, { strong: true, children: "New" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text6, { title: file_path, children: file_path?.split("/")?.pop() || "" })
+  const header = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_antd11.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text6, { strong: true, children: "New" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text6, { title: file_path, children: file_path?.split("/")?.pop() || "" })
   ] });
   const handleItemClick = (toolCallData2) => {
-    eventHandler?.(
-      "__open_side_app",
-      {
-        component_key: "file_content_diff_view",
-        message: file_path,
-        data: {
-          old_code: "",
-          new_code: content
-        }
-      },
-      ""
-    );
+    openSideApp({
+      component_key: "file_content_diff_view",
+      message: file_path,
+      data: {
+        old_code: "",
+        new_code: content
+      }
+    });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     ContentPreviewCollapse,
     {
       panelKey: toolCallData.id,
       header,
       expandIcon,
-      extra: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      extra: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_antd11.Button,
         {
           type: "link",
@@ -2236,7 +3168,7 @@ var WriteFile = ({
           children: "Diff View"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MDResponse, { content })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MDResponse, { content })
     }
   );
 };
@@ -2244,15 +3176,10 @@ var WriteFile = ({
 // src/components/GenUI/elements/file_content_diff_view.tsx
 var import_react_diff_viewer = __toESM(require("@alexbruf/react-diff-viewer"));
 var import_react_diff_viewer2 = require("@alexbruf/react-diff-viewer/index.css");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var FileContentDiffView = ({
-  data,
-  eventHandler,
-  interactive = true,
-  default_open_in_side_app = true
-}) => {
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var FileContentDiffView = ({ data, interactive = true, default_open_in_side_app = true }) => {
   const { old_code, new_code } = data;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_react_diff_viewer.default,
     {
       oldValue: old_code,
@@ -2264,405 +3191,320 @@ var FileContentDiffView = ({
 
 // src/components/GenUI/elements/EditFile.tsx
 var import_antd12 = require("antd");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var { Text: Text7 } = import_antd12.Typography;
 var EditFile = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
-  const toolCallData = data;
-  const { file_path, new_string, old_string } = toolCallData?.args || {};
-  if (!toolCallData) {
-    return null;
-  }
-  const expandIcon = () => getFileIcon(file_path);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd12.Space, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text7, { strong: true, children: "Edit" }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text7, { title: file_path, children: file_path?.split("/")?.pop() || "" })
-  ] });
-  const handleItemClick = (toolCallData2) => {
-    eventHandler?.(
-      "__open_side_app",
-      {
-        component_key: "file_content_diff_view",
-        message: file_path,
-        data: {
-          old_code: old_string,
-          new_code: new_string
-        }
-      },
-      ""
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    ContentPreviewCollapse,
-    {
-      panelKey: toolCallData.id,
-      header,
-      expandIcon,
-      extra: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_antd12.Button,
-        {
-          type: "link",
-          size: "small",
-          onClick: (evt) => {
-            evt.stopPropagation();
-            handleItemClick(toolCallData);
-          },
-          children: "Diff View"
-        }
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MDResponse, { content: new_string })
-    }
-  );
-};
-
-// src/components/GenUI/elements/builtIns.tsx
-var elements = {
-  action_show_attachments_uploader: {
-    card_view: () => null,
-    action: (data) => {
-      console.log(data);
-    }
-  },
-  generic_data_table: {
-    card_view: GenericDataTable,
-    side_app_view: GenericDataTableSideApp
-  },
-  confirm: {
-    card_view: ConfirmFeedback
-  },
-  tool_call: {
-    card_view: ToolCall
-  },
-  tool_card: {
-    card_view: ToolCard
-  },
-  todo_list: {
-    card_view: Todo
-  },
-  write_todos: {
-    card_view: WriteTodos
-  },
-  write_file: {
-    card_view: WriteFile
-  },
-  edit_file: {
-    card_view: EditFile
-  },
-  file_explorer: {
-    card_view: () => null,
-    side_app_view: FileExplorer
-  },
-  attachments: {
-    card_view: AttachmentsCard,
-    side_app_view: AttachmentsViewerSideApp
-  },
-  file_content_diff_view: {
-    card_view: FileContentDiffView,
-    side_app_view: FileContentDiffView
-  }
-};
-
-// src/components/GenUI/elements/index.tsx
-var getElement = (language) => {
-  if (language && elements[language]) {
-    return elements[language];
+  const toolCallData = data;
+  const { file_path, new_string, old_string } = toolCallData?.args || {};
+  const { openSideApp } = useChatUIContext();
+  if (!toolCallData) {
+    return null;
   }
-  return null;
-};
-var regsiterElement = (language, ElementMeta) => {
-  console.log("regsiterElement", language, ElementMeta);
-  elements[language] = ElementMeta;
-  return ElementMeta;
-};
-
-// src/components/GenUI/MDMermaid.tsx
-var import_mermaid = __toESM(require("mermaid"));
-var import_react12 = require("react");
-var import_uuid = require("uuid");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var MDMermaid = ({ children = [] }) => {
-  const domId = (0, import_react12.useRef)(`dom${(0, import_uuid.v4)()}`);
-  const code = String(children);
-  const target = (0, import_react12.useRef)(null);
-  const targetInternal = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
-    if (target.current && code) {
-      import_mermaid.default.initialize({
-        startOnLoad: true,
-        theme: "default",
-        securityLevel: "loose",
-        themeCSS: `
-          g.classGroup rect {
-            fill: #282a36;
-            stroke: #6272a4;
-          } 
-          g.classGroup text {
-            fill: #f8f8f2;
-          }
-          g.classGroup line {
-            stroke: #f8f8f2;
-            stroke-width: 0.5;
-          }
-          .classLabel .box {
-            stroke: #21222c;
-            stroke-width: 3;
-            fill: #21222c;
-            opacity: 1;
-          }
-          .classLabel .label {
-            fill: #f1fa8c;
-          }
-          .relation {
-            stroke: #ff79c6;
-            stroke-width: 1;
-          }
-          #compositionStart, #compositionEnd {
-            fill: #bd93f9;
-            stroke: #bd93f9;
-            stroke-width: 1;
-          }
-          #aggregationEnd, #aggregationStart {
-            fill: #21222c;
-            stroke: #50fa7b;
-            stroke-width: 1;
-          }
-          #dependencyStart, #dependencyEnd {
-            fill: #00bcd4;
-            stroke: #00bcd4;
-            stroke-width: 1;
-          } 
-          #extensionStart, #extensionEnd {
-            fill: #f8f8f2;
-            stroke: #f8f8f2;
-            stroke-width: 1;
-          }
-          `,
-        fontFamily: "Fira Code",
-        sequence: { showSequenceNumbers: true }
-      });
-      import_mermaid.default.render(domId.current, code, target.current).then((result) => {
-        target.current.innerHTML = result.svg;
-      }).catch((error) => {
-        console.log(error);
-      });
+  const expandIcon = () => getFileIcon(file_path);
+  const header = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_antd12.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text7, { strong: true, children: "Edit" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text7, { title: file_path, children: file_path?.split("/")?.pop() || "" })
+  ] });
+  const handleItemClick = (toolCallData2) => {
+    openSideApp({
+      component_key: "file_content_diff_view",
+      message: file_path,
+      data: {
+        old_code: old_string,
+        new_code: new_string
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon,
+      extra: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_antd12.Button,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "Diff View"
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MDResponse, { content: new_string })
     }
-  }, [code]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("code", { id: domId.current, style: { display: "none" } }) });
+  );
 };
 
-// src/components/GenUI/MDResponse.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var SyntaxHighlighter = import_react_syntax_highlighter.Prism;
-var useStyles2 = (0, import_antd_style6.createStyles)(({ token, css }) => ({
-  markdownTableContainer: css`
-    overflow-x: auto;
-    width: 100%;
-  `,
-  markdownTable: css`
-    width: 100%;
-    border-collapse: collapse;
-    margin: 16px 0;
-    border-radius: ${token.borderRadius}px;
+// src/components/GenUI/elements/task_card.tsx
+var import_antd13 = require("antd");
+var import_antd_style7 = require("antd-style");
+var import_icons9 = require("@ant-design/icons");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var { Text: Text8 } = import_antd13.Typography;
+var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => ({
+  card: css`
+    max-width: 600px;
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    white-space: nowrap;
+    position: relative;
+    &:hover {
+      border-color: ${token.colorPrimary};
+      box-shadow: 0 8px 24px rgba(24, 144, 255, 0.12);
+      transform: translateY(-4px);
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(
+        90deg,
+        ${token.colorPrimary} 0%,
+        ${token.colorPrimaryHover} 100%
+      );
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    &:hover::before {
+      opacity: 1;
+    }
   `,
-  markdownTh: css`
-    background: ${token.colorFillAlter};
-    padding: 12px 16px;
-    text-align: left;
-    font-weight: 600;
-    border-bottom: 1px solid ${token.colorBorder};
-    color: ${token.colorTextHeading};
-    font-size: ${token.fontSize}px;
+  cardBody: css`
+    padding: 20px !important;
   `,
-  markdownTd: css`
-    padding: 12px 16px;
-    border-bottom: 1px solid ${token.colorBorder};
+  header: css`
+    margin-bottom: 16px;
+  `,
+  titleSection: css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+  `,
+  iconWrapper: css`
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(
+      135deg,
+      rgba(24, 144, 255, 0.1) 0%,
+      rgba(24, 144, 255, 0.05) 100%
+    );
+    flex-shrink: 0;
+  `,
+  titleContent: css`
+    flex: 1;
+    min-width: 0;
+  `,
+  taskType: css`
+    font-size: 12px;
+    font-weight: 500;
+    color: ${token.colorPrimary};
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  `,
+  description: css`
     color: ${token.colorText};
-    font-size: ${token.fontSize}px;
-
-    &:last-child {
-      border-right: none;
-    }
+    font-size: 15px;
+    line-height: 1.6;
+    font-weight: 500;
+    margin: 0;
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
   `,
-  markdownTr: css`
+  footer: css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16px;
+    margin-top: 16px;
+    border-top: 1px solid ${token.colorBorderSecondary};
+    gap: 12px;
+  `,
+  footerLeft: css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+  `,
+  assigneeContainer: css`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 12px;
+    background: ${token.colorFillAlter};
+    border-radius: 20px;
+    transition: all 0.2s ease;
     &:hover {
       background: ${token.colorFillTertiary};
     }
-
-    &:last-child td {
-      border-bottom: none;
-    }
   `,
-  markdownContainer: css`
-    white-space: normal;
-
-    /* 为整个markdown内容添加基础样式 */
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: ${token.colorTextHeading};
-      margin-top: 24px;
-      margin-bottom: 16px;
-    }
-
-    p {
-      color: ${token.colorText};
-      line-height: 1.6;
-      margin-bottom: 16px;
-    }
-
-    blockquote {
-      border-left: 4px solid ${token.colorPrimary};
-      background: ${token.colorFillAlter};
-      padding: 16px;
-      margin: 16px 0;
-      border-radius: 0 ${token.borderRadius}px ${token.borderRadius}px 0;
-    }
-
-    code:not(pre code) {
-      background: ${token.colorFillAlter};
-      padding: 2px 6px;
-      border-radius: ${token.borderRadius}px;
-      font-family: ${token.fontFamilyCode};
-      color: ${token.colorError};
-    }
+  assigneeAvatar: css`
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimary} 0%,
+      ${token.colorPrimaryHover} 100%
+    );
+  `,
+  assigneeName: css`
+    color: ${token.colorText};
+    font-size: 13px;
+    font-weight: 500;
+  `,
+  actionIcon: css`
+    color: ${token.colorTextTertiary};
+    font-size: 14px;
+    transition: all 0.2s ease;
   `
 }));
-var MDResponse = ({
-  content = "",
-  context,
-  embeddedLink,
-  interactive,
-  userData,
-  noGenUI,
-  eventHandler
-}) => {
-  const { styles } = useStyles2();
-  const config = (0, import_react13.useMemo)(
-    () => ({
-      components: {
-        a({ node, ...props }) {
-          if (embeddedLink) {
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IFrameCard, { src: props.href });
-          } else return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { ...props });
-        },
-        table({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("table", { className: styles.markdownTable, ...props }) });
-        },
-        th({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("th", { className: styles.markdownTh, ...props });
-        },
-        td({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { className: styles.markdownTd, ...props });
-        },
-        tr({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: styles.markdownTr, ...props });
-        },
-        code({ children, className, node, ...rest }) {
-          const match = /language-(\w+)/.exec(className || "");
-          const language = match?.[1];
-          if (language) {
-            const Element = getElement(language)?.card_view;
-            if (Element) {
-              let childrenData;
-              try {
-                childrenData = JSON.parse(children);
-              } catch (error) {
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                Element,
+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 { threadId } = useAgentChat();
+  const subagent_thread_id = (threadId || "") + "_" + subagent_type + "_" + toolCallData.id;
+  const getStatusConfig = (status2) => {
+    switch (status2) {
+      case "success":
+        return {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.CheckCircleOutlined, { style: { fontSize: 16 } }),
+          color: "success",
+          text: "Completed",
+          bgColor: "rgba(82, 196, 26, 0.1)"
+        };
+      case "error":
+        return {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.CloseCircleOutlined, { style: { fontSize: 16 } }),
+          color: "error",
+          text: "Failed",
+          bgColor: "rgba(255, 77, 79, 0.1)"
+        };
+      case "pending":
+      default:
+        return {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.LoadingOutlined, { style: { fontSize: 16 } }),
+          color: "processing",
+          text: "In Progress",
+          bgColor: "rgba(24, 144, 255, 0.1)"
+        };
+    }
+  };
+  const statusConfig = getStatusConfig(status);
+  const handleCardClick = () => {
+    openSideApp({
+      component_key: "task",
+      message: subagent_type,
+      data: {
+        thread_id: subagent_thread_id,
+        description,
+        subagent_type
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_antd13.Card,
+    {
+      size: "small",
+      className: styles.card,
+      bordered: false,
+      onClick: handleCardClick,
+      hoverable: interactive,
+      bodyStyle: { padding: 0 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.cardBody, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.titleSection, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.CarryOutOutlined, { style: { fontSize: 20, color: "#1890ff" } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.titleContent, children: [
+            subagent_type && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: styles.taskType, children: subagent_type }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text8, { className: styles.description, children: description })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.footer, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.footerLeft, children: [
+            assignee && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: styles.assigneeContainer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_antd13.Avatar,
                 {
-                  interactive,
-                  component_key: language,
-                  data: childrenData,
-                  eventHandler: (e, data, message3, agent) => {
-                    eventHandler?.(e, data, message3, agent);
-                  }
+                  size: 24,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.UserOutlined, {}),
+                  className: styles.assigneeAvatar
                 }
-              );
-            }
-            switch (language) {
-              case "mermaid":
-                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MDMermaid, { children });
-              default:
-                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  SyntaxHighlighter,
-                  {
-                    ...rest,
-                    PreTag: "div",
-                    language,
-                    style: import_prism.dark,
-                    children: String(children).replace(/\n$/, "")
-                  }
-                );
-            }
-          } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("code", { ...rest, className, children });
-          }
-        }
-      },
-      remarkPlugins: [import_remark_gfm.default],
-      rehypePlugins: [import_rehype_raw.default]
-    }),
-    [userData, interactive, embeddedLink, styles]
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text8, { className: styles.assigneeName, children: assignee })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_antd13.Tag,
+              {
+                icon: statusConfig.icon,
+                color: statusConfig.color,
+                style: {
+                  margin: 0,
+                  padding: "4px 12px",
+                  borderRadius: "12px",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  border: "none",
+                  background: statusConfig.bgColor
+                },
+                children: statusConfig.text
+              }
+            )
+          ] }),
+          interactive && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_icons9.RightOutlined, { className: styles.actionIcon })
+        ] })
+      ] })
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_markdown.default, { ...config, children: content }) });
-};
-var MDViewFormItem = ({ value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MDResponse, { content: value || "" });
-};
-var IFrameCard = ({ src }) => {
-  const containerRef = (0, import_react13.useRef)(null);
-  const [width, setWidth] = (0, import_react13.useState)("640px");
-  const [height, setHeight] = (0, import_react13.useState)("320px");
-  const valid_images = [
-    "jpg",
-    "jpeg",
-    "png",
-    "gif",
-    "bmp",
-    "svg",
-    "tif",
-    "tiff",
-    "webp"
-  ];
-  if (!src) {
-    return null;
-  }
-  const spitedSrc = src.split(".");
-  if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src, style: { width: "100%" } }) });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: src, target: "_black", children: src }) });
-  }
 };
 
+// src/components/GenUI/elements/task_detail.tsx
+var import_antd20 = require("antd");
+
 // src/components/Chat/Chating.tsx
-var import_icons9 = require("@ant-design/icons");
+var import_icons11 = require("@ant-design/icons");
+var import_x4 = require("@ant-design/x");
+
+// src/components/Chat/MessageList.tsx
 var import_x2 = require("@ant-design/x");
-var import_antd13 = require("antd");
+var import_antd14 = require("antd");
 var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
-var import_react14 = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var LazyBubble = ({
-  message: message3,
+  message: message4,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = (0, import_react14.useRef)(null);
-  const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
-  const [wasEverVisible, setWasEverVisible] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const ref = (0, import_react16.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react16.useState)(false);
+  const [wasEverVisible, setWasEverVisible] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -2680,67 +3522,371 @@ var LazyBubble = ({
       if (ref.current) {
         observer.unobserve(ref.current);
       }
-    };
-  }, [wasEverVisible]);
-  (0, import_react14.useEffect)(() => {
-    autoLoadRightPanel?.();
-  }, []);
-  const getPlaceholder = () => {
-    const estimatedHeight = message3.content ? Math.min(100, message3.content.length / 5) : 100;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
+    };
+  }, [wasEverVisible]);
+  (0, import_react16.useEffect)(() => {
+    autoLoadRightPanel?.();
+  }, []);
+  const getPlaceholder = () => {
+    const estimatedHeight = message4.content ? Math.min(100, message4.content.length / 5) : 100;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+};
+var MemoizedBubbleList = (0, import_react16.memo)(
+  ({
+    items,
+    role,
+    className
+  }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_x2.Bubble.List,
+    {
+      autoScroll: true,
+      items,
+      role,
+      className
+    },
+    "messages"
+  )
+);
+MemoizedBubbleList.displayName = "MemoizedBubbleList";
+var MessageList = ({
+  messages,
+  className
+}) => {
+  const { styles } = useStyle();
+  const { openSideApp } = useChatUIContext();
+  const messageLengthRef = (0, import_react16.useRef)(messages?.length ?? 0);
+  (0, import_react16.useEffect)(() => {
+    if (messages?.length) {
+      messageLengthRef.current = messages?.length;
+    }
+  }, [messages?.length]);
+  const renderContent = (0, import_react16.useCallback)((message4) => {
+    const { content } = message4;
+    try {
+      const json = JSON.parse(content);
+      if (json.action && json.message) {
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MDResponse, { content: json.message });
+      }
+    } catch (error) {
+    }
+    const tool_calls_md = message4.tool_calls?.map((tool_call) => {
+      return `\`\`\`tool_call
+${JSON.stringify(tool_call)}
+\`\`\``;
+    }) || [];
+    const content_md = [content, ...tool_calls_md].join("\n");
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_antd14.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MDResponse, { content: content_md }) });
+  }, []);
+  const items = (0, import_react16.useMemo)(
+    () => messages.map((message4, index) => ({
+      key: message4.id,
+      role: message4.role,
+      typing: false,
+      content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        LazyBubble,
+        {
+          message: message4,
+          renderContent,
+          autoLoadRightPanel: () => {
+            const { content, role: role2 } = message4;
+            const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
+            if (index === messages.length - 1 && isNewAddedMessage && role2 === "ai") {
+              try {
+                const match = content?.match(
+                  /```([\w_]*)\n({.*?}|[^`]*)\n```/m
+                );
+                const type = match?.[1];
+                const data = match?.[2];
+                const jsonData = data ? JSON.parse(data) : {};
+                if (type) {
+                  const element = getElement(type);
+                  if (element?.side_app_view) {
+                    openSideApp({
+                      component_key: type,
+                      data: jsonData
+                    });
+                  } else if (element?.action) {
+                    element.action(jsonData);
+                  }
+                }
+              } catch (error) {
+                console.error(error);
+              }
+            }
+          }
+        }
+      )
+    })),
+    [messages, renderContent]
+  );
+  const role = {
+    ai: {
+      placement: "start",
+      typing: false,
+      variant: "filled",
+      styles: {
+        content: {
+          background: "transparent",
+          padding: 0
+        }
+      }
+    },
+    human: {
+      placement: "end",
+      variant: "filled",
+      styles: {
+        content: {
+          background: "linear-gradient(1777deg, rgba(153, 164, 255, 0.38), rgb(231 243 248 / 38%) 27%)"
+        }
+      }
+    }
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { flex: 1 } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    MemoizedBubbleList,
+    {
+      items,
+      role,
+      className: styles.messages || className
+    }
+  );
+};
+
+// src/components/Chat/Chating.tsx
+var import_antd19 = require("antd");
+var import_react18 = __toESM(require("react"));
+
+// src/components/GenUI/HITLContainer.tsx
+var import_antd15 = require("antd");
+var import_antd_style8 = require("antd-style");
+var import_CollapsePanel4 = __toESM(require("antd/es/collapse/CollapsePanel"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var { Text: Text9 } = import_antd15.Typography;
+var useStyle6 = (0, import_antd_style8.createStyles)(({ token, css }) => ({
+  card: css`
+    max-width: 1200px;
+    margin: 8px 20px;
+    background: linear-gradient(
+      919deg,
+      rgb(232 67 157 / 8%),
+      rgb(250 235 206 / 28%) 43%
+    );
+  `
+}));
+var HITLContainer = () => {
+  const { styles } = useStyle6();
+  const { interrupts } = useAgentChat();
+  return interrupts && interrupts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_antd15.Collapse,
+    {
+      className: styles.card,
+      size: "small",
+      bordered: false,
+      defaultActiveKey: ["hitl"],
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_CollapsePanel4.default,
+        {
+          showArrow: false,
+          header: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_antd15.Tag,
+            {
+              bordered: false,
+              color: "orange",
+              style: {
+                fontSize: 14,
+                fontWeight: "bold",
+                background: "#ffffff8f",
+                padding: 4,
+                borderRadius: 8
+              },
+              children: "\u7B49\u5F85\u53CD\u9988"
+            }
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_antd15.Space, { direction: "vertical", style: { width: "100%" }, children: interrupts.map((interrupt) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MDResponse, { content: interrupt.value }, interrupt.id)) })
+        },
+        "hitl"
+      )
+    }
+  ) : null;
+};
+
+// src/components/Chat/AgentHeader.tsx
+var import_antd18 = require("antd");
+
+// src/components/Chat/TodoProgress.tsx
+var import_antd16 = require("antd");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var TodoProgress = ({}) => {
+  const { openSideApp } = useChatUIContext();
+  const { todos } = useAgentChat();
+  if (!todos || todos.length === 0) {
+    return null;
+  }
+  const completedCount = todos.filter(
+    (item) => item.status === "completed"
+  ).length;
+  const totalCount = todos.length;
+  const hasInProgress = todos.some((item) => item.status === "in_progress");
+  const percent = Math.round(completedCount / totalCount * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_antd16.Popover,
+    {
+      content: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { width: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Todo, { data: todos, component_key: "header_todos" }) }),
+      title: "Todos",
+      trigger: "click",
+      placement: "bottomRight",
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_antd16.Tooltip, { title: `${completedCount} / ${totalCount} tasks completed`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_antd16.Progress,
+        {
+          type: "circle",
+          strokeColor: {
+            "0%": "#91caff",
+            "100%": "#003eb3"
+          },
+          percent,
+          status: hasInProgress ? "active" : "normal",
+          width: 30,
+          format: () => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                lineHeight: 1
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { style: { fontSize: 8 }, children: [
+                completedCount,
+                "/",
+                totalCount
+              ] })
+            }
+          )
+        }
+      ) }) })
+    }
+  );
+};
+
+// src/components/Chat/FileExplorerButton.tsx
+var import_antd17 = require("antd");
+var import_icons10 = require("@ant-design/icons");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var FileExplorerButton = ({}) => {
+  const { agentState } = useAgentChat();
+  const { openSideApp } = useChatUIContext();
+  const files = agentState?.values?.files || [];
+  if (!files || Object.keys(files).length === 0) {
+    return null;
+  }
+  const fileCount = Object.keys(files).length;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_antd17.Tooltip, { title: "File Explorer", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_antd17.Badge, { count: fileCount, size: "small", color: "blue", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_antd17.Button,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_icons10.FileTextOutlined, {}),
+      onClick: () => openSideApp({
+        component_key: "file_explorer",
+        message: "File Explorer",
+        data: { files }
+      })
+    }
+  ) }) });
+};
+
+// src/components/Chat/AgentHeader.tsx
+var import_x3 = require("@ant-design/x");
+var import_react17 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var AgentHeader = (props) => {
+  const { description, avatar, name, extra, extraMeta } = props;
+  const extraMetaComponents = (0, import_react17.useMemo)(() => {
+    if (extraMeta && extraMeta.length > 0) {
+      return extraMeta.map((meta) => {
+        const Element = getElement(meta.id)?.card_view;
+        if (Element) {
+          let childrenData;
+          try {
+          } catch (error) {
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Element,
+            {
+              component_key: meta.id,
+              data: childrenData
+            },
+            meta.id
+          );
+        }
+      });
+    }
+    return void 0;
+  }, [extraMeta]);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_x3.Welcome,
+      {
+        style: { padding: 8 },
+        variant: "borderless",
+        description,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_antd18.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+        title: name || "Fina",
+        extra: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_antd18.Space, { children: [
+          extra,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TodoProgress, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FileExplorerButton, {}),
+          extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_antd18.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      {
+        style: {
+          background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
+        }
+      }
+    )
+  ] });
 };
-var MemoizedBubbleList = (0, import_react14.memo)(
-  ({
-    items,
-    roles,
-    className
-  }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_x2.Bubble.List,
-    {
-      autoScroll: true,
-      items,
-      roles,
-      className
-    },
-    "messages"
-  )
-);
-MemoizedBubbleList.displayName = "MemoizedBubbleList";
+
+// src/components/Chat/Chating.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Chating = ({
   avatar,
   name,
-  interrupts,
   description,
   default_submit_message,
-  tenant_id,
-  messages,
-  isLoading,
-  error,
-  sendMessage,
-  stopStreaming,
-  onOpenSidePanel,
-  onReminderClick,
-  onClearError,
-  styles,
-  reminderCount,
-  handleMDResponseEvent,
   senderPromptsItems,
   extra,
   attachment_placeholder,
   extraMeta = [],
   uploadAction = "/api/file_storage/upload?path=temp",
-  files,
-  todos
+  showHeader = true,
+  showSender = true,
+  showHITL = true
 }) => {
-  const { t } = (0, import_react_i18next.useTranslation)();
-  const [content, setContent] = (0, import_react14.useState)("");
-  const [attachedFiles, setAttachedFiles] = (0, import_react14.useState)([]);
-  const [headerOpen, setHeaderOpen] = (0, import_react14.useState)(false);
-  const attachmentsRef = (0, import_react14.useRef)(null);
-  const senderRef = import_react14.default.useRef(null);
-  (0, import_react14.useEffect)(() => {
+  const [content, setContent] = (0, import_react18.useState)("");
+  const [attachedFiles, setAttachedFiles] = (0, import_react18.useState)([]);
+  const { styles } = useStyle();
+  const [headerOpen, setHeaderOpen] = (0, import_react18.useState)(false);
+  const attachmentsRef = (0, import_react18.useRef)(null);
+  const senderRef = import_react18.default.useRef(null);
+  const {
+    messages,
+    sendMessage,
+    stopStreaming,
+    isLoading,
+    error,
+    interrupts,
+    tenantId,
+    clearError
+  } = useAgentChat();
+  (0, import_react18.useEffect)(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -2749,86 +3895,6 @@ var Chating = ({
       }
     });
   }, []);
-  const messageLengthRef = (0, import_react14.useRef)(messages?.length ?? 0);
-  (0, import_react14.useEffect)(() => {
-    if (messages?.length) {
-      messageLengthRef.current = messages?.length;
-    }
-  }, [messages?.length]);
-  const renderContent = (0, import_react14.useCallback)(
-    (message3) => {
-      const { content: content2, files: files2, id } = message3;
-      try {
-        const json = JSON.parse(content2);
-        if (json.action && json.message) {
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            MDResponse,
-            {
-              content: json.message,
-              eventHandler: handleMDResponseEvent
-            }
-          );
-        }
-      } catch (error2) {
-      }
-      const tool_calls_md = message3.tool_calls?.map((tool_call) => {
-        return `\`\`\`tool_call
-${JSON.stringify(tool_call)}
-\`\`\``;
-      }) || [];
-      const content_md = [content2, ...tool_calls_md].join("\n");
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        MDResponse,
-        {
-          content: content_md,
-          eventHandler: handleMDResponseEvent
-        }
-      ) });
-    },
-    [handleMDResponseEvent]
-  );
-  const items = (0, import_react14.useMemo)(
-    () => messages.map((message3, index) => ({
-      key: message3.id,
-      role: message3.role,
-      typing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        LazyBubble,
-        {
-          message: message3,
-          renderContent,
-          autoLoadRightPanel: () => {
-            const { content: content2, role } = message3;
-            const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
-            if (index === messages.length - 1 && isNewAddedMessage && role === "ai") {
-              try {
-                const match = content2?.match(
-                  /```([\w_]*)\n({.*?}|[^`]*)\n```/m
-                );
-                const type = match?.[1];
-                const data = match?.[2];
-                const jsonData = data ? JSON.parse(data) : {};
-                if (type) {
-                  const element = getElement(type);
-                  if (element?.side_app_view) {
-                    onOpenSidePanel({
-                      component_key: type,
-                      data: jsonData
-                    });
-                  } else if (element?.action) {
-                    element.action(jsonData);
-                  }
-                }
-              } catch (error2) {
-                console.error(error2);
-              }
-            }
-          }
-        }
-      )
-    })),
-    [messages, renderContent, onOpenSidePanel]
-  );
   const isArchiveFile = (file) => {
     const zipMimeTypes = ["application/zip"];
     const rarMimeTypes = [
@@ -2842,13 +3908,13 @@ ${JSON.stringify(tool_call)}
   const onSubmit = (nextContent) => {
     if (!nextContent && attachedFiles.length === 0) return;
     if (attachedFiles.filter((f) => f.status !== "done").length > 0) {
-      import_antd13.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
+      import_antd19.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
       return;
     }
     if (!nextContent && attachedFiles.length > 0) {
-      nextContent = default_submit_message || "\u8BB0\u8D26";
+      nextContent = default_submit_message || "";
     }
-    const files2 = attachedFiles.map(
+    const files = attachedFiles.map(
       (file) => isArchiveFile(file) ? {
         name: file.response.zipFileName || file.response.rarFileName,
         id: file.response.zipFileId || file.response.rarFileId,
@@ -2866,14 +3932,14 @@ ${JSON.stringify(tool_call)}
         id: file.response.id
       }
     );
-    const files_md = files2.length > 0 ? [
+    const files_md = files.length > 0 ? [
       "",
       "\u6211\u5DF2\u7ECF\u63D0\u4EA4\u4E86\u4EE5\u4E0B\u6587\u4EF6\uFF1A",
       "```attachments",
-      JSON.stringify(files2),
+      JSON.stringify(files),
       "```"
     ].join("\n") : "";
-    sendMessage({ input: { message: nextContent + files_md, files: files2 } });
+    sendMessage({ input: { message: nextContent + files_md, files } });
     setContent("");
     setAttachedFiles([]);
     setHeaderOpen(false);
@@ -2886,7 +3952,7 @@ ${JSON.stringify(tool_call)}
       setHeaderOpen(true);
     }
     if (info.file?.response?.error || info.file.status === "error") {
-      import_antd13.message.error(
+      import_antd19.message.error(
         `${info.file.name} file upload failed.${info.file?.response?.message}`
       );
     }
@@ -2898,23 +3964,23 @@ ${JSON.stringify(tool_call)}
   const beforeUpload = (file) => {
     const isLessThan20MB = file.size / 1024 / 1024 < 20;
     if (!isLessThan20MB) {
-      import_antd13.message.error(
+      import_antd19.message.error(
         `File must be smaller than 20MB! ${file.name} is too large.`
       );
       return false;
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_antd13.Button,
+  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_antd19.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_antd19.Button,
     {
       type: "text",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons11.PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_x2.Sender.Header,
+  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_x4.Sender.Header,
     {
       title: "Attachments",
       open: headerOpen,
@@ -2925,14 +3991,14 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_x2.Attachments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        import_x4.Attachments,
         {
           ref: attachmentsRef,
           items: attachedFiles,
           action: uploadAction,
           headers: {
-            "x-tenant-id": tenant_id
+            "x-tenant-id": tenantId || ""
           },
           getDropContainer: () => {
             const dropContainer = document.querySelector(".fina_chat");
@@ -2947,7 +4013,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons11.CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -2955,187 +4021,35 @@ ${JSON.stringify(tool_call)}
       )
     }
   );
-  const roles = {
-    ai: {
-      placement: "start",
-      typing: false,
-      variant: "filled",
-      styles: {
-        content: {
-          background: "transparent",
-          padding: 0
-          //  "linear-gradient(149deg, rgb(160 17 2170 / 18%), rgb(226 176 176 / 18%) 43%)",
-        }
-      }
-    },
-    human: {
-      placement: "end",
-      variant: "filled",
-      styles: {
-        content: {
-          maxWidth: "70%",
-          background: "linear-gradient(1777deg, rgba(153, 164, 255, 0.38), rgb(231 243 248 / 38%) 27%)"
-        }
-      }
-    }
-  };
-  const extraMetaComponents = (0, import_react14.useMemo)(() => {
-    if (extraMeta?.length > 0) {
-      return extraMeta.map((meta) => {
-        const Element = getElement(meta.id)?.card_view;
-        if (Element) {
-          let childrenData;
-          try {
-          } catch (error2) {
-          }
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            Element,
-            {
-              component_key: meta.id,
-              data: childrenData,
-              eventHandler: (e, data, message3, agent) => {
-                handleMDResponseEvent?.(e, data, message3, agent);
-              }
-            },
-            meta.id
-          );
-        }
-      });
-    }
-    return void 0;
-  }, [extraMeta]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_x2.Welcome,
-        {
-          style: { padding: 8 },
-          variant: "borderless",
-          description,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
-          title: name || "Fina",
-          extra: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_antd13.Space, { children: [
-            extra,
-            todos && todos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_antd13.Popover,
-              {
-                content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  Todo,
-                  {
-                    data: todos,
-                    component_key: "header_todos",
-                    eventHandler: handleMDResponseEvent
-                  }
-                ) }),
-                title: "Todos",
-                trigger: "click",
-                placement: "bottomRight",
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  import_antd13.Tooltip,
-                  {
-                    title: `${todos.filter((item) => item.status === "completed").length} / ${todos.length} tasks completed`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_antd13.Progress,
-                      {
-                        type: "circle",
-                        strokeColor: {
-                          "0%": "#91caff",
-                          "100%": "#003eb3"
-                        },
-                        percent: Math.round(
-                          todos.filter((item) => item.status === "completed").length / todos.length * 100
-                        ),
-                        status: todos.some((item) => item.status === "in_progress") ? "active" : "normal",
-                        width: 30,
-                        format: () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "center",
-                              lineHeight: 1
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { style: { fontSize: 8 }, children: [
-                              todos.filter(
-                                (item) => item.status === "completed"
-                              ).length,
-                              "/",
-                              todos.length
-                            ] })
-                          }
-                        )
-                      }
-                    ) })
-                  }
-                )
-              }
-            ),
-            files && Object.keys(files).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Tooltip, { title: "File Explorer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_antd13.Badge,
-              {
-                count: Object.keys(files).length,
-                size: "small",
-                color: "blue",
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  import_antd13.Button,
-                  {
-                    type: "text",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.FileTextOutlined, {}),
-                    onClick: () => onOpenSidePanel({
-                      component_key: "file_explorer",
-                      message: "File Explorer",
-                      data: { files }
-                    })
-                  }
-                )
-              }
-            ) }),
-            extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "div",
-        {
-          style: {
-            background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
-          }
-        }
-      )
-    ] }),
-    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      MemoizedBubbleList,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: showHeader && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      AgentHeader,
       {
-        items,
-        roles,
-        className: styles.messages
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_x2.Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_x2.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_antd13.Alert,
+        description,
+        avatar,
+        name,
+        extra,
+        extraMeta
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MessageList, { messages, className: styles.messages }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_x4.Bubble, { loading: isLoading, variant: "borderless", content: "" }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_x4.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_antd19.Alert,
       {
         type: "error",
         banner: true,
         closable: true,
-        onClose: () => onClearError?.(),
+        onClose: () => clearError(),
         message: `${error.message}`
       }
     ) }),
-    interrupts && interrupts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Space, { direction: "vertical", style: { width: "100%" }, children: interrupts.map((interrupt) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      MDResponse,
-      {
-        content: interrupt.value,
-        eventHandler: handleMDResponseEvent
-      },
-      interrupt.id
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_x2.Sender,
+    showHITL && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(HITLContainer, {}),
+    showSender && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      import_x4.Sender,
       {
         disabled: interrupts && interrupts.length > 0,
-        allowSpeech: true,
+        allowSpeech: false,
         ref: senderRef,
         value: content,
         header: senderHeader,
@@ -3145,19 +4059,8 @@ ${JSON.stringify(tool_call)}
         prefix: attachmentsNode,
         loading: isLoading,
         className: styles.sender,
-        actions: (ori, { components }) => {
-          const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Flex, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingButton, { type: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            SendButton,
-            {
-              type: "primary",
-              disabled: !content && attachedFiles.length === 0,
-              onClick: () => onSubmit(content)
-            }
-          ) });
-        },
-        onPasteFile: (_, files2) => {
-          Array.from(files2).forEach((file) => {
+        onPasteFile: (files) => {
+          Array.from(files).forEach((file) => {
             attachmentsRef.current?.upload(file);
           });
           setHeaderOpen(true);
@@ -3167,61 +4070,105 @@ ${JSON.stringify(tool_call)}
   ] });
 };
 
-// src/components/Chat/ThinkingChain.tsx
-var import_icons10 = require("@ant-design/icons");
-var import_x3 = require("@ant-design/x");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function getStatusIcon2(status) {
-  switch (status) {
-    case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.CheckCircleOutlined, {});
-    case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.InfoCircleOutlined, {});
-    case "pending":
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.LoadingOutlined, {});
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.CheckCircleOutlined, {});
-  }
-}
-var ThinkingChain = ({ message: message3 }) => {
-  const title = message3.name || message3.content.split("\n")[0];
-  const items = [
-    {
-      key: message3.id,
-      title,
-      content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MDResponse, { content: message3.content }),
-      status: message3.status,
-      icon: getStatusIcon2(message3.status)
-    }
-  ];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_x3.ThoughtChain,
+// src/components/GenUI/elements/task_detail.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var { Text: Text10 } = import_antd20.Typography;
+var TaskDetail = ({ data, component_key, interactive = true }) => {
+  const { description, subagent_type, thread_id } = data || {};
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    AgentThreadProvider,
     {
-      items,
-      collapsible: message3.status === "success" ? true : false,
-      size: "small"
+      threadId: thread_id,
+      assistantId: subagent_type,
+      options: {
+        streaming: true,
+        enableReturnStateWhenStreamCompleted: true,
+        enableResumeStream: true
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        Chating,
+        {
+          description,
+          name: subagent_type,
+          showHeader: true,
+          showSender: false,
+          showHITL: false
+        }
+      ) })
     }
   );
 };
-var ThinkingChainGroup = ({ message: message3 }) => {
-  const title = "\u601D\u8003\u8FC7\u7A0B";
-  const children = message3.items?.map((item) => ({
-    key: item.id,
-    title: item.name || item.content.split("\n")[0],
-    content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MDResponse, { content: item.content }),
-    status: item.status,
-    icon: getStatusIcon2(item.status)
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_x3.ThoughtChain, { items: children, collapsible: true, size: "small" });
+
+// src/components/GenUI/elements/builtIns.tsx
+var elements = {
+  action_show_attachments_uploader: {
+    card_view: () => null,
+    action: (data) => {
+      console.log(data);
+    }
+  },
+  generic_data_table: {
+    card_view: GenericDataTable,
+    side_app_view: GenericDataTableSideApp
+  },
+  confirm: {
+    card_view: ConfirmFeedback
+  },
+  tool_call: {
+    card_view: ToolCall
+  },
+  tool_card: {
+    card_view: ToolCard
+  },
+  todo_list: {
+    card_view: Todo
+  },
+  write_todos: {
+    card_view: WriteTodos
+  },
+  write_file: {
+    card_view: WriteFile
+  },
+  edit_file: {
+    card_view: EditFile
+  },
+  file_explorer: {
+    card_view: () => null,
+    side_app_view: FileExplorer
+  },
+  attachments: {
+    card_view: AttachmentsCard,
+    side_app_view: AttachmentsViewerSideApp
+  },
+  file_content_diff_view: {
+    card_view: FileContentDiffView,
+    side_app_view: FileContentDiffView
+  },
+  task: {
+    card_view: TaskCard,
+    side_app_view: TaskDetail
+  }
+};
+
+// src/components/GenUI/elements/index.tsx
+var getElement = (language) => {
+  if (language && elements[language]) {
+    return elements[language];
+  }
+  return null;
+};
+var regsiterElement = (language, ElementMeta) => {
+  console.log("regsiterElement", language, ElementMeta);
+  elements[language] = ElementMeta;
+  return ElementMeta;
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-var import_icons11 = require("@ant-design/icons");
-var import_antd14 = require("antd");
-var import_antd_style7 = require("antd-style");
-var import_react15 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => {
+var import_antd21 = require("antd");
+var import_antd_style9 = require("antd-style");
+var import_react19 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var useStyle7 = (0, import_antd_style9.createStyles)(({ token, css }) => {
   return {
     tabContainer: css`
       .ant-tabs-content-holder {
@@ -3240,21 +4187,24 @@ var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
-var SideAppViewBrowser = ({
-  open_uri,
-  eventHandler,
-  onClose,
-  onChangeSize
-}) => {
-  const { styles } = useStyle5();
-  const [activeKey, setActiveKey] = (0, import_react15.useState)(JSON.stringify(open_uri));
-  const [currentSize, setCurrentSize] = (0, import_react15.useState)(open_uri.size || "large");
-  const [items, setItems] = (0, import_react15.useState)([]);
+var SideAppViewBrowser = () => {
+  const { styles } = useStyle7();
+  const {
+    sideAppSize,
+    sideAppSelectedCard,
+    setSideAppSize,
+    openSideApp,
+    closeSideApp
+  } = useChatUIContext();
+  const [activeKey, setActiveKey] = (0, import_react19.useState)(
+    JSON.stringify(sideAppSelectedCard)
+  );
+  const [items, setItems] = (0, import_react19.useState)([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -3279,7 +4229,7 @@ var SideAppViewBrowser = ({
       }
     }
     if (newPanes.length === 0) {
-      onClose();
+      closeSideApp();
       return;
     }
     setItems(newPanes);
@@ -3290,31 +4240,25 @@ var SideAppViewBrowser = ({
       remove(targetKey);
     }
   };
-  (0, import_react15.useEffect)(() => {
-    const SideAppView = getElement(open_uri.component_key).side_app_view || EmptySideAppView;
-    const key = JSON.stringify(open_uri);
+  (0, import_react19.useEffect)(() => {
+    const SideAppView = getElement(sideAppSelectedCard?.component_key).side_app_view || EmptySideAppView;
+    const key = JSON.stringify(sideAppSelectedCard);
     if (items.find((item) => item.key === key)) {
       setActiveKey(key);
       return;
     }
     add(
       key,
-      open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      sideAppSelectedCard?.message || sideAppSelectedCard?.data.message || "\u672A\u547D\u540D",
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         SideAppView,
         {
-          component_key: open_uri.component_key,
-          data: open_uri.data,
-          eventHandler
+          component_key: sideAppSelectedCard?.component_key || "",
+          data: sideAppSelectedCard?.data
         }
       )
     );
-  }, [open_uri]);
-  (0, import_react15.useEffect)(() => {
-    if (open_uri.size && open_uri.size !== currentSize) {
-      setCurrentSize(open_uri.size);
-    }
-  }, [open_uri.size]);
+  }, [sideAppSelectedCard]);
   const onChange = (newActiveKey) => {
     setActiveKey(newActiveKey);
   };
@@ -3326,10 +4270,9 @@ var SideAppViewBrowser = ({
       "large",
       "full"
     ];
-    const currentIndex = sizeOrder.indexOf(currentSize);
+    const currentIndex = sizeOrder.indexOf(sideAppSize);
     const nextSize = sizeOrder[(currentIndex + 1) % sizeOrder.length];
-    setCurrentSize(nextSize);
-    onChangeSize(nextSize);
+    setSideAppSize(nextSize);
   };
   const getSizeLabel = (size) => {
     switch (size) {
@@ -3348,44 +4291,44 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.CompressOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.FullscreenOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_antd14.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_antd21.Tabs,
     {
       className: styles.tabContainer,
       type: "editable-card",
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_antd14.Button,
+        right: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_antd21.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: getSizeIcon(currentSize),
+              icon: getSizeIcon(sideAppSize),
               onClick: handleSizeChange,
-              title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
+              title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(sideAppSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_antd14.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_antd21.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.CloseOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons12.CloseOutlined, {}),
               onClick: () => {
-                onClose();
+                closeSideApp();
               }
             }
           )
@@ -3399,30 +4342,52 @@ var SideAppViewBrowser = ({
   );
 };
 
-// src/components/Chat/context.tsx
-var import_react16 = require("react");
-var chatContext = (0, import_react16.createContext)({
-  eventHandler: (component_key, data, message3) => {
-  }
-});
+// src/components/Chat/LatticeChat.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var LatticeChat = (props) => {
+  const { assistant_id, thread_id, ...chatingProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    AgentThreadProvider,
+    {
+      assistantId: assistant_id,
+      threadId: thread_id,
+      options: {
+        streaming: true,
+        enableReturnStateWhenStreamCompleted: true,
+        enableResumeStream: true
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ColumnLayout,
+        {
+          left: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Chating, { ...chatingProps }),
+          right: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SideAppViewBrowser, {})
+        }
+      ) })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentThreadProvider,
   AxiomLatticeProvider,
+  ChatUIContext,
+  ChatUIContextProvider,
   Chating,
   FileExplorer,
+  LatticeChat,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
   SideAppViewBrowser,
-  ThinkingChain,
-  ThinkingChainGroup,
-  chatContext,
   getElement,
   regsiterElement,
+  useAgentChat,
   useAgentGraph,
   useAgentState,
+  useAgentThreadContext,
   useAxiomLattice,
   useChat,
+  useChatUIContext,
   useThread,
   ...require("@axiom-lattice/protocols")
 });