Render help messages as a component

karma.conf.js

@@ -13,6 +13,12 @@ module.exports = function(config) {
       "dist/converse.js",
       "dist/converse.css",
       { pattern: "dist/webfonts/**/*.*", included: false },
+      { pattern: "dist/\@fortawesome/fontawesome-free/sprites/*.svg",
+        included: false,
+        nocache: false,
+        served: true,
+        watched: false
+      },
       { pattern: "node_modules/sinon/pkg/sinon.js", type: 'module' },
       { pattern: "spec/mock.js", type: 'module' },
 
@@ -53,6 +59,12 @@ module.exports = function(config) {
       { pattern: "spec/xss.js", type: 'module' },
 
     ],
+
+    proxies: {
+      "/dist/\@fortawesome/fontawesome-free/sprites/": "/base/dist/\@fortawesome/fontawesome-free/sprites/"
+    },
+
+
     exclude: ['**/*.sw?'],
 
     // preprocess matching files before serving them to the browser

sass/_chatbox.scss

@@ -219,13 +219,32 @@
             font-size: var(--message-font-size);
             height: 100%;
             line-height: 1.3em;
-            overflow-y: auto;
+            overflow: hidden;
             padding: 1em 0 0 0;
 
             display: flex;
             flex-direction: column;
             justify-content: space-between;
 
+            .chat-content__help {
+                converse-chat-help {
+                    border-top: 1px solid var(--chat-head-color);
+                    display: block;
+                    padding: 0.5em 0;
+                }
+                .close-chat-help {
+                    float: right;
+                    padding-right: 1em;
+                    cursor: pointer;
+                    color: var(--chat-content-background-color);
+                }
+            }
+
+            .chat-content__messages {
+                overflow-y: auto;
+                height: 100%;
+            }
+
             .chat-content__notifications {
                 height: 1.7em;
                 white-space: pre;
@@ -235,7 +254,6 @@
                 font-style: italic;
                 line-height: var(--line-height-small);
                 padding: 0 1em 0.3em;
-
                 &:before {
                     content: " ";
                 }

sass/_chatrooms.scss

@@ -177,6 +177,16 @@
                     .chat-content {
                         height: 100%;
                     }
+                    .chat-content__help {
+                        converse-chat-help {
+                            border-top: 1px solid var(--chatroom-head-bg-color);
+                        }
+                        .close-chat-help {
+                            svg {
+                                fill: 1px solid var(--chatroom-head-bg-color) !important;
+                            }
+                        }
+                    }
                 }
                 .occupants {
                     display: flex;

spec/chatbox.js

@@ -20,7 +20,8 @@ fdescribe("Chatboxes", function () {
             const view = _converse.chatboxviews.get(contact_jid);
             mock.sendMessage(view, '/help');
 
-            const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info:not(.chat-date)'), 0);
+            await u.waitUntil(() => sizzle('.chat-info:not(.chat-date)', view.el).length);
+            const info_messages = await u.waitUntil(() => sizzle('.chat-info:not(.chat-date)', view.el));
             expect(info_messages.length).toBe(4);
             expect(info_messages.pop().textContent).toBe('/help: Show this menu');
             expect(info_messages.pop().textContent).toBe('/me: Write in the third person');

src/components/help_messages.js

@@ -0,0 +1,39 @@
+import xss from "xss/dist/xss";
+import { CustomElement } from './element.js';
+import { html } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { _converse } from "@converse/headless/converse-core";
+
+
+class ChatHelp extends CustomElement {
+
+    static get properties () {
+        return {
+            chat_type: { type: String },
+            messages: { type: Array },
+            type: { type: String }
+        }
+    }
+
+    render () {
+        const icon_color = this.chat_type === _converse.CHATROOMS_TYPE ? 'var(--chatroom-head-bg-color)' : 'var(--chat-head-color)';
+        const isodate = (new Date()).toISOString();
+        return [
+            html`<fa-icon class="fas fa-times close-chat-help" @click=${this.close} path-prefix="dist" color="${icon_color}" size="1em"></fa-icon>`,
+            ...this.messages.map(m => this.renderHelpMessage({
+                isodate,
+                'markup': xss.filterXSS(m, {'whiteList': {'strong': []}})
+            }))
+        ];
+    }
+
+    close () {
+        this.parentElement.removeChild(this);
+    }
+
+    renderHelpMessage (o) {
+        return html`<div class="message chat-${this.type}" data-isodate="${o.isodate}">${unsafeHTML(o.markup)}</div>`;
+    }
+}
+
+customElements.define('converse-chat-help', ChatHelp);

src/components/message.js

@@ -128,7 +128,7 @@ class Message extends CustomElement {
                                         title="${i18n_edit_message}"
                                         @click=${this.onMessageEditButtonClicked}
                                     >
-                                    <fa-icon class="fas fa-pencil-alt" path-prefix="/node_modules" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+                                    <fa-icon class="fas fa-pencil-alt" path-prefix="dist" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
                                 </button>` : '' }
                             ${ renderRetractionLink(this) }
                         </div>

src/converse-chatview.js

@@ -4,20 +4,19 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "./components/chat_content.js";
+import "./components/help_messages.js";
 import "converse-chatboxviews";
 import "converse-modal";
 import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.js";
 import tpl_chatbox_head from "templates/chatbox_head.js";
 import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
-import tpl_help_message from "templates/help_message.html";
 import tpl_new_day from "templates/new_day.html";
 import tpl_spinner from "templates/spinner.html";
 import tpl_spoiler_button from "templates/spoiler_button.html";
 import tpl_toolbar from "templates/toolbar.html";
 import tpl_toolbar_fileupload from "templates/toolbar_fileupload.html";
 import tpl_user_details_modal from "templates/user_details_modal.js";
-import xss from "xss/dist/xss";
 import { BootstrapModal } from "./converse-modal.js";
 import { Overview } from "skeletor.js/src/overview";
 import { __ } from '@converse/headless/i18n';
@@ -246,6 +245,7 @@ converse.plugins.add('converse-chatview', {
                 this.content = this.el.querySelector('.chat-content');
                 this.notifications = this.el.querySelector('.chat-content__notifications');
                 this.msgs_container = this.el.querySelector('.chat-content__messages');
+                this.help_container = this.el.querySelector('.chat-content__help');
                 this.renderChatStateNotification();
                 await this.renderChatContent();
                 this.renderMessageForm();
@@ -630,22 +630,11 @@ converse.plugins.add('converse-chatview', {
                 });
             },
 
-            showHelpMessages (msgs, type='info', spinner) {
-                msgs.forEach(msg => {
-                    this.msgs_container.insertAdjacentHTML(
-                        'beforeend',
-                        tpl_help_message({
-                            'isodate': (new Date()).toISOString(),
-                            'type': type,
-                            'message': xss.filterXSS(msg, {'whiteList': {'strong': []}})
-                        })
-                    );
-                });
-                if (spinner === true) {
-                    this.addSpinner();
-                } else if (spinner === false) {
-                    this.clearSpinner();
-                }
+            showHelpMessages (msgs, type='info') {
+                render(
+                    html`<converse-chat-help .messages=${msgs} type="${type}" chat_type="${this.model.get('type')}"></converse-chat-help>`,
+                    this.help_container
+                );
                 return this.scrollDown();
             },
 

src/converse-muc-views.js

@@ -522,6 +522,7 @@ converse.plugins.add('converse-muc-views', {
                 this.notifications = this.el.querySelector('.chat-content__notifications');
                 this.content = this.el.querySelector('.chat-content');
                 this.msgs_container = this.el.querySelector('.chat-content__messages');
+                this.help_container = this.el.querySelector('.chat-content__help');
 
                 this.renderBottomPanel();
                 if (!_converse.muc_show_logs_before_join &&

src/templates/chatbox.js

@@ -7,6 +7,7 @@ export default (o) => html`
             <div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" @scroll=${o.markScrolled} aria-live="polite">
                 <div class="chat-content__messages"></div>
                 <div class="chat-content__notifications"></div>
+                <div class="chat-content__help"></div>
             </div>
             <div class="bottom-panel">
                 <div class="emoji-picker__container dropup"></div>

src/templates/chatroom.js

@@ -14,6 +14,7 @@ export default (o) => html`
                         ${ o.muc_show_logs_before_join ? html`<div class="empty-history-feedback"><span>${ i18n_no_history }</span></div>`  : '' }
                     </div>
                     <div class="chat-content__notifications"></div>
+                    <div class="chat-content__help"></div>
                 </div>
                 <div class="bottom-panel"></div>
             </div>

src/templates/help_message.html

@@ -1 +0,0 @@
-<div class="message chat-info {[ if (o.type !== 'info') { ]} chat-{{{o.type}}} {[ } ]}" data-isodate="{{{o.isodate}}}">{{o.message}}</div>

webpack.prod.js

@@ -20,6 +20,7 @@ module.exports = merge(common, {
         new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
         new CopyWebpackPlugin([
             {from: 'sounds'},
+            {from: 'node_modules/@fortawesome/fontawesome-free/sprites/solid.svg', to: '@fortawesome/fontawesome-free/sprites/solid.svg'},
             {from: 'images/favicon.ico', to: 'images/favicon.ico'},
             {from: 'images/custom_emojis', to: 'images/custom_emojis'},
             {from: 'logo/conversejs-filled-192.png', to: 'images/logo'},