@ant-design/agentic-ui 2.0.28 → 2.2.0

package/dist/Plugins/defaultPlugins.d.ts

@@ -6,6 +6,9 @@ export declare const standardPlugins: {
         code: typeof CodeElement;
         chart: (props: import("slate-react").RenderElementProps) => import("react").JSX.Element;
         katex: typeof KatexElement;
+        mermaid: (props: {
+            element: import("..").CodeNode;
+        }) => import("react").JSX.Element | null;
         'inline-katex': ({ children, element, attributes, style, }: import("..").ElementProps<import("..").InlineKatexNode> & {
             style?: import("react").CSSProperties | undefined;
         }) => import("react").JSX.Element;

package/dist/Plugins/defaultPlugins.js

@@ -2,12 +2,14 @@
 import { ChartElement } from "./chart";
 import { CodeElement } from "./code";
 import { InlineKatex, KatexElement } from "./katex";
+import { Mermaid } from "./mermaid/Mermaid";
 var standardPlugins = [
   {
     elements: {
       code: CodeElement,
       chart: ChartElement,
       katex: KatexElement,
+      mermaid: Mermaid,
       "inline-katex": InlineKatex
     }
   }

package/dist/Plugins/mermaid/Mermaid.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import { CodeNode } from '../../MarkdownEditor/el';
+type MermaidApi = typeof import('mermaid').default;
+export declare const loadMermaid: () => Promise<MermaidApi>;
 /**
  * Mermaid 组件 - Mermaid图表渲染组件
  *
@@ -36,5 +38,6 @@ import { CodeNode } from '../../MarkdownEditor/el';
  * - 自动生成唯一ID
  */
 export declare const Mermaid: (props: {
-    el: CodeNode;
-}) => React.JSX.Element;
+    element: CodeNode;
+}) => React.JSX.Element | null;
+export {};

package/dist/Plugins/mermaid/Mermaid.js

