fix(markdown): strengthen streaming tail fade

[c121914yu]

Summary

• make the streaming tail fade from opacity 0 to 1 so each new batch is visible
• align the duration and easing with the current LobeHub Markdown streaming approach
• keep a CSS animation fallback when Web Animations API is unavailable

Verification

• Markdown and ChatBox regression: 12 files, 115 tests passed
• app typecheck passed
• Markdown lint and Prettier checks passed

Reference: https://github.com/lobehub/lobehub

[Copilot]

Pull request overview

This PR adjusts the “streaming tail” animation for Markdown rendering so that newly appended streamed text fades in from fully transparent to fully visible, matching the intended streaming UX and aligning timing/easing with the referenced LobeHub approach.

Changes:

• Updated the Web Animations API keyframes to fade from opacity: 0 to 1 and aligned duration/easing via shared constants.
• Added a CSS keyframes-based fade-in under the streaming “waiting” state as a fallback when WAAPI isn’t available.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
projects/app/src/components/Markdown/index.tsx	Aligns stream-tail WAAPI fade-in keyframes and timing/easing constants.
projects/app/src/components/Markdown/index.module.scss	Adds CSS fade-in keyframes and applies it to .stream-tail during waitingAnimation.

Comments suppressed due to low confidence (1)

projects/app/src/components/Markdown/index.tsx:94

• MarkdownStreamTailRenderer’s JSDoc says CSS is only a fallback when Web Animations API is unavailable, but .waitingAnimation .stream-tail now always runs a CSS animation. In browsers that support WAAPI, this means the fade may run twice (CSS on initial paint, then WAAPI on layout effect), which can cause a visible restart/flicker and makes the behavior harder to reason about.

/** 仅让最新流式文本批次执行淡入；CSS 会为不支持 Web Animations API 的浏览器兜底。 */
function MarkdownStreamTailRenderer({ children }: any) {
  const ref = useRef<HTMLSpanElement>(null);

  useBrowserLayoutEffect(() => {
    const element = ref.current;
    if (!element?.animate) return;

    const animation = element.animate(
      [
        { opacity: 0, transform: 'translateY(1px)' },
        { opacity: 1, transform: 'translateY(0)' }
      ],
      {
        duration: STREAM_TAIL_FADE_DURATION_MS,
        easing: STREAM_TAIL_FADE_EASING,
        fill: 'both'
      }
    );

    return () => animation.cancel();
  }, [children]);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

✅ Build Successful - Preview fastgpt Image for this PR:

ghcr.io/labring/fastgpt-pr:fastgpt_6b88f8149f41a8a09daf3ed1b118b1f1b2326f21

🕒 Time: 2026-07-14 18:09:18 (UTC+8)