Search user messages WIP (#145)

conversejs/custom/plugins/mam-search/templates/muc-mam-search-app.js

@@ -19,22 +19,19 @@ function tplContent (el, mucModel, occupantModel) {
         `
         : ''
     }
+    <hr>
     ${
       el.results
-        ? repeat(el.results, (message) => message.id, message => tplMessage(message))
+        ? repeat(el.results, (message) => message.id, message => {
+            return html`<livechat-converse-muc-mam-search-message
+              .message=${message} .mucModel=${mucModel} .searchOccupantModel=${occupantModel}
+            ></livechat-converse-muc-mam-search-message>`
+          })
         : html`<livechat-spinner></livechat-spinner>`
     }
   `
 }
 
-function tplMessage (model) {
-  return html`
-  <converse-chat-message
-    jid="${this.model.get('jid')}"
-    mid="${model.get('id')}"
-  ></converse-chat-message>`
-}
-
 export function tplMamSearchApp (el, mucModel, occupantModel) {
   if (!mucModel) {
     // should not happen

conversejs/custom/plugins/mam-search/templates/muc-mam-search-message.js

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { html } from 'lit'
+
+/**
+ * Renders the message as a search result.
+ * @param el The message element
+ * @param mucModel The MUC model
+ * @param searchOccupantModel The model of the occupant for which we are searching
+ * @param message The message (warning: this is not a model)
+ * @returns TemplateResult (or equivalent)
+ */
+export function tplMucMamSearchMessage (el, mucModel, searchOccupantModel, message) {
+  const occupant = el.getMessageOccupant()
+  return html`
+    ${
+      occupant
+        ? html`
+          <livechat-converse-muc-mam-search-occupant
+            .model=${occupant}
+          ></livechat-converse-muc-mam-search-occupant>`
+        : ''
+    }
+    <converse-rich-text
+        render_styling
+        text=${message.body}>
+    </converse-rich-text>
+    <div class="livechat-message-date">${el.getDateTime()}</div>`
+}