@ant-design/agentic-ui 2.12.1 → 2.14.0

package/dist/ChatLayout/style.js

@@ -51,6 +51,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 import { resetComponent, useEditorStyleRegister } from "../Hooks/useStyle";
+var MOBILE_PADDING = 'var(--padding-1x)';
 var genStyle = function(token) {
     return _define_property({}, token.componentCls, {
         display: 'flex',
@@ -198,6 +199,22 @@ var genStyle = function(token) {
             zIndex: 100,
             borderBottomLeftRadius: 'var(--radius-xl)',
             borderBottomRightRadius: 'var(--radius-xl)'
+        },
+        '@media (max-width: 768px)': {
+            '&-header': {
+                padding: "0 ".concat(MOBILE_PADDING)
+            },
+            '&-content': {
+                '&-scrollable': {
+                    paddingTop: MOBILE_PADDING,
+                    paddingLeft: MOBILE_PADDING,
+                    paddingRight: MOBILE_PADDING,
+                    paddingBottom: '144px'
+                }
+            },
+            '&-footer': {
+                padding: MOBILE_PADDING
+            }
         }
     });
 };

package/dist/MarkdownEditor/editor/Editor.js

@@ -232,17 +232,17 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
+import { useDebounceFn } from "@ant-design/pro-components";
 import classNames from "classnames";
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { Editor, Node, Range, Transforms } from "slate";
-import { parserMdToSchema } from "../BaseMarkdownEditor";
-import { LazyElement } from "./components/LazyElement";
-import { MElement, MLeaf } from "./elements";
-import { useDebounceFn } from "@ant-design/pro-components";
 import { Editable, ReactEditor, Slate } from "slate-react";
 import { useRefFunction } from "../../Hooks/useRefFunction";
+import { parserMdToSchema } from "../BaseMarkdownEditor";
 import { PluginContext } from "../plugin";
+import { LazyElement } from "./components/LazyElement";
+import { MElement, MLeaf } from "./elements";
 import { handleFilesPaste, handleHtmlPaste, handleHttpLinkPaste, handlePlainTextPaste, handleSlateMarkdownFragment, handleSpecialTextPaste, handleTagNodePaste, shouldInsertTextDirectly } from "./plugins/handlePaste";
 import { useHighlight } from "./plugins/useHighlight";
 import { useKeyboard } from "./plugins/useKeyboard";
@@ -251,6 +251,14 @@ import { useEditorStore } from "./store";
 import { useStyle } from "./style";
 import { MARKDOWN_EDITOR_EVENTS, parserSlateNodeToMarkdown } from "./utils";
 import { EditorUtils, findByPathAndText, findLeafPath, getSelectionFromDomSelection, hasEditableTarget, isEventHandled, isPath } from "./utils/editorUtils";
