@trycourier/courier-ui-inbox 2.4.1 → 2.4.3

package/dist/index.mjs

@@ -436,12 +436,13 @@ class CourierInboxDataset {
     }
     const beforeQualifies = this.messageQualifiesForDataset(beforeMessage);
     if (beforeQualifies) {
-      this.totalUnreadCount += this.calculateUnreadChange(beforeMessage, afterMessage);
+      if (!beforeMessage.read) {
+        this.totalUnreadCount -= 1;
+      }
       this._datastoreListeners.forEach((listener) => {
-        var _a, _b, _c, _d, _e, _f;
-        (_b = (_a = listener.events).onMessageUpdate) == null ? void 0 : _b.call(_a, newMessage, index, this._id);
-        (_d = (_c = listener.events).onUnreadCountChange) == null ? void 0 : _d.call(_c, this.totalUnreadCount, this._id);
-        (_f = (_e = listener.events).onTotalUnreadCountChange) == null ? void 0 : _f.call(_e, CourierInboxDatastore.shared.totalUnreadCount);
+        var _a, _b, _c, _d;
+        (_b = (_a = listener.events).onUnreadCountChange) == null ? void 0 : _b.call(_a, this.totalUnreadCount, this._id);
+        (_d = (_c = listener.events).onTotalUnreadCountChange) == null ? void 0 : _d.call(_c, CourierInboxDatastore.shared.totalUnreadCount);
       });
     }
     return false;
@@ -623,6 +624,8 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
     __publicField(this, "_datasets", /* @__PURE__ */ new Map());
     __publicField(this, "_listeners", []);
     __publicField(this, "_removeMessageEventListener");
+    __publicField(this, "_pendingOpenMessageIds", /* @__PURE__ */ new Set());
+    __publicField(this, "_openBatchTimer", null);
     /**
      * Global message store is a map of Message ID to Message for all messages
      * that have been loaded.
@@ -794,24 +797,64 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
   }
   /**
    * Mark a message as opened.
+   *
+   * The local state is updated optimistically and the server call is
+   * batched: multiple opens arriving within a short window
+   * are collected and flushed as a single GraphQL request.
+   *
    * @param message - The message to mark as opened
    */
