@agentscope-ai/chat 1.2.0-beta.1789618496646 → 1.2.0-beta.1789634075831

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Message.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Audios from '../../../../DefaultCards/Audios';
 import Files from '../../../../DefaultCards/Files';
 import Images from '../../../../DefaultCards/Images';
@@ -11,7 +11,7 @@ import {
   IAgentScopeRuntimeMessage,
 } from '../types';
 
-/** Fade incoming live text without delaying it in a character queue. */
+/** Animate live text and let the last characters settle after normal completion. */
 function StreamingText({
   text,
   status,
@@ -24,6 +24,10 @@ function StreamingText({
   const animation = useChatAnywhereOptions((v) => v.response?.animation);
   const animationConfig = useChatAnywhereOptions((v) => v.response?.animationConfig);
   const streaming = status === AgentScopeRuntimeRunStatus.InProgress;
+  const [wasStreaming, setWasStreaming] = useState(streaming);
+  useEffect(() => {
+    if (streaming) setWasStreaming(true);
+  }, [streaming]);
   const interrupted = [status, messageStatus].some(
     (value) =>
       value === AgentScopeRuntimeRunStatus.Canceled ||
@@ -33,7 +37,7 @@ function StreamingText({
   return (
     <Markdown
       content={text}
-      animation={Boolean(animation && streaming && !interrupted)}
+      animation={Boolean(animation && (streaming || wasStreaming) && !interrupted)}
       animationConfig={animationConfig}
       cursor={!interrupted && streaming}
     />

package/components/AgentScopeRuntimeWebUI/core/types/IChatAnywhere.ts

@@ -917,13 +917,13 @@ export interface IAgentScopeRuntimeWebUIResponseSlot {
  */
 export interface IAgentScopeRuntimeWebUIResponseOptions {
   /**
-   * @description 实时正文按新增文本块渐显，默认关闭。复用 Markdown 的 animation，不逐字排队。历史消息及终态不播放动画。自定义 render 需调用 fallback() 或复用 SDK Message 才生效。
-   * @descriptionEn Fade in incoming live text chunks, off by default. Reuses Markdown animation without a character queue. History and terminal states do not animate. Custom renderers must use fallback() or the SDK Message component.
+   * @description 实时正文从左到右按字渐显，默认关闭。SSE 正常接收，CSS 独立播放；历史消息直接展示，正常结束等待动画收尾，中断立即补齐。自定义 render 需调用 fallback() 或复用 SDK Message 才生效。
+   * @descriptionEn Reveal incoming text from left to right with configurable speed, off by default. CSS animates independently of SSE reception; history displays immediately, completion drains animations, interruption flushes them. Custom renderers must use fallback() or the SDK Message component.
    */
   animation?: boolean;
   /**
-   * @description 正文淡入动画配置，仅 animation 为 true 时生效。fadeDuration 为毫秒（默认 200），easing 为 CSS 缓动函数（默认 ease-in-out）。不控制逐字输出速度。
-   * @descriptionEn Live text fade-in options, effective only when animation is true. fadeDuration is in milliseconds (default 200); easing is a CSS easing function (default ease-in-out). Does not control typing speed.
+   * @description 正文动画配置，仅 animation 为 true 时生效。characterInterval 为逐字渐显间隔（毫秒，默认 5），值越大越慢；0 为新增文本同时淡入。
+   * @descriptionEn Live text animation options, effective only with animation: true. characterInterval sets the stagger in milliseconds (default 5); larger values are slower, zero fades incoming text simultaneously.
    */
   animationConfig?: MarkdownProps['animationConfig'];
 

package/components/Markdown/Markdown.tsx

@@ -43,7 +43,7 @@ const isSupportsLookbehindAssertions = supportsLookbehindAssertions();
 export default memo(function (props: MarkdownProps) {
   const baseFontSize = props.baseFontSize || 14;
   const baseLineHeight = props.baseLineHeight || 1.7;
-  const content = useTyping({ content: props.content, typing: props.typing && !props.animation });
+  const content = useTyping({ content: props.content, typing: props.animation ? false : props.typing });
   const prefixCls = useProviderContext().getPrefixCls('markdown');
   const {
     raw = false,

package/components/Markdown/core/animation/AnimatedText.tsx

@@ -0,0 +1,181 @@
+import { attributesToProps } from 'html-react-parser';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createAnimationTimeline, resolveAnimation } from './timeline';
+
+export const AnimationContext = createContext({
+  active: false,
+  config: resolveAnimation(),
+  timeline: null as ReturnType<typeof createAnimationTimeline> | null,
+});
+
+type Chunk = {
+  id: number;
+  text: string;
+  plan?: ReturnType<ReturnType<typeof createAnimationTimeline>['reserve']>;
+  config?: ReturnType<typeof resolveAnimation>;
+};
+
+const AnimatedText = React.memo(function AnimatedText({
+  text,
+}: {
+  text: string;
+}) {
+  const { active, config, timeline } = useContext(AnimationContext);
+  const [chunks, setChunks] = useState<Chunk[]>(() =>
+    active ? [] : [{ id: -1, text }],
+  );
+  const previous = useRef(active ? '' : text);
+  const resetOnSetup = useRef(false);
+  const nextId = useRef(0);
+  const pending = useRef(
+    new Map<
+      number,
+      { timer: ReturnType<typeof setTimeout>; release: () => void }
+    >(),
+  );
+
+  useEffect(() => {
+    const clear = () => {
+      pending.current.forEach(({ timer, release }) => {
+        clearTimeout(timer);
+        release();
+      });
+      pending.current.clear();
+    };
+    if (!active) {
+      clear();
+      previous.current = text;
+      setChunks([{ id: nextId.current++, text }]);
+      return;
+    }
+    if (previous.current === text && !resetOnSetup.current) return;
+    const append = !resetOnSetup.current && text.startsWith(previous.current);
+    resetOnSetup.current = false;
+    if (!append) clear();
+    const suffix = append ? text.slice(previous.current.length) : text;
+    previous.current = text;
+    const id = nextId.current++;
+    const plan = timeline?.reserve(suffix, performance.now(), config);
+    setChunks((old) => [
+      ...(append ? old : []),
+      { id, text: suffix, plan, config },
+    ]);
+    if (plan) {
+      // One cleanup per incoming chunk, never a React update per character/frame.
+      const timer = setTimeout(() => {
+        plan.release();
+        pending.current.delete(id);
+        setChunks((old) => {
+          const settled = old.map((chunk) =>
+            chunk.id === id ? { id, text: chunk.text } : chunk,
+          );
+          const firstPending = settled.findIndex((chunk) => chunk.plan);
+          const count = firstPending < 0 ? settled.length : firstPending;
+          return count > 1
+            ? [
+                {
+                  id: settled[0].id,
+                  text: settled
+                    .slice(0, count)
+                    .map((chunk) => chunk.text)
+                    .join(''),
+                },
+                ...settled.slice(count),
+              ]
+            : settled;
+        });
+      }, plan.duration + 32);
+      pending.current.set(id, { timer, release: plan.release });
+    }
+  }, [text, active, config, timeline]);
+
+  useEffect(
+    () => () => {
+      pending.current.forEach(({ timer, release }) => {
+        clearTimeout(timer);
+        release();
+      });
+      pending.current.clear();
+      resetOnSetup.current = true;
+    },
+    [],
+  );
+
+  if (!active) return <>{text}</>;
+  return (
+    <>
+      {chunks.map((chunk) => (
+        <React.Fragment key={chunk.id}>
+          {chunk.plan
+            ? chunk.plan.units.map((unit, index) => (
+                <span
+                  key={index}
+                  className="spark-stream-character"
+                  style={{
+                    animation: `spark-stream-reveal ${
+                      chunk.config!.fadeDuration
+                    }ms ${chunk.config!.easing} ${
+                      chunk.plan!.delays[index]
+                    }ms both`,
+                  }}
+                >
+                  {unit}
+                </span>
+              ))
+            : chunk.text}
+        </React.Fragment>
+      ))}
+    </>
+  );
+});
+
+export default AnimatedText;
+
+// Transform React text children, without touching the renderer's DOM or its
+// sanitization. Code, math, media and user-provided components keep their renderer.
+function animateChildren(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (typeof child === 'string')
+      return /\S/.test(child) ? <AnimatedText text={child} /> : child;
+    if (!React.isValidElement<{ children?: React.ReactNode }>(child))
+      return child;
+    const props = child.props as {
+      children?: React.ReactNode;
+      className?: string;
+    };
+    if (
+      typeof child.type !== 'string' ||
+      ['code', 'pre', 'svg', 'math'].includes(child.type) ||
+      /katex/.test(props.className || '')
+    )
+      return child;
+    return React.cloneElement(
+      child,
+      undefined,
+      animateChildren(child.props.children),
+    );
+  });
+}
+
+export const animatedComponents = Object.fromEntries(
+  ['p', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th', 'dt', 'dd'].map(
+    (tag) => [
+      tag,
+      function AnimatedBlock({ children, domNode }: any) {
+        // Match the HTML renderer's native attribute conversion, including style
+        // strings and boolean attributes when allowHtml is enabled.
+        return React.createElement(
+          tag,
+          attributesToProps(domNode?.attribs || {}),
+          animateChildren(children),
+        );
+      },
+    ],
+  ),
+);

package/components/Markdown/core/animation/timeline.ts

@@ -0,0 +1,67 @@
+import type { MarkdownAnimationConfig } from '../../types';
+
+const finite = (value: number | undefined, fallback: number, max: number) =>
+  Number.isFinite(value) ? Math.min(max, Math.max(0, value!)) : fallback;
+
+export function resolveAnimation(config?: MarkdownAnimationConfig) {
+  const characterInterval = finite(config?.characterInterval, 5, 100);
+  return {
+    characterInterval,
+    fadeDuration: 160,
+    easing: 'ease-out',
+    // Slower speeds need more room to reveal a normal chunk, while retaining
+    // a hard backlog limit for bursts and restored/background content.
+    maxDelay: Math.min(2000, Math.max(240, characterInterval * 48)),
+  };
+}
+
+// One timeline per Markdown, so new paragraphs do not restart at delay zero.
+// Cap both pending time and live spans. Large bursts coalesce into small groups.
+export function createAnimationTimeline() {
+  let tail = 0;
+  let activeUnits = 0;
+  const Segmenter = (Intl as any).Segmenter;
+  const segmenter = Segmenter
+    ? new Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+  return {
+    reserve(
+      text: string,
+      now: number,
+      config: ReturnType<typeof resolveAnimation>,
+    ) {
+      if (!text || activeUnits >= 384) return undefined;
+      const glyphs: string[] = segmenter
+        ? Array.from(segmenter.segment(text), (item: any) => item.segment)
+        : Array.from(text);
+      const limit = Math.max(1, Math.min(192, 384 - activeUnits));
+      const size = Math.max(1, Math.ceil(glyphs.length / limit));
+      const units: string[] = [];
+      for (let i = 0; i < glyphs.length; i += size)
+        units.push(glyphs.slice(i, i + size).join(''));
+      const start = Math.min(Math.max(now, tail), now + config.maxDelay);
+      const step =
+        units.length > 1
+          ? Math.min(
+              config.characterInterval,
+              (now + config.maxDelay - start) / (units.length - 1),
+            )
+          : 0;
+      const delays = units.map((_, index) => start - now + index * step);
+      tail = start + units.length * step;
+      activeUnits += units.length;
+      let released = false;
+      return {
+        units,
+        delays,
+        duration: (delays.at(-1) || 0) + config.fadeDuration,
+        release() {
+          if (released) return;
+          released = true;
+          activeUnits -= units.length;
+          if (!activeUnits) tail = 0;
+        },
+      };
+    },
+  };
+}

package/components/Markdown/core/hooks/useTyping.tsx

@@ -1,30 +1,25 @@
 import { useEffect, useRef, useState } from 'react';
-import { createTypingController } from './typingController';
 
-const useTyping = ({
-  content,
-  typing,
-}: {
-  content?: string;
-  typing?: boolean | number;
-}) => {
-  const [visible, setVisible] = useState('');
-  const controller = useRef<ReturnType<typeof createTypingController>>();
-  if (!controller.current)
-    controller.current = createTypingController(setVisible);
+const useTyping = ({ content, typing }) => {
+  const [index, setIndex] = useState(0);
+  const timer = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
-    controller.current!.update(content || '', typing);
-  }, [content, typing]);
+    if (typing) {
+      timer.current = setInterval(() => {
+        setIndex((v) => v + 1);
+      }, typeof typing === 'number' ? typing : 5);
+    } else {
+      timer.current && clearInterval(timer.current);
+    }
 
-  useEffect(() => () => controller.current!.stop(), []);
+    return () => clearInterval(timer.current);
+  }, [typing]);
 
-  const enabled =
-    typing === true ||
-    (typeof typing === 'number' && Number.isFinite(typing) && typing > 0);
-  if (!enabled) return content;
-  // Never render stale text for a replacement while its effect is pending.
-  return (content || '').startsWith(visible) ? visible : '';
+  if (!typing) return content;
+
+  return content.slice(0, index);
 };
 
-export default useTyping;
+
+export default useTyping;

package/components/Markdown/core/index.tsx

@@ -1,37 +1,96 @@
 import XMarkdown from '@ant-design/x-markdown';
-import { InnerMarkdownXProps } from '../types';
+import { memo, useEffect, useMemo, useState } from 'react';
 import Styles from '../styles';
+import { InnerMarkdownXProps } from '../types';
+import { AnimationContext, animatedComponents } from './animation/AnimatedText';
+import {
+  createAnimationTimeline,
+  resolveAnimation,
+} from './animation/timeline';
 import useCursorContent from './hooks/useCursorContent';
-import { memo, useMemo } from 'react';
 
+// Global styles depend on theme context, not on each typed text frame.
+const MarkdownStyles = memo(Styles);
 
 export default memo(function InnerMarkdownX(props: InnerMarkdownXProps) {
-  const { content: originalContent, cursor, animation, animationConfig, ...rest } = props;
+  const {
+    content: originalContent,
+    cursor,
+    animation,
+    animationConfig,
+    components,
+    ...rest
+  } = props;
+  const config = useMemo(
+    () => resolveAnimation(animationConfig),
+    [animationConfig?.characterInterval],
+  );
+  const timeline = useMemo(() => createAnimationTimeline(), []);
+  const [reducedMotion, setReducedMotion] = useState(
+    () =>
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+  );
+  useEffect(() => {
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const update = () => setReducedMotion(query.matches);
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+  }, []);
+  const live = Boolean(animation && cursor && !reducedMotion);
+  const [draining, setDraining] = useState(live);
+  useEffect(() => {
+    if (live) {
+      setDraining(true);
+      return;
+    }
+    // Keep final characters in the same tree until their animations settle.
+    const timer = setTimeout(
+      () => setDraining(false),
+      config.maxDelay + config.fadeDuration + 64,
+    );
+    return () => clearTimeout(timer);
+  }, [live, config.maxDelay, config.fadeDuration]);
+  const active = Boolean(animation && !reducedMotion && (live || draining));
+  const animationContext = useMemo(
+    () => ({ active, config, timeline }),
+    [active, config, timeline],
+  );
+  const resolvedComponents = useMemo(
+    () => ({ ...animatedComponents, ...components }),
+    [components],
+  );
   const content = useCursorContent({
     cursor: cursor,
     content: originalContent,
-    animation: animation
+    animation: animation,
   });
 
   const streaming = useMemo(() => {
     if (!animation) return undefined;
     return {
       hasNextChunk: animation && cursor,
-      enableAnimation: animation && cursor,
-      animationConfig,
-    }
-  }, [cursor, animation, animationConfig]);
-
+      enableAnimation: false,
+    };
+  }, [cursor, animation]);
 
-  return <>
-    <Styles />
+  const markdown = (
     <XMarkdown
       {...rest}
+      components={animation ? resolvedComponents : components}
       content={content}
-      streaming={streaming as {
-        hasNextChunk: boolean;
-        enableAnimation: boolean;
-      }}
+      streaming={
+        streaming as { hasNextChunk: boolean; enableAnimation: boolean }
+      }
     />
-  </>;
-});
+  );
+
+  return (
+    <>
+      <MarkdownStyles />
+      <AnimationContext.Provider value={animationContext}>
+        {markdown}
+      </AnimationContext.Provider>
+    </>
+  );
+});

package/components/Markdown/index.en-US.md

@@ -32,7 +32,7 @@ import { Markdown } from '@agentscope-ai/chat';
   content={content}
   cursor={isStreaming}
   animation
-  animationConfig={{ fadeDuration: 120, easing: 'ease-out' }}
+  animationConfig={{ characterInterval: 12 }}
 />
 ```
-`fadeDuration` is in milliseconds (default `200`); `easing` defaults to `ease-in-out`. Effective only with animation enabled during streaming; this does not control typing speed. ChatAnywhere Text cards accept the same options in `data.animationConfig`.
+`animationConfig.characterInterval` controls the stagger in milliseconds (default `5`). Larger values are slower: try `12` or `20`; `0` fades incoming text simultaneously. Large bursts accelerate to bound backlog; actual paints follow screen refresh rate. Container height remains natural with no height animation. Reduced motion is respected. ChatAnywhere Text cards accept the same configuration.

package/components/Markdown/index.tsx

@@ -3,4 +3,5 @@ export { default } from './Markdown';
 
 export type {
   MarkdownProps,
-} from './types';
+  MarkdownAnimationConfig,
+} from './types';

package/components/Markdown/index.zh-CN.md

@@ -33,7 +33,7 @@ import { Markdown } from '@agentscope-ai/chat';
   content={content}
   cursor={isStreaming}
   animation
-  animationConfig={{ fadeDuration: 120, easing: 'ease-out' }}
+  animationConfig={{ characterInterval: 12 }}
 />
 ```
-`fadeDuration` 单位为毫秒，默认 `200`；`easing` 默认 `ease-in-out`。仅启用 `animation` 且正在流式输出时生效，不控制逐字输出速度。ChatAnywhere 的 Text 卡片可在 `data.animationConfig` 中传入相同配置。
+`animationConfig.characterInterval` 控制相邻文字开始渐显的间隔（毫秒，默认 `5`）。值越大越慢，可设为 `12` 或 `20`；`0` 同时淡入新增内容。大段突发内容会自动加快以限制积压，实际画面按屏幕刷新率绘制。容器使用自然高度，不播放高度动画；尊重减少动态效果设置。ChatAnywhere Text 卡片可传入相同配置。

package/components/Markdown/styles.ts

@@ -1,6 +1,13 @@
 import { createGlobalStyle } from 'antd-style';
 
 export default createGlobalStyle`
+@keyframes spark-stream-reveal {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .spark-stream-character { animation: none !important; opacity: 1 !important; }
+}
 .${(p) => p.theme.prefixCls}-markdown {
   color: inherit;
   max-width: 100%;

package/components/Markdown/types.tsx

@@ -1,5 +1,9 @@
 import { XMarkdownProps } from '@ant-design/x-markdown';
 
+export interface MarkdownAnimationConfig {
+  /** Character reveal interval in ms. Default 5; larger values reveal more slowly. Zero fades each incoming chunk together. */
+  characterInterval?: number;
+}
 
 export interface MarkdownProps {
   /**
@@ -32,7 +36,7 @@ export interface MarkdownProps {
   /**
    * @description 是否禁用图片渲染
    * @descriptionEn Whether to disable image rendering
-  */
+   */
   disableImage?: boolean;
 
   /**
@@ -47,7 +51,6 @@ export interface MarkdownProps {
    */
   typing?: boolean | number;
 
-
   /**
    * @description 组件的CSS类名
    * @descriptionEn CSS class name for the component
@@ -55,11 +58,11 @@ export interface MarkdownProps {
   className?: string;
   animation?: boolean;
   /**
-   * @description 淡入动画配置，仅 animation 开启时生效；fadeDuration 单位为毫秒（默认 200），easing 默认 ease-in-out。
-   * @descriptionEn Fade-in options, effective only when animation is enabled; fadeDuration is in milliseconds (default 200), easing defaults to ease-in-out.
+   * @description 逐字渐显速度配置，仅 animation 开启时生效。
+   * @descriptionEn Character reveal speed, effective only with animation enabled.
    */
-  animationConfig?: NonNullable<XMarkdownProps['streaming']>['animationConfig'];
-  
+  animationConfig?: MarkdownAnimationConfig;
+
   components?: XMarkdownProps['components'];
   citations?: {
     title?: string;
@@ -88,7 +91,6 @@ export interface MarkdownProps {
   >;
 }
 
-
 export interface InnerMarkdownXProps extends XMarkdownProps {
   /**
    * @description 光标样式类型，支持点状、下划线或布尔值控制
@@ -97,4 +99,4 @@ export interface InnerMarkdownXProps extends XMarkdownProps {
   cursor?: MarkdownProps['cursor'];
   animation?: MarkdownProps['animation'];
   animationConfig?: MarkdownProps['animationConfig'];
-}
+}

package/components/index.ts

@@ -95,6 +95,7 @@ export {
   default as Markdown,
   type MarkdownProps as IMarkdownProps,
   type MarkdownProps,
+  type MarkdownAnimationConfig,
 } from './Markdown';
 
 export { default as AIGC } from './AIGC';

package/lib/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Message.js

@@ -1,4 +1,10 @@
-import React from 'react';
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useState } from 'react';
 import Audios from "../../../../DefaultCards/Audios";
 import Files from "../../../../DefaultCards/Files";
 import Images from "../../../../DefaultCards/Images";
@@ -7,7 +13,7 @@ import Markdown from "../../../../Markdown";
 import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import { AgentScopeRuntimeContentType, AgentScopeRuntimeRunStatus } from "../types";
 
-/** Fade incoming live text without delaying it in a character queue. */
+/** Animate live text and let the last characters settle after normal completion. */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 function StreamingText(_ref) {
@@ -23,12 +29,19 @@ function StreamingText(_ref) {
     return (_v$response2 = v.response) === null || _v$response2 === void 0 ? void 0 : _v$response2.animationConfig;
   });
   var streaming = status === AgentScopeRuntimeRunStatus.InProgress;
+  var _useState = useState(streaming),
+    _useState2 = _slicedToArray(_useState, 2),
+    wasStreaming = _useState2[0],
+    setWasStreaming = _useState2[1];
+  useEffect(function () {
+    if (streaming) setWasStreaming(true);
+  }, [streaming]);
   var interrupted = [status, messageStatus].some(function (value) {
     return value === AgentScopeRuntimeRunStatus.Canceled || value === AgentScopeRuntimeRunStatus.Failed || value === AgentScopeRuntimeRunStatus.Rejected;
   });
   return /*#__PURE__*/_jsx(Markdown, {
     content: text,
-    animation: Boolean(animation && streaming && !interrupted),
+    animation: Boolean(animation && (streaming || wasStreaming) && !interrupted),
     animationConfig: animationConfig,
     cursor: !interrupted && streaming
   });

package/lib/AgentScopeRuntimeWebUI/core/types/IChatAnywhere.d.ts

@@ -826,13 +826,13 @@ export interface IAgentScopeRuntimeWebUIResponseSlot {
  */
 export interface IAgentScopeRuntimeWebUIResponseOptions {
     /**
-     * @description 实时正文按新增文本块渐显，默认关闭。复用 Markdown 的 animation，不逐字排队。历史消息及终态不播放动画。自定义 render 需调用 fallback() 或复用 SDK Message 才生效。
-     * @descriptionEn Fade in incoming live text chunks, off by default. Reuses Markdown animation without a character queue. History and terminal states do not animate. Custom renderers must use fallback() or the SDK Message component.
+     * @description 实时正文从左到右按字渐显，默认关闭。SSE 正常接收，CSS 独立播放；历史消息直接展示，正常结束等待动画收尾，中断立即补齐。自定义 render 需调用 fallback() 或复用 SDK Message 才生效。
+     * @descriptionEn Reveal incoming text from left to right with configurable speed, off by default. CSS animates independently of SSE reception; history displays immediately, completion drains animations, interruption flushes them. Custom renderers must use fallback() or the SDK Message component.
      */
     animation?: boolean;
     /**
-     * @description 正文淡入动画配置，仅 animation 为 true 时生效。fadeDuration 为毫秒（默认 200），easing 为 CSS 缓动函数（默认 ease-in-out）。不控制逐字输出速度。
-     * @descriptionEn Live text fade-in options, effective only when animation is true. fadeDuration is in milliseconds (default 200); easing is a CSS easing function (default ease-in-out). Does not control typing speed.
+     * @description 正文动画配置，仅 animation 为 true 时生效。characterInterval 为逐字渐显间隔（毫秒，默认 5），值越大越慢；0 为新增文本同时淡入。
+     * @descriptionEn Live text animation options, effective only with animation: true. characterInterval sets the stagger in milliseconds (default 5); larger values are slower, zero fades incoming text simultaneously.
      */
     animationConfig?: MarkdownProps['animationConfig'];
     /**

package/lib/Markdown/Markdown.js

@@ -53,7 +53,7 @@ export default /*#__PURE__*/memo(function (props) {
   var baseLineHeight = props.baseLineHeight || 1.7;
   var content = useTyping({
     content: props.content,
-    typing: props.typing && !props.animation
+    typing: props.animation ? false : props.typing
   });
   var prefixCls = useProviderContext().getPrefixCls('markdown');
   var _props$raw = props.raw,