Add new component `converse-muc-chat-content`

So that `converse-chat-content` can be kept more generic.

Set the model directly on the `*-chat-content` components, instead of
passing in the JID, so that the component doesn't have to know where to
fetch the model from.

src/plugins/chatview/templates/chat.js

@@ -12,7 +12,7 @@ export default (o) => html`
                 <div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
                     <converse-chat-content
                         class="chat-content__messages"
-                        jid="${o.jid}"></converse-chat-content>
+                        .model="${o.model}"></converse-chat-content>
 
                     ${o.show_help_messages ? html`<div class="chat-content__help">
                             <converse-chat-help

src/plugins/headlines-view/templates/headlines.js

@@ -11,7 +11,7 @@ export default (model) => html`
                 <div class="chat-content" aria-live="polite">
                     <converse-chat-content
                         class="chat-content__messages"
-                        jid="${model.get('jid')}"></converse-chat-content>
+                        .model=${model}></converse-chat-content>
                 </div>
             </div>` : '' }
     </div>

src/plugins/muc-views/muc-chat-content.js

@@ -0,0 +1,17 @@
+import { api } from '@converse/headless';
+import ChatContent from 'shared/chat/chat-content';
+import 'shared/chat/message-history';
+
+import './styles/muc-chat-content.scss';
+
+
+export default class MUCChatContent extends ChatContent {
+
+    async initialize () {
+        await super.initialize();
+        this.listenTo(this.model, 'change:hidden_occupants', () => this.requestUpdate());
+        this.listenTo(this.model.occupants, 'change', () => this.requestUpdate());
+    }
+}
+
+api.elements.define('converse-muc-chat-content', MUCChatContent);

src/plugins/muc-views/styles/muc-chat-content.scss

@@ -0,0 +1,7 @@
+converse-muc-chat-content {
+    display: flex;
+    flex-direction: column-reverse;
+    height: 100%;
+    justify-content: space-between;
+    overflow: auto;
+}

src/plugins/muc-views/templates/muc-chatarea.js

@@ -1,10 +1,10 @@
 import { html } from "lit";
 import { api, constants } from '@converse/headless';
-import '../bottom-panel.js';
-import '../sidebar.js';
-import 'shared/chat/chat-content.js';
 import 'shared/chat/help-messages.js';
 import 'shared/components/split-resize.js';
+import '../bottom-panel.js';
+import '../sidebar.js';
+import '../muc-chat-content.js';
 
 const { CHATROOMS_TYPE } = constants;
 
@@ -28,9 +28,9 @@ export default (el) => {
     return html`
         <div class="chat-area ${el.shouldShowSidebar() ? chat_area_classes : 'col-xs-12' }">
             <div class="chat-content ${show_send_button ? 'chat-content-sendbutton' : ''}" aria-live="polite">
-                <converse-chat-content
+                <converse-muc-chat-content
                     class="chat-content__messages"
-                    jid="${el.jid}"></converse-chat-content>
+                    .model="${el.model}"></converse-muc-chat-content>
 
                 ${(el.model?.get('show_help_messages')) ?
                     html`<div class="chat-content__help">

src/shared/chat/chat-content.js

@@ -12,12 +12,12 @@ export default class ChatContent extends CustomElement {
 
     constructor () {
         super();
-        this.jid = null;
+        this.model = null;
     }
 
     static get properties () {
         return {
-            jid: { type: String }
+            model: { type: Object }
         }
     }
 
@@ -27,8 +27,7 @@ export default class ChatContent extends CustomElement {
     }
 
     async initialize () {
-        await this.setModels();
-        this.listenTo(this.model, 'change:hidden_occupants', () => this.requestUpdate());
+        await this.model.initialized;
         this.listenTo(this.model.messages, 'add', () => this.requestUpdate());
         this.listenTo(this.model.messages, 'change', () => this.requestUpdate());
         this.listenTo(this.model.messages, 'remove', () => this.requestUpdate());
@@ -37,16 +36,7 @@ export default class ChatContent extends CustomElement {
         this.listenTo(this.model.notifications, 'change', () => this.requestUpdate());
         this.listenTo(this.model.ui, 'change', () => this.requestUpdate());
         this.listenTo(this.model.ui, 'change:scrolled', this.scrollDown);
-
-        if (this.model.occupants) {
-            this.listenTo(this.model.occupants, 'change', () => this.requestUpdate());
-        }
         this.addEventListener('scroll', markScrolled);
-    }
-
-    async setModels () {
-        this.model = await api.chatboxes.get(this.jid);
-        await this.model.initialized;
         this.requestUpdate();
     }
 

src/shared/chat/styles/chat-content.scss

@@ -1,4 +1,3 @@
-
 converse-chat-content {
     display: flex;
     flex-direction: column-reverse;

src/types/plugins/muc-views/muc-chat-content.d.ts

@@ -0,0 +1,4 @@
+export default class MUCChatContent extends ChatContent {
+}
+import ChatContent from 'shared/chat/chat-content';
+//# sourceMappingURL=muc-chat-content.d.ts.map

src/types/shared/chat/chat-content.d.ts

@@ -1,13 +1,11 @@
 export default class ChatContent extends CustomElement {
     static get properties(): {
-        jid: {
-            type: StringConstructor;
+        model: {
+            type: ObjectConstructor;
         };
     };
-    jid: any;
-    initialize(): Promise<void>;
-    setModels(): Promise<void>;
     model: any;
+    initialize(): Promise<void>;
     render(): import("lit").TemplateResult<1> | "";
     scrollDown(): void;
 }