Use lit-html to render chat head

src/converse-bookmark-views.js

@@ -45,7 +45,6 @@ converse.plugins.add('converse-bookmark-views', {
                 const buttons = this.__super__.getHeadingButtons.call(this);
                 if (_converse.allow_bookmarks) {
                     const supported = _converse.checkBookmarksSupport();
-                    const info_minimize = __('Minimize this chat box');
                     const info_toggle_bookmark = this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat');
                     const bookmarked = this.model.get('bookmarked');
                     const template = html`<a class="chatbox-btn toggle-bookmark fa fa-bookmark ${bookmarked ? 'button-on' : ''}" title="${info_toggle_bookmark}"></a>`;

src/converse-chatview.js

@@ -7,11 +7,13 @@ import "converse-chatboxviews";
 import "converse-message-view";
 import "converse-modal";
 import { debounce, get, isString } from "lodash";
+import { View } from "skeletor.js/src/view";
 import { Overview } from "skeletor.js/src/overview";
+import { html, render } from "lit-html";
 import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.html";
-import tpl_chatbox_head from "templates/chatbox_head.html";
+import tpl_chatbox_head from "templates/chatbox_head.js";
 import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
 import tpl_error_message from "templates/error_message.html";
 import tpl_help_message from "templates/help_message.html";
@@ -71,7 +73,7 @@ converse.plugins.add('converse-chatview', {
         });
 
 
-        _converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
+        _converse.ChatBoxHeading = View.extend({
             initialize () {
                 this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
 
@@ -92,20 +94,34 @@ converse.plugins.add('converse-chatview', {
             render () {
                 const vcard = get(this.model, 'vcard');
                 const vcard_json = vcard ? vcard.toJSON() : {};
-                this.el.innerHTML = tpl_chatbox_head(
+                render(tpl_chatbox_head(
                     Object.assign(
                         vcard_json,
                         this.model.toJSON(),
                         { '_converse': _converse,
-                          'info_close': __('Close this chat box'),
+                          'buttons': this.getHeadingButtons(),
                           'display_name': this.model.getDisplayName()
                         }
                     )
-                );
-                this.renderAvatar();
+                ), this.el);
                 return this;
             },
 
+            getHeadingButtons () {
+                const buttons = [];
+                if (!_converse.singleton) {
+                    const info_close = __('Close this chat box');
+                    const template = html`<a class="chatbox-btn close-chatbox-button fa fa-times" title="${info_close}"></a>`;
+                    template.name = 'close';
+                    buttons.push(template);
+                }
+                const info_details = __('Show more details about this groupchat');
+                const template = html`<a class="chatbox-btn show-user-details-modal fa fa-id-card" title="${info_details}"></a>`;
+                template.name = 'details';
+                buttons.push(template);
+                return buttons;
+            },
+
             onStatusMessageChanged (item) {
                 this.debouncedRender();
                 /**

src/converse-minimize.js

@@ -10,7 +10,6 @@ import { View } from "skeletor.js/src/view";
 import { __ } from '@converse/headless/i18n';
 import { html } from "lit-html";
 import converse from "@converse/headless/converse-core";
-import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
 import tpl_chats_panel from "templates/chats_panel.html";
 import tpl_toggle_chats from "templates/toggle_chats.html";
 import tpl_trimmed_chat from "templates/trimmed_chat.html";
@@ -118,21 +117,13 @@ converse.plugins.add('converse-minimize', {
         },
 
         ChatBoxHeading: {
-            render () {
-                const { _converse } = this.__super__;
-                const { __ } = _converse;
-
-                this.__super__.render.apply(this, arguments);
-                const new_html = tpl_chatbox_minimize({
-                    'info_minimize': __('Minimize this chat box')
-                });
-                const el = this.el.querySelector('.toggle-chatbox-button');
-                if (el) {
-                    el.outerHTML = new_html;
-                } else {
-                    const button = this.el.querySelector('.close-chatbox-button');
-                    button.insertAdjacentHTML('afterEnd', new_html);
-                }
+            getHeadingButtons () {
+                const buttons = this.__super__.getHeadingButtons.call(this);
+                const info_minimize = __('Minimize this chat box');
+                const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
+                const names = buttons.map(t => t.name);
+                const idx = names.indexOf('close');
+                return idx > -1 ? [...buttons.slice(0, idx+1), template, ...buttons.slice(idx+1)] : [template, ...buttons];
             }
         },
 
@@ -152,7 +143,7 @@ converse.plugins.add('converse-minimize', {
 
             getHeadingButtons () {
                 const buttons = this.__super__.getHeadingButtons.call(this);
-                const info_minimize = __('Minimize this chat box');
+                const info_minimize = __('Minimize this groupchat');
                 const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
                 const names = buttons.map(t => t.name);
                 const idx = names.indexOf('signout');

src/templates/avatar.js

 import { html } from "lit-html";
 
 export default  (o) => html`
-    <img alt="${o.alt_text}" class="img-thumbnail avatar align-self-center ${o.extra_classes}"
-            height="100px" width="100px" src="data:${o.image_type};base64,${o.image}"/>`;
+    <img alt="${o.alt_text}" class="avatar align-self-center ${o.extra_classes}"
+            height="${o.height}" width="${o.width}" src="data:${o.image_type};base64,${o.image}"/>`;

src/templates/chatbox_head.html

-<div class="chat-head chat-head-chatbox row no-gutters">
-    <div class="chatbox-title">
-        <div class="chatbox-title--row">
-            {[ if (!o._converse.singleton) { ]}
-                <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
-            {[ } ]}
-            {[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
-                <div> <canvas class="avatar" height="36" width="36"></canvas> </div>
-            {[ } ]}
-            <div class="chatbox-title__text" title="{{{o.jid}}}">
-                {[ if (o.url) { ]} <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {[ } ]}
-                    {{{ o.display_name }}}
-                {[ if (o.url) { ]} </a> {[ } ]}
-            </div>
-        </div>
-        <div class="chatbox-title__buttons row no-gutters">
-            <a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
-            <a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
-        </div>
-    </div>
-    <p class="chat-head__desc">{{{ o.status }}}</p>
-</div>

src/templates/chatbox_head.js

+import { html } from "lit-html";
+import { until } from 'lit-html/directives/until.js';
+import { __ } from '@converse/headless/i18n';
+import avatar from "./avatar.js";
+import converse from "@converse/headless/converse-core";
+import xss from "xss/dist/xss";
+
+const i18n_profile = __('The User\'s Profile Image');
+
+const avatar_data = {
+    'alt_text': i18n_profile,
+    'extra_classes': '',
+    'height': 40,
+    'width': 40,
+}
+
+export default (o) => {
+    return html`
+        <div class="chat-head chat-head-chatbox row no-gutters">
+            <div class="chatbox-title">
+                <div class="chatbox-title--row">
+                    ${ (!o._converse.singleton) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
+                    ${ (o.type !== o._converse.HEADLINES_TYPE) ? avatar(Object.assign({}, o, avatar_data)) : '' }
+                    <div class="chatbox-title__text" title="${o.jid}">
+                        ${ o.url ? html`<a href="${o.url}" target="_blank" rel="noopener" class="user">${o.display_name}</a>` : o.display_name}
+                    </div>
+                </div>
+                <div class="chatbox-title__buttons row no-gutters">${ o.buttons.map(b => until(b, '')) }</div>
+            </div>
+            <p class="chat-head__desc">${ o.status }</p>
+        </div>
+    `;
+}

src/templates/chatbox_minimize.html

-<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="{{{o.info_minimize}}}"></a>

src/templates/user_details_modal.js

 import { __ } from '@converse/headless/i18n';
 import { html } from "lit-html";
 import avatar from "./avatar.js";
-import spinner from "./spinner.js";
 import { modal_close_button, modal_header_close_button } from "./buttons"