-  async openMessage({ message }) {
+  openMessage({ message }) {
     if (message.opened) {
       return;
     }
     const beforeMessage = this._globalMessages.get(message.messageId);
-    if (!beforeMessage) {
+    if (!beforeMessage || beforeMessage.opened) {
       return;
     }
-    await this.executeWithRollback(async () => {
-      var _a;
-      const afterMessage = copyMessage(beforeMessage);
-      afterMessage.opened = _CourierInboxDatastore.getISONow();
-      this._globalMessages.set(message.messageId, afterMessage);
-      this.updateDatasetsWithMessageChange(beforeMessage, afterMessage);
-      await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.open({ messageId: message.messageId }));
-    });
+    const afterMessage = copyMessage(beforeMessage);
+    afterMessage.opened = _CourierInboxDatastore.getISONow();
+    this._globalMessages.set(message.messageId, afterMessage);
+    this.updateDatasetsWithMessageChange(beforeMessage, afterMessage);
+    this._pendingOpenMessageIds.add(message.messageId);
+    this.scheduleBatchOpen();
+  }
+  scheduleBatchOpen() {
+    if (this._openBatchTimer !== null) {
+      clearTimeout(this._openBatchTimer);
+    }
+    this._openBatchTimer = setTimeout(() => {
+      this.flushBatchOpen();
+    }, _CourierInboxDatastore.OPEN_BATCH_DELAY_MS);
+  }
+  async flushBatchOpen() {
+    var _a, _b;
+    this._openBatchTimer = null;
+    const messageIds = Array.from(this._pendingOpenMessageIds);
+    this._pendingOpenMessageIds.clear();
+    if (messageIds.length === 0) return;
+    const maxSize = _CourierInboxDatastore.OPEN_BATCH_MAX_SIZE;
+    const chunks = [];
+    for (let i = 0; i < messageIds.length; i += maxSize) {
+      chunks.push(messageIds.slice(i, i + maxSize));
+    }
+    try {
+      await Promise.all(
+        chunks.map((chunk) => {
+          var _a2;
+          return (_a2 = Courier.shared.client) == null ? void 0 : _a2.inbox.batchOpen(chunk);
+        })
+      );
+    } catch (error) {
+      (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error(
+        `[${_CourierInboxDatastore.TAG}] Error batch opening messages:`,
+        error
+      );
+      this._listeners.forEach((listener) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = listener.events).onError) == null ? void 0 : _b2.call(_a2, error);
+      });
+    }
   }
   /**
    * Unarchive a message.
@@ -891,6 +934,11 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
           this.updateDatasetsWithMessageChange(beforeMessage, afterMessage);
         }
       }
+      for (const dataset of this._datasets.values()) {
+        if (!dataset.getFilter().archived) {
+          dataset.setUnreadCount(0);
+        }
+      }
       await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.archiveAll());
     });
   }
@@ -909,6 +957,9 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
           this.updateDatasetsWithMessageChange(beforeMessage, afterMessage);
         }
       }
+      for (const dataset of this._datasets.values()) {
+        dataset.setUnreadCount(0);
+      }
       await ((_a = Courier.shared.client) == null ? void 0 : _a.inbox.readAll());
     });
   }
@@ -1100,6 +1151,17 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
         this.updateDatasetsWithMessageChange(beforeMessage, afterMessage);
       }
     }
+    if (event === InboxMessageEvent.MarkAllRead) {
+      for (const dataset of this._datasets.values()) {
+        dataset.setUnreadCount(0);
+      }
+    } else if (event === InboxMessageEvent.ArchiveAll) {
+      for (const dataset of this._datasets.values()) {
+        if (!dataset.getFilter().archived) {
+          dataset.setUnreadCount(0);
+        }
+      }
+    }
   }
   /**
    * Update a single message across all datasets from an InboxMessageEvent.
@@ -1230,6 +1292,8 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
   }
 };
 __publicField(_CourierInboxDatastore, "TAG", "CourierInboxDatastore");
+__publicField(_CourierInboxDatastore, "OPEN_BATCH_DELAY_MS", 100);
+__publicField(_CourierInboxDatastore, "OPEN_BATCH_MAX_SIZE", 50);
 __publicField(_CourierInboxDatastore, "instance");
 let CourierInboxDatastore = _CourierInboxDatastore;
 class CourierInboxListItem extends CourierBaseElement {
@@ -1979,7 +2043,7 @@ function archiveMessage(message) {
   return CourierInboxDatastore.shared.archiveMessage({ message });
 }
 function openMessage(message) {
-  return CourierInboxDatastore.shared.openMessage({ message });
+  CourierInboxDatastore.shared.openMessage({ message });
 }
 function defaultFeeds() {
   return [
@@ -2330,11 +2394,8 @@ class CourierInboxList extends CourierBaseElement {
       list.appendChild(paginationItem);
     }
   }
-  async openVisibleMessage(message) {
-    try {
-      await openMessage(message);
-    } catch (error) {
-    }
+  openVisibleMessage(message) {
+    openMessage(message);
   }
   // Factories
   setLoadingStateFactory(factory) {
@@ -4679,7 +4740,7 @@ class CourierInbox extends CourierBaseElement {
     this._themeManager.setMode(mode);
   }
   static get observedAttributes() {
-    return ["height", "light-theme", "dark-theme", "mode", "message-click", "message-action-click", "message-long-press"];
+    return ["height", "light-theme", "dark-theme", "mode", "feeds", "message-click", "message-action-click", "message-long-press"];
   }
   resetInitialFeedAndTab() {
     if (!this._feeds.length) {
@@ -4843,6 +4904,7 @@ class CourierInbox extends CourierBaseElement {
       },
       onMessageClick: (message, index) => {
         var _a2;
+        CourierInboxDatastore.shared.openMessage({ message });
         CourierInboxDatastore.shared.clickMessage({ message });
         this.dispatchEvent(new CustomEvent("message-click", {
           detail: { message, index },
@@ -5150,7 +5212,7 @@ class CourierInbox extends CourierBaseElement {
     });
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (oldValue === newValue) return;
     switch (name) {
       case "height":
@@ -5190,6 +5252,20 @@ class CourierInbox extends CourierBaseElement {
           this._onMessageLongPress = void 0;
         }
         break;
+      case "feeds":
+        if (newValue) {
+          try {
+            const feeds = JSON.parse(newValue);
+            if (this._datastoreListener) {
+              this.setFeeds(feeds);
+            } else {
+              this._feeds = feeds;
+            }
+          } catch (error) {
+            (_h = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _h.error("Failed to parse feeds attribute:", error);
+          }
+        }
+        break;
       case "light-theme":
         if (newValue) {
           this.setLightTheme(JSON.parse(newValue));
@@ -5312,6 +5388,8 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     __publicField(this, "_datastoreListener");
     // State
     __publicField(this, "_totalUnreadCount", 0);
+    // Feeds (stored from attribute before inner inbox is created)
+    __publicField(this, "_feeds");
     // Factories
     __publicField(this, "_popupMenuButtonFactory");
     __publicField(this, "handleOutsideClick", (event) => {
@@ -5360,7 +5438,7 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._themeManager.setMode(mode);
   }
   static get observedAttributes() {
-    return ["popup-alignment", "message-click", "message-action-click", "message-long-press", "popup-width", "popup-height", "top", "right", "bottom", "left", "light-theme", "dark-theme", "mode"];
+    return ["popup-alignment", "feeds", "message-click", "message-action-click", "message-long-press", "popup-width", "popup-height", "top", "right", "bottom", "left", "light-theme", "dark-theme", "mode"];
   }
   onComponentMounted() {
     this.readInitialThemeAttributes();
@@ -5370,6 +5448,9 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     this._popup.className = "popup";
     this._inbox = new CourierInbox(this._themeManager);
     this._inbox.setAttribute("height", "100%");
+    if (this._feeds) {
+      this._inbox.setAttribute("feeds", JSON.stringify(this._feeds));
+    }
     this.refreshTheme();
     this.appendChild(this._triggerButton);
     this.appendChild(this._popup);
@@ -5458,6 +5539,7 @@ class CourierInboxPopupMenu extends CourierBaseElement {
     `;
   }
   attributeChangedCallback(name, _, newValue) {
+    var _a, _b;
     switch (name) {
       case "popup-alignment":
         if (this.isValidPosition(newValue)) {
@@ -5489,6 +5571,19 @@ class CourierInboxPopupMenu extends CourierBaseElement {
         this._left = newValue;
         this.updatePopupPosition();
         break;
+      case "feeds":
+        if (newValue) {
+          try {
+            const feeds = JSON.parse(newValue);
+            this._feeds = feeds;
+            if (this._inbox) {
+              this._inbox.setFeeds(feeds);
+            }
+          } catch (error) {
+            (_b = (_a = Courier.shared.client) == null ? void 0 : _a.options.logger) == null ? void 0 : _b.error("Failed to parse feeds attribute:", error);
+          }
+        }
+        break;
       case "light-theme":
         if (newValue) {
           this.setLightTheme(JSON.parse(newValue));
@@ -5930,7 +6025,7 @@ class CourierInboxDatastoreEvents {
   }
 }
 Courier.shared.courierUserAgentName = "courier-ui-inbox";
-Courier.shared.courierUserAgentVersion = "2.4.1";
+Courier.shared.courierUserAgentVersion = "2.4.3";
 export {
   Courier2 as Courier,
   CourierInbox,