2020-07-01 15:51:21 +02:00
|
|
|
import './icons.js';
|
|
|
|
import xss from 'xss/dist/xss';
|
2020-05-15 14:33:31 +02:00
|
|
|
import { CustomElement } from './element.js';
|
2020-07-13 11:17:29 +02:00
|
|
|
import { api } from '@converse/headless/converse-core';
|
2020-05-15 14:33:31 +02:00
|
|
|
import { html } from 'lit-element';
|
|
|
|
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
|
|
|
|
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
export default class ChatHelp extends CustomElement {
|
2020-05-15 14:33:31 +02:00
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
|
|
|
chat_type: { type: String },
|
|
|
|
messages: { type: Array },
|
|
|
|
model: { type: Object },
|
|
|
|
type: { type: String }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
const isodate = (new Date()).toISOString();
|
|
|
|
return [
|
2020-07-01 15:51:21 +02:00
|
|
|
html`<converse-icon class="fas fa-times close-chat-help"
|
|
|
|
@click=${this.close}
|
|
|
|
path-prefix="${api.settings.get("assets_path")}"
|
|
|
|
size="1em"></converse-icon>`,
|
2020-05-15 14:33:31 +02:00
|
|
|
...this.messages.map(m => this.renderHelpMessage({
|
|
|
|
isodate,
|
|
|
|
'markup': xss.filterXSS(m, {'whiteList': {'strong': []}})
|
|
|
|
}))
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
close () {
|
|
|
|
this.model.set({'show_help_messages': false});
|
|
|
|
}
|
|
|
|
|
|
|
|
renderHelpMessage (o) {
|
|
|
|
return html`<div class="message chat-${this.type}" data-isodate="${o.isodate}">${unsafeHTML(o.markup)}</div>`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
api.elements.define('converse-chat-help', ChatHelp);
|