+// 默认允许的类型
+var defaultAllowedTypes = [
+    'application/x-slate-md-fragment',
+    'text/html',
+    'Files',
+    'text/markdown',
+    'text/plain'
+];
 /**
  * 生成表格最小尺寸配置
  *
@@ -754,7 +762,7 @@ import { EditorUtils, findByPathAndText, findLeafPath, getSelectionFromDomSelect
    * 实际的粘贴处理逻辑
    */ var handlePasteEvent = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(event) {
-            var _props_onPaste, _event_clipboardData, pasteConfig, currentTextSelection, nodeList, curNode, types, defaultAllowedTypes, allowedTypes, _event_clipboardData_getData, _event_clipboardData_getData1, _event_clipboardData1, text, _event_clipboardData_getData2, _event_clipboardData_getData3, _event_clipboardData2, text1, selection, e;
+            var _props_onPaste, _event_clipboardData, pasteConfig, currentTextSelection, nodeList, curNode, types, allowedTypes, _event_clipboardData_getData, _event_clipboardData_getData1, _event_clipboardData1, text, _event_clipboardData_getData2, _event_clipboardData_getData3, _event_clipboardData2, text1, selection, e;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -787,14 +795,6 @@ import { EditorUtils, findByPathAndText, findLeafPath, getSelectionFromDomSelect
                         types = ((_event_clipboardData = event.clipboardData) === null || _event_clipboardData === void 0 ? void 0 : _event_clipboardData.types) || [
                             'text/plain'
                         ];
-                        // 默认允许的类型
-                        defaultAllowedTypes = [
-                            'application/x-slate-md-fragment',
-                            'text/html',
-                            'Files',
-                            'text/markdown',
-                            'text/plain'
-                        ];
                         // 获取允许的类型
                         allowedTypes = (pasteConfig === null || pasteConfig === void 0 ? void 0 : pasteConfig.allowedTypes) || defaultAllowedTypes;
                         // 1. 首先尝试处理 slate-md-fragment

package/dist/MarkdownEditor/editor/elements/Image/index.js

@@ -247,7 +247,7 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { BlockOutlined, DeleteFilled, LoadingOutlined } from "@ant-design/icons";
+import { BlockOutlined, DeleteFilled, ExclamationCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Image, Modal, Popover, Space } from "antd";
 import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
 import { useDebounceFn } from "@ant-design/pro-components";
@@ -286,14 +286,20 @@ import { getMediaType } from "../../utils/dom";
                 color: '#1890ff',
                 textDecoration: 'underline',
                 wordBreak: 'break-all',
-                display: 'inline-block',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '8px',
                 maxWidth: '100%',
                 padding: '8px 12px',
                 border: '1px dashed #d9d9d9',
                 borderRadius: '6px',
                 backgroundColor: '#fafafa'
             }
-        }, props.alt || props.src || '图片链接');
+        }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
+            style: {
+                color: '#faad14'
+            }
+        }), props.alt || props.src || '图片链接');
     }
     if (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_image = editorProps.image) === null || _editorProps_image === void 0 ? void 0 : _editorProps_image.render) {
         var _editorProps_image_render, _editorProps_image1;
@@ -356,7 +362,9 @@ import { getMediaType } from "../../utils/dom";
                 color: '#1890ff',
                 textDecoration: 'underline',
                 wordBreak: 'break-all',
-                display: 'inline-block',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '8px',
                 maxWidth: '100%',
                 padding: '8px 12px',
                 border: '1px dashed #d9d9d9',
@@ -365,7 +373,11 @@ import { getMediaType } from "../../utils/dom";
                 fontSize: '13px',
                 lineHeight: '1.5'
             }
