@ant-design/agentic-ui 2.30.5 → 2.30.7

package/dist/Bubble/MessagesContent/MarkdownPreview.js

@@ -125,20 +125,22 @@ import { MessagesContext } from "./BubbleContext";
         var _content_includes, _htmlRef_current, _htmlRef_current1, _props_markdownRenderConfig, _props_originData, _props_originData1, _props_originData2, _props_markdownRenderConfig1, _props_markdownRenderConfig2, _props_markdownRenderConfig3;
         // MarkdownRenderer 渲染路径——轻量，不创建 Slate 实例
         if (renderMode === 'markdown') {
-            var _props_originData3, _props_markdownRenderConfig4, _props_markdownRenderConfig5, _props_markdownRenderConfig6, _props_markdownRenderConfig7;
+            var _props_originData3, _props_markdownRenderConfig4, _props_markdownRenderConfig5, _props_markdownRenderConfig6, _props_markdownRenderConfig7, _props_markdownRenderConfig8, _props_markdownRenderConfig9;
             return /*#__PURE__*/ React.createElement(MarkdownRenderer, {
                 content: content,
                 streaming: typing,
                 isFinished: (_props_originData3 = props.originData) === null || _props_originData3 === void 0 ? void 0 : _props_originData3.isFinished,
                 plugins: (_props_markdownRenderConfig4 = props.markdownRenderConfig) === null || _props_markdownRenderConfig4 === void 0 ? void 0 : _props_markdownRenderConfig4.plugins,
+                queueOptions: (_props_markdownRenderConfig5 = props.markdownRenderConfig) === null || _props_markdownRenderConfig5 === void 0 ? void 0 : _props_markdownRenderConfig5.queueOptions,
+                streamingParagraphAnimation: (_props_markdownRenderConfig6 = props.markdownRenderConfig) === null || _props_markdownRenderConfig6 === void 0 ? void 0 : _props_markdownRenderConfig6.streamingParagraphAnimation,
                 fncProps: fncProps,
                 style: _object_spread({
                     maxWidth: standalone ? '100%' : undefined,
                     padding: isPaddingHidden ? 0 : undefined,
                     margin: isPaddingHidden ? 0 : undefined
-                }, ((_props_markdownRenderConfig5 = props.markdownRenderConfig) === null || _props_markdownRenderConfig5 === void 0 ? void 0 : _props_markdownRenderConfig5.style) || {}),
-                codeProps: (_props_markdownRenderConfig6 = props.markdownRenderConfig) === null || _props_markdownRenderConfig6 === void 0 ? void 0 : _props_markdownRenderConfig6.codeProps,
-                apaasify: (_props_markdownRenderConfig7 = props.markdownRenderConfig) === null || _props_markdownRenderConfig7 === void 0 ? void 0 : _props_markdownRenderConfig7.apaasify
+                }, ((_props_markdownRenderConfig7 = props.markdownRenderConfig) === null || _props_markdownRenderConfig7 === void 0 ? void 0 : _props_markdownRenderConfig7.style) || {}),
+                codeProps: (_props_markdownRenderConfig8 = props.markdownRenderConfig) === null || _props_markdownRenderConfig8 === void 0 ? void 0 : _props_markdownRenderConfig8.codeProps,
+                apaasify: (_props_markdownRenderConfig9 = props.markdownRenderConfig) === null || _props_markdownRenderConfig9 === void 0 ? void 0 : _props_markdownRenderConfig9.apaasify
             });
         }
         // Slate 渲染路径——保持向后兼容

package/dist/MarkdownEditor/types.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 import { BaseEditor, Editor, Selection } from 'slate';
 import { HistoryEditor } from 'slate-history';
 import { ReactEditor, RenderElementProps } from 'slate-react';
-import type { RenderMode } from '../MarkdownRenderer/types';
+import type { CharacterQueueOptions, RenderMode } from '../MarkdownRenderer/types';
 import { TagPopupProps } from './editor/elements/TagPopup';
 import { EditorStore } from './editor/store';
 import { InsertAutocompleteProps } from './editor/tools/InsertAutocomplete';