@@ -1,3 +1,32 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -20,61 +49,124 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // src/Plugins/mermaid/Mermaid.tsx
-import mermaid from "mermaid";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useGetSetState } from "react-use";
+import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
+var mermaidLoader = null;
+var loadMermaid = () => __async(void 0, null, function* () {
+  if (typeof window === "undefined") {
+    throw new Error("Mermaid 仅在浏览器环境中可用");
+  }
+  if (!mermaidLoader) {
+    mermaidLoader = Promise.resolve().then(() => __toESM(__require("mermaid"))).then((module) => {
+      const api = module.default;
+      if (api == null ? void 0 : api.initialize) {
+        api.initialize({ startOnLoad: false });
+      }
+      return api;
+    }).catch((error) => {
+      mermaidLoader = null;
+      throw error;
+    });
+  }
+  return mermaidLoader;
+});
 var Mermaid = (props) => {
+  var _a;
+  const isBrowser = typeof window !== "undefined";
   const [state, setState] = useGetSetState({
     code: "",
     error: ""
   });
+  const containerRef = useRef(null);
   const divRef = useRef(null);
-  const timer = useRef(0);
+  const timer = useRef(null);
+  const mermaidRef = useRef(null);
   const id = useMemo(
     () => "m" + (Date.now() + Math.ceil(Math.random() * 1e3)),
     []
   );
-  const render = useCallback(() => __async(void 0, null, function* () {
-    mermaid.render(id, state().code).then((res) => {
-      setState({ error: "" });
-      divRef.current.innerHTML = res.svg;
-    }).catch(() => {
-      mermaid.parse(state().code).catch((e) => {
-        setState({ error: e.toString(), code: "" });
-      });
-    }).finally(() => {
-      var _a;
-      (_a = document.querySelector("#d" + id)) == null ? void 0 : _a.classList.add("hidden");
-    });
-  }), []);
+  const isVisible = useIntersectionOnce(containerRef);
   useEffect(() => {
-    const code = props.el.value || "";
-    if (state().code !== code) {
-      clearTimeout(timer.current);
-      timer.current = window.setTimeout(
-        () => {
-          setState({ code });
-          if (state().code) {
-            render();
-          } else {
-            setState({ error: "" });
-          }
-        },
-        !state().code ? 0 : 300
-      );
+    if (!isBrowser) {
+      return void 0;
+    }
+    console.log("props---", props);
+    const nextCode = props.element.value || "";
+    const currentState = state();
+    if (!isVisible) {
+      return void 0;
+    }
+    if (currentState.code === nextCode && currentState.error === "") {
+      return void 0;
+    }
+    if (timer.current !== null) {
+      window.clearTimeout(timer.current);
+      timer.current = null;
+    }
+    if (!nextCode) {
+      timer.current = window.setTimeout(() => {
+        setState({ code: "", error: "" });
+        if (divRef.current) {
+          divRef.current.innerHTML = "";
+        }
+        timer.current = null;
+      }, 0);
+      return () => {
+        if (timer.current !== null) {
+          window.clearTimeout(timer.current);
+          timer.current = null;
+        }
+      };
     }
-    return () => window.clearTimeout(timer.current);
-  }, [props.el]);
+    const delay = currentState.code ? 300 : 0;
+    timer.current = window.setTimeout(() => __async(void 0, null, function* () {
+      var _a2, _b;
+      try {
+        const api = (_a2 = mermaidRef.current) != null ? _a2 : yield loadMermaid();
+        mermaidRef.current = api;
+        const { svg } = yield api.render(id, nextCode);
+        if (divRef.current) {
+          divRef.current.innerHTML = svg;
+        }
+        setState({ code: nextCode, error: "" });
+      } catch (error) {
+        const api = mermaidRef.current;
+        if (api) {
+          try {
+            yield api.parse(nextCode);
+          } catch (parseError) {
+            setState({ error: String(parseError), code: "" });
+            return;
+          }
+        }
+        setState({ error: String(error), code: "" });
+      } finally {
+        (_b = document.querySelector("#d" + id)) == null ? void 0 : _b.classList.add("hidden");
+      }
+      timer.current = null;
+    }), delay);
+    return () => {
+      if (timer.current !== null) {
+        window.clearTimeout(timer.current);
+        timer.current = null;
+      }
+    };
+  }, [isBrowser, (_a = props == null ? void 0 : props.element) == null ? void 0 : _a.value, id, isVisible, setState, state]);
+  if (!isBrowser) {
+    return null;
+  }
+  const snapshot = state();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref: containerRef,
       style: {
         marginBottom: "0.75em",
         cursor: "default",
         userSelect: "none",
         padding: "0.75rem 0",
-        backgroundColor: "rgba(15, 17, 20, 0.05)",
-        borderRadius: "0.25em",
+        borderRadius: "1em",
         display: "flex",
         justifyContent: "center"
       },
@@ -89,14 +181,15 @@ var Mermaid = (props) => {
           width: "100%",
           display: "flex",
           justifyContent: "center",
-          visibility: state().code && !state().error ? "visible" : "hidden"
+          visibility: snapshot.code && !snapshot.error ? "visible" : "hidden"
         }
       }
     ),
-    state().error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "rgba(239, 68, 68, 0.8)" } }, state().error),
-    !state().code && !state().error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Empty")
+    snapshot.error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "rgba(239, 68, 68, 0.8)" } }, snapshot.error),
+    !snapshot.code && !snapshot.error && /* @__PURE__ */ React.createElement("div", { style: { textAlign: "center", color: "#6B7280" } }, "Empty")
   );
 };
 export {
-  Mermaid
+  Mermaid,
+  loadMermaid
 };

package/dist/Plugins/mermaid/index.js

@@ -157,7 +157,7 @@ function MermaidElement(props) {
       ),
       /* @__PURE__ */ React.createElement("div", { className: "ant-agentic-md-editor-hidden" }, props.children)
     ),
