@axiom-lattice/react-sdk 2.0.4 → 2.1.0

package/dist/index.mjs

@@ -102,7 +102,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,
@@ -111,7 +111,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message2 || command?.resume?.message || "",
+        content: message3 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -553,8 +553,8 @@ 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 useRef4, useState as useState7 } from "react";
-import { createStyles as createStyles4 } from "antd-style";
+import { useMemo as useMemo3, useRef as useRef5, useState as useState11 } from "react";
+import { createStyles as createStyles6 } from "antd-style";
 import rehypeRaw from "rehype-raw";
 
 // src/components/GenUI/elements/confirm_feedback.tsx
@@ -578,7 +578,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] = useState5(false);
   const { styles } = useStyle();
   return /* @__PURE__ */ jsx2(Card, { size: "small", className: `shadow-sm ${styles.card}`, bordered: false, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
@@ -597,7 +597,7 @@ var ConfirmFeedback = ({
         children: "\u8BF7\u6C42\u786E\u8BA4"
       }
     ),
-    /* @__PURE__ */ jsx2(MDResponse, { content: message2 }),
+    /* @__PURE__ */ jsx2(MDResponse, { content: message3 }),
     options ? /* @__PURE__ */ jsx2(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx2(
       Button,
       {
@@ -678,7 +678,7 @@ var GenericDataTable = ({
   interactive = true,
   default_open_in_side_app = true
 }) => {
-  const { dataSource, message: message2 } = data ?? {};
+  const { dataSource, message: message3 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = useState6([]);
   const processedData = dataSource?.map((item, index) => ({
     ...item,
@@ -760,7 +760,7 @@ var GenericDataTable = ({
     {
       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: message2 || "" }) }),
+        /* @__PURE__ */ jsx3(Space2, { children: /* @__PURE__ */ jsx3(Text2, { strong: true, style: { fontSize: 16 }, children: message3 || "" }) }),
         /* @__PURE__ */ jsxs2(Space2, { children: [
           /* @__PURE__ */ jsx3(
             Button2,
@@ -783,8 +783,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"
                   },
                   ""
@@ -1019,9 +1019,12 @@ function getStatusIcon(status) {
       return /* @__PURE__ */ jsx6(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) => {
@@ -1078,6 +1081,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__ */ jsx6(
     Collapse,
     {
@@ -1113,8 +1124,8 @@ var useStyle3 = createStyles3(({ 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`
@@ -1233,7 +1244,1028 @@ var Todo = ({
   ] }) });
 };
 
-// src/components/GenUI/elements/index.tsx
+// src/components/GenUI/elements/WriteTodos.tsx
+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";
+var { Text: Text5 } = Typography6;
+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__ */ jsx8(UnorderedListOutlined, {});
+  };
+  const header = /* @__PURE__ */ jsxs6(Space6, { children: [
+    /* @__PURE__ */ jsx8(Text5, { strong: true, children: "Todos" }),
+    /* @__PURE__ */ jsxs6(Text5, { style: { fontSize: 12 }, type: "secondary", children: [
+      completedCount,
+      "/",
+      totalCount,
+      " Done"
+    ] })
+  ] });
+  if (!toolCallData) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8(
+    Collapse2,
+    {
+      size: "small",
+      bordered: false,
+      defaultActiveKey: [],
+      expandIcon,
+      children: /* @__PURE__ */ jsx8(
+        CollapsePanel2,
+        {
+          header,
+          style: { minWidth: 400 },
+          children: /* @__PURE__ */ jsx8(
+            Todo,
+            {
+              data: data.args.todos,
+              component_key,
+              eventHandler,
+              interactive
+            }
+          )
+        },
+        toolCallData.id
+      )
+    }
+  );
+};
+
+// src/components/GenUI/FileExplorer.tsx
+import { useState as useState7, useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { Splitter, Tree, Empty, Button as Button3, Tooltip, message } from "antd";
+import {
+  FolderOutlined,
+  FolderOpenOutlined,
+  CopyOutlined,
+  DownloadOutlined as DownloadOutlined2,
+  CheckOutlined
+} from "@ant-design/icons";
+import { createStyles as createStyles4 } from "antd-style";
+
+// src/components/GenUI/elements/getFileIcon.tsx
+import {
+  CodeOutlined as CodeOutlined2,
+  FileImageOutlined,
+  FileMarkdownOutlined,
+  FileOutlined,
+  FileTextOutlined,
+  FileUnknownOutlined,
+  Html5Outlined
+} from "@ant-design/icons";
+import { jsx as jsx9 } 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" } });
+    case "js":
+    case "jsx":
+      return /* @__PURE__ */ jsx9(CodeOutlined2, { style: { ...iconStyle, color: "#f7df1e" } });
+    case "html":
+      return /* @__PURE__ */ jsx9(Html5Outlined, { style: { ...iconStyle, color: "#e34c26" } });
+    case "css":
+    case "less":
+    case "scss":
+      return /* @__PURE__ */ jsx9(FileUnknownOutlined, { style: { ...iconStyle, color: "#563d7c" } });
+    case "md":
+      return /* @__PURE__ */ jsx9(FileMarkdownOutlined, { style: { ...iconStyle, color: "#083fa1" } });
+    case "json":
+      return /* @__PURE__ */ jsx9(FileTextOutlined, { style: { ...iconStyle, color: "#fbc02d" } });
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "svg":
+      return /* @__PURE__ */ jsx9(FileImageOutlined, { style: { ...iconStyle, color: "#4caf50" } });
+    default:
+      return /* @__PURE__ */ jsx9(FileOutlined, { style: { ...iconStyle, color: "#9e9e9e" } });
+  }
+};
+
+// src/components/GenUI/FileExplorer.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var useStyles = createStyles4(({ 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__ */ jsx10(FolderOpenOutlined, { style: iconStyle }) : /* @__PURE__ */ jsx10(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__ */ jsx10(
+          "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] = useState7([]);
+  const [selectedKey, setSelectedKey] = useState7("");
+  const [expandedKeys, setExpandedKeys] = useState7([]);
+  const [copied, setCopied] = useState7(false);
+  useEffect4(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+  useEffect4(() => {
+    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 = useMemo2(
+    () => buildTreeData(fileList, expandedKeys),
+    [fileList, expandedKeys]
+  );
+  useEffect4(() => {
+    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 = useMemo2(() => {
+    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);
+      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__ */ jsx10("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx10(
+        Empty,
+        {
+          description: "Select a file to preview",
+          image: Empty.PRESENTED_IMAGE_SIMPLE
+        }
+      ) });
+    }
+    const content = Array.isArray(selectedFile.content) ? selectedFile.content.join("\n") : selectedFile.content;
+    return /* @__PURE__ */ jsxs7(
+      "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(
+              Button3,
+              {
+                type: "text",
+                icon: copied ? /* @__PURE__ */ jsx10(CheckOutlined, {}) : /* @__PURE__ */ jsx10(CopyOutlined, {}),
+                onClick: handleCopy,
+                size: "small"
+              }
+            ) }),
+            /* @__PURE__ */ jsx10(Tooltip, { title: "Download File", children: /* @__PURE__ */ jsx10(
+              Button3,
+              {
+                type: "text",
+                icon: /* @__PURE__ */ jsx10(DownloadOutlined2, {}),
+                onClick: handleDownload,
+                size: "small"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: styles.contentBody, children: /* @__PURE__ */ jsx10(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(
+      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__ */ jsx10(Splitter.Panel, { children: /* @__PURE__ */ jsx10("div", { className: styles.rightPanel, children: renderContent() }) })
+  ] }) });
+};
+
+// src/components/GenUI/elements/attachments_card.tsx
+import { Attachments } from "@ant-design/x";
+import {
+  Card as Card5,
+  Flex as Flex3,
+  Space as Space7,
+  Typography as Typography7,
+  Row,
+  Col,
+  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";
+var AttachmentsCard = ({
+  data,
+  eventHandler,
+  component_key,
+  size = "medium",
+  columns = 1,
+  showDownloadButton = false
+}) => {
+  const { Text: Text8 } = Typography7;
+  const [showAll, setShowAll] = useState8(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__ */ jsx11(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          right: 8,
+          transform: "translateY(-50%)",
+          zIndex: 10
+        },
+        onClick: (e) => e.stopPropagation()
+      }
+    );
+  };
+  const renderFileDescription = (item) => /* @__PURE__ */ jsx11(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx11(Space7, { children: /* @__PURE__ */ jsx11(
+    Text8,
+    {
+      type: "secondary",
+      style: {
+        fontSize: size === "small" ? "10px" : void 0
+      },
+      children: item.created_at && dayjs(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__ */ 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(
+        "div",
+        {
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(item);
+          },
+          children: /* @__PURE__ */ jsxs8(Card5, { size: styles.cardSize, style: getCardStyle(item), children: [
+            /* @__PURE__ */ jsx11(DownloadButton, { item }),
+            /* @__PURE__ */ jsx11(
+              Attachments.FileCard,
+              {
+                style: getFileCardStyle(item),
+                item: {
+                  name: item.name,
+                  size: item.size,
+                  uid: item.id,
+                  description: renderFileDescription(item)
+                }
+              }
+            ),
+            item.files && /* @__PURE__ */ jsx11(
+              AttachmentsCard,
+              {
+                data: item.files,
+                component_key: `${component_key}_${item.id}`,
+                eventHandler,
+                size: "small",
+                columns: 2,
+                showDownloadButton
+              }
+            )
+          ] })
+        }
+      ) }, item.id)) }),
+      shouldShowViewMore2 && /* @__PURE__ */ jsx11(
+        Button4,
+        {
+          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__ */ jsxs8(Flex3, { vertical: true, gap: size === "small" ? "small" : "middle", children: [
+    visibleData.map((item) => /* @__PURE__ */ jsx11("div", { onClick: () => handleItemClick(item), children: /* @__PURE__ */ jsxs8(Card5, { size: styles.cardSize, style: getCardStyle(item), children: [
+      /* @__PURE__ */ jsx11(DownloadButton, { item }),
+      /* @__PURE__ */ jsx11(
+        Attachments.FileCard,
+        {
+          style: getFileCardStyle(item),
+          item: {
+            name: item.name,
+            size: item.size,
+            uid: item.id,
+            description: renderFileDescription(item)
+          }
+        }
+      ),
+      item.files && /* @__PURE__ */ jsxs8("div", { style: { paddingLeft: "12px" }, children: [
+        /* @__PURE__ */ jsxs8(Text8, { type: "secondary", style: { fontSize: "12px" }, children: [
+          "\u5305\u542B\u6587\u4EF6(",
+          item.files.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx11(
+          AttachmentsCard,
+          {
+            data: item.files,
+            component_key: `${component_key}_${item.id}`,
+            eventHandler,
+            size: "small",
+            columns: 2,
+            showDownloadButton
+          }
+        )
+      ] })
+    ] }) }, item.id)),
+    shouldShowViewMore && /* @__PURE__ */ jsx11(
+      Button4,
+      {
+        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
+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";
+function AttachmentsViewerSideApp({
+  data,
+  eventHandler,
+  component_key
+}) {
+  const [fileUri, setFileUri] = useState9();
+  const [loading, setLoading] = useState9(true);
+  const { file_id } = data ?? {};
+  if (loading) {
+    return /* @__PURE__ */ jsx12(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__ */ jsx12(
+    "iframe",
+    {
+      style: { width: "100%", height: "100%", border: 0 },
+      src: fileUri?.url
+    }
+  ) : /* @__PURE__ */ jsx12(
+    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: [
+          "\u4E0B\u8F7D",
+          fileUri?.fileName
+        ] })
+      ] }),
+      image: Empty2.PRESENTED_IMAGE_DEFAULT
+    }
+  );
+}
+
+// src/components/GenUI/elements/WriteFile.tsx
+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 { Collapse as Collapse4 } from "antd";
+import { createStyles as createStyles5 } 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";
+var DEFAULT_COLLAPSED_MAX_HEIGHT = 180;
+var DEFAULT_EXPANDED_MAX_HEIGHT = 500;
+var useStyle4 = createStyles5(
+  ({ 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] = useState10(false);
+  const [isOverflowing, setIsOverflowing] = useState10(false);
+  const contentRef = useRef3(null);
+  const showShadow = isOverflowing && !showFullContent;
+  const { styles, cx } = useStyle4({ showShadow });
+  const checkOverflow = useCallback5(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setIsOverflowing(scrollHeight > collapsedMaxHeight);
+    }
+  }, [collapsedMaxHeight]);
+  useEffect6(() => {
+    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__ */ jsx13(
+    Collapse4,
+    {
+      className: styles.collapse,
+      size: "small",
+      bordered: false,
+      defaultActiveKey: defaultExpanded ? [panelKey] : [],
+      expandIcon,
+      children: /* @__PURE__ */ jsxs10(
+        CollapsePanel3,
+        {
+          header,
+          extra,
+          style: { minWidth },
+          children: [
+            /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: cx(styles.contentContainer, showFullContent && "expanded"),
+                style: {
+                  maxHeight: showFullContent ? expandedMaxHeight : collapsedMaxHeight
+                },
+                children: /* @__PURE__ */ jsx13("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 })
+            ] }) })
+          ]
+        },
+        panelKey
+      )
+    }
+  );
+};
+
+// src/components/GenUI/elements/WriteFile.tsx
+import { jsx as jsx14, jsxs as jsxs11 } 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 || {};
+  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 handleItemClick = (toolCallData2) => {
+    eventHandler?.(
+      "__open_side_app",
+      {
+        component_key: "file_content_diff_view",
+        message: file_path,
+        data: {
+          old_code: "",
+          new_code: content
+        }
+      },
+      ""
+    );
+  };
+  return /* @__PURE__ */ jsx14(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon,
+      extra: /* @__PURE__ */ jsx14(
+        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,
@@ -1256,8 +2288,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];
@@ -1272,15 +2327,15 @@ var regsiterElement = (language, ElementMeta) => {
 
 // src/components/GenUI/MDMermaid.tsx
 import mermaid from "mermaid";
-import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useEffect as useEffect7, useRef as useRef4 } from "react";
 import { v4 } from "uuid";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var MDMermaid = ({ children = [] }) => {
-  const domId = useRef3(`dom${v4()}`);
+  const domId = useRef4(`dom${v4()}`);
   const code = String(children);
-  const target = useRef3(null);
-  const targetInternal = useRef3(null);
-  useEffect4(() => {
+  const target = useRef4(null);
+  const targetInternal = useRef4(null);
+  useEffect7(() => {
     if (target.current && code) {
       mermaid.initialize({
         startOnLoad: true,
@@ -1342,13 +2397,13 @@ var MDMermaid = ({ children = [] }) => {
       });
     }
   }, [code]);
-  return /* @__PURE__ */ jsx8("div", { style: { minWidth: 750 }, ref: target, children: /* @__PURE__ */ jsx8("code", { id: domId.current, style: { display: "none" } }) });
+  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 jsx9 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var SyntaxHighlighter = Prism;
-var useStyles = createStyles4(({ token, css }) => ({
+var useStyles2 = createStyles6(({ token, css }) => ({
   markdownTableContainer: css`
     overflow-x: auto;
     width: 100%;
@@ -1437,26 +2492,26 @@ var MDResponse = ({
   noGenUI,
   eventHandler
 }) => {
-  const { styles } = useStyles();
-  const config = useMemo2(
+  const { styles } = useStyles2();
+  const config = useMemo3(
     () => ({
       components: {
         a({ node, ...props }) {
           if (embeddedLink) {
-            return /* @__PURE__ */ jsx9(IFrameCard, { src: props.href });
-          } else return /* @__PURE__ */ jsx9("a", { ...props });
+            return /* @__PURE__ */ jsx18(IFrameCard, { src: props.href });
+          } else return /* @__PURE__ */ jsx18("a", { ...props });
         },
         table({ node, ...props }) {
-          return /* @__PURE__ */ jsx9("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ jsx9("table", { className: styles.markdownTable, ...props }) });
+          return /* @__PURE__ */ jsx18("div", { className: styles.markdownTableContainer, children: /* @__PURE__ */ jsx18("table", { className: styles.markdownTable, ...props }) });
         },
         th({ node, ...props }) {
-          return /* @__PURE__ */ jsx9("th", { className: styles.markdownTh, ...props });
+          return /* @__PURE__ */ jsx18("th", { className: styles.markdownTh, ...props });
         },
         td({ node, ...props }) {
-          return /* @__PURE__ */ jsx9("td", { className: styles.markdownTd, ...props });
+          return /* @__PURE__ */ jsx18("td", { className: styles.markdownTd, ...props });
         },
         tr({ node, ...props }) {
-          return /* @__PURE__ */ jsx9("tr", { className: styles.markdownTr, ...props });
+          return /* @__PURE__ */ jsx18("tr", { className: styles.markdownTr, ...props });
         },
         code({ children, className, node, ...rest }) {
           const match = /language-(\w+)/.exec(className || "");
@@ -1469,23 +2524,23 @@ var MDResponse = ({
                 childrenData = JSON.parse(children);
               } catch (error) {
               }
-              return /* @__PURE__ */ jsx9(
+              return /* @__PURE__ */ jsx18(
                 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__ */ jsx9(MDMermaid, { children });
+                return /* @__PURE__ */ jsx18(MDMermaid, { children });
               default:
-                return /* @__PURE__ */ jsx9(
+                return /* @__PURE__ */ jsx18(
                   SyntaxHighlighter,
                   {
                     ...rest,
@@ -1497,7 +2552,7 @@ var MDResponse = ({
                 );
             }
           } else {
-            return /* @__PURE__ */ jsx9("code", { ...rest, className, children });
+            return /* @__PURE__ */ jsx18("code", { ...rest, className, children });
           }
         }
       },
@@ -1506,15 +2561,15 @@ var MDResponse = ({
     }),
     [userData, interactive, embeddedLink, styles]
   );
-  return /* @__PURE__ */ jsx9("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx9(ReactMarkdown, { ...config, children: content }) });
+  return /* @__PURE__ */ jsx18("div", { className: styles.markdownContainer, children: /* @__PURE__ */ jsx18(ReactMarkdown, { ...config, children: content }) });
 };
 var MDViewFormItem = ({ value }) => {
-  return /* @__PURE__ */ jsx9(MDResponse, { content: value || "" });
+  return /* @__PURE__ */ jsx18(MDResponse, { content: value || "" });
 };
 var IFrameCard = ({ src }) => {
-  const containerRef = useRef4(null);
-  const [width, setWidth] = useState7("640px");
-  const [height, setHeight] = useState7("320px");
+  const containerRef = useRef5(null);
+  const [width, setWidth] = useState11("640px");
+  const [height, setHeight] = useState11("320px");
   const valid_images = [
     "jpg",
     "jpeg",
@@ -1531,9 +2586,9 @@ var IFrameCard = ({ src }) => {
   }
   const spitedSrc = src.split(".");
   if (valid_images.includes(spitedSrc[spitedSrc.length - 1].toLowerCase())) {
-    return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9("img", { src, style: { width: "100%" } }) });
+    return /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("img", { src, style: { width: "100%" } }) });
   } else {
-    return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9("a", { href: src, target: "_black", children: src }) });
+    return /* @__PURE__ */ jsx18("div", { children: /* @__PURE__ */ jsx18("a", { href: src, target: "_black", children: src }) });
   }
 };
 
@@ -1541,11 +2596,10 @@ var IFrameCard = ({ src }) => {
 import {
   CloudUploadOutlined,
   PaperClipOutlined,
-  FileTextOutlined as FileTextOutlined2,
-  CheckSquareOutlined
+  FileTextOutlined as FileTextOutlined3
 } from "@ant-design/icons";
 import {
-  Attachments,
+  Attachments as Attachments2,
   Bubble,
   Prompts,
   Sender,
@@ -1555,224 +2609,34 @@ import {
   Alert as Alert2,
   Avatar,
   Badge,
-  Button as Button3,
-  Flex as Flex3,
-  Space as Space6,
-  message,
-  Modal,
-  Tooltip,
-  Popover
+  Button as Button8,
+  Flex as Flex5,
+  Space as Space10,
+  message as message2,
+  Tooltip as Tooltip2,
+  Popover,
+  Progress
 } from "antd";
 import ErrorBoundary from "antd/es/alert/ErrorBoundary";
-import React3, {
+import React4, {
   memo,
-  useCallback as useCallback5,
-  useEffect as useEffect6,
+  useCallback as useCallback6,
+  useEffect as useEffect8,
   useMemo as useMemo4,
-  useRef as useRef5,
-  useState as useState9
+  useRef as useRef6,
+  useState as useState12
 } from "react";
 import { useTranslation } from "react-i18next";
-
-// src/components/FileExplorer.tsx
-import { useState as useState8, useEffect as useEffect5, useMemo as useMemo3 } from "react";
-import { Tabs, Empty } from "antd";
-import {
-  FileOutlined,
-  FileTextOutlined,
-  FileMarkdownOutlined,
-  FileImageOutlined,
-  CodeOutlined as CodeOutlined2,
-  Html5Outlined,
-  FileUnknownOutlined
-} from "@ant-design/icons";
-import { createStyles as createStyles5 } from "antd-style";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var useStyles2 = createStyles5(({ 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;
-  `,
-  tabs: css`
-    height: 100%;
-
-    .ant-tabs-nav {
-      margin-bottom: 0 !important;
-      padding: 0 16px;
-      border-bottom: 1px solid ${token.colorBorderSecondary};
-    }
-
-    .ant-tabs-content-holder {
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .ant-tabs-content {
-      height: 100%;
-    }
-
-    .ant-tabs-tabpane {
-      height: 100%;
-      outline: none;
-    }
-  `,
-  contentBody: css`
-    padding: 24px;
-    height: 100%;
-    overflow-y: auto;
-
-    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};
-  `
-}));
-var getFileIcon = (filename) => {
-  const ext = filename.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "ts":
-    case "tsx":
-    case "js":
-    case "jsx":
-      return /* @__PURE__ */ jsx10(CodeOutlined2, {});
-    case "html":
-      return /* @__PURE__ */ jsx10(Html5Outlined, {});
-    case "css":
-    case "less":
-    case "scss":
-      return /* @__PURE__ */ jsx10(FileUnknownOutlined, {});
-    // Or a style icon if available
-    case "md":
-      return /* @__PURE__ */ jsx10(FileMarkdownOutlined, {});
-    case "json":
-      return /* @__PURE__ */ jsx10(FileTextOutlined, {});
-    case "png":
-    case "jpg":
-    case "jpeg":
-    case "gif":
-    case "svg":
-      return /* @__PURE__ */ jsx10(FileImageOutlined, {});
-    default:
-      return /* @__PURE__ */ jsx10(FileOutlined, {});
-  }
-};
-function getLanguageFromFileName(filename) {
-  const ext = filename.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "ts":
-    case "tsx":
-      return "typescript";
-    case "js":
-    case "jsx":
-      return "javascript";
-    case "py":
-      return "python";
-    case "md":
-      return "markdown";
-    case "json":
-      return "json";
-    case "html":
-      return "html";
-    case "css":
-      return "css";
-    case "java":
-      return "java";
-    case "go":
-      return "go";
-    case "rs":
-      return "rust";
-    case "c":
-      return "c";
-    case "cpp":
-      return "cpp";
-    case "yaml":
-    case "yml":
-      return "yaml";
-    case "sql":
-      return "sql";
-    case "sh":
-    case "bash":
-      return "bash";
-    default:
-      return "text";
-  }
-}
-var FileExplorer = ({
-  files = [],
-  className,
-  style,
-  title = "EXPLORER"
-}) => {
-  const { styles, cx } = useStyles2();
-  const [fileList, setFileList] = useState8([]);
-  useEffect5(() => {
-    if (Array.isArray(files)) {
-      setFileList(files);
-    } else {
-      const list = Object.keys(files).map((key) => ({
-        name: key,
-        content: files[key]
-      }));
-      setFileList(list);
-    }
-  }, [files]);
-  const items = useMemo3(() => {
-    return fileList.map((file) => {
-      const language = file.language || getLanguageFromFileName(file.name);
-      const content = `\`\`\`${language}
-${file.content}
-\`\`\``;
-      return {
-        key: file.name,
-        label: /* @__PURE__ */ jsxs6("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          getFileIcon(file.name),
-          file.name
-        ] }),
-        children: /* @__PURE__ */ jsx10("div", { className: styles.contentBody, children: /* @__PURE__ */ jsx10(MDResponse, { content }) })
-      };
-    });
-  }, [fileList, styles]);
-  return /* @__PURE__ */ jsx10("div", { className: cx(styles.container, className), style, children: fileList.length > 0 ? /* @__PURE__ */ jsx10(
-    Tabs,
-    {
-      defaultActiveKey: fileList[0]?.name,
-      items,
-      className: styles.tabs,
-      tabBarStyle: { margin: 0 }
-    }
-  ) : /* @__PURE__ */ jsx10("div", { className: styles.emptyState, children: /* @__PURE__ */ jsx10(
-    Empty,
-    {
-      description: "No file selected",
-      image: Empty.PRESENTED_IMAGE_SIMPLE
-    }
-  ) }) });
-};
-
-// src/components/Chat/Chating.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message2,
+  message: message3,
   renderContent,
   autoLoadRightPanel
 }) => {
-  const ref = useRef5(null);
-  const [isVisible, setIsVisible] = useState9(false);
-  const [wasEverVisible, setWasEverVisible] = useState9(false);
-  useEffect6(() => {
+  const ref = useRef6(null);
+  const [isVisible, setIsVisible] = useState12(false);
+  const [wasEverVisible, setWasEverVisible] = useState12(false);
+  useEffect8(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         const visible = entry.isIntersecting;
@@ -1792,21 +2656,21 @@ var LazyBubble = ({
       }
     };
   }, [wasEverVisible]);
-  useEffect6(() => {
+  useEffect8(() => {
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message2.content ? Math.min(100, message2.content.length / 5) : 100;
-    return /* @__PURE__ */ jsx11("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
+    const estimatedHeight = message3.content ? Math.min(100, message3.content.length / 5) : 100;
+    return /* @__PURE__ */ jsx19("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx11(ErrorBoundary, { children: /* @__PURE__ */ jsx11("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message2) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx19(ErrorBoundary, { children: /* @__PURE__ */ jsx19("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message3) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
     items,
     roles,
     className
-  }) => /* @__PURE__ */ jsx11(
+  }) => /* @__PURE__ */ jsx19(
     Bubble.List,
     {
       autoScroll: true,
@@ -1844,13 +2708,12 @@ var Chating = ({
   todos
 }) => {
   const { t } = useTranslation();
-  const [content, setContent] = useState9("");
-  const [attachedFiles, setAttachedFiles] = useState9([]);
-  const [headerOpen, setHeaderOpen] = useState9(false);
-  const [fileExplorerVisible, setFileExplorerVisible] = useState9(false);
-  const attachmentsRef = useRef5(null);
-  const senderRef = React3.useRef(null);
-  useEffect6(() => {
+  const [content, setContent] = useState12("");
+  const [attachedFiles, setAttachedFiles] = useState12([]);
+  const [headerOpen, setHeaderOpen] = useState12(false);
+  const attachmentsRef = useRef6(null);
+  const senderRef = React4.useRef(null);
+  useEffect8(() => {
     regsiterElement("action_show_attachments_uploader", {
       card_view: () => null,
       action: (data) => {
@@ -1859,19 +2722,19 @@ var Chating = ({
       }
     });
   }, []);
-  const messageLengthRef = useRef5(messages?.length ?? 0);
-  useEffect6(() => {
+  const messageLengthRef = useRef6(messages?.length ?? 0);
+  useEffect8(() => {
     if (messages?.length) {
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = useCallback5(
-    (message2) => {
-      const { content: content2, files: files2, id } = message2;
+  const renderContent = useCallback6(
+    (message3) => {
+      const { content: content2, files: files2, id } = message3;
       try {
         const json = JSON.parse(content2);
         if (json.action && json.message) {
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx19(
             MDResponse,
             {
               content: json.message,
@@ -1881,13 +2744,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__ */ jsx11(Space6, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx19(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx19(
         MDResponse,
         {
           content: content_md,
@@ -1898,17 +2761,17 @@ ${JSON.stringify(tool_call)}
     [handleMDResponseEvent]
   );
   const items = useMemo4(
-    () => messages.map((message2, index) => ({
-      key: message2.id,
-      role: message2.role,
+    () => messages.map((message3, index) => ({
+      key: message3.id,
+      role: message3.role,
       typing: false,
-      content: /* @__PURE__ */ jsx11(
+      content: /* @__PURE__ */ jsx19(
         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 {
@@ -1952,7 +2815,7 @@ ${JSON.stringify(tool_call)}
   const onSubmit = (nextContent) => {
     if (!nextContent && attachedFiles.length === 0) return;
     if (attachedFiles.filter((f) => f.status !== "done").length > 0) {
-      message.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
+      message2.warning("\u6587\u4EF6\u8FD8\u5728\u4E0A\u4F20\u4E2D...");
       return;
     }
     if (!nextContent && attachedFiles.length > 0) {
@@ -1996,7 +2859,7 @@ ${JSON.stringify(tool_call)}
       setHeaderOpen(true);
     }
     if (info.file?.response?.error || info.file.status === "error") {
-      message.error(
+      message2.error(
         `${info.file.name} file upload failed.${info.file?.response?.message}`
       );
     }
@@ -2008,22 +2871,22 @@ ${JSON.stringify(tool_call)}
   const beforeUpload = (file) => {
     const isLessThan20MB = file.size / 1024 / 1024 < 20;
     if (!isLessThan20MB) {
-      message.error(
+      message2.error(
         `File must be smaller than 20MB! ${file.name} is too large.`
       );
       return false;
     }
     return true;
   };
-  const attachmentsNode = /* @__PURE__ */ jsx11(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx11(
-    Button3,
+  const attachmentsNode = /* @__PURE__ */ jsx19(Badge, { dot: attachedFiles.length > 0 && !headerOpen, children: /* @__PURE__ */ jsx19(
+    Button8,
     {
       type: "text",
-      icon: /* @__PURE__ */ jsx11(PaperClipOutlined, {}),
+      icon: /* @__PURE__ */ jsx19(PaperClipOutlined, {}),
       onClick: () => setHeaderOpen(!headerOpen)
     }
   ) });
-  const senderHeader = /* @__PURE__ */ jsx11(
+  const senderHeader = /* @__PURE__ */ jsx19(
     Sender.Header,
     {
       title: "Attachments",
@@ -2035,8 +2898,8 @@ ${JSON.stringify(tool_call)}
         }
       },
       forceRender: true,
-      children: /* @__PURE__ */ jsx11(
-        Attachments,
+      children: /* @__PURE__ */ jsx19(
+        Attachments2,
         {
           ref: attachmentsRef,
           items: attachedFiles,
@@ -2057,7 +2920,7 @@ ${JSON.stringify(tool_call)}
           multiple: true,
           maxCount: 10,
           placeholder: (type) => ({
-            icon: /* @__PURE__ */ jsx11(CloudUploadOutlined, {}),
+            icon: /* @__PURE__ */ jsx19(CloudUploadOutlined, {}),
             title: "\u4E0A\u4F20\u6587\u4EF6",
             description: attachment_placeholder
           })
@@ -2098,13 +2961,13 @@ ${JSON.stringify(tool_call)}
           try {
           } catch (error2) {
           }
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx19(
             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
@@ -2114,22 +2977,22 @@ ${JSON.stringify(tool_call)}
     }
     return void 0;
   }, [extraMeta]);
-  return /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+    /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx19(
         Welcome,
         {
           style: { padding: 8 },
           variant: "borderless",
           description,
-          icon: /* @__PURE__ */ jsx11(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
+          icon: /* @__PURE__ */ jsx19(Avatar, { src: avatar || "/images/avatar.jpeg", size: 48 }),
           title: name || "Fina",
-          extra: /* @__PURE__ */ jsxs7(Space6, { children: [
+          extra: /* @__PURE__ */ jsxs13(Space10, { children: [
             extra,
-            todos && todos.length > 0 && /* @__PURE__ */ jsx11(
+            todos && todos.length > 0 && /* @__PURE__ */ jsx19(
               Popover,
               {
-                content: /* @__PURE__ */ jsx11("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx11(
+                content: /* @__PURE__ */ jsx19("div", { style: { width: 400 }, children: /* @__PURE__ */ jsx19(
                   Todo,
                   {
                     data: todos,
@@ -2140,37 +3003,72 @@ ${JSON.stringify(tool_call)}
                 title: "Todos",
                 trigger: "click",
                 placement: "bottomRight",
-                children: /* @__PURE__ */ jsx11(Tooltip, { title: "Todos", children: /* @__PURE__ */ jsx11(
-                  Badge,
+                children: /* @__PURE__ */ jsx19(
+                  Tooltip2,
                   {
-                    count: todos.filter((item) => item.status !== "completed").length,
-                    size: "small",
-                    children: /* @__PURE__ */ jsx11(Button3, { icon: /* @__PURE__ */ jsx11(CheckSquareOutlined, {}), type: "text" })
+                    title: `${todos.filter((item) => item.status === "completed").length} / ${todos.length} tasks completed`,
+                    children: /* @__PURE__ */ jsx19("div", { style: { cursor: "pointer", display: "inline-flex" }, children: /* @__PURE__ */ jsx19(
+                      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__ */ jsx19(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "center",
+                              lineHeight: 1
+                            },
+                            children: /* @__PURE__ */ jsxs13("span", { style: { fontSize: 8 }, children: [
+                              todos.filter(
+                                (item) => item.status === "completed"
+                              ).length,
+                              "/",
+                              todos.length
+                            ] })
+                          }
+                        )
+                      }
+                    ) })
                   }
-                ) })
+                )
               }
             ),
-            files && Object.keys(files).length > 0 && /* @__PURE__ */ jsx11(Tooltip, { title: "File Explorer", children: /* @__PURE__ */ jsx11(
+            files && Object.keys(files).length > 0 && /* @__PURE__ */ jsx19(Tooltip2, { title: "File Explorer", children: /* @__PURE__ */ jsx19(
               Badge,
               {
                 count: Object.keys(files).length,
                 size: "small",
                 color: "blue",
-                children: /* @__PURE__ */ jsx11(
-                  Button3,
+                children: /* @__PURE__ */ jsx19(
+                  Button8,
                   {
                     type: "text",
-                    icon: /* @__PURE__ */ jsx11(FileTextOutlined2, {}),
-                    onClick: () => setFileExplorerVisible(true)
+                    icon: /* @__PURE__ */ jsx19(FileTextOutlined3, {}),
+                    onClick: () => onOpenSidePanel({
+                      component_key: "file_explorer",
+                      message: "File Explorer",
+                      data: { files }
+                    })
                   }
                 )
               }
             ) }),
-            extraMetaComponents && /* @__PURE__ */ jsx11(Space6, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
+            extraMetaComponents && /* @__PURE__ */ jsx19(Space10, { align: "center", style: { marginRight: 16 }, children: extraMetaComponents })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx19(
         "div",
         {
           style: {
@@ -2179,35 +3077,16 @@ ${JSON.stringify(tool_call)}
         }
       )
     ] }),
-    /* @__PURE__ */ jsx11(
-      Modal,
-      {
-        title: "File Explorer",
-        open: fileExplorerVisible,
-        onCancel: () => setFileExplorerVisible(false),
-        footer: null,
-        width: 1e3,
-        destroyOnClose: true,
-        styles: { body: { height: "70vh", padding: 0 } },
-        children: /* @__PURE__ */ jsx11(
-          FileExplorer,
-          {
-            files,
-            style: { height: "100%", border: "none" }
-          }
-        )
-      }
-    ),
-    items.length > 0 ? /* @__PURE__ */ jsx11(
+    items.length > 0 ? /* @__PURE__ */ jsx19(
       MemoizedBubbleList,
       {
         items,
         roles,
         className: styles.messages
       }
-    ) : /* @__PURE__ */ jsx11("div", { style: { flex: 1 } }),
-    isLoading ? /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx11(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
-    error && /* @__PURE__ */ jsx11("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx11(
+    ) : /* @__PURE__ */ jsx19("div", { style: { flex: 1 } }),
+    isLoading ? /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(Bubble, { loading: isLoading, variant: "borderless" }) }) : /* @__PURE__ */ jsx19(Prompts, { items: senderPromptsItems, onItemClick: onPromptsItemClick }),
+    error && /* @__PURE__ */ jsx19("div", { style: { padding: "0 16px 8px" }, children: /* @__PURE__ */ jsx19(
       Alert2,
       {
         type: "error",
@@ -2217,7 +3096,7 @@ ${JSON.stringify(tool_call)}
         message: `${error.message}`
       }
     ) }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx19(
       Sender,
       {
         allowSpeech: true,
@@ -2232,7 +3111,7 @@ ${JSON.stringify(tool_call)}
         className: styles.sender,
         actions: (ori, { components }) => {
           const { SendButton, LoadingButton } = components;
-          return /* @__PURE__ */ jsx11(Flex3, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx11(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx19(Flex5, { justify: "space-between", align: "center", children: isLoading ? /* @__PURE__ */ jsx19(LoadingButton, { type: "default" }) : /* @__PURE__ */ jsx19(
             SendButton,
             {
               type: "primary",
@@ -2256,54 +3135,54 @@ ${JSON.stringify(tool_call)}
 import {
   CheckCircleOutlined as CheckCircleOutlined3,
   InfoCircleOutlined as InfoCircleOutlined2,
-  LoadingOutlined as LoadingOutlined3
+  LoadingOutlined as LoadingOutlined4
 } from "@ant-design/icons";
 import {
   ThoughtChain
 } from "@ant-design/x";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function getStatusIcon2(status) {
   switch (status) {
     case "success":
-      return /* @__PURE__ */ jsx12(CheckCircleOutlined3, {});
+      return /* @__PURE__ */ jsx20(CheckCircleOutlined3, {});
     case "error":
-      return /* @__PURE__ */ jsx12(InfoCircleOutlined2, {});
+      return /* @__PURE__ */ jsx20(InfoCircleOutlined2, {});
     case "pending":
-      return /* @__PURE__ */ jsx12(LoadingOutlined3, {});
+      return /* @__PURE__ */ jsx20(LoadingOutlined4, {});
     default:
-      return /* @__PURE__ */ jsx12(CheckCircleOutlined3, {});
+      return /* @__PURE__ */ jsx20(CheckCircleOutlined3, {});
   }
 }
-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__ */ jsx12(MDResponse, { content: message2.content }),
-      status: message2.status,
-      icon: getStatusIcon2(message2.status)
+      content: /* @__PURE__ */ jsx20(MDResponse, { content: message3.content }),
+      status: message3.status,
+      icon: getStatusIcon2(message3.status)
     }
   ];
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx20(
     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__ */ jsx12(MDResponse, { content: item.content }),
+    content: /* @__PURE__ */ jsx20(MDResponse, { content: item.content }),
     status: item.status,
     icon: getStatusIcon2(item.status)
   }));
-  return /* @__PURE__ */ jsx12(ThoughtChain, { items: children, collapsible: true, size: "small" });
+  return /* @__PURE__ */ jsx20(ThoughtChain, { items: children, collapsible: true, size: "small" });
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
@@ -2313,11 +3192,11 @@ import {
   ExpandOutlined,
   FullscreenOutlined
 } from "@ant-design/icons";
-import { Button as Button4, Tabs as Tabs2 } from "antd";
-import { createStyles as createStyles6 } from "antd-style";
-import { useEffect as useEffect7, useState as useState10 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var useStyle4 = createStyles6(({ token, css }) => {
+import { Button as Button9, Tabs } from "antd";
+import { createStyles as createStyles7 } from "antd-style";
+import { useEffect as useEffect9, useState as useState13 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var useStyle5 = createStyles7(({ token, css }) => {
   return {
     tabContainer: css`
       .ant-tabs-content-holder {
@@ -2336,9 +3215,9 @@ var useStyle4 = createStyles6(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsx13("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ jsx13("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx21("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ jsx21("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = ({
@@ -2347,10 +3226,10 @@ var SideAppViewBrowser = ({
   onClose,
   onChangeSize
 }) => {
-  const { styles } = useStyle4();
-  const [activeKey, setActiveKey] = useState10(JSON.stringify(open_uri));
-  const [currentSize, setCurrentSize] = useState10(open_uri.size || "large");
-  const [items, setItems] = useState10([]);
+  const { styles } = useStyle5();
+  const [activeKey, setActiveKey] = useState13(JSON.stringify(open_uri));
+  const [currentSize, setCurrentSize] = useState13(open_uri.size || "large");
+  const [items, setItems] = useState13([]);
   const add = (key, label, children) => {
     const newActiveKey = key;
     const newPanes = [...items];
@@ -2386,7 +3265,7 @@ var SideAppViewBrowser = ({
       remove(targetKey);
     }
   };
-  useEffect7(() => {
+  useEffect9(() => {
     const SideAppView = getElement(open_uri.component_key).side_app_view || EmptySideAppView;
     const key = JSON.stringify(open_uri);
     if (items.find((item) => item.key === key)) {
@@ -2396,7 +3275,7 @@ var SideAppViewBrowser = ({
     add(
       key,
       open_uri.message || open_uri.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx21(
         SideAppView,
         {
           component_key: open_uri.component_key,
@@ -2406,7 +3285,7 @@ var SideAppViewBrowser = ({
       )
     );
   }, [open_uri]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (open_uri.size && open_uri.size !== currentSize) {
       setCurrentSize(open_uri.size);
     }
@@ -2444,26 +3323,26 @@ var SideAppViewBrowser = ({
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ jsx13(CompressOutlined, {});
+        return /* @__PURE__ */ jsx21(CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ jsx13(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx21(ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ jsx13(FullscreenOutlined, {});
+        return /* @__PURE__ */ jsx21(FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ jsx13(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx21(ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ jsx13(
-    Tabs2,
+  return /* @__PURE__ */ jsx21(
+    Tabs,
     {
       className: styles.tabContainer,
       type: "editable-card",
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ jsx13(
-            Button4,
+        right: /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx21(
+            Button9,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -2473,13 +3352,13 @@ var SideAppViewBrowser = ({
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(currentSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ jsx13(
-            Button4,
+          /* @__PURE__ */ jsx21(
+            Button9,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ jsx13(CloseOutlined, {}),
+              icon: /* @__PURE__ */ jsx21(CloseOutlined, {}),
               onClick: () => {
                 onClose();
               }
@@ -2498,7 +3377,7 @@ var SideAppViewBrowser = ({
 // src/components/Chat/context.tsx
 import { createContext as createContext2 } from "react";
 var chatContext = createContext2({
-  eventHandler: (component_key, data, message2) => {
+  eventHandler: (component_key, data, message3) => {
   }
 });
 export {
@@ -2512,7 +3391,6 @@ export {
   ThinkingChain,
   ThinkingChainGroup,
   chatContext,
-  elements,
   getElement,
   regsiterElement,
   useAgentGraph,