npm - @microsoft/omnichannel-chat-widget - Versions diffs - 0.1.0-main.07f52ee - Mend

@microsoft/omnichannel-chat-widget 0.1.0-main.07f52ee

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (561) hide show

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

@@ -0,0 +1,202 @@
+import { Constants, HtmlAttributeNames, TranscriptConstants } from "../../../common/Constants";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+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];
+  } else if (displayNameSplit.length == 1) {
+    // 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 */
+  , {
+    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>";
+  const docStartTag = "<html>";
+  const docMetaTag = "<meta charset='UTF-8'>";
+  const docEndTag = "</html>";
+  const bodyStartTag = "<body bgcolor='" + TranscriptConstants.ChatTranscriptsBodyColor + "'>";
+  const bodyEndTag = "</body>";
+  const divEndTag = "</div>";
+  const mainDiv = "<div class='transcripts' style='width:80%;margin-left:10%;'>";
+  let beautifiedChats = "";
+  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
+  chats.forEach(value => {
+    let dialogNameMarginTop = "6px";
+    let dialogboxMarginleft = "40px";
+    let displayName = "User";
+    let iconName = "U";
+    let isAgentChat = false;
+    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) {
+      return;
+    } else if (value.from) {
+      if (value.from.application) {
+        displayName = value.from.application.displayName;
+        dialogColor = TranscriptConstants.AgentDialogColor;
+        fontColor = TranscriptConstants.AgentFontColor;
+        isAgentChat = true;
+      } else if (value.from.guest) {
+        displayName = value.from.guest.displayName;
+        dialogColor = TranscriptConstants.CustomerDialogColor;
+      } else if (value.from.user) {
+        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 ?? "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);
+      iconPara = "<div class='circle' style='display:inline-block;float:left;margin-right:5px;width:35px;height:35px;border-radius:20px;color:black;line-height:35px;text-align:center;background:" + dialogColor + ";'>\
+                            <font tabindex ='" + tabIndex + "' color =" + fontColor + " style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;'>\
+                                " + iconName + "\
+                            </font>\
+                            </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 + "\
+                                    </font>\
+                                </div>";
+    tabIndex++;
+    const dialogbox = "<div class='dialogbox' style='font-family:Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;word-break:break-word;min-height:20px;max-width:80%;display:inline-block;margin-left:" + dialogboxMarginleft + ";padding: 10px; background-color:" + dialogColor + "; border-radius: 0px 12px 12px 12px; left: 3px; top: 2px; '>";
+    beautifiedChats = beautifiedChats + mainDiv + iconPara + displayNameDiv + dialogbox + "<font tabindex= '" + tabIndex++ + "' color =" + fontColor + ">" + processContent(value.content, isAgentChat, renderMarkDown) + "</font>" + divEndTag + divEndTag;
+    previousDisplayName = displayName;
+    chatCount++;
+  });
+  const str = docTypeTag + docStartTag + docMetaTag + bodyStartTag + mainTranscriptSection + beautifiedChats + divEndTag + bodyEndTag + docEndTag;
+  return str;
+}; // 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));
+    const blob = new Blob([byteCharacters], {
+      "type": "text/html;charset=utf-8"
+    });
+    const link = document.createElement("a");
+    document.body.appendChild(link);
+    link.setAttribute(HtmlAttributeNames.download, TranscriptConstants.ChatTranscriptDownloadFile);
+    link.setAttribute(HtmlAttributeNames.href, URL.createObjectURL(blob));
+    link.setAttribute(HtmlAttributeNames.ariaHidden, "true");
+    link.click();
+  } else {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.DownloadTranscriptResponseNullOrUndefined,
+      ExceptionDetails: {
+        exception: "Download transcript failed: response null or undefined."
+      }
+    });
+    NotificationHandler.notifyError(NotificationScenarios.DownloadTranscriptError, bannerMessageOnError ?? Constants.defaultDownloadTranscriptError);
+  }
+};

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

