Pass both hat title and URI to template

src/converse-message-view.js

@@ -254,8 +254,7 @@ converse.plugins.add('converse-message-view', {
                         const role = this.model.vcard ? this.model.vcard.get('role') : null;
                         hats = role ? role.split(',') : [];
                     } else {
-                        const o = this.model.occupant;
-                        hats = o && o.get('hats').map(h => h.title).filter(h => h) || [];
+                        hats = this.model.occupant?.get('hats') || [];
                     }
                 }
 

src/templates/message.html

@@ -11,7 +11,7 @@
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
             <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
             {[ if (!o.is_me_message) { ]}
-                {[o.hats.forEach(function (hat) { ]} <span class="badge badge-secondary">{{{hat}}}</span> {[ }); ]}
+                {[o.hats.forEach(function (hat) { ]} <span class="badge badge-secondary">{{{hat.title}}}</span> {[ }); ]}
                 <time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>
             {[ } ]}
             {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}