@ant-design/agentic-ui 2.18.0 → 2.20.0

package/dist/MarkdownEditor/editor/elements/Head.js

@@ -97,28 +97,16 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import classNames from "classnames";
-import React, { createElement, useMemo } from "react";
+import React, { createElement } from "react";
 import { Node } from "slate";
-import { useSlate } from "slate-react";
 import { useSelStatus } from "../../hooks/editor";
 import { useEditorStore } from "../store";
 import { DragHandle } from "../tools/DragHandle";
 import { slugify } from "../utils/dom";
 export function Head(param) {
     var element = param.element, attributes = param.attributes, children = param.children;
-    var _editor_children_at, _editor_children, _editor_children_at1, _editor_children1;
-    var _useEditorStore = useEditorStore(), _useEditorStore_store = _useEditorStore.store, store = _useEditorStore_store === void 0 ? {} : _useEditorStore_store, markdownContainerRef = _useEditorStore.markdownContainerRef, typewriter = _useEditorStore.typewriter;
-    var editor = useSlate();
+    var _useEditorStore = useEditorStore(), _useEditorStore_store = _useEditorStore.store, store = _useEditorStore_store === void 0 ? {} : _useEditorStore_store, markdownContainerRef = _useEditorStore.markdownContainerRef;
     var _useSelStatus = _sliced_to_array(useSelStatus(element), 2), selected = _useSelStatus[0], path = _useSelStatus[1];
-    var isLast = useMemo(function() {
-        if (editor.children.length === 0) return false;
-        if (!typewriter) return false;
-        return store.isLatestNode(element);
-    }, [
-        (_editor_children_at = (_editor_children = editor.children).at) === null || _editor_children_at === void 0 ? void 0 : _editor_children_at.call(_editor_children, path.at(0)),
-        (_editor_children_at1 = (_editor_children1 = editor.children).at) === null || _editor_children_at1 === void 0 ? void 0 : _editor_children_at1.call(_editor_children1, path.at(0) + 1),
-        typewriter
-    ]);
     var str = Node.string(element);
     return React.useMemo(function() {
         var _obj;
@@ -127,12 +115,10 @@ export function Head(param) {
         }, _define_property(_obj, 'data-be', 'head'), _define_property(_obj, 'data-head', slugify(Node.string(element) || '')), _define_property(_obj, 'data-title', (path === null || path === void 0 ? void 0 : path[0]) === 0), _define_property(_obj, "onDragStart", function(e) {
             return store.dragStart(e, markdownContainerRef.current);
         }), _define_property(_obj, 'data-empty', !str && selected ? 'true' : undefined), _define_property(_obj, 'data-align', element.align), _define_property(_obj, 'data-drag-el', true), _define_property(_obj, "className", classNames({
-            empty: !str,
-            typewriter: isLast && typewriter
+            empty: !str
         })), _obj)), /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DragHandle, null), children));
     }, [
         element.level,
-        isLast,
         str,
         element.children,
         selected,

package/dist/MarkdownEditor/editor/elements/Paragraph.js

@@ -97,27 +97,17 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import classNames from "classnames";
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import { Node } from "slate";
 import { I18nContext } from "../../../I18n";
 import { useSelStatus } from "../../hooks/editor";
 import { useEditorStore } from "../store";
 import { DragHandle } from "../tools/DragHandle";
 export var Paragraph = function(props) {
-    var _markdownEditorRef_current_children_at, _markdownEditorRef_current, _markdownEditorRef_current_children, _markdownEditorRef_current_children_at1, _markdownEditorRef_current1, _markdownEditorRef_current_children1, _markdownEditorRef_current2;
-    var _useEditorStore = useEditorStore(), store = _useEditorStore.store, markdownEditorRef = _useEditorStore.markdownEditorRef, markdownContainerRef = _useEditorStore.markdownContainerRef, typewriter = _useEditorStore.typewriter, readonly = _useEditorStore.readonly, editorProps = _useEditorStore.editorProps;
+    var _markdownEditorRef_current;
+    var _useEditorStore = useEditorStore(), store = _useEditorStore.store, markdownEditorRef = _useEditorStore.markdownEditorRef, markdownContainerRef = _useEditorStore.markdownContainerRef, readonly = _useEditorStore.readonly, editorProps = _useEditorStore.editorProps;
     var locale = useContext(I18nContext).locale;
-    var _useSelStatus = _sliced_to_array(useSelStatus(props.element), 2), selected = _useSelStatus[0], path = _useSelStatus[1];
-    var isLast = useMemo(function() {
-        var _markdownEditorRef_current;
-        if (((_markdownEditorRef_current = markdownEditorRef.current) === null || _markdownEditorRef_current === void 0 ? void 0 : _markdownEditorRef_current.children.length) === 0) return false;
-        if (!typewriter) return false;
-        return store.isLatestNode(props.element);
-    }, [
-        (_markdownEditorRef_current = markdownEditorRef.current) === null || _markdownEditorRef_current === void 0 ? void 0 : (_markdownEditorRef_current_children_at = (_markdownEditorRef_current_children = _markdownEditorRef_current.children).at) === null || _markdownEditorRef_current_children_at === void 0 ? void 0 : _markdownEditorRef_current_children_at.call(_markdownEditorRef_current_children, path.at(0)),
-        (_markdownEditorRef_current1 = markdownEditorRef.current) === null || _markdownEditorRef_current1 === void 0 ? void 0 : (_markdownEditorRef_current_children_at1 = (_markdownEditorRef_current_children1 = _markdownEditorRef_current1.children).at) === null || _markdownEditorRef_current_children_at1 === void 0 ? void 0 : _markdownEditorRef_current_children_at1.call(_markdownEditorRef_current_children1, path.at(0) + 1),
-        typewriter
-    ]);
+    var _useSelStatus = _sliced_to_array(useSelStatus(props.element), 1), selected = _useSelStatus[0];
     return React.useMemo(function() {
         var _markdownEditorRef_current, _props_element_children_every, _props_element_children, _props_element, _props_children;
         var str = Node.string(props.element).trim();
@@ -128,8 +118,7 @@ export var Paragraph = function(props) {
             "data-be": 'paragraph',
             "data-drag-el": true,
             className: classNames({
-                empty: isEmpty,
-                typewriter: isLast && typewriter
+                empty: isEmpty
             }),
             "data-align": props.element.align,
             "data-slate-placeholder": isEmpty ? editorProps.titlePlaceholderContent || (locale === null || locale === void 0 ? void 0 : locale.inputPlaceholder) || '请输入内容...' : undefined,
@@ -146,9 +135,7 @@ export var Paragraph = function(props) {
         props.element.align,
         readonly,
         selected,
-        isLast,
-        (_markdownEditorRef_current2 = markdownEditorRef.current) === null || _markdownEditorRef_current2 === void 0 ? void 0 : _markdownEditorRef_current2.children.length,
-        editorProps.titlePlaceholderContent,
-        typewriter
+        (_markdownEditorRef_current = markdownEditorRef.current) === null || _markdownEditorRef_current === void 0 ? void 0 : _markdownEditorRef_current.children.length,
+        editorProps.titlePlaceholderContent
     ]);
 };

package/dist/MarkdownEditor/editor/style.js

@@ -50,32 +50,11 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { Keyframes } from "@ant-design/cssinjs";
 import { MOBILE_BREAKPOINT } from "../../Constants/mobile";
 import { resetComponent, useEditorStyleRegister } from "../../Hooks/useStyle";
 import "./code.css";
 // 导入统一的标签样式配置
 import { TAG_STYLES } from "./tagStyles";
-// 定义关键帧动画
-var typing = new Keyframes('typing', {
-    from: {
-        width: 0
-    },
-    to: {
-        width: '100%'
-    }
-});
-var blinkCaret = new Keyframes('blink-caret', {
-    from: {
-        borderColor: 'transparent'
-    },
-    to: {
-        borderColor: 'transparent'
-    },
-    '50%': {
-        borderColor: 'var(--color-primary-control-fill-primary)'
-    }
-});
 var COMMENT_HIGHLIGHT_COLOR = 'var(--agentic-comment-highlight-color, rgba(21, 0, 255, 0.15))';
 var genStyle = function(token) {
     var _obj;
@@ -535,15 +514,6 @@ var genStyle = function(token) {
             padding: '0',
             height: '0',
             margin: 'var(--margin-8x) 0'
-        },
-        // 打字机效果样式
-        '.ant-agentic-md-editor-content .typewriter:last-of-type > *:last-of-type span[data-slate-leaf]:last-of-type span[data-slate-string]': {
-            borderRight: '0.15em solid var(--color-primary-control-fill-primary)',
-            animationName: "".concat(typing.getName(), ", ").concat(blinkCaret.getName()),
-            animationDuration: '3.5s, 0.5s',
-            animationTimingFunction: 'steps(30, end), step-end',
-            animationIterationCount: '1, infinite',
-            animationFillMode: 'forwards, both'
         }
     }), _define_property(_obj, "".concat(token.componentCls, "-compact"), {
         'div[data-be="paragraph"]': {

package/dist/Plugins/code/components/CodeRenderer.js

@@ -127,7 +127,12 @@ import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview,
     // 选中状态管理
     var _React_useState = _sliced_to_array(React.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     // 视图模式状态管理（用于HTML和Markdown）
-    var _useState2 = _sliced_to_array(useState('code'), 2), viewMode = _useState2[0], setViewMode = _useState2[1];
+    // 如果是 markdown 或 html，默认打开预览模式
+    var _useState2 = _sliced_to_array(useState(function() {
+        var _props_element_language, _props_element;
+        var language = (_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_language = _props_element.language) === null || _props_element_language === void 0 ? void 0 : _props_element_language.toLowerCase();
+        return language === 'html' || language === 'markdown' ? 'preview' : 'code';
+    }), 2), viewMode = _useState2[0], setViewMode = _useState2[1];
     // 使用Ace编辑器Hook
     var _AceEditor = AceEditor({
         element: props.element,

package/dist/Schema/SchemaEditor/index.d.ts

@@ -22,11 +22,28 @@ export interface SchemaEditorProps {
         ALLOWED_TAGS?: string[];
         ALLOWED_ATTR?: string[];
     };
+    /** 自定义操作按钮，插入到 HTML 编辑器头部按钮区域 */
+    htmlActions?: React.ReactNode[];
 }
-/**
- * Schema编辑器组件
- *
- * 提供schema的实时编辑和预览功能，底层使用AceEditor编辑schema中的HTML内容
- */
-export declare function SchemaEditor({ initialSchema, initialValues, height, readonly, onChange, className, showPreview, previewConfig, }: SchemaEditorProps): React.JSX.Element;
+export interface SchemaEditorRef {
+    /** 设置 Schema 数据 */
+    setSchema: (schema: LowCodeSchema) => void;
+    /** 设置 HTML 模板内容 */
+    setHtmlContent: (html: string) => void;
+    /** 设置 Schema JSON 字符串 */
+    setSchemaString: (jsonString: string) => void;
+    /** 获取当前 Schema 数据 */
+    getSchema: () => LowCodeSchema;
+    /** 获取当前 HTML 模板内容 */
+    getHtmlContent: () => string;
+    /** 获取当前 Schema JSON 字符串 */
+    getSchemaString: () => string;
+    /** 运行预览 */
+    run: () => void;
+    /** 复制 HTML 内容 */
+    copyHtml: () => void;
+    /** 复制 JSON 内容 */
+    copyJson: () => void;
+}
+export declare const SchemaEditor: React.ForwardRefExoticComponent<SchemaEditorProps & React.RefAttributes<SchemaEditorRef>>;
 export default SchemaEditor;

package/dist/Schema/SchemaEditor/index.js

@@ -100,7 +100,7 @@ import { CircleDashed, Copy, Play } from "@sofa-design/icons";
 import { Button, ConfigProvider, message } from "antd";
 import classNames from "classnames";
 import copy from "copy-to-clipboard";
-import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { I18nContext } from "../../I18n";
 import { SchemaRenderer } from "../SchemaRenderer";
 import { mdDataSchemaValidator } from "../validator";
@@ -110,8 +110,8 @@ import { useStyle } from "./style";
  * Schema编辑器组件
  *
  * 提供schema的实时编辑和预览功能，底层使用AceEditor编辑schema中的HTML内容
- */ export function SchemaEditor(param) {
-    var initialSchema = param.initialSchema, _param_initialValues = param.initialValues, initialValues = _param_initialValues === void 0 ? {} : _param_initialValues, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, _param_readonly = param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, onChange = param.onChange, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showPreview = param.showPreview, showPreview = _param_showPreview === void 0 ? true : _param_showPreview, previewConfig = param.previewConfig;
+ */ var SchemaEditorComponent = /*#__PURE__*/ forwardRef(function(param, ref) {
+    var initialSchema = param.initialSchema, _param_initialValues = param.initialValues, initialValues = _param_initialValues === void 0 ? {} : _param_initialValues, _param_height = param.height, height = _param_height === void 0 ? 600 : _param_height, _param_readonly = param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, onChange = param.onChange, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, _param_showPreview = param.showPreview, showPreview = _param_showPreview === void 0 ? true : _param_showPreview, previewConfig = param.previewConfig, htmlActions = param.htmlActions;
     // 使用 ConfigProvider 获取前缀类名
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('schema-editor');
@@ -134,6 +134,26 @@ import { useStyle } from "./style";
     var _useState4 = _sliced_to_array(useState(''), 2), validationError = _useState4[0], setValidationError = _useState4[1];
     var _useState5 = _sliced_to_array(useState({}), 2), renderedSchema = _useState5[0], setRenderedSchema = _useState5[1];
     var _useState6 = _sliced_to_array(useState(false), 2), isSchemaRendered = _useState6[0], setIsSchemaRendered = _useState6[1];
+    // 使用 ref 存储最新值，确保 ref 方法能立即获取到最新状态
+    var schemaRef = React.useRef(schema);
+    var htmlContentRef = React.useRef(htmlContent);
+    var schemaStringRef = React.useRef(schemaString);
+    // 同步更新 ref 值
+    React.useEffect(function() {
+        schemaRef.current = schema;
+    }, [
+        schema
+    ]);
+    React.useEffect(function() {
+        htmlContentRef.current = htmlContent;
+    }, [
+        htmlContent
+    ]);
+    React.useEffect(function() {
+        schemaStringRef.current = schemaString;
+    }, [
+        schemaString
+    ]);
     // 将schema转换为JSON字符串
     var schemaToJson = useCallback(function(schemaData) {
         try {
@@ -159,8 +179,14 @@ import { useStyle } from "./style";
     // 初始化schema字符串
     useEffect(function() {
         var _schema_component;
-        setSchemaString(schemaToJson(schema));
-        setHtmlContent(((_schema_component = schema.component) === null || _schema_component === void 0 ? void 0 : _schema_component.schema) || '');
+        var jsonString = schemaToJson(schema);
+        var html = ((_schema_component = schema.component) === null || _schema_component === void 0 ? void 0 : _schema_component.schema) || '';
+        setSchemaString(jsonString);
+        setHtmlContent(html);
+        // 同步更新 ref 值
+        schemaRef.current = schema;
+        schemaStringRef.current = jsonString;
+        htmlContentRef.current = html;
     }, [
         schema,
         schemaToJson
@@ -195,24 +221,27 @@ import { useStyle } from "./style";
     // 处理HTML内容变更
     var handleHtmlChange = useCallback(function(newHtml) {
         setHtmlContent(newHtml);
-        var newSchema = _object_spread_props(_object_spread({}, schema), {
-            component: _object_spread_props(_object_spread({}, schema.component), {
+        htmlContentRef.current = newHtml;
+        var newSchema = _object_spread_props(_object_spread({}, schemaRef.current), {
+            component: _object_spread_props(_object_spread({}, schemaRef.current.component), {
                 schema: newHtml
             })
         });
         handleSchemaChange(newSchema);
     }, [
-        schema,
         handleSchemaChange
     ]);
     // 处理JSON编辑器变更
     var handleJsonChange = useCallback(function(newJsonString) {
         setSchemaString(newJsonString);
+        schemaStringRef.current = newJsonString;
         var newSchema = jsonToSchema(newJsonString);
         if (newSchema) {
             var _newSchema_component;
+            var html = ((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '';
             handleSchemaChange(newSchema);
-            setHtmlContent(((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '');
+            setHtmlContent(html);
+            htmlContentRef.current = html;
         }
     }, [
         jsonToSchema,
@@ -220,18 +249,14 @@ import { useStyle } from "./style";
     ]);
     // 处理运行按钮点击
     var handleRunClick = useCallback(function() {
-        setRenderedSchema(_object_spread({}, schema));
+        var currentSchema = schemaRef.current;
+        setRenderedSchema(_object_spread({}, currentSchema));
         // 更新values状态，使用schema中的initialValues
-        if (schema.initialValues) {
-            setValues(schema.initialValues);
+        if (currentSchema.initialValues) {
+            setValues(currentSchema.initialValues);
         }
         setIsSchemaRendered(true);
-    }, [
-        schema,
-        setRenderedSchema,
-        setValues,
-        setIsSchemaRendered
-    ]);
+    }, []);
     // 复制函数
     var handleCopyContent = useCallback(function(content, type) {
         if (!content || !content.trim()) {
@@ -266,6 +291,59 @@ import { useStyle } from "./style";
         schemaString,
         handleCopyContent
     ]);
+    // 暴露 ref 方法
+    useImperativeHandle(ref, function() {
+        return {
+            setSchema: function(newSchema) {
+                var _newSchema_component, _newSchema_component1;
+                handleSchemaChange(newSchema);
+                var newJsonString = schemaToJson(newSchema);
+                setSchemaString(newJsonString);
+                setHtmlContent(((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '');
+                // 立即更新 ref 值，确保 get 方法能立即获取到最新值
+                schemaRef.current = newSchema;
+                schemaStringRef.current = newJsonString;
+                htmlContentRef.current = ((_newSchema_component1 = newSchema.component) === null || _newSchema_component1 === void 0 ? void 0 : _newSchema_component1.schema) || '';
+            },
+            setHtmlContent: function(newHtml) {
+                handleHtmlChange(newHtml);
+                // 立即更新 ref 值
+                htmlContentRef.current = newHtml;
+            },
+            setSchemaString: function(newJsonString) {
+                handleJsonChange(newJsonString);
+                // 立即更新 ref 值
+                schemaStringRef.current = newJsonString;
+                var newSchema = jsonToSchema(newJsonString);
+                if (newSchema) {
+                    var _newSchema_component;
+                    schemaRef.current = newSchema;
+                    htmlContentRef.current = ((_newSchema_component = newSchema.component) === null || _newSchema_component === void 0 ? void 0 : _newSchema_component.schema) || '';
+                }
+            },
+            getSchema: function() {
+                return schemaRef.current;
+            },
+            getHtmlContent: function() {
+                return htmlContentRef.current;
+            },
+            getSchemaString: function() {
+                return schemaStringRef.current;
+            },
+            run: handleRunClick,
+            copyHtml: handleCopyHtml,
+            copyJson: handleCopyJson
+        };
+    }, [
+        handleSchemaChange,
+        handleHtmlChange,
+        handleJsonChange,
+        handleRunClick,
+        handleCopyHtml,
+        handleCopyJson,
+        schemaToJson,
+        jsonToSchema
+    ]);
     // 渲染预览区域
     var renderPreview = useMemo(function() {
         if (!showPreview) return null;
@@ -331,7 +409,7 @@ import { useStyle } from "./style";
                 }
             }),
             onClick: handleCopyHtml
-        }))), /*#__PURE__*/ React.createElement("div", {
+        }), htmlActions)), /*#__PURE__*/ React.createElement("div", {
             className: classNames("".concat(prefixCls, "-html-content"), hashId)
         }, /*#__PURE__*/ React.createElement(AceEditorWrapper, {
             value: htmlContent,
@@ -347,6 +425,7 @@ import { useStyle } from "./style";
         locale,
         handleRunClick,
         handleCopyHtml,
+        htmlActions,
         prefixCls
     ]);
     // 渲染JSON编辑器
@@ -397,5 +476,7 @@ import { useStyle } from "./style";
     }, renderPreview), /*#__PURE__*/ React.createElement("div", {
         className: classNames("".concat(prefixCls, "-right"), hashId)
     }, renderHtmlEditor, renderJsonEditor))));
-}
+});
+SchemaEditorComponent.displayName = 'SchemaEditor';
+export var SchemaEditor = SchemaEditorComponent;
 export default SchemaEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.18.0",
+  "version": "2.20.0",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",

package/dist/MarkdownEditor/editor/keyframes.css

@@ -1,20 +0,0 @@
-/* The typing effect */
-@keyframes typing {
-  from {
-    width: 0;
-  }
-  to {
-    width: 100%;
-  }
-}
-
-/* The typewriter cursor effect */
-@keyframes blink-caret {
-  from,
-  to {
-    border-color: transparent;
-  }
-  50% {
-    border-color: #1677ff;
-  }
-}