@microsoft/omnichannel-chat-widget 0.1.0-main.72620c9 → 0.1.0-main.78a2099

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");
@@ -45,8 +49,6 @@ _defineProperty(Constants, "false", "false");
 
 _defineProperty(Constants, "maximumUnreadMessageCount", 99);
 
-_defineProperty(Constants, "widgetStateDataKey", "LcwChatWidgetState");
-
 _defineProperty(Constants, "channelIdKey", "ChannelId-");
 
 _defineProperty(Constants, "ChannelId", "lcw");
@@ -81,6 +83,8 @@ _defineProperty(Constants, "averageWaitTimeMessageTag", "averagewaittime");
 
 _defineProperty(Constants, "message", "message");
 
+_defineProperty(Constants, "hiddenTag", "Hidden");
+
 _defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
 
 _defineProperty(Constants, "maxUploadFileSize", "500000");
@@ -155,6 +159,8 @@ _defineProperty(Constants, "internetConnectionTestUrl", "https://ocsdk-prod.azur
 
 _defineProperty(Constants, "internetConnectionTestUrlText", "Omnichannel Connect Test");
 
+_defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChanged");
+
 const Regex = (_class = class Regex {}, _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
 exports.Regex = Regex;
 

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

@@ -37,18 +37,24 @@ exports.BroadcastEvent = BroadcastEvent;
 
 (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["ClosePopoutWindow"] = "ClosePopoutWindow";
   BroadcastEvent["InvalidAdaptiveCardFormat"] = "InvalidAdaptiveCardFormat";
   BroadcastEvent["NewMessageSent"] = "NewMessageSent";
   BroadcastEvent["NewMessageReceived"] = "NewMessageReceived";
   BroadcastEvent["RedirectPageRequest"] = "RedirectPageRequest";
+  BroadcastEvent["StartChat"] = "StartChat";
   BroadcastEvent["StartChatSkippingChatButtonRendering"] = "StartChatSkippingChatButtonRendering";
   BroadcastEvent["StartUnauthenticatedReconnectChat"] = "StartUnauthenticatedReconnectChat";
+  BroadcastEvent["EndChat"] = "EndChat";
+  BroadcastEvent["SetCustomContext"] = "SetCustomContext";
+  BroadcastEvent["ChatRetrievedFromCache"] = "ChatRetrievedFromCache";
 })(BroadcastEvent || (exports.BroadcastEvent = BroadcastEvent = {}));
 
 let TelemetryEvent;
@@ -103,6 +109,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["StartChatEventRecevied"] = "StartChatEventReceived";
   TelemetryEvent["EndChatSDKCall"] = "EndChatCall";
   TelemetryEvent["EndChatEventReceived"] = "EndChatEventReceived";
+  TelemetryEvent["ClosePopoutWindowEventRecevied"] = "ClosePopoutWindowEventRecevied";
   TelemetryEvent["OnNewMessageFailed"] = "OnNewMessageFailed";
   TelemetryEvent["OnNewMessageAudioNotificationFailed"] = "OnNewMessageAudioNotificationFailed";
   TelemetryEvent["DownloadTranscriptResponseNullOrUndefined"] = "DownloadTranscriptResponseNullOrUndefined";
@@ -127,6 +134,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";
@@ -152,6 +161,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["ReconnectChatMinimize"] = "ReconnectChatMinimize";
   TelemetryEvent["MessageSent"] = "MessageSent";
   TelemetryEvent["MessageReceived"] = "MessageReceived";
+  TelemetryEvent["CustomContextReceived"] = "CustomContextReceived";
 })(TelemetryEvent || (exports.TelemetryEvent = TelemetryEvent = {}));
 
 class TelemetryConstants {
@@ -194,6 +204,9 @@ class TelemetryConstants {
       case TelemetryEvent.PreChatSurveyStartChatMethodFailed:
       case TelemetryEvent.HeaderCloseButtonClicked:
       case TelemetryEvent.HeaderMinimizeButtonClicked:
+      case TelemetryEvent.MessageSent:
+      case TelemetryEvent.MessageReceived:
+      case TelemetryEvent.CustomContextReceived:
         return ScenarioType.ACTIONS;
 
       case TelemetryEvent.StartChatSDKCall:

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

@@ -15,6 +15,8 @@ var _consoleLogger = require("./loggers/consoleLogger");
 
 var _defaultAriaConfig = require("./defaultConfigs/defaultAriaConfig");
 
+var _TelemetryHelper = require("./TelemetryHelper");
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 class TelemetryTimers {}
@@ -92,7 +94,11 @@ const RegisterLoggers = () => {
 
       const logLevel = telemetryEvent.logLevel ?? _TelemetryConstants.LogLevel.INFO;
       const scenarioType = ((_payload = telemetryEvent.payload) === null || _payload === void 0 ? void 0 : _payload.scenarioType) ?? _TelemetryConstants.ScenarioType.UNDEFINED;
-      logger.log(logLevel, parseInput(telemetryEvent === null || telemetryEvent === void 0 ? void 0 : telemetryEvent.payload, scenarioType));
+      const telemetryInput = parseInput(telemetryEvent === null || telemetryEvent === void 0 ? void 0 : telemetryEvent.payload, scenarioType);
+      telemetryInput.telemetryInfo = {
+        telemetryInfo: _TelemetryHelper.TelemetryHelper.buildTelemetryEvent(logLevel, telemetryInput)
+      };
+      logger.log(logLevel, telemetryInput);
     });
   };
 

