Create separate models for MUC messages and their container

src/headless/converse-chatboxes.js

@@ -71,7 +71,8 @@ converse.plugins.add('converse-chatboxes', {
 
 
         /**
-         * Represents a chat message
+         * Represents a non-MUC message. These can be either `chat` messages or
+         * `headline` messages.
          * @class
          * @namespace _converse.Message
          * @memberOf _converse
@@ -87,10 +88,8 @@ converse.plugins.add('converse-chatboxes', {
             },
 
             initialize () {
-                if (['chat', 'groupchat'].includes(this.get('type'))) {
-                    this.setVCard();
-                }
                 if (this.get('type') === 'chat') {
+                    this.setVCard();
                     this.setRosterContact(Strophe.getBareJidFromJid(this.get('from')));
                 }
                 if (this.get('file')) {
@@ -107,32 +106,6 @@ converse.plugins.add('converse-chatboxes', {
                 }
             },
 
-            getVCardForChatroomOccupant () {
-                const chatbox = this.collection.chatbox,
-                      nick = Strophe.getResourceFromJid(this.get('from'));
-
-                if (chatbox.get('nick') === nick) {
-                    return _converse.xmppstatus.vcard;
-                } else {
-                    let vcard;
-                    if (this.get('vcard_jid')) {
-                        vcard = _converse.vcards.findWhere({'jid': this.get('vcard_jid')});
-                    }
-                    if (!vcard) {
-                        let jid;
-                        const occupant = chatbox.occupants.findWhere({'nick': nick});
-                        if (occupant && occupant.get('jid')) {
-                            jid = occupant.get('jid');
-                            this.save({'vcard_jid': jid}, {'silent': true});
-                        } else {
-                            jid = this.get('from');
-                        }
-                        vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
-                    }
-                    return vcard;
-                }
-            },
-
             setVCard () {
                 if (!_converse.vcards) {
                     // VCards aren't supported
@@ -140,8 +113,6 @@ converse.plugins.add('converse-chatboxes', {
                 }
                 if (this.get('type') === 'error') {
                     return;
-                } else if (this.get('type') === 'groupchat') {
-                    this.vcard = this.getVCardForChatroomOccupant();
                 } else {
                     const jid = Strophe.getBareJidFromJid(this.get('from'));
                     this.vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
@@ -271,6 +242,8 @@ converse.plugins.add('converse-chatboxes', {
          * @memberOf _converse
          */
         _converse.ChatBox = ModelWithContact.extend({
+            messagesCollection: _converse.Messages,
+
             defaults () {
                 return {
                     'bookmarked': false,
@@ -311,7 +284,7 @@ converse.plugins.add('converse-chatboxes', {
             },
 
             initMessages () {
-                this.messages = new _converse.Messages();
+                this.messages = new this.messagesCollection();
                 this.messages.browserStorage = new BrowserStorage.session(
                     `converse.messages-${this.get('jid')}-${_converse.bare_jid}`);
                 this.messages.chatbox = this;

src/headless/converse-muc.js

@@ -238,6 +238,67 @@ converse.plugins.add('converse-muc', {
             return chatbox;
         }
 
+
+        /**
+         * Represents a MUC message
+         * @class
+         * @namespace _converse.ChatRoomMessage
+         * @memberOf _converse
+         */
+        _converse.ChatRoomMessage = _converse.Message.extend({
+
+            getVCardForChatroomOccupant () {
+                const chatbox = this.collection.chatbox,
+                      nick = Strophe.getResourceFromJid(this.get('from'));
+
+                if (chatbox.get('nick') === nick) {
+                    return _converse.xmppstatus.vcard;
+                } else {
+                    let vcard;
+                    if (this.get('vcard_jid')) {
+                        vcard = _converse.vcards.findWhere({'jid': this.get('vcard_jid')});
+                    }
+                    if (!vcard) {
+                        let jid;
+                        const occupant = chatbox.occupants.findWhere({'nick': nick});
+                        if (occupant && occupant.get('jid')) {
+                            jid = occupant.get('jid');
+                            this.save({'vcard_jid': jid}, {'silent': true});
+                        } else {
+                            jid = this.get('from');
+                        }
+                        vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
+                    }
+                    return vcard;
+                }
+            },
+
+            setVCard () {
+                if (!_converse.vcards) {
+                    // VCards aren't supported
+                    return;
+                }
+                if (this.get('type') === 'error') {
+                    return;
+                } else {
+                    this.vcard = this.getVCardForChatroomOccupant();
+                }
+            },
+        });
+
+
+        /**
+         * Collection which stores MUC messages
+         * @class
+         * @namespace _converse.ChatRoomMessages
+         * @memberOf _converse
+         */
+        _converse.ChatRoomMessages = Backbone.Collection.extend({
+            model: _converse.ChatRoomMessage,
+            comparator: 'time'
+        });
+
+
         /**
          * Represents an open/ongoing groupchat conversation.
          * @class
@@ -245,6 +306,7 @@ converse.plugins.add('converse-muc', {
          * @memberOf _converse
          */
         _converse.ChatRoom = _converse.ChatBox.extend({
+            messagesCollection: _converse.ChatRoomMessages,
 
             defaults () {
                 return {
@@ -319,6 +381,12 @@ converse.plugins.add('converse-muc', {
             async onConnectionStatusChanged () {
                 if (this.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
                     this.occupants.fetchMembers();
+                    // It's possible to fetch messages before entering a MUC,
+                    // but we don't support this use-case currently. By
+                    // fetching messages after members we can immediately
+                    // assign an occupant to the message before rendering it,
+                    // thereby avoiding re-renders (and therefore DOM reflows).
+                    this.fetchMessages();
 
                     if (_converse.auto_register_muc_nickname &&
                             await _converse.api.disco.supports(Strophe.NS.MUC_REGISTER, this.get('jid'))) {