Update the chat template to receive the custom element as parameter

src/plugins/chatview/chat.js

@@ -34,16 +34,7 @@ export default class ChatView extends BaseChatView {
     }
 
     render() {
-        return tplChat(
-            Object.assign(
-                {
-                    model: this.model,
-                    help_messages: this.getHelpMessages(),
-                    show_help_messages: this.model.get('show_help_messages'),
-                },
-                this.model.toJSON()
-            )
-        );
+        return tplChat(this);
     }
 
     getHelpMessages() {

src/plugins/chatview/templates/chat.js

@@ -1,29 +1,46 @@
-import { html } from "lit";
+import { html } from 'lit';
 import { api, constants } from '@converse/headless';
 
 const { CHATROOMS_TYPE } = constants;
 
-export default (o) => html`
-    <div class="flyout box-flyout">
-        ${ api.settings.get('view_mode') === 'overlayed' ? html`<converse-dragresize></converse-dragresize>` : '' }
-        ${ o.model ? html`
-            <converse-chat-heading jid="${o.jid}" class="chat-head chat-head-chatbox row g-0"></converse-chat-heading>
-            <div class="chat-body">
-                <div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
-                    <converse-chat-content
-                        .model="${o.model}"></converse-chat-content>
-
-                    ${o.show_help_messages ? html`<div class="chat-content__help">
-                            <converse-chat-help
-                                .model=${o.model}
-                                .messages=${o.help_messages}
-                                ?hidden=${!o.show_help_messages}
-                                type="info"
-                                chat_type="${CHATROOMS_TYPE}"
-                            ></converse-chat-help></div>` : '' }
-                </div>
-                <converse-chat-bottom-panel .model="${o.model}" class="bottom-panel"> </converse-chat-bottom-panel>
-            </div>
-        ` : '' }
-    </div>
-`;
+/**
+ * @param {import('../chat').default} el
+ */
+export default (el) => {
+    const help_messages = el.getHelpMessages();
+    const show_help_messages = el.model.get('show_help_messages');
+    return html`
+        <div class="flyout box-flyout">
+            ${api.settings.get('view_mode') === 'overlayed' ? html`<converse-dragresize></converse-dragresize>` : ''}
+            ${el.model
+                ? html`
+                      <converse-chat-heading
+                          jid="${el.model.get('jid')}"
+                          class="chat-head chat-head-chatbox row g-0"
+                      ></converse-chat-heading>
+                      <div class="chat-body">
+                          <div
+                              class="chat-content ${el.model.get('show_send_button') ? 'chat-content-sendbutton' : ''}"
+                              aria-live="polite"
+                          >
+                              <converse-chat-content .model="${el.model}"></converse-chat-content>
+                              ${show_help_messages
+                                  ? html`<div class="chat-content__help">
+                                        <converse-chat-help
+                                            .model=${el.model}
+                                            .messages=${help_messages}
+                                            ?hidden=${!show_help_messages}
+                                            type="info"
+                                            chat_type="${CHATROOMS_TYPE}"
+                                        ></converse-chat-help>
+                                    </div>`
+                                  : ''}
+                          </div>
+                          <converse-chat-bottom-panel .model="${el.model}" class="bottom-panel">
+                          </converse-chat-bottom-panel>
+                      </div>
+                  `
+                : ''}
+        </div>
+    `;
+};

src/types/plugins/chatview/templates/chat.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit-html").TemplateResult<1>;
+declare function _default(el: import("../chat").default): import("lit-html").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=chat.d.ts.map