FIX: more precise unread message detection (#20588)

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js

@@ -425,7 +425,6 @@ export default class ChatLivePane extends Component {
   @action
   didShowMessage(message) {
     message.visible = true;
-    this.updateLastReadMessage(message);
   }
 
   @action
@@ -441,12 +440,33 @@ export default class ChatLivePane extends Component {
 
     const lastReadId =
       this.args.channel.currentUserMembership?.last_read_message_id;
-    const lastUnreadVisibleMessage = this.args.channel.visibleMessages.findLast(
+    let lastUnreadVisibleMessage = this.args.channel.visibleMessages.findLast(
       (message) => !lastReadId || message.id > lastReadId
     );
-    if (lastUnreadVisibleMessage) {
-      this.args.channel.updateLastReadMessage(lastUnreadVisibleMessage.id);
+
+    // all intersecting messages are read
+    if (!lastUnreadVisibleMessage) {
+      return;
     }
+
+    const element = this._scrollerEl.querySelector(
+      `[data-id='${lastUnreadVisibleMessage.id}']`
+    );
+
+    // if the last visible message is not fully visible, we don't want to mark it as read
+    // attempt to mark previous one as read
+    if (!this.#isBottomOfMessageVisible(element, this._scrollerEl)) {
+      lastUnreadVisibleMessage = lastUnreadVisibleMessage.previousMessage;
+
+      if (
+        !lastUnreadVisibleMessage &&
+        lastReadId > lastUnreadVisibleMessage.id
+      ) {
+        return;
+      }
+    }
+
+    this.args.channel.updateLastReadMessage(lastUnreadVisibleMessage.id);
   }
 
   @action
@@ -502,6 +522,8 @@ export default class ChatLivePane extends Component {
     if (this.isAtBottom) {
       this.hasNewMessages = false;
     }
+
+    this.updateLastReadMessage();
   }
 
   _isBetween(target, a, b) {
@@ -1267,4 +1289,10 @@ export default class ChatLivePane extends Component {
         });
     });
   }
+
+  #isBottomOfMessageVisible(element, container) {
+    const rect = element.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    return rect.bottom <= containerRect.bottom;
+  }
 }

plugins/chat/assets/javascripts/discourse/modifiers/chat/track-message.js

@@ -19,7 +19,7 @@ export default class ChatTrackMessage extends Modifier {
       this._intersectionObserverCallback,
       {
         root: document,
-        threshold: 0.9,
+        threshold: 0,
       }
     );