Render notifications inside of the messages area

src/components/adhoc-commands.js

@@ -1,11 +1,11 @@
 import "./autocomplete.js"
+import log from "@converse/headless/log";
+import sizzle from "sizzle";
 import { CustomElement } from './element.js';
 import { __ } from '@converse/headless/i18n';
 import { api, converse } from "@converse/headless/converse-core";
 import { html } from "lit-html";
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import log from "@converse/headless/log";
-import sizzle from "sizzle";
 
 const { Strophe, $iq } = converse.env;
 const u = converse.env.utils;

src/components/chat_content.js

@@ -3,11 +3,13 @@ import 'fa-icons';
 import dayjs from 'dayjs';
 import tpl_message from "templates/message.js";
 import tpl_new_day from "../templates//new_day.js";
+import xss from "xss/dist/xss";
 import { CustomElement } from './element.js';
 import { __ } from '@converse/headless/i18n';
 import { api } from "@converse/headless/converse-core";
 import { html } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 const i18n_no_history = __('No message history available.');
 
@@ -35,14 +37,19 @@ class ChatContent extends CustomElement {
         return {
             chatview: { type: Object},
             messages: { type: Array},
+            notifications: { type: String }
         }
     }
 
     render () {
         const msgs = this.messages;
-        return msgs.length ?
-            html`${repeat(msgs, m => m.get('id'), m => this.renderMessage(m)) }` :
-            html`<div class="empty-history-feedback form-help"><span>${i18n_no_history}</span></div>`;
+        const notifications = xss.filterXSS(this.notifications, {'whiteList': {}});
+        return [
+            msgs.length ?
+                html`${repeat(msgs, m => m.get('id'), m => this.renderMessage(m)) }` :
+                html`<div class="empty-history-feedback form-help"><span>${i18n_no_history}</span></div>`,
+            html`<div class="chat-content__notifications">${unsafeHTML(notifications)}</div>`
+        ];
     }
 
     renderMessage (model) {

src/converse-chatview.js

@@ -188,8 +188,9 @@ converse.plugins.add('converse-chatview', {
             async initialize () {
                 this.initDebounced();
 
-                this.listenTo(this.model.messages, 'add', debounce(this.renderChatContent, 100));
-                this.listenTo(this.model.messages, 'change', debounce(this.renderChatContent, 100));
+                this.listenTo(this.model.notifications, 'change', this.debouncedChatContentRender);
+                this.listenTo(this.model.messages, 'add', this.debouncedChatContentRender);
+                this.listenTo(this.model.messages, 'change', this.debouncedChatContentRender);
 
                 this.listenTo(this.model.messages, 'rendered', this.scrollDown);
                 this.model.messages.on('reset', () => {
@@ -197,8 +198,6 @@ converse.plugins.add('converse-chatview', {
                     this.removeAll();
                 });
 
-                this.listenTo(this.model.notifications, 'change', this.renderChatStateNotification);
-
                 this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
                 this.listenTo(this.model, 'destroy', this.remove);
                 this.listenTo(this.model, 'show', this.show);
@@ -230,6 +229,7 @@ converse.plugins.add('converse-chatview', {
             initDebounced () {
                 this.scrollDown = debounce(this._scrollDown, 50);
                 this.markScrolled = debounce(this._markScrolled, 100);
+                this.debouncedChatContentRender = debounce(this.renderChatContent, 100);
             },
 
             async render () {
@@ -242,33 +242,37 @@ converse.plugins.add('converse-chatview', {
                     )
                 );
                 render(result, this.el);
+                this.tpl_chat_content = (o) => {
+                    return html`<converse-chat-content .chatview=${this} .messages=${o.messages}></converse-chat-content>`
+                };
                 this.content = this.el.querySelector('.chat-content');
                 this.notifications = this.el.querySelector('.chat-content__notifications');
                 this.msgs_container = this.el.querySelector('.chat-content__messages');
                 this.help_container = this.el.querySelector('.chat-content__help');
-                this.renderChatStateNotification();
-                await this.renderChatContent();
+                await api.waitUntil('emojisInitialized');
+                this.renderChatContent();
                 this.renderMessageForm();
                 this.renderHeading();
                 return this;
             },
 
-            renderChatStateNotification () {
+            getNotifications () {
                 if (this.model.notifications.get('chat_state') === _converse.COMPOSING) {
-                    this.notifications.innerText = __('%1$s is typing', this.model.getDisplayName());
+                    return __('%1$s is typing', this.model.getDisplayName());
                 } else if (this.model.notifications.get('chat_state') === _converse.PAUSED) {
-                    this.notifications.innerText = __('%1$s has stopped typing', this.model.getDisplayName());
+                    return __('%1$s has stopped typing', this.model.getDisplayName());
                 } else if (this.model.notifications.get('chat_state') === _converse.GONE) {
-                    this.notifications.innerText = __('%1$s has gone away', this.model.getDisplayName());
+                    return __('%1$s has gone away', this.model.getDisplayName());
                 } else {
-                    this.notifications.innerText = '';
+                    return '';
                 }
             },
 
-            async renderChatContent () {
-                await api.waitUntil('emojisInitialized');
-                const tpl = (o) => html`<converse-chat-content .chatview=${this} .messages=${o.messages}></converse-chat-content>`;
-                render(tpl({'messages': Array.from(this.model.messages)}), this.msgs_container);
+            renderChatContent () {
+                render(this.tpl_chat_content({
+                    'notifications': this.getNotifications(),
+                    'messages': Array.from(this.model.messages)
+                }), this.msgs_container);
             },
 
             renderToolbar () {

src/converse-muc-views.js

@@ -31,7 +31,7 @@ import { View } from 'skeletor.js/src/view.js';
 import { __ } from '@converse/headless/i18n';
 import { api, converse } from "@converse/headless/converse-core";
 import { debounce, head, isString, isUndefined } from "lodash";
-import { render } from "lit-html";
+import { html, render } from "lit-html";
 
 const { Strophe, sizzle, $iq, $pres } = converse.env;
 const u = converse.env.utils;
@@ -519,6 +519,10 @@ converse.plugins.add('converse-muc-views', {
                     'muc_show_logs_before_join': _converse.muc_show_logs_before_join,
                     'show_send_button': _converse.show_send_button
                 }), this.el);
+
+                this.tpl_chat_content = (o) => {
+                    return html`<converse-chat-content .chatview=${this} .messages=${o.messages}></converse-chat-content>`
+                };
                 this.notifications = this.el.querySelector('.chat-content__notifications');
                 this.content = this.el.querySelector('.chat-content');
                 this.msgs_container = this.el.querySelector('.chat-content__messages');
@@ -536,13 +540,13 @@ converse.plugins.add('converse-muc-views', {
                 !this.model.get('hidden') && this.show();
             },
 
-            renderNotifications () {
+            getNotifications () {
                 const actors_per_state = this.model.notifications.toJSON();
                 const states = api.settings.get('muc_show_join_leave') ?
                     [...converse.CHAT_STATES, ...converse.MUC_TRAFFIC_STATES, ...converse.MUC_ROLE_CHANGES] :
                     converse.CHAT_STATES;
 
-                const message = states.reduce((result, state) => {
+                return states.reduce((result, state) => {
                     const existing_actors = actors_per_state[state];
                     if (!(existing_actors?.length)) {
                         return result;
@@ -599,8 +603,6 @@ converse.plugins.add('converse-muc-views', {
                     }
                     return result;
                 }, '');
-                this.notifications.innerHTML = message;
-                message.includes('\n') && this.scrollDown();
             },
 
             /**

src/templates/chatroom.js

@@ -13,7 +13,6 @@ export default (o) => html`
                     <div class="chat-content__messages">
                         ${ o.muc_show_logs_before_join ? html`<div class="empty-history-feedback"><span>${ i18n_no_history }</span></div>`  : '' }
                     </div>
-                    <div class="chat-content__notifications"></div>
                     <div class="chat-content__help"></div>
                 </div>
                 <div class="bottom-panel"></div>