From 453bf3acb3e627cf51abddde96a51c1a7360f41b Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 1 Apr 2024 13:58:23 +0200
Subject: [PATCH] FIX: messages list shouldn't scroll on new message (#26438)

The expected behavior when receiving a message is the following:

- if user is at the bottom of the screen, scroll and append message
- if user is not at the bottom of the screen, don't scroll, show arrow and don't append message
---
 .../discourse/components/chat-channel.gjs            |  8 +++++++-
 .../javascripts/discourse/components/chat-thread.gjs | 12 ++++++++++--
 plugins/chat/spec/system/chat_channel_spec.rb        |  6 +++---
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
index b76d932f470..ae604216918 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
@@ -74,7 +74,7 @@ export default class ChatChannel extends Component {
   @tracked showChatQuoteSuccess = false;
   @tracked includeHeader = true;
   @tracked needsArrow = false;
-  @tracked atBottom = false;
+  @tracked atBottom = true;
   @tracked uploadDropZone;
   @tracked isScrolling = false;
 
@@ -173,6 +173,12 @@ export default class ChatChannel extends Component {
 
   @bind
   onNewMessage(message) {
+    if (!this.atBottom) {
+      this.needsArrow = true;
+      this.messagesLoader.canLoadMoreFuture = true;
+      return;
+    }
+
     stackingContextFix(this.scrollable, () => {
       this.messagesManager.addMessages([message]);
     });
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-thread.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-thread.gjs
index ee9df33f77b..622ce76ea49 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-thread.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-thread.gjs
@@ -53,7 +53,7 @@ export default class ChatThread extends Component {
   @service router;
   @service siteSettings;
 
-  @tracked isAtBottom = true;
+  @tracked atBottom = true;
   @tracked isScrolling = false;
   @tracked needsArrow = false;
   @tracked uploadDropZone;
@@ -316,7 +316,15 @@ export default class ChatThread extends Component {
 
   @bind
   onNewMessage(message) {
-    this.messagesManager.addMessages([message]);
+    if (!this.atBottom) {
+      this.needsArrow = true;
+      this.messagesLoader.canLoadMoreFuture = true;
+      return;
+    }
+
+    stackingContextFix(this.scrollable, () => {
+      this.messagesManager.addMessages([message]);
+    });
   }
 
   @bind
diff --git a/plugins/chat/spec/system/chat_channel_spec.rb b/plugins/chat/spec/system/chat_channel_spec.rb
index ba19c13a6c8..79e2cd016f7 100644
--- a/plugins/chat/spec/system/chat_channel_spec.rb
+++ b/plugins/chat/spec/system/chat_channel_spec.rb
@@ -164,12 +164,12 @@ RSpec.describe "Chat channel", type: :system do
       50.times { Fabricate(:chat_message, chat_channel: channel_1) }
     end
 
-    xit "doesn’t scroll the pane" do
+    it "doesn’t append the message when not at bottom" do
       visit("/chat/c/-/#{channel_1.id}/#{message_1.id}")
 
-      new_message = Fabricate(:chat_message, chat_channel: channel_1)
+      new_message = Fabricate(:chat_message, chat_channel: channel_1, use_service: true)
 
-      expect(page).to have_no_content(new_message.message)
+      expect(channel_page.messages).to have_no_message(id: new_message.id)
     end
   end