@microsoft/omnichannel-chat-widget 0.1.0-main.4188c11 → 0.1.0-main.592da7b

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/cardActionMiddleware.spec.js

@@ -0,0 +1,98 @@
+"use strict";
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _cardActionMiddleware = require("./cardActionMiddleware");
+
+describe("cardActionMiddleware test", () => {
+  it("createCardActionMiddleware() with undefined botMagicCodeConfig should not change the sign in card url", () => {
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = (0, _cardActionMiddleware.createCardActionMiddleware)(undefined)()(next)(args);
+    expect(signInUrl).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode enabled should not change the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: false
+    };
+
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = (0, _cardActionMiddleware.createCardActionMiddleware)(botMagicCodeConfig)()(next)(args);
+    expect(args.cardAction.value).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode disabled & no fwdUrl should not change the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: true
+    };
+
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = (0, _cardActionMiddleware.createCardActionMiddleware)(botMagicCodeConfig)()(next)(args);
+    expect(args.cardAction.value).toEqual(results.cardAction.value);
+  });
+  it("createCardActionMiddleware() with botMagicCode disabled & fwdUrl should append the fwdUrl in the sign in card url", () => {
+    const botMagicCodeConfig = {
+      disabled: true,
+      fwdUrl: "http://localhost/forwarder.html"
+    };
+
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = (0, _cardActionMiddleware.createCardActionMiddleware)(botMagicCodeConfig)()(next)(args);
+    expect(signInUrl === results.cardAction.value).toBe(false);
+    expect(results.cardAction.value === `${signInUrl}&fwdUrl=${botMagicCodeConfig.fwdUrl}`).toBe(true);
+  });
+  it("createCardActionMiddleware() should not append fwdUrl if fwdUrl & sign in card url are not in the same domain", () => {
+    const botMagicCodeConfig = {
+      disabled: true,
+      fwdUrl: "https://localhost/forwarder.html"
+    };
+
+    const next = args => args; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+
+    const signInUrl = "https://token.botframework.com/api/oauth/signin?signin=[signin]";
+    const args = {
+      cardAction: {
+        type: "signin",
+        value: signInUrl
+      }
+    };
+    const results = (0, _cardActionMiddleware.createCardActionMiddleware)(botMagicCodeConfig)()(next)(args);
+    expect(signInUrl === results.cardAction.value).toBe(true);
+    expect(results.cardAction.value === `${signInUrl}&fwdUrl=${botMagicCodeConfig.fwdUrl}`).toBe(false);
+  });
+});

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageTimestampMiddleware.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _WebChatActionType = require("../../enums/WebChatActionType");
+
+var _Constants = require("../../../../../common/Constants");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const createMessageTimeStampMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (isApplicable(action)) {
+      return next(evaluateTagsAndOverrideTimeStamp(action));
+    }
+
+    return next(action);
+  };
+};
+
+const isApplicable = action => {
+  return action.type === _WebChatActionType.WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && isPVAConversation(action) && isPayloadValid(action) && isValidChannel(action);
+};
+
+const isPayloadValid = action => {
+  var _action$payload;
+
+  return action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : _action$payload.activity;
+};
+
+const isValidChannel = action => {
+  var _action$payload2, _action$payload2$acti;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : _action$payload2$acti.channelId) === _Constants.Constants.acsChannel;
+};
+
+const isPVAConversation = action => {
+  return !isTagIncluded(action, _Constants.Constants.systemMessageTag) && !isTagIncluded(action, _Constants.Constants.publicMessageTag) && !isRoleUserOn(action);
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+const isTagIncluded = (action, tag) => {
+  return isDataTagsPresent(action) && action.payload.activity.channelData.tags.includes(tag);
+};
+
+const isRoleUserOn = action => {
+  var _action$payload3, _action$payload3$acti, _action$payload3$acti2;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : (_action$payload3$acti = _action$payload3.activity) === null || _action$payload3$acti === void 0 ? void 0 : (_action$payload3$acti2 = _action$payload3$acti.from) === null || _action$payload3$acti2 === void 0 ? void 0 : _action$payload3$acti2.role) === _Constants.Constants.userMessageTag;
+};
+
+const overrideTimeStamp = (timestampOriginal, timeStampNew) => {
+  return isTimestampValid(timeStampNew) ? timeStampNew : timestampOriginal;
+};
+
+const isTimestampValid = timeStamp => {
+  const regex = /(\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])(T)(\d{2})(:{1})(\d{2})(:{1})(\d{2})(.\d+)([Z]{1}))/;
+  return regex.test(timeStamp);
+};
+
+const isDataTagsPresent = action => {
+  var _action$payload4, _action$payload4$acti, _action$payload4$acti2;
+
+  return (action === null || action === void 0 ? void 0 : (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : (_action$payload4$acti = _action$payload4.activity) === null || _action$payload4$acti === void 0 ? void 0 : (_action$payload4$acti2 = _action$payload4$acti.channelData) === null || _action$payload4$acti2 === void 0 ? void 0 : _action$payload4$acti2.tags) && action.payload.activity.channelData.tags.length > 0;
+};
+
+const evaluateTagsAndOverrideTimeStamp = action => {
+  const tagValue = tagLookup(action, _Constants.Constants.prefixTimestampTag);
+
+  if (tagValue) {
+    const newTimestamp = extractTimeStamp(tagValue);
+    action.payload.activity.timestamp = overrideTimeStamp(action.payload.activity.timestamp, newTimestamp);
+  }
+
+  return action;
+};
+
+const extractTimeStamp = timeStamp => {
+  if (timeStamp && timeStamp.length > 0) {
+    const ts = timeStamp.split(_Constants.Constants.prefixTimestampTag);
+
+    if (ts && ts.length > 1) {
+      return ts[1];
+    }
+  }
+
+  return timeStamp;
+};
+
+const tagLookup = (action, tag) => {
+  if (!isDataTagsPresent(action)) {
+    return null;
+  }
+
+  const tags = action.payload.activity.channelData.tags;
+  let value;
+
+  if (tags && tags.length > 0) {
+    for (let i = 0; i < tags.length; i++) {
+      value = tags[i];
+
+      if (value && value.indexOf(tag) > -1) {
+        return value;
+      }
+    }
+  }
+
+  return null;
+};
+
+var _default = createMessageTimeStampMiddleware;
+exports.default = _default;

package/lib/cjs/contexts/common/LiveChatWidgetActionType.js

@@ -39,4 +39,6 @@ exports.LiveChatWidgetActionType = LiveChatWidgetActionType;
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CONVERSATION_ENDED_BY_AGENT"] = 28] = "SET_CONVERSATION_ENDED_BY_AGENT";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_STATE"] = 29] = "SET_WIDGET_STATE";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_LIVE_CHAT_CONTEXT"] = 30] = "SET_LIVE_CHAT_CONTEXT";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_BOT_OAUTH_SIGNIN_ID"] = 31] = "SET_BOT_OAUTH_SIGNIN_ID";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_WIDGET_SIZE"] = 32] = "SET_WIDGET_SIZE";
 })(LiveChatWidgetActionType || (exports.LiveChatWidgetActionType = LiveChatWidgetActionType = {}));

