@microsoft/omnichannel-chat-components 1.1.12 → 1.1.13

package/lib/cjs/interfaces/IPostMessageOptions.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/services/BroadcastService.js

@@ -11,6 +11,12 @@ var _operators = require("rxjs/operators");
 
 var _broadcastChannel = require("broadcast-channel");
 
+var _utils = require("../common/utils");
+
+var _EventQueue = _interopRequireDefault(require("./EventQueue"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const newMessage = new _rxjs.Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,8 +26,11 @@ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-esli
 let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 let subChannel;
+let eventQueue;
 
 const BroadcastServiceInitialize = channelName => {
+  eventQueue = new _EventQueue.default(newMessage);
+
   if (broadcastServicePubList[channelName]) {
     pubChannel = broadcastServicePubList[channelName];
   } else {
@@ -41,18 +50,39 @@ const BroadcastServiceInitialize = channelName => {
 
   subChannel.onmessage = message => {
     newMessage.next(message);
+    eventQueue.popEvent(message);
+    eventQueue.stopIfEmpty();
   };
 };
 
 exports.BroadcastServiceInitialize = BroadcastServiceInitialize;
 const BroadcastService = {
   //broadcast a message
-  postMessage: message => {
+  postMessage: function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      retry: true
+    };
+
     /**
      * Omit copying methods to prevent 'DataCloneError' in older browsers when passing an object with functions
      * This exception occurs when an object can't be clone with the 'structured clone algorithm' (used by postMessage)
      */
-    pubChannel.postMessage(JSON.parse(JSON.stringify(message)));
+    try {
+      const messageCopy = JSON.parse(JSON.stringify(message));
+      const eventId = (0, _utils.uuidv4)();
+      const event = { ...messageCopy,
+        eventId
+      };
+      eventQueue.pushEvent(event);
+      pubChannel.postMessage(event);
+    } catch (error) {
+      console.error("Error in BroadcastService.postMessage:", error);
+    }
+
+    if (options !== null && options !== void 0 && options.retry) {
+      const queueTimeout = (options === null || options === void 0 ? void 0 : options.queueTimeout) || 500;
+      eventQueue.startQueue(queueTimeout);
+    }
   },
   getMessage: message => {
     return newMessage.pipe((0, _operators.filter)(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));
@@ -66,6 +96,7 @@ const BroadcastService = {
   disposeChannel: () => {
     pubChannel.close();
     subChannel.close();
+    eventQueue.dispose();
   }
 };
 exports.BroadcastService = BroadcastService;

package/lib/cjs/services/EventQueue.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class EventQueue {
+  constructor(newMessage) {
+    _defineProperty(this, "queueing", false);
+
+    _defineProperty(this, "channelEventQueue", void 0);
+
+    _defineProperty(this, "queueingId", void 0);
+
+    _defineProperty(this, "newMessage", void 0);
+
+    this.channelEventQueue = new Map();
+    this.newMessage = newMessage;
+  }
+
+  processEvents() {
+    this.channelEventQueue.forEach((event, eventId) => {
+      // Process entry based on insertion order
+      this.newMessage.next(event); // Post event directly instead of using pubChannel
+
+      this.channelEventQueue.delete(eventId); // Remove event from queue regardless of outcome
+    });
+  }
+
+  queueEvents() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.stopIfEmpty();
+
+    if (this.queueingId) {
+      // Queueing in progress
+      return;
+    }
+
+    if (this.queueing) {
+      this.queueingId = setTimeout(() => {
+        this.processEvents();
+        this.queueEvents(timeout);
+      }, timeout);
+    }
+  }
+
+  startQueue() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.queueing = true;
+    this.queueEvents(timeout);
+  }
+
+  stopIfEmpty() {
+    if (this.channelEventQueue.size === 0) {
+      if (this.queueingId) {
+        clearTimeout(this.queueingId);
+      }
+
+      this.queueing = false;
+      this.queueingId = undefined;
+    }
+  }
+
+  pushEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.set(event.eventId, event);
+    }
+  }
+
+  popEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.delete(event.eventId);
+    }
+  }
+
+  dispose() {
+    if (this.queueingId) {
+      clearTimeout(this.queueingId);
+      this.queueingId = undefined;
+    }
+
+    this.channelEventQueue.clear();
+  }
+
+}
+
+var _default = EventQueue;
+exports.default = _default;

package/lib/esm/interfaces/IPostMessageOptions.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/services/BroadcastService.js

@@ -1,6 +1,8 @@
 import { Subject } from "rxjs";
 import { filter } from "rxjs/operators";
 import { BroadcastChannel } from "broadcast-channel";
+import { uuidv4 } from "../common/utils";
+import EventQueue from "./EventQueue";
 const newMessage = new Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,7 +12,10 @@ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-esli
 let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 let subChannel;
