refactor: 优化聊天滚动逻辑，通过css来进行优化

web/src/components/ChatBox/ChatMessageList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import {
   ChatMessage,
   getMessageTimeDiff,
@@ -12,25 +12,9 @@ interface ChatMessageListProps {
 }
 export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
   (props) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const len = props.messages.length;
-
-    useEffect(() => {
-      // 当会话消息增加时, 滚动到底部
-      requestAnimationFrame(() => {
-        if (ref.current === null) {
-          return;
-        }
-
-        ref.current.scrollTo({
-          top: ref.current.scrollHeight,
-          behavior: 'smooth',
-        });
-      });
-    }, [len]);
-
     return (
-      <div className="flex-1 overflow-y-scroll" ref={ref}>
+      <div className="flex-1 overflow-y-scroll flex flex-col-reverse">
+        <div>
           {props.messages.map((message, index, arr) => {
             let showDate = true;
             let showAvatar = true;
@@ -67,6 +51,7 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
             );
           })}
         </div>
+      </div>
     );
   }
 );