Use the roster name or vCard nickname before falling back to vCard fullname or JID.

src/converse-chatview.js

@@ -208,8 +208,8 @@
                 render () {
                     this.el.innerHTML = tpl_chatbox_head(
                         _.extend(
-                            this.model.toJSON(),
                             this.model.vcard.toJSON(),
+                            this.model.toJSON(),
                             { '_converse': _converse,
                               'info_close': __('Close this chat box')
                             }

src/converse-roster.js

@@ -247,7 +247,7 @@
                 },
 
                 getDisplayName () {
-                    return this.vcard.get('fullname') || this.get('jid');
+                    return this.get('nickname') || this.vcard.get('nickname') || this.vcard.get('fullname') || this.get('jid');
                 },
 
                 getFullname () {

src/templates/chatbox_head.html

@@ -7,7 +7,7 @@
                 {[ if (o.url) { ]}
                     <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
                 {[ } ]}
-                        {{{ o.fullname || o.jid }}}
+                        {{{ o.nickname || o.fullname || o.jid }}}
                 {[ if (o.url) { ]}
                     </a>
                 {[ } ]}