Various fixes based on running tests

sass/_chatbox.scss

@@ -225,6 +225,13 @@
             flex-direction: column;
             justify-content: space-between;
 
+            converse-chat-content {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                justify-content: space-between;
+            }
+
             .chat-content__help {
                 converse-chat-help {
                     border-top: 1px solid var(--chat-head-color);

spec/bookmarks.js

@@ -1,6 +1,6 @@
 /* global mock */
 
-fdescribe("A chat room", function () {
+describe("A chat room", function () {
 
     it("can be bookmarked", mock.initConverse(['rosterGroupsFetched'], {}, async function (done, _converse) {
 

spec/chatbox.js

@@ -6,7 +6,7 @@ const Strophe = converse.env.Strophe;
 const u = converse.env.utils;
 const sizzle = converse.env.sizzle;
 
-fdescribe("Chatboxes", function () {
+describe("Chatboxes", function () {
 
     describe("A Chatbox", function () {
 

spec/retractions.js

@@ -32,7 +32,7 @@ async function sendAndThenRetractMessage (_converse, view) {
 }
 
 
-describe("Message Retractions", function () {
+fdescribe("Message Retractions", function () {
 
     describe("A groupchat message retraction", function () {
 
@@ -221,10 +221,8 @@ describe("Message Retractions", function () {
                 </message>
             `);
 
-            const promise = new Promise(resolve => _converse.api.listen.on('messageAdded', resolve));
             _converse.connection._dataRecv(mock.createRequest(retraction_stanza));
             await u.waitUntil(() => view.model.messages.length === 1);
-            await promise;
             const message = view.model.messages.at(0);
             expect(message.get('dangling_retraction')).toBe(true);
             expect(message.get('is_ephemeral')).toBe(false);
@@ -695,20 +693,15 @@ describe("Message Retractions", function () {
                 </message>`);
 
             _converse.connection._dataRecv(mock.createRequest(error));
-            await u.waitUntil(() => view.el.querySelectorAll('.chat-error').length === 1);
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-msg__error').length === 1);
             await u.waitUntil(() => view.el.querySelectorAll('.chat-msg--retracted').length === 0);
-            expect(view.model.messages.length).toBe(2);
+            expect(view.model.messages.length).toBe(1);
             expect(view.model.messages.at(0).get('retracted')).toBeFalsy();
             expect(view.model.messages.at(0).get('is_ephemeral')).toBeFalsy();
             expect(view.model.messages.at(0).get('editable')).toBeTruthy();
 
-            const err_msg = "Sorry, something went wrong while trying to retract your message."
-            expect(view.model.messages.at(1).get('message')).toBe(err_msg);
-            expect(view.model.messages.at(1).get('type')).toBe('error');
-
-            expect(view.el.querySelectorAll('.chat-error').length).toBe(1);
-            const errmsg = view.el.querySelector('.chat-error');
-            expect(errmsg.textContent.trim()).toBe("Sorry, something went wrong while trying to retract your message.");
+            const errmsg = view.el.querySelector('.chat-msg__error');
+            expect(errmsg.textContent.trim()).toBe("Your message was not delivered because you weren't allowed to send it.");
             done();
         }));
 
@@ -1009,7 +1002,6 @@ describe("Message Retractions", function () {
                 </message>
             `);
             spyOn(view.model, 'handleRetraction').and.callThrough();
-            const promise = new Promise(resolve => _converse.api.listen.once('messageAdded', resolve));
             _converse.connection._dataRecv(mock.createRequest(tombstone));
 
             const last_id = u.getUniqueId();
@@ -1037,8 +1029,7 @@ describe("Message Retractions", function () {
                         .c('count').t('2');
             _converse.connection._dataRecv(mock.createRequest(iq_result));
 
-            await promise;
-            expect(view.model.messages.length).toBe(1);
+            await u.waitUntil(() => view.model.messages.length === 1);
             let message = view.model.messages.at(0);
             expect(message.get('retracted')).toBeTruthy();
             expect(message.get('is_tombstone')).toBe(true);
@@ -1050,6 +1041,7 @@ describe("Message Retractions", function () {
             message = view.model.messages.at(0);
             expect(message.get('retracted')).toBeTruthy();
             expect(message.get('is_tombstone')).toBe(true);
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-msg').length);
             expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
             expect(view.el.querySelectorAll('.chat-msg--retracted').length).toBe(1);
             const el = view.el.querySelector('.chat-msg--retracted .chat-msg__message div');
@@ -1088,7 +1080,6 @@ describe("Message Retractions", function () {
                 </message>
             `);
             spyOn(view.model, 'handleModeration').and.callThrough();
-            const promise = new Promise(resolve => _converse.api.listen.once('messageAdded', resolve));
             _converse.connection._dataRecv(mock.createRequest(tombstone));
 
             const last_id = u.getUniqueId();
@@ -1119,7 +1110,7 @@ describe("Message Retractions", function () {
                         .c('count').t('2');
             _converse.connection._dataRecv(mock.createRequest(iq_result));
 
-            await promise;
+            await u.waitUntil(() => view.model.messages.length);
             expect(view.model.messages.length).toBe(1);
             let message = view.model.messages.at(0);
             expect(message.get('retracted')).toBeTruthy();
@@ -1134,6 +1125,8 @@ describe("Message Retractions", function () {
             expect(message.get('retracted')).toBeTruthy();
             expect(message.get('is_tombstone')).toBe(true);
             expect(message.get('moderation_reason')).toBe("This message contains inappropriate content");
+
+            await u.waitUntil(() => view.el.querySelectorAll('.chat-msg').length, 500);
             expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
 
             expect(view.el.querySelectorAll('.chat-msg--retracted').length).toBe(1);

spec/spoilers.js

@@ -1,6 +1,6 @@
 /* global mock */
 
-fdescribe("A spoiler message", function () {
+describe("A spoiler message", function () {
 
     it("can be received with a hint",
         mock.initConverse(

src/components/message-history.js

@@ -52,10 +52,10 @@ class MessageHistory extends CustomElement {
         const day = getDayIndicator(model);
         const templates = day ? [day] : [];
         const is_retracted = model.get('retracted') || model.get('moderated') === 'retracted';
-        const is_groupchat_message = model.get('type') === 'groupchat';
+        const is_groupchat = model.get('type') === 'groupchat';
 
         let hats = [];
-        if (is_groupchat_message) {
+        if (is_groupchat) {
             if (api.settings.get('muc_hats_from_vcard')) {
                 const role = model.vcard ? model.vcard.get('role') : null;
                 hats = role ? role.split(',') : [];
@@ -64,14 +64,16 @@ class MessageHistory extends CustomElement {
             }
         }
 
+        const chatbox = this.chatview.model;
+        const has_mentions = is_groupchat && model.get('sender') === 'them' && chatbox.isUserMentioned(model);
         const message = tpl_message(
             Object.assign(model.toJSON(), {
                 'chatview': this.chatview,
                 'is_me_message': model.isMeCommand(),
                 'occupant': model.occupant,
                 'username': model.getDisplayName(),
+                has_mentions,
                 hats,
-                is_groupchat_message,
                 is_retracted,
                 model,
             }));

src/components/message.js

@@ -26,6 +26,7 @@ class Message extends CustomElement {
             chatview: { type: Object},
             correcting: { type: Boolean },
             editable: { type: Boolean },
+            error: { type: String },
             first_unread: { type: Boolean },
             from: { type: String },
             has_mentions: { type: Boolean },
@@ -232,8 +233,9 @@ class Message extends CustomElement {
                 ?is_only_emojis="${this.is_only_emojis}"
                 ?is_spoiler="${this.is_spoiler}"
                 ?is_spoiler_visible="${this.is_spoiler_visible}"
-                text="${this.model.getMessageText()}"/>
+                text="${this.model.getMessageText()}"></converse-chat-message-body>
             ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
+            <div class="chat-msg__error">${this.error}</div>
         `;
     }
 

src/converse-chatview.js

@@ -237,14 +237,6 @@ converse.plugins.add('converse-chatview', {
                     )
                 );
                 render(result, this.el);
-                this.tpl_chat_content = (o) => {
-                    return html`
-                        <converse-chat-content
-                            .chatview=${this}
-                            .messages=${o.messages}
-                            .notifications=${o.notifications}>
-                        </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');
@@ -269,7 +261,18 @@ converse.plugins.add('converse-chatview', {
             },
 
             renderChatContent (msgs_by_ref=false) {
-                const messages = msgs_by_ref ? this.model.messages : Array.from(this.model.messages);
+                if (!this.tpl_chat_content) {
+                    this.tpl_chat_content = (o) => {
+                        return html`
+                            <converse-chat-content
+                                .chatview=${this}
+                                .messages=${o.messages}
+                                notifications=${o.notifications}>
+                            </converse-chat-content>`
+                    };
+                }
+                const msg_models = this.model.messages.models;
+                const messages = msgs_by_ref ? msg_models : Array.from(msg_models);
                 render(
                     this.tpl_chat_content({ messages, 'notifications': this.getNotifications() }),
                     this.msgs_container

src/converse-muc-views.js

@@ -517,9 +517,6 @@ converse.plugins.add('converse-muc-views', {
                     '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');

src/headless/converse-chat.js

@@ -331,8 +331,8 @@ converse.plugins.add('converse-chat', {
                     return;
                 }
                 this.set({'box_id': `box-${btoa(jid)}`});
-                this.initMessages();
                 this.initNotifications();
+                this.initMessages();
 
                 if (this.get('type') === _converse.PRIVATE_CHAT_TYPE) {
                     this.presence = _converse.presences.findWhere({'jid': jid}) || _converse.presences.create({'jid': jid});

src/headless/converse-muc.js

@@ -382,8 +382,8 @@ converse.plugins.add('converse-muc', {
                 this.initialized = u.getResolveablePromise();
                 this.debouncedRejoin = debounce(this.rejoin, 250);
                 this.set('box_id', `box-${btoa(this.get('jid'))}`);
-                this.initMessages();
                 this.initNotifications();
+                this.initMessages();
                 this.initOccupants();
                 this.initDiscoModels(); // sendChatState depends on this.features
                 this.registerHandlers();

src/templates/directives/retraction.js

@@ -5,7 +5,7 @@ import { __ } from '@converse/headless/i18n';
 const i18n_retract_message = __('Retract this message');
 const tpl_retract = (o) => html`
     <button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}" @click=${o.onMessageRetractButtonClicked}>
-        <fa-icon class="fas fa-trash-alt" path-prefix="/node_modules" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+        <fa-icon class="fas fa-trash-alt" path-prefix="/dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
     </button>
 `;
 

src/templates/message.js

@@ -6,31 +6,32 @@ export default (o) => html`
         .chatview=${o.chatview}
         .hats=${o.hats}
         .model=${o.model}
-        ?correcting=${o.model.get('correcting')}
-        ?editable=${o.model.get('editable')}
-        ?retractable=${o.retractable}
+        ?correcting=${o.correcting}
+        ?editable=${o.editable}
         ?has_mentions=${o.has_mentions}
-        ?is_delayed=${o.model.get('is_delayed')}
-        ?is_encrypted=${o.model.get('is_encrypted')}
+        ?is_delayed=${o.is_delayed}
+        ?is_encrypted=${o.is_encrypted}
         ?is_me_message=${o.is_me_message}
-        ?is_only_emojis=${o.model.get('is_only_emojis')}
+        ?is_only_emojis=${o.is_only_emojis}
         ?is_retracted=${o.is_retracted}
-        ?is_spoiler=${o.model.get('is_spoiler')}
-        ?is_spoiler_visible=${o.model.get('is_spoiler_visible')}
-        from=${o.model.get('from')}
-        moderated_by=${o.model.get('moderated_by') || ''}
-        moderation_reason=${o.model.get('moderation_reason') || ''}
-        msgid=${o.model.get('msgid')}
+        ?is_spoiler=${o.is_spoiler}
+        ?is_spoiler_visible=${o.is_spoiler_visible}
+        ?retractable=${o.retractable}
+        error=${o.error || ''}
+        from=${o.from}
+        message_type=${o.type || ''}
+        moderated_by=${o.moderated_by || ''}
+        moderation_reason=${o.moderation_reason || ''}
+        msgid=${o.msgid}
         occupant_affiliation=${o.model.occupant ? o.model.occupant.get('affiliation') : ''}
         occupant_role=${o.model.occupant ? o.model.occupant.get('role') : ''}
-        oob_url=${o.model.get('oob_url') || ''}
-        pretty_type=${o.model.get('pretty_type')}
-        received=${o.model.get('received')}
-        sender=${o.model.get('sender')}
-        spoiler_hint=${o.model.get('spoiler_hint') || ''}
-        progress=${o.model.get('progress') || ''}
-        subject=${o.model.get('subject') || ''}
-        time=${o.model.get('time')}
-        message_type=${o.model.get('type') || ''}
+        oob_url=${o.oob_url || ''}
+        pretty_type=${o.pretty_type}
+        progress=${o.progress || ''}
+        received=${o.received}
+        sender=${o.sender}
+        spoiler_hint=${o.spoiler_hint || ''}
+        subject=${o.subject || ''}
+        time=${o.time}
         username=${o.username}></converse-chat-message>
 `;