feat: add Radix UI slot component and enhance Markdown rendering

src/renderer/src/assets/styles/tailwind.css

@@ -163,6 +163,13 @@
   }
 }
 
+@layer components {
+  @keyframes fadeInWithBlur {
+    from { opacity: 0; filter: blur(2px); }
+     to { opacity: 1; filter: blur(0px); }
+   }
+}
+
 :root {
   background-color: unset;
 }

src/renderer/src/pages/home/Markdown/Markdown.tsx

@@ -12,6 +12,7 @@ import { removeSvgEmptyLines } from '@renderer/utils/formats'
 import { processLatexBrackets } from '@renderer/utils/markdown'
 import { isEmpty } from 'lodash'
 import { type FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown, { type Components, defaultUrlTransform } from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
@@ -64,6 +65,8 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
     initialText: block.content
   })
 
+  const isStreaming = block.status === 'streaming'
+
   useEffect(() => {
     const newContent = block.content || ''
     const oldContent = prevContentRef.current || ''
@@ -85,9 +88,8 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
     prevBlockIdRef.current = block.id
 
     // 更新 stream 状态
-    const isStreaming = block.status === 'streaming'
     setIsStreamDone(!isStreaming)
-  }, [block.content, block.id, block.status, addChunk, reset])
+  }, [block.content, block.id, block.status, addChunk, reset, isStreaming])
 
   const remarkPlugins = useMemo(() => {
     const plugins = [
@@ -130,14 +132,16 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
       table: (props: any) => <Table {...props} blockId={block.id} />,
       img: (props: any) => <ImageViewer style={{ maxWidth: 500, maxHeight: 500 }} {...props} />,
       pre: (props: any) => <pre style={{ overflow: 'visible' }} {...props} />,
-      p: (props) => {
+      p: SmoothFade((props) => {
         const hasImage = props?.node?.children?.some((child: any) => child.tagName === 'img')
         if (hasImage) return <div {...props} />
         return <p {...props} />
-      },
-      svg: MarkdownSvgRenderer
+      }, isStreaming),
+      svg: MarkdownSvgRenderer,
+      li: SmoothFade((props) => <li {...props} />, isStreaming),
+      span: SmoothFade((props) => <span {...props} />, isStreaming)
     } as Partial<Components>
-  }, [block.id])
+  }, [block.id, isStreaming])
 
   if (/<style\b[^>]*>/i.test(messageContent)) {
     components.style = MarkdownShadowDOMRenderer as any
@@ -168,3 +172,23 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
 }
 
 export default memo(Markdown)
+
+const SmoothFade = (Comp: React.ElementType, isStreaming: boolean) => {
+  const handleAnimationEnd = (e: React.AnimationEvent) => {
+    // 动画结束后移除类名
+    if (e.animationName === 'fadeInWithBlur') {
+      e.currentTarget.classList.remove('animate-[fadeInWithBlur_500ms_ease-out_forwards]')
+      e.currentTarget.classList.remove('opacity-0')
+    }
+  }
+  return ({ children, ...rest }) => {
+    return (
+      <Comp
+        {...rest}
+        className={isStreaming ? 'animate-[fadeInWithBlur_500ms_ease-out_forwards] opacity-0' : ''}
+        onAnimationEnd={handleAnimationEnd}>
+        {children}
+      </Comp>
+    )
+  }
+}

src/renderer/src/pages/home/Messages/Blocks/PlaceholderBlock.tsx

@@ -1,27 +1,20 @@
-import { Spinner } from '@heroui/react'
-import { MessageBlockStatus, MessageBlockType, type PlaceholderMessageBlock } from '@renderer/types/newMessage'
+import { MessageBlockStatus, MessageBlockType } from '@renderer/types/newMessage'
+import { Loader } from '@renderer/ui/loader'
 import React from 'react'
-import styled from 'styled-components'
 
 interface PlaceholderBlockProps {
-  block: PlaceholderMessageBlock
+  status: MessageBlockStatus
+  type: MessageBlockType
 }
-const PlaceholderBlock: React.FC<PlaceholderBlockProps> = ({ block }) => {
-  if (block.status === MessageBlockStatus.PROCESSING && block.type === MessageBlockType.UNKNOWN) {
+const PlaceholderBlock: React.FC<PlaceholderBlockProps> = ({ status, type }) => {
+  if (status === MessageBlockStatus.PROCESSING && type === MessageBlockType.UNKNOWN) {
     return (
-      <MessageContentLoading>
-        <Spinner color="current" variant="dots" />
-      </MessageContentLoading>
+      <div className="-mt-2">
+        <Loader variant="terminal" />
+      </div>
     )
   }
   return null
 }
-const MessageContentLoading = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 32px;
-  margin-top: -5px;
-  margin-bottom: 5px;
-`
+
 export default React.memo(PlaceholderBlock)

src/renderer/src/pages/home/Messages/Blocks/index.tsx

@@ -215,15 +215,7 @@ const MessageBlockRenderer: React.FC<Props> = ({ blocks, message }) => {
       })}
       {isProcessing && (
         <AnimatedBlockWrapper key="message-loading-placeholder" enableAnimation={true}>
-          <PlaceholderBlock
-            block={{
-              id: `loading-${message.id}`,
-              messageId: message.id,
-              type: MessageBlockType.UNKNOWN,
-              status: MessageBlockStatus.PROCESSING,
-              createdAt: new Date().toISOString()
-            }}
-          />
+          <PlaceholderBlock type={MessageBlockType.UNKNOWN} status={MessageBlockStatus.PROCESSING} />
         </AnimatedBlockWrapper>
       )}
     </AnimatePresence>