@@ -0,0 +1,54 @@
+import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";
+import { cleanup } from "@testing-library/react";
+jest.mock("@microsoft/omnichannel-chat-sdk");
+describe("DownloadTranscriptStateful unit test", () => {
+  afterEach(() => {
+    cleanup;
+    jest.resetAllMocks();
+  });
+  it("Method getLiveChatTranscript is called", async () => {
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    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
+    } catch (ex) {}
+  });
+  it("Method getLiveChatTranscript throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    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
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+  it("Method getLiveChatTranscript undefined throws exception", async () => {
+    const errorMessage = "Error";
+    const omnichannelConfig = {
+      orgUrl: "",
+      orgId: "",
+      widgetId: ""
+    };
+    const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
+    try {
+      await chatSDK.getLiveChatTranscript(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (ex) {
+      expect(ex.message).toEqual(errorMessage);
+    }
+  });
+});

package/lib/esm/components/footerstateful/downloadtranscriptstateful/interfaces/IDownloadTranscriptProps.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/lib/esm/components/headerstateful/HeaderStateful.js ADDED Viewed

@@ -0,0 +1,92 @@
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useState } from "react";
+import { ConversationState } from "../../contexts/common/ConversationState";
+import { Header } from "@microsoft/omnichannel-chat-components";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { defaultOutOfOfficeHeaderStyleProps } from "./common/styleProps/defaultOutOfOfficeHeaderStyleProps";
+import useChatAdapterStore from "../../hooks/useChatAdapterStore";
+import useChatContextStore from "../../hooks/useChatContextStore";
+export const HeaderStateful = props => {
+  var _state$domainStates$l, _state$domainStates$l2, _headerProps$controlP, _headerProps$controlP2, _headerProps$controlP3, _outOfOfficeHeaderPro;
+  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [adapter] = useChatAdapterStore();
+  const {
+    headerProps,
+    outOfOfficeHeaderProps,
+    endChat
+  } = 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 outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
+  const controlProps = {
+    id: "oc-lcw-header",
+    dir: state.domainStates.globalDir,
+    onMinimizeClick: () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.HeaderMinimizeButtonClicked,
+        Description: "Header Minimize button clicked."
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    onCloseClick: async () => {
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.HeaderCloseButtonClicked,
+        Description: "Header Close button clicked."
+      });
+      if (state.appStates.conversationState === ConversationState.Active) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+          payload: true
+        });
+      } else if (state.appStates.conversationState === ConversationState.Postchat) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
+          payload: false
+        });
+        await endChat(adapter);
+      }
+      dispatch({
+        type: LiveChatWidgetActionType.SET_PREVIOUS_FOCUSED_ELEMENT,
+        payload: document.getElementById(`${controlProps.id}-closebutton`)
+      });
+    },
+    ...(headerProps === null || headerProps === void 0 ? void 0 : headerProps.controlProps),
+    hideTitle: state.appStates.conversationState === ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP = headerProps.controlProps) === null || _headerProps$controlP === void 0 ? void 0 : _headerProps$controlP.hideTitle),
+    hideIcon: state.appStates.conversationState === ConversationState.Loading || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP2 = headerProps.controlProps) === null || _headerProps$controlP2 === void 0 ? void 0 : _headerProps$controlP2.hideIcon),
+    hideCloseButton: state.appStates.conversationState === ConversationState.Loading || state.appStates.conversationState === ConversationState.Prechat || state.appStates.conversationState === ConversationState.ReconnectChat || (headerProps === null || headerProps === void 0 ? void 0 : (_headerProps$controlP3 = headerProps.controlProps) === null || _headerProps$controlP3 === void 0 ? void 0 : _headerProps$controlP3.hideCloseButton)
+  };
+  const outOfOfficeControlProps = {
+    id: "oc-lcw-header",
+    dir: state.domainStates.globalDir,
+    headerTitleProps: {
+      text: "We're Offline"
+    },
+    onMinimizeClick: () => {
+      dispatch({
+        type: LiveChatWidgetActionType.SET_MINIMIZED,
+        payload: true
+      });
+    },
+    ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
+    hideCloseButton: state.appStates.conversationState === ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
+  };
+  useEffect(() => {
+    if (state.appStates.outsideOperatingHours) {
+      setOutOfOperatingHours(true);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Header, {
+    componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
+    controlProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,
+    styleProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps
+  });
+};
+export default HeaderStateful;

package/lib/esm/components/headerstateful/common/styleProps/defaultOutOfOfficeHeaderStyleProps.js ADDED Viewed

@@ -0,0 +1,11 @@
+export const defaultOutOfOfficeHeaderStyleProps = {
+  generalStyleProps: {
+    borderRadius: "0px",
+    backgroundColor: "#000000",
+    height: "40px"
+  },
+  titleStyleProps: {
+    margin: "0 0 0 10px",
+    color: "White"
+  }
+};

package/lib/esm/components/headerstateful/interfaces/IHeaderStatefulParams.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/lib/esm/components/livechatwidget/LiveChatWidget.js ADDED Viewed

@@ -0,0 +1,21 @@
+import React, { useReducer, useState } from "react";
+import { ChatAdapterStore } from "../../contexts/ChatAdapterStore";
+import { ChatContextStore } from "../../contexts/ChatContextStore";
+import { ChatSDKStore } from "../../contexts/ChatSDKStore";
+import LiveChatWidgetStateful from "./livechatwidgetstateful/LiveChatWidgetStateful";
+import { createReducer } from "../../contexts/createReducer";
+import { getLiveChatWidgetContextInitialState } from "../../contexts/common/LiveChatWidgetContextInitialState";
+export const LiveChatWidget = props => {
+  const reducer = createReducer();
+  const [state, dispatch] = useReducer(reducer, getLiveChatWidgetContextInitialState(props)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [adapter, setAdapter] = useState(undefined);
+  return /*#__PURE__*/React.createElement(ChatSDKStore.Provider, {
+    value: props.chatSDK
+  }, /*#__PURE__*/React.createElement(ChatAdapterStore.Provider, {
+    value: [adapter, setAdapter]
+  }, /*#__PURE__*/React.createElement(ChatContextStore.Provider, {
+    value: [state, dispatch]
+  }, /*#__PURE__*/React.createElement(LiveChatWidgetStateful, props))));
+};
+export default LiveChatWidget;

package/lib/esm/components/livechatwidget/common/createAdapter.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationLevel } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationLevel";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const createAdapter = async chatSDK => {
+  const chatAdapterOptionalParams = {
+    IC3Adapter: {
+      options: {
+        callbackOnNotification: notification => {
+          if (notification.id === NotificationScenarios.InternetConnection && notification.level == NotificationLevel.Error) {
+            notification.message = defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION;
+          }
+          if (notification.id === NotificationScenarios.InternetConnection && notification.level == NotificationLevel.Success) {
+            notification.message = defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE;
+          }
+          if (notification.id && notification.message) {
+            NotificationHandler.notifyWithLevel(notification.id, notification.message, notification.level);
+          }
+        }
+      }
+    }
+  };
+  return await chatSDK.createChatAdapter(chatAdapterOptionalParams);
+};

