@microsoft/omnichannel-chat-widget 1.4.0 → 1.4.1-main.2575376

package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js

@@ -6,9 +6,9 @@ import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveW
 import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
-import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLocaleDirection, getStateFromCache, getWidgetCacheIdfromProps, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty, newGuid } from "../../../common/utils";
+import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLocaleDirection, getStateFromCache, getWidgetCacheIdfromProps, getWidgetEndChatEventName, isNullOrEmptyString, isNullOrUndefined, isUndefinedOrEmpty } from "../../../common/utils";
 import { defaultClientDataStoreProvider, isCookieAllowed } from "../../../common/storage/default/defaultClientDataStoreProvider";
-import { endChat, prepareEndChat } from "../common/endChat";
+import { endChat, endChatStateCleanUp, prepareEndChat } from "../common/endChat";
 import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "../common/reconnectChatHelper";
 import { shouldShowCallingContainer, shouldShowChatButton, shouldShowConfirmationPane, shouldShowEmailTranscriptPane, shouldShowHeader, shouldShowLoadingPane, shouldShowOutOfOfficeHoursPane, shouldShowPostChatLoadingPane, shouldShowPostChatSurveyPane, shouldShowPreChatSurveyPane, shouldShowProactiveChatPane, shouldShowReconnectChatPane, shouldShowWebChatContainer } from "../../../controller/componentController";
 import { ActivityStreamHandler } from "../common/ActivityStreamHandler";
@@ -30,7 +30,7 @@ import PreChatSurveyPaneStateful from "../../prechatsurveypanestateful/PreChatSu
 import ProactiveChatPaneStateful from "../../proactivechatpanestateful/ProactiveChatPaneStateful";
 import ReconnectChatPaneStateful from "../../reconnectchatpanestateful/ReconnectChatPaneStateful";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
+import { TelemetryManager, TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import WebChatContainerStateful from "../../webchatcontainerstateful/WebChatContainerStateful";
 import createDownloadTranscriptProps from "../common/createDownloadTranscriptProps";
 import { createFooter } from "../common/createFooter";
@@ -51,8 +51,9 @@ import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useChatSDKStore from "../../../hooks/useChatSDKStore";
 import { defaultAdaptiveCardStyles } from "../../webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles";
+import { uuidv4 } from "@microsoft/omnichannel-chat-sdk";
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$controlProps11, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$webChatContain10, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$contro10, _livechatProps$compon8, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$compon11, _livechatProps$compon12;
+  var _props$webChatContain, _props$styleProps, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$webChatContain10, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$contro10, _livechatProps$compon8, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$compon11, _livechatProps$compon12;
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useChatAdapterStore();
@@ -76,17 +77,20 @@ export const LiveChatWidgetStateful = props => {
 
   //Scrollbar styles
   const scrollbarProps = Object.assign({}, defaultScrollBarProps, props === null || props === void 0 ? void 0 : props.scrollBarProps);
-  const broadcastServiceChannelName = getBroadcastChannelName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.widgetId, ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.widgetInstanceId) ?? "");
-  BroadcastServiceInitialize(broadcastServiceChannelName);
+
+  // In case the broadcast channel is already initialized elsewhere; One tab can only hold 1 instance
+  if ((props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.skipBroadcastChannelInit) !== true) {
+    var _chatSDK$omnichannelC, _props$controlProps2;
+    const broadcastServiceChannelName = getBroadcastChannelName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.widgetId, ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.widgetInstanceId) ?? "");
+    BroadcastServiceInitialize(broadcastServiceChannelName);
+  }
   TelemetryTimers.LcwLoadToChatButtonTimer = createTimer();
-  const widgetElementId = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.id) || "oc-lcw";
+  const widgetElementId = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.id) || "oc-lcw";
   const currentMessageCountRef = useRef(0);
   let widgetStateEventId = "";
   const lastLWICheckTimeRef = useRef(0);
   let optionalParams;
   let activeCachedChatExist = false;
