@microsoft/omnichannel-chat-widget 0.1.0-main.fb426ed → 1.0.0

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,16 +10,16 @@ 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 {
     buttonProps,
     outOfOfficeButtonProps,
     startChat
-  } = props; //Setting OutOfOperatingHours Flag
-
+  } = 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 +27,17 @@ 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 +46,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 +55,9 @@ 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,18 +70,17 @@ 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(() => {
     if (state.appStates.outsideOperatingHours) {
       setOutOfOperatingHours(true);
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.LCWChatButtonShow,
       ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
     });
-
     if (state.uiStates.focusChatButton) {
       setFocusOnElement(document.getElementById((controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-chat-button"));
     } else {
@@ -83,6 +90,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/chatbuttonstateful/common/styleProps/defaultOutOfOfficeChatButtonStyleProps.js

@@ -1,5 +1,8 @@
 export const defaultOutOfOfficeChatButtonStyleProps = {
   iconStyleProps: {
     backgroundColor: "#000000"
+  },
+  subtitleStyleProps: {
+    margin: "0px 10px 0px 10px"
   }
 };

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

@@ -4,21 +4,17 @@ import React, { useEffect } from "react";
 import { findAllFocusableElement, findParentFocusableElementsWithoutChildContainer, preventFocusToMoveOutOfElement, setFocusOnElement, setFocusOnSendBox, setTabIndices } from "../../common/utils";
 import { DimLayer } from "../dimlayer/DimLayer";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
-import { NotificationHandler } from "../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
-import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import useChatAdapterStore from "../../hooks/useChatAdapterStore";
-import useChatContextStore from "../../hooks/useChatContextStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatContextStore from "../../hooks/useChatContextStore";
+import { ConversationEndEntity } from "../../contexts/common/ConversationEndEntity";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ConfirmationPaneStateful = props => {
   const initialTabIndexMap = new Map();
   let elements = [];
   const [state, dispatch] = useChatContextStore();
-  const {
-    prepareEndChat
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
   const [adapter] = useChatAdapterStore();
   const controlProps = {
     id: "oc-lcw-confirmation-pane",
@@ -32,19 +28,15 @@ export const ConfirmationPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
         payload: false
       });
-
-      try {
-        setTabIndices(elements, initialTabIndexMap, true);
-        await prepareEndChat(adapter, state);
-      } catch (ex) {
-        TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
-          Event: TelemetryEvent.GetConversationDetailsCallFailed,
-          ExceptionDetails: {
-            exception: `Get Conversation Details Call Failed : ${ex}`
-          }
-        });
-        NotificationHandler.notifyError(NotificationScenarios.Connection, "Get Conversation Details Call Failed: " + ex);
-      }
+      setTabIndices(elements, initialTabIndexMap, true);
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY,
+        payload: ConversationEndEntity.Customer
+      });
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConversationEndedByCustomer,
+        Description: "Conversation is ended by customer."
+      });
     },
     onCancel: () => {
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -55,38 +47,35 @@ export const ConfirmationPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
         payload: false
       });
-      const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
-
-      if (previousFocused) {
-        setFocusOnElement(previousFocused);
+      const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+      if (previousFocusedElementId) {
+        setFocusOnElement("#" + previousFocusedElementId);
         dispatch({
-          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
           payload: null
         });
       } else {
         setFocusOnSendBox();
       }
-
       setTabIndices(elements, initialTabIndexMap, true);
     },
     ...(props === null || props === void 0 ? void 0 : props.controlProps)
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     preventFocusToMoveOutOfElement(controlProps.id);
     const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
-
     if (focusableElements) {
       focusableElements[0].focus();
     }