package/lib/cjs/common/telemetry/loggers/ariaTelemetryLogger.js

@@ -15,8 +15,6 @@ var _Enums = require("@microsoft/omnichannel-chat-sdk/lib/external/aria/common/E
 
 var _Constants = require("../../Constants");
 
-var _TelemetryHelper = require("../TelemetryHelper");
-
 var _TelemetryManager = require("../TelemetryManager");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,18 +65,19 @@ const ariaTelemetryLogger = (ariaTelemetryKey, disabledCookieUsage, collectiorUr
     log: (logLevel, telemetryInput) => {
       try {
         let property;
+        const telemetryInfo = telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.telemetryInfo;
         const eventProperties = new _AWTEventProperties.default();
-
-        const event = _TelemetryHelper.TelemetryHelper.buildTelemetryEvent(logLevel, telemetryInput);
-
         eventProperties.setName(telemetryInput.scenarioType);
 
-        for (const key of Object.keys(event)) {
-          property = typeof event[key] === "object" ? JSON.stringify(event[key]) : event[key];
-          eventProperties.setProperty(key, property);
+        if (telemetryInfo) {
+          for (const key of Object.keys(telemetryInfo)) {
+            property = typeof telemetryInfo[key] === "object" ? JSON.stringify(telemetryInfo[key]) : telemetryInfo[key];
+            eventProperties.setProperty(key, property);
+          }
+
+          eventProperties.setPropertyWithPii(ariaTelemetryApplicationName, _Constants.Constants.LiveChatWidget, _Enums.AWTPiiKind.GenericData);
         }
 
-        eventProperties.setPropertyWithPii(ariaTelemetryApplicationName, _Constants.Constants.LiveChatWidget, _Enums.AWTPiiKind.GenericData);
         logger() ? logger().logEvent(eventProperties) : console.log("Unable to initialize aria logger");
       } catch (error) {
         console.error("Error in logging telemetry to Aria logger:" + error);

package/lib/cjs/common/telemetry/loggers/consoleLogger.js

@@ -13,27 +13,28 @@ const consoleLogger = () => {
   const consoleLogger = {
     log: (logLevel, telemetryInput) => {
       const payload = telemetryInput !== null && telemetryInput !== void 0 && telemetryInput.payload && Object.keys(telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.payload).length > 0 ? telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.payload : "";
+      const telemetryInfo = telemetryInput !== null && telemetryInput !== void 0 && telemetryInput.telemetryInfo && Object.keys(telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.telemetryInfo).length > 0 ? telemetryInput === null || telemetryInput === void 0 ? void 0 : telemetryInput.telemetryInfo : "";
 
       try {
         switch (logLevel) {
           case _TelemetryConstants.LogLevel.INFO:
-            console.info(_Constants.Constants.LiveChatWidget, payload);
+            console.info(_Constants.Constants.LiveChatWidget, payload, telemetryInfo);
             break;
 
           case _TelemetryConstants.LogLevel.DEBUG:
-            console.debug(_Constants.Constants.LiveChatWidget, payload);
+            console.debug(_Constants.Constants.LiveChatWidget, payload, telemetryInfo);
             break;
 
           case _TelemetryConstants.LogLevel.WARN:
-            console.warn(_Constants.Constants.LiveChatWidget, payload);
+            console.warn(_Constants.Constants.LiveChatWidget, payload, telemetryInfo);
             break;
 
           case _TelemetryConstants.LogLevel.ERROR:
-            console.error(_Constants.Constants.LiveChatWidget, payload);
+            console.error(_Constants.Constants.LiveChatWidget, payload, telemetryInfo);
             break;
 
           default:
-            console.debug(_Constants.Constants.LiveChatWidget, payload);
+            console.debug(_Constants.Constants.LiveChatWidget, payload, telemetryInfo);
             break;
         }
       } catch (ex) {

package/lib/cjs/common/utils.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getTimestampHourMinute = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = void 0;
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = void 0;
 
 var _Constants = require("./Constants");
 
 var _KeyCodes = require("./KeyCodes");
 
+var _TelemetryConstants = require("./telemetry/TelemetryConstants");
+
 const getElementBySelector = selector => {
   let element;
 
@@ -333,6 +335,7 @@ const createTimer = () => {
 
   };
 }; // Returns the domain of the org
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
 exports.createTimer = createTimer;
@@ -347,4 +350,16 @@ const getDomain = hostValue => {
   return _Constants.AriaTelemetryConstants.Public;
 };
 
-exports.getDomain = getDomain;
+exports.getDomain = getDomain;
+
+const getWidgetCacheId = (orgId, widgetId) => {
+  return `${_Constants.Constants.ChatWidgetStateChangedPrefix}_${orgId}_${widgetId}`;
+};
+
+exports.getWidgetCacheId = getWidgetCacheId;
+
+const getWidgetEndChatEventName = (orgId, widgetId) => {
+  return `${_TelemetryConstants.BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
+};
+
+exports.getWidgetEndChatEventName = getWidgetEndChatEventName;

package/lib/cjs/components/callingcontainerstateful/CallingContainerStateful.js

@@ -206,6 +206,20 @@ const CallingContainerStateful = props => {
         });
       }
     });
+    window.addEventListener("beforeunload", () => {
+      if (state.uiStates.isIncomingCall) {
+        voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.rejectCall();
+      } else {
+        voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.stopCall();
+      }
+
+      voiceVideoCallingSdk === null || voiceVideoCallingSdk === void 0 ? void 0 : voiceVideoCallingSdk.close();
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_E2VV_ENABLED,
+        payload: false
+      });
+      resetCallingStates(true);
+    });
   }, []);
   const controlProps = {
     id: "oc-lcw-callingcontainer",

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 {
@@ -50,14 +50,20 @@ const ChatButtonStateful = props => {
     dir: state.domainStates.globalDir,
     titleText: "Let's Chat!",
     subtitleText: "We're online.",
-    hideNotificationBubble: !(state.appStates.isMinimized === true && state.appStates.unreadMessageCount > 0) || (buttonProps === null || buttonProps === void 0 ? void 0 : (_buttonProps$controlP = buttonProps.controlProps) === null || _buttonProps$controlP === void 0 ? void 0 : _buttonProps$controlP.hideNotificationBubble) === true,
-    unreadMessageCount: state.appStates.unreadMessageCount ? state.appStates.unreadMessageCount > _Constants.Constants.maximumUnreadMessageCount ? _Constants.Constants.maximumUnreadMessageCount.toString() + "+" : state.appStates.unreadMessageCount.toString() : "0",
+    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 ? (_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 (state.appStates.proactiveChatStates.proactiveChatInNewWindow) {
+        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 +72,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 +93,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)(() => {

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) {
@@ -138,7 +147,7 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
 
       if (value.attachments && value.attachments.length > 0 && value.attachments[0].name) {
         fileAttachmentName = value.attachments[0].name;
-        value.content = attachmentMessage ?? "The following attachment was uploaded during the conversation:" + fileAttachmentName;
+        value.content = attachmentMessage ? attachmentMessage + " " + fileAttachmentName : "The following attachment was uploaded during the conversation: " + fileAttachmentName;
       }
     }
 

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

@@ -274,18 +274,6 @@ const dummyDefaultProps = {
           width: "50px",
           fontSize: "18px"
         },
-        currentCallTimerStyleProps: {
-          borderRadius: "2px",
-          margin: "1px",
-          color: "#FFFFFF",
-          paddingTop: "18px",
-          fontSize: 12,
-          fontFamily: "Segoe UI, Arial, sans-serif",
-          backgroundColor: "darkgrey",
-          height: "45px",
-          width: "50px",
-          textAlign: "center"
-        },
         videoTileStyleProps: {
           width: "100%",
           marginLeft: "auto",
@@ -349,7 +337,9 @@ const dummyDefaultProps = {
       hideChatTextContainer: false,
       hideChatSubtitle: false,
       hideChatTitle: false,
-      hideNotificationBubble: true
+      hideNotificationBubble: true,
+      unreadMessageString: "new messages",
+      largeUnreadMessageString: "99+"
     },
     styleProps: {
       generalStyleProps: {
@@ -1709,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

@@ -23,6 +23,8 @@ var _PostChatSurveyMode = require("../../postchatsurveypanestateful/enums/PostCh
 
 var _Constants = require("../../../common/Constants");
 
+var _utils = require("../../../common/utils");
+
 // 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;
@@ -34,7 +36,7 @@ const prepareEndChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
   if (isPostChatEnabled === "true" && (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.canRenderPostChat) === _Constants.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.PostChatSurveyMode.Embed) {
       const loadPostChatEvent = {
@@ -49,21 +51,30 @@ 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
 
 
 exports.prepareEndChat = prepareEndChat;
 
-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.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.EndChatSDKCall
       });
 
-      await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.endChat());
+      await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.endChat()); // Need to clear these states immediately when chat ended from OC.
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_TOKEN,
+        payload: undefined
+      });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
+        payload: undefined
+      });
     } catch (ex) {
       _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
         Event: _TelemetryConstants.TelemetryEvent.EndChatSDKCallFailed,
@@ -71,6 +82,8 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
           exception: ex
         }
       });
+
+      postMessageToOtherTab = false;
     }
   }
 
@@ -100,18 +113,20 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
         payload: null
       });
-      dispatch({
-        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_TOKEN,
-        payload: undefined
-      });
-      dispatch({
-        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
-        payload: undefined
-      });
 
       _omnichannelChatComponents.BroadcastService.postMessage({
-        eventName: _TelemetryConstants.BroadcastEvent.EndChat
+        eventName: _TelemetryConstants.BroadcastEvent.ChatEnded
       });
+
+      if (postMessageToOtherTab) {
+        var _chatSDK$omnichannelC, _chatSDK$omnichannelC2;
+
+        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);
+
+        _omnichannelChatComponents.BroadcastService.postMessage({
+          eventName: endChatEventName
+        });
+      }
     } catch (error) {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
         Event: _TelemetryConstants.TelemetryEvent.CloseChatMethodException,

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

@@ -63,11 +63,13 @@ var _preProcessingMiddleware = _interopRequireDefault(require("../../webchatcont
 
 var _sanitizationMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"));
 
+var _cardActionMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/cardActionMiddleware");
+
 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)
@@ -123,6 +125,10 @@ const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles)
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_TOKEN,
         payload: undefined
       });
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
+        payload: undefined
+      });
     };
 
     webChatStore = (0, _botframeworkWebchat.createStore)({}, //initial state
@@ -144,7 +150,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;
 };