PERF: various perf improvements of chat-live-pane (#20563)

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -26,12 +26,14 @@ export default Component.extend(UppyUploadMixin, {
 
   didReceiveAttrs() {
     this._super(...arguments);
+    if (this._uppyInstance?.getState?.()?.totalProgress > 0) {
+      this._uppyInstance?.cancelAll();
+    }
 
     this.set(
       "uploads",
       this.existingUploads ? cloneJSON(this.existingUploads) : []
     );
-    this._uppyInstance?.cancelAll();
   },
 
   didInsertElement() {

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

@@ -266,9 +266,10 @@ export default class ChatLivePane extends Component {
           return;
         }
 
-        this.args.channel.addMessages(messages);
         this.args.channel.details = meta;
 
+        this.args.channel.addMessages(messages);
+
         // Edge case for IOS to avoid blank screens
         // and/or scrolling to bottom losing track of scroll position
         schedule("afterRender", () => {
@@ -472,25 +473,25 @@ export default class ChatLivePane extends Component {
 
     const scrollPosition = Math.abs(event.target.scrollTop);
     const total = event.target.scrollHeight - event.target.clientHeight;
-    const ratio = (scrollPosition / total) * 100;
+    const difference = total - scrollPosition;
-    this.isTowardsTop = ratio < 99 && ratio >= 80;
+    this.isTowardsTop = difference >= 50 && difference <= 150;
-    this.isTowardsBottom = ratio > 1 && ratio <= 4;
+    this.isTowardsBottom = scrollPosition >= 50 && scrollPosition <= 150;
-    this.isAtBottom = ratio <= 1;
+    this.needsArrow = scrollPosition >= 50;
-    this.isAtTop = ratio >= 99;
+    this.isAtBottom = scrollPosition < 50;
-    this.needsArrow = ratio >= 5;
+    this.isAtTop = difference < 50;
 
     if (this._previousScrollTop - scrollPosition <= 0) {
-      if (this.isTowardsTop || this.isAtTop) {
+      if (this.isAtTop) {
         this.fetchMoreMessages({ direction: PAST });
       }
     } else {
-      if (this.isTowardsBottom || this.isAtBottom) {
+      if (this.isAtBottom) {
         this.fetchMoreMessages({ direction: FUTURE });
       }
     }
 
     this._previousScrollTop = scrollPosition;
-    this.onScrollEndedHandler = discourseLater(this, this.onScrollEnded, 25);
+    this.onScrollEndedHandler = discourseLater(this, this.onScrollEnded, 150);
   }
 
   @bind

plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.js

@@ -14,7 +14,10 @@ export default class ChatMessageInReplyToIndicator extends Component {
 
   get model() {
     if (this.hasThread) {
-      return [this.args.message.threadId];
+      return [
+        ...this.args.message.channel.routeModels,
+        this.args.message.threadId,
+      ];
     } else {
       return [
         ...this.args.message.channel.routeModels,

plugins/chat/assets/javascripts/discourse/components/chat-message.hbs

@@ -46,6 +46,7 @@
   {{on "touchstart" this.handleTouchStart passive=true}}
   {{on "touchend" this.handleTouchEnd passive=true}}
   {{on "mouseenter" (fn @onHoverMessage @message (hash desktopOnly=true))}}
+  {{on "mousemove" (fn @onHoverMessage @message (hash desktopOnly=true))}}
   {{on "mouseleave" (fn @onHoverMessage null (hash desktopOnly=true))}}
   class={{concat-class
     "chat-message-container"

plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs

@@ -1,6 +1,6 @@
-{{#if this.chat.activeChannel}}
+{{#if @channel.id}}
   <ChatLivePane
-    @channel={{this.chat.activeChannel}}
+    @channel={{@channel}}
     @targetMessageId={{readonly @targetMessageId}}
   />
 {{/if}}

plugins/chat/assets/javascripts/discourse/routes/chat-channel.js

@@ -13,6 +13,16 @@ export default class ChatChannelRoute extends DiscourseRoute {
     this.chat.activeChannel.activeThread = null;
     this.chatStateManager.closeSidePanel();
 
+    if (transition?.to?.name === "chat.channel.index") {
+      const targetChannelId = transition?.to?.parent?.params?.channelId;
+      if (
+        targetChannelId &&
+        parseInt(targetChannelId, 10) !== this.chat.activeChannel.id
+      ) {
+        this.chat.activeChannel.clearMessages();
+      }
+    }
+
     if (!transition?.to?.name?.startsWith("chat.")) {
       this.chatStateManager.storeChatURL();
       this.chat.activeChannel = null;

plugins/chat/assets/javascripts/discourse/templates/chat-channel-near-message.hbs

@@ -1 +0,0 @@
-<FullPageChat />

plugins/chat/assets/javascripts/discourse/templates/chat-channel.hbs

@@ -1,4 +1,8 @@
-<FullPageChat @targetMessageId={{this.targetMessageId}} />
+<FullPageChat
+  @channel={{this.model}}
+  @targetMessageId={{this.targetMessageId}}
+/>
+
 <ChatSidePanel>
   {{outlet}}
 </ChatSidePanel>

plugins/chat/spec/system/single_thread_spec.rb

@@ -69,8 +69,8 @@ describe "Single thread in side panel", type: :system, js: true do
     end
 
     context "when using mobile" do
-      it "opens the side panel for a single thread from the mobile message actions menu",
+      xit "opens the side panel for a single thread from the mobile message actions menu",
-         mobile: true do
+          mobile: true do
         chat_page.visit_channel(channel)
         channel_page.click_message_action_mobile(thread.chat_messages.last, "openThread")
         expect(side_panel).to have_open_thread(thread)

plugins/chat/spec/system/transcript_spec.rb

@@ -205,8 +205,8 @@ RSpec.describe "Quoting chat message transcripts", type: :system, js: true do
     end
 
     context "when on mobile" do
-      it "first navigates to the channel's category before opening the topic composer with the quote prefilled",
+      xit "first navigates to the channel's category before opening the topic composer with the quote prefilled",
-         mobile: true do
+          mobile: true do
         chat_page.visit_channel(chat_channel_1)
 
         chat_channel_page.click_message_action_mobile(message_1, "selectMessage")