-        }, props.alt || props.src);
+        }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
+            style: {
+                color: '#faad14'
+            }
+        }), props.alt || props.src);
     }
     return /*#__PURE__*/ React.createElement("div", {
         "data-testid": "resize-image-container",
@@ -546,7 +558,9 @@ export function EditorImage(param) {
                     color: '#1890ff',
                     textDecoration: 'underline',
                     wordBreak: 'break-all',
-                    display: 'inline-block',
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '8px',
                     maxWidth: '100%',
                     padding: '8px 12px',
                     border: '1px dashed #d9d9d9',
@@ -555,7 +569,11 @@ export function EditorImage(param) {
                     fontSize: '13px',
                     lineHeight: '1.5'
                 }
-            }, (element === null || element === void 0 ? void 0 : element.alt) || ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || (element === null || element === void 0 ? void 0 : element.url) || '图片链接');
+            }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
+                style: {
+                    color: '#faad14'
+                }
+            }), (element === null || element === void 0 ? void 0 : element.alt) || ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || (element === null || element === void 0 ? void 0 : element.url) || '图片链接');
         }
         return !readonly ? /*#__PURE__*/ React.createElement(ResizeImage, {
             defaultSize: {

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

@@ -223,7 +223,7 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { DeleteFilled, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
+import { DeleteFilled, ExclamationCircleOutlined, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Modal, Popover } from "antd";
 import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
 import { useDebounceFn } from "@ant-design/pro-components";
@@ -398,23 +398,24 @@ export function Media(param) {
         path
     ]);
     var initial = useCallback(/*#__PURE__*/ _async_to_generator(function() {
-        var type, realUrl, img;
+        var type, finalType, realUrl, img, video, audio;
         return _ts_generator(this, function(_state) {
             type = getMediaType(element === null || element === void 0 ? void 0 : element.url, element.alt);
             type = !type ? 'image' : type;
+            finalType = [
+                'image',
+                'video',
+                'autio',
+                'attachment'
+            ].includes(type) ? type : 'other';
             setState({
-                type: [
-                    'image',
-                    'video',
-                    'autio',
-                    'attachment'
-                ].includes(type) ? type : 'other'
+                type: finalType
             });
             realUrl = element === null || element === void 0 ? void 0 : element.url;
             setState({
                 url: realUrl
             });
-            if (state().type === 'image' || state().type === 'other') {
+            if (finalType === 'image' || finalType === 'other') {
                 img = document.createElement('img');
                 img.referrerPolicy = 'no-referrer';
                 img.crossOrigin = 'anonymous';
@@ -430,6 +431,36 @@ export function Media(param) {
                     });
                 };
             }
+            if (finalType === 'video') {
+                video = document.createElement('video');
+                video.src = realUrl;
+                video.preload = 'metadata';
+                video.onerror = function() {
+                    setState({
+                        loadSuccess: false
+                    });
+                };
+                video.onloadedmetadata = function() {
+                    setState({
+                        loadSuccess: true
+                    });
+                };
+            }
+            if (finalType === 'audio') {
+                audio = document.createElement('audio');
+                audio.src = realUrl;
+                audio.preload = 'metadata';
+                audio.onerror = function() {
+                    setState({
+                        loadSuccess: false
+                    });
+                };
+                audio.onloadedmetadata = function() {
+                    setState({
+                        loadSuccess: true
+                    });
+                };
+            }
             if (!element.mediaType) {
                 updateElement({
                     mediaType: state().type
@@ -494,30 +525,85 @@ export function Media(param) {
         state().selected
     ]);
     var mediaElement = useMemo(function() {
-        var _state;
-        if (state().type === 'video') return /*#__PURE__*/ React.createElement("video", {
-            "data-testid": "video-element",
-            controls: element.controls !== false,
-            autoPlay: element.autoplay,
-            loop: element.loop,
-            muted: element.muted,
-            poster: element.poster,
-            style: {
-                width: element.width ? "".concat(element.width, "px") : '100%',
-                height: element.height ? "".concat(element.height, "px") : 'auto',
-                maxWidth: 600,
-                borderRadius: '6px',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
-            },
-            src: ((_state = state()) === null || _state === void 0 ? void 0 : _state.url) || '',
-            preload: "metadata",
-            onError: function() {
-                var _state;
-                console.warn('Video failed to load:', (_state = state()) === null || _state === void 0 ? void 0 : _state.url);
+        if (state().type === 'video') {
+            var _state;
+            if (!state().loadSuccess) {
+                var _state1, _state2;
+                return /*#__PURE__*/ React.createElement("a", {
+                    href: ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: {
+                        color: '#1890ff',
+                        textDecoration: 'underline',
+                        wordBreak: 'break-all',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        maxWidth: '100%',
+                        padding: '8px 12px',
+                        border: '1px dashed #d9d9d9',
+                        borderRadius: '6px',
+                        backgroundColor: '#fafafa'
+                    }
+                }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
+                    style: {
+                        color: '#faad14'
+                    }
+                }), element.alt || ((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || (element === null || element === void 0 ? void 0 : element.url) || '视频链接');
             }
-        });
+            return /*#__PURE__*/ React.createElement("video", {
+                "data-testid": "video-element",
+                controls: element.controls !== false,
+                autoPlay: element.autoplay,
+                loop: element.loop,
+                muted: element.muted,
+                poster: element.poster,
+                style: {
+                    width: element.width ? "".concat(element.width, "px") : '100%',
+                    height: element.height ? "".concat(element.height, "px") : 'auto',
+                    maxWidth: 600,
+                    borderRadius: '6px',
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+                },
+                src: ((_state = state()) === null || _state === void 0 ? void 0 : _state.url) || '',
+                preload: "metadata",
+                onError: function() {
+                    var _state;
+                    console.warn('Video failed to load:', (_state = state()) === null || _state === void 0 ? void 0 : _state.url);
+                    setState({
+                        loadSuccess: false
+                    });
+                }
+            });
+        }
         if (state().type === 'audio') {
-            var _state1;
+            var _state3;
+            if (!state().loadSuccess) {
+                var _state4, _state5;
+                return /*#__PURE__*/ React.createElement("a", {
+                    href: ((_state4 = state()) === null || _state4 === void 0 ? void 0 : _state4.url) || (element === null || element === void 0 ? void 0 : element.url),
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    style: {
+                        color: '#1890ff',
+                        textDecoration: 'underline',
+                        wordBreak: 'break-all',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        maxWidth: '100%',
+                        padding: '8px 12px',
+                        border: '1px dashed #d9d9d9',
+                        borderRadius: '6px',
+                        backgroundColor: '#fafafa'
+                    }
+                }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
+                    style: {
+                        color: '#faad14'
+                    }
+                }), element.alt || ((_state5 = state()) === null || _state5 === void 0 ? void 0 : _state5.url) || (element === null || element === void 0 ? void 0 : element.url) || '音频链接');
+            }
             return /*#__PURE__*/ React.createElement("audio", {
                 "data-testid": "audio-element",
                 controls: true,
@@ -525,11 +611,18 @@ export function Media(param) {
                     width: '100%',
                     height: 'auto'
                 },
-                src: ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || ''
+                src: ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || '',
+                onError: function() {
+                    var _state;
+                    console.warn('Audio failed to load:', (_state = state()) === null || _state === void 0 ? void 0 : _state.url);
+                    setState({
+                        loadSuccess: false
+                    });
+                }
             }, "Your browser does not support the", /*#__PURE__*/ React.createElement("code", null, "audio"), " element.");
         }
         if (state().type === 'attachment') {
-            var _state2, _element_alt, _element_alt1, _element_otherProps, _element_otherProps_collaborators, _element_otherProps1, _element_otherProps2;
+            var _state6, _element_alt, _element_alt1, _element_otherProps, _element_otherProps_collaborators, _element_otherProps1, _element_otherProps2;
             return /*#__PURE__*/ React.createElement("div", {
                 style: {
                     padding: 12,
@@ -561,7 +654,7 @@ export function Media(param) {
                     minWidth: 0
                 }
             }, /*#__PURE__*/ React.createElement("a", {
-                href: (_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url,
+                href: (_state6 = state()) === null || _state6 === void 0 ? void 0 : _state6.url,
                 style: {
                     overflow: 'ellipsis',
                     textOverflow: 'ellipsis',

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

@@ -100,9 +100,12 @@ import { useEditorStore } from "../store";
             var renderedContent = apaasify.render(props, bubble === null || bubble === void 0 ? void 0 : bubble.originData);
             return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, node.attributes), {
                 "data-testid": "schema-container",
+                contentEditable: false,
                 style: {
                     display: 'flex',
-                    flexDirection: 'column'
+                    flexDirection: 'column',
+                    userSelect: 'text',
+                    WebkitUserSelect: 'text'
                 }
             }), renderedContent, /*#__PURE__*/ React.createElement("div", {
                 "data-testid": "schema-hidden-json",

package/dist/Plugins/chart/index.js

@@ -300,11 +300,20 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
     var htmlRef = React.useRef(null);
     var _React_useState1 = _sliced_to_array(React.useState(256), 2), minWidth = _React_useState1[0], setMinWidth = _React_useState1[1];
     useEffect(function() {
-        var _rootContainer_current, _htmlRef_current_parentElement, _htmlRef_current;
-        var width = Math.max((rootContainer === null || rootContainer === void 0 ? void 0 : (_rootContainer_current = rootContainer.current) === null || _rootContainer_current === void 0 ? void 0 : _rootContainer_current.clientWidth) || ((_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : (_htmlRef_current_parentElement = _htmlRef_current.parentElement) === null || _htmlRef_current_parentElement === void 0 ? void 0 : _htmlRef_current_parentElement.clientWidth) || 256, 256);
-        setMinWidth(width || 256);
-        setColumnLength(Math.min(Math.floor(width / 256), config.length));
-    }, []);
+        var updateWidth = function() {
+            var _rootContainer_current, _htmlRef_current_parentElement, _htmlRef_current;
+            var width = Math.max((rootContainer === null || rootContainer === void 0 ? void 0 : (_rootContainer_current = rootContainer.current) === null || _rootContainer_current === void 0 ? void 0 : _rootContainer_current.clientWidth) || ((_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : (_htmlRef_current_parentElement = _htmlRef_current.parentElement) === null || _htmlRef_current_parentElement === void 0 ? void 0 : _htmlRef_current_parentElement.clientWidth) || 256, 256);
+            setMinWidth(width || 256);
+            setColumnLength(Math.min(Math.floor(width / 256), config.length));
+        };
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return function() {
+            return window.removeEventListener('resize', updateWidth);
+        };
+    }, [
+        config.length
+    ]);
     return useMemo(function() {
         return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
             className: 'ant-agentic-md-editor-drag-el'
@@ -312,9 +321,11 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
             "data-be": 'chart',
             style: {
                 flex: 1,
-                minWidth: "min(".concat(Math.min(minWidth, 856), "px, 100%)"),
+                minWidth: 0,
+                width: '100%',
                 maxWidth: '100%',
-                margin: '1em 0'
+                margin: '1em 0',
+                overflow: 'hidden'
             },
             ref: htmlRef,
             onDragStart: function(e) {
@@ -448,7 +459,9 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
                         key: index + subIndex,
                         style: {
                             margin: 'auto',
-                            minWidth: "max(calc(".concat(100 / columnLength, "% - 16px), 600px)"),
+                            minWidth: 0,
+                            width: columnLength === 1 ? '100%' : "calc(".concat(100 / columnLength, "% - 8px)"),
+                            maxWidth: '100%',
                             flex: 1,
                             userSelect: 'none'
                         },
@@ -462,7 +475,9 @@ export { ChartFilter, ChartToolBar, downloadChart } from "./components";
                 style: {
                     userSelect: 'none',
                     margin: 'auto',
-                    minWidth: "max(calc(".concat(100 / columnLength, "% - 16px), 600px)"),
+                    minWidth: 0,
+                    width: columnLength === 1 ? '100%' : "calc(".concat(100 / columnLength, "% - 8px)"),
+                    maxWidth: '100%',
                     flex: 1
                 },
                 onClick: function(e) {

package/dist/Schema/index.d.ts

@@ -7,6 +7,6 @@
 import { SchemaEditor } from './SchemaEditor';
 import { SchemaForm } from './SchemaForm';
 import { SchemaRenderer, TemplateEngine } from './SchemaRenderer';
-import { LowCodeSchema } from './types';
 import { SchemaValidator, mdDataSchemaValidator } from './validator';
-export { LowCodeSchema, SchemaEditor, SchemaForm, SchemaRenderer, SchemaValidator, TemplateEngine, mdDataSchemaValidator as validator, };
+export type { LowCodeSchema } from './types';
+export { SchemaEditor, SchemaForm, SchemaRenderer, SchemaValidator, TemplateEngine, mdDataSchemaValidator as validator, };

package/dist/Schema/index.js

@@ -6,6 +6,5 @@
  */ import { SchemaEditor } from "./SchemaEditor";
 import { SchemaForm } from "./SchemaForm";
 import { SchemaRenderer, TemplateEngine } from "./SchemaRenderer";
-import { LowCodeSchema } from "./types";
 import { SchemaValidator, mdDataSchemaValidator } from "./validator";
-export { LowCodeSchema, SchemaEditor, SchemaForm, SchemaRenderer, SchemaValidator, TemplateEngine, mdDataSchemaValidator as validator };
+export { SchemaEditor, SchemaForm, SchemaRenderer, SchemaValidator, TemplateEngine, mdDataSchemaValidator as validator };

package/package.json

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