package/lib/esm/components/livechatwidget/common/createFooter.js ADDED Viewed

@@ -0,0 +1,27 @@
+import FooterStateful from "../../footerstateful/FooterStateful";
+import React from "react";
+import { decodeComponentString } from "@microsoft/omnichannel-chat-components";
+import { shouldShowFooter } from "../../../controller/componentController";
+export const createFooter = (props, state) => {
+  var _props$footerProps, _props$controlProps, _props$componentOverr, _props$componentOverr2;
+  const footerPropsHidden = { ...props.footerProps,
+    controlProps: { ...((_props$footerProps = props.footerProps) === null || _props$footerProps === void 0 ? void 0 : _props$footerProps.controlProps),
+      hideDownloadTranscriptButton: true,
+      hideEmailTranscriptButton: true,
+      hideAudioNotificationButton: true
+    }
+  };
+  const footer = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && shouldShowFooter(state) ? decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
+    footerProps: props.footerProps,
+    downloadTranscriptProps: props.downloadTranscriptProps,
+    audioNotificationProps: props.audioNotificationProps,
+    hideFooterDisplay: false
+  }) : decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.footer) || /*#__PURE__*/React.createElement(FooterStateful, {
+    footerProps: footerPropsHidden,
+    downloadTranscriptProps: props.downloadTranscriptProps,
+    audioNotificationProps: props.audioNotificationProps,
+    hideFooterDisplay: true
+  });
+  return footer;
+};

