@axiom-lattice/react-sdk 2.0.3 → 2.1.0

package/dist/index.js

@@ -33,6 +33,7 @@ var index_exports = {};
 __export(index_exports, {
   AxiomLatticeProvider: () => AxiomLatticeProvider,
   Chating: () => Chating,
+  FileExplorer: () => FileExplorer,
   MDMermaid: () => MDMermaid,
   MDResponse: () => MDResponse,
   MDViewFormItem: () => MDViewFormItem,
@@ -40,7 +41,6 @@ __export(index_exports, {
   ThinkingChain: () => ThinkingChain,
   ThinkingChainGroup: () => ThinkingChainGroup,
   chatContext: () => chatContext,
-  elements: () => elements,
   getElement: () => getElement,
   regsiterElement: () => regsiterElement,
   useAgentGraph: () => useAgentGraph,
@@ -124,9 +124,22 @@ function useChat(threadId, options = {}) {
   }, [options.initialMessages]);
   const handleStreamEvent = (0, import_react2.useCallback)((chunk) => {
     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
@@ -142,7 +155,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message2, files, ...rest } = input || {};
+      const { message: message3, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -151,7 +164,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message2 || command?.resume?.message || "",
+        content: message3 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -257,14 +270,14 @@ function useChat(threadId, options = {}) {
       }
       setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
-        const fetchedMessages = await client.getMessages({
-          threadId,
-          limit
-        });
+        const agentState = await client.getAgentState(threadId);
+        const fetchedMessages = await client.getMessages({ threadId });
         chunkMessageMerger.current.reset();
         chunkMessageMerger.current.initialMessages(fetchedMessages);
         setState((prev) => ({
           ...prev,
+          agentState,
+          todos: agentState?.values?.todos,
           messages: chunkMessageMerger.current.getMessages(),
           isLoading: false
         }));
@@ -593,8 +606,8 @@ var import_react_markdown = __toESM(require("react-markdown"));
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_react9 = require("react");
-var import_antd_style4 = require("antd-style");
+var import_react13 = require("react");
+var import_antd_style6 = require("antd-style");
 var import_rehype_raw = __toESM(require("rehype-raw"));
 
 // src/components/GenUI/elements/confirm_feedback.tsx
@@ -618,7 +631,7 @@ var ConfirmFeedback = ({
   eventHandler,
   interactive = true
 }) => {
-  const { message: message2, type, config, feedback, options } = data ?? {};
+  const { message: message3, type, config, feedback, options } = data ?? {};
   const [clicked, setClicked] = (0, import_react6.useState)(false);
   const { styles } = useStyle();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
@@ -637,7 +650,7 @@ var ConfirmFeedback = ({
         children: "\u8BF7\u6C42\u786E\u8BA4"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MDResponse, { content: message2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MDResponse, { content: message3 }),
     options ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_antd.Button,
       {
@@ -718,7 +731,7 @@ var GenericDataTable = ({
   interactive = true,
   default_open_in_side_app = true
 }) => {
-  const { dataSource, message: message2 } = data ?? {};
+  const { dataSource, message: message3 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = (0, import_react7.useState)([]);
   const processedData = dataSource?.map((item, index) => ({
     ...item,
@@ -800,7 +813,7 @@ var GenericDataTable = ({
     {
       size: "small",
       title: () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message2 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message3 || "" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd2.Space, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_antd2.Button,
@@ -823,8 +836,8 @@ var GenericDataTable = ({
                   "__open_side_app",
                   {
                     component_key: "generic_data_table",
-                    message: message2 || "",
-                    data: { dataSource, message: message2 },
+                    message: message3 || "",
+                    data: { dataSource, message: message3 },
                     size: "large"
                   },
                   ""
@@ -1055,9 +1068,12 @@ function getStatusIcon(status) {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.LoadingOutlined, { style: { color: "#1890ff" } });
   }
 }
-var ToolCall = ({ data }) => {
+var ToolCall = ({ data, eventHandler }) => {
   const toolCallData = data;
   const formatToolName = (name) => {
+    if (!name) {
+      return "";
+    }
     return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
   };
   const formatArgsPreview = (args) => {
@@ -1114,6 +1130,14 @@ var ToolCall = ({ data }) => {
   const expandIcon = ({ isActive }) => {
     return getStatusIcon(toolCallData.status);
   };
+  const toolCallElement = getElement(toolCallData.name.toLowerCase());
+  if (toolCallElement) {
+    return toolCallElement.card_view({
+      data: toolCallData,
+      component_key: toolCallData.id,
+      eventHandler
+    });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_antd4.Collapse,
     {
@@ -1145,8 +1169,8 @@ var useStyle3 = (0, import_antd_style3.createStyles)(({ token, css }) => ({
     max-width: 1200px;
     background: linear-gradient(
       919deg,
-      rgb(67 232 157 / 8%),
-      rgb(206 250 235 / 28%) 43%
+      rgb(67 81 232 / 8%),
+      rgb(249 249 249 / 28%) 43%
     );
   `,
   todoItem: css`
@@ -1265,7 +1289,1006 @@ var Todo = ({
   ] }) });
 };
 
-// src/components/GenUI/elements/index.tsx
+// src/components/GenUI/elements/WriteTodos.tsx
+var import_antd6 = require("antd");
+var import_icons5 = require("@ant-design/icons");
+var import_CollapsePanel2 = __toESM(require("antd/es/collapse/CollapsePanel"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var { Text: Text5 } = import_antd6.Typography;
+var WriteTodos = ({
+  data,
+  component_key,
+  eventHandler,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const todos = toolCallData?.args?.todos || [];
+  const totalCount = todos.length;
+  const completedCount = todos.filter(
+    (item) => item.status === "completed"
+  ).length;
+  const expandIcon = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons5.UnorderedListOutlined, {});
+  };
+  const header = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd6.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text5, { strong: true, children: "Todos" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
+      completedCount,
+      "/",
+      totalCount,
+      " Done"
+    ] })
+  ] });
+  if (!toolCallData) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_antd6.Collapse,
+    {
+      size: "small",
+      bordered: false,
+      defaultActiveKey: [],
+      expandIcon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_CollapsePanel2.default,
+        {
+          header,
+          style: { minWidth: 400 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Todo,
+            {
+              data: data.args.todos,
+              component_key,
+              eventHandler,
+              interactive
+            }
+          )
+        },
+        toolCallData.id
+      )
+    }
+  );
+};
+
+// src/components/GenUI/FileExplorer.tsx
+var import_react8 = require("react");
+var import_antd7 = require("antd");
+var import_icons7 = require("@ant-design/icons");
+var import_antd_style4 = require("antd-style");
+
+// src/components/GenUI/elements/getFileIcon.tsx
+var import_icons6 = require("@ant-design/icons");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var getFileIcon = (filename) => {
+  const ext = filename?.split(".")?.pop()?.toLowerCase();
+  const iconStyle = { fontSize: 14, marginRight: 4, verticalAlign: "middle" };
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#3178c6" } });
+    case "js":
+    case "jsx":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.CodeOutlined, { style: { ...iconStyle, color: "#f7df1e" } });
+    case "html":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
+    case "css":
+    case "less":
+    case "scss":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
+    case "md":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
+    case "json":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons6.FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
+  }
+};
+
+// src/components/GenUI/FileExplorer.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useStyles = (0, import_antd_style4.createStyles)(({ token, css }) => ({
+  container: css`
+    height: 100%;
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  `,
+  splitter: css`
+    height: 100%;
+    .ant-splitter-bar-dragger {
+      background: transparent !important;
+      &:hover {
+        background: ${token.colorPrimary} !important;
+      }
+    }
+  `,
+  leftPanel: css`
+    height: 100%;
+    overflow: auto;
+    padding: 0;
+    background: ${token.colorBgContainer};
+    border-right: 1px solid ${token.colorBorderSecondary};
+
+    /* Custom scrollbar for tree */
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 3px;
+    }
+  `,
+  rightPanel: css`
+    height: 100%;
+    overflow: auto;
+    padding: 0;
+    background: ${token.colorBgLayout};
+    position: relative;
+  `,
+  header: css`
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 16px;
+    background: ${token.colorBgContainer + "30"};
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    gap: 8px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  `,
+  contentBody: css`
+    padding: 24px;
+    min-height: 100%;
+
+    pre {
+      margin: 0 !important;
+      border-radius: ${token.borderRadius}px !important;
+    }
+  `,
+  emptyState: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: ${token.colorTextQuaternary};
+  `,
+  fileTree: css`
+    background: transparent;
+    font-size: 13px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, sans-serif;
+
+    .ant-tree-treenode {
+      padding-bottom: 0 !important;
+      width: 100%;
+      &:hover {
+        background-color: ${token.colorFillQuaternary};
+      }
+    }
+
+    .ant-tree-node-content-wrapper {
+      padding: 0 4px;
+      border-radius: 0;
+      transition: none;
+      line-height: 24px;
+      min-height: 24px;
+
+      &:hover {
+        background-color: transparent;
+      }
+
+      &.ant-tree-node-selected {
+        background-color: ${token.controlItemBgActive} !important;
+        color: ${token.colorText};
+        font-weight: 500;
+      }
+    }
+
+    .ant-tree-indent-unit {
+      width: 16px;
+    }
+
+    .ant-tree-switcher {
+      width: 20px;
+      line-height: 24px;
+
+      .anticon {
+        font-size: 10px;
+        color: ${token.colorTextSecondary};
+      }
+    }
+
+    .ant-tree-title {
+      display: inline-block;
+      margin-left: 4px;
+    }
+  `
+}));
+var getFolderIcon = (expanded) => {
+  const iconStyle = {
+    fontSize: 14,
+    marginRight: 4,
+    color: "#dcb67a",
+    verticalAlign: "middle"
+  };
+  return expanded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.FolderOutlined, { style: iconStyle });
+};
+var sortTreeNodes = (nodes) => {
+  return nodes.sort((a, b) => {
+    if (!!a.isLeaf === !!b.isLeaf) {
+      return a.title.localeCompare(b.title);
+    }
+    return a.isLeaf ? 1 : -1;
+  }).map((node) => {
+    if (node.children) {
+      return { ...node, children: sortTreeNodes(node.children) };
+    }
+    return node;
+  });
+};
+var buildTreeData = (files, expandedKeys) => {
+  const root = [];
+  files.forEach((file) => {
+    const parts = file.name.split("/");
+    let currentLevel = root;
+    parts.forEach((part, index) => {
+      const isFile = index === parts.length - 1;
+      const key = parts.slice(0, index + 1).join("/");
+      let existingNode = currentLevel.find((node) => node.key === key);
+      if (!existingNode) {
+        const title = part === "" && index === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            style: {
+              color: "rgba(0, 0, 0, 0.45)",
+              fontStyle: "italic",
+              fontSize: 12
+            },
+            children: "<root>"
+          }
+        ) : part;
+        const newNode = {
+          title,
+          key,
+          isLeaf: isFile,
+          icon: isFile ? getFileIcon(part) : getFolderIcon(expandedKeys.includes(key)),
+          children: isFile ? void 0 : []
+        };
+        currentLevel.push(newNode);
+        existingNode = newNode;
+      }
+      if (!isFile && existingNode.children) {
+        currentLevel = existingNode.children;
+      }
+    });
+  });
+  return sortTreeNodes(root);
+};
+var FileExplorer = ({
+  data,
+  eventHandler,
+  interactive = true,
+  default_open_in_side_app = true
+}) => {
+  const { files } = data ?? {};
+  const { styles, cx } = useStyles();
+  const [fileList, setFileList] = (0, import_react8.useState)([]);
+  const [selectedKey, setSelectedKey] = (0, import_react8.useState)("");
+  const [expandedKeys, setExpandedKeys] = (0, import_react8.useState)([]);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+  (0, import_react8.useEffect)(() => {
+    let list = [];
+    if (Array.isArray(files)) {
+      list = files;
+    } else {
+      list = Object.keys(files).map((key) => ({
+        ...files[key],
+        name: key
+      }));
+    }
+    setFileList(list);
+    if (list.length > 0 && !selectedKey) {
+      const firstFile = list[0];
+      setSelectedKey(list[0].name);
+    }
+  }, [files]);
+  const treeData = (0, import_react8.useMemo)(
+    () => buildTreeData(fileList, expandedKeys),
+    [fileList, expandedKeys]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (treeData.length > 0 && expandedKeys.length === 0) {
+      const getAllKeys = (nodes) => {
+        let keys = [];
+        nodes.forEach((node) => {
+          if (!node.isLeaf) {
+            keys.push(node.key);
+            if (node.children) {
+              keys = keys.concat(getAllKeys(node.children));
+            }
+          }
+        });
+        return keys;
+      };
+      setExpandedKeys(getAllKeys(treeData));
+    }
+  }, [treeData.length]);
+  const selectedFile = (0, import_react8.useMemo)(() => {
+    return fileList.find((f) => f.name === selectedKey);
+  }, [fileList, selectedKey]);
+  const handleCopy = () => {
+    if (!selectedFile) return;
+    const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
+    navigator.clipboard.writeText(content).then(() => {
+      setCopied(true);
+      import_antd7.message.success("Copied to clipboard");
+    });
+  };
+  const handleDownload = () => {
+    if (!selectedFile) return;
+    const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    const fileName = selectedFile.name.split("/").pop() || selectedFile.name;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  const renderContent = () => {
+    if (!selectedFile) {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.emptyState, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_antd7.Empty,
+        {
+          description: "Select a file to preview",
+          image: import_antd7.Empty.PRESENTED_IMAGE_SIMPLE
+        }
+      ) });
+    }
+    const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        style: { minHeight: "100%", display: "flex", flexDirection: "column" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Tooltip, { title: "Copy Content", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_antd7.Button,
+              {
+                type: "text",
+                icon: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.CheckOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.CopyOutlined, {}),
+                onClick: handleCopy,
+                size: "small"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Tooltip, { title: "Download File", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_antd7.Button,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.DownloadOutlined, {}),
+                onClick: handleDownload,
+                size: "small"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.contentBody, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MDResponse, { content }) })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_antd7.Splitter, { className: styles.splitter, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Splitter.Panel, { defaultSize: "25%", min: "15%", max: "40%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.leftPanel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_antd7.Tree,
+      {
+        showIcon: true,
+        blockNode: true,
+        showLine: true,
+        className: styles.fileTree,
+        treeData,
+        selectedKeys: selectedKey ? [selectedKey] : [],
+        expandedKeys,
+        onExpand: setExpandedKeys,
+        onSelect: (keys, info) => {
+          if (keys.length > 0) {
+            const key = keys[0];
+            const file = fileList.find((f) => f.name === key);
+            if (file) {
+              setSelectedKey(key);
+            } else {
+              if (expandedKeys.includes(key)) {
+                setExpandedKeys(expandedKeys.filter((k) => k !== key));
+              } else {
+                setExpandedKeys([...expandedKeys, key]);
+              }
+            }
+          } else if (info.node.key) {
+            const key = info.node.key;
+            const file = fileList.find((f) => f.name === key);
+            if (!file) {
+              if (expandedKeys.includes(key)) {
+                setExpandedKeys(expandedKeys.filter((k) => k !== key));
+              } else {
+                setExpandedKeys([...expandedKeys, key]);
+              }
+            }
+          }
+        }
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd7.Splitter.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: styles.rightPanel, children: renderContent() }) })
+  ] }) });
+};
+
+// src/components/GenUI/elements/attachments_card.tsx
+var import_x = require("@ant-design/x");
+var import_antd8 = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var AttachmentsCard = ({
+  data,
+  eventHandler,
+  component_key,
+  size = "medium",
+  columns = 1,
+  showDownloadButton = false
+}) => {
+  const { Text: Text8 } = import_antd8.Typography;
+  const [showAll, setShowAll] = (0, import_react9.useState)(false);
+  const getStyles = () => {
+    switch (size) {
+      case "small":
+        return {
+          padding: "0px",
+          fontSize: "10px",
+          cardSize: "small"
+        };
+      case "large":
+        return {
+          padding: "16px",
+          fontSize: "16px",
+          cardSize: "default"
+        };
+      default:
+        return {
+          padding: "8px",
+          fontSize: "14px",
+          cardSize: "small"
+        };
+    }
+  };
+  const styles = getStyles();
+  const handleItemClick = (item) => {
+    eventHandler?.(
+      "__open_side_app",
+      {
+        component_key: "attachments",
+        data: { file_id: item.id, message: "\u9884\u89C8\uFF1A" + item.name }
+      },
+      ""
+    );
+  };
+  const getCardStyle = (item) => {
+    if (item.is_failure && columns > 1) {
+      return {
+        padding: 0
+      };
+    }
+    return { padding: 0, cursor: "pointer" };
+  };
+  const getFileCardStyle = (item) => {
+    const baseStyle = {
+      width: "100%",
+      backgroundColor: "transparent",
+      fontSize: styles.fontSize,
+      padding: styles.padding,
+      position: "relative"
+      // 添加相对定位，用于绝对定位下载按钮
+    };
+    if (item.is_failure && columns > 1) {
+      return {
+        ...baseStyle,
+        color: "gray"
+      };
+    }
+    return baseStyle;
+  };
+  const DownloadButton = ({ item }) => {
+    if (!showDownloadButton) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          right: 8,
+          transform: "translateY(-50%)",
+          zIndex: 10
+        },
+        onClick: (e) => e.stopPropagation()
+      }
+    );
+  };
+  const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Text8,
+    {
+      type: "secondary",
+      style: {
+        fontSize: size === "small" ? "10px" : void 0
+      },
+      children: item.created_at && (0, import_dayjs.default)(item.created_at).format("YYYY-MM-DD HH:mm:ss")
+    }
+  ) }) });
+  if (columns > 1) {
+    const displayData2 = data || [];
+    const shouldShowViewMore2 = displayData2.length > 4;
+    const visibleData2 = showAll ? displayData2 : displayData2.slice(0, 4);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Flex, { vertical: true, gap: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Row, { gutter: [8, 8], children: visibleData2.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd8.Col, { span: 24 / columns, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "div",
+        {
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(item);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadButton, { item }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_x.Attachments.FileCard,
+              {
+                style: getFileCardStyle(item),
+                item: {
+                  name: item.name,
+                  size: item.size,
+                  uid: item.id,
+                  description: renderFileDescription(item)
+                }
+              }
+            ),
+            item.files && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              AttachmentsCard,
+              {
+                data: item.files,
+                component_key: `${component_key}_${item.id}`,
+                eventHandler,
+                size: "small",
+                columns: 2,
+                showDownloadButton
+              }
+            )
+          ] })
+        }
+      ) }, item.id)) }),
+      shouldShowViewMore2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_antd8.Button,
+        {
+          type: "link",
+          onClick: () => setShowAll(!showAll),
+          style: { alignSelf: "center" },
+          children: showAll ? "\u663E\u793A\u66F4\u5C11" : `\u663E\u793A\u66F4\u591A (${displayData2.length - 4})`
+        }
+      )
+    ] });
+  }
+  const displayData = data || [];
+  const shouldShowViewMore = displayData.length > 4;
+  const visibleData = showAll ? displayData : displayData.slice(0, 4);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Flex, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
+    visibleData.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd8.Card, { size: styles.cardSize, style: getCardStyle(item), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadButton, { item }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_x.Attachments.FileCard,
+        {
+          style: getFileCardStyle(item),
+          item: {
+            name: item.name,
+            size: item.size,
+            uid: item.id,
+            description: renderFileDescription(item)
+          }
+        }
+      ),
+      item.files && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Text8, { type: "secondary", style: { fontSize: "12px" }, children: [
+          "\u5305\u542B\u6587\u4EF6(",
+          item.files.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          AttachmentsCard,
+          {
+            data: item.files,
+            component_key: `${component_key}_${item.id}`,
+            eventHandler,
+            size: "small",
+            columns: 2,
+            showDownloadButton
+          }
+        )
+      ] })
+    ] }) }, item.id)),
+    shouldShowViewMore && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_antd8.Button,
+      {
+        type: "link",
+        size: "small",
+        onClick: (evt) => {
+          evt.stopPropagation();
+          setShowAll(!showAll);
+        },
+        style: { alignSelf: "center" },
+        children: showAll ? "\u663E\u793A\u66F4\u5C11" : `\u663E\u793A\u66F4\u591A (${displayData.length - 4})`
+      }
+    )
+  ] });
+};
+
+// src/components/GenUI/elements/attachments_viewer_side_app.tsx
+var import_antd9 = require("antd");
+var import_react10 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function AttachmentsViewerSideApp({
+  data,
+  eventHandler,
+  component_key
+}) {
+  const [fileUri, setFileUri] = (0, import_react10.useState)();
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const { file_id } = data ?? {};
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_antd9.Skeleton, { active: true });
+  }
+  const canPreviewInIframe = (fileName) => {
+    if (!fileName) return false;
+    const extension = fileName?.split(".").pop()?.toLowerCase() || "";
+    const previewableExtensions = [
+      // PDF文档
+      "pdf",
+      // 图片类型
+      "jpg",
+      "jpeg",
+      "png",
+      "gif",
+      "svg",
+      "bmp",
+      "webp",
+      // 文本类型
+      "txt",
+      "csv",
+      "json",
+      "xml",
+      // 网页类型
+      "html",
+      "htm",
+      // 音频类型
+      "mp3",
+      "wav",
+      "ogg",
+      // 视频类型
+      "mp4",
+      "webm"
+    ];
+    return previewableExtensions.includes(extension);
+  };
+  const isPreviewable = fileUri?.fileName ? canPreviewInIframe(fileUri.fileName) : false;
+  return isPreviewable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "iframe",
+    {
+      style: { width: "100%", height: "100%", border: 0 },
+      src: fileUri?.url
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_antd9.Empty,
+    {
+      description: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: "\u6682\u65F6\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u8BF7\u4E0B\u8F7D\u540E\u67E5\u770B\u3002" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_antd9.Button, { type: "link", href: fileUri?.url, download: fileUri?.fileName, children: [
+          "\u4E0B\u8F7D",
+          fileUri?.fileName
+        ] })
+      ] }),
+      image: import_antd9.Empty.PRESENTED_IMAGE_DEFAULT
+    }
+  );
+}
+
+// src/components/GenUI/elements/WriteFile.tsx
+var import_antd11 = require("antd");
+
+// src/components/GenUI/elements/ContentPreviewCollapse.tsx
+var import_react11 = require("react");
+var import_antd10 = require("antd");
+var import_antd_style5 = require("antd-style");
+var import_icons8 = require("@ant-design/icons");
+var import_CollapsePanel3 = __toESM(require("antd/es/collapse/CollapsePanel"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DEFAULT_COLLAPSED_MAX_HEIGHT = 180;
+var DEFAULT_EXPANDED_MAX_HEIGHT = 500;
+var useStyle4 = (0, import_antd_style5.createStyles)(
+  ({ css }, { showShadow }) => ({
+    collapse: css`
+      .ant-collapse-header {
+        position: relative;
+        z-index: 1;
+        transition: box-shadow 0.2s ease;
+        box-shadow: ${showShadow ? "0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : "none"};
+      }
+
+      .ant-collapse-content-box {
+        padding-top: 0 !important;
+      }
+    `,
+    contentContainer: css`
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      &.expanded {
+        overflow: auto;
+        display: block;
+      }
+    `,
+    content: css`
+      flex-shrink: 0;
+    `,
+    toggleButton: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      padding: 8px 0;
+      margin-top: 8px;
+      border-top: 1px solid rgba(0, 0, 0, 0.06);
+      cursor: pointer;
+      color: #1890ff;
+      font-size: 12px;
+      user-select: none;
+      transition: color 0.2s;
+
+      &:hover {
+        color: #40a9ff;
+      }
+    `
+  })
+);
+var ContentPreviewCollapse = ({
+  panelKey,
+  header,
+  extra,
+  expandIcon,
+  children,
+  collapsedMaxHeight = DEFAULT_COLLAPSED_MAX_HEIGHT,
+  expandedMaxHeight = DEFAULT_EXPANDED_MAX_HEIGHT,
+  defaultExpanded = true,
+  minWidth = 400,
+  showAllText = "Show all content",
+  showLessText = "Show less"
+}) => {
+  const [showFullContent, setShowFullContent] = (0, import_react11.useState)(false);
+  const [isOverflowing, setIsOverflowing] = (0, import_react11.useState)(false);
+  const contentRef = (0, import_react11.useRef)(null);
+  const showShadow = isOverflowing && !showFullContent;
+  const { styles, cx } = useStyle4({ showShadow });
+  const checkOverflow = (0, import_react11.useCallback)(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setIsOverflowing(scrollHeight > collapsedMaxHeight);
+    }
+  }, [collapsedMaxHeight]);
+  (0, import_react11.useEffect)(() => {
+    const element = contentRef.current;
+    if (!element) return;
+    checkOverflow();
+    const resizeObserver = new ResizeObserver(() => {
+      checkOverflow();
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [children, checkOverflow]);
+  const handleToggleContent = (e) => {
+    e.stopPropagation();
+    setShowFullContent(!showFullContent);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_antd10.Collapse,
+    {
+      className: styles.collapse,
+      size: "small",
+      bordered: false,
+      defaultActiveKey: defaultExpanded ? [panelKey] : [],
+      expandIcon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_CollapsePanel3.default,
+        {
+          header,
+          extra,
+          style: { minWidth },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "div",
+              {
+                className: cx(styles.contentContainer, showFullContent && "expanded"),
+                style: {
+                  maxHeight: showFullContent ? expandedMaxHeight : collapsedMaxHeight
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: contentRef, className: styles.content, children })
+              }
+            ),
+            isOverflowing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: styles.toggleButton, onClick: handleToggleContent, children: showFullContent ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.UpOutlined, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: showLessText })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons8.DownOutlined, { style: { fontSize: 10 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: showAllText })
+            ] }) })
+          ]
+        },
+        panelKey
+      )
+    }
+  );
+};
+
+// src/components/GenUI/elements/WriteFile.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var { Text: Text6 } = import_antd11.Typography;
+var WriteFile = ({
+  data,
+  component_key,
+  eventHandler,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const { file_path, content } = toolCallData?.args || {};
+  if (!toolCallData) {
+    return null;
+  }
+  const expandIcon = () => getFileIcon(file_path);
+  const header = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_antd11.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text6, { strong: true, children: "New" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text6, { title: file_path, children: file_path?.split("/")?.pop() || "" })
+  ] });
+  const handleItemClick = (toolCallData2) => {
+    eventHandler?.(
+      "__open_side_app",
+      {
+        component_key: "file_content_diff_view",
+        message: file_path,
+        data: {
+          old_code: "",
+          new_code: content
+        }
+      },
+      ""
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon,
+      extra: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_antd11.Button,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "Diff View"
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MDResponse, { content })
+    }
+  );
+};
+
+// src/components/GenUI/elements/file_content_diff_view.tsx
+var import_react_diff_viewer = __toESM(require("@alexbruf/react-diff-viewer"));
+var import_react_diff_viewer2 = require("@alexbruf/react-diff-viewer/index.css");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FileContentDiffView = ({
+  data,
+  eventHandler,
+  interactive = true,
+  default_open_in_side_app = true
+}) => {
+  const { old_code, new_code } = data;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_diff_viewer.default,
+    {
+      oldValue: old_code,
+      newValue: new_code,
+      splitView: false
+    }
+  );
+};
+
+// src/components/GenUI/elements/EditFile.tsx
+var import_antd12 = require("antd");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var { Text: Text7 } = import_antd12.Typography;
+var EditFile = ({
+  data,
+  component_key,
+  eventHandler,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const { file_path, new_string, old_string } = toolCallData?.args || {};
+  if (!toolCallData) {
+    return null;
+  }
+  const expandIcon = () => getFileIcon(file_path);
+  const header = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd12.Space, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text7, { strong: true, children: "Edit" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text7, { title: file_path, children: file_path?.split("/")?.pop() || "" })
+  ] });
+  const handleItemClick = (toolCallData2) => {
+    eventHandler?.(
+      "__open_side_app",
+      {
+        component_key: "file_content_diff_view",
+        message: file_path,
+        data: {
+          old_code: old_string,
+          new_code: new_string
+        }
+      },
+      ""
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon,
+      extra: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_antd12.Button,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "Diff View"
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MDResponse, { content: new_string })
+    }
+  );
+};
+
+// src/components/GenUI/elements/builtIns.tsx
 var elements = {
   action_show_attachments_uploader: {
     card_view: () => null,
@@ -1288,8 +2311,31 @@ var elements = {
   },
   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];
@@ -1304,15 +2350,15 @@ var regsiterElement = (language, ElementMeta) => {
 
 // src/components/GenUI/MDMermaid.tsx
 var import_mermaid = __toESM(require("mermaid"));
-var import_react8 = require("react");
+var import_react12 = require("react");
 var import_uuid = require("uuid");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var MDMermaid = ({ children = [] }) => {
-  const domId = (0, import_react8.useRef)(`dom${(0, import_uuid.v4)()}`);
+  const domId = (0, import_react12.useRef)(`dom${(0, import_uuid.v4)()}`);
   const code = String(children);
-  const target = (0, import_react8.useRef)(null);
-  const targetInternal = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const target = (0, import_react12.useRef)(null);
+  const targetInternal = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (target.current && code) {
       import_mermaid.default.initialize({
         startOnLoad: true,
@@ -1374,13 +2420,13 @@ var MDMermaid = ({ children = [] }) => {
       });
     }
   }, [code]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { id: domId.current, style: { display: "none" } }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("code", { id: domId.current, style: { display: "none" } }) });
 };
 
 // src/components/GenUI/MDResponse.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SyntaxHighlighter = import_react_syntax_highlighter.Prism;