package/lib/cjs/contexts/common/LiveChatWidgetContextInitialState.js

@@ -28,7 +28,8 @@ const getLiveChatWidgetContextInitialState = props => {
       telemetryInternalData: {},
       globalDir: "ltr",
       liveChatContext: undefined,
-      customContext: undefined
+      customContext: undefined,
+      widgetSize: undefined
     },
     appStates: {
       conversationState: _ConversationState.ConversationState.Closed,

package/lib/cjs/contexts/createReducer.js

@@ -235,6 +235,14 @@ const createReducer = () => {
           }
         };
 
+      case _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_WIDGET_SIZE:
+        return { ...state,
+          domainStates: { ...state.domainStates,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            widgetSize: action.payload
+          }
+        };
+
       default:
         return state;
     }

package/lib/cjs/controller/componentController.js

@@ -8,7 +8,7 @@ exports.shouldShowWebChatContainer = exports.shouldShowReconnectChatPane = expor
 var _ConversationState = require("../contexts/common/ConversationState");
 
 const shouldShowChatButton = state => {
-  return state.appStates.isMinimized || state.appStates.conversationState === _ConversationState.ConversationState.Closed;
+  return (state.appStates.isMinimized || state.appStates.conversationState === _ConversationState.ConversationState.Closed) && state.appStates.skipChatButtonRendering == false; // Do not show chat button in case of popout
 };
 
 exports.shouldShowChatButton = shouldShowChatButton;

package/lib/esm/common/Constants.js

@@ -4,6 +4,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 export class Constants {}
 
+_defineProperty(Constants, "magicCodeBroadcastChannel", "MagicCodeChannel");
+
+_defineProperty(Constants, "magicCodeResponseBroadcastChannel", "MagicCodeResponseChannel");
+
 _defineProperty(Constants, "systemMessageTag", "system");
 
 _defineProperty(Constants, "userMessageTag", "user");
@@ -36,8 +40,6 @@ _defineProperty(Constants, "false", "false");
 
 _defineProperty(Constants, "maximumUnreadMessageCount", 99);
 
