From 6e6841e544b2e6175038174dc8176f5c1382fd7b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 20 Nov 2021 22:32:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=96=B0=E7=89=88=E8=99=9A?=
 =?UTF-8?q?=E6=8B=9F=E5=88=97=E8=A1=A8=E7=9A=84=E6=B6=88=E6=81=AFack?=
 =?UTF-8?q?=E4=B8=8E=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A=E9=99=90=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBox/ChatMessageList/Item.tsx          |  3 +++
 .../ChatMessageList/VirtualizedList.new.tsx   | 26 ++++++++++++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ChatBox/ChatMessageList/Item.tsx b/web/src/components/ChatBox/ChatMessageList/Item.tsx
index 1befdfbb..e88de4fb 100644
--- a/web/src/components/ChatBox/ChatMessageList/Item.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/Item.tsx
@@ -196,8 +196,10 @@ interface ChatMessageItemProps {
 const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo((props) => {
   const payload = props.payload;
   if (payload.author === SYSTEM_USERID) {
+    // 系统消息
     return <SystemMessage {...props} />;
   } else if (payload.hasRecall === true) {
+    // 撤回消息
     return (
       <SystemMessageWithNickname
         {...props}
@@ -212,6 +214,7 @@ const ChatMessageItem: React.FC<ChatMessageItemProps> = React.memo((props) => {
     );
   }
 
+  // 普通消息
   return <NormalMessage {...props} />;
 });
 ChatMessageItem.displayName = 'ChatMessageItem';
diff --git a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.new.tsx b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.new.tsx
index 48266a3f..bcfd09c4 100644
--- a/web/src/components/ChatBox/ChatMessageList/VirtualizedList.new.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/VirtualizedList.new.tsx
@@ -7,6 +7,7 @@ import {
   VirtuosoGridHandle,
 } from 'react-virtuoso';
 import type { ChatMessage } from 'tailchat-shared';
+import _last from 'lodash/last';
 
 const PREPEND_OFFSET = 10 ** 7;
 
@@ -21,15 +22,34 @@ const virtuosoStyle: React.CSSProperties = {
 export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
   (props) => {
     const listRef = useRef<VirtuosoGridHandle>();
-    const lastMessageId = useRef('');
     const numItemsPrepended = usePrependedMessagesCount(props.messages);
 
     const handleLoadMore = () => {
-      lastMessageId.current = props.messages[0]._id;
-      props.onLoadMore();
+      if (props.isLoadingMore) {
+        return;
+      }
+
+      if (props.hasMoreMessage) {
+        props.onLoadMore();
+      }
     };
 
     const followOutput = (isAtBottom: boolean): FollowOutputScalarType => {
+      if (isAtBottom) {
+        // 更新最新查看的消息id
+        const lastMessage = _last(props.messages);
+        if (lastMessage) {
+          props.onUpdateReadedMessage(lastMessage._id);
+        }
+
+        setTimeout(() => {
+          // 这里 Virtuoso 有个动态渲染高度的bug, 因此需要异步再次滚动到底部
+          listRef.current?.scrollToIndex(
+            PREPEND_OFFSET - numItemsPrepended + props.messages.length - 1
+          );
+        }, 100);
+      }
+
       /**
        * 如果有新的内容，且当前处于最底部时, 保持在最底部
        */