-    /* @__PURE__ */ React.createElement(Mermaid, { el: props.element })
+    /* @__PURE__ */ React.createElement(Mermaid, { element: props.element })
   );
 }
 export {

package/dist/TaskList/index.js

@@ -5,8 +5,8 @@ import classNames from "classnames";
 import { useMergedState } from "rc-util";
 import React, { memo, useCallback, useContext } from "react";
 import { ActionIconBox } from "../Components/ActionIconBox";
-import { I18nContext } from "../I18n";
 import { Loading } from "../Components/Loading";
+import { I18nContext } from "../I18n";
 import { useStyle } from "./style";
 var LOADING_SIZE = 16;
 var buildClassName = (...args) => classNames(...args);
@@ -104,13 +104,7 @@ var TaskListItem = ({
             loading: false,
             onClick: handleToggle
           },
-          /* @__PURE__ */ React.createElement(
-            ChevronUp,
-            {
-              className: buildClassName(`${prefixCls}-arrow`, hashId),
-              "data-testid": "task-list-arrow"
-            }
-          )
+          /* @__PURE__ */ React.createElement(ChevronUp, { "data-testid": "task-list-arrow" })
         )
       )
     ), !isCollapsed && /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-body`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: buildClassName(`${prefixCls}-content`, hashId) }, item.content)))

package/dist/TaskList/style.js

@@ -101,13 +101,7 @@ var genStyle = (token) => {
           flexShrink: 0,
           width: 16,
           height: 16,
-          color: "var(--color-gray-text-default)",
-          cursor: "pointer",
-          transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)",
-          "&:hover": {
-            backgroundColor: "var(--color-gray-control-fill-hover)",
-            borderRadius: "var(--radius-control-sm)"
-          }
+          transition: "all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)"
         }
       },
       "&-body": {

package/dist/ToolUseBar/ToolUseBarItem.js

@@ -83,52 +83,65 @@ var ToolUseBarItemComponent = ({
       }
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { key: tool.id, "data-testid": "ToolUserItem", className: toolClassName }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: toolBarClassName,
-      "data-testid": "tool-user-item-tool-bar",
-      onClick: handleClick
+      key: tool.id,
+      "data-testid": "ToolUserItem",
+      className: classnames(toolClassName, {
+        [`${prefixCls}-tool-collapsed`]: !showContent
+      })
     },
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: toolHeaderClassName,
-        "data-testid": "tool-user-item-tool-header"
+        className: classnames(toolBarClassName, {
+          [`${prefixCls}-tool-bar-collapsed`]: !showContent
+        }),
+        "data-testid": "tool-user-item-tool-bar",
+        onClick: handleClick
       },
-      /* @__PURE__ */ React.createElement(ToolImage, { tool, prefixCls, hashId })
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: toolHeaderClassName,
+          "data-testid": "tool-user-item-tool-header"
+        },
+        /* @__PURE__ */ React.createElement(ToolImage, { tool, prefixCls, hashId })
+      ),
+      /* @__PURE__ */ React.createElement(
+        ToolHeaderRight,
+        {
+          tool,
+          prefixCls,
+          hashId,
+          light
+        }
+      ),
+      /* @__PURE__ */ React.createElement(ToolTime, { tool, prefixCls, hashId }),
+      /* @__PURE__ */ React.createElement(
+        ToolExpand,
+        {
+          showContent,
+          expanded,
+          prefixCls,
+          hashId,
+          onExpandClick: handleExpandClick
+        }
+      )
     ),
     /* @__PURE__ */ React.createElement(
-      ToolHeaderRight,
+      ToolContent,
       {
         tool,
         prefixCls,
         hashId,
-        light
-      }
-    ),
-    /* @__PURE__ */ React.createElement(ToolTime, { tool, prefixCls, hashId }),
-    /* @__PURE__ */ React.createElement(
-      ToolExpand,
-      {
+        light,
         showContent,
-        expanded,
-        prefixCls,
-        hashId,
-        onExpandClick: handleExpandClick
+        expanded
       }
     )
-  ), /* @__PURE__ */ React.createElement(
-    ToolContent,
-    {
-      tool,
-      prefixCls,
-      hashId,
-      light,
-      showContent,
-      expanded
-    }
-  ));
+  );
 };
 var ToolUseBarItem = memo(ToolUseBarItemComponent);
 export {

package/dist/ToolUseBar/ToolUseBarItemComponents.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 // src/ToolUseBar/ToolUseBarItemComponents.tsx
 import { Api, ChevronUp, X } from "@sofa-design/icons";
 import classnames from "classnames";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import React, { memo, useCallback, useMemo } from "react";
 var ToolImageComponent = ({
   tool,
@@ -217,20 +217,65 @@ var ToolContentComponent = ({
   const contentDom = useMemo(() => {
     return tool.content ? /* @__PURE__ */ React.createElement("div", { className: contentClassName }, tool.content) : null;
   }, [tool.content, contentClassName]);
-  const containerElement = useMemo(() => {
-    if (!showContent || !expanded)
-      return null;
+  const contentVariants = useMemo(
+    () => ({
+      expanded: {
+        height: "auto",
+        opacity: 1
+      },
+      collapsed: {
+        height: 0,
+        opacity: 0
+      }
+    }),
+    []
+  );
+  const contentTransition = useMemo(
+    () => ({
+      height: {
+        duration: 0.26,
+        ease: [0.4, 0, 0.2, 1]
+      },
+      opacity: {
+        duration: 0.26,
+        ease: [0.4, 0, 0.2, 1]
+      }
+    }),
+    []
+  );
+  if (!showContent || !expanded) {
     return /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: toolContainerClassName,
-        "data-testid": "tool-user-item-tool-container "
+        style: {
+          overflow: "hidden",
+          height: 1,
+          opacity: 0,
+          visibility: "hidden"
+        },
+        role: "presentation",
+        "aria-hidden": "true"
       },
       contentDom,
       errorDom
     );
-  }, [showContent, expanded, toolContainerClassName, contentDom, errorDom]);
-  return containerElement;
+  }
+  return /* @__PURE__ */ React.createElement(AnimatePresence, { initial: false, mode: "sync" }, expanded ? /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      key: "tool-content",
+      className: toolContainerClassName,
+      "data-testid": "tool-user-item-tool-container",
+      variants: contentVariants,
+      initial: "collapsed",
+      animate: "expanded",
+      exit: "collapsed",
+      transition: contentTransition,
+      style: { overflow: "hidden" }
+    },
+    contentDom,
+    errorDom
+  ) : null);
 };
 var ToolContent = memo(ToolContentComponent);
 export {

package/dist/ToolUseBar/style.js

@@ -40,12 +40,13 @@ var genStyle = (token) => {
         border: "var(--color-gray-border-light)",
         boxShadow: "var(--shadow-border-base)",
         minHeight: "20px",
+        backdropFilter: "blur(8px)",
         width: "max-content",
         transition: "padding 0.2s ease",
         display: "flex",
         alignItems: "center",
         flexDirection: "column",
-        gap: "8px",
+        gap: 0,
         zIndex: 1,
         maxWidth: "min(800px,100%)",
         padding: "2px",
@@ -64,6 +65,7 @@ var genStyle = (token) => {
         "&-expanded": {
           borderRadius: "14px",
           padding: 4,
+          gap: 8,
           outline: "none",
           "&:hover": {
             background: "var(--color-gray-bg-card-light)",

package/dist/ToolUseBar/thinkStyle.js

@@ -22,6 +22,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import {
   useEditorStyleRegister
 } from "../Hooks/useStyle";
+var LIGHT_MODE_BACKGROUND = "rgba(255, 255, 255, 0.65)";
+var LIGHT_MODE_BACKDROP_FILTER = "blur(12px)";
 var genStyle = (token) => {
   return {
     [token.componentCls]: {
@@ -69,6 +71,9 @@ var genStyle = (token) => {
         border: "none",
         borderRadius: "14px",
         padding: 4,
+        background: LIGHT_MODE_BACKGROUND,
+        backdropFilter: LIGHT_MODE_BACKDROP_FILTER,
+        WebkitBackdropFilter: LIGHT_MODE_BACKDROP_FILTER,
         "&:hover": {
           background: "none",
           boxShadow: "none",
@@ -226,7 +231,10 @@ var genStyle = (token) => {
           borderLeft: "1px solid var(--color-gray-border-light)",
           paddingLeft: 12,
           marginLeft: 16,
-          marginTop: -10
+          marginTop: -10,
+          background: LIGHT_MODE_BACKGROUND,
+          backdropFilter: LIGHT_MODE_BACKDROP_FILTER,
+          WebkitBackdropFilter: LIGHT_MODE_BACKDROP_FILTER
         }
       },
       "&-container-loading": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.0.28",
+  "version": "2.2.0",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",
@@ -17,6 +17,7 @@
     "dev": "dumi dev",
     "docs:build": "dumi build",
     "doctor": "father doctor",
+    "generate:version": "node scripts/bumpVersion.js",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",