+let eventQueue;
 export const BroadcastServiceInitialize = channelName => {
+  eventQueue = new EventQueue(newMessage);
+
   if (broadcastServicePubList[channelName]) {
     pubChannel = broadcastServicePubList[channelName];
   } else {
@@ -30,16 +35,37 @@ export const BroadcastServiceInitialize = channelName => {
 
   subChannel.onmessage = message => {
     newMessage.next(message);
+    eventQueue.popEvent(message);
+    eventQueue.stopIfEmpty();
   };
 };
 export const BroadcastService = {
   //broadcast a message
-  postMessage: message => {
+  postMessage: function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      retry: true
+    };
+
     /**
      * Omit copying methods to prevent 'DataCloneError' in older browsers when passing an object with functions
      * This exception occurs when an object can't be clone with the 'structured clone algorithm' (used by postMessage)
      */
-    pubChannel.postMessage(JSON.parse(JSON.stringify(message)));
+    try {
+      const messageCopy = JSON.parse(JSON.stringify(message));
+      const eventId = uuidv4();
+      const event = { ...messageCopy,
+        eventId
+      };
+      eventQueue.pushEvent(event);
+      pubChannel.postMessage(event);
+    } catch (error) {
+      console.error("Error in BroadcastService.postMessage:", error);
+    }
+
+    if (options !== null && options !== void 0 && options.retry) {
+      const queueTimeout = (options === null || options === void 0 ? void 0 : options.queueTimeout) || 500;
+      eventQueue.startQueue(queueTimeout);
+    }
   },
   getMessage: message => {
     return newMessage.pipe(filter(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));
@@ -53,5 +79,6 @@ export const BroadcastService = {
   disposeChannel: () => {
     pubChannel.close();
     subChannel.close();
+    eventQueue.dispose();
   }
 };

package/lib/esm/services/EventQueue.js

@@ -0,0 +1,83 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class EventQueue {
+  constructor(newMessage) {
+    _defineProperty(this, "queueing", false);
+
+    _defineProperty(this, "channelEventQueue", void 0);
+
+    _defineProperty(this, "queueingId", void 0);
+
+    _defineProperty(this, "newMessage", void 0);
+
+    this.channelEventQueue = new Map();
+    this.newMessage = newMessage;
+  }
+
+  processEvents() {
+    this.channelEventQueue.forEach((event, eventId) => {
+      // Process entry based on insertion order
+      this.newMessage.next(event); // Post event directly instead of using pubChannel
+
+      this.channelEventQueue.delete(eventId); // Remove event from queue regardless of outcome
+    });
+  }
+
+  queueEvents() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.stopIfEmpty();
+
+    if (this.queueingId) {
+      // Queueing in progress
+      return;
+    }
+
+    if (this.queueing) {
+      this.queueingId = setTimeout(() => {
+        this.processEvents();
+        this.queueEvents(timeout);
+      }, timeout);
+    }
+  }
+
+  startQueue() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.queueing = true;
+    this.queueEvents(timeout);
+  }
+
+  stopIfEmpty() {
+    if (this.channelEventQueue.size === 0) {
+      if (this.queueingId) {
+        clearTimeout(this.queueingId);
+      }
+
+      this.queueing = false;
+      this.queueingId = undefined;
+    }
+  }
+
+  pushEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.set(event.eventId, event);
+    }
+  }
+
+  popEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.delete(event.eventId);
+    }
+  }
+
+  dispose() {
+    if (this.queueingId) {
+      clearTimeout(this.queueingId);
+      this.queueingId = undefined;
+    }
+
+    this.channelEventQueue.clear();
+  }
+
+}
+
+export default EventQueue;

package/lib/types/interfaces/ICustomEvent.d.ts

@@ -4,4 +4,5 @@ export interface ICustomEvent {
     elementType?: ElementType | any;
     elementId?: string;
     payload?: any;
+    eventId?: string;
 }

package/lib/types/interfaces/IPostMessageOptions.d.ts

@@ -0,0 +1,4 @@
+export interface IPostMessageOptions {
+    retry?: boolean;
+    queueTimeout?: number;
+}

package/lib/types/services/BroadcastService.d.ts

@@ -1,8 +1,9 @@
 import { Subject } from "rxjs";
 import { ICustomEvent } from "../interfaces/ICustomEvent";
+import { IPostMessageOptions } from "../interfaces/IPostMessageOptions";
 export declare const BroadcastServiceInitialize: (channelName: string) => void;
 export declare const BroadcastService: {
-    postMessage: (message: ICustomEvent) => void;
+    postMessage: (message: ICustomEvent, options?: IPostMessageOptions) => void;
     getMessage: (message: ICustomEvent) => import("rxjs").Observable<ICustomEvent>;
     getMessageByEventName: (eventName: string) => import("rxjs").Observable<ICustomEvent>;
     getAnyMessage: () => Subject<ICustomEvent>;

package/lib/types/services/EventQueue.d.ts

@@ -0,0 +1,17 @@
+import { Subject } from "rxjs";
+import { ICustomEvent } from "../interfaces/ICustomEvent";
+declare class EventQueue {
+    private queueing;
+    private channelEventQueue;
+    private queueingId?;
+    private newMessage;
+    constructor(newMessage: Subject<ICustomEvent>);
+    processEvents(): void;
+    queueEvents(timeout?: number): void;
+    startQueue(timeout?: number): void;
+    stopIfEmpty(): void;
+    pushEvent(event: any): void;
+    popEvent(event: any): void;
+    dispose(): void;
+}
+export default EventQueue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-components",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "Microsoft Omnichannel Chat Components",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -32,8 +32,8 @@
     "@storybook/addon-storyshots": "^6.4.8",
     "@storybook/react": "^6.4.8",
     "@storybook/testing-react": "^1.2.1",
-    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^16.3.0",
     "@types/core-js": "^2.5.5",
     "@types/jest": "^27.0.2",