-
     elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
     setTabIndices(elements, initialTabIndexMap, false);
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.ConfirmationPaneLoaded
     });
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/React.createElement(ConfirmationPane, {
     componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -12,34 +12,29 @@ import useChatContextStore from "../../hooks/useChatContextStore";
 import useChatSDKStore from "../../hooks/useChatSDKStore";
 export const EmailTranscriptPaneStateful = props => {
   var _props$controlProps;
-
   const initialTabIndexMap = new Map();
   let elements = [];
-  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = useChatSDKStore();
   const [initialEmail, setInitialEmail] = useState("");
-
   const closeEmailTranscriptPane = () => {
     dispatch({
       type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
       payload: false
     });
-    const previousFocused = state.appStates.previousElementOnFocusBeforeModalOpen;
-
-    if (previousFocused) {
-      setFocusOnElement(previousFocused);
+    const previousFocusedElementId = state.appStates.previousElementIdOnFocusBeforeModalOpen;
+    if (previousFocusedElementId) {
+      setFocusOnElement("#" + previousFocusedElementId);
     } else {
       setFocusOnSendBox();
     }
-
     dispatch({
-      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+      type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
       payload: null
     });
     setTabIndices(elements, initialTabIndexMap, true);
   };
-
   const controlProps = {
     id: "oclcw-emailTranscriptDialogContainer",
     dir: state.domainStates.globalDir,
@@ -49,7 +44,6 @@ export const EmailTranscriptPaneStateful = props => {
         emailAddress: email,
         attachmentMessage: (props === null || props === void 0 ? void 0 : props.attachmentMessage) ?? "The following attachment was uploaded during the conversation:"
       };
-
       try {
         await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.emailLiveChatTranscript(chatTranscriptBody));
         TelemetryHelper.logActionEvent(LogLevel.INFO, {
@@ -78,16 +72,15 @@ export const EmailTranscriptPaneStateful = props => {
     },
     ...props.controlProps,
     inputInitialText: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.inputInitialText) ?? initialEmail
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     preventFocusToMoveOutOfElement(controlProps.id);
     const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
-
     if (focusableElements) {
       focusableElements[0].focus();
     }
-
     elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
     setTabIndices(elements, initialTabIndexMap, false);
     setInitialEmail(state.appStates.preChatResponseEmail);
@@ -95,7 +88,7 @@ export const EmailTranscriptPaneStateful = props => {
       Event: TelemetryEvent.EmailTranscriptLoaded
     });
   }, [initialEmail]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/React.createElement(InputValidationPane, {
     componentOverrides: props.componentOverrides,

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.spec.js

@@ -19,10 +19,10 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
       await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
-      expect(chatSDK.emailLiveChatTranscript).toHaveBeenCalledTimes(1); // eslint-disable-next-line no-empty
+      expect(chatSDK.emailLiveChatTranscript).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line no-empty
     } catch (ex) {}
   });
   it("Method emailLiveChatTranscript throws exception", async () => {
@@ -39,9 +39,9 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
-      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }
@@ -59,9 +59,9 @@ describe("EmailTranscriptPaneStateful unit test", () => {
       attachmentMessage: "sample",
       locale: "sample"
     };
-
     try {
-      await chatSDK.emailLiveChatTranscript(chatTranscriptBody); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.emailLiveChatTranscript(chatTranscriptBody);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }

package/lib/esm/components/footerstateful/FooterStateful.js

@@ -10,22 +10,22 @@ import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontro
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { downloadTranscript } from "./downloadtranscriptstateful/DownloadTranscriptStateful";
 import useChatContextStore from "../../hooks/useChatContextStore";
-import useChatSDKStore from "../../hooks/useChatSDKStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatSDKStore from "../../hooks/useChatSDKStore";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const FooterStateful = props => {
   var _footerProps$controlP3, _footerProps$controlP4;
-
-  const [state, dispatch] = useChatContextStore(); // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
+  const [state, dispatch] = useChatContextStore();
+  // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
   // but hide it visually in certain states (e.g., loading state) and show in some other states (e.g. active state).
   // The reason for this approach is to make sure that state variables for audio notification work correctly after minimizing
-
   const {
     footerProps,
     downloadTranscriptProps,
     audioNotificationProps,
     hideFooterDisplay
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = useChatSDKStore();
   const controlProps = {
     id: "oc-lcw-footer",
@@ -49,21 +49,17 @@ export const FooterStateful = props => {
     },
     onEmailTranscriptClick: () => {
       var _footerProps$controlP, _footerProps$controlP2;
-
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.EmailTranscriptButtonClicked,
         Description: "Email Transcript button clicked."
       });
-      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? "oc-lcw-footer-emailtranscript-button";
-      const emailTranscriptButton = document.getElementById(emailTranscriptButtonId);
-
-      if (emailTranscriptButton) {
+      const emailTranscriptButtonId = (footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP = footerProps.controlProps) === null || _footerProps$controlP === void 0 ? void 0 : (_footerProps$controlP2 = _footerProps$controlP.emailTranscriptButtonProps) === null || _footerProps$controlP2 === void 0 ? void 0 : _footerProps$controlP2.id) ?? `${controlProps.id}-emailtranscript-button`;
+      if (emailTranscriptButtonId) {
         dispatch({
-          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
-          payload: emailTranscriptButton
+          type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT_ID,
+          payload: emailTranscriptButtonId
         });
       }
-
       dispatch({
         type: LiveChatWidgetActionType.SET_SHOW_EMAIL_TRANSCRIPT_PANE,
         payload: true
@@ -80,18 +76,12 @@ export const FooterStateful = props => {
       });
     },
     ...(footerProps === null || footerProps === void 0 ? void 0 : footerProps.controlProps),
-    audioNotificationButtonProps: { ...(footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP3 = footerProps.controlProps) === null || _footerProps$controlP3 === void 0 ? void 0 : _footerProps$controlP3.audioNotificationButtonProps),
+    audioNotificationButtonProps: {
+      ...(footerProps === null || footerProps === void 0 ? void 0 : (_footerProps$controlP3 = footerProps.controlProps) === null || _footerProps$controlP3 === void 0 ? void 0 : _footerProps$controlP3.audioNotificationButtonProps),
       isAudioMuted: state.appStates.isAudioMuted
     }
   };
-  const footerId = (controlProps === null || controlProps === void 0 ? void 0 : controlProps.id) ?? "oc-lcw-footer";
-  const footer = document.getElementById(footerId);
-
-  if (footer) {
-    footer.style.display = hideFooterDisplay ? "none" : "";
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Footer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideFooterDisplay && /*#__PURE__*/React.createElement(Footer, {
     componentOverrides: footerProps === null || footerProps === void 0 ? void 0 : footerProps.componentOverrides,
     controlProps: controlProps,
     styleProps: footerProps === null || footerProps === void 0 ? void 0 : footerProps.styleProps

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

@@ -3,27 +3,21 @@ import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcon
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
-
 const processDisplayName = displayName => {
   // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
   const displayNameRegex = ".+:.+";
   const matchedTeamsDisplayName = displayName.match(displayNameRegex);
-
   if (displayName.indexOf("teamsvisitor") >= 0 && matchedTeamsDisplayName && matchedTeamsDisplayName.length > 0) {
     displayName = "Customer";
   }
-
   return displayName;
 };
-
 const constructIconName = displayName => {
   if (!displayName) {
     return "";
   }
-
   let iconName = "C";
   const displayNameSplit = displayName.split(" ");
-
   if (displayNameSplit.length > 1) {
     // get the first letter of name and surname
     iconName = displayNameSplit[0][0] + displayNameSplit[1][0];
@@ -31,55 +25,42 @@ const constructIconName = displayName => {
     // get the first letter of name
     iconName = displayNameSplit[0][0];
   }
-
   return iconName;
 };
-
 const processCreatedDateTime = (createdDateTime, chatCount) => {
-  const formattedDate = new Date(createdDateTime); // TODO: Localization:
-
-  const formattedTimeString = formattedDate.toLocaleTimeString("en-us"
-  /* Bootstrapper.LiveChatConfiguration.chatWidgetLocale */
-  , {
+  const formattedDate = new Date(createdDateTime);
+  // TODO: Localization:
+  const formattedTimeString = formattedDate.toLocaleTimeString("en-us" /* Bootstrapper.LiveChatConfiguration.chatWidgetLocale */, {
     hour: "2-digit",
     minute: "2-digit"
   });
   const formattedSplitTimeString = formattedTimeString.split(" ");
   let finalizedTimeString = "";
-
   if (formattedSplitTimeString && formattedSplitTimeString.length > 1) {
     finalizedTimeString = formattedSplitTimeString[0] + " " + formattedSplitTimeString[1];
   }
-
   if (chatCount == 0) {
     return formattedDate.toLocaleDateString("en-us") + " " + finalizedTimeString;
   }
-
   return finalizedTimeString;
 };
-
 const processContent = (transcriptContent, isAgentChat, renderMarkDown) => {
   if (transcriptContent.toString().toLowerCase().indexOf(TranscriptConstants.TranscriptMessageEmojiMessageType) >= 0) {
     // eslint-disable-next-line no-useless-escape
     const emojiRegex = "<img src=\"http.*:\/\/.+\/objects\/.+\/views.+\">";
     const matchedEmojiImgTag = transcriptContent.match(emojiRegex);
-
     if (matchedEmojiImgTag && matchedEmojiImgTag.length > 0 && transcriptContent.toString().toLowerCase().indexOf(matchedEmojiImgTag[0]) >= 0) {
       transcriptContent = transcriptContent.replace(matchedEmojiImgTag[0], "");
     }
   }
-
   if (!isAgentChat && transcriptContent.toString().toLowerCase().indexOf("a href") >= 0 && transcriptContent.toString().toLowerCase().indexOf("target") >= 0) {
     transcriptContent = transcriptContent.slice(0, transcriptContent.toString().indexOf("target")) + " style='color:white' " + transcriptContent.slice(transcriptContent.toString().indexOf("target"));
   }
-
   if (renderMarkDown) {
     transcriptContent = renderMarkDown(transcriptContent);
   }
-
   return transcriptContent;
 };
-
 const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMessage) => {
   const chats = JSON.parse(chatTranscripts).reverse();
   const docTypeTag = "<!DOCTYPE html>";
@@ -94,8 +75,9 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
   let tabIndex = 1;
   const mainTranscriptSection = "<div class='allTranscripts' style='max-width:60%;min-width:30%;margin-left:20%;background-color:#FFFFFF;'>";
   let previousDisplayName = "";
-  let chatCount = 0; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let chatCount = 0;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   chats.forEach(value => {
     let dialogNameMarginTop = "6px";
     let dialogboxMarginleft = "40px";
@@ -105,8 +87,13 @@ 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) {
@@ -121,19 +108,15 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
         displayName = value.from.user.displayName;
         dialogColor = TranscriptConstants.CustomerDialogColor;
       }
-
       displayName = processDisplayName(displayName);
       iconName = constructIconName(displayName);
-
       if (value.attachments && value.attachments.length > 0 && value.attachments[0].name) {
         fileAttachmentName = value.attachments[0].name;
         value.content = attachmentMessage ? attachmentMessage + " " + fileAttachmentName : "The following attachment was uploaded during the conversation: " + fileAttachmentName;
       }
     }
-
     let displayNamePlaceholder = processCreatedDateTime(value.createdDateTime, chatCount);
     let iconPara = "";
-
     if (displayName !== previousDisplayName) {
       dialogboxMarginleft = "0px";
       displayNamePlaceholder = "<b>" + displayName + " </b> " + processCreatedDateTime(value.createdDateTime, chatCount);
@@ -144,17 +127,14 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
                             </div>";
       tabIndex++;
     }
-
     if (displayName !== previousDisplayName) {
       if (previousDisplayName === "") {
         dialogNameMarginTop = "0px";
       }
-
       if (previousDisplayName !== "") {
         dialogNameMarginTop = "20px";
       }
     }
-
     const displayNameDiv = "<div style='margin-right:-2px;margin-top:" + dialogNameMarginTop + ";margin-bottom:-2px;margin-left:42px;top:-2px;position:relative;'>\
                                     <font tabindex ='" + tabIndex + "' size = '1px' color='#000000' style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:500;'>\
                                         " + displayNamePlaceholder + "\
@@ -168,16 +148,14 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
   });
   const str = docTypeTag + docStartTag + docMetaTag + bodyStartTag + mainTranscriptSection + beautifiedChats + divEndTag + bodyEndTag + docEndTag;
   return str;
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+};
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError, attachmentMessage) => {
   let data = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getLiveChatTranscript());
-
   if (typeof data === Constants.String) {
     data = JSON.parse(data);
   }
-
   if (data[Constants.ChatMessagesJson] !== null && data[Constants.ChatMessagesJson] !== undefined) {
     const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
     const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));

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

@@ -14,10 +14,10 @@ describe("DownloadTranscriptStateful unit test", () => {
     };
     const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
     jest.spyOn(chatSDK, "getLiveChatTranscript").mockResolvedValue(Promise.resolve());
-
     try {
       await chatSDK.getLiveChatTranscript();
-      expect(chatSDK.getLiveChatTranscript).toHaveBeenCalledTimes(1); // eslint-disable-next-line no-empty
+      expect(chatSDK.getLiveChatTranscript).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line no-empty
     } catch (ex) {}
   });
   it("Method getLiveChatTranscript throws exception", async () => {
@@ -29,9 +29,9 @@ describe("DownloadTranscriptStateful unit test", () => {
     };
     const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
     jest.spyOn(chatSDK, "getLiveChatTranscript").mockRejectedValue(new Error(errorMessage));
-
     try {
-      await chatSDK.getLiveChatTranscript(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.getLiveChatTranscript();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }
@@ -44,9 +44,9 @@ describe("DownloadTranscriptStateful unit test", () => {
       widgetId: ""
     };
     const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
-
     try {
-      await chatSDK.getLiveChatTranscript(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      await chatSDK.getLiveChatTranscript();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (ex) {
       expect(ex.message).toEqual(errorMessage);
     }