@@ -473,6 +473,16 @@ export type MarkdownEditorProps = {
         /** 自定义链接渲染函数 */
         onClick?: (url?: string) => boolean | void;
     };
+    /**
+     * MarkdownRenderer 字符队列（仅 `renderMode: 'markdown'` 只读预览时生效）
+     * @description 默认关闭逐字 RAF；需要打字机时再设 `{ animate: true, animateTailChars: 50 }` 等
+     */
+    queueOptions?: CharacterQueueOptions;
+    /**
+     * 流式 Markdown 末段淡入（仅 `renderMode: 'markdown'` 时传给 MarkdownRenderer）
+     * @description 默认 false；设为 true 时末段使用 AnimationText 入场，可能在高频更新时产生闪动
+     */
+    streamingParagraphAnimation?: boolean;
     /**
      * 依赖数组
      * @description 用于控制 MElement 组件是否刷新的依赖数组。当 deps 数组内容发生变化时，MElement 会重新渲染

package/dist/MarkdownRenderer/AnimationText.d.ts

@@ -4,6 +4,11 @@ export interface AnimationConfig {
     fadeDuration?: number;
     /** 缓动函数，默认 ease-out */
     easing?: string;
+    /**
+     * 已废弃：单段入场动画模式下不再按 chunk 瘦身 DOM，保留仅为类型兼容
+     * @deprecated
+     */
+    collapseThreshold?: number;
 }
 export interface AnimationTextProps {
     children: React.ReactNode;
@@ -12,9 +17,7 @@ export interface AnimationTextProps {
 /**
  * 流式文字淡入动画组件。
  *
- * 采用 opacity + translateY（GPU 硬件加速），清爽流派。
- * 同一段流式前缀追加只触发**一次**入场动画；后续增量仅更新文案。内容被替换
- * （非前缀增长）时重新播放入场。动画结束后仍用 span 包裹以保持布局稳定。
+ * 同一段流式前缀追加（或尾部截断修正）只触发一次入场动画；非前缀替换时重播。
  */
 declare const AnimationText: React.NamedExoticComponent<AnimationTextProps>;
 export default AnimationText;

package/dist/MarkdownRenderer/AnimationText.js

@@ -57,34 +57,21 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
     }
     return '';
 };
-/**
- * 识别 children 中是否包含 React 元素节点。
- * 富文本结构（链接、脚注、图片等）在纯文本差分下会丢失结构信息，直接透传更安全。
- */ var hasElementNode = function hasElementNode1(children) {
-    if (children === null || children === undefined || typeof children === 'boolean') return false;
-    if (typeof children === 'string' || typeof children === 'number') return false;
-    if (Array.isArray(children)) return children.some(hasElementNode);
-    return /*#__PURE__*/ React.isValidElement(children);
+/** 流式同一段内：前后文案仅「前缀关系」变化（增长或尾部截断修正） */ var isStreamingCompatible = function isStreamingCompatible(prev, next) {
+    return prev.startsWith(next) || next.startsWith(prev);
 };
 /**
  * 流式文字淡入动画组件。
  *
- * 采用 opacity + translateY（GPU 硬件加速），清爽流派。
- * 同一段流式前缀追加只触发**一次**入场动画；后续增量仅更新文案。内容被替换
- * （非前缀增长）时重新播放入场。动画结束后仍用 span 包裹以保持布局稳定。
+ * 同一段流式前缀追加（或尾部截断修正）只触发一次入场动画；非前缀替换时重播。
  */ var AnimationText = /*#__PURE__*/ React.memo(function(param) {
     var children = param.children, animationConfig = param.animationConfig;
-    var _ref = animationConfig || {}, _ref_fadeDuration = _ref.fadeDuration, fadeDuration = _ref_fadeDuration === void 0 ? 200 : _ref_fadeDuration, _ref_easing = _ref.easing, easing = _ref_easing === void 0 ? 'ease-out' : _ref_easing;
+    var _ref = animationConfig || {}, _ref_fadeDuration = _ref.fadeDuration, fadeDuration = _ref_fadeDuration === void 0 ? 250 : _ref_fadeDuration, _ref_easing = _ref.easing, easing = _ref_easing === void 0 ? 'ease-out' : _ref_easing;
     var _useState = _sliced_to_array(useState(false), 2), animComplete = _useState[0], setAnimComplete = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), animSession = _useState1[0], setAnimSession = _useState1[1];
     var prevTextRef = useRef('');
     var text = extractText(children);
-    var hasElementContent = hasElementNode(children);
     useEffect(function() {
-        if (hasElementContent) {
-            prevTextRef.current = text;
-            return;
-        }
         if (text === prevTextRef.current) return;
         var prev = prevTextRef.current;
         if (!prev) {
@@ -93,7 +80,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
             setAnimComplete(false);
             return;
         }
-        if (text.length > prev.length && text.startsWith(prev)) {
+        if (isStreamingCompatible(prev, text)) {
             prevTextRef.current = text;
             return;
         }
@@ -103,8 +90,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
         });
         prevTextRef.current = text;
     }, [
-        text,
-        hasElementContent
+        text
     ]);
     var handleAnimationEnd = function handleAnimationEnd() {
         return setAnimComplete(true);
@@ -120,15 +106,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
         fadeDuration,
         easing
     ]);
