@ant-design/agentic-ui 2.20.2 → 2.22.0

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

@@ -99,7 +99,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import { ConfigProvider, theme as antdTheme } from "antd";
+import { ConfigProvider, Skeleton, theme as antdTheme } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
 import { MarkdownEditor } from "../../../MarkdownEditor";
 import { useEditorStore } from "../../../MarkdownEditor/editor/store";
@@ -163,18 +163,18 @@ import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview,
         viewMode: viewMode
     }).toolbarProps;
     // 检查代码块是否未闭合
-    var isUnclosed = ((_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_otherProps = _props_element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finish) === false;
+    var isUnclosed = ((_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_otherProps = _props_element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finished) === false;
     // 5 秒超时机制：如果代码块未闭合，5 秒后自动设置为完成
     useEffect(function() {
         if (isUnclosed && !readonly) {
             var timer = setTimeout(function() {
                 var _props_element_otherProps, _props_element;
-                // 检查 finish 是否仍然是 false（可能已经被其他逻辑更新）
-                if (((_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_otherProps = _props_element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finish) === false) {
+                // 检查 finished 是否仍然是 false（可能已经被其他逻辑更新）
+                if (((_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_otherProps = _props_element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finished) === false) {
                     var _props_element1;
                     update({
                         otherProps: _object_spread_props(_object_spread({}, (_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : _props_element1.otherProps), {
-                            finish: true
+                            finished: true
                         })
                     });
                 }
@@ -186,13 +186,30 @@ import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview,
     }, [
         isUnclosed,
         readonly,
-        (_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : (_props_element_otherProps1 = _props_element1.otherProps) === null || _props_element_otherProps1 === void 0 ? void 0 : _props_element_otherProps1.finish,
+        (_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : (_props_element_otherProps1 = _props_element1.otherProps) === null || _props_element_otherProps1 === void 0 ? void 0 : _props_element_otherProps1.finished,
         update
     ]);
     // 渲染组件
     return useMemo(function() {
-        // 隐藏配置型 HTML 代码块
+        // 配置型 HTML 代码块：如果未完成且内容较长，显示 skeleton
         if (shouldHideConfigHtml) {
+            var _props_element_otherProps, _props_element, _props_element_value, _props_element1;
+            var isUnclosed = ((_props_element = props.element) === null || _props_element === void 0 ? void 0 : (_props_element_otherProps = _props_element.otherProps) === null || _props_element_otherProps === void 0 ? void 0 : _props_element_otherProps.finished) === false;
+            var contentLength = ((_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : (_props_element_value = _props_element1.value) === null || _props_element_value === void 0 ? void 0 : _props_element_value.length) || 0;
+            var isLongContent = contentLength > 100; // 内容超过 100 字符视为较长
+            // 如果未完成且内容较长，显示 skeleton
+            if (isUnclosed && isLongContent) {
+                return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, props.attributes), {
+                    style: {
+                        padding: '20px'
+                    }
+                }), /*#__PURE__*/ React.createElement(Skeleton, {
+                    active: true,
+                    paragraph: {
+                        rows: 3
+                    }
+                }));
+            }
             return null;
         }
         // 只读模式下的思考块特殊渲染
@@ -203,7 +220,7 @@ import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview,
         }
         // 主要的代码编辑器渲染
         if (shouldRenderAsCodeEditor) {
-            var _editorProps_codeProps, _props_element, _props_element1;
+            var _editorProps_codeProps, _props_element2, _props_element3;
             return /*#__PURE__*/ React.createElement(ConfigProvider, {
                 theme: {
                     algorithm: theme === 'chaos' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm
@@ -229,9 +246,9 @@ import { AceEditor, AceEditorContainer, CodeContainer, CodeToolbar, HtmlPreview,
                     display: isExpanded ? 'block' : 'none'
                 }
             }, viewMode === 'preview' && props.element.language === 'html' && /*#__PURE__*/ React.createElement(HtmlPreview, {
-                htmlStr: (_props_element = props.element) === null || _props_element === void 0 ? void 0 : _props_element.value
+                htmlStr: (_props_element2 = props.element) === null || _props_element2 === void 0 ? void 0 : _props_element2.value
             }), viewMode === 'preview' && props.element.language && props.element.language === 'markdown' && /*#__PURE__*/ React.createElement(MarkdownEditor, {
-                initValue: (_props_element1 = props.element) === null || _props_element1 === void 0 ? void 0 : _props_element1.value
+                initValue: (_props_element3 = props.element) === null || _props_element3 === void 0 ? void 0 : _props_element3.value
             }), /*#__PURE__*/ React.createElement("div", {
                 style: {
                     height: '100%',

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

@@ -6,9 +6,8 @@
 import { ChevronsUpDown, Copy, Moon } from "@sofa-design/icons";
 import { message, Segmented } from "antd";
 import copy from "copy-to-clipboard";
-import React, { useContext, useMemo } from "react";
+import React, { useContext } from "react";
 import { ActionIconBox } from "../../../Components/ActionIconBox";
-import { Loading } from "../../../Components/Loading";
 import { I18nContext } from "../../../I18n";
 import { langIconMap } from "../langIconMap";
 import { LanguageSelector } from "./LanguageSelector";
@@ -41,17 +40,10 @@ import { LoadImage } from "./LoadImage";
  * />
  * ```
  */ export var CodeToolbar = function(props) {
-    var _element_otherProps, _element_language, _element_language1, _i18n_locale, _i18n_locale1;
+    var _element_language, _element_language1, _i18n_locale, _i18n_locale1;
     // 获取国际化上下文
     var i18n = useContext(I18nContext);
     var element = props.element, readonly = props.readonly, onCloseClick = props.onCloseClick, languageSelectorProps = props.languageSelectorProps, onViewModeToggle = props.onViewModeToggle, theme = props.theme, isExpanded = props.isExpanded, onExpandToggle = props.onExpandToggle, setTheme = props.setTheme, _props_viewMode = props.viewMode, viewMode = _props_viewMode === void 0 ? 'code' : _props_viewMode;
-    // 检查代码块是否未闭合 - 使用 useMemo 确保正确响应变化
-    var isUnclosed = useMemo(function() {
-        var _element_otherProps;
-        return (element === null || element === void 0 ? void 0 : (_element_otherProps = element.otherProps) === null || _element_otherProps === void 0 ? void 0 : _element_otherProps.finish) === false;
-    }, [
-        element === null || element === void 0 ? void 0 : (_element_otherProps = element.otherProps) === null || _element_otherProps === void 0 ? void 0 : _element_otherProps.finish
-    ]);
     return /*#__PURE__*/ React.createElement("div", {
         "data-testid": "code-toolbar",
         contentEditable: false,
@@ -112,12 +104,7 @@ import { LoadImage } from "./LoadImage";
         },
         src: langIconMap.get(((_element_language1 = element.language) === null || _element_language1 === void 0 ? void 0 : _element_language1.toLowerCase()) || '')
     })), /*#__PURE__*/ React.createElement("div", null, element.language ? /*#__PURE__*/ React.createElement("span", null, element.katex ? 'Formula' : element.language === 'html' && element.render ? 'Html Renderer' : element.language) : /*#__PURE__*/ React.createElement("span", null, 'plain text'))) : // 非只读模式：显示语言选择器
-    /*#__PURE__*/ React.createElement(LanguageSelector, languageSelectorProps), isUnclosed && /*#__PURE__*/ React.createElement(Loading, {
-        style: {
-            fontSize: '14px',
-            flexShrink: 0
-        }
-    })), /*#__PURE__*/ React.createElement("div", {
+    /*#__PURE__*/ React.createElement(LanguageSelector, languageSelectorProps)), /*#__PURE__*/ React.createElement("div", {
         style: {
             display: 'flex',
             gap: 5,

package/dist/Workspace/Task/index.d.ts

@@ -1,12 +1,17 @@
 import React, { type FC } from 'react';
+export interface TaskItem {
+    key: string;
+    title?: string;
+    content?: React.ReactNode | React.ReactNode[];
+    status: 'success' | 'pending' | 'loading' | 'error';
+}
 export interface TaskItemInput {
-    items: {
-        key: string;
-        title?: string;
-        content?: React.ReactNode | React.ReactNode[];
-        status: 'success' | 'pending' | 'loading' | 'error';
-    }[];
+    items: TaskItem[];
 }
-export declare const TaskList: FC<{
+export interface TaskListProps {
+    /** 任务列表数据 */
     data: TaskItemInput;
-}>;
+    /** 点击任务项时的回调 */
+    onItemClick?: (item: TaskItem) => void;
+}
+export declare const TaskList: FC<TaskListProps>;

package/dist/Workspace/Task/index.js

@@ -35,17 +35,34 @@ var StatusIcon = function(param) {
     }
 };
 export var TaskList = function(param) {
-    var data = param.data;
+    var data = param.data, onItemClick = param.onItemClick;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('agentic-workspace-task');
     var _useTaskStyle = useTaskStyle(prefixCls), wrapSSR = _useTaskStyle.wrapSSR, hashId = _useTaskStyle.hashId;
+    var handleItemClick = function(item) {
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+    };
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         className: classNames(prefixCls, hashId),
         "data-testid": "task-list"
     }, data.items.map(function(item) {
         return /*#__PURE__*/ React.createElement("div", {
             key: item.key,
-            className: classNames("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(item.status), hashId)
+            className: classNames("".concat(prefixCls, "-item"), "".concat(prefixCls, "-item-").concat(item.status), hashId),
+            role: onItemClick ? 'button' : undefined,
+            tabIndex: onItemClick ? 0 : undefined,
+            onClick: onItemClick ? function() {
+                return handleItemClick(item);
+            } : undefined,
+            onKeyDown: onItemClick ? function(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleItemClick(item);
+                }
+            } : undefined,
+            style: {
+                cursor: onItemClick ? 'pointer' : undefined
+            }
         }, /*#__PURE__*/ React.createElement("div", {
             className: classNames("".concat(prefixCls, "-status"), hashId)
         }, /*#__PURE__*/ React.createElement(StatusIcon, {

package/dist/Workspace/index.js

@@ -142,9 +142,10 @@ var BrowserComponent = function(param) {
     }) : null;
 };
 var TaskComponent = function(param) {
-    var data = param.data;
+    var data = param.data, onItemClick = param.onItemClick;
     return data ? /*#__PURE__*/ React.createElement(TaskList, {
-        data: data
+        data: data,
+        onItemClick: onItemClick
     }) : null;
 };
 var FileComponent = function(props) {

package/dist/Workspace/types.d.ts

@@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react';
 import type { MarkdownEditorProps } from '../MarkdownEditor';
 import type { BrowserItemInput } from './Browser';
 import type { RealtimeFollowData } from './RealtimeFollow';
-import type { TaskItemInput } from './Task';
+import type { TaskItem, TaskItemInput } from './Task';
 export interface TabConfiguration {
     key?: string;
     icon?: ReactNode;
@@ -39,6 +39,8 @@ export interface BrowserProps extends BaseChildProps {
 }
 export interface TaskProps extends BaseChildProps {
     data?: TaskItemInput;
+    /** 点击任务项时的回调 */
+    onItemClick?: (item: TaskItem) => void;
 }
 export declare enum FileCategory {
     Text = "text",

package/package.json

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