feat: 增加普通聊天列表用以兜底

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

@@ -149,7 +149,10 @@ function findMessageIndexWithId(
 /**
  * 构造聊天项
  */
-export function buildItemRow(messages: ChatMessage[], messageId: string) {
+export function buildMessageItemRow(
+  messages: ChatMessage[],
+  messageId: string
+) {
   const index = findMessageIndexWithId(messages, messageId); // TODO: 这里是因为mattermost的动态列表传的id因此只能这边再用id找回，可以看看是否可以优化
   if (index === -1) {
     return <div />;
@@ -181,7 +184,7 @@ export function buildItemRow(messages: ChatMessage[], messageId: string) {
   }
 
   return (
-    <div key={message._id} data-debug={JSON.stringify(index)}>
+    <div key={message._id}>
       {showDate && (
         <Divider className="text-sm opacity-40 px-6 font-normal select-none">
           {getMessageTimeDiff(messageCreatedAt)}

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

@@ -0,0 +1,54 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useUpdateRef } from 'tailchat-shared';
+import { buildMessageItemRow } from './Item';
+import type { MessageListProps } from './types';
+
+/**
+ * 没有虚拟化版本的聊天列表
+ */
+export const NormalMessageList: React.FC<MessageListProps> = React.memo(
+  (props) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const onUpdateReadedMessageRef = useUpdateRef(props.onUpdateReadedMessage);
+    useEffect(() => {
+      if (props.messages.length === 0) {
+        return;
+      }
+
+      if (containerRef.current?.scrollTop === 0) {
+        // 当前列表在最低
+        onUpdateReadedMessageRef.current(
+          props.messages[props.messages.length - 1]._id
+        );
+      }
+    }, [props.messages.length]);
+
+    const handleScroll = useCallback(() => {
+      if (props.messages.length === 0) {
+        return;
+      }
+
+      if (containerRef.current?.scrollTop === 0) {
+        onUpdateReadedMessageRef.current(
+          props.messages[props.messages.length - 1]._id
+        );
+      }
+    }, [props.messages]);
+
+    return (
+      <div
+        className="flex-1 overflow-y-scroll flex flex-col-reverse"
+        ref={containerRef}
+        onScroll={handleScroll}
+      >
+        <div>
+          {props.messages.map((message, index, arr) =>
+            buildMessageItemRow(arr, message._id)
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+NormalMessageList.displayName = 'NormalMessageList';

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

@@ -13,7 +13,7 @@ import React, {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { ChatMessage, t, usePrevious, useUpdateRef } from 'tailchat-shared';
 import { messageReverseItemId } from './const';
-import { buildItemRow } from './Item';
+import { buildMessageItemRow } from './Item';
 import type { MessageListProps } from './types';
 
 // Reference: https://github.com/mattermost/mattermost-webapp/blob/master/components/post_view/post_list_virtualized/post_list_virtualized.jsx
@@ -114,7 +114,7 @@ export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
         );
       }
 
-      return buildItemRow(props.messages, itemId);
+      return buildMessageItemRow(props.messages, itemId);
     };
 
     // 初始渲染范围

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

@@ -1,13 +1,18 @@
 import React from 'react';
+import { NormalMessageList } from './NormalList';
 import type { MessageListProps } from './types';
 import { VirtualizedMessageList } from './VirtualizedList';
 
+const useVirtualizedList = true; // 是否使用虚拟化列表
+
 export const ChatMessageList: React.FC<MessageListProps> = React.memo(
   (props) => {
-    return (
+    return useVirtualizedList ? (
       <div className="flex-1">
         <VirtualizedMessageList {...props} />
       </div>
+    ) : (
+      <NormalMessageList {...props} />
     );
   }
 );