Register listeners when occupant is added to a message

src/converse-message-view.js

@@ -107,17 +107,15 @@ converse.plugins.add('converse-message-view', {
                     });
                 }
 
-                if (this.model.occupant) {
-                    this.listenTo(this.model.occupant, 'change:affiliation', this.debouncedRender);
-                    this.listenTo(this.model.occupant, 'change:hats', this.debouncedRender);
-                    this.listenTo(this.model.occupant, 'change:role', this.debouncedRender);
-                    this.debouncedRender();
-                }
-
+                this.model.occupant && this.addOccupantListeners();
                 this.listenTo(this.model, 'change', this.onChanged);
                 this.listenTo(this.model, 'destroy', this.fadeOut);
-                this.listenTo(this.model, 'occupantAdded', this.debouncedRender);
+                this.listenTo(this.model, 'occupantAdded', () => {
+                    this.addOccupantListeners();
+                    this.debouncedRender();
+                });
                 this.listenTo(this.model, 'vcard:change', this.debouncedRender);
+                this.debouncedRender();
             },
 
             async render () {
@@ -156,6 +154,12 @@ converse.plugins.add('converse-message-view', {
                 }
             },
 
+            addOccupantListeners () {
+                this.listenTo(this.model.occupant, 'change:affiliation', this.debouncedRender);
+                this.listenTo(this.model.occupant, 'change:hats', this.debouncedRender);
+                this.listenTo(this.model.occupant, 'change:role', this.debouncedRender);
+            },
+
             fadeOut () {
                 if (api.settings.get('animate')) {
                     setTimeout(() => this.remove(), 600);