Create `converse-message-versions` component

Enables re-use outside of the message versions modal.

src/modals/message-versions.js

@@ -5,6 +5,6 @@ import tpl_message_versions_modal from "./templates/message-versions.js";
 export default BootstrapModal.extend({
     id: "message-versions-modal",
     toHTML () {
-        return tpl_message_versions_modal(this.model.toJSON());
+        return tpl_message_versions_modal(this.model);
     }
 });

src/modals/templates/message-versions.js

@@ -1,12 +1,10 @@
+import 'shared/components/message-versions.js';
 import { __ } from 'i18n';
 import { html } from "lit";
 import { modal_close_button, modal_header_close_button } from "./buttons.js"
-import { converse } from '@converse/headless/core';
 
-const { dayjs } = converse.env;
 
-
-export default (o) => html`
+export default (model) => html`
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -14,11 +12,7 @@ export default (o) => html`
                 ${modal_header_close_button}
             </div>
             <div class="modal-body">
-                <h4>Older versions</h4>
-                ${Object.keys(o.older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${o.older_versions[k]}</p>`) }
-                <hr/>
-                <h4>Current version</h4>
-                <p>${o.message}</p>
+                <converse-message-versions .model=${model}></converse-message-versions>
             </div>
             <div class="modal-footer">${modal_close_button}</div>
         </div>

src/shared/chat/templates/message.js

@@ -1,4 +1,4 @@
-import 'shared/chat/unfurl';
+import 'shared/chat/unfurl.js';
 import { __ } from 'i18n';
 import { html } from "lit";
 import { renderAvatar } from 'shared/directives/avatar';

src/shared/components/message-versions.js

@@ -0,0 +1,28 @@
+import { CustomElement } from './element.js';
+import { api, converse } from '@converse/headless/core';
+import { html } from 'lit';
+
+const { dayjs } = converse.env;
+
+
+export class MessageVersions extends CustomElement {
+
+    static get properties () {
+        return {
+            'model': { type: Object }
+        }
+    }
+
+    render () {
+        const older_versions = this.model.get('older_versions');
+        const message = this.model.get('message');
+        return html`
+            <h4>Older versions</h4>
+            ${Object.keys(older_versions).map(k => html`<p class="older-msg"><time>${dayjs(k).format('MMM D, YYYY, HH:mm:ss')}</time>: ${older_versions[k]}</p>`) }
+            <hr/>
+            <h4>Current version</h4>
+            <p>${message}</p>`;
+    }
+}
+
+api.elements.define('converse-message-versions', MessageVersions);