-    /** 动画结束后仍用 inline-block 包裹，避免从 span 变为裸内容时的宽度重排 */ var doneChunkStyle = useMemo(function() {
+    var doneChunkStyle = useMemo(function() {
         return {
             display: 'inline-block',
             color: 'inherit'
         };
     }, []);
-    if (hasElementContent) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
-    }
     return animComplete ? /*#__PURE__*/ React.createElement("span", {
         style: doneChunkStyle
     }, children) : /*#__PURE__*/ React.createElement("span", {

package/dist/MarkdownRenderer/MarkdownRenderer.js

@@ -236,7 +236,7 @@ var SCHEMA_LANGUAGES = new Set([
  * - Markdown → hast → React 元素树（hast-util-to-jsx-runtime）
  * - 特殊块（code / mermaid / chart / katex）通过组件映射拦截渲染
  */ var InternalMarkdownRenderer = /*#__PURE__*/ forwardRef(function(props, ref) {
-    var content = props.content, _props_streaming = props.streaming, streaming = _props_streaming === void 0 ? false : _props_streaming, isFinished = props.isFinished, queueOptions = props.queueOptions, plugins = props.plugins, remarkPlugins = props.remarkPlugins, htmlConfig = props.htmlConfig, className = props.className, style = props.style, customPrefixCls = props.prefixCls, linkConfig = props.linkConfig, apaasify = props.apaasify;
+    var content = props.content, _props_streaming = props.streaming, streaming = _props_streaming === void 0 ? false : _props_streaming, isFinished = props.isFinished, queueOptions = props.queueOptions, plugins = props.plugins, remarkPlugins = props.remarkPlugins, htmlConfig = props.htmlConfig, className = props.className, style = props.style, customPrefixCls = props.prefixCls, linkConfig = props.linkConfig, streamingParagraphAnimation = props.streamingParagraphAnimation, apaasify = props.apaasify;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     // 复用 MarkdownEditor 的 CSS 前缀和样式，保持渲染一致性
     var prefixCls = getPrefixCls('agentic-md-editor', customPrefixCls);
@@ -249,6 +249,7 @@ var SCHEMA_LANGUAGES = new Set([
     var containerRef = useRef(null);
     var _useState = _sliced_to_array(useState(content || ''), 2), displayedContent = _useState[0], setDisplayedContent = _useState[1];
     var queueRef = useRef(null);
+    /** 与 CharacterQueue 构造参数同步，避免 queueOptions 变更后仍用旧队列行为 */ var queueOptsSigRef = useRef('');
     useImperativeHandle(ref, function() {
         return {
             nativeElement: containerRef.current,
@@ -263,10 +264,12 @@ var SCHEMA_LANGUAGES = new Set([
     }, [
         plugins
     ]);
-    // 字符队列管理：流式时仅对最后 50 字做动画，避免每段逐字输出
+    // 字符队列：默认关闭逐字动画，避免 RAF 每帧全量重解析 Markdown 导致整页闪动。
+    // 需要打字机效果时显式传入 queueOptions={{ animate: true, animateTailChars?: number }}。
     var resolvedQueueOptions = useMemo(function() {
         return streaming ? _object_spread({
-            animateTailChars: 50
+            animate: false,
+            animateTailChars: undefined
         }, queueOptions) : queueOptions;
     }, [
         streaming,
@@ -274,17 +277,23 @@ var SCHEMA_LANGUAGES = new Set([
     ]);
     useEffect(function() {
         if (!streaming) {
-            // 非流式：直接展示全部内容
+            var _queueRef_current;
             setDisplayedContent(content || '');
+            (_queueRef_current = queueRef.current) === null || _queueRef_current === void 0 ? void 0 : _queueRef_current.dispose();
+            queueRef.current = null;
+            queueOptsSigRef.current = '';
             return;
         }
-        if (!queueRef.current) {
+        var sig = JSON.stringify(resolvedQueueOptions !== null && resolvedQueueOptions !== void 0 ? resolvedQueueOptions : {});
+        if (!queueRef.current || sig !== queueOptsSigRef.current) {
+            var _queueRef_current1;
+            (_queueRef_current1 = queueRef.current) === null || _queueRef_current1 === void 0 ? void 0 : _queueRef_current1.dispose();
             queueRef.current = new CharacterQueue(function(displayed) {
                 return setDisplayedContent(displayed);
             }, resolvedQueueOptions);
+            queueOptsSigRef.current = sig;
         }
         queueRef.current.push(content || '');
-        return undefined;
     }, [
         content,
         streaming,
@@ -347,7 +356,9 @@ var SCHEMA_LANGUAGES = new Set([
         components: components,
         prefixCls: prefixCls,
         linkConfig: linkConfig,
-        streaming: streaming
+        streaming: streaming,
+        streamingParagraphAnimation: streamingParagraphAnimation,
+        contentRevisionSource: streaming ? displayedContent : undefined
     });
     return wrapVarSSR(wrapSSR(wrapContentSSR(/*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
@@ -359,7 +370,7 @@ var SCHEMA_LANGUAGES = new Set([
             display: 'block'
         }
     }, /*#__PURE__*/ React.createElement("div", {
-        className: clsx(contentCls, hashId),
+        className: clsx(contentCls, "".concat(contentCls, "-markdown-readonly"), hashId),
         style: {
             whiteSpace: 'normal',
             wordWrap: 'normal'

package/dist/MarkdownRenderer/StreamingAnimationContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/** 仅末块为 true：流式 Markdown 只对「当前生长块」播放入场，避免全页段落/表格单元格一起闪动 */
+export interface StreamingAnimationContextValue {
+    animateBlock: boolean;
+}
+export declare const StreamingAnimationContext: React.Context<StreamingAnimationContextValue | null>;

package/dist/MarkdownRenderer/StreamingAnimationContext.js

@@ -0,0 +1,2 @@
+import React from "react";
+export var StreamingAnimationContext = /*#__PURE__*/ React.createContext(null);

package/dist/MarkdownRenderer/index.d.ts

@@ -7,5 +7,7 @@ export { CodeBlockRenderer } from './renderers/CodeRenderer';
 export { MermaidBlockRenderer } from './renderers/MermaidRenderer';
 export { SchemaBlockRenderer } from './renderers/SchemaRenderer';
 export type { CharacterQueueOptions, MarkdownRendererProps, MarkdownRendererRef, RenderMode, RendererBlockProps, } from './types';
+export type { UseMarkdownToReactOptions } from './markdownReactShared';
 export { markdownToReactSync, useMarkdownToReact } from './useMarkdownToReact';
+export { useStreamingMarkdownReact } from './streaming/useStreamingMarkdownReact';
 export { useStreaming } from './useStreaming';

package/dist/MarkdownRenderer/index.js

@@ -6,4 +6,5 @@ export { CodeBlockRenderer } from "./renderers/CodeRenderer";
 export { MermaidBlockRenderer } from "./renderers/MermaidRenderer";
 export { SchemaBlockRenderer } from "./renderers/SchemaRenderer";
 export { markdownToReactSync, useMarkdownToReact } from "./useMarkdownToReact";
+export { useStreamingMarkdownReact } from "./streaming/useStreamingMarkdownReact";
 export { useStreaming } from "./useStreaming";

package/dist/MarkdownRenderer/markdownReactShared.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import type { Processor } from 'unified';
+import { type MarkdownRemarkPlugin, type MarkdownToHtmlConfig } from '../MarkdownEditor/editor/utils/markdownToHtml';
+import type { RendererBlockProps } from './types';
+declare const createHastProcessor: (extraRemarkPlugins?: MarkdownRemarkPlugin[], config?: MarkdownToHtmlConfig) => Processor;
+/**
+ * 构建与 MarkdownEditor Readonly 组件对齐的 hast→React 组件映射。
+ *
+ * MarkdownEditor 的 Slate 元素使用 data-be 属性和 prefixCls 类名，
+ * 这里为原生 HTML 标签添加相同的属性，使共用的 CSS 能正确命中。
+ */
+declare const buildEditorAlignedComponents: (prefixCls: string, userComponents: Record<string, React.ComponentType<RendererBlockProps>>, streaming?: boolean, linkConfig?: {
+    openInNewTab?: boolean | undefined;
+    onClick?: ((url?: string) => boolean | void) | undefined;
+} | undefined, streamingParagraphAnimation?: boolean) => {
+    p: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h1: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h2: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h3: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h4: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h5: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    h6: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    blockquote: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ul: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ol: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    li: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    table: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    thead: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tbody: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    tr: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    th: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    td: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    input: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    a: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    strong: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    em: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    del: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    code: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    mark: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    kbd: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    sub: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    pre: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    img: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    video: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    audio: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    iframe: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    hr: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    sup: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    span: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    section: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    think: (props: any) => React.FunctionComponentElement<import("../ToolUseBarThink").ToolUseBarThinkProps>;
+    answer: (props: any) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+/**
+ * 在 hast 上标记「最后一个 p」，用于流式时仅该段落播放入场（单块长文时避免全页 p 一起闪）
+ */
+declare const markLastParagraphStreamingTail: (hast: any) => void;
+/**
+ * 将单个 markdown 片段转为 React 元素（内部函数）
+ */
+declare const renderMarkdownBlock: (blockContent: string, processor: Processor, components: Record<string, any>, blockOpts?: {
+    markStreamingTailParagraph?: boolean;
+}) => React.ReactNode;
+/**
+ * 将 markdown 按块（双换行）拆分，尊重代码围栏边界。
+ * 返回的每个块是一个独立的 markdown 片段，可单独解析。
+ */
+declare const splitMarkdownBlocks: (content: string) => string[];
+export interface UseMarkdownToReactOptions {
+    remarkPlugins?: MarkdownRemarkPlugin[];
+    htmlConfig?: MarkdownToHtmlConfig;
+    components?: Record<string, React.ComponentType<RendererBlockProps>>;
+    /** MarkdownEditor 的 CSS 前缀，用于生成对齐的 className */
+    prefixCls?: string;
+    /** 链接配置：onClick 拦截、openInNewTab 控制 */
+    linkConfig?: {
+        openInNewTab?: boolean;
+        onClick?: (url?: string) => boolean | void;
+    };
+    /** 是否处于流式状态，用于最后一个块的打字动画 */
+    streaming?: boolean;
+    /**
+     * 流式时是否对「生长中的末段」启用段落淡入（AnimationText）。
+     * 默认 false：重解析时频繁触发动画易导致整页闪动；需要时再显式传入 true。
+     */
+    streamingParagraphAnimation?: boolean;
+    /**
+     * 单调增长的原始流字符串，仅用于判断是否应保留分块缓存。
+     * 与 `content`（常为 useStreaming 输出的可解析串）分离，避免占位符与正文切换时误判为非前缀修订。
+     */
+    contentRevisionSource?: string;
+}
+export { createHastProcessor, buildEditorAlignedComponents, markLastParagraphStreamingTail, renderMarkdownBlock, splitMarkdownBlocks, };