@microsoft/omnichannel-chat-widget 0.1.0-main.8e79cb8 → 0.1.0-main.9e62ed8

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");

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

@@ -37,19 +37,28 @@ 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 || (exports.BroadcastEvent = BroadcastEvent = {}));
 
 let TelemetryEvent;
@@ -102,8 +111,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 +138,8 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["EmailTranscriptButtonClicked"] = "EmailTranscriptButtonClicked";
   TelemetryEvent["EmailTranscriptCancelButtonClicked"] = "EmailTranscriptCancelButtonClicked";
   TelemetryEvent["AudioToggleButtonClicked"] = "AudioToggleButtonClicked";
+  TelemetryEvent["SuppressBotMagicCodeSucceeded"] = "SuppressBotMagicCodeSucceeded";
+  TelemetryEvent["SuppressBotMagicCodeFailed"] = "SuppressBotMagicCodeFailed";
   TelemetryEvent["ProcessingHTMLTextMiddlewareFailed"] = "ProcessingHTMLTextMiddlewareFailed";
   TelemetryEvent["ProcessingSanitizationMiddlewareFailed"] = "ProcessingSanitizationMiddlewareFailed";
   TelemetryEvent["FormatTagsMiddlewareJSONStringifyFailed"] = "FormatTagsMiddlewareJSONStringifyFailed";

package/lib/cjs/common/utils.js

