@axiom-lattice/react-sdk 2.1.6 → 2.1.8

package/dist/index.mjs

@@ -1,8 +1,14 @@
 // src/hooks/useChat.ts
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState as useState2, useCallback, useEffect as useEffect2, useRef } from "react";
 
 // src/context.tsx
-import { createContext, useContext, useMemo } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
 import { Client } from "@axiom-lattice/client-sdk";
 import { jsx } from "react/jsx-runtime";
 var AxiomLatticeContext = createContext({
@@ -24,21 +30,32 @@ function AxiomLatticeProvider({
   const value = useMemo(() => ({ client }), [client]);
   return /* @__PURE__ */ jsx(AxiomLatticeContext.Provider, { value, children });
 }
-function useAxiomLattice() {
+function useAxiomLattice({
+  assistantId
+} = {}) {
   const context = useContext(AxiomLatticeContext);
-  if (!context.client) {
+  const [client, setClient] = useState(context.client);
+  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
 import { createSimpleMessageMerger } from "@axiom-lattice/client-sdk";
 function useChat(threadId, options = {}) {
   const client = useAxiomLattice();
-  const [state, setState] = useState({
+  const [state, setState] = useState2({
     messages: options.initialMessages || [],
     isLoading: false,
     error: null,
@@ -73,7 +90,7 @@ function useChat(threadId, options = {}) {
     },
     [client, options.enableReturnStateWhenStreamCompleted]
   );
-  useEffect(() => {
+  useEffect2(() => {
     if (options.initialMessages && options.initialMessages.length > 0) {
       chunkMessageMerger.current.initialMessages(options.initialMessages);
     }
@@ -120,7 +137,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,
@@ -129,7 +146,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message3 || command?.resume?.message || "",
+        content: message4 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -318,7 +335,7 @@ function useChat(threadId, options = {}) {
       error: null
     }));
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (threadId) {
       loadMessages();
     } else {
@@ -341,71 +358,286 @@ function useChat(threadId, options = {}) {
   };
 }
 
-// src/hooks/useThread.ts
-import { useState as useState2, useCallback as useCallback2 } from "react";
-function useThread() {
-  const client = useAxiomLattice();
-  const [state, setState] = useState2({
-    threads: [],
-    currentThread: null,
+// src/context/AgentThreadContext.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useState as useState3,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useRef as useRef2
+} from "react";
+import { createSimpleMessageMerger as createSimpleMessageMerger2 } from "@axiom-lattice/client-sdk";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AgentThreadContext = createContext2(
+  null
+);
+function AgentThreadProvider({
+  threadId,
+  assistantId,
+  options = {},
+  children
+}) {
+  const client = useAxiomLattice({ assistantId });
+  const { assistantId: clientAssistantId, tenantId } = client;
+  if (!threadId) {
+    return null;
+  }
+  const [state, setState] = useState3({
+    assistantId: clientAssistantId,
+    tenantId,
+    threadId,
+    messages: options.initialMessages || [],
     isLoading: false,
-    error: null
+    error: null,
+    streamingMessage: null,
+    interrupts: void 0,
+    agentState: null
   });
-  const createThread = useCallback2(
-    async (options = {}) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+  const stopStreamingRef = useRef2(null);
+  const chunkMessageMerger = useRef2(createSimpleMessageMerger2());
+  const fetchAndUpdateAgentState = useCallback2(
+    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 = useCallback2(
-    async (threadId) => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+  useEffect3(() => {
+    if (options.initialMessages && options.initialMessages.length > 0) {
+      chunkMessageMerger.current.initialMessages(options.initialMessages);
+    }
+  }, [options.initialMessages]);
+  const handleStreamEvent = useCallback2(
+    (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
+      }));
+    },
+    []
+  );
+  const sendMessage = useCallback2(
+    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 thread = await client.getThread(threadId);
-        setState((prev) => ({
-          ...prev,
-          isLoading: false
-        }));
-        return thread;
+        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,
           isLoading: false,
           error: error instanceof Error ? error : new Error(String(error))
         }));
-        throw error;
       }
     },
-    [client]
+    [
+      client,
+      threadId,
+      options.streaming,
+      options.enableReturnStateWhenStreamCompleted,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
   );
-  const listThreads = useCallback2(
-    async (limit, offset) => {
+  const stopStreaming = useCallback2(() => {
+    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 = useCallback2(
+    async (limit) => {
+      if (!threadId) {
+        return;
+      }
+      if (stopStreamingRef.current) {
+        stopStreamingRef.current();
+        stopStreamingRef.current = null;
+      }
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
-        const threads = await client.listThreads({ limit, offset });
+        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,
+          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,
@@ -414,10 +646,153 @@ function useThread() {
         }));
       }
     },
-    [client]
+    [
+      client,
+      threadId,
+      options.enableResumeStream,
+      options.resumeStreamPollInterval,
+      handleStreamEvent,
+      fetchAndUpdateAgentState
+    ]
   );
-  const deleteThread = useCallback2(
-    async (threadId) => {
+  const clearMessages = useCallback2(() => {
+    chunkMessageMerger.current.reset();
+    setState((prev) => ({
+      ...prev,
+      messages: [],
+      interrupts: void 0,
+      streamingMessage: null
+    }));
+  }, []);
+  const clearError = useCallback2(() => {
+    setState((prev) => ({
+      ...prev,
+      error: null
+    }));
+  }, []);
+  useEffect3(() => {
+    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__ */ jsx2(AgentThreadContext.Provider, { value, children });
+}
+function useAgentThreadContext() {
+  const context = useContext2(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
+import { useState as useState4, useCallback as useCallback3 } from "react";
+function useThread() {
+  const client = useAxiomLattice();
+  const [state, setState] = useState4({
+    threads: [],
+    currentThread: null,
+    isLoading: false,
+    error: null
+  });
+  const createThread = useCallback3(
+    async (options = {}) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const threadId = await client.createThread(options);
+        const thread = await client.getThread(threadId);
+        setState((prev) => ({
+          ...prev,
+          threads: [...prev.threads, thread],
+          currentThread: thread,
+          isLoading: false
+        }));
+        return threadId;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const getThread = useCallback3(
+    async (threadId) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const thread = await client.getThread(threadId);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false
+        }));
+        return thread;
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+        throw error;
+      }
+    },
+    [client]
+  );
+  const listThreads = useCallback3(
+    async (limit, offset) => {
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      try {
+        const threads = await client.listThreads({ limit, offset });
+        setState((prev) => ({
+          ...prev,
+          threads,
+          isLoading: false
+        }));
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: error instanceof Error ? error : new Error(String(error))
+        }));
+      }
+    },
+    [client]
+  );
+  const deleteThread = useCallback3(
+    async (threadId) => {
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         await client.deleteThread(threadId);
@@ -438,7 +813,7 @@ function useThread() {
     },
     [client]
   );
-  const selectThread = useCallback2(
+  const selectThread = useCallback3(
     async (threadId) => {
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
@@ -470,20 +845,20 @@ function useThread() {
 }
 
 // src/hooks/useAgentState.ts
-import { useState as useState3, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState5, useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
 function useAgentState(threadId, options = {}) {
   const client = useAxiomLattice();
-  const [agentState, setAgentState] = useState3(null);
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const pollingIntervalRef = useRef2(null);
-  const pollingTimeoutRef = useRef2(null);
+  const [agentState, setAgentState] = useState5(null);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const pollingIntervalRef = useRef3(null);
+  const pollingTimeoutRef = useRef3(null);
   const {
     pollingInterval = 2e3,
     // 2 seconds by default
     autoStart = true
   } = options;
-  const fetchAgentState = useCallback3(async () => {
+  const fetchAgentState = useCallback4(async () => {
     if (!threadId) {
       return;
     }
@@ -498,7 +873,7 @@ function useAgentState(threadId, options = {}) {
       setIsLoading(false);
     }
   }, [client, threadId]);
-  const startPolling = useCallback3(() => {
+  const startPolling = useCallback4(() => {
     if (!threadId) {
       return;
     }
@@ -519,17 +894,17 @@ function useAgentState(threadId, options = {}) {
     };
     poll();
   }, [threadId, pollingInterval, fetchAgentState]);
-  const stopPolling = useCallback3(() => {
+  const stopPolling = useCallback4(() => {
     pollingIntervalRef.current = null;
     if (pollingTimeoutRef.current) {
       clearTimeout(pollingTimeoutRef.current);
       pollingTimeoutRef.current = null;
     }
   }, []);
-  const refresh = useCallback3(async () => {
+  const refresh = useCallback4(async () => {
     await fetchAgentState();
   }, [fetchAgentState]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (threadId && autoStart) {
       startPolling();
     } else {
@@ -550,13 +925,13 @@ function useAgentState(threadId, options = {}) {
 }
 
 // src/hooks/useAgentGraph.ts
-import { useState as useState4, useCallback as useCallback4 } from "react";
+import { useState as useState6, useCallback as useCallback5 } from "react";
 function useAgentGraph() {
   const client = useAxiomLattice();
-  const [graphImage, setGraphImage] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [error, setError] = useState4(null);
-  const fetchGraph = useCallback4(async () => {
+  const [graphImage, setGraphImage] = useState6(null);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const fetchGraph = useCallback5(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -579,167 +954,793 @@ function useAgentGraph() {
 // src/index.ts
 export * from "@axiom-lattice/protocols";
 
-// src/components/GenUI/MDResponse.tsx
-import ReactMarkdown from "react-markdown";
-import { Prism } from "react-syntax-highlighter";
-import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import remarkGfm from "remark-gfm";
-import { useMemo as useMemo3, useRef as useRef5, useState as useState11 } from "react";
-import { createStyles as createStyles5 } from "antd-style";
-import rehypeRaw from "rehype-raw";
-
-// src/components/GenUI/elements/confirm_feedback.tsx
-import { Button, Space, Typography } from "antd";
-import { useState as useState5 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var { Text } = Typography;
-var ConfirmFeedback = ({
-  data,
-  eventHandler,
-  interactive = true
+// src/components/Chat/ChatUIContext.tsx
+import { createContext as createContext3, useCallback as useCallback6, useContext as useContext3, useState as useState7 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChatUIContext = createContext3({
+  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] = useState5(false);
-  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx2(MDResponse, { content: message3 }),
-    options ? /* @__PURE__ */ jsx2(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx2(
-      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] = useState7(false);
+  const [sideAppSize, setSideAppSize] = useState7("large");
+  const [sideAppSelectedCard, setSideAppSelectedCard] = useState7(null);
+  const openSideApp = useCallback6(
+    (card) => {
+      setSideAppSelectedCard(card);
+      setSideAppVisible(true);
+    },
+    [setSideAppSelectedCard, setSideAppVisible]
+  );
+  const closeSideApp = useCallback6(() => {
+    setSideAppSelectedCard(null);
+    setSideAppVisible(false);
+  }, [setSideAppSelectedCard, setSideAppVisible]);
+  return /* @__PURE__ */ jsx3(
+    ChatUIContext.Provider,
+    {
+      value: {
+        sideAppVisible,
+        setSideAppVisible,
+        sideAppSize,
+        setSideAppSize,
+        sideAppSelectedCard,
+        setSideAppSelectedCard,
+        openSideApp,
+        closeSideApp
       },
-      option.value
-    )) }) : /* @__PURE__ */ jsxs(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
-      /* @__PURE__ */ jsx2(
-        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__ */ jsx2(
-        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 useContext3(ChatUIContext);
 };
 
-// src/components/GenUI/elements/generic_data_table.tsx
-import { Table, Typography as Typography2, Button as Button2, Flex, Space as Space2 } from "antd";
-import { useState as useState6 } from "react";
-import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var { Text: Text2 } = Typography2;
-var GenericDataTable = ({
-  data,
-  eventHandler,
-  interactive = true,
-  default_open_in_side_app = true
-}) => {
-  const { dataSource, message: message3 } = data ?? {};
-  const [expandedRowKeys, setExpandedRowKeys] = useState6([]);
-  const processedData = dataSource?.map((item, index) => ({
-    ...item,
-    key: `${index}_${JSON.stringify(item).slice(0, 20)}`
-  })) || [];
-  const generateColumns = (dataItem) => {
-    if (!dataItem || typeof dataItem !== "object") {
-      return [];
-    }
-    return Object.keys(dataItem).filter((key) => key !== "key" && key !== "expandItem").map((key) => ({
-      title: formatColumnTitle(key),
-      dataIndex: key,
-      key,
-      width: 150,
-      sorter: (a, b) => {
-        const aVal = a[key];
-        const bVal = b[key];
-        if (aVal === null || aVal === void 0) return 1;
-        if (bVal === null || bVal === void 0) return -1;
-        if (typeof aVal === "number" && typeof bVal === "number") {
-          return aVal - bVal;
-        }
-        const aDate = new Date(aVal);
-        const bDate = new Date(bVal);
-        if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
-          return aDate.getTime() - bDate.getTime();
+// src/components/Chat/useStyle.tsx
+import { createStyles } from "antd-style";
+var useStyle = 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;
         }
-        return String(aVal).localeCompare(String(bVal), "zh-CN");
-      },
-      render: (value) => {
-        if (value === null || value === void 0) {
-          return "-";
+
+        .ant-conversations-list {
+          display: none !important;
         }
-        if (typeof value === "object") {
-          return JSON.stringify(value);
+
+        .btn-text {
+          display: none !important;
         }
-        return String(value);
       }
-    }));
-  };
-  const formatColumnTitle = (key) => {
-    return key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (str) => str.toUpperCase()).trim();
-  };
+    `,
+    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
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var ColumnLayout = ({ left, right }) => {
+  const { styles } = useStyle();
+  const { sideAppVisible, sideAppSize, sideAppSelectedCard } = useChatUIContext();
+  return /* @__PURE__ */ jsxs("div", { className: `fina_chat ${styles.layout}`, children: [
+    /* @__PURE__ */ jsx4("div", { className: `${styles.mainContent} ${sideAppVisible ? "open" : ""}`, children: /* @__PURE__ */ jsx4("div", { className: `${styles.chat}`, children: left }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${styles.detailPanel} ${sideAppVisible ? `open ${sideAppSize || "large"}` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx4(Fragment, {}),
+          sideAppSelectedCard && sideAppVisible && /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4("div", { className: styles.detailContent, children: right }) })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/SideAppViewBrowser.tsx
+import {
+  CloseOutlined,
+  CompressOutlined,
+  ExpandOutlined,
+  FullscreenOutlined
+} from "@ant-design/icons";
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+import { Button, Space, Typography } from "antd";
+import { useState as useState9 } from "react";
+
+// src/components/GenUI/MDResponse.tsx
+import ReactMarkdown from "react-markdown";
+import { Prism } from "react-syntax-highlighter";
+import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import remarkGfm from "remark-gfm";
+import { useMemo as useMemo2, useRef as useRef5, useState as useState8 } from "react";
+import { createStyles as createStyles2 } from "antd-style";
+import rehypeRaw from "rehype-raw";
+
+// src/components/GenUI/MDMermaid.tsx
+import mermaid from "mermaid";
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { v4 } from "uuid";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MDMermaid = ({ children = [] }) => {
+  const domId = useRef4(`dom${v4()}`);
+  const code = String(children);
+  const target = useRef4(null);
+  const targetInternal = useRef4(null);
+  useEffect6(() => {
+    if (target.current && code) {
+      mermaid.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 }
+      });
+      mermaid.render(domId.current, code, target.current).then((result) => {
+        target.current.innerHTML = result.svg;
+      }).catch((error) => {
+        console.log(error);
+      });
+    }
+  }, [code]);
+  return /* @__PURE__ */ jsx5("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ jsx5("code", { id: domId.current, style: { display: "none" } }) });
+};
+
+// src/components/GenUI/MDResponse.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SyntaxHighlighter = Prism;
+var useStyles = createStyles2(({ 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 = useMemo2(
+    () => ({
+      components: {
+        a({ node, ...props }) {
+          if (embeddedLink) {
+            return /* @__PURE__ */ jsx6(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ jsx6("a", { ...props });
+        },
+        table({ node, ...props }) {
+          return /* @__PURE__ */ jsx6("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ jsx6("table", { className: styles.markdownTable, ...props }) });
+        },
+        th({ node, ...props }) {
+          return /* @__PURE__ */ jsx6("th", { className: styles.markdownTh, ...props });
+        },
+        td({ node, ...props }) {
+          return /* @__PURE__ */ jsx6("td", { className: styles.markdownTd, ...props });
+        },
+        tr({ node, ...props }) {
+          return /* @__PURE__ */ jsx6("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__ */ jsx6(
+                Element,
+                {
+                  context,
+                  interactive,
+                  component_key: language,
+                  data: childrenData
+                }
+              );
+            }
+            switch (language) {
+              case "mermaid":
+                return /* @__PURE__ */ jsx6(MDMermaid, { children });
+              default:
+                return /* @__PURE__ */ jsx6(
+                  SyntaxHighlighter,
+                  {
+                    ...rest,
+                    PreTag: "div",
+                    language,
+                    style: dark,
+                    children: String(children).replace(/\n$/, "")
+                  }
+                );
+            }
+          } else {
+            return /* @__PURE__ */ jsx6("code", { ...rest, className, children });
+          }
+        }
+      },
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeRaw]
+    }),
+    [userData, interactive, embeddedLink, styles]
+  );
+  return /* @__PURE__ */ jsx6("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx6(ReactMarkdown, { ...config, children: content }) });
+};
+var MDViewFormItem = ({ value }) => {
+  return /* @__PURE__ */ jsx6(MDResponse, { content: value || "" });
+};
+var IFrameCard = ({ src }) => {
+  const containerRef = useRef5(null);
+  const [width, setWidth] = useState8("640px");
+  const [height, setHeight] = useState8("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__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("img", { src, style: { width: "100%" } }) });
+  } else {
+    return /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("a", { href: src, target: "_black", children: src }) });
+  }
+};
+
+// src/components/GenUI/elements/confirm_feedback.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var { Text } = Typography;
+var ConfirmFeedback = ({
+  data,
+  interactive = true
+}) => {
+  const { message: message4, type, config, feedback, options } = data ?? {};
+  const { sendMessage } = useAgentChat();
+  const [clicked, setClicked] = useState9(false);
+  return /* @__PURE__ */ jsxs2(Space, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx7(MDResponse, { content: message4 }),
+    options ? /* @__PURE__ */ jsx7(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx7(
+      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__ */ jsxs2(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: [
+      /* @__PURE__ */ jsx7(
+        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__ */ jsx7(
+        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
+import { Table, Typography as Typography2, Button as Button2, Flex, Space as Space2 } from "antd";
+import { useState as useState10 } from "react";
+import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var { Text: Text2 } = Typography2;
+var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
+  const { dataSource, message: message4 } = data ?? {};
+  const [expandedRowKeys, setExpandedRowKeys] = useState10([]);
+  const { openSideApp } = useChatUIContext();
+  const processedData = dataSource?.map((item, index) => ({
+    ...item,
+    key: `${index}_${JSON.stringify(item).slice(0, 20)}`
+  })) || [];
+  const generateColumns = (dataItem) => {
+    if (!dataItem || typeof dataItem !== "object") {
+      return [];
+    }
+    return Object.keys(dataItem).filter((key) => key !== "key" && key !== "expandItem").map((key) => ({
+      title: formatColumnTitle(key),
+      dataIndex: key,
+      key,
+      width: 150,
+      sorter: (a, b) => {
+        const aVal = a[key];
+        const bVal = b[key];
+        if (aVal === null || aVal === void 0) return 1;
+        if (bVal === null || bVal === void 0) return -1;
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          return aVal - bVal;
+        }
+        const aDate = new Date(aVal);
+        const bDate = new Date(bVal);
+        if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
+          return aDate.getTime() - bDate.getTime();
+        }
+        return String(aVal).localeCompare(String(bVal), "zh-CN");
+      },
+      render: (value) => {
+        if (value === null || value === void 0) {
+          return "-";
+        }
+        if (typeof value === "object") {
+          return JSON.stringify(value);
+        }
+        return String(value);
+      }
+    }));
+  };
+  const formatColumnTitle = (key) => {
+    return key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (str) => str.toUpperCase()).trim();
+  };
   const columns = processedData.length > 0 ? generateColumns(processedData[0]) : [];
   const expandedRowRender = (record) => {
     const expandItem = record.expandItem;
     if (!expandItem) {
       return null;
     }
-    return /* @__PURE__ */ jsxs2("div", { style: { padding: "16px" }, children: [
-      expandItem.content && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: "16px" }, children: [
-        /* @__PURE__ */ jsx3(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
-        /* @__PURE__ */ jsx3(MDResponse, { content: expandItem.content })
+    return /* @__PURE__ */ jsxs3("div", { style: { padding: "16px" }, children: [
+      expandItem.content && /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsx8(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u8BE6\u7EC6\u4FE1\u606F:" }),
+        /* @__PURE__ */ jsx8(MDResponse, { content: expandItem.content })
       ] }),
-      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx3(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
-        /* @__PURE__ */ jsx3(
+      expandItem.dataSource && expandItem.dataSource.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx8(Text2, { strong: true, style: { display: "block", marginBottom: "8px" }, children: "\u5B50\u8868\u6570\u636E:" }),
+        /* @__PURE__ */ jsx8(
           GenericDataTable,
           {
             component_key: `nested_${record.key}`,
@@ -747,7 +1748,6 @@ var GenericDataTable = ({
               dataSource: expandItem.dataSource,
               message: void 0
             },
-            eventHandler,
             interactive
           }
         )
@@ -756,46 +1756,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__ */ jsx3(
+  return /* @__PURE__ */ jsx8(
     Table,
     {
       size: "small",
-      title: () => /* @__PURE__ */ jsxs2(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx3(Space2, { children: /* @__PURE__ */ jsx3(Text2, { strong: true, style: { fontSize: 16 }, children: message3 || "" }) }),
-        /* @__PURE__ */ jsxs2(Space2, { children: [
-          /* @__PURE__ */ jsx3(
+      title: () => /* @__PURE__ */ jsxs3(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx8(Space2, { children: /* @__PURE__ */ jsx8(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ jsxs3(Space2, { children: [
+          /* @__PURE__ */ jsx8(
             Button2,
             {
               type: "text",
               size: "small",
-              icon: /* @__PURE__ */ jsx3(DownloadOutlined, {}),
+              icon: /* @__PURE__ */ jsx8(DownloadOutlined, {}),
               onClick: exportToExcel,
               disabled: !processedData || processedData.length === 0,
               children: "\u5BFC\u51FAExcel"
             }
           ),
-          eventHandler && default_open_in_side_app && /* @__PURE__ */ jsxs2(
+          default_open_in_side_app && /* @__PURE__ */ jsxs3(
             Button2,
             {
               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__ */ jsx3(ExpandAltOutlined, {}),
+                /* @__PURE__ */ jsx8(ExpandAltOutlined, {}),
                 "\u5C55\u5F00"
               ]
             }
@@ -824,9 +1821,9 @@ var GenericDataTable = ({
 };
 
 // src/components/GenUI/elements/generic_data_table_side_app.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var GenericDataTableSideApp = (props) => {
-  return /* @__PURE__ */ jsx4(GenericDataTable, { ...props, default_open_in_side_app: false });
+  return /* @__PURE__ */ jsx9(GenericDataTable, { ...props, default_open_in_side_app: false });
 };
 
 // src/components/GenUI/elements/ToolCall.tsx
@@ -840,11 +1837,11 @@ import {
 
 // src/components/GenUI/elements/ToolCard.tsx
 import { Card as Card2, Typography as Typography3, Space as Space3, Tag } from "antd";
-import { createStyles } from "antd-style";
+import { createStyles as createStyles3 } from "antd-style";
 import { ToolOutlined, CodeOutlined } from "@ant-design/icons";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var { Text: Text3, Title } = Typography3;
-var useStyle = createStyles(({ token, css }) => ({
+var useStyle2 = createStyles3(({ token, css }) => ({
   card: css`
     max-width: 500px;
     background: linear-gradient(
@@ -908,12 +1905,11 @@ var useStyle = createStyles(({ token, css }) => ({
 var ToolCard = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
-  const { styles } = useStyle();
+  const { styles } = useStyle2();
   if (!data || !data.name) {
-    return /* @__PURE__ */ jsx5(Card2, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ jsx5(Text3, { type: "secondary", children: "Invalid tool data" }) });
+    return /* @__PURE__ */ jsx10(Card2, { size: "small", className: styles.card, bordered: false, children: /* @__PURE__ */ jsx10(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(" ");
@@ -956,7 +1952,7 @@ var ToolCard = ({
     return typeof value;
   };
   const hasParameters = data.parameters && Object.keys(data.parameters).length > 0;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     Card2,
     {
       size: "small",
@@ -964,13 +1960,13 @@ var ToolCard = ({
       bordered: false,
       bodyStyle: { padding: "16px" },
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: styles.header, children: [
-          /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
-            /* @__PURE__ */ jsx5(ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
-            /* @__PURE__ */ jsx5(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
-            data.type && /* @__PURE__ */ jsx5(Tag, { color: "blue", className: styles.typeTag, children: data.type })
+        /* @__PURE__ */ jsxs4("div", { className: styles.header, children: [
+          /* @__PURE__ */ jsxs4(Space3, { align: "center", children: [
+            /* @__PURE__ */ jsx10(ToolOutlined, { style: { color: "#1890ff", fontSize: "18px" } }),
+            /* @__PURE__ */ jsx10(Title, { level: 5, className: styles.toolName, style: { margin: 0 }, children: formatToolName(data.name) }),
+            data.type && /* @__PURE__ */ jsx10(Tag, { color: "blue", className: styles.typeTag, children: data.type })
           ] }),
-          data.description && /* @__PURE__ */ jsx5(
+          data.description && /* @__PURE__ */ jsx10(
             Text3,
             {
               type: "secondary",
@@ -979,19 +1975,19 @@ var ToolCard = ({
             }
           )
         ] }),
-        hasParameters ? /* @__PURE__ */ jsxs3("div", { children: [
-          /* @__PURE__ */ jsxs3(Space3, { align: "center", style: { marginBottom: "12px" }, children: [
-            /* @__PURE__ */ jsx5(CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
-            /* @__PURE__ */ jsxs3(Text3, { strong: true, style: { fontSize: "14px" }, children: [
+        hasParameters ? /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsxs4(Space3, { align: "center", style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ jsx10(CodeOutlined, { style: { color: "#52c41a", fontSize: "14px" } }),
+            /* @__PURE__ */ jsxs4(Text3, { strong: true, style: { fontSize: "14px" }, children: [
               "Parameters (",
               Object.keys(data.parameters).length,
               ")"
             ] })
           ] }),
-          /* @__PURE__ */ jsx5("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ jsxs3("div", { className: styles.parameterItem, children: [
-            /* @__PURE__ */ jsx5("div", { className: styles.parameterName, children: /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
-              /* @__PURE__ */ jsx5("span", { children: key }),
-              /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx10("div", { className: styles.parameterGrid, children: Object.entries(data.parameters).map(([key, value], index) => /* @__PURE__ */ jsxs4("div", { className: styles.parameterItem, children: [
+            /* @__PURE__ */ jsx10("div", { className: styles.parameterName, children: /* @__PURE__ */ jsxs4(Space3, { align: "center", children: [
+              /* @__PURE__ */ jsx10("span", { children: key }),
+              /* @__PURE__ */ jsx10(
                 Tag,
                 {
                   color: getTypeColor(value),
@@ -1000,11 +1996,11 @@ var ToolCard = ({
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx5("div", { className: styles.parameterValue, children: formatParameterValue(value) })
+            /* @__PURE__ */ jsx10("div", { className: styles.parameterValue, children: formatParameterValue(value) })
           ] }, index)) })
-        ] }) : /* @__PURE__ */ jsxs3(Space3, { align: "center", children: [
-          /* @__PURE__ */ jsx5(CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
-          /* @__PURE__ */ jsx5(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
+        ] }) : /* @__PURE__ */ jsxs4(Space3, { align: "center", children: [
+          /* @__PURE__ */ jsx10(CodeOutlined, { style: { color: "#d9d9d9", fontSize: "14px" } }),
+          /* @__PURE__ */ jsx10(Text3, { type: "secondary", style: { fontSize: "13px" }, children: "No parameters" })
         ] })
       ]
     }
@@ -1012,18 +2008,18 @@ var ToolCard = ({
 };
 
 // src/components/GenUI/elements/ToolCall.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function getStatusIcon(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx6(CheckCircleOutlined, { style: { color: "#52c41a" } });
+      return /* @__PURE__ */ jsx11(CheckCircleOutlined, { style: { color: "#52c41a" } });
     case "error":
-      return /* @__PURE__ */ jsx6(InfoCircleOutlined, { style: { color: "#ff4d4f" } });
+      return /* @__PURE__ */ jsx11(InfoCircleOutlined, { style: { color: "#ff4d4f" } });
     default:
-      return /* @__PURE__ */ jsx6(LoadingOutlined, { style: { color: "#1890ff" } });
+      return /* @__PURE__ */ jsx11(LoadingOutlined, { style: { color: "#1890ff" } });
   }
 }
-var ToolCall = ({ data, eventHandler }) => {
+var ToolCall = ({ data }) => {
   const toolCallData = data;
   const formatToolName = (name) => {
     if (!name) {
@@ -1043,9 +2039,9 @@ var ToolCall = ({ data, eventHandler }) => {
       return "Error parsing args";
     }
   };
-  const header = /* @__PURE__ */ jsxs4(Flex2, { align: "center", wrap: "wrap", children: [
-    /* @__PURE__ */ jsx6(Typography4.Text, { strong: true, children: formatToolName(toolCallData.name) }),
-    /* @__PURE__ */ jsx6(
+  const header = /* @__PURE__ */ jsxs5(Flex2, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx11(Typography4.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ jsx11(
       Typography4.Text,
       {
         type: "secondary",
@@ -1059,19 +2055,17 @@ var ToolCall = ({ data, eventHandler }) => {
     parameters: toolCallData.args,
     type: "tool_call"
   };
-  const content = /* @__PURE__ */ jsxs4("div", { style: { marginTop: "8px" }, children: [
-    /* @__PURE__ */ jsx6(
+  const content = /* @__PURE__ */ jsxs5("div", { style: { marginTop: "8px" }, children: [
+    /* @__PURE__ */ jsx11(
       ToolCard,
       {
         data: toolCardData,
         component_key: `${toolCallData.id}-params`,
-        eventHandler: () => {
-        },
         interactive: false
       }
     ),
-    toolCallData.response && /* @__PURE__ */ jsxs4("div", { style: { marginTop: "12px" }, children: [
-      /* @__PURE__ */ jsx6(
+    toolCallData.response && /* @__PURE__ */ jsxs5("div", { style: { marginTop: "12px" }, children: [
+      /* @__PURE__ */ jsx11(
         Typography4.Text,
         {
           strong: true,
@@ -1079,7 +2073,7 @@ var ToolCall = ({ data, eventHandler }) => {
           children: "Response:"
         }
       ),
-      /* @__PURE__ */ jsx6(MDResponse, { content: toolCallData.response })
+      /* @__PURE__ */ jsx11(MDResponse, { content: toolCallData.response })
     ] })
   ] });
   const expandIcon = ({ isActive }) => {
@@ -1089,18 +2083,17 @@ var ToolCall = ({ data, eventHandler }) => {
   if (toolCallElement) {
     return toolCallElement.card_view({
       data: toolCallData,
-      component_key: toolCallData.id,
-      eventHandler
+      component_key: toolCallData.id
     });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx11(
     Collapse,
     {
       size: "small",
       bordered: false,
       defaultActiveKey: [],
       expandIcon,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx11(
         CollapsePanel,
         {
           header,
@@ -1115,15 +2108,15 @@ var ToolCall = ({ data, eventHandler }) => {
 
 // src/components/GenUI/elements/Todo.tsx
 import { Card as Card3, List, Typography as Typography5, Space as Space5 } from "antd";
-import { createStyles as createStyles2 } from "antd-style";
+import { createStyles as createStyles4 } from "antd-style";
 import {
   ArrowRightOutlined,
   CheckCircleOutlined as CheckCircleOutlined2,
   ClockCircleOutlined
 } from "@ant-design/icons";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var { Text: Text4 } = Typography5;
-var useStyle2 = createStyles2(({ token, css }) => ({
+var useStyle3 = createStyles4(({ token, css }) => ({
   card: css`
     max-width: 1200px;
     background: linear-gradient(
@@ -1152,18 +2145,17 @@ var useStyle2 = createStyles2(({ token, css }) => ({
 var Todo = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
-  const { styles } = useStyle2();
-  const getStatusIcon3 = (status) => {
+  const { styles } = useStyle3();
+  const getStatusIcon2 = (status) => {
     switch (status) {
       case "completed":
-        return /* @__PURE__ */ jsx7(CheckCircleOutlined2, { style: { color: "#52c41a" } });
+        return /* @__PURE__ */ jsx12(CheckCircleOutlined2, { style: { color: "#52c41a" } });
       case "in_progress":
-        return /* @__PURE__ */ jsx7(ArrowRightOutlined, { style: { fontWeight: "500" } });
+        return /* @__PURE__ */ jsx12(ArrowRightOutlined, { style: { fontWeight: "500" } });
       case "pending":
-        return /* @__PURE__ */ jsx7(ClockCircleOutlined, { style: { color: "gray" } });
+        return /* @__PURE__ */ jsx12(ClockCircleOutlined, { style: { color: "gray" } });
       default:
         return null;
     }
@@ -1205,35 +2197,35 @@ var Todo = ({
     }
   };
   if (!data || !Array.isArray(data)) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx12(
       Card3,
       {
         size: "small",
         className: `shadow-sm ${styles.card}`,
         bordered: false,
-        children: /* @__PURE__ */ jsx7(Text4, { type: "secondary", children: "No todo items available" })
+        children: /* @__PURE__ */ jsx12(Text4, { type: "secondary", children: "No todo items available" })
       }
     );
   }
-  return /* @__PURE__ */ jsx7(Card3, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs5(Space5, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx12(Card3, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs6(Space5, { direction: "vertical", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx12(
       List,
       {
         size: "small",
         dataSource: data,
-        renderItem: (item, index) => /* @__PURE__ */ jsx7(
+        renderItem: (item, index) => /* @__PURE__ */ jsx12(
           List.Item,
           {
             className: `${styles.todoItem} ${getItemClassName(item.status)}`,
-            children: /* @__PURE__ */ jsxs5(Space5, { align: "center", style: { width: "100%" }, children: [
-              getStatusIcon3(item.status),
-              /* @__PURE__ */ jsx7(Text4, { style: { flex: 1 }, children: item.content })
+            children: /* @__PURE__ */ jsxs6(Space5, { align: "center", style: { width: "100%" }, children: [
+              getStatusIcon2(item.status),
+              /* @__PURE__ */ jsx12(Text4, { style: { flex: 1 }, children: item.content })
             ] })
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs5(Text4, { type: "secondary", style: { fontSize: 12 }, children: [
+    /* @__PURE__ */ jsxs6(Text4, { type: "secondary", style: { fontSize: 12 }, children: [
       "Total items: ",
       data.length,
       " | Completed:",
@@ -1252,12 +2244,11 @@ var Todo = ({
 import { Space as Space6, Collapse as Collapse2, Typography as Typography6 } from "antd";
 import { UnorderedListOutlined } from "@ant-design/icons";
 import CollapsePanel2 from "antd/es/collapse/CollapsePanel";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var { Text: Text5 } = Typography6;
 var WriteTodos = ({
   data,
   component_key,
-  eventHandler,
   interactive = true
 }) => {
   const toolCallData = data;
@@ -1267,11 +2258,11 @@ var WriteTodos = ({
     (item) => item.status === "completed"
   ).length;
   const expandIcon = () => {
-    return /* @__PURE__ */ jsx8(UnorderedListOutlined, {});
+    return /* @__PURE__ */ jsx13(UnorderedListOutlined, {});
   };
-  const header = /* @__PURE__ */ jsxs6(Space6, { children: [
-    /* @__PURE__ */ jsx8(Text5, { strong: true, children: "Todos" }),
-    /* @__PURE__ */ jsxs6(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
+  const header = /* @__PURE__ */ jsxs7(Space6, { children: [
+    /* @__PURE__ */ jsx13(Text5, { strong: true, children: "Todos" }),
+    /* @__PURE__ */ jsxs7(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
       completedCount,
       "/",
       totalCount,
@@ -1281,24 +2272,23 @@ var WriteTodos = ({
   if (!toolCallData) {
     return null;
   }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx13(
     Collapse2,
     {
       size: "small",
       bordered: false,
       defaultActiveKey: [toolCallData.id],
       expandIcon,
-      children: /* @__PURE__ */ jsx8(
+      children: /* @__PURE__ */ jsx13(
         CollapsePanel2,
         {
           header,
           style: { minWidth: 400 },
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx13(
             Todo,
             {
               data: data.args.todos,
               component_key,
-              eventHandler,
               interactive
             }
           )
@@ -1310,7 +2300,7 @@ var WriteTodos = ({
 };
 
 // src/components/GenUI/FileExplorer.tsx
-import { useState as useState7, useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { useState as useState11, useEffect as useEffect7, useMemo as useMemo3 } from "react";
 import { Splitter, Tree, Empty, Button as Button3, Tooltip, message } from "antd";
 import {
   FolderOutlined,
@@ -1319,7 +2309,7 @@ import {
   DownloadOutlined as DownloadOutlined2,
   CheckOutlined
 } from "@ant-design/icons";
-import { createStyles as createStyles3 } from "antd-style";
+import { createStyles as createStyles5 } from "antd-style";
 
 // src/components/GenUI/elements/getFileIcon.tsx
 import {
@@ -1331,41 +2321,41 @@ import {
   FileUnknownOutlined,
   Html5Outlined
 } from "@ant-design/icons";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "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__ */ jsx9(CodeOutlined2, { style: { ...iconStyle, color: "#3178c6" } });
+      return /* @__PURE__ */ jsx14(CodeOutlined2, { style: { ...iconStyle, color: "#3178c6" } });
     case "js":
     case "jsx":
-      return /* @__PURE__ */ jsx9(CodeOutlined2, { style: { ...iconStyle, color: "#f7df1e" } });
+      return /* @__PURE__ */ jsx14(CodeOutlined2, { style: { ...iconStyle, color: "#f7df1e" } });
     case "html":
-      return /* @__PURE__ */ jsx9(Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
+      return /* @__PURE__ */ jsx14(Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
     case "css":
     case "less":
     case "scss":
-      return /* @__PURE__ */ jsx9(FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
+      return /* @__PURE__ */ jsx14(FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
     case "md":
-      return /* @__PURE__ */ jsx9(FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
+      return /* @__PURE__ */ jsx14(FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
     case "json":
-      return /* @__PURE__ */ jsx9(FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
+      return /* @__PURE__ */ jsx14(FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
     case "png":
     case "jpg":
     case "jpeg":
     case "gif":
     case "svg":
-      return /* @__PURE__ */ jsx9(FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
+      return /* @__PURE__ */ jsx14(FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
     default:
-      return /* @__PURE__ */ jsx9(FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
+      return /* @__PURE__ */ jsx14(FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
   }
 };
 
 // src/components/GenUI/FileExplorer.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var useStyles = createStyles3(({ token, css }) => ({
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var useStyles2 = createStyles5(({ token, css }) => ({
   container: css`
     height: 100%;
     background: ${token.colorBgContainer};
@@ -1496,7 +2486,7 @@ var getFolderIcon = (expanded) => {
     color: "#dcb67a",
     verticalAlign: "middle"
   };
-  return expanded ? /* @__PURE__ */ jsx10(FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ jsx10(FolderOutlined, { style: iconStyle });
+  return expanded ? /* @__PURE__ */ jsx15(FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ jsx15(FolderOutlined, { style: iconStyle });
 };
 var sortTreeNodes = (nodes) => {
   return nodes.sort((a, b) => {
@@ -1521,7 +2511,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__ */ jsx10(
+        const title = part === "" && index === 0 ? /* @__PURE__ */ jsx15(
           "span",
           {
             style: {
@@ -1551,23 +2541,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] = useState7([]);
-  const [selectedKey, setSelectedKey] = useState7("");
-  const [expandedKeys, setExpandedKeys] = useState7([]);
-  const [copied, setCopied] = useState7(false);
-  useEffect4(() => {
+  const { styles, cx } = useStyles2();
+  const [fileList, setFileList] = useState11([]);
+  const [selectedKey, setSelectedKey] = useState11("");
+  const [expandedKeys, setExpandedKeys] = useState11([]);
+  const [copied, setCopied] = useState11(false);
+  useEffect7(() => {
     if (copied) {
       const timer = setTimeout(() => setCopied(false), 2e3);
       return () => clearTimeout(timer);
     }
   }, [copied]);
-  useEffect4(() => {
+  useEffect7(() => {
     let list = [];
     if (Array.isArray(files)) {
       list = files;
@@ -1583,11 +2572,11 @@ var FileExplorer = ({
       setSelectedKey(list[0].name);
     }
   }, [files]);
-  const treeData = useMemo2(
+  const treeData = useMemo3(
     () => buildTreeData(fileList, expandedKeys),
     [fileList, expandedKeys]
   );
-  useEffect4(() => {
+  useEffect7(() => {
     if (treeData.length > 0 && expandedKeys.length === 0) {
       const getAllKeys = (nodes) => {
         let keys = [];
@@ -1604,7 +2593,7 @@ var FileExplorer = ({
       setExpandedKeys(getAllKeys(treeData));
     }
   }, [treeData.length]);
-  const selectedFile = useMemo2(() => {
+  const selectedFile = useMemo3(() => {
     return fileList.find((f) => f.name === selectedKey);
   }, [fileList, selectedKey]);
   const handleCopy = () => {
@@ -1631,7 +2620,7 @@ var FileExplorer = ({
   };
   const renderContent = () => {
     if (!selectedFile) {
-      return /* @__PURE__ */ jsx10("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx15(
         Empty,
         {
           description: "Select a file to preview",
@@ -1640,38 +2629,38 @@ var FileExplorer = ({
       ) });
     }
     const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         style: { minHeight: "100%", display: "flex", flexDirection: "column" },
         children: [
-          /* @__PURE__ */ jsxs7("div", { className: styles.header, children: [
-            /* @__PURE__ */ jsx10(Tooltip, { title: "Copy Content", children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs8("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsx15(Tooltip, { title: "Copy Content", children: /* @__PURE__ */ jsx15(
               Button3,
               {
                 type: "text",
-                icon: copied ? /* @__PURE__ */ jsx10(CheckOutlined, {}) : /* @__PURE__ */ jsx10(CopyOutlined, {}),
+                icon: copied ? /* @__PURE__ */ jsx15(CheckOutlined, {}) : /* @__PURE__ */ jsx15(CopyOutlined, {}),
                 onClick: handleCopy,
                 size: "small"
               }
             ) }),
-            /* @__PURE__ */ jsx10(Tooltip, { title: "Download File", children: /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx15(Tooltip, { title: "Download File", children: /* @__PURE__ */ jsx15(
               Button3,
               {
                 type: "text",
-                icon: /* @__PURE__ */ jsx10(DownloadOutlined2, {}),
+                icon: /* @__PURE__ */ jsx15(DownloadOutlined2, {}),
                 onClick: handleDownload,
                 size: "small"
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx10("div", { className: styles.contentBody, children: /* @__PURE__ */ jsx10(MDResponse, { content }) })
+          /* @__PURE__ */ jsx15("div", { className: styles.contentBody, children: /* @__PURE__ */ jsx15(MDResponse, { content }) })
         ]
       }
     );
   };
-  return /* @__PURE__ */ jsx10("div", { className: styles.container, children: /* @__PURE__ */ jsxs7(Splitter, { className: styles.splitter, children: [
-    /* @__PURE__ */ jsx10(Splitter.Panel, { defaultSize: "25%", min: "15%", max: "40%", children: /* @__PURE__ */ jsx10("div", { className: styles.leftPanel, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx15("div", { className: styles.container, children: /* @__PURE__ */ jsxs8(Splitter, { className: styles.splitter, children: [
+    /* @__PURE__ */ jsx15(Splitter.Panel, { defaultSize: "25%", min: "15%", max: "40%", children: /* @__PURE__ */ jsx15("div", { className: styles.leftPanel, children: /* @__PURE__ */ jsx15(
       Tree,
       {
         showIcon: true,
@@ -1709,12 +2698,12 @@ var FileExplorer = ({
         }
       }
     ) }) }),
-    /* @__PURE__ */ jsx10(Splitter.Panel, { children: /* @__PURE__ */ jsx10("div", { className: styles.rightPanel, children: renderContent() }) })
+    /* @__PURE__ */ jsx15(Splitter.Panel, { children: /* @__PURE__ */ jsx15("div", { className: styles.rightPanel, children: renderContent() }) })
   ] }) });
 };
 
 // src/components/GenUI/elements/attachments_card.tsx
-import { Attachments } from "@ant-design/x";
+import { FileCard } from "@ant-design/x";
 import {
   Card as Card4,
   Flex as Flex3,
@@ -1725,18 +2714,18 @@ import {
   Button as Button4
 } from "antd";
 import dayjs from "dayjs";
-import { useState as useState8 } from "react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var AttachmentsCard = ({
   data,
-  eventHandler,
   component_key,
   size = "medium",
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text9 } = Typography7;
-  const [showAll, setShowAll] = useState8(false);
+  const { Text: Text11 } = Typography7;
+  const [showAll, setShowAll] = useState12(false);
+  const { openSideApp } = useChatUIContext();
   const getStyles = () => {
     switch (size) {
       case "small":
@@ -1761,14 +2750,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) {
@@ -1797,7 +2783,7 @@ var AttachmentsCard = ({
   };
   const DownloadButton = ({ item }) => {
     if (!showDownloadButton) return null;
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         style: {
@@ -1811,8 +2797,8 @@ var AttachmentsCard = ({
       }
     );
   };
-  const renderFileDescription = (item) => /* @__PURE__ */ jsx11(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx11(Space7, { children: /* @__PURE__ */ jsx11(
-    Text9,
+  const renderFileDescription = (item) => /* @__PURE__ */ jsx16(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx16(Space7, { children: /* @__PURE__ */ jsx16(
+    Text11,
     {
       type: "secondary",
       style: {
@@ -1825,34 +2811,30 @@ var AttachmentsCard = ({
     const displayData2 = data || [];
     const shouldShowViewMore2 = displayData2.length > 4;
     const visibleData2 = showAll ? displayData2 : displayData2.slice(0, 4);
-    return /* @__PURE__ */ jsxs8(Flex3, { vertical: true, gap: "small", children: [
-      /* @__PURE__ */ jsx11(Row, { gutter: [8, 8], children: visibleData2.map((item) => /* @__PURE__ */ jsx11(Col, { span: 24 / columns, children: /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsxs9(Flex3, { vertical: true, gap: "small", children: [
+      /* @__PURE__ */ jsx16(Row, { gutter: [8, 8], children: visibleData2.map((item) => /* @__PURE__ */ jsx16(Col, { span: 24 / columns, children: /* @__PURE__ */ jsx16(
         "div",
         {
           onClick: (evt) => {
             evt.stopPropagation();
             handleItemClick(item);
           },
-          children: /* @__PURE__ */ jsxs8(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
-            /* @__PURE__ */ jsx11(DownloadButton, { item }),
-            /* @__PURE__ */ jsx11(
-              Attachments.FileCard,
+          children: /* @__PURE__ */ jsxs9(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
+            /* @__PURE__ */ jsx16(DownloadButton, { item }),
+            /* @__PURE__ */ jsx16(
+              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__ */ jsx11(
+            item.files && /* @__PURE__ */ jsx16(
               AttachmentsCard,
               {
                 data: item.files,
                 component_key: `${component_key}_${item.id}`,
-                eventHandler,
                 size: "small",
                 columns: 2,
                 showDownloadButton
@@ -1861,7 +2843,7 @@ var AttachmentsCard = ({
           ] })
         }
       ) }, item.id)) }),
-      shouldShowViewMore2 && /* @__PURE__ */ jsx11(
+      shouldShowViewMore2 && /* @__PURE__ */ jsx16(
         Button4,
         {
           type: "link",
@@ -1875,33 +2857,29 @@ var AttachmentsCard = ({
   const displayData = data || [];
   const shouldShowViewMore = displayData.length > 4;
   const visibleData = showAll ? displayData : displayData.slice(0, 4);
-  return /* @__PURE__ */ jsxs8(Flex3, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
-    visibleData.map((item) => /* @__PURE__ */ jsx11("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ jsxs8(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
-      /* @__PURE__ */ jsx11(DownloadButton, { item }),
-      /* @__PURE__ */ jsx11(
-        Attachments.FileCard,
+  return /* @__PURE__ */ jsxs9(Flex3, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
+    visibleData.map((item) => /* @__PURE__ */ jsx16("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ jsxs9(Card4, { size: styles.cardSize, style: getCardStyle(item), children: [
+      /* @__PURE__ */ jsx16(DownloadButton, { item }),
+      /* @__PURE__ */ jsx16(
+        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__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs8(Text9, { type: "secondary", style: { fontSize: "12px" }, children: [
+      item.files && /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
+        /* @__PURE__ */ jsxs9(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx16(
           AttachmentsCard,
           {
             data: item.files,
             component_key: `${component_key}_${item.id}`,
-            eventHandler,
             size: "small",
             columns: 2,
             showDownloadButton
@@ -1909,7 +2887,7 @@ var AttachmentsCard = ({
         )
       ] })
     ] }) }, item.id)),
-    shouldShowViewMore && /* @__PURE__ */ jsx11(
+    shouldShowViewMore && /* @__PURE__ */ jsx16(
       Button4,
       {
         type: "link",
@@ -1927,18 +2905,17 @@ var AttachmentsCard = ({
 
 // src/components/GenUI/elements/attachments_viewer_side_app.tsx
 import { Button as Button5, Empty as Empty2, Skeleton } from "antd";
-import { useState as useState9 } from "react";
-import { Fragment, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function AttachmentsViewerSideApp({
   data,
-  eventHandler,
   component_key
 }) {
-  const [fileUri, setFileUri] = useState9();
-  const [loading, setLoading] = useState9(true);
+  const [fileUri, setFileUri] = useState13();
+  const [loading, setLoading] = useState13(true);
   const { file_id } = data ?? {};
   if (loading) {
-    return /* @__PURE__ */ jsx12(Skeleton, { active: true });
+    return /* @__PURE__ */ jsx17(Skeleton, { active: true });
   }
   const canPreviewInIframe = (fileName) => {
     if (!fileName) return false;
@@ -1973,18 +2950,18 @@ function AttachmentsViewerSideApp({
     return previewableExtensions.includes(extension);
   };
   const isPreviewable = fileUri?.fileName ? canPreviewInIframe(fileUri.fileName) : false;
-  return isPreviewable ? /* @__PURE__ */ jsx12(
+  return isPreviewable ? /* @__PURE__ */ jsx17(
     "iframe",
     {
       style: { width: "100%", height: "100%", border: 0 },
       src: fileUri?.url
     }
-  ) : /* @__PURE__ */ jsx12(
+  ) : /* @__PURE__ */ jsx17(
     Empty2,
     {
-      description: /* @__PURE__ */ jsxs9(Fragment, { children: [
-        /* @__PURE__ */ jsx12("div", { children: "\u6682\u65F6\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u67E5\u770B\u3002" }),
-        /* @__PURE__ */ jsxs9(Button5, { type: "link", href: fileUri?.url, download: fileUri?.fileName, children: [
+      description: /* @__PURE__ */ jsxs10(Fragment2, { children: [
+        /* @__PURE__ */ jsx17("div", { children: "\u6682\u65F6\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u67E5\u770B\u3002" }),
+        /* @__PURE__ */ jsxs10(Button5, { type: "link", href: fileUri?.url, download: fileUri?.fileName, children: [
           "\u4E0B\u8F7D",
           fileUri?.fileName
         ] })
@@ -1998,15 +2975,15 @@ function AttachmentsViewerSideApp({
 import { Button as Button6, Space as Space8, Typography as Typography8 } from "antd";
 
 // src/components/GenUI/elements/ContentPreviewCollapse.tsx
-import { useRef as useRef3, useState as useState10, useEffect as useEffect6, useCallback as useCallback5 } from "react";
+import { useRef as useRef6, useState as useState14, useEffect as useEffect9, useCallback as useCallback7 } from "react";
 import { Collapse as Collapse4 } from "antd";
-import { createStyles as createStyles4 } from "antd-style";
+import { createStyles as createStyles6 } from "antd-style";
 import { DownOutlined as DownOutlined2, UpOutlined } from "@ant-design/icons";
 import CollapsePanel3 from "antd/es/collapse/CollapsePanel";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_COLLAPSED_MAX_HEIGHT = 180;
 var DEFAULT_EXPANDED_MAX_HEIGHT = 500;
-var useStyle3 = createStyles4(
+var useStyle4 = createStyles6(
   ({ css }, { showShadow }) => ({
     collapse: css`
       .ant-collapse-header {
@@ -2068,18 +3045,18 @@ var ContentPreviewCollapse = ({
   showAllText = "Show all content",
   showLessText = "Show less"
 }) => {
-  const [showFullContent, setShowFullContent] = useState10(false);
-  const [isOverflowing, setIsOverflowing] = useState10(false);
-  const contentRef = useRef3(null);
+  const [showFullContent, setShowFullContent] = useState14(false);
+  const [isOverflowing, setIsOverflowing] = useState14(false);
+  const contentRef = useRef6(null);
   const showShadow = isOverflowing && !showFullContent;
-  const { styles, cx } = useStyle3({ showShadow });
-  const checkOverflow = useCallback5(() => {
+  const { styles, cx } = useStyle4({ showShadow });
+  const checkOverflow = useCallback7(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
       setIsOverflowing(scrollHeight > collapsedMaxHeight);
     }
   }, [collapsedMaxHeight]);
-  useEffect6(() => {
+  useEffect9(() => {
     const element = contentRef.current;
     if (!element) return;
     checkOverflow();
@@ -2095,7 +3072,7 @@ var ContentPreviewCollapse = ({
     e.stopPropagation();
     setShowFullContent(!showFullContent);
   };
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx18(
     Collapse4,
     {
       className: styles.collapse,
@@ -2103,29 +3080,29 @@ var ContentPreviewCollapse = ({
       bordered: false,
       defaultActiveKey: defaultExpanded ? [panelKey] : [],
       expandIcon,
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs11(
         CollapsePanel3,
         {
           header,
           extra,
           style: { minWidth },
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx18(
               "div",
               {
                 className: cx(styles.contentContainer, showFullContent && "expanded"),
                 style: {
                   maxHeight: showFullContent ? expandedMaxHeight : collapsedMaxHeight
                 },
-                children: /* @__PURE__ */ jsx13("div", { ref: contentRef, className: styles.content, children })
+                children: /* @__PURE__ */ jsx18("div", { ref: contentRef, className: styles.content, children })
               }
             ),
-            isOverflowing && /* @__PURE__ */ jsx13("div", { className: styles.toggleButton, onClick: handleToggleContent, children: showFullContent ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
-              /* @__PURE__ */ jsx13(UpOutlined, { style: { fontSize: 10 } }),
-              /* @__PURE__ */ jsx13("span", { children: showLessText })
-            ] }) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
-              /* @__PURE__ */ jsx13(DownOutlined2, { style: { fontSize: 10 } }),
-              /* @__PURE__ */ jsx13("span", { children: showAllText })
+            isOverflowing && /* @__PURE__ */ jsx18("div", { className: styles.toggleButton, onClick: handleToggleContent, children: showFullContent ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+              /* @__PURE__ */ jsx18(UpOutlined, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ jsx18("span", { children: showLessText })
+            ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+              /* @__PURE__ */ jsx18(DownOutlined2, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ jsx18("span", { children: showAllText })
             ] }) })
           ]
         },
@@ -2136,561 +3113,408 @@ var ContentPreviewCollapse = ({
 };
 
 // src/components/GenUI/elements/WriteFile.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var { Text: Text6 } = Typography8;
 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__ */ jsxs11(Space8, { children: [
-    /* @__PURE__ */ jsx14(Text6, { strong: true, children: "New" }),
-    /* @__PURE__ */ jsx14(Text6, { title: file_path, children: file_path?.split("/")?.pop() || "" })
+  const header = /* @__PURE__ */ jsxs12(Space8, { children: [
+    /* @__PURE__ */ jsx19(Text6, { strong: true, children: "New" }),
+    /* @__PURE__ */ jsx19(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__ */ jsx14(
+  return /* @__PURE__ */ jsx19(
     ContentPreviewCollapse,
     {
       panelKey: toolCallData.id,
       header,
       expandIcon,
-      extra: /* @__PURE__ */ jsx14(
+      extra: /* @__PURE__ */ jsx19(
         Button6,
         {
           type: "link",
           size: "small",
           onClick: (evt) => {
-            evt.stopPropagation();
-            handleItemClick(toolCallData);
-          },
-          children: "Diff View"
-        }
-      ),
-      children: /* @__PURE__ */ jsx14(MDResponse, { content })
-    }
-  );
-};
-
-// src/components/GenUI/elements/file_content_diff_view.tsx
-import ReactDiffViewer from "@alexbruf/react-diff-viewer";
-import "@alexbruf/react-diff-viewer/index.css";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var FileContentDiffView = ({
-  data,
-  eventHandler,
-  interactive = true,
-  default_open_in_side_app = true
-}) => {
-  const { old_code, new_code } = data;
-  return /* @__PURE__ */ jsx15(
-    ReactDiffViewer,
-    {
-      oldValue: old_code,
-      newValue: new_code,
-      splitView: false
-    }
-  );
-};
-
-// src/components/GenUI/elements/EditFile.tsx
-import { Button as Button7, Space as Space9, Typography as Typography9 } from "antd";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var { Text: Text7 } = Typography9;
-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__ */ jsxs12(Space9, { children: [
-    /* @__PURE__ */ jsx16(Text7, { strong: true, children: "Edit" }),
-    /* @__PURE__ */ jsx16(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__ */ jsx16(
-    ContentPreviewCollapse,
-    {
-      panelKey: toolCallData.id,
-      header,
-      expandIcon,
-      extra: /* @__PURE__ */ jsx16(
-        Button7,
-        {
-          type: "link",
-          size: "small",
-          onClick: (evt) => {
-            evt.stopPropagation();
-            handleItemClick(toolCallData);
-          },
-          children: "Diff View"
-        }
-      ),
-      children: /* @__PURE__ */ jsx16(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];
-  }
-  return null;
-};
-var regsiterElement = (language, ElementMeta) => {
-  console.log("regsiterElement", language, ElementMeta);
-  elements[language] = ElementMeta;
-  return ElementMeta;
-};
-
-// src/components/GenUI/MDMermaid.tsx
-import mermaid from "mermaid";
-import { useEffect as useEffect7, useRef as useRef4 } from "react";
-import { v4 } from "uuid";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var MDMermaid = ({ children = [] }) => {
-  const domId = useRef4(`dom${v4()}`);
-  const code = String(children);
-  const target = useRef4(null);
-  const targetInternal = useRef4(null);
-  useEffect7(() => {
-    if (target.current && code) {
-      mermaid.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 }
-      });
-      mermaid.render(domId.current, code, target.current).then((result) => {
-        target.current.innerHTML = result.svg;
-      }).catch((error) => {
-        console.log(error);
-      });
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "Diff View"
+        }
+      ),
+      children: /* @__PURE__ */ jsx19(MDResponse, { content })
     }
-  }, [code]);
-  return /* @__PURE__ */ jsx17("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ jsx17("code", { id: domId.current, style: { display: "none" } }) });
+  );
 };
 
-// src/components/GenUI/MDResponse.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var SyntaxHighlighter = Prism;
-var useStyles2 = createStyles5(({ 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/file_content_diff_view.tsx
+import ReactDiffViewer from "@alexbruf/react-diff-viewer";
+import "@alexbruf/react-diff-viewer/index.css";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var FileContentDiffView = ({ data, interactive = true, default_open_in_side_app = true }) => {
+  const { old_code, new_code } = data;
+  return /* @__PURE__ */ jsx20(
+    ReactDiffViewer,
+    {
+      oldValue: old_code,
+      newValue: new_code,
+      splitView: false
+    }
+  );
+};
+
+// src/components/GenUI/elements/EditFile.tsx
+import { Button as Button7, Space as Space9, Typography as Typography9 } from "antd";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var { Text: Text7 } = Typography9;
+var EditFile = ({
+  data,
+  component_key,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const { file_path, new_string, old_string } = toolCallData?.args || {};
+  const { openSideApp } = useChatUIContext();
+  if (!toolCallData) {
+    return null;
+  }
+  const expandIcon = () => getFileIcon(file_path);
+  const header = /* @__PURE__ */ jsxs13(Space9, { children: [
+    /* @__PURE__ */ jsx21(Text7, { strong: true, children: "Edit" }),
+    /* @__PURE__ */ jsx21(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__ */ jsx21(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon,
+      extra: /* @__PURE__ */ jsx21(
+        Button7,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "Diff View"
+        }
+      ),
+      children: /* @__PURE__ */ jsx21(MDResponse, { content: new_string })
+    }
+  );
+};
+
+// src/components/GenUI/elements/task_card.tsx
+import { Card as Card5, Typography as Typography10, Tag as Tag3, Avatar } from "antd";
+import { createStyles as createStyles7 } from "antd-style";
+import {
+  CheckCircleOutlined as CheckCircleOutlined3,
+  LoadingOutlined as LoadingOutlined2,
+  CloseCircleOutlined,
+  UserOutlined,
+  RightOutlined as RightOutlined2,
+  CarryOutOutlined
+} from "@ant-design/icons";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var { Text: Text8 } = Typography10;
+var useStyle5 = createStyles7(({ token, css }) => ({
+  card: css`
+    max-width: 600px;
+    background: ${token.colorBgContainer};
+    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};
-    }
-  `
-}));
-var MDResponse = ({
-  content = "",
-  context,
-  embeddedLink,
-  interactive,
-  userData,
-  noGenUI,
-  eventHandler
-}) => {
-  const { styles } = useStyles2();
-  const config = useMemo3(
-    () => ({
-      components: {
-        a({ node, ...props }) {
-          if (embeddedLink) {
-            return /* @__PURE__ */ jsx18(IFrameCard, { src: props.href });
-          } else return /* @__PURE__ */ jsx18("a", { ...props });
-        },
-        table({ node, ...props }) {
-          return /* @__PURE__ */ jsx18("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ jsx18("table", { className: styles.markdownTable, ...props }) });
-        },
-        th({ node, ...props }) {
-          return /* @__PURE__ */ jsx18("th", { className: styles.markdownTh, ...props });
-        },
-        td({ node, ...props }) {
-          return /* @__PURE__ */ jsx18("td", { className: styles.markdownTd, ...props });
-        },
-        tr({ node, ...props }) {
-          return /* @__PURE__ */ jsx18("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__ */ jsx18(
-                Element,
-                {
-                  interactive,
-                  component_key: language,
-                  data: childrenData,
-                  eventHandler: (e, data, message3, agent) => {
-                    eventHandler?.(e, data, message3, agent);
-                  }
-                }
-              );
-            }
-            switch (language) {
-              case "mermaid":
-                return /* @__PURE__ */ jsx18(MDMermaid, { children });
-              default:
-                return /* @__PURE__ */ jsx18(
-                  SyntaxHighlighter,
-                  {
-                    ...rest,
-                    PreTag: "div",
-                    language,
-                    style: dark,
-                    children: String(children).replace(/\n$/, "")
-                  }
-                );
-            }
-          } else {
-            return /* @__PURE__ */ jsx18("code", { ...rest, className, children });
-          }
-        }
-      },
-      remarkPlugins: [remarkGfm],
-      rehypePlugins: [rehypeRaw]
-    }),
-    [userData, interactive, embeddedLink, styles]
-  );
-  return /* @__PURE__ */ jsx18("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx18(ReactMarkdown, { ...config, children: content }) });
-};
-var MDViewFormItem = ({ value }) => {
-  return /* @__PURE__ */ jsx18(MDResponse, { content: value || "" });
-};
-var IFrameCard = ({ src }) => {
-  const containerRef = useRef5(null);
-  const [width, setWidth] = useState11("640px");
-  const [height, setHeight] = useState11("320px");
-  const valid_images = [
-    "jpg",
-    "jpeg",
-    "png",
-    "gif",
-    "bmp",
-    "svg",
-    "tif",
-    "tiff",
-    "webp"
-  ];
-  if (!src) {
+  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 TaskCard = ({
+  data,
+  component_key,
+  interactive = true
+}) => {
+  const { styles } = useStyle5();
+  const toolCallData = data;
+  const { openSideApp } = useChatUIContext();
+  if (!toolCallData) {
     return null;
   }
-  const spitedSrc = src.split(".");
-  if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
-    return /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("img", { src, style: { width: "100%" } }) });
-  } else {
-    return /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("a", { href: src, target: "_black", children: src }) });
-  }
+  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__ */ jsx22(CheckCircleOutlined3, { style: { fontSize: 16 } }),
+          color: "success",
+          text: "Completed",
+          bgColor: "rgba(82, 196, 26, 0.1)"
+        };
+      case "error":
+        return {
+          icon: /* @__PURE__ */ jsx22(CloseCircleOutlined, { style: { fontSize: 16 } }),
+          color: "error",
+          text: "Failed",
+          bgColor: "rgba(255, 77, 79, 0.1)"
+        };
+      case "pending":
+      default:
+        return {
+          icon: /* @__PURE__ */ jsx22(LoadingOutlined2, { 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__ */ jsx22(
+    Card5,
+    {
+      size: "small",
+      className: styles.card,
+      bordered: false,
+      onClick: handleCardClick,
+      hoverable: interactive,
+      bodyStyle: { padding: 0 },
+      children: /* @__PURE__ */ jsxs14("div", { className: styles.cardBody, children: [
+        /* @__PURE__ */ jsx22("div", { className: styles.header, children: /* @__PURE__ */ jsxs14("div", { className: styles.titleSection, children: [
+          /* @__PURE__ */ jsx22("div", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx22(CarryOutOutlined, { style: { fontSize: 20, color: "#1890ff" } }) }),
+          /* @__PURE__ */ jsxs14("div", { className: styles.titleContent, children: [
+            subagent_type && /* @__PURE__ */ jsx22("div", { className: styles.taskType, children: subagent_type }),
+            description && /* @__PURE__ */ jsx22(Text8, { className: styles.description, children: description })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs14("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsxs14("div", { className: styles.footerLeft, children: [
+            assignee && /* @__PURE__ */ jsxs14("div", { className: styles.assigneeContainer, children: [
+              /* @__PURE__ */ jsx22(
+                Avatar,
+                {
+                  size: 24,
+                  icon: /* @__PURE__ */ jsx22(UserOutlined, {}),
+                  className: styles.assigneeAvatar
+                }
+              ),
+              /* @__PURE__ */ jsx22(Text8, { className: styles.assigneeName, children: assignee })
+            ] }),
+            /* @__PURE__ */ jsx22(
+              Tag3,
+              {
+                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__ */ jsx22(RightOutlined2, { className: styles.actionIcon })
+        ] })
+      ] })
+    }
+  );
 };
 
+// src/components/GenUI/elements/task_detail.tsx
+import { Typography as Typography12 } from "antd";
+
 // src/components/Chat/Chating.tsx
+import { CloudUploadOutlined, PaperClipOutlined } from "@ant-design/icons";
 import {
-  CloudUploadOutlined,
-  PaperClipOutlined,
-  FileTextOutlined as FileTextOutlined3
-} from "@ant-design/icons";
-import {
-  Attachments as Attachments2,
-  Bubble,
+  Attachments,
+  Bubble as Bubble2,
   Prompts,
-  Sender,
-  Welcome
+  Sender
 } from "@ant-design/x";
-import {
-  Alert as Alert2,
-  Avatar,
-  Badge,
-  Button as Button9,
-  Flex as Flex5,
-  Space as Space11,
-  message as message2,
-  Tooltip as Tooltip2,
-  Popover,
-  Progress
-} from "antd";
+
+// src/components/Chat/MessageList.tsx
+import { Bubble } from "@ant-design/x";
+import { Space as Space10 } from "antd";
 import ErrorBoundary from "antd/es/alert/ErrorBoundary";
-import React4, {
+import {
   memo,
-  useCallback as useCallback6,
-  useEffect as useEffect8,
+  useCallback as useCallback8,
+  useEffect as useEffect10,
   useMemo as useMemo4,
-  useRef as useRef6,
-  useState as useState12
+  useRef as useRef7,
+  useState as useState15
 } from "react";
-import { useTranslation } from "react-i18next";
-
-// src/components/GenUI/HITLContainer.tsx
-import { Card as Card5, Space as Space10, Tag as Tag3, Typography as Typography10 } from "antd";
-import { createStyles as createStyles6 } from "antd-style";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var { Text: Text8 } = Typography10;
-var useStyle4 = createStyles6(({ 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 = ({
-  interrupts,
-  eventHandler
-}) => {
-  const { styles } = useStyle4();
-  return interrupts && interrupts.length > 0 ? /* @__PURE__ */ jsx19(Card5, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs13(Space10, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx19(
-      Tag3,
-      {
-        bordered: false,
-        color: "orange",
-        style: {
-          fontSize: 14,
-          fontWeight: "bold",
-          background: "#ffffff8f",
-          padding: 4,
-          borderRadius: 8
-        },
-        children: "\u7B49\u5F85\u53CD\u9988"
-      }
-    ),
-    interrupts.map((interrupt) => /* @__PURE__ */ jsx19(
-      MDResponse,
-      {
-        content: interrupt.value,
-        eventHandler
-      },
-      interrupt.id
-    ))
-  ] }) }) : null;
-};
-
-// src/components/Chat/Chating.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message3,
+  message: message4,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = useRef6(null);
-  const [isVisible, setIsVisible] = useState12(false);
-  const [wasEverVisible, setWasEverVisible] = useState12(false);
-  useEffect8(() => {
+  const ref = useRef7(null);
+  const [isVisible, setIsVisible] = useState15(false);
+  const [wasEverVisible, setWasEverVisible] = useState15(false);
+  useEffect10(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -2710,65 +3534,379 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  useEffect8(() => {
+  useEffect10(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message3.content ? Math.min(100, message3.content.length / 5) : 100;
-    return /* @__PURE__ */ jsx20("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+    const estimatedHeight = message4.content ? Math.min(100, message4.content.length / 5) : 100;
+    return /* @__PURE__ */ jsx23("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+  };
+  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+};
+var MemoizedBubbleList = memo(
+  ({
+    items,
+    role,
+    className
+  }) => /* @__PURE__ */ jsx23(
+    Bubble.List,
+    {
+      autoScroll: true,
+      items,
+      role,
+      className
+    },
+    "messages"
+  )
+);
+MemoizedBubbleList.displayName = "MemoizedBubbleList";
+var MessageList = ({
+  messages,
+  className
+}) => {
+  const { styles } = useStyle();
+  const { openSideApp } = useChatUIContext();
+  const messageLengthRef = useRef7(messages?.length ?? 0);
+  useEffect10(() => {
+    if (messages?.length) {
+      messageLengthRef.current = messages?.length;
+    }
+  }, [messages?.length]);
+  const renderContent = useCallback8((message4) => {
+    const { content } = message4;
+    try {
+      const json = JSON.parse(content);
+      if (json.action && json.message) {
+        return /* @__PURE__ */ jsx23(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__ */ jsx23(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx23(MDResponse, { content: content_md }) });
+  }, []);
+  const items = useMemo4(
+    () => messages.map((message4, index) => ({
+      key: message4.id,
+      role: message4.role,
+      typing: false,
+      content: /* @__PURE__ */ jsx23(
+        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%)"
+        }
+      }
+    }
   };
-  return /* @__PURE__ */ jsx20(ErrorBoundary, { children: /* @__PURE__ */ jsx20("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx23("div", { style: { flex: 1 } });
+  }
+  return /* @__PURE__ */ jsx23(
+    MemoizedBubbleList,
+    {
+      items,
+      role,
+      className: styles.messages || className
+    }
+  );
+};
+
+// src/components/Chat/Chating.tsx
+import {
+  Alert as Alert2,
+  Badge as Badge2,
+  Button as Button10,
+  message as message3
+} from "antd";
+import React6, { useEffect as useEffect11, useRef as useRef8, useState as useState16 } from "react";
+
+// src/components/GenUI/HITLContainer.tsx
+import {
+  Collapse as Collapse5,
+  Space as Space11,
+  Tag as Tag4,
+  Typography as Typography11
+} from "antd";
+import { createStyles as createStyles8 } from "antd-style";
+import CollapsePanel4 from "antd/es/collapse/CollapsePanel";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var { Text: Text9 } = Typography11;
+var useStyle6 = createStyles8(({ 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__ */ jsx24(
+    Collapse5,
+    {
+      className: styles.card,
+      size: "small",
+      bordered: false,
+      defaultActiveKey: ["hitl"],
+      children: /* @__PURE__ */ jsx24(
+        CollapsePanel4,
+        {
+          showArrow: false,
+          header: /* @__PURE__ */ jsx24(
+            Tag4,
+            {
+              bordered: false,
+              color: "orange",
+              style: {
+                fontSize: 14,
+                fontWeight: "bold",
+                background: "#ffffff8f",
+                padding: 4,
+                borderRadius: 8
+              },
+              children: "\u7B49\u5F85\u53CD\u9988"
+            }
+          ),
+          children: /* @__PURE__ */ jsx24(Space11, { direction: "vertical", style: { width: "100%" }, children: interrupts.map((interrupt) => /* @__PURE__ */ jsx24(MDResponse, { content: interrupt.value }, interrupt.id)) })
+        },
+        "hitl"
+      )
+    }
+  ) : null;
+};
+
+// src/components/Chat/AgentHeader.tsx
+import { Avatar as Avatar2, Space as Space12 } from "antd";
+
+// src/components/Chat/TodoProgress.tsx
+import { Popover, Tooltip as Tooltip2, Progress } from "antd";
+import { jsx as jsx25, jsxs as jsxs15 } from "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__ */ jsx25(
+    Popover,
+    {
+      content: /* @__PURE__ */ jsx25("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx25(Todo, { data: todos, component_key: "header_todos" }) }),
+      title: "Todos",
+      trigger: "click",
+      placement: "bottomRight",
+      children: /* @__PURE__ */ jsx25(Tooltip2, { title: `${completedCount} / ${totalCount} tasks completed`, children: /* @__PURE__ */ jsx25("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ jsx25(
+        Progress,
+        {
+          type: "circle",
+          strokeColor: {
+            "0%": "#91caff",
+            "100%": "#003eb3"
+          },
+          percent,
+          status: hasInProgress ? "active" : "normal",
+          width: 30,
+          format: () => /* @__PURE__ */ jsx25(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                lineHeight: 1
+              },
+              children: /* @__PURE__ */ jsxs15("span", { style: { fontSize: 8 }, children: [
+                completedCount,
+                "/",
+                totalCount
+              ] })
+            }
+          )
+        }
+      ) }) })
+    }
+  );
+};
+
+// src/components/Chat/FileExplorerButton.tsx
+import { Tooltip as Tooltip3, Badge, Button as Button9 } from "antd";
+import { FileTextOutlined as FileTextOutlined4 } from "@ant-design/icons";
+import { jsx as jsx26 } from "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__ */ jsx26(Tooltip3, { title: "File Explorer", children: /* @__PURE__ */ jsx26(Badge, { count: fileCount, size: "small", color: "blue", children: /* @__PURE__ */ jsx26(
+    Button9,
+    {
+      type: "text",
+      icon: /* @__PURE__ */ jsx26(FileTextOutlined4, {}),
+      onClick: () => openSideApp({
+        component_key: "file_explorer",
+        message: "File Explorer",
+        data: { files }
+      })
+    }
+  ) }) });
+};
+
+// src/components/Chat/AgentHeader.tsx
+import { Welcome } from "@ant-design/x";
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var AgentHeader = (props) => {
+  const { description, avatar, name, extra, extraMeta } = props;
+  const extraMetaComponents = useMemo5(() => {
+    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__ */ jsx27(
+            Element,
+            {
+              component_key: meta.id,
+              data: childrenData
+            },
+            meta.id
+          );
+        }
+      });
+    }
+    return void 0;
+  }, [extraMeta]);
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx27(
+      Welcome,
+      {
+        style: { padding: 8 },
+        variant: "borderless",
+        description,
+        icon: /* @__PURE__ */ jsx27(Avatar2, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+        title: name || "Fina",
+        extra: /* @__PURE__ */ jsxs16(Space12, { children: [
+          extra,
+          /* @__PURE__ */ jsx27(TodoProgress, {}),
+          /* @__PURE__ */ jsx27(FileExplorerButton, {}),
+          extraMetaComponents && /* @__PURE__ */ jsx27(Space12, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        style: {
+          background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
+        }
+      }
+    )
+  ] });
 };
-var MemoizedBubbleList = memo(
-  ({
-    items,
-    roles,
-    className
-  }) => /* @__PURE__ */ jsx20(
-    Bubble.List,
-    {
-      autoScroll: true,
-      items,
-      roles,
-      className
-    },
-    "messages"
-  )
-);
-MemoizedBubbleList.displayName = "MemoizedBubbleList";
+
+// src/components/Chat/Chating.tsx
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "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 } = useTranslation();
-  const [content, setContent] = useState12("");
-  const [attachedFiles, setAttachedFiles] = useState12([]);
-  const [headerOpen, setHeaderOpen] = useState12(false);
-  const attachmentsRef = useRef6(null);
-  const senderRef = React4.useRef(null);
-  useEffect8(() => {
+  const [content, setContent] = useState16("");
+  const [attachedFiles, setAttachedFiles] = useState16([]);
+  const { styles } = useStyle();
+  const [headerOpen, setHeaderOpen] = useState16(false);
+  const attachmentsRef = useRef8(null);
+  const senderRef = React6.useRef(null);
+  const {
+    messages,
+    sendMessage,
+    stopStreaming,
+    isLoading,
+    error,
+    interrupts,
+    tenantId,
+    clearError
+  } = useAgentChat();
+  useEffect11(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -2777,86 +3915,6 @@ var Chating = ({
       }
     });
   }, []);
-  const messageLengthRef = useRef6(messages?.length ?? 0);
-  useEffect8(() => {
-    if (messages?.length) {
-      messageLengthRef.current = messages?.length;
-    }
-  }, [messages?.length]);
-  const renderContent = useCallback6(
-    (message3) => {
-      const { content: content2, files: files2, id } = message3;
-      try {
-        const json = JSON.parse(content2);
-        if (json.action && json.message) {
-          return /* @__PURE__ */ jsx20(
-            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__ */ jsx20(Space11, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx20(
-        MDResponse,
-        {
-          content: content_md,
-          eventHandler: handleMDResponseEvent
-        }
-      ) });
-    },
-    [handleMDResponseEvent]
-  );
-  const items = useMemo4(
-    () => messages.map((message3, index) => ({
-      key: message3.id,
-      role: message3.role,
-      typing: false,
-      content: /* @__PURE__ */ jsx20(
-        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 = [
@@ -2870,13 +3928,13 @@ ${JSON.stringify(tool_call)}
   const onSubmit = (nextContent) => {
     if (!nextContent && attachedFiles.length === 0) return;
     if (attachedFiles.filter((f) => f.status !== "done").length > 0) {
-      message2.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
+      message3.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,
@@ -2894,14 +3952,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);
@@ -2914,7 +3972,7 @@ ${JSON.stringify(tool_call)}
       setHeaderOpen(true);
     }
     if (info.file?.response?.error || info.file.status === "error") {
-      message2.error(
+      message3.error(
         `${info.file.name} file upload failed.${info.file?.response?.message}`
       );
     }
@@ -2926,22 +3984,22 @@ ${JSON.stringify(tool_call)}
   const beforeUpload = (file) => {
     const isLessThan20MB = file.size / 1024 / 1024 < 20;
     if (!isLessThan20MB) {
-      message2.error(
+      message3.error(
         `File must be smaller than 20MB! ${file.name} is too large.`
       );
       return false;
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ jsx20(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx20(
-    Button9,
+  const attachmentsNode = /* @__PURE__ */ jsx28(Badge2, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx28(
+    Button10,
     {
       type: "text",
-      icon: /* @__PURE__ */ jsx20(PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ jsx28(PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ jsx20(
+  const senderHeader = /* @__PURE__ */ jsx28(
     Sender.Header,
     {
       title: "Attachments",
@@ -2953,14 +4011,14 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ jsx20(
-        Attachments2,
+      children: /* @__PURE__ */ jsx28(
+        Attachments,
         {
           ref: attachmentsRef,
           items: attachedFiles,
           action: uploadAction,
           headers: {
-            "x-tenant-id": tenant_id
+            "x-tenant-id": tenantId || ""
           },
           getDropContainer: () => {
             const dropContainer = document.querySelector(".fina_chat");
@@ -2975,7 +4033,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ jsx20(CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ jsx28(CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -2983,186 +4041,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 = useMemo4(() => {
-    if (extraMeta?.length > 0) {
-      return extraMeta.map((meta) => {
-        const Element = getElement(meta.id)?.card_view;
-        if (Element) {
-          let childrenData;
-          try {
-          } catch (error2) {
-          }
-          return /* @__PURE__ */ jsx20(
-            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__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx20(
-        Welcome,
-        {
-          style: { padding: 8 },
-          variant: "borderless",
-          description,
-          icon: /* @__PURE__ */ jsx20(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
-          title: name || "Fina",
-          extra: /* @__PURE__ */ jsxs14(Space11, { children: [
-            extra,
-            todos && todos.length > 0 && /* @__PURE__ */ jsx20(
-              Popover,
-              {
-                content: /* @__PURE__ */ jsx20("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx20(
-                  Todo,
-                  {
-                    data: todos,
-                    component_key: "header_todos",
-                    eventHandler: handleMDResponseEvent
-                  }
-                ) }),
-                title: "Todos",
-                trigger: "click",
-                placement: "bottomRight",
-                children: /* @__PURE__ */ jsx20(
-                  Tooltip2,
-                  {
-                    title: `${todos.filter((item) => item.status === "completed").length} / ${todos.length} tasks completed`,
-                    children: /* @__PURE__ */ jsx20("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ jsx20(
-                      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__ */ jsx20(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "center",
-                              lineHeight: 1
-                            },
-                            children: /* @__PURE__ */ jsxs14("span", { style: { fontSize: 8 }, children: [
-                              todos.filter(
-                                (item) => item.status === "completed"
-                              ).length,
-                              "/",
-                              todos.length
-                            ] })
-                          }
-                        )
-                      }
-                    ) })
-                  }
-                )
-              }
-            ),
-            files && Object.keys(files).length > 0 && /* @__PURE__ */ jsx20(Tooltip2, { title: "File Explorer", children: /* @__PURE__ */ jsx20(
-              Badge,
-              {
-                count: Object.keys(files).length,
-                size: "small",
-                color: "blue",
-                children: /* @__PURE__ */ jsx20(
-                  Button9,
-                  {
-                    type: "text",
-                    icon: /* @__PURE__ */ jsx20(FileTextOutlined3, {}),
-                    onClick: () => onOpenSidePanel({
-                      component_key: "file_explorer",
-                      message: "File Explorer",
-                      data: { files }
-                    })
-                  }
-                )
-              }
-            ) }),
-            extraMetaComponents && /* @__PURE__ */ jsx20(Space11, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx20(
-        "div",
-        {
-          style: {
-            background: "linear-gradient(rgba(41, 42, 45, .8) 0%, rgba(41, 42, 45, 0) 100%)"
-          }
-        }
-      )
-    ] }),
-    items.length > 0 ? /* @__PURE__ */ jsx20(
-      MemoizedBubbleList,
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx28("div", { children: showHeader && /* @__PURE__ */ jsx28(
+      AgentHeader,
       {
-        items,
-        roles,
-        className: styles.messages
+        description,
+        avatar,
+        name,
+        extra,
+        extraMeta
       }
-    ) : /* @__PURE__ */ jsx20("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx20(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    error && /* @__PURE__ */ jsx20("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx20(
+    ) }),
+    /* @__PURE__ */ jsx28(MessageList, { messages, className: styles.messages }),
+    isLoading ? /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(Bubble2, { loading: isLoading, variant: "borderless", content: "" }) }) : /* @__PURE__ */ jsx28(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ jsx28("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx28(
       Alert2,
       {
         type: "error",
         banner: true,
         closable: true,
-        onClose: () => onClearError?.(),
+        onClose: () => clearError(),
         message: `${error.message}`
       }
     ) }),
-    /* @__PURE__ */ jsx20(
-      HITLContainer,
-      {
-        interrupts,
-        eventHandler: handleMDResponseEvent
-      }
-    ),
-    /* @__PURE__ */ jsx20(
+    showHITL && /* @__PURE__ */ jsx28(HITLContainer, {}),
+    showSender && /* @__PURE__ */ jsx28(
       Sender,
       {
         disabled: interrupts && interrupts.length > 0,
-        allowSpeech: true,
+        allowSpeech: false,
         ref: senderRef,
         value: content,
         header: senderHeader,
@@ -3172,19 +4079,8 @@ ${JSON.stringify(tool_call)}
         prefix: attachmentsNode,
         loading: isLoading,
         className: styles.sender,
-        actions: (ori, { components }) => {
-          const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ jsx20(Flex5, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx20(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx20(
-            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);
@@ -3194,72 +4090,105 @@ ${JSON.stringify(tool_call)}
   ] });
 };
 
-// src/components/Chat/ThinkingChain.tsx
-import {
-  CheckCircleOutlined as CheckCircleOutlined3,
-  InfoCircleOutlined as InfoCircleOutlined2,
-  LoadingOutlined as LoadingOutlined3
-} from "@ant-design/icons";
-import {
-  ThoughtChain
-} from "@ant-design/x";
-import { jsx as jsx21 } from "react/jsx-runtime";
-function getStatusIcon2(status) {
-  switch (status) {
-    case "success":
-      return /* @__PURE__ */ jsx21(CheckCircleOutlined3, {});
-    case "error":
-      return /* @__PURE__ */ jsx21(InfoCircleOutlined2, {});
-    case "pending":
-      return /* @__PURE__ */ jsx21(LoadingOutlined3, {});
-    default:
-      return /* @__PURE__ */ jsx21(CheckCircleOutlined3, {});
-  }
-}
-var ThinkingChain = ({ message: message3 }) => {
-  const title = message3.name || message3.content.split("\n")[0];
-  const items = [
+// src/components/GenUI/elements/task_detail.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var { Text: Text10 } = Typography12;
+var TaskDetail = ({ data, component_key, interactive = true }) => {
+  const { description, subagent_type, thread_id } = data || {};
+  return /* @__PURE__ */ jsx29(
+    AgentThreadProvider,
     {
-      key: message3.id,
-      title,
-      content: /* @__PURE__ */ jsx21(MDResponse, { content: message3.content }),
-      status: message3.status,
-      icon: getStatusIcon2(message3.status)
-    }
-  ];
-  return /* @__PURE__ */ jsx21(
-    ThoughtChain,
-    {
-      items,
-      collapsible: message3.status === "success" ? true : false,
-      size: "small"
+      threadId: thread_id,
+      assistantId: subagent_type,
+      options: {
+        streaming: true,
+        enableReturnStateWhenStreamCompleted: true,
+        enableResumeStream: true
+      },
+      children: /* @__PURE__ */ jsx29("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx29(
+        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__ */ jsx21(MDResponse, { content: item.content }),
-    status: item.status,
-    icon: getStatusIcon2(item.status)
-  }));
-  return /* @__PURE__ */ jsx21(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
-import {
-  CloseOutlined,
-  CompressOutlined,
-  ExpandOutlined,
-  FullscreenOutlined
-} from "@ant-design/icons";
-import { Button as Button10, Tabs } from "antd";
-import { createStyles as createStyles7 } from "antd-style";
-import { useEffect as useEffect9, useState as useState13 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var useStyle5 = createStyles7(({ token, css }) => {
+import { Button as Button11, Tabs } from "antd";
+import { createStyles as createStyles9 } from "antd-style";
+import { useEffect as useEffect12, useState as useState17 } from "react";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+var useStyle7 = createStyles9(({ token, css }) => {
   return {
     tabContainer: css`
       .ant-tabs-content-holder {
@@ -3278,21 +4207,24 @@ var useStyle5 = createStyles7(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ jsxs15("div", { children: [
-    /* @__PURE__ */ jsx22("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ jsx22("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx30("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ jsx30("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
-var SideAppViewBrowser = ({
-  open_uri,
-  eventHandler,
-  onClose,
-  onChangeSize
-}) => {
-  const { styles } = useStyle5();
-  const [activeKey, setActiveKey] = useState13(JSON.stringify(open_uri));
-  const [currentSize, setCurrentSize] = useState13(open_uri.size || "large");
-  const [items, setItems] = useState13([]);
+var SideAppViewBrowser = () => {
+  const { styles } = useStyle7();
+  const {
+    sideAppSize,
+    sideAppSelectedCard,
+    setSideAppSize,
+    openSideApp,
+    closeSideApp
+  } = useChatUIContext();
+  const [activeKey, setActiveKey] = useState17(
+    JSON.stringify(sideAppSelectedCard)
+  );
+  const [items, setItems] = useState17([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -3317,7 +4249,7 @@ var SideAppViewBrowser = ({
       }
     }
     if (newPanes.length === 0) {
-      onClose();
+      closeSideApp();
       return;
     }
     setItems(newPanes);
@@ -3328,31 +4260,25 @@ var SideAppViewBrowser = ({
       remove(targetKey);
     }
   };
-  useEffect9(() => {
-    const SideAppView = getElement(open_uri.component_key).side_app_view || EmptySideAppView;
-    const key = JSON.stringify(open_uri);
+  useEffect12(() => {
+    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__ */ jsx22(
+      sideAppSelectedCard?.message || sideAppSelectedCard?.data.message || "\u672A\u547D\u540D",
+      /* @__PURE__ */ jsx30(
         SideAppView,
         {
-          component_key: open_uri.component_key,
-          data: open_uri.data,
-          eventHandler
+          component_key: sideAppSelectedCard?.component_key || "",
+          data: sideAppSelectedCard?.data
         }
       )
     );
-  }, [open_uri]);
-  useEffect9(() => {
-    if (open_uri.size && open_uri.size !== currentSize) {
-      setCurrentSize(open_uri.size);
-    }
-  }, [open_uri.size]);
+  }, [sideAppSelectedCard]);
   const onChange = (newActiveKey) => {
     setActiveKey(newActiveKey);
   };
@@ -3364,10 +4290,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) {
@@ -3386,16 +4311,16 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ jsx22(CompressOutlined, {});
+        return /* @__PURE__ */ jsx30(CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ jsx22(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx30(ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ jsx22(FullscreenOutlined, {});
+        return /* @__PURE__ */ jsx30(FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ jsx22(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx30(ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx30(
     Tabs,
     {
       className: styles.tabContainer,
@@ -3403,27 +4328,27 @@ var SideAppViewBrowser = ({
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ jsxs15("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ jsx22(
-            Button10,
+        right: /* @__PURE__ */ jsxs18("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx30(
+            Button11,
             {
               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__ */ jsx22(
-            Button10,
+          /* @__PURE__ */ jsx30(
+            Button11,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ jsx22(CloseOutlined, {}),
+              icon: /* @__PURE__ */ jsx30(CloseOutlined, {}),
               onClick: () => {
-                onClose();
+                closeSideApp();
               }
             }
           )
@@ -3437,29 +4362,64 @@ var SideAppViewBrowser = ({
   );
 };
 
-// src/components/Chat/context.tsx
-import { createContext as createContext2 } from "react";
-var chatContext = createContext2({
-  eventHandler: (component_key, data, message3) => {
-  }
-});
+// src/components/Chat/LatticeChat.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var LatticeChat = (props) => {
+  const { assistant_id, thread_id, ...chatingProps } = props;
+  return /* @__PURE__ */ jsx31(
+    AgentThreadProvider,
+    {
+      assistantId: assistant_id,
+      threadId: thread_id,
+      options: {
+        streaming: true,
+        enableReturnStateWhenStreamCompleted: true,
+        enableResumeStream: true
+      },
+      children: /* @__PURE__ */ jsx31(ChatUIContextProvider, { children: /* @__PURE__ */ jsx31(
+        ColumnLayout,
+        {
+          left: /* @__PURE__ */ jsx31(Chating, { ...chatingProps }),
+          right: /* @__PURE__ */ jsx31(SideAppViewBrowser, {})
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/Chat/AgentConversations.tsx
+import {
+  CodeOutlined as CodeOutlined4,
+  FileImageOutlined as FileImageOutlined3,
+  FileSearchOutlined,
+  SignatureOutlined
+} from "@ant-design/icons";
+import { Conversations } from "@ant-design/x";
+import { theme } from "antd";
+import { useState as useState18 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 export {
+  AgentThreadProvider,
   AxiomLatticeProvider,
+  ChatUIContext,
+  ChatUIContextProvider,
   Chating,
+  ColumnLayout,
   FileExplorer,
+  LatticeChat,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
   SideAppViewBrowser,
-  ThinkingChain,
-  ThinkingChainGroup,
-  chatContext,
   getElement,
   regsiterElement,
+  useAgentChat,
   useAgentGraph,
   useAgentState,
+  useAgentThreadContext,
   useAxiomLattice,
   useChat,
+  useChatUIContext,
   useThread
 };
 //# sourceMappingURL=index.mjs.map