Create hats from vcard conditionally (#2285)

* allow the use of MUC affiliation, MUC role, and VCard roles as hats
* update setting documentation
* remove filter from VCard roles
* update naming and documentation to make explicit the use of XEP-317 Hats
* include muc_hats config option update to changelog

CHANGES.md

@@ -35,6 +35,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #2213: added CustomElement to converse.env
 - #2220: fix rendering of emojis in case `use_system_emojis == false` (again).
 - #2092: fixes room list update loop when having the `locked_muc_domain` truthy or `'hidden'`
+- #2285: Rename config option `muc_hats_from_vcard` to [muc_hats](https://conversejs.org/docs/html/configuration.html#muc-hats). Now accepts a list instead of a boolean and allows for more flexible choices regarding user badges.
 - The `api.archive.query` method no longer accepts an RSM instance as argument.
 - The plugin `converse-uniview` has been removed and its functionality merged into `converse-chatboxviews`
 - Removed the mockups from the project. Recommended to use tests instead.

docs/source/configuration.rst

@@ -1010,15 +1010,29 @@ VCard is taken, and if that is not set but `muc_nickname_from_jid`_ is set to
 
 If no nickame value is found, then an error will be raised.
 
-muc_hats_from_vcard
+muc_hats
 -------------------
 
-* Default: ``false``
+* Default: ``['xep317']``
 
 Since version 7 Converse now has rudimentary support for `XEP-0317 Hats <https://xmpp.org/extensions/xep-0317.html>`_.
 
-Previously we used a non-standard hack of showing the VCard roles as if they
-were hats. Set this value to ``true`` for the old behaviour.
+It is also possible to display VCard roles, MUC affiliation and MUC role along with hats.
+By default only XEP-0317 hats are considered.
+For the inclusion of VCard roles ``'vcard_roles'`` must be added to the list.
+For the inclusion of MUC affiliation and MUC role, the specific affiliations and roles
+to be used must be added to the list e.g. ``'owner','participant'``.
+
+Example:
+
+For XEP-0317 hats and VCard roles this setting should be set to:
+``'muc_hats': ['xep317', 'vcard_roles']``
+
+For VCard roles, admin MUC affiliation and moderator MUC role:
+``'muc_hats': ['vcard_roles', 'admin', 'moderator']``
+
+And to prevent the displaying of anything, an empty list must be used:
+``'muc_hats': []``
 
 
 muc_mention_autocomplete_min_chars

src/components/message-history.js

@@ -70,12 +70,20 @@ function getDayIndicator (model) {
 
 function getHats (model) {
     if (model.get('type') === 'groupchat') {
-        if (api.settings.get('muc_hats_from_vcard')) {
-            const role = model.vcard ? model.vcard.get('role') : null;
-            return role ? role.split(',') : [];
-        } else {
-            return model.occupant?.get('hats') || [];
+        const allowed_hats = api.settings.get('muc_hats').filter(hat => hat).map((hat) => (hat.toLowerCase()));
+        let vcard_roles = []
+        if (allowed_hats.includes('vcard_roles')) {
+            vcard_roles = model.vcard ? model.vcard.get('role') : null;
+            vcard_roles = vcard_roles ? vcard_roles.split(',').filter(hat => hat).map((hat) => ({title: hat})) : [];
         }
+        const muc_role = model.occupant ? [model.occupant.get('role')] : [];
+        const muc_affiliation = model.occupant ? [model.occupant.get('affiliation')] : [];
+
+        const affiliation_role_hats = [...muc_role, ...muc_affiliation]
+            .filter(hat => hat).filter((hat) => (allowed_hats.includes(hat.toLowerCase())))
+            .map((hat) => ({title: hat}));
+        const hats = allowed_hats.includes('xep317') ? model.occupant?.get('hats') || [] : [];
+        return [...hats, ...vcard_roles, ...affiliation_role_hats];
     }
     return [];
 }

src/converse-chatview.js

@@ -1062,7 +1062,7 @@ converse.plugins.add('converse-chatview', {
             'filter_url_query_params': null,
             'image_urls_regex': null,
             'message_limit': 0,
-            'muc_hats_from_vcard': false,
+            'muc_hats': ['xep317'],
             'show_images_inline': true,
             'show_message_avatar': true,
             'show_retraction_warning': true,