💄 feat(playground): chat streaming animation

web/src/components/common/markdown/MarkdownRenderer.js

@@ -16,6 +16,7 @@ import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
 import { copy } from '../../../helpers/utils';
 import { IconCopy } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
+import { rehypeSplitWordsIntoSpans } from '../../../utils/rehypeSplitWordsIntoSpans';
 
 mermaid.initialize({
   startOnLoad: false,
@@ -310,26 +311,40 @@ function tryWrapHtmlCode(text) {
 }
 
 function _MarkdownContent(props) {
+  const {
+    content,
+    className,
+    animated = false,
+  } = props;
+
   const escapedContent = useMemo(() => {
-    return tryWrapHtmlCode(escapeBrackets(props.content));
-  }, [props.content]);
+    return tryWrapHtmlCode(escapeBrackets(content));
+  }, [content]);
 
   // 判断是否为用户消息
-  const isUserMessage = props.className && props.className.includes('user-message');
+  const isUserMessage = className && className.includes('user-message');
+
+  const rehypePluginsBase = useMemo(() => {
+    const base = [
+      RehypeKatex,
+      [
+        RehypeHighlight,
+        {
+          detect: false,
+          ignoreMissing: true,
+        },
+      ],
+    ];
+    if (animated) {
+      base.push(rehypeSplitWordsIntoSpans);
+    }
+    return base;
+  }, [animated]);
 
   return (
     <ReactMarkdown
       remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
-      rehypePlugins={[
-        RehypeKatex,
-        [
-          RehypeHighlight,
-          {
-            detect: false,
-            ignoreMissing: true,
-          },
-        ],
-      ]}
+      rehypePlugins={rehypePluginsBase}
       components={{
         pre: PreCode,
         code: CustomCode,
@@ -447,6 +462,7 @@ export function MarkdownRenderer(props) {
     fontFamily = 'inherit',
     className,
     style,
+    animated = false,
     ...otherProps
   } = props;
 
@@ -482,7 +498,7 @@ export function MarkdownRenderer(props) {
           正在渲染...
         </div>
       ) : (
-        <MarkdownContent content={content} className={className} />
+        <MarkdownContent content={content} className={className} animated={animated} />
       )}
     </div>
   );

web/src/components/common/markdown/markdown.css

@@ -419,4 +419,18 @@ pre:hover .copy-code-button {
   padding: 12px 16px;
   margin: 12px 0;
   border-radius: 0 6px 6px 0;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.4s ease-in-out both;
 }

web/src/components/playground/MessageContent.js

@@ -242,6 +242,7 @@ const MessageContent = ({
                     <MarkdownRenderer
                       content={textContent.text}
                       className={message.role === 'user' ? 'user-message' : ''}
+                      animated={false}
                     />
                   </div>
                 )}
@@ -257,6 +258,7 @@ const MessageContent = ({
                     <MarkdownRenderer
                       content={finalDisplayableFinalContent}
                       className=""
+                      animated={isThinkingStatus}
                     />
                   </div>
                 );
@@ -267,6 +269,7 @@ const MessageContent = ({
                   <MarkdownRenderer
                     content={message.content}
                     className={message.role === 'user' ? 'user-message' : ''}
+                    animated={false}
                   />
                 </div>
               );

web/src/components/playground/ThinkingContent.js

@@ -92,6 +92,7 @@ const ThinkingContent = ({
                 <MarkdownRenderer
                   content={finalExtractedThinkingContent}
                   className=""
+                  animated={isThinkingStatus}
                 />
               </div>
             </div>