refactor: 优化聊天列表逻辑，当发送消息时滚动到底部

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import {
   ChatMessage,
   getMessageTimeDiff,
@@ -10,10 +10,35 @@ import { Divider } from 'antd';
 interface ChatMessageListProps {
   messages: ChatMessage[];
 }
-export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
-  (props) => {
+export interface ChatMessageListRef {
+  scrollToBottom: () => void;
+}
+export const ChatMessageList = React.forwardRef<
+  ChatMessageListRef,
+  ChatMessageListProps
+>((props, ref) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => ({
+    scrollToBottom() {
+      requestAnimationFrame(() => {
+        if (!containerRef.current) {
+          return;
+        }
+
+        containerRef.current.scrollTo({
+          top: containerRef.current.scrollHeight,
+          behavior: 'smooth',
+        });
+      });
+    },
+  }));
+
   return (
-      <div className="flex-1 overflow-y-scroll flex flex-col-reverse">
+    <div
+      className="flex-1 overflow-y-scroll flex flex-col-reverse"
+      ref={containerRef}
+    >
       <div>
         {props.messages.map((message, index, arr) => {
           let showDate = true;
@@ -33,7 +58,7 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
               showDate = false;
             }
 
-              // 进行头像合并(在同一时间块下)
+            // 进行头像合并(在同一时间块下 且发送者为同一人)
             if (showDate === false) {
               showAvatar = prevMessage.author !== message.author;
             }
@@ -53,6 +78,5 @@ export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
       </div>
     </div>
   );
-  }
-);
+});
 ChatMessageList.displayName = 'ChatMessageList';

web/src/components/ChatBox/index.tsx

@@ -1,9 +1,9 @@
 import { Skeleton } from 'antd';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useConverseMessage } from 'tailchat-shared';
 import { AlertErrorView } from '../AlertErrorView';
 import { ChatInputBox } from './ChatInputBox';
-import { ChatMessageList } from './ChatMessageList';
+import { ChatMessageList, ChatMessageListRef } from './ChatMessageList';
 
 const ChatBoxPlaceholder: React.FC = React.memo(() => {
   return (
@@ -40,6 +40,7 @@ export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
     converseId,
     isGroup,
   });
+  const chatMessageListRef = useRef<ChatMessageListRef>(null);
 
   if (loading) {
     return <ChatBoxPlaceholder />;
@@ -51,16 +52,18 @@ export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
 
   return (
     <div className="w-full h-full flex flex-col select-text">
-      <ChatMessageList messages={messages} />
+      <ChatMessageList ref={chatMessageListRef} messages={messages} />
 
       <ChatInputBox
-        onSendMsg={(msg) =>
+        onSendMsg={(msg) => {
           handleSendMessage({
             converseId: props.converseId,
             groupId: props.groupId,
             content: msg,
-          })
-        }
+          }).then(() => {
+            chatMessageListRef.current?.scrollToBottom();
+          });
+        }}
       />
     </div>
   );