-var useStyles = (0, import_antd_style4.createStyles)(({ token, css }) => ({
+var useStyles2 = (0, import_antd_style6.createStyles)(({ token, css }) => ({
   markdownTableContainer: css`
     overflow-x: auto;
     width: 100%;
@@ -1469,26 +2515,26 @@ var MDResponse = ({
   noGenUI,
   eventHandler
 }) => {
-  const { styles } = useStyles();
-  const config = (0, import_react9.useMemo)(
+  const { styles } = useStyles2();
+  const config = (0, import_react13.useMemo)(
     () => ({
       components: {
         a({ node, ...props }) {
           if (embeddedLink) {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IFrameCard, { src: props.href });
-          } else return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...props });
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { ...props });
         },
         table({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("table", { className: styles.markdownTable, ...props }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("table", { className: styles.markdownTable, ...props }) });
         },
         th({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { className: styles.markdownTh, ...props });
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("th", { className: styles.markdownTh, ...props });
         },
         td({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { className: styles.markdownTd, ...props });
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", { className: styles.markdownTd, ...props });
         },
         tr({ node, ...props }) {
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { className: styles.markdownTr, ...props });
+          return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { className: styles.markdownTr, ...props });
         },
         code({ children, className, node, ...rest }) {
           const match = /language-(\w+)/.exec(className || "");
@@ -1501,23 +2547,23 @@ var MDResponse = ({
                 childrenData = JSON.parse(children);
               } catch (error) {
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Element,
                 {
                   interactive,
                   component_key: language,
                   data: childrenData,
-                  eventHandler: (e, data, message2, agent) => {
-                    eventHandler?.(e, data, message2, agent);
+                  eventHandler: (e, data, message3, agent) => {
+                    eventHandler?.(e, data, message3, agent);
                   }
                 }
               );
             }
             switch (language) {
               case "mermaid":
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MDMermaid, { children });
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MDMermaid, { children });
               default:
-                return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   SyntaxHighlighter,
                   {
                     ...rest,
@@ -1529,7 +2575,7 @@ var MDResponse = ({
                 );
             }
           } else {
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { ...rest, className, children });
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("code", { ...rest, className, children });
           }
         }
       },
@@ -1538,15 +2584,15 @@ var MDResponse = ({
     }),
     [userData, interactive, embeddedLink, styles]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_markdown.default, { ...config, children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: styles.markdownContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_markdown.default, { ...config, children: content }) });
 };
 var MDViewFormItem = ({ value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MDResponse, { content: value || "" });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MDResponse, { content: value || "" });
 };
 var IFrameCard = ({ src }) => {
-  const containerRef = (0, import_react9.useRef)(null);
-  const [width, setWidth] = (0, import_react9.useState)("640px");
-  const [height, setHeight] = (0, import_react9.useState)("320px");
+  const containerRef = (0, import_react13.useRef)(null);
+  const [width, setWidth] = (0, import_react13.useState)("640px");
+  const [height, setHeight] = (0, import_react13.useState)("320px");
   const valid_images = [
     "jpg",
     "jpeg",
@@ -1563,29 +2609,29 @@ var IFrameCard = ({ src }) => {
   }
   const spitedSrc = src.split(".");
   if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src, style: { width: "100%" } }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("img", { src, style: { width: "100%" } }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href: src, target: "_black", children: src }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href: src, target: "_black", children: src }) });
   }
 };
 
 // src/components/Chat/Chating.tsx
-var import_icons5 = require("@ant-design/icons");
-var import_x = require("@ant-design/x");
-var import_antd6 = require("antd");
+var import_icons9 = require("@ant-design/icons");
+var import_x2 = require("@ant-design/x");
+var import_antd13 = require("antd");
 var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
-var import_react10 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_react_i18next = require("react-i18next");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var LazyBubble = ({
-  message: message2,
+  message: message3,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const [isVisible, setIsVisible] = (0, import_react10.useState)(false);
-  const [wasEverVisible, setWasEverVisible] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react14.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react14.useState)(false);
+  const [wasEverVisible, setWasEverVisible] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -1605,22 +2651,22 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message2.content ? Math.min(100, message2.content.length / 5) : 100;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+    const estimatedHeight = message3.content ? Math.min(100, message3.content.length / 5) : 100;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
 };
-var MemoizedBubbleList = (0, import_react10.memo)(
+var MemoizedBubbleList = (0, import_react14.memo)(
   ({
     items,
     roles,
     className
-  }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_x.Bubble.List,
+  }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_x2.Bubble.List,
     {
       autoScroll: true,
       items,
@@ -1652,15 +2698,17 @@ var Chating = ({
   extra,
   attachment_placeholder,
   extraMeta = [],
-  uploadAction = "/api/file_storage/upload?path=temp"
+  uploadAction = "/api/file_storage/upload?path=temp",
+  files,
+  todos
 }) => {
   const { t } = (0, import_react_i18next.useTranslation)();
-  const [content, setContent] = (0, import_react10.useState)("");
-  const [attachedFiles, setAttachedFiles] = (0, import_react10.useState)([]);
-  const [headerOpen, setHeaderOpen] = (0, import_react10.useState)(false);
-  const attachmentsRef = (0, import_react10.useRef)(null);
-  const senderRef = import_react10.default.useRef(null);
-  (0, import_react10.useEffect)(() => {
+  const [content, setContent] = (0, import_react14.useState)("");
+  const [attachedFiles, setAttachedFiles] = (0, import_react14.useState)([]);
+  const [headerOpen, setHeaderOpen] = (0, import_react14.useState)(false);
+  const attachmentsRef = (0, import_react14.useRef)(null);
+  const senderRef = import_react14.default.useRef(null);
+  (0, import_react14.useEffect)(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -1669,19 +2717,19 @@ var Chating = ({
       }
     });
   }, []);
-  const messageLengthRef = (0, import_react10.useRef)(messages?.length ?? 0);
-  (0, import_react10.useEffect)(() => {
+  const messageLengthRef = (0, import_react14.useRef)(messages?.length ?? 0);
+  (0, import_react14.useEffect)(() => {
     if (messages?.length) {
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = (0, import_react10.useCallback)(
-    (message2) => {
-      const { content: content2, files, id } = message2;
+  const renderContent = (0, import_react14.useCallback)(
+    (message3) => {
+      const { content: content2, files: files2, id } = message3;
       try {
         const json = JSON.parse(content2);
         if (json.action && json.message) {
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             MDResponse,
             {
               content: json.message,
@@ -1691,13 +2739,13 @@ var Chating = ({
         }
       } catch (error2) {
       }
-      const tool_calls_md = message2.tool_calls?.map((tool_call) => {
+      const tool_calls_md = message3.tool_calls?.map((tool_call) => {
         return `\`\`\`tool_call
 ${JSON.stringify(tool_call)}
 \`\`\``;
       }) || [];
       const content_md = [content2, ...tool_calls_md].join("\n");
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         MDResponse,
         {
           content: content_md,
@@ -1707,18 +2755,18 @@ ${JSON.stringify(tool_call)}
     },
     [handleMDResponseEvent]
   );
-  const items = (0, import_react10.useMemo)(
-    () => messages.map((message2, index) => ({
-      key: message2.id,
-      role: message2.role,
+  const items = (0, import_react14.useMemo)(
+    () => messages.map((message3, index) => ({
+      key: message3.id,
+      role: message3.role,
       typing: false,
-      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         LazyBubble,
         {
-          message: message2,
+          message: message3,
           renderContent,
           autoLoadRightPanel: () => {
-            const { content: content2, role } = message2;
+            const { content: content2, role } = message3;
             const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
             if (index === messages.length - 1 && isNewAddedMessage && role === "ai") {
               try {
@@ -1762,13 +2810,13 @@ ${JSON.stringify(tool_call)}
   const onSubmit = (nextContent) => {
     if (!nextContent && attachedFiles.length === 0) return;
     if (attachedFiles.filter((f) => f.status !== "done").length > 0) {
-      import_antd6.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
+      import_antd13.message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
       return;
     }
     if (!nextContent && attachedFiles.length > 0) {
       nextContent = default_submit_message || "\u8BB0\u8D26";
     }
-    const files = attachedFiles.map(
+    const files2 = attachedFiles.map(
       (file) => isArchiveFile(file) ? {
         name: file.response.zipFileName || file.response.rarFileName,
         id: file.response.zipFileId || file.response.rarFileId,
@@ -1786,14 +2834,14 @@ ${JSON.stringify(tool_call)}
         id: file.response.id
       }
     );
-    const files_md = files.length > 0 ? [
+    const files_md = files2.length > 0 ? [
       "",
       "\u6211\u5DF2\u7ECF\u63D0\u4EA4\u4E86\u4EE5\u4E0B\u6587\u4EF6\uFF1A",
       "```attachments",
-      JSON.stringify(files),
+      JSON.stringify(files2),
       "```"
     ].join("\n") : "";
-    sendMessage({ input: { message: nextContent + files_md, files } });
+    sendMessage({ input: { message: nextContent + files_md, files: files2 } });
     setContent("");
     setAttachedFiles([]);
     setHeaderOpen(false);
@@ -1806,7 +2854,7 @@ ${JSON.stringify(tool_call)}
       setHeaderOpen(true);
     }
     if (info.file?.response?.error || info.file.status === "error") {
-      import_antd6.message.error(
+      import_antd13.message.error(
         `${info.file.name} file upload failed.${info.file?.response?.message}`
       );
     }
@@ -1818,23 +2866,23 @@ ${JSON.stringify(tool_call)}
   const beforeUpload = (file) => {
     const isLessThan20MB = file.size / 1024 / 1024 < 20;
     if (!isLessThan20MB) {
-      import_antd6.message.error(
+      import_antd13.message.error(
         `File must be smaller than 20MB! ${file.name} is too large.`
       );
       return false;
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_antd6.Button,
+  const attachmentsNode = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_antd13.Button,
     {
       type: "text",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_x.Sender.Header,
+  const senderHeader = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_x2.Sender.Header,
     {
       title: "Attachments",
       open: headerOpen,
@@ -1845,8 +2893,8 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_x.Attachments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_x2.Attachments,
         {
           ref: attachmentsRef,
           items: attachedFiles,
@@ -1867,7 +2915,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons5.CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -1899,7 +2947,7 @@ ${JSON.stringify(tool_call)}
       }
     }
   };
-  const extraMetaComponents = (0, import_react10.useMemo)(() => {
+  const extraMetaComponents = (0, import_react14.useMemo)(() => {
     if (extraMeta?.length > 0) {
       return extraMeta.map((meta) => {
         const Element = getElement(meta.id)?.card_view;
@@ -1908,13 +2956,13 @@ ${JSON.stringify(tool_call)}
           try {
           } catch (error2) {
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Element,
             {
               component_key: meta.id,
               data: childrenData,
-              eventHandler: (e, data, message2, agent) => {
-                handleMDResponseEvent?.(e, data, message2, agent);
+              eventHandler: (e, data, message3, agent) => {
+                handleMDResponseEvent?.(e, data, message3, agent);
               }
             },
             meta.id
@@ -1924,20 +2972,98 @@ ${JSON.stringify(tool_call)}
     }
     return void 0;
   }, [extraMeta]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_x.Welcome,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_x2.Welcome,
         {
           style: { padding: 8 },
           variant: "borderless",
           description,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
           title: name || "Fina",
-          extra: extra || extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+          extra: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_antd13.Space, { children: [
+            extra,
+            todos && todos.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              import_antd13.Popover,
+              {
+                content: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: 400 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  Todo,
+                  {
+                    data: todos,
+                    component_key: "header_todos",
+                    eventHandler: handleMDResponseEvent
+                  }
+                ) }),
+                title: "Todos",
+                trigger: "click",
+                placement: "bottomRight",
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  import_antd13.Tooltip,
+                  {
+                    title: `${todos.filter((item) => item.status === "completed").length} / ${todos.length} tasks completed`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      import_antd13.Progress,
+                      {
+                        type: "circle",
+                        strokeColor: {
+                          "0%": "#91caff",
+                          "100%": "#003eb3"
+                        },
+                        percent: Math.round(
+                          todos.filter((item) => item.status === "completed").length / todos.length * 100
+                        ),
+                        status: todos.some((item) => item.status === "in_progress") ? "active" : "normal",
+                        width: 30,
+                        format: () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "center",
+                              lineHeight: 1
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { style: { fontSize: 8 }, children: [
+                              todos.filter(
+                                (item) => item.status === "completed"
+                              ).length,
+                              "/",
+                              todos.length
+                            ] })
+                          }
+                        )
+                      }
+                    ) })
+                  }
+                )
+              }
+            ),
+            files && Object.keys(files).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Tooltip, { title: "File Explorer", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              import_antd13.Badge,
+              {
+                count: Object.keys(files).length,
+                size: "small",
+                color: "blue",
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  import_antd13.Button,
+                  {
+                    type: "text",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons9.FileTextOutlined, {}),
+                    onClick: () => onOpenSidePanel({
+                      component_key: "file_explorer",
+                      message: "File Explorer",
+                      data: { files }
+                    })
+                  }
+                )
+              }
+            ) }),
+            extraMetaComponents && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Space, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+          ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
           style: {
@@ -1946,17 +3072,17 @@ ${JSON.stringify(tool_call)}
         }
       )
     ] }),
-    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       MemoizedBubbleList,
       {
         items,
         roles,
         className: styles.messages
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_x.Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_x.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_antd6.Alert,
+    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { flex: 1 } }),
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_x2.Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_x2.Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_antd13.Alert,
       {
         type: "error",
         banner: true,
@@ -1965,8 +3091,8 @@ ${JSON.stringify(tool_call)}
         message: `${error.message}`
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_x.Sender,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_x2.Sender,
       {
         allowSpeech: true,
         ref: senderRef,
@@ -1980,7 +3106,7 @@ ${JSON.stringify(tool_call)}
         className: styles.sender,
         actions: (ori, { components }) => {
           const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_antd6.Flex, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingButton, { type: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd13.Flex, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoadingButton, { type: "default" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             SendButton,
             {
               type: "primary",
@@ -1989,8 +3115,8 @@ ${JSON.stringify(tool_call)}
             }
           ) });
         },
-        onPasteFile: (_, files) => {
-          Array.from(files).forEach((file) => {
+        onPasteFile: (_, files2) => {
+          Array.from(files2).forEach((file) => {
             attachmentsRef.current?.upload(file);
           });
           setHeaderOpen(true);
@@ -2001,60 +3127,60 @@ ${JSON.stringify(tool_call)}
 };
 
 // src/components/Chat/ThinkingChain.tsx
-var import_icons6 = require("@ant-design/icons");
-var import_x2 = require("@ant-design/x");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_icons10 = require("@ant-design/icons");
+var import_x3 = require("@ant-design/x");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function getStatusIcon2(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.CheckCircleOutlined, {});
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.InfoCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.InfoCircleOutlined, {});
     case "pending":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.LoadingOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.LoadingOutlined, {});
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons6.CheckCircleOutlined, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_icons10.CheckCircleOutlined, {});
   }
 }
-var ThinkingChain = ({ message: message2 }) => {
-  const title = message2.name || message2.content.split("\n")[0];
+var ThinkingChain = ({ message: message3 }) => {
+  const title = message3.name || message3.content.split("\n")[0];
   const items = [
     {
-      key: message2.id,
+      key: message3.id,
       title,
-      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: message2.content }),
-      status: message2.status,
-      icon: getStatusIcon2(message2.status)
+      content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MDResponse, { content: message3.content }),
+      status: message3.status,
+      icon: getStatusIcon2(message3.status)
     }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_x2.ThoughtChain,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_x3.ThoughtChain,
     {
       items,
-      collapsible: message2.status === "success" ? true : false,
+      collapsible: message3.status === "success" ? true : false,
       size: "small"
     }
   );
 };
-var ThinkingChainGroup = ({ message: message2 }) => {
+var ThinkingChainGroup = ({ message: message3 }) => {
   const title = "\u601D\u8003\u8FC7\u7A0B";
-  const children = message2.items?.map((item) => ({
+  const children = message3.items?.map((item) => ({
     key: item.id,
     title: item.name || item.content.split("\n")[0],
-    content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: item.content }),
+    content: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MDResponse, { content: item.content }),
     status: item.status,
     icon: getStatusIcon2(item.status)
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_x2.ThoughtChain, { items: children, collapsible: true, size: "small" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_x3.ThoughtChain, { items: children, collapsible: true, size: "small" });
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-var import_icons7 = require("@ant-design/icons");
-var import_antd7 = require("antd");
-var import_antd_style5 = require("antd-style");
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var useStyle4 = (0, import_antd_style5.createStyles)(({ token, css }) => {
+var import_icons11 = require("@ant-design/icons");
+var import_antd14 = require("antd");
+var import_antd_style7 = require("antd-style");
+var import_react15 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var useStyle5 = (0, import_antd_style7.createStyles)(({ token, css }) => {
   return {
     tabContainer: css`
       .ant-tabs-content-holder {
@@ -2073,9 +3199,9 @@ var useStyle4 = (0, import_antd_style5.createStyles)(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = ({
@@ -2084,10 +3210,10 @@ var SideAppViewBrowser = ({
   onClose,
   onChangeSize
 }) => {
-  const { styles } = useStyle4();
-  const [activeKey, setActiveKey] = (0, import_react11.useState)(JSON.stringify(open_uri));
-  const [currentSize, setCurrentSize] = (0, import_react11.useState)(open_uri.size || "large");
-  const [items, setItems] = (0, import_react11.useState)([]);
+  const { styles } = useStyle5();
+  const [activeKey, setActiveKey] = (0, import_react15.useState)(JSON.stringify(open_uri));
+  const [currentSize, setCurrentSize] = (0, import_react15.useState)(open_uri.size || "large");
+  const [items, setItems] = (0, import_react15.useState)([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -2123,7 +3249,7 @@ var SideAppViewBrowser = ({
       remove(targetKey);
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const SideAppView = getElement(open_uri.component_key).side_app_view || EmptySideAppView;
     const key = JSON.stringify(open_uri);
     if (items.find((item) => item.key === key)) {
@@ -2133,7 +3259,7 @@ var SideAppViewBrowser = ({
     add(
       key,
       open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         SideAppView,
         {
           component_key: open_uri.component_key,
@@ -2143,7 +3269,7 @@ var SideAppViewBrowser = ({
       )
     );
   }, [open_uri]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (open_uri.size && open_uri.size !== currentSize) {
       setCurrentSize(open_uri.size);
     }
@@ -2181,26 +3307,26 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CompressOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.FullscreenOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_antd7.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_antd14.Tabs,
     {
       className: styles.tabContainer,
       type: "editable-card",
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_antd7.Button,
+        right: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_antd14.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -2210,13 +3336,13 @@ var SideAppViewBrowser = ({
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            import_antd7.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_antd14.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons7.CloseOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons11.CloseOutlined, {}),
               onClick: () => {
                 onClose();
               }
@@ -2233,15 +3359,16 @@ var SideAppViewBrowser = ({
 };
 
 // src/components/Chat/context.tsx
-var import_react12 = require("react");
-var chatContext = (0, import_react12.createContext)({
-  eventHandler: (component_key, data, message2) => {
+var import_react16 = require("react");
+var chatContext = (0, import_react16.createContext)({
+  eventHandler: (component_key, data, message3) => {
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AxiomLatticeProvider,
   Chating,
+  FileExplorer,
   MDMermaid,
   MDResponse,
   MDViewFormItem,
@@ -2249,7 +3376,6 @@ var chatContext = (0, import_react12.createContext)({
   ThinkingChain,
   ThinkingChainGroup,
   chatContext,
-  elements,
   getElement,
   regsiterElement,
   useAgentGraph,