@@ -359,7 +359,7 @@ const getWidgetCacheId = (orgId, widgetId) => {
 exports.getWidgetCacheId = getWidgetCacheId;
 
 const getWidgetEndChatEventName = (orgId, widgetId) => {
-  return `${_TelemetryConstants.BroadcastEvent.EndChat}_${orgId}_${widgetId}`;
+  return `${_TelemetryConstants.BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
 };
 
 exports.getWidgetEndChatEventName = getWidgetEndChatEventName;

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 = {
@@ -86,6 +94,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 +116,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/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/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -337,7 +337,9 @@ const dummyDefaultProps = {
       hideChatTextContainer: false,
       hideChatSubtitle: false,
       hideChatTitle: false,
-      hideNotificationBubble: true
+      hideNotificationBubble: true,
+      unreadMessageString: "new messages",
+      largeUnreadMessageString: "99+"
     },
     styleProps: {
       generalStyleProps: {
@@ -1697,6 +1699,10 @@ const dummyDefaultProps = {
       MIDDLEWARE_MESSAGE_RETRY: "Retry",
       PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
       MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external."
+    },
+    botMagicCode: {
+      disabled: false,
+      fwdUrl: ""
     }
   },
   telemetryConfig: undefined

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

@@ -113,9 +113,9 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
         payload: null
       });
-
-      _omnichannelChatComponents.BroadcastService.postMessage({
-        eventName: _TelemetryConstants.BroadcastEvent.EndChat
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_UNREAD_MESSAGE_COUNT,
+        payload: 0
       });
 
       if (postMessageToOtherTab) {

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

@@ -63,11 +63,15 @@ var _preProcessingMiddleware = _interopRequireDefault(require("../../webchatcont
 
 var _sanitizationMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"));
 
+var _cardActionMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/cardActionMiddleware");
+
+var _messageTimestampMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageTimestampMiddleware"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles) => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4, _state$domainStates$l8, _state$domainStates$l9, _props$webChatContain7, _props$webChatContain8, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain9, _props$webChatContain10, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain11, _props$webChatContain12, _defaultWebChatContai, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain17, _props$webChatContain18, _defaultWebChatContai2, _props$webChatContain19, _props$webChatContain20, _defaultWebChatContai3, _props$webChatContain21;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4, _state$domainStates$l8, _state$domainStates$l9, _props$webChatContain7, _props$webChatContain8, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain9, _props$webChatContain10, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain11, _props$webChatContain12, _defaultWebChatContai, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain17, _props$webChatContain18, _defaultWebChatContai2, _props$webChatContain19, _props$webChatContain20, _defaultWebChatContai3, _props$webChatContain21, _props$webChatContain22;
 
   const localizedTexts = { ..._defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts,
     ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.localizedTexts)
@@ -130,7 +134,7 @@ const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles)
     };
 
     webChatStore = (0, _botframeworkWebchat.createStore)({}, //initial state
-    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l5 = state.domainStates.liveChatConfig) === null || _state$domainStates$l5 === void 0 ? void 0 : _state$domainStates$l5.allowedFileExtensions, (_state$domainStates$l6 = state.domainStates.liveChatConfig) === null || _state$domainStates$l6 === void 0 ? void 0 : _state$domainStates$l6.maxUploadFileSize, localizedTexts), _channelDataMiddleware.default, (0, _conversationEndMiddleware.default)(conversationEndCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l7 = state.domainStates.liveChatConfig) === null || _state$domainStates$l7 === void 0 ? void 0 : _state$domainStates$l7.DataMaskingInfo), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, _htmlTextMiddleware.default, (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l5 = state.domainStates.liveChatConfig) === null || _state$domainStates$l5 === void 0 ? void 0 : _state$domainStates$l5.allowedFileExtensions, (_state$domainStates$l6 = state.domainStates.liveChatConfig) === null || _state$domainStates$l6 === void 0 ? void 0 : _state$domainStates$l6.maxUploadFileSize, localizedTexts), _channelDataMiddleware.default, (0, _conversationEndMiddleware.default)(conversationEndCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l7 = state.domainStates.liveChatConfig) === null || _state$domainStates$l7 === void 0 ? void 0 : _state$domainStates$l7.DataMaskingInfo), _messageTimestampMiddleware.default, _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, _htmlTextMiddleware.default, (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ...(((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.storeMiddlewares) ?? []));
     _WebChatStoreLoader.WebChatStoreLoader.store = webChatStore;
   } // Initialize the remaining Web Chat props
@@ -148,7 +152,8 @@ const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles)
     groupActivitiesMiddleware: (_props$webChatContain17 = props.webChatContainerProps) !== null && _props$webChatContain17 !== void 0 && (_props$webChatContain18 = _props$webChatContain17.renderingMiddlewareProps) !== null && _props$webChatContain18 !== void 0 && _props$webChatContain18.disableGroupActivitiesMiddleware ? undefined : (_defaultWebChatContai2 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.groupActivitiesMiddleware,
     typingIndicatorMiddleware: (_props$webChatContain19 = props.webChatContainerProps) !== null && _props$webChatContain19 !== void 0 && (_props$webChatContain20 = _props$webChatContain19.renderingMiddlewareProps) !== null && _props$webChatContain20 !== void 0 && _props$webChatContain20.disableTypingIndicatorMiddleware ? undefined : (_defaultWebChatContai3 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.typingIndicatorMiddleware,
     onTelemetry: (0, _WebChatLogger.createWebChatTelemetry)(),
-    ...((_props$webChatContain21 = props.webChatContainerProps) === null || _props$webChatContain21 === void 0 ? void 0 : _props$webChatContain21.webChatProps)
+    cardActionMiddleware: (0, _cardActionMiddleware.createCardActionMiddleware)(((_props$webChatContain21 = props.webChatContainerProps) === null || _props$webChatContain21 === void 0 ? void 0 : _props$webChatContain21.botMagicCode) || undefined),
+    ...((_props$webChatContain22 = props.webChatContainerProps) === null || _props$webChatContain22 === void 0 ? void 0 : _props$webChatContain22.webChatProps)
   };
   return webChatProps;
 };

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

@@ -122,6 +122,37 @@ const LiveChatWidgetStateful = props => {
   _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer = (0, _utils.createTimer)();
   const widgetElementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) || "oc-lcw";
   const currentMessageCountRef = (0, _react2.useRef)(0);
+  let widgetStateEventName = "";
+
+  const initiateEndChatOnBrowserUnload = () => {
+    var _DataStoreManager$cli;
+
+    const persistedState = getStateFromCache(); // End chat if the chat is still active and browser closed
+
+    if (persistedState.appStates.conversationState === _ConversationState.ConversationState.Active) {
+      //Browser close scenario/no room for PCS/so just end chat and notify agent immidiately
+      (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, false);
+    } // Clean local storage
+
+
+    (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.removeData(widgetStateEventName, "localStorage");
+
+    _omnichannelChatComponents.BroadcastService.postMessage({
+      eventName: _TelemetryConstants.BroadcastEvent.ChatEnded
+    });
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  const getStateFromCache = () => {
+    var _chatSDK$omnichannelC, _chatSDK$omnichannelC2, _DataStoreManager$cli2;
+
+    // Getting updated state from cache
+    const widgetStateEventName = (0, _utils.getWidgetCacheId)((chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.orgId) ?? "", (chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.widgetId) ?? "");
+    const widgetStateFromCache = (_DataStoreManager$cli2 = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli2 === void 0 ? void 0 : _DataStoreManager$cli2.getData(widgetStateEventName, "localStorage");
+    const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
+    return persistedState;
+  };
+
   (0, _react2.useEffect)(() => {
     var _props$controlProps2, _props$controlProps3, _props$reconnectChatP, _props$controlProps4, _props$chatConfig, _props$chatConfig$Cha, _state$domainStates;
 
@@ -168,11 +199,16 @@ const LiveChatWidgetStateful = props => {
       };
       (0, _startChat.initStartChat)(chatSDK, dispatch, setAdapter, optionalParams);
     }
-  }, []);
+  }, []); // useEffect for when skip chat button rendering
+
   (0, _react2.useEffect)(() => {
     if (state.appStates.skipChatButtonRendering) {
       var _props$reconnectChatP3;
 
+      _omnichannelChatComponents.BroadcastService.postMessage({
+        eventName: _TelemetryConstants.BroadcastEvent.ChatInitiated
+      });
+
       if ((_props$reconnectChatP3 = props.reconnectChatPaneProps) !== null && _props$reconnectChatP3 !== void 0 && _props$reconnectChatP3.reconnectId && !state.appStates.reconnectId) {
         var _props$reconnectChatP4, _props$reconnectChatP5;
 
@@ -204,9 +240,10 @@ const LiveChatWidgetStateful = props => {
         });
       }
     }
-  }, [state.appStates.skipChatButtonRendering]);
+  }, [state.appStates.skipChatButtonRendering]); // useEffect for when skip chat button rendering
+
   (0, _react2.useEffect)(() => {
-    var _chatSDK$omnichannelC, _chatSDK$omnichannelC2;
+    var _chatSDK$omnichannelC3, _chatSDK$omnichannelC4;
 
     // Add the custom context on receiving the SetCustomContext event
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.SetCustomContext).subscribe(msg => {
@@ -221,7 +258,7 @@ const LiveChatWidgetStateful = props => {
       });
     });
 
-    _omnichannelChatComponents.BroadcastService.getMessageByEventName("StartProactiveChat").subscribe(msg => {
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.StartProactiveChat).subscribe(msg => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.StartProactiveChatEventReceived,
         Description: "Start proactive chat event received."
@@ -237,32 +274,52 @@ const LiveChatWidgetStateful = props => {
           Description: "Start proactive chat method called, when chat was already triggered."
         });
       }
-    }); // start chat from SDK Event
+    }); // Start chat from SDK Event
 
 
-    _omnichannelChatComponents.BroadcastService.getMessageByEventName("StartChat").subscribe(() => {
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.StartChat).subscribe(() => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.StartChatEventRecevied,
         Description: "Start chat event received."
       });
 
-      if (state.appStates.isMinimized) {
+      const persistedState = getStateFromCache();
+
+      if (persistedState && (persistedState.appStates.conversationState === _ConversationState.ConversationState.Closed || persistedState.appStates.conversationState === _ConversationState.ConversationState.InActive || persistedState.appStates.conversationState === _ConversationState.ConversationState.Postchat)) {
+        // Embedded mode
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: _TelemetryConstants.BroadcastEvent.ChatInitiated
+        });
+
+        (0, _startChat.prepareStartChat)(props, chatSDK, state, dispatch, setAdapter);
+      } else if (!persistedState) {
+        // Popout chat
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: _TelemetryConstants.BroadcastEvent.ChatInitiated
+        });
+
+        (0, _startChat.prepareStartChat)(props, chatSDK, state, dispatch, setAdapter);
+      } else {
+        var _persistedState$domai, _persistedState$domai2, _persistedState$domai3, _persistedState$domai4;
+
+        // Minimize to Maximize
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
         });
-      } else {
-        (0, _startChat.prepareStartChat)(props, chatSDK, state, dispatch, setAdapter);
-      }
-    }); // end chat from SDK Event
 
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: _TelemetryConstants.BroadcastEvent.MaximizeChat,
+          payload: {
+            height: persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai = persistedState.domainStates) === null || _persistedState$domai === void 0 ? void 0 : (_persistedState$domai2 = _persistedState$domai.widgetSize) === null || _persistedState$domai2 === void 0 ? void 0 : _persistedState$domai2.height,
+            width: persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai3 = persistedState.domainStates) === null || _persistedState$domai3 === void 0 ? void 0 : (_persistedState$domai4 = _persistedState$domai3.widgetSize) === null || _persistedState$domai4 === void 0 ? void 0 : _persistedState$domai4.width
+          }
+        });
+      }
+    }); // End chat
 
-    _omnichannelChatComponents.BroadcastService.getMessageByEventName("EndChat").subscribe(async () => {
-      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
-        Event: _TelemetryConstants.TelemetryEvent.EndChatEventReceived,
-        Description: "End chat event received."
-      });
 
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.InitiateEndChat).subscribe(async () => {
       if (canEndChat.current) {
         (0, _endChat.prepareEndChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state);
       } else {
@@ -270,25 +327,58 @@ const LiveChatWidgetStateful = props => {
         const skipCloseChat = false;
         (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat);
       }
+
+      _omnichannelChatComponents.BroadcastService.postMessage({
+        eventName: _TelemetryConstants.BroadcastEvent.CloseChat
+      });
+    });
+
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.InitiateEndChatOnBrowserUnload).subscribe(() => {
+      initiateEndChatOnBrowserUnload();
+    }); // reset proactive chat params
+
+
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.ResetProactiveChatParams).subscribe(async () => {
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
+      });
     }); // Listen to end chat event from other tabs
 
 
-    const endChatEventName = (0, _utils.getWidgetEndChatEventName)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.widgetId);
+    const endChatEventName = (0, _utils.getWidgetEndChatEventName)(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC3 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC3 === void 0 ? void 0 : _chatSDK$omnichannelC3.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC4 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC4 === void 0 ? void 0 : _chatSDK$omnichannelC4.widgetId);
 
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(endChatEventName).subscribe(async () => {
       (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, false);
-    });
+    }); // Close popout window
+
 
     window.addEventListener("beforeunload", () => {
+      _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.WindowClosed,
+        Description: "Closed window."
+      });
+
       (0, _disposeTelemetryLoggers.disposeTelemetryLoggers)();
     });
 
     if (state.appStates.conversationEndedByAgent) {
       (0, _endChat.endChat)(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter);
-    }
+    } //Listen to WidgetSize
+
+
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName("WidgetSize").subscribe(msg => {
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_WIDGET_SIZE,
+        payload: msg === null || msg === void 0 ? void 0 : msg.payload
+      });
+    });
   }, []);
   (0, _react2.useEffect)(() => {
-    canStartProactiveChat.current = state.appStates.conversationState === _ConversationState.ConversationState.Closed;
     canEndChat.current = state.appStates.conversationState === _ConversationState.ConversationState.Active;
 
     if (state.appStates.conversationState === _ConversationState.ConversationState.Active) {
@@ -309,7 +399,10 @@ const LiveChatWidgetStateful = props => {
         });
       });
     }
-  }, [state.appStates.conversationState]); // Reset the UnreadMessageCount when minimized is toggled and broadcast it.
+  }, [state.appStates.conversationState]);
+  (0, _react2.useEffect)(() => {
+    canStartProactiveChat.current = state.appStates.conversationState === _ConversationState.ConversationState.Closed && !state.appStates.proactiveChatStates.proactiveChatInNewWindow;
+  }, [state.appStates.conversationState, state.appStates.proactiveChatStates.proactiveChatInNewWindow]); // Reset the UnreadMessageCount when minimized is toggled and broadcast it.
 
   (0, _react2.useEffect)(() => {
     currentMessageCountRef.current = -1;
@@ -343,7 +436,20 @@ const LiveChatWidgetStateful = props => {
     setWebChatStyles({ ...webChatStyles,
       ...((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.webChatStyles)
     });
-  }, [(_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.webChatStyles]);
+  }, [(_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.webChatStyles]); // Publish chat widget state
+
+  (0, _react2.useEffect)(() => {
+    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic;
+
+    widgetStateEventName = (0, _utils.getWidgetCacheId)(props === null || props === void 0 ? void 0 : (_props$chatSDK = props.chatSDK) === null || _props$chatSDK === void 0 ? void 0 : (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) === null || _props$chatSDK$omnich === void 0 ? void 0 : _props$chatSDK$omnich.orgId, props === null || props === void 0 ? void 0 : (_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.widgetId);
+    const chatWidgetStateChangeEvent = {
+      eventName: widgetStateEventName,
+      payload: { ...state
+      }
+    };
+
+    _omnichannelChatComponents.BroadcastService.postMessage(chatWidgetStateChangeEvent);
+  }, [state]);
   const webChatProps = (0, _initWebChatComposer.initWebChatComposer)(props, chatSDK, state, dispatch, setWebChatStyles);
 
   const setPostChatContextRelay = () => (0, _setPostChatContextAndLoadSurvey.setPostChatContextAndLoadSurvey)(chatSDK, dispatch); // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -359,20 +465,7 @@ const LiveChatWidgetStateful = props => {
 
   const initStartChatRelay = (optionalParams, persistedState) => (0, _startChat.initStartChat)(chatSDK, dispatch, setAdapter, optionalParams, persistedState);
 
-  const confirmationPaneProps = (0, _initConfirmationPropsComposer.initConfirmationPropsComposer)(props); // publish chat widget state
-
-  (0, _react2.useEffect)(() => {
-    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic;
-
-    const widgetStateEventName = (0, _utils.getWidgetCacheId)(props === null || props === void 0 ? void 0 : (_props$chatSDK = props.chatSDK) === null || _props$chatSDK === void 0 ? void 0 : (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) === null || _props$chatSDK$omnich === void 0 ? void 0 : _props$chatSDK$omnich.orgId, props === null || props === void 0 ? void 0 : (_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.widgetId);
-    const chatWidgetStateChangeEvent = {
-      eventName: widgetStateEventName,
-      payload: { ...state
-      }
-    };
-
-    _omnichannelChatComponents.BroadcastService.postMessage(chatWidgetStateChangeEvent);
-  }, [state]);
+  const confirmationPaneProps = (0, _initConfirmationPropsComposer.initConfirmationPropsComposer)(props);
   return /*#__PURE__*/_react2.default.createElement(Composer, _extends({}, webChatProps, {
     styleOptions: webChatStyles,
     directLine: ((_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.directLine) ?? adapter ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.directLine

package/lib/cjs/components/proactivechatpanestateful/ProactiveChatPaneStateful.js

@@ -46,6 +46,14 @@ const ProactiveChatPaneStateful = props => {
   const handleProactiveChatInviteTimeout = () => {
     if (!timeoutRemoved) {
       setTimeoutRemoved(true);
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
+      });
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: _ConversationState.ConversationState.Closed
@@ -111,6 +119,14 @@ const ProactiveChatPaneStateful = props => {
         Description: "Proactive chat closed."
       });
 
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
+      });
       dispatch({
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: _ConversationState.ConversationState.Closed