Add go to last msg button in chat bottom panel

conversejs/custom/templates/muc-bottom-panel.js

@@ -102,6 +102,54 @@ const tplEmojiOnly = (o) => {
     </div>`
 }
 
+class BackToLastMsg extends CustomElement {
+  static get properties () {
+    return {
+      jid: { type: String }
+    }
+  }
+
+  show = false
+
+  async connectedCallback () {
+    super.connectedCallback()
+    this.model = _converse.chatboxes.get(this.jid)
+    await this.model.initialized
+
+    let scrolled = this.model.ui.get('scrolled')
+    let hasUnreadMsg = this.model.get('num_unread_general') > 0
+    this.listenTo(this.model.ui, 'change:scrolled', () => {
+      scrolled = this.model.ui.get('scrolled')
+      this.show = scrolled && !hasUnreadMsg
+      this.requestUpdate()
+    })
+    this.listenTo(this.model, 'change:num_unread_general', () => {
+      hasUnreadMsg = this.model.get('num_unread_general') > 0
+      // Do not show the element if there is new messages since there is another element for that
+      this.show = scrolled && !hasUnreadMsg
+      this.requestUpdate()
+    })
+  }
+
+  onClick (ev) {
+    ev?.preventDefault()
+    const chatContainer = document.querySelector('converse-chat-content')
+    chatContainer?.scrollTo({ top: chatContainer.scrollHeight })
+  }
+
+  render () {
+    return this.show
+      ? html`<div class="livechat-back-to-last-msg new-msgs-indicator" @click=${this.onClick}>
+          ▼ ${
+            // eslint-disable-next-line no-undef
+            __(LOC_back_to_last_msg)
+          } ▼
+        </div>`
+      : ''
+  }
+}
+api.elements.define('livechat-back-to-last-msg', BackToLastMsg)
+
 const tplViewerMode = (o) => {
   if (!api.settings.get('livechat_enable_viewer_mode')) {
     return html``
@@ -165,6 +213,7 @@ export default (o) => {
     ${tplViewerMode(o)}
     ${tplSlowMode(o)}
     ${tplEmojiOnly(o)}
+    <livechat-back-to-last-msg jid=${o.model.get('jid')}></livechat-back-to-last-msg>
     ${
       mutedAnonymousMessage
         ? html`<span class="muc-bottom-panel muc-bottom-panel--muted">${mutedAnonymousMessage}</span>`

conversejs/loc.keys.js

@@ -1,4 +1,5 @@
 // SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+// SPDX-FileCopyrightText: 2025 Nicolas Chesnais <https://autre.space>
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
@@ -68,7 +69,8 @@ const locKeys = [
   'announcements_message_type_standard',
   'announcements_message_type_announcement',
   'announcements_message_type_highlight',
-  'announcements_message_type_warning'
+  'announcements_message_type_warning',
+  'back_to_last_msg'
 ]
 
 module.exports = locKeys

languages/en.yml

@@ -682,3 +682,4 @@ converse_theme_warning_description: |
     It is strongly recommanded to keep the "Peertube theme", in combinaison with the "Automatic color detection" feature.
     Otherwise some user may experience issues depending on the Peertube theme they use.
   </span>
+back_to_last_msg: Go back to last message

languages/fr.yml

@@ -654,3 +654,4 @@ livechat_configuration_channel_no_duplicate_desc: "En activant cette option, le
   de modération modérera automatiquement les messages en double.\nCela signifie que
   si un⋅e utilisateur⋅rice envoie deux fois le même message en l'espace de X secondes,
   le deuxième message sera supprimé.\n"
+back_to_last_msg: Retourner au dernier message