package/lib/esm/components/livechatwidget/common/createInternetConnectionChangeHandler.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { Constants } from "../../../common/Constants";
+import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+const isInternetConnected = async () => {
+  try {
+    const response = await fetch(Constants.internetConnectionTestUrl);
+    const text = await response.text();
+    return text === Constants.internetConnectionTestUrlText;
+  } catch {
+    return false;
+  }
+};
+export const createInternetConnectionChangeHandler = async () => {
+  const handler = async () => {
+    const connected = await isInternetConnected();
+    if (!connected) {
+      NotificationHandler.notifyError(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
+    } else {
+      NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
+    }
+  }; // Checking connection status on online & offline events due to possible false positives
+  window.addEventListener("online", () => handler(), false);
+  window.addEventListener("offline", () => handler(), false);
+};

package/lib/esm/components/livechatwidget/common/createMarkdown.js ADDED Viewed

@@ -0,0 +1,61 @@
+import MarkdownIt from "markdown-it";
+import MarkdownSlack from "slack-markdown-it";
+import MarkdownItForInline from "markdown-it-for-inline";
+import { defaultMarkdownLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMarkdownLocalizedTexts";
+import { Constants } from "../../../common/Constants"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
+  let markdown;
+  if (!disableMarkdownMessageFormatting) {
+    markdown = new MarkdownIt(Constants.Default, {
+      html: true,
+      linkify: true,
+      breaks: !disableNewLineMarkdownSupport
+    });
+    markdown.use(MarkdownSlack); // Markdown override for open link in new tab
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, quotes
+    markdown.use(MarkdownItForInline, "url_new_win", "link_open", function (tokens, idx, env) {
+      const targetAttrIndex = tokens[idx].attrIndex(Constants.Target); // Put a transparent pixel instead of the "open in new window" icon, so developers can easily modify the icon in CSS.
+      const TRANSPARENT_GIF = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+      if (~targetAttrIndex) {
+        tokens[idx].attrs[targetAttrIndex][1] = Constants.Blank;
+      } else {
+        tokens[idx].attrPush([Constants.Target, Constants.Blank]);
+      }
+      const relAttrIndex = tokens[idx].attrIndex(Constants.TargetRelationship);
+      if (~relAttrIndex) {
+        tokens[idx].attrs[relAttrIndex][1] = Constants.TargetRelationshipAttributes;
+      } else {
+        tokens[idx].attrPush([Constants.TargetRelationship, Constants.TargetRelationshipAttributes]);
+        tokens[idx].attrPush([Constants.Title, defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT]); // eslint-disable-next-line quotes
+        const iconTokens = markdown.parseInline(`![${defaultMarkdownLocalizedTexts.MARKDOWN_EXTERNAL_LINK_ALT}](${TRANSPARENT_GIF})`, env)[0].children;
+        if (iconTokens && iconTokens.length > 0) {
+          iconTokens[0].attrJoin("class", Constants.OpenLinkIconCssClass);
+          tokens.splice(idx + 2, 0, ...iconTokens);
+        }
+      }
+    });
+  } else {
+    markdown = new MarkdownIt(Constants.Zero, {
+      html: true,
+      linkify: true,
+      breaks: !disableNewLineMarkdownSupport
+    });
+    markdown.enable(["entity", // Rule to process html entity - &#123;, &#xAF;, &quot;
+    "linkify", // Rule to replace link-like texts with link nodes
+    "html_block", // Rule to process html blocks and paragraphs
+    "html_inline", // Rule to process html tags
+    "newline" // Rule to proceess '\n'
+    ]);
+  }
+  return markdown;
+};