-  const uwid = useRef(""); // its an uniqueid per chatr instance
-
   const setOptionalParams = () => {
     var _state$appStates, _state$domainStates, _state$appStates3;
     if (!isUndefinedOrEmpty((_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.reconnectId)) {
@@ -171,8 +175,8 @@ export const LiveChatWidgetStateful = props => {
     // Add default localStorage support for widget
     const widgetCacheId = getWidgetCacheIdfromProps(props);
     if (props.contextDataStore === undefined) {
-      var _props$controlProps3;
-      const cacheTtlInMins = (props === null || props === void 0 ? void 0 : (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.cacheTtlInMins) ?? Constants.CacheTtlInMinutes;
+      var _props$controlProps4;
+      const cacheTtlInMins = (props === null || props === void 0 ? void 0 : (_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.cacheTtlInMins) ?? Constants.CacheTtlInMinutes;
       const storageType = (props === null || props === void 0 ? void 0 : props.useSessionStorage) === true ? StorageType.sessionStorage : StorageType.localStorage;
       DataStoreManager.clientDataStore = defaultClientDataStoreProvider(cacheTtlInMins, storageType);
       registerBroadcastServiceForStorage(widgetCacheId, cacheTtlInMins, storageType);
@@ -181,30 +185,29 @@ export const LiveChatWidgetStateful = props => {
     }
   };
   useEffect(() => {
-    var _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$chatConfig, _props$chatConfig$Liv, _props$controlProps8, _props$chatConfig2, _props$chatConfig2$Ch, _state$appStates5;
+    var _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$chatConfig, _props$chatConfig$Liv, _props$controlProps9, _props$chatConfig2, _props$chatConfig2$Ch, _state$appStates5;
     state.domainStates.confirmationPaneConfirmedOptionClicked = false;
     state.domainStates.confirmationState = ConfirmationState.NotSet;
     setupClientDataStore();
     registerTelemetryLoggers(props, dispatch);
     createInternetConnectionChangeHandler();
-    uwid.current = newGuid();
     dispatch({
       type: LiveChatWidgetActionType.SET_WIDGET_ELEMENT_ID,
       payload: widgetElementId
     });
     dispatch({
       type: LiveChatWidgetActionType.SET_START_CHAT_BUTTON_DISPLAY,
-      payload: ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.hideStartChatButton) || false
+      payload: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.hideStartChatButton) || false
     });
     dispatch({
       type: LiveChatWidgetActionType.SET_E2VV_ENABLED,
       payload: false
     });
-    if ((_props$controlProps5 = props.controlProps) !== null && _props$controlProps5 !== void 0 && _props$controlProps5.widgetInstanceId && !isNullOrEmptyString((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.widgetInstanceId)) {
-      var _props$controlProps7;
+    if ((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.widgetInstanceId && !isNullOrEmptyString((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.widgetInstanceId)) {
+      var _props$controlProps8;
       dispatch({
         type: LiveChatWidgetActionType.SET_WIDGET_INSTANCE_ID,
-        payload: (_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.widgetInstanceId
+        payload: (_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.widgetInstanceId
       });
     }
     if (((_props$chatConfig = props.chatConfig) === null || _props$chatConfig === void 0 ? void 0 : (_props$chatConfig$Liv = _props$chatConfig.LiveWSAndLiveChatEngJoin) === null || _props$chatConfig$Liv === void 0 ? void 0 : _props$chatConfig$Liv.msdyn_callingoptions) !== E2VVOptions.NoCalling) {
@@ -223,7 +226,7 @@ export const LiveChatWidgetStateful = props => {
     }
 
     // Initialize global dir
-    const globalDir = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) ?? getLocaleDirection((_props$chatConfig2 = props.chatConfig) === null || _props$chatConfig2 === void 0 ? void 0 : (_props$chatConfig2$Ch = _props$chatConfig2.ChatWidgetLanguage) === null || _props$chatConfig2$Ch === void 0 ? void 0 : _props$chatConfig2$Ch.msdyn_localeid);
+    const globalDir = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.dir) ?? getLocaleDirection((_props$chatConfig2 = props.chatConfig) === null || _props$chatConfig2 === void 0 ? void 0 : (_props$chatConfig2$Ch = _props$chatConfig2.ChatWidgetLanguage) === null || _props$chatConfig2$Ch === void 0 ? void 0 : _props$chatConfig2$Ch.msdyn_localeid);
     dispatch({
       type: LiveChatWidgetActionType.SET_GLOBAL_DIR,
       payload: globalDir
@@ -259,7 +262,7 @@ export const LiveChatWidgetStateful = props => {
 
   // useEffect for custom context
   useEffect(() => {
-    var _chatSDK$omnichannelC2, _chatSDK$omnichannelC3, _props$controlProps10;
+    var _chatSDK$omnichannelC2, _chatSDK$omnichannelC3, _props$controlProps11;
     // Add the custom context on receiving the SetCustomContext event
     BroadcastService.getMessageByEventName(BroadcastEvent.SetCustomContext).subscribe(msg => {
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -292,8 +295,8 @@ export const LiveChatWidgetStateful = props => {
     BroadcastService.getMessageByEventName(BroadcastEvent.HideChatVisibilityChangeEvent).subscribe(async event => {
       var _event$payload;
       if ((event === null || event === void 0 ? void 0 : (_event$payload = event.payload) === null || _event$payload === void 0 ? void 0 : _event$payload.isChatHidden) !== undefined) {
-        var _props$controlProps9;
-        if ((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideStartChatButton) {
+        var _props$controlProps10;
+        if ((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideStartChatButton) {
           var _event$payload2;
           dispatch({
             type: LiveChatWidgetActionType.SET_MINIMIZED,
@@ -320,23 +323,27 @@ export const LiveChatWidgetStateful = props => {
 
     // Start chat from SDK Event
     BroadcastService.getMessageByEventName(BroadcastEvent.StartChat).subscribe(msg => {
-      var _msg$payload4;
+      var _msg$payload4, _msg$payload5, _msg$payload6;
+      // If the startChat event is not initiated by the same tab. Ignore the call
+      if (!isNullOrUndefined(msg === null || msg === void 0 ? void 0 : (_msg$payload4 = msg.payload) === null || _msg$payload4 === void 0 ? void 0 : _msg$payload4.runtimeId) && (msg === null || msg === void 0 ? void 0 : (_msg$payload5 = msg.payload) === null || _msg$payload5 === void 0 ? void 0 : _msg$payload5.runtimeId) !== TelemetryManager.InternalTelemetryData.lcwRuntimeId) {
+        return;
+      }
       let stateWithUpdatedContext = state;
-      if (msg !== null && msg !== void 0 && (_msg$payload4 = msg.payload) !== null && _msg$payload4 !== void 0 && _msg$payload4.customContext) {
-        var _msg$payload5, _msg$payload6;
+      if (msg !== null && msg !== void 0 && (_msg$payload6 = msg.payload) !== null && _msg$payload6 !== void 0 && _msg$payload6.customContext) {
+        var _msg$payload7, _msg$payload8;
         TelemetryHelper.logActionEvent(LogLevel.INFO, {
           Event: TelemetryEvent.CustomContextReceived,
           Description: "CustomContext received through startChat event."
         });
         dispatch({
           type: LiveChatWidgetActionType.SET_CUSTOM_CONTEXT,
-          payload: msg === null || msg === void 0 ? void 0 : (_msg$payload5 = msg.payload) === null || _msg$payload5 === void 0 ? void 0 : _msg$payload5.customContext
+          payload: msg === null || msg === void 0 ? void 0 : (_msg$payload7 = msg.payload) === null || _msg$payload7 === void 0 ? void 0 : _msg$payload7.customContext
         });
         stateWithUpdatedContext = {
           ...state,
           domainStates: {
             ...state.domainStates,
-            customContext: msg === null || msg === void 0 ? void 0 : (_msg$payload6 = msg.payload) === null || _msg$payload6 === void 0 ? void 0 : _msg$payload6.customContext
+            customContext: msg === null || msg === void 0 ? void 0 : (_msg$payload8 = msg.payload) === null || _msg$payload8 === void 0 ? void 0 : _msg$payload8.customContext
           }
         };
       }
@@ -412,11 +419,18 @@ export const LiveChatWidgetStateful = props => {
     });
 
     // Listen to end chat event from other tabs
-    const endChatEventName = getWidgetEndChatEventName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.widgetId, ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.widgetInstanceId) ?? "");
+    const endChatEventName = getWidgetEndChatEventName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.widgetId, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "");
     BroadcastService.getMessageByEventName(endChatEventName).subscribe(msg => {
-      console.log("Receiving end chat event", JSON.stringify(msg.payload));
-      if (msg.payload !== uwid.current) {
+      var _msg$payload9;
+      if ((msg === null || msg === void 0 ? void 0 : (_msg$payload9 = msg.payload) === null || _msg$payload9 === void 0 ? void 0 : _msg$payload9.runtimeId) !== TelemetryManager.InternalTelemetryData.lcwRuntimeId) {
         endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, true, false, false);
+        endChatStateCleanUp(dispatch);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        chatSDK.requestId = uuidv4();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        chatSDK.chatToken = {};
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        chatSDK.reconnectId = null;
         return;
       }
     });
@@ -544,13 +558,13 @@ export const LiveChatWidgetStateful = props => {
 
     // If start chat failed, and C2 is trying to close chat widget
     if (state !== null && state !== void 0 && (_state$appStates9 = state.appStates) !== null && _state$appStates9 !== void 0 && _state$appStates9.startChatFailed || (state === null || state === void 0 ? void 0 : (_state$appStates10 = state.appStates) === null || _state$appStates10 === void 0 ? void 0 : _state$appStates10.conversationState) === ConversationState.Postchat) {
-      endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, true, false, true, uwid.current);
+      endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, true, false, true);
       return;
     }
 
     // Scenario -> Chat was InActive and closing the chat (Refresh scenario on post chat)
     if ((state === null || state === void 0 ? void 0 : (_state$appStates11 = state.appStates) === null || _state$appStates11 === void 0 ? void 0 : _state$appStates11.conversationState) === ConversationState.InActive) {
-      endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true, uwid.current);
+      endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true);
       return;
     }
     if ((state === null || state === void 0 ? void 0 : (_state$appStates12 = state.appStates) === null || _state$appStates12 === void 0 ? void 0 : _state$appStates12.conversationEndedBy) === ConversationEndEntity.Agent || (state === null || state === void 0 ? void 0 : (_state$appStates13 = state.appStates) === null || _state$appStates13 === void 0 ? void 0 : _state$appStates13.conversationEndedBy) === ConversationEndEntity.Bot) {
@@ -561,7 +575,7 @@ export const LiveChatWidgetStateful = props => {
     }
 
     // All other cases
-    prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, uwid.current);
+    prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter);
   }, [state === null || state === void 0 ? void 0 : (_state$appStates14 = state.appStates) === null || _state$appStates14 === void 0 ? void 0 : _state$appStates14.conversationEndedBy]);
 
   // Publish chat widget state
@@ -619,13 +633,13 @@ export const LiveChatWidgetStateful = props => {
   };
   const setPostChatContextRelay = () => setPostChatContextAndLoadSurvey(chatSDK, dispatch);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const endChatRelay = (adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab) => endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab, uwid.current);
+  const endChatRelay = (adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab) => endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab);
   const prepareStartChatRelay = () => prepareStartChat(props, chatSDK, state, dispatch, setAdapter);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const initStartChatRelay = (optionalParams, persistedState) => initStartChat(chatSDK, dispatch, setAdapter, state, props, optionalParams, persistedState);
   const confirmationPaneProps = initConfirmationPropsComposer(props);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const prepareEndChatRelay = () => prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, uwid.current);
+  const prepareEndChatRelay = () => prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter);
   const webChatProps = initWebChatComposer(props, state, dispatch, chatSDK, endChatRelay);
   const downloadTranscriptProps = createDownloadTranscriptProps(props.downloadTranscriptProps, {
     ...(defaultWebChatContainerStatefulProps === null || defaultWebChatContainerStatefulProps === void 0 ? void 0 : defaultWebChatContainerStatefulProps.webChatStyles),
@@ -637,7 +651,7 @@ export const LiveChatWidgetStateful = props => {
   };
   const chatWidgetDraggableConfig = {
     elementId: widgetElementId,
-    channel: ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "lcw",
+    channel: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.widgetInstanceId) ?? "lcw",
     disabled: ((_props$draggableChatW = props.draggableChatWidgetProps) === null || _props$draggableChatW === void 0 ? void 0 : _props$draggableChatW.disabled) === true ?? false // Draggable by default, unless explicitly disabled
   };
 

package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -47,13 +47,11 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 export const WebChatContainerStateful = props => {
-  var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _props$webChatContain3, _props$webChatContain4, _defaultWebChatContai, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai2, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14;
+  var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai, _props$webChatContain7, _props$webChatContain8, _defaultWebChatContai2, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14;
   const {
     BasicWebChat
   } = Components;
   const [state, dispatch] = useChatContextStore();
-  const magicCodeBroadcastChannel = new window.BroadcastChannel(Constants.magicCodeBroadcastChannel); // eslint-disable-line @typescript-eslint/no-explicit-any
-  const magicCodeResponseBroadcastChannel = new window.BroadcastChannel(Constants.magicCodeResponseBroadcastChannel); // eslint-disable-line @typescript-eslint/no-explicit-any
   const {
     webChatContainerProps,
     contextDataStore
@@ -61,7 +59,7 @@ export const WebChatContainerStateful = props => {
   const containerStyles = {
     root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, {
       display: state.appStates.isMinimized ? "none" : ""
-    }) // Use this instead of removing WebChat from the picture so that the activity observer inside the adapter is not invoked 
+    }) // Use this instead of removing WebChat from the picture so that the activity observer inside the adapter is not invoked
   };
 
   const localizedTexts = {
@@ -95,6 +93,21 @@ export const WebChatContainerStateful = props => {
     }
   }, []);
   useEffect(() => {
+    var _props$webChatContain3, _props$webChatContain4;
+    if (!((_props$webChatContain3 = props.webChatContainerProps) !== null && _props$webChatContain3 !== void 0 && (_props$webChatContain4 = _props$webChatContain3.botMagicCode) !== null && _props$webChatContain4 !== void 0 && _props$webChatContain4.disabled)) {
+      return;
+    }
+    if (!window.BroadcastChannel) {
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+        Event: TelemetryEvent.SuppressBotMagicCodeFailed,
+        Description: "BroadcastChannel not supported by default on current browser"
+      });
+      return;
+    }
+    const magicCodeBroadcastChannel = new window.BroadcastChannel(Constants.magicCodeBroadcastChannel); // eslint-disable-line @typescript-eslint/no-explicit-any
+    const magicCodeResponseBroadcastChannel = new window.BroadcastChannel(Constants.magicCodeResponseBroadcastChannel); // eslint-disable-line @typescript-eslint/no-explicit-any
+
     const eventListener = event => {
       // eslint-disable-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-function
       const {
@@ -148,8 +161,8 @@ export const WebChatContainerStateful = props => {
         div[class="ac-input-container"] * {white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp6 === void 0 ? void 0 : _webChatContainerProp6.textWhiteSpace) ?? defaultAdaptiveCardStyles.textWhiteSpace}}
 
         .ms_lcw_webchat_received_message>div.webchat__stacked-layout>div.webchat__stacked-layout__main>div.webchat__stacked-layout__content>div.webchat__stacked-layout__message-row>[class^=webchat]:not(.webchat__bubble--from-user)>.webchat__bubble__content {
-            background-color: ${((_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : (_props$webChatContain4 = _props$webChatContain3.webChatStyles) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.bubbleBackground) ?? ((_defaultWebChatContai = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.bubbleBackground)};
-            color:${((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 ? void 0 : (_props$webChatContain6 = _props$webChatContain5.webChatStyles) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.bubbleTextColor) ?? ((_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleTextColor)};
+            background-color: ${((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 ? void 0 : (_props$webChatContain6 = _props$webChatContain5.webChatStyles) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.bubbleBackground) ?? ((_defaultWebChatContai = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.bubbleBackground)};
+            color:${((_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : (_props$webChatContain8 = _props$webChatContain7.webChatStyles) === null || _props$webChatContain8 === void 0 ? void 0 : _props$webChatContain8.bubbleTextColor) ?? ((_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleTextColor)};
         }
 
         div[class="ac-textBlock"] a:link,
@@ -157,11 +170,11 @@ export const WebChatContainerStateful = props => {
         div[class="ac-textBlock"] a:hover,
         div[class="ac-textBlock"] a:active {
             color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp7 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp7 === void 0 ? void 0 : _webChatContainerProp7.anchorColor) ?? defaultAdaptiveCardStyles.anchorColor};
-        } 
+        }
 
         .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp8 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.buttonWhiteSpace) ?? defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
 
-        .ms_lcw_webchat_received_message img.webchat__markdown__external-link-icon { 
+        .ms_lcw_webchat_received_message img.webchat__markdown__external-link-icon {
             background-image : url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjI1MDEgNC41MDAxN0gxMC43NDk1QzExLjE2MzcgNC41MDAxNyAxMS40OTk1IDQuODM1OTYgMTEuNDk5NSA1LjI1MDE3QzExLjQ5OTUgNS42Mjk4NiAxMS4yMTczIDUuOTQzNjYgMTAuODUxMyA1Ljk5MzMyTDEwLjc0OTUgNi4wMDAxN0g3LjI0OTc0QzYuMDcwNzkgNS45OTk2MSA1LjEwMzQ5IDYuOTA2NTYgNS4wMDc4NiA4LjA2MTEyTDUuMDAwMjggOC4yMjAwM0w1LjAwMzEyIDE2Ljc1MDdDNS4wMDM0MyAxNy45NDE1IDUuOTI4ODUgMTguOTE2MSA3LjA5OTY2IDE4Ljk5NDlMNy4yNTM3MSAxOS4wMDAxTDE1Ljc1MTggMTguOTg4NEMxNi45NDE1IDE4Ljk4NjggMTcuOTE0NSAxOC4wNjIgMTcuOTkzNSAxNi44OTIzTDE3Ljk5ODcgMTYuNzM4NFYxMy4yMzIxQzE3Ljk5ODcgMTIuODE3OSAxOC4zMzQ1IDEyLjQ4MjEgMTguNzQ4NyAxMi40ODIxQzE5LjEyODQgMTIuNDgyMSAxOS40NDIyIDEyLjc2NDMgMTkuNDkxOCAxMy4xMzAzTDE5LjQ5ODcgMTMuMjMyMVYxNi43Mzg0QzE5LjQ5ODcgMTguNzQwNyAxNy45MjkzIDIwLjM3NjkgMTUuOTUyOCAyMC40ODI5TDE1Ljc1MzggMjAuNDg4NEw3LjI1ODI3IDIwLjUwMDFMNy4wNTQ5NSAyMC40OTQ5QzUuMTQyMzkgMjAuMzk1NCAzLjYwODk1IDE4Ljg2MjcgMy41MDgzNyAxNi45NTAyTDMuNTAzMTIgMTYuNzUxMUwzLjUwMDg5IDguMjUyN0wzLjUwNTI5IDguMDUwMkMzLjYwNTM5IDYuMTM3NDkgNS4xMzg2NyA0LjYwNDQ5IDcuMDUwOTYgNC41MDUyN0w3LjI1MDEgNC41MDAxN0gxMC43NDk1SDcuMjUwMVpNMTMuNzQ4MSAzLjAwMTQ2TDIwLjMwMTggMy4wMDE5N0wyMC40MDE0IDMuMDE1NzVMMjAuNTAyMiAzLjA0MzkzTDIwLjU1OSAzLjA2ODAzQzIwLjYxMjIgMy4wOTEyMiAyMC42NjM0IDMuMTIxNjMgMjAuNzExMSAzLjE1ODg1TDIwLjc4MDQgMy4yMjE1NkwyMC44NjQxIDMuMzIwMTRMMjAuOTE4MyAzLjQxMDI1TDIwLjk1NyAzLjUwMDU3TDIwLjk3NjIgMy41NjQ3NkwyMC45ODk4IDMuNjI4NjJMMjAuOTk5MiAzLjcyMjgyTDIwLjk5OTcgMTAuMjU1NEMyMC45OTk3IDEwLjY2OTYgMjAuNjYzOSAxMS4wMDU0IDIwLjI0OTcgMTEuMDA1NEMxOS44NyAxMS4wMDU0IDE5LjU1NjIgMTAuNzIzMiAxOS41MDY1IDEwLjM1NzFMMTkuNDk5NyAxMC4yNTU0TDE5LjQ5ODkgNS41NjE0N0wxMi4yNzk3IDEyLjc4NDdDMTIuMDEzNCAxMy4wNTEgMTEuNTk2OCAxMy4wNzUzIDExLjMwMzEgMTIuODU3NUwxMS4yMTkgMTIuNzg0OUMxMC45NTI3IDEyLjUxODcgMTAuOTI4NCAxMi4xMDIxIDExLjE0NjIgMTEuODA4NEwxMS4yMTg4IDExLjcyNDNMMTguNDM2OSA0LjUwMTQ2SDEzLjc0ODFDMTMuMzY4NCA0LjUwMTQ2IDEzLjA1NDYgNC4yMTkzMSAxMy4wMDUgMy44NTMyNEwxMi45OTgxIDMuNzUxNDZDMTIuOTk4MSAzLjM3MTc3IDEzLjI4MDMgMy4wNTc5NyAxMy42NDY0IDMuMDA4MzFMMTMuNzQ4MSAzLjAwMTQ2WiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4) !important;
             height: '.75em';
             marginLeft: '.25em';
@@ -179,7 +192,7 @@ export const WebChatContainerStateful = props => {
         .ms_lcw_webchat_received_message a:hover,
         .ms_lcw_webchat_received_message a:active {
             color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp11 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp11 === void 0 ? void 0 : (_webChatContainerProp12 = _webChatContainerProp11.receivedMessageAnchorStyles) === null || _webChatContainerProp12 === void 0 ? void 0 : _webChatContainerProp12.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
-        } 
+        }
         .ms_lcw_webchat_sent_message a:link,
         .ms_lcw_webchat_sent_message a:visited,
         .ms_lcw_webchat_sent_message a:hover,

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts.js

@@ -26,5 +26,7 @@ export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_MESSAGE_RETRY: "Retry",
   MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
   THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Third party cookies are blocked. Reloading this page will start a new conversation.",
-  MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware."
+  MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware.",
+  MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS: "Email will be sent after chat ends!",
+  MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later."
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js

@@ -3,6 +3,7 @@ export let NotificationScenarios;
   NotificationScenarios["Connection"] = "connection";
   NotificationScenarios["DownloadTranscriptError"] = "download transcript";
   NotificationScenarios["EmailTranscriptError"] = "email transcript";
+  NotificationScenarios["EmailAddressSaved"] = "email address saved";
   NotificationScenarios["AttachmentError"] = "attachment";
   NotificationScenarios["InternetConnection"] = "internet connection";
   NotificationScenarios["MaxSizeError"] = "max size";

package/lib/types/common/utils.d.ts

@@ -33,3 +33,12 @@ export declare const debounceLeading: (fn: any, ms?: number) => (...args: any[])
 export declare const getConversationDetailsCall: (chatSDK: any) => Promise<any>;
 export declare const checkContactIdError: (e: any) => void;
 export declare const createFileAndDownload: (fileName: string, blobData: string, mimeType: string) => void;
+/**
+ *
+ * Replace placeholders with format {0}..{n} , in a string with values
+ *
+ * @param template String with placeholders to be replaced
+ * @param values array of values to replace the placeholders
+ * @returns formatted string with replaced values
+ */
+export declare const formatTemplateString: (templateMessage: string, values: any) => string;

package/lib/types/components/livechatwidget/common/endChat.d.ts

@@ -2,7 +2,10 @@ import { Dispatch } from "react";
 import { ILiveChatWidgetAction } from "../../../contexts/common/ILiveChatWidgetAction";
 import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidgetContext";
 import { ILiveChatWidgetProps } from "../interfaces/ILiveChatWidgetProps";
-declare const prepareEndChat: (props: ILiveChatWidgetProps, chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, setWebChatStyles: any, adapter: any, uwid: string) => Promise<void>;
-declare const endChat: (props: ILiveChatWidgetProps, chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, setWebChatStyles: any, adapter: any, skipEndChatSDK?: boolean | undefined, skipCloseChat?: boolean | undefined, postMessageToOtherTab?: boolean | undefined, uwid?: string) => Promise<void>;
+declare const prepareEndChat: (props: ILiveChatWidgetProps, chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, setWebChatStyles: any, adapter: any) => Promise<void>;
+declare const endChat: (props: ILiveChatWidgetProps, chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, setWebChatStyles: any, adapter: any, skipEndChatSDK?: boolean | undefined, skipCloseChat?: boolean | undefined, postMessageToOtherTab?: boolean | undefined) => Promise<void>;
+export declare const callingStateCleanUp: (dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
+export declare const endChatStateCleanUp: (dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
+export declare const closeChatStateCleanUp: (dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
 export declare const endVoiceVideoCallIfOngoing: (chatSDK: any, dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
 export { prepareEndChat, endChat };

package/lib/types/components/livechatwidget/common/renderSurveyHelpers.d.ts

@@ -4,6 +4,6 @@ import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidget
 import { ILiveChatWidgetProps } from "../interfaces/ILiveChatWidgetProps";
 declare const initiatePostChat: (props: ILiveChatWidgetProps, conversationDetailsParam: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, postchatContext: any) => Promise<void>;
 declare const isPostChatEnabled: (props: ILiveChatWidgetProps, state: ILiveChatWidgetContext) => boolean;
-declare const getPostChatContext: (chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
+declare const getPostChatContext: (chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<any>;
 declare const setWidgetStateToInactive: (dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<void>;
 export { initiatePostChat, setWidgetStateToInactive, getPostChatContext, isPostChatEnabled as checkPostChatEnabled };

package/lib/types/components/livechatwidget/interfaces/ILiveChatWidgetControlProps.d.ts

@@ -17,4 +17,5 @@ export interface ILiveChatWidgetControlProps {
     hideStartChatButton?: boolean;
     widgetInstanceId?: string | undefined;
     cacheTtlInMins?: number;
+    skipBroadcastChannelInit?: boolean;
 }

package/lib/types/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.d.ts

@@ -2,6 +2,7 @@ export declare enum NotificationScenarios {
     Connection = "connection",
     DownloadTranscriptError = "download transcript",
     EmailTranscriptError = "email transcript",
+    EmailAddressSaved = "email address saved",
     AttachmentError = "attachment",
     InternetConnection = "internet connection",
     MaxSizeError = "max size",

package/lib/types/contexts/common/ILiveChatWidgetLocalizedTexts.d.ts

@@ -28,4 +28,13 @@ export interface ILiveChatWidgetLocalizedTexts {
      * e.g. "{0} has been blocked because the file may contain a malware."
      */
     MIDDLEWARE_BANNER_FILE_IS_MALICIOUS?: string;
+    /**
+     * Success message, indicating the email address introduced has been registered to receive the transcript.
+     */
+    MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS?: string;
+    /**
+     * Error message, indicating the email address introduced couldnt be registered.
+     * {0} - e-mail address introduced
+     */
+    MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "1.4.0",
+  "version": "1.4.1-main.2575376",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -74,8 +74,8 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@microsoft/omnichannel-chat-components": "^1.0.7",
-    "@microsoft/omnichannel-chat-sdk": "1.5.4",
+    "@microsoft/omnichannel-chat-components": "^1.0.9",
+    "@microsoft/omnichannel-chat-sdk": "1.5.5",
     "abort-controller-es5": "^2.0.1",
     "dompurify": "^2.3.4",
     "markdown-it": "^12.3.2",