Handle scrolling down in `converse-chat-content` component

src/components/chat_content.js

@@ -1,4 +1,5 @@
 import "./message-history";
+import debounce from 'lodash/debounce';
 import { CustomElement } from './element.js';
 import { _converse, api } from "@converse/headless/core";
 import { html } from 'lit-element';
@@ -13,6 +14,7 @@ export default class ChatContent extends CustomElement {
 
     connectedCallback () {
         super.connectedCallback();
+        this.debouncedScrolldown = debounce(this.scrollDown, 100);
         this.model = _converse.chatboxes.get(this.jid);
         this.listenTo(this.model.messages, 'add', this.requestUpdate);
         this.listenTo(this.model.messages, 'change', this.requestUpdate);
@@ -43,6 +45,10 @@ export default class ChatContent extends CustomElement {
         `;
     }
 
+    updated () {
+        !this.model.get('scrolled') && this.debouncedScrolldown();
+    }
+
     scrollDown () {
         if (this.scrollTo) {
             const behavior = this.scrollTop ? 'smooth' : 'auto';

src/plugins/chatview/view.js

@@ -61,7 +61,6 @@ export default class ChatView extends BaseChatView {
 
         // Need to be registered after render has been called.
         this.listenTo(this.model.messages, 'add', this.onMessageAdded);
-        this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
         this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
 
         await this.model.messages.fetched;
@@ -202,22 +201,6 @@ export default class ChatView extends BaseChatView {
         return {};
     }
 
-    /**
-     * Scrolls the chat down, *if* appropriate.
-     *
-     * Will only scroll down if we have received a message from
-     * ourselves, or if the chat was scrolled down before (i.e. the
-     * `scrolled` flag is `false`);
-     * @param { _converse.Message|_converse.ChatRoomMessage } [message]
-     *  - An optional message that serves as the cause for needing to scroll down.
-     */
-    maybeScrollDown (message) {
-        const new_own_msg = !message?.get('is_archived') && message?.get('sender') === 'me';
-        if ((new_own_msg || !this.model.get('scrolled')) && !this.model.isHidden()) {
-            this.debouncedScrollDown();
-        }
-    }
-
     /**
      * Given a message element, determine wether it should be
      * marked as a followup message to the previous element.

src/plugins/dragresize/components/dragresize.js

@@ -5,7 +5,7 @@ import { CustomElement } from 'components/element.js';
 class ConverseDragResize extends CustomElement {
 
     render () { // eslint-disable-line class-methods-use-this
-        return tpl_dragresize(this);
+        return tpl_dragresize();
     }
 }
 

src/plugins/headlines-view/view.js

@@ -32,7 +32,6 @@ class HeadlinesView extends BaseChatView {
         // Need to be registered after render has been called.
         this.listenTo(this.model.messages, 'add', this.onMessageAdded);
         this.listenTo(this.model.messages, 'remove', this.renderChatHistory);
-        this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
         this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
 
         await this.model.messages.fetched;

src/plugins/muc-views/muc.js

@@ -95,7 +95,6 @@ export default class MUCView extends BaseChatView {
         this.listenTo(this.model, 'show', this.show);
         this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel);
         this.listenTo(this.model.features, 'change:open', this.renderHeading);
-        this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
         this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
         this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);