@microsoft/omnichannel-chat-widget 0.1.0-main.dbc1afa → 0.1.0-main.df02f14

package/README.md

@@ -11,6 +11,8 @@
 1. [Installation](#installation)
 1. [Example Usage](#example-usage)
 1. [Components](#components)
+1. [Common Scenarios](#common-scenarios)
+    - [Disable Bot Magic Code](#disable-bot-magic-code)
 1. [See Also](#see-also)
 
 ## Introduction
@@ -218,6 +220,36 @@ const customizedFooterProp: IFooterProps = {
 
 > :pushpin: Note that [WebChat hooks](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/HOOKS.md) can also be used in any custom components.
 
+## Common Scenarios
+
+### Disable Bot Magic Code
+
+Configuration to disable the default behaviour of having to type the magic code in the conversation to complete the sign-in proccess with a bot. Instead, the magic code will be sent to the bot behind the scenes.
+
+1. Add [MagicCodeForwarder.html](sample/MagicCodeForwarder.html) in the same location as the chat widget
+
+2. Add `botMagicCode` configuration to disable default magic code feature
+
+> :exclamation: `fwdUrl` **MUST** have the same `origin` as the chat widget URL
+
+```js
+const liveChatWidgetProps = {
+    chatSDK: chatSDK, // mandatory
+    chatConfig: chatConfig, // mandatory
+    webChatContainerProps: {
+        botMagicCode: {
+            disabled: true, 
+            fwdUrl: 'http://localhost:8000/sample/MagicCodeForwarder.html'
+        }
+    },    
+};
+
+ReactDOM.render(
+    <LiveChatWidget {...liveChatWidgetProps}/>,
+    document.getElementById("my-container")
+);
+```
+
 ## See Also
 
 [Telemetry](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Telemetry.md)\

package/lib/cjs/common/Constants.js

@@ -13,6 +13,10 @@ class Constants {}
 
 exports.Constants = Constants;
 
+_defineProperty(Constants, "magicCodeBroadcastChannel", "MagicCodeChannel");
+
+_defineProperty(Constants, "magicCodeResponseBroadcastChannel", "MagicCodeResponseChannel");
+
 _defineProperty(Constants, "systemMessageTag", "system");
 
 _defineProperty(Constants, "userMessageTag", "user");
@@ -79,6 +83,14 @@ _defineProperty(Constants, "averageWaitTimeMessageTag", "averagewaittime");
 
 _defineProperty(Constants, "message", "message");
 
+_defineProperty(Constants, "hiddenTag", "Hidden");
+
+_defineProperty(Constants, "prefixTimestampTag", "ServerMessageTimestamp_");
+
+_defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
+
+_defineProperty(Constants, "publicMessageTag", "public");
+
 _defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
 
 _defineProperty(Constants, "maxUploadFileSize", "500000");
@@ -155,6 +167,10 @@ _defineProperty(Constants, "internetConnectionTestUrlText", "Omnichannel Connect
 
 _defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChanged");
 
+_defineProperty(Constants, "PostChatLoadingDurationInMs", 2000);
+
+_defineProperty(Constants, "BrowserUnloadConfirmationMessage", "Do you want to leave chat?");
+
 const Regex = (_class = class Regex {}, _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
 exports.Regex = Regex;
 

package/lib/cjs/common/telemetry/TelemetryConstants.js

@@ -37,19 +37,29 @@ exports.BroadcastEvent = BroadcastEvent;
 
 (function (BroadcastEvent) {
   BroadcastEvent["LoadPostChatSurvey"] = "LoadPostChatSurvey";
-  BroadcastEvent["EndChat"] = "ChatEnded";
+  BroadcastEvent["ChatEnded"] = "ChatEnded";
   BroadcastEvent["NewMessageNotification"] = "NewMessageNotification";
   BroadcastEvent["UnreadMessageCount"] = "UnreadMessageCount";
+  BroadcastEvent["StartProactiveChat"] = "StartProactiveChat";
   BroadcastEvent["ProactiveChatStartChat"] = "ProactiveChatStartChat";
   BroadcastEvent["ProactiveChatStartPopoutChat"] = "ProactiveChatStartPopoutChat";
+  BroadcastEvent["ProactiveChatIsInPopoutMode"] = "ProactiveChatIsInPopoutMode";
+  BroadcastEvent["ResetProactiveChatParams"] = "ResetProactiveChatParams";
   BroadcastEvent["InvalidAdaptiveCardFormat"] = "InvalidAdaptiveCardFormat";
   BroadcastEvent["NewMessageSent"] = "NewMessageSent";
   BroadcastEvent["NewMessageReceived"] = "NewMessageReceived";
   BroadcastEvent["RedirectPageRequest"] = "RedirectPageRequest";
+  BroadcastEvent["StartChat"] = "StartChat";
   BroadcastEvent["StartChatSkippingChatButtonRendering"] = "StartChatSkippingChatButtonRendering";
   BroadcastEvent["StartUnauthenticatedReconnectChat"] = "StartUnauthenticatedReconnectChat";
+  BroadcastEvent["InitiateEndChat"] = "InitiateEndChat";
   BroadcastEvent["SetCustomContext"] = "SetCustomContext";
   BroadcastEvent["ChatRetrievedFromCache"] = "ChatRetrievedFromCache";
+  BroadcastEvent["MaximizeChat"] = "MaximizeChat";
+  BroadcastEvent["ChatInitiated"] = "ChatInitiated";
+  BroadcastEvent["CloseChat"] = "CloseChat";
+  BroadcastEvent["InitiateEndChatOnBrowserUnload"] = "InitiateEndChatOnBrowserUnload";
+  BroadcastEvent["ClosePopoutWindow"] = "ClosePopoutWindow";
 })(BroadcastEvent || (exports.BroadcastEvent = BroadcastEvent = {}));
 
 let TelemetryEvent;
@@ -102,8 +112,9 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["PrechatSubmitted"] = "PrechatSubmitted";
   TelemetryEvent["StartChatSDKCall"] = "StartChatCall";
   TelemetryEvent["StartChatEventRecevied"] = "StartChatEventReceived";
-  TelemetryEvent["EndChatSDKCall"] = "EndChatCall";
+  TelemetryEvent["EndChatSDKCall"] = "EndChatSDKCall";
   TelemetryEvent["EndChatEventReceived"] = "EndChatEventReceived";
+  TelemetryEvent["WindowClosed"] = "WindowClosed";
   TelemetryEvent["OnNewMessageFailed"] = "OnNewMessageFailed";
   TelemetryEvent["OnNewMessageAudioNotificationFailed"] = "OnNewMessageAudioNotificationFailed";
   TelemetryEvent["DownloadTranscriptResponseNullOrUndefined"] = "DownloadTranscriptResponseNullOrUndefined";
@@ -128,6 +139,12 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["EmailTranscriptButtonClicked"] = "EmailTranscriptButtonClicked";
   TelemetryEvent["EmailTranscriptCancelButtonClicked"] = "EmailTranscriptCancelButtonClicked";
   TelemetryEvent["AudioToggleButtonClicked"] = "AudioToggleButtonClicked";
+  TelemetryEvent["SuppressBotMagicCodeSucceeded"] = "SuppressBotMagicCodeSucceeded";
+  TelemetryEvent["SuppressBotMagicCodeFailed"] = "SuppressBotMagicCodeFailed";
+  TelemetryEvent["GetConversationDetailsException"] = "GetConversationDetailsException";
+  TelemetryEvent["BrowserUnloadEventStarted"] = "BrowserUnloadEventStarted";
+  TelemetryEvent["GetAuthTokenCalled"] = "GetAuthTokenCalled";
+  TelemetryEvent["ReceivedNullOrEmptyToken"] = "ReceivedNullOrEmptyToken";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";
@@ -199,6 +216,7 @@ class TelemetryConstants {
       case TelemetryEvent.MessageSent:
       case TelemetryEvent.MessageReceived:
       case TelemetryEvent.CustomContextReceived:
+      case TelemetryEvent.BrowserUnloadEventStarted:
         return ScenarioType.ACTIONS;
 
       case TelemetryEvent.StartChatSDKCall:

package/lib/cjs/common/utils.js

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = void 0;
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.getBroadcastChannelName = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
 
 var _Constants = require("./Constants");
 
+var _DataStoreManager = require("./contextDataStore/DataStoreManager");
+
 var _KeyCodes = require("./KeyCodes");
 
 var _TelemetryConstants = require("./telemetry/TelemetryConstants");
 
+var _md5Typescript = require("md5-typescript");
+
 const getElementBySelector = selector => {
   let element;
 
@@ -352,14 +356,69 @@ const getDomain = hostValue => {
 
 exports.getDomain = getDomain;
 
-const getWidgetCacheId = (orgId, widgetId) => {
-  return `${_Constants.Constants.ChatWidgetStateChangedPrefix}_${orgId}_${widgetId}`;
+const getWidgetCacheId = (orgId, widgetId, widgetInstanceId) => {
+  const widgetCacheId = `${widgetInstanceId}_${orgId}_${widgetId}`;
+  return _md5Typescript.Md5.init(widgetCacheId);
 };
 
 exports.getWidgetCacheId = getWidgetCacheId;
 
-const getWidgetEndChatEventName = (orgId, widgetId) => {
-  return `${_TelemetryConstants.BroadcastEvent.EndChat}_${orgId}_${widgetId}`;
+const getWidgetEndChatEventName = (orgId, widgetId, widgetInstanceId) => {
+  if (!isNullOrEmptyString(widgetInstanceId)) {
+    return `${_TelemetryConstants.BroadcastEvent.ChatEnded}_${widgetInstanceId}_${orgId}_${widgetId}`;
+  }
+
+  return `${_TelemetryConstants.BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.getWidgetEndChatEventName = getWidgetEndChatEventName;
+
+const getStateFromCache = (orgId, widgetId, widgetInstanceId) => {
+  // Getting updated state from cache
+  try {
+    if (_DataStoreManager.DataStoreManager.clientDataStore) {
+      var _DataStoreManager$cli;
+
+      const widgetStateEventName = getWidgetCacheId(orgId, widgetId, widgetInstanceId);
+      const widgetStateFromCache = (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.getData(widgetStateEventName, "localStorage");
+      const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
+      return persistedState;
+    } else {
+      return null;
+    }
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.getStateFromCache = getStateFromCache;
+
+const isUndefinedOrEmpty = object => {
+  if (object) {
+    if (Object.keys(object).length === 0) {
+      return true;
+    }
+
+    return false;
+  } else {
+    return true;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.isUndefinedOrEmpty = isUndefinedOrEmpty;
+
+const addDelayInMs = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+exports.addDelayInMs = addDelayInMs;
+
+const getBroadcastChannelName = (widgetId, widgetInstanceId) => {
+  return widgetInstanceId && !isNullOrEmptyString(widgetInstanceId) ? `${widgetInstanceId}_${widgetId}` : widgetId;
 };
 
-exports.getWidgetEndChatEventName = getWidgetEndChatEventName;
+exports.getBroadcastChannelName = getBroadcastChannelName;

package/lib/cjs/components/chatbuttonstateful/ChatButtonStateful.js

@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const ChatButtonStateful = props => {
-  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP;
+  var _state$domainStates$l, _state$domainStates$l2, _buttonProps$controlP, _props$buttonProps, _props$buttonProps$co, _props$buttonProps2, _props$buttonProps2$c, _props$buttonProps3, _props$buttonProps3$c;
 
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const {
@@ -44,6 +44,7 @@ const ChatButtonStateful = props => {
   } = props; //Setting OutOfOperatingHours Flag
 
   const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
+  const proactiveChatInNewWindow = (0, _react.useRef)(state.appStates.proactiveChatStates.proactiveChatInNewWindow);
   const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeChatButtonStyleProps.defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
   const controlProps = {
     id: "oc-lcw-chat-button",
@@ -51,13 +52,19 @@ const ChatButtonStateful = props => {
     titleText: "Let's Chat!",
     subtitleText: "We're online.",
     hideNotificationBubble: (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true || state.appStates.isMinimized === false,
-    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? _Constants.Constants.maximumUnreadMessageCount.toString() + "+" : state.appStates.unreadMessageCount.toString() : "0",
+    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? (_props$buttonProps = props.buttonProps) === null || _props$buttonProps === void 0 ? void 0 : (_props$buttonProps$co = _props$buttonProps.controlProps) === null || _props$buttonProps$co === void 0 ? void 0 : _props$buttonProps$co.largeUnreadMessageString : state.appStates.unreadMessageCount.toString() : "0",
     onClick: async () => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonClicked
       });
 
-      if (state.appStates.isMinimized) {
+      if (proactiveChatInNewWindow.current) {
+        const proactiveChatIsInPopoutModeEvent = {
+          eventName: _TelemetryConstants.BroadcastEvent.ProactiveChatIsInPopoutMode
+        };
+
+        _omnichannelChatComponents.BroadcastService.postMessage(proactiveChatIsInPopoutModeEvent);
+      } else if (state.appStates.isMinimized) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -66,6 +73,7 @@ const ChatButtonStateful = props => {
         await startChat();
       }
     },
+    unreadMessageString: (_props$buttonProps2 = props.buttonProps) === null || _props$buttonProps2 === void 0 ? void 0 : (_props$buttonProps2$c = _props$buttonProps2.controlProps) === null || _props$buttonProps2$c === void 0 ? void 0 : _props$buttonProps2$c.unreadMessageString,
     ...(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.controlProps)
   };
   const outOfOfficeControlProps = {
@@ -74,6 +82,10 @@ const ChatButtonStateful = props => {
     titleText: "We're Offline",
     subtitleText: "No agents available",
     onClick: async () => {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonClicked
+      });
+
       if (state.appStates.isMinimized) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
@@ -86,6 +98,7 @@ const ChatButtonStateful = props => {
         });
       }
     },
+    unreadMessageString: (_props$buttonProps3 = props.buttonProps) === null || _props$buttonProps3 === void 0 ? void 0 : (_props$buttonProps3$c = _props$buttonProps3.controlProps) === null || _props$buttonProps3$c === void 0 ? void 0 : _props$buttonProps3$c.unreadMessageString,
     ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
   };
   (0, _react.useEffect)(() => {
@@ -107,6 +120,9 @@ const ChatButtonStateful = props => {
       });
     }
   }, []);
+  (0, _react.useEffect)(() => {
+    proactiveChatInNewWindow.current = state.appStates.proactiveChatStates.proactiveChatInNewWindow;
+  }, [state.appStates.proactiveChatStates.proactiveChatInNewWindow]);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
     componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
     controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,

package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -41,7 +41,6 @@ const ConfirmationPaneStateful = props => {
   const {
     prepareEndChat
   } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const [adapter] = (0, _useChatAdapterStore.default)();
   const controlProps = {

package/lib/cjs/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js

@@ -116,8 +116,17 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
     let fileAttachmentName = _Constants.TranscriptConstants.DefaultFileAttachmentName;
     let dialogColor = _Constants.TranscriptConstants.CustomerDialogColor;
     let fontColor = _Constants.TranscriptConstants.CustomerFontColor;
+    const isSystemMessage = value.tags && value.tags.toLowerCase().indexOf(_Constants.Constants.systemMessageTag) !== -1;
+    const isControlMessage = value.isControlMessage && value.isControlMessage === true;
 
-    if (value.tags && value.tags.toLowerCase().indexOf(_Constants.Constants.systemMessageTag) !== -1 || value.isControlMessage && value.isControlMessage === true || value.contentType && value.contentType.toLowerCase() === _Constants.TranscriptConstants.AdaptiveCardType || value.deliveryMode && value.deliveryMode.toLowerCase() === _Constants.TranscriptConstants.InternalMode) {
+    const isAdaptiveCard = value.contentType && value.contentType.toLowerCase() === _Constants.TranscriptConstants.AdaptiveCardType;
+
+    const isInternalMessage = value.deliveryMode && value.deliveryMode.toLowerCase() === _Constants.TranscriptConstants.InternalMode;
+
+    const isHiddenMessage = value.tags && value.tags.toLowerCase().indexOf(_Constants.Constants.hiddenTag.toLowerCase()) !== -1;
+    const shouldIgnoreMessage = isSystemMessage || isControlMessage || isAdaptiveCard || isInternalMessage || isHiddenMessage;
+
+    if (shouldIgnoreMessage) {
       return;
     } else if (value.from) {
       if (value.from.application) {

package/lib/cjs/components/headerstateful/HeaderStateful.js

@@ -72,7 +72,8 @@ const HeaderStateful = props => {
       } else {
         const skipEndChatSDK = true;
         const skipCloseChat = false;
-        await endChat(adapter, skipEndChatSDK, skipCloseChat);
+        const postMessageToOtherTabs = true;
+        await endChat(adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTabs);
       }
 
       dispatch({
@@ -81,8 +82,8 @@ const HeaderStateful = props => {
       });
     },
     ...(headerProps === null || headerProps === void 0 ? void 0 : headerProps.controlProps),
-    hideTitle: state.appStates.conversationState === _ConversationState.ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP = headerProps.controlProps) === null || _headerProps$controlP === void 0 ? void 0 : _headerProps$controlP.hideTitle),
-    hideIcon: state.appStates.conversationState === _ConversationState.ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP2 = headerProps.controlProps) === null || _headerProps$controlP2 === void 0 ? void 0 : _headerProps$controlP2.hideIcon),
+    hideTitle: state.appStates.conversationState === _ConversationState.ConversationState.Loading || state.appStates.conversationState === _ConversationState.ConversationState.PostchatLoading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP = headerProps.controlProps) === null || _headerProps$controlP === void 0 ? void 0 : _headerProps$controlP.hideTitle),
+    hideIcon: state.appStates.conversationState === _ConversationState.ConversationState.Loading || state.appStates.conversationState === _ConversationState.ConversationState.PostchatLoading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP2 = headerProps.controlProps) === null || _headerProps$controlP2 === void 0 ? void 0 : _headerProps$controlP2.hideIcon),
     hideCloseButton: state.appStates.conversationState === _ConversationState.ConversationState.Loading || state.appStates.conversationState === _ConversationState.ConversationState.Prechat || state.appStates.conversationState === _ConversationState.ConversationState.ReconnectChat || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP3 = headerProps.controlProps) === null || _headerProps$controlP3 === void 0 ? void 0 : _headerProps$controlP3.hideCloseButton)
   };
   const outOfOfficeControlProps = {

package/lib/cjs/components/livechatwidget/common/ActivityStreamHandler.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActivityStreamHandler = void 0;
+
+var _Deferred = require("./Deferred");
+
+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 ActivityStreamHandler {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  /**
+   * Use of a deferred pattern, to hold the execution of the activity.
+   * 
+   * */
+  static cork() {
+    ActivityStreamHandler.restoreDeferred = new _Deferred.Deferred();
+    ActivityStreamHandler.restorePromise = ActivityStreamHandler.restoreDeferred.promise;
+  }
+  /**
+   * Resolve the promise, releasing it to continue with the execution of the activity.
+   * 
+   * */
+
+
+  static uncork() {
+    ActivityStreamHandler.restoreDeferred.resolve();
+  }
+
+}
+
+exports.ActivityStreamHandler = ActivityStreamHandler;
+
+_defineProperty(ActivityStreamHandler, "restoreDeferred", {
+  resolve: () => {
+    return "initialState";
+  }
+});
+
+_defineProperty(ActivityStreamHandler, "restorePromise", void 0);

package/lib/cjs/components/livechatwidget/common/ActivitySubscriber/DefaultActivitySubscriber.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DefaultActivitySubscriber = 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 DefaultActivitySubscriber {
+  constructor() {
+    _defineProperty(this, "observer", void 0);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async next(activity) {
+    this.observer.next(activity);
+    return false;
+  }
+
+}
+
+exports.DefaultActivitySubscriber = DefaultActivitySubscriber;

package/lib/cjs/components/livechatwidget/common/ActivitySubscriber/IActivitySubscriber.js

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

package/lib/cjs/components/livechatwidget/common/ActivitySubscriber/PauseActivitySubscriber.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PauseActivitySubscriber = void 0;
+
+var _ActivityStreamHandler = require("../ActivityStreamHandler");
+
+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 PauseActivitySubscriber {
+  constructor() {
+    _defineProperty(this, "observer", void 0);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async apply(activity) {
+    await _ActivityStreamHandler.ActivityStreamHandler.restorePromise;
+    return activity;
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+
+
+  applicable(activity) {
+    return true;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  async next(activity) {
+    if (this.applicable(activity)) {
+      return await this.apply(activity);
+    }
+
+    return activity;
+  }
+
+}
+
+exports.PauseActivitySubscriber = PauseActivitySubscriber;

package/lib/cjs/components/livechatwidget/common/ChatAdapterShim.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatAdapterShim = void 0;
+
+var _DefaultActivitySubscriber = require("./ActivitySubscriber/DefaultActivitySubscriber");
+
+var _shareObservable = require("./shareObservable");
+
+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 ChatAdapterShim {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(chatAdapter) {
+    _defineProperty(this, "chatAdapter", void 0);
+
+    _defineProperty(this, "activityObserver", void 0);
+
+    _defineProperty(this, "subscribers", void 0);
+
+    this.subscribers = [];
+    this.chatAdapter = { ...chatAdapter,
+      activity$: (0, _shareObservable.shareObservable)( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      new window.Observable(observer => {
+        this.activityObserver = observer; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+        const abortController = new window.AbortController();
+
+        (async () => {
+          try {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            for await (let activity of chatAdapter.activities({
+              signal: abortController.signal
+            })) {
+              for (const subscriber of [...this.subscribers, new _DefaultActivitySubscriber.DefaultActivitySubscriber()]) {
+                subscriber.observer = this.activityObserver;
+                activity = await subscriber.next(activity);
+
+                if (!activity) {
+                  break;
+                }
+              }
+            }
+
+            observer.complete();
+          } catch (error) {
+            observer.error(error);
+          }
+        })();
+
+        return () => {
+          abortController.abort();
+        };
+      }))
+    };
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  addSubscriber(subscriber) {
+    this.subscribers.push(subscriber);
+  }
+
+}
+
+exports.ChatAdapterShim = ChatAdapterShim;

package/lib/cjs/components/livechatwidget/common/Deferred.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Deferred = 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 Deferred {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor() {
+    _defineProperty(this, "_promise", void 0);
+
+    _defineProperty(this, "_resolve", void 0);
+
+    _defineProperty(this, "_reject", () => {
+      return;
+    });
+
+    _defineProperty(this, "resolve", value => {
+      this._resolve(value);
+    });
+
+    _defineProperty(this, "reject", value => {
+      this._reject(value);
+    });
+
+    this._promise = new Promise((resolve, reject) => {
+      this._resolve = resolve;
+      this._reject = reject;
+    });
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  get promise() {
+    return this._promise;
+  }
+
+}
+
+exports.Deferred = Deferred;

package/lib/cjs/components/livechatwidget/common/createAdapter.js

@@ -13,6 +13,10 @@ var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcont
 
 var _defaultMiddlewareLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts");
 
+var _ChatAdapterShim = require("./ChatAdapterShim");
+
+var _PauseActivitySubscriber = require("./ActivitySubscriber/PauseActivitySubscriber");
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createAdapter = async chatSDK => {
   const chatAdapterOptionalParams = {
@@ -34,7 +38,15 @@ const createAdapter = async chatSDK => {
       }
     }
   };
-  return await chatSDK.createChatAdapter(chatAdapterOptionalParams);
+  let adapter = await chatSDK.createChatAdapter(chatAdapterOptionalParams); //so far, there is no need to convert to the shim adapter when using visual tests
+
+  if (chatSDK.isMockModeOn !== true) {
+    adapter = new _ChatAdapterShim.ChatAdapterShim(adapter);
+    adapter.addSubscriber(new _PauseActivitySubscriber.PauseActivitySubscriber());
+    return adapter.chatAdapter;
+  }
+
+  return adapter;
 };
 
 exports.createAdapter = createAdapter;