update: read event on chatbox focus

sib-chat.js

@@ -112,7 +112,8 @@ export const SibChat = {
         jid = jid.toLowerCase();
         this._converse.root = root;
 
-        const converse_el = [...document.querySelectorAll('sib-chat')]
+        // Get the current used sib-chat
+        const converse_el = Array.from(document.querySelectorAll('sib-chat'))
           .map(el => el.shadowRoot.getElementById('conversejs'))
           .filter(el => el)
           .pop();
@@ -140,7 +141,7 @@ export const SibChat = {
           this._converse.api.chats.open(jid);
         }
       }
-    })
+    });
     // Initialize change change plugin
     converse.plugins.add('conversejs-changechat', converse_sib.service.plugins.sibChat);
 
@@ -151,6 +152,24 @@ export const SibChat = {
       }
     });
 
+    // Initialize deferred resolution plugin
+    converse.plugins.add('conversejs-sib-focused', {
+      initialize() {
+        this._converse.api.listen.on('chatBoxFocused', function() {
+          // Get the currently used sib-chat & send read event of
+          const resource = Array.from(document.querySelectorAll('sib-chat'))
+            .filter(el => {return el.shadowRoot.getElementById('conversejs')})
+            .pop()
+            ._component.resource;
+          window.dispatchEvent(new CustomEvent('read', {
+            detail: {
+              resource: resource
+            }
+          }));
+        });
+      }
+    });
+
     let user = await document.querySelector('sib-auth').getUser();
     user = await store.get(user);
 
@@ -208,7 +227,7 @@ export const SibChat = {
         fileupload: false,
         toggle_occupants: false
       },
-      'whitelisted_plugins': ['conversejs-sib-connected', 'conversejs-changechat'],
+      'whitelisted_plugins': ['conversejs-sib-connected', 'conversejs-sib-focused', 'conversejs-changechat'],
     });
 
     converse_sib.loaded_deferred.resolve();