feat：修改chat区域的滚动方式

package.json

@@ -41,7 +41,6 @@
   "dependencies": {
     "@nextui-org/react": "^2.4.6",
     "@reduxjs/toolkit": "^2.2.7",
-    "@virtuoso.dev/message-list": "^1.8.3",
     "ahooks": "^3.8.0",
     "axios": "^1.7.3",
     "clsx": "^2.1.1",
@@ -52,7 +51,6 @@
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.0",
-    "react-virtuoso": "^4.9.0",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",

src/pages/Chat/Chat.module.less

@@ -4,6 +4,37 @@
   display: flex;
   flex-direction: column;
 }
+.scrollView {
+  // display: flex;
+  // flex-direction: column;
+  // flex: 1 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
 .content {
-  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+.scrollable {
+  flex-direction: column-reverse;
+  align-items: center;
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  width: 100%;
+}
+.inter {
+  overflow-anchor: none;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: fit-content;
+  width: 100%;
 }

src/pages/Chat/Chat.module.less.d.ts

@@ -3,6 +3,9 @@
 interface CssExports {
   chatPage: string
   content: string
+  inter: string
+  scrollView: string
+  scrollable: string
 }
 declare const cssExports: CssExports
 export default cssExports

src/pages/Chat/Chat.tsx

 import React, { useCallback, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Spinner } from '@nextui-org/react'
-import { Virtuoso } from 'react-virtuoso'
 import { motion } from 'framer-motion'
 import styles from './Chat.module.less'
 import { ChatSlogan } from './components/ChatSlogan'
@@ -73,6 +72,7 @@ export const Chat: React.FC = () => {
                 answerList: [
                   {
                     ...msg.content.data,
+                    isShow: false,
                     answer: (newItems[lastIndex].answerList[0].answer || '') + msg.content.data.answer,
                   },
                 ],
@@ -125,6 +125,7 @@ export const Chat: React.FC = () => {
   }, [id])
 
   return (
+    <div className={styles.scrollView}>
       <div className={`${styles.chatPage} relative`}>
         <ChatSlogan />
         <ChatMaskBar />
@@ -132,29 +133,23 @@ export const Chat: React.FC = () => {
           {isLoading && <div className="w-full h-full flex justify-center"><Spinner /></div>}
           {!isLoading && (
             <motion.div
-            initial={{ opacity: 0, y: -50 }}
+              initial={{ opacity: 0, y: -10 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{
-              duration: 0.4,
-              x: { type: 'spring', stiffness: 50 },
-              scale: { type: 'spring', stiffness: 50 },
-              opacity: { duration: 0.7 },
+                duration: 0.3,
+                opacity: { duration: 0.1 },
               }}
-            className="w-full h-full mx-auto"
+              className={styles.scrollable}
             >
-            <Virtuoso
-              style={{ height: '100%' }} // 设置一个固定高度或使用动态高度
-              data={allItems}
-              itemContent={(index, record) => (
-                <div className="chatItem max-w-[1000px] mx-auto">
+              <div className={styles.inter}>
+                {allItems.map((record, index) => (
+                  <div className="w-full chatItem max-w-[1000px] mx-auto" key={index}>
                     {record.role === 'system' && <ChatWelcome />}
                     {record.role === 'user' && <ChatItemUser record={record} />}
                     {record.role === 'ai' && <ChatAnswerBox isLastAnswer={index === allItems.length - 1} showIndex={0} record={record} index={index} />}
                   </div>
-              )}
-              initialTopMostItemIndex={allItems.length - 1} // 初始滚动到底部
-              followOutput="smooth" // 新消息时平滑滚动到底部
-            />
+                ))}
+              </div>
             </motion.div>
           )}
         </div>
@@ -165,5 +160,6 @@ export const Chat: React.FC = () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx

-import { Avatar } from '@nextui-org/react'
+import { Avatar, Spinner } from '@nextui-org/react'
 import { motion } from 'framer-motion'
-import ReactMarkdown from 'react-markdown'
-import rehypeRaw from 'rehype-raw'
-import rehypeSanitize from 'rehype-sanitize'
-import remarkGfm from 'remark-gfm'
-import { formatMarkdown } from './markdownFormatter'
+import { ChatAnswerShower } from './ChatAnswerShower'
+import { ChatAnswerParser } from './ChatAnswerParser'
 import type { ChatRecord } from '@/types/chat'
 import AvatarBot from '@/assets/avatarBot.png'
 
@@ -29,17 +26,12 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex
                 >
                   {item.answer && (
                     <div className="content">
-                      <ReactMarkdown
-                        rehypePlugins={[rehypeRaw, rehypeSanitize]}
-                        remarkPlugins={[remarkGfm]}
-                        className="markdown-content"
-                      >
-                        {formatMarkdown(item.answer || '')}
-                      </ReactMarkdown>
+                      {item.isShow && <ChatAnswerShower answer={item} />}
+                      {!item.isShow && <ChatAnswerParser answer={item} />}
                     </div>
                   )}
                   {!item.answer && (
-                    <span>loading</span>
+                    <Spinner size="sm" />
                   )}
                 </motion.div>
                 <div className="w-[130px]"></div>

src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx

+import React, { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
+import type { Answer } from '@/types/chat'
+
+interface ChatAnswerParserProps {
+  answer: Answer
+}
+
+export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ answer }) => {
+  const [displayedText, setDisplayedText] = useState('')
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  useEffect(() => {
+    if (currentIndex < answer.answer.length) {
+      const timer = setTimeout(() => {
+        setDisplayedText(answer.answer.slice(0, currentIndex + 1))
+        setCurrentIndex(prevIndex => prevIndex + 1)
+      }, 30) // 调整此值以改变打字速度
+
+      return () => clearTimeout(timer)
+    }
+  }, [answer, currentIndex])
+
+  return (
+    <div className="answerParser">
+      <ReactMarkdown
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        remarkPlugins={[remarkGfm]}
+        className="markdown-content"
+      >
+        {displayedText}
+      </ReactMarkdown>
+    </div>
+  )
+}

src/pages/Chat/components/ChatItem/ChatAnswerShower.tsx

+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
+import { formatMarkdown } from './markdownFormatter'
+import type { Answer } from '@/types/chat'
+
+interface ChatAnswerShowerProps {
+  answer: Answer
+}
+
+export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer }) => {
+  return (
+    <div className="answerShower">
+      <ReactMarkdown
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        remarkPlugins={[remarkGfm]}
+        className="markdown-content"
+      >
+        {formatMarkdown(answer.answer || '')}
+      </ReactMarkdown>
+    </div>
+  )
+}

src/pages/Chat/components/ChatItem/ChatAnswerTypeIt.tsx

+import React, { useEffect, useState } from 'react'
+
+interface ChatAnswerTypeItProps {
+  content: string
+  typingSpeed?: number
+}
+
+const ChatAnswerTypeIt: React.FC<ChatAnswerTypeItProps> = ({ content, typingSpeed = 50 }) => {
+  const [displayedText, setDisplayedText] = useState('')
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  useEffect(() => {
+    if (currentIndex < content.length) {
+      const timer = setTimeout(() => {
+        setDisplayedText(prev => prev + content[currentIndex])
+        setCurrentIndex(prev => prev + 1)
+      }, typingSpeed)
+
+      return () => clearTimeout(timer)
+    }
+  }, [content, currentIndex, typingSpeed])
+
+  return <span>{displayedText}</span>
+}
+
+export default ChatAnswerTypeIt