From b1b4a5c5519d2136314af12ad73a46b5b336babb Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Thu, 7 Mar 2024 16:01:13 +0800
Subject: [PATCH] refactor(flat-components): scroll to chat list bottom smartly
 (#2128)

---
 .../components/ChatPanel/ChatMessageList/index.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/flat-components/src/components/ChatPanel/ChatMessageList/index.tsx b/packages/flat-components/src/components/ChatPanel/ChatMessageList/index.tsx
index f893fc2f135..fefb4fdcaf9 100644
--- a/packages/flat-components/src/components/ChatPanel/ChatMessageList/index.tsx
+++ b/packages/flat-components/src/components/ChatPanel/ChatMessageList/index.tsx
@@ -90,8 +90,15 @@ export const ChatMessageList = /* @__PURE__ */ observer<ChatMessageListProps>(
                         latestMessage!.timestamp > prev.latestMessage.timestamp
                     ) {
                         // user sent a new message
-                        // scroll to the bottom
-                        setScrollToIndex(messageCount - 1);
+                        // scroll to the bottom only if the user is the last message's sender or is at bottom
+                        if (latestMessage?.senderID === userUUID) {
+                            setScrollToIndex(messageCount - 1);
+                        } else {
+                            const div = document.querySelector(".chat-message-list");
+                            if (div && div.scrollTop + div.clientHeight >= div.scrollHeight - 30) {
+                                setScrollToIndex(messageCount - 1);
+                            }
+                        }
                     } else {
                         // history messages loaded
                         // stay at the last position
@@ -157,7 +164,7 @@ export const ChatMessageList = /* @__PURE__ */ observer<ChatMessageListProps>(
                                 {() => (
                                     <List
                                         ref={registerChild}
-                                        className="fancy-scrollbar"
+                                        className="chat-message-list fancy-scrollbar"
                                         height={height}
                                         rowCount={messages.length}
                                         rowHeight={cellCache.rowHeight}