-_defineProperty(Constants, "widgetStateDataKey", "LcwChatWidgetState");
-
 _defineProperty(Constants, "channelIdKey", "ChannelId-");
 
 _defineProperty(Constants, "ChannelId", "lcw");
@@ -72,6 +74,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");
@@ -146,6 +156,8 @@ _defineProperty(Constants, "internetConnectionTestUrl", "https://ocsdk-prod.azur
 
 _defineProperty(Constants, "internetConnectionTestUrlText", "Omnichannel Connect Test");
 
+_defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChanged");
+
 export 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);
 export class HtmlIdNames {}
 

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

@@ -26,19 +26,28 @@ export let BroadcastEvent; // Events being logged
 
 (function (BroadcastEvent) {
   BroadcastEvent["LoadPostChatSurvey"] = "LoadPostChatSurvey";
-  BroadcastEvent["EndChat"] = "ChatEnded";
+  BroadcastEvent["ChatEnded"] = "ChatEnded";
   BroadcastEvent["NewMessageNotification"] = "NewMessageNotification";
   BroadcastEvent["UnreadMessageCount"] = "UnreadMessageCount";
-  BroadcastEvent["ChatWidgetStateChanged"] = "ChatWidgetStateChanged";
+  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 || (BroadcastEvent = {}));
 
 export let TelemetryEvent;
@@ -90,8 +99,9 @@ export let 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";
@@ -116,6 +126,8 @@ export let 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/esm/common/utils.js

@@ -1,5 +1,6 @@
 import { AriaTelemetryConstants, Constants, LocaleConstants } from "./Constants";
 import { KeyCodes } from "./KeyCodes";
+import { BroadcastEvent } from "./telemetry/TelemetryConstants";
 
 const getElementBySelector = selector => {
   let element;
@@ -287,4 +288,10 @@ export const getDomain = hostValue => {
   }
 
   return AriaTelemetryConstants.Public;
+};
+export const getWidgetCacheId = (orgId, widgetId) => {
+  return `${Constants.ChatWidgetStateChangedPrefix}_${orgId}_${widgetId}`;
+};
+export const getWidgetEndChatEventName = (orgId, widgetId) => {
+  return `${BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
 };

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

@@ -1,6 +1,6 @@
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect, useState } from "react";
-import { ChatButton } from "@microsoft/omnichannel-chat-components";
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useRef, useState } from "react";
+import { BroadcastService, ChatButton } from "@microsoft/omnichannel-chat-components";
 import { Constants } from "../../common/Constants";
 import { setFocusOnElement } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
@@ -10,7 +10,7 @@ import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
 import { defaultOutOfOfficeChatButtonStyleProps } from "./common/styleProps/defaultOutOfOfficeChatButtonStyleProps";
 import useChatContextStore from "../../hooks/useChatContextStore";
 export 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] = useChatContextStore();
   const {
@@ -20,6 +20,7 @@ export const ChatButtonStateful = props => {
   } = props; //Setting OutOfOperatingHours Flag
 
   const [outOfOperatingHours, setOutOfOperatingHours] = 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 = useRef(state.appStates.proactiveChatStates.proactiveChatInNewWindow);
   const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeChatButtonStyleProps, outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.styleProps);
   const controlProps = {
     id: "oc-lcw-chat-button",
@@ -27,13 +28,18 @@ export 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.maximumUnreadMessageCount ? Constants.maximumUnreadMessageCount.toString() + "+" : state.appStates.unreadMessageCount.toString() : "0",
+    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > 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.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.LCWChatButtonClicked
       });
 
-      if (state.appStates.isMinimized) {
+      if (proactiveChatInNewWindow.current) {
+        const proactiveChatIsInPopoutModeEvent = {
+          eventName: BroadcastEvent.ProactiveChatIsInPopoutMode
+        };
+        BroadcastService.postMessage(proactiveChatIsInPopoutModeEvent);
+      } else if (state.appStates.isMinimized) {
         dispatch({
           type: LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -42,6 +48,7 @@ export 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 = {
@@ -50,6 +57,10 @@ export const ChatButtonStateful = props => {
     titleText: "We're Offline",
     subtitleText: "No agents available",
     onClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWChatButtonClicked
+      });
+
       if (state.appStates.isMinimized) {
         dispatch({
           type: LiveChatWidgetActionType.SET_MINIMIZED,
@@ -62,6 +73,7 @@ export 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)
   };
   useEffect(() => {
@@ -83,6 +95,9 @@ export const ChatButtonStateful = props => {
       });
     }
   }, []);
+  useEffect(() => {
+    proactiveChatInNewWindow.current = state.appStates.proactiveChatStates.proactiveChatInNewWindow;
+  }, [state.appStates.proactiveChatStates.proactiveChatInNewWindow]);
   return /*#__PURE__*/React.createElement(ChatButton, {
     componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
     controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,

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

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

package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -316,7 +316,9 @@ export const dummyDefaultProps = {
       hideChatTextContainer: false,
       hideChatSubtitle: false,
       hideChatTitle: false,
-      hideNotificationBubble: true
+      hideNotificationBubble: true,
+      unreadMessageString: "new messages",
+      largeUnreadMessageString: "99+"
     },
     styleProps: {
       generalStyleProps: {
@@ -1676,6 +1678,10 @@ export 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/esm/components/livechatwidget/common/endChat.js

@@ -7,8 +7,8 @@ import { WebChatStoreLoader } from "../../webchatcontainerstateful/webchatcontro
 import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
 import { PostChatSurveyMode } from "../../postchatsurveypanestateful/enums/PostChatSurveyMode";
 import { Constants } from "../../../common/Constants";
+import { getWidgetEndChatEventName } from "../../../common/utils"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const prepareEndChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state) => {
   var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4;
 
@@ -19,7 +19,7 @@ const prepareEndChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
   if (isPostChatEnabled === "true" && (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.canRenderPostChat) === Constants.truePascal) {
     const skipEndChatSDK = false;
     const skipCloseChat = true;
-    await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat);
+    await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat, true);
 
     if (postChatSurveyMode === PostChatSurveyMode.Embed) {
       const loadPostChatEvent = {
@@ -33,12 +33,12 @@ const prepareEndChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
       });
     }
   } else {
-    await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter);
+    await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, true);
   }
 }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
-const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat) => {
+const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab) => {
   if (!skipEndChatSDK) {
     try {
       TelemetryHelper.logSDKEvent(LogLevel.INFO, {
@@ -46,6 +46,10 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
       });
       await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.endChat()); // Need to clear these states immediately when chat ended from OC.
 
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CUSTOM_CONTEXT,
+        payload: undefined
+      });
       dispatch({
         type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
         payload: undefined
@@ -61,6 +65,7 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
           exception: ex
         }
       });
+      postMessageToOtherTab = false;
     }
   }
 
@@ -90,9 +95,19 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
         type: LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
         payload: null
       });
-      BroadcastService.postMessage({
-        eventName: BroadcastEvent.EndChat
+      dispatch({
+        type: LiveChatWidgetActionType.SET_UNREAD_MESSAGE_COUNT,
+        payload: 0
       });
+
+      if (postMessageToOtherTab) {
+        var _chatSDK$omnichannelC, _chatSDK$omnichannelC2;
+
+        const endChatEventName = 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);
+        BroadcastService.postMessage({
+          eventName: endChatEventName
+        });
+      }
     } catch (error) {
       TelemetryHelper.logActionEvent(LogLevel.ERROR, {
         Event: TelemetryEvent.CloseChatMethodException,

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

@@ -26,10 +26,12 @@ import gifUploadMiddleware from "../../webchatcontainerstateful/webchatcontrolle
 import htmlPlayerMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlPlayerMiddleware";
 import htmlTextMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlTextMiddleware";
 import preProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware";
-import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware";
+import { createCardActionMiddleware } from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/cardActionMiddleware";
+import createMessageTimeStampMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageTimestampMiddleware"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export 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,
     ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.localizedTexts)
@@ -91,7 +93,7 @@ export const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatS
     };
 
     webChatStore = createStore({}, //initial state
-    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_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, createConversationEndMiddleware(conversationEndCallback), createDataMaskingMiddleware((_state$domainStates$l7 = state.domainStates.liveChatConfig) === null || _state$domainStates$l7 === void 0 ? void 0 : _state$domainStates$l7.DataMaskingInfo), gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware, createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_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, createConversationEndMiddleware(conversationEndCallback), createDataMaskingMiddleware((_state$domainStates$l7 = state.domainStates.liveChatConfig) === null || _state$domainStates$l7 === void 0 ? void 0 : _state$domainStates$l7.DataMaskingInfo), createMessageTimeStampMiddleware, gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware, createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware, // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ...(((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.storeMiddlewares) ?? []));
     WebChatStoreLoader.store = webChatStore;
   } // Initialize the remaining Web Chat props
@@ -109,7 +111,8 @@ export const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatS
     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.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.webChatProps) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.typingIndicatorMiddleware,
     onTelemetry: createWebChatTelemetry(),
-    ...((_props$webChatContain21 = props.webChatContainerProps) === null || _props$webChatContain21 === void 0 ? void 0 : _props$webChatContain21.webChatProps)
+    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;
 };