@microsoft/omnichannel-chat-widget 0.1.0-main.86df755 → 0.1.0-main.875499b

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

@@ -1,7 +1,9 @@
 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
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { ChatAdapterShim } from "./ChatAdapterShim";
+import { PauseActivitySubscriber } from "./ActivitySubscriber/PauseActivitySubscriber"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export const createAdapter = async chatSDK => {
   const chatAdapterOptionalParams = {
@@ -23,5 +25,13 @@ export const createAdapter = async chatSDK => {
       }
     }
   };
-  return await chatSDK.createChatAdapter(chatAdapterOptionalParams);
+  let adapter = await chatSDK.createChatAdapter(chatAdapterOptionalParams); //so far, there is no need to convert to the shim adapter when using visual tests
+
+  if (chatSDK.isMockModeOn !== true) {
+    adapter = new ChatAdapterShim(adapter);
+    adapter.addSubscriber(new PauseActivitySubscriber());
+    return adapter.chatAdapter;
+  }
+
+  return adapter;
 };

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

@@ -3,25 +3,14 @@ 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;
+  var _props$controlProps, _props$componentOverr;
 
-  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, {
+  const hideFooterDisplay = !((_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hideFooter) && shouldShowFooter(state) ? false : true;
+  const footer = 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
+    hideFooterDisplay: hideFooterDisplay
   });
   return footer;
 };

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

@@ -2,6 +2,8 @@ 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";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 
 const isInternetConnected = async () => {
   try {
@@ -18,8 +20,14 @@ export const createInternetConnectionChangeHandler = async () => {
     const connected = await isInternetConnected();
 
     if (!connected) {
+      TelemetryHelper.logActionEvent(LogLevel.WARN, {
+        Event: TelemetryEvent.NetworkDisconnected
+      });
       NotificationHandler.notifyError(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION);
     } else {
+      TelemetryHelper.logActionEvent(LogLevel.WARN, {
+        Event: TelemetryEvent.NetworkReconnected
+      });
       NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
     }
   }; // Checking connection status on online & offline events due to possible false positives

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

@@ -1,5 +1,4 @@
 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
@@ -12,27 +11,42 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
       html: true,
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
+    }); // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
+    // markdown.use(MarkdownSlack);
+  } else {
+    markdown = new MarkdownIt(Constants.Zero, {
+      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.enable(["entity", // Rule to process html entity - {, ¯, "
+    "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'
+    ]);
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    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";
+  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.
 
-      if (~targetAttrIndex) {
-        tokens[idx].attrs[targetAttrIndex][1] = Constants.Blank;
-      } else {
-        tokens[idx].attrPush([Constants.Target, Constants.Blank]);
-      }
+    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);
 
-      const relAttrIndex = tokens[idx].attrIndex(Constants.TargetRelationship);
+    if (~relAttrIndex) {
+      tokens[idx].attrs[relAttrIndex][1] = Constants.TargetRelationshipAttributes;
+    } else {
+      tokens[idx].attrPush([Constants.TargetRelationship, Constants.TargetRelationshipAttributes]);
 
-      if (~relAttrIndex) {
-        tokens[idx].attrs[relAttrIndex][1] = Constants.TargetRelationshipAttributes;
-      } else {
-        tokens[idx].attrPush([Constants.TargetRelationship, Constants.TargetRelationshipAttributes]);
+      if (!disableMarkdownMessageFormatting) {
         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;
@@ -42,20 +56,7 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
           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 - {, ¯, "
-    "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;
 };

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

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */
+import { ChatReconnectIconBase64, CloseChatButtonIconBase64, ModernChatIconBase64, ProactiveChatBannerBase64 } from "@microsoft/omnichannel-chat-components";
 import MockAdapter from "../../../webchatcontainerstateful/common/mockadapter";
+import { NewMessageNotificationSoundBase64 } from "../../../../assets/Audios";
 import { WebChatStoreLoader } from "../../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
 import { activityStatusMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
 import { createActivityMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware";
@@ -7,11 +9,12 @@ import createAttachmentMiddleware from "../../../webchatcontainerstateful/webcha
 import { createAvatarMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware";
 import { createMarkdown } from "../createMarkdown";
 import { groupActivitiesMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware";
-import { typingIndicatorMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware"; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { typingIndicatorMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware";
+import { createWebChatTelemetry } from "../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger"; // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 export const dummyDefaultProps = {
   audioNotificationProps: {
-    audioSrc: "assets/audios/newMessageNotification.mp3"
+    audioSrc: NewMessageNotificationSoundBase64
   },
   callingContainerProps: {
     controlProps: {
@@ -132,7 +135,7 @@ export const dummyDefaultProps = {
           id: "oc-lcw-CurrentCall-timer",
           showHours: false,
           timerStyles: {
-            color: "white",
+            color: "#FFFFFF",
             textAlign: "center",
             backgroundColor: "#3d3c3c",
             height: "45px",
@@ -163,24 +166,28 @@ export const dummyDefaultProps = {
         },
         audioCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "green",
+          backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         audioCallButtonHoverStyleProps: {
           filter: "brightness(0.8)"
         },
         videoCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "green",
+          backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         videoCallButtonHoverStyleProps: {
           filter: "brightness(0.8)"
@@ -191,22 +198,24 @@ export const dummyDefaultProps = {
         },
         declineCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "red",
+          backgroundColor: "#DC0000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18,
-          marginLeft: "5px"
+          marginLeft: "5px",
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         incomingCallTitleStyleProps: {
           margin: "0 5px",
-          color: "white",
+          color: "#FFFFFF",
           fontSize: 12,
           fontFamily: "Segoe UI, Arial, sans-serif"
         },
         itemFocusStyleProps: {
-          outline: "2px solid white"
+          outline: "2px solid #FFFFFF"
         }
       },
       currentCallStyleProps: {
@@ -218,7 +227,7 @@ export const dummyDefaultProps = {
         },
         micButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
+          color: "#FFFFFF",
           backgroundColor: "#3d3c3c",
           height: "45px",
           width: "50px",
@@ -229,7 +238,7 @@ export const dummyDefaultProps = {
         },
         videoOffButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
+          color: "#FFFFFF",
           backgroundColor: "#3d3c3c",
           height: "45px",
           width: "50px",
@@ -243,25 +252,13 @@ export const dummyDefaultProps = {
         },
         endCallButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
-          backgroundColor: "red",
+          color: "#FFFFFF",
+          backgroundColor: "#DC0000",
           lineHeight: "50px",
           height: "45px",
           width: "50px",
           fontSize: "18px"
         },
-        currentCallTimerStyleProps: {
-          borderRadius: "2px",
-          margin: "1px",
-          color: "white",
-          paddingTop: "18px",
-          fontSize: 12,
-          fontFamily: "Segoe UI, Arial, sans-serif",
-          backgroundColor: "darkgrey",
-          height: "45px",
-          width: "50px",
-          textAlign: "center"
-        },
         videoTileStyleProps: {
           width: "100%",
           marginLeft: "auto",
@@ -325,7 +322,10 @@ export const dummyDefaultProps = {
       hideChatTextContainer: false,
       hideChatSubtitle: false,
       hideChatTitle: false,
-      hideNotificationBubble: true
+      hideNotificationBubble: true,
+      unreadMessageString: "new messages",
+      largeUnreadMessageString: "99+",
+      ariaLabelUnreadMessageString: "you have new messages"
     },
     styleProps: {
       generalStyleProps: {
@@ -366,7 +366,7 @@ export const dummyDefaultProps = {
         margin: "-2px -2px -2px -3px",
         justifyContent: "center",
         backgroundSize: "65% 65%",
-        backgroundImage: "assets/imgs/chat.svg",
+        backgroundImage: `url(${ModernChatIconBase64})`,
         display: "flex",
         backgroundRepeat: "no-repeat",
         backgroundPosition: "center"
@@ -475,7 +475,7 @@ export const dummyDefaultProps = {
     },
     styleProps: {
       generalStyleProps: {
-        backgroundColor: "white",
+        backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
@@ -517,7 +517,7 @@ export const dummyDefaultProps = {
       },
       confirmButtonStyleProps: {
         backgroundColor: "rgba(9,72,159,1)",
-        color: "white",
+        color: "#FFFFFF",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
         fontWeight: "500",
@@ -531,7 +531,7 @@ export const dummyDefaultProps = {
         border: "2px dotted #000"
       },
       cancelButtonStyleProps: {
-        backgroundColor: "white",
+        backgroundColor: "#FFFFFF",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
         fontWeight: "500",
@@ -777,6 +777,7 @@ export const dummyDefaultProps = {
       },
       audioNotificationButtonProps: {
         id: "oc-lcw-footer-audionotification-button",
+        type: "icon",
         ariaLabel: "Turn sound off",
         toggleAriaLabel: "Turn sound on",
         iconName: "Volume3",
@@ -802,8 +803,10 @@ export const dummyDefaultProps = {
         padding: "0 10px 5px 10px"
       },
       downloadTranscriptButtonStyleProps: {
-        color: "blue",
-        fontSize: 16,
+        icon: {
+          color: "blue",
+          fontSize: 16
+        },
         height: "25px",
         lineHeight: "25px",
         width: "25px"
@@ -813,8 +816,10 @@ export const dummyDefaultProps = {
         backgroundColor: "#C8C8C8"
       },
       emailTranscriptButtonStyleProps: {
-        color: "blue",
-        fontSize: 16,
+        cicon: {
+          color: "blue",
+          fontSize: 16
+        },
         height: "25px",
         lineHeight: "25px",
         width: "25px"
@@ -824,8 +829,10 @@ export const dummyDefaultProps = {
         backgroundColor: "#C8C8C8"
       },
       audioNotificationButtonStyleProps: {
-        color: "blue",
-        fontSize: 16,
+        icon: {
+          color: "blue",
+          fontSize: 16
+        },
         height: "25px",
         lineHeight: "25px",
         width: "25px"
@@ -876,7 +883,7 @@ export const dummyDefaultProps = {
         className: undefined
       },
       closeButtonProps: {
-        id: "oc-lcw-header-minimize-button",
+        id: "oc-lcw-header-close-button",
         type: "icon",
         iconName: "ChromeClose",
         ariaLabel: "Close",
@@ -887,7 +894,7 @@ export const dummyDefaultProps = {
       },
       headerIconProps: {
         id: "oc-lcw-header-icon",
-        src: "assets/imgs/chatIcon.svg",
+        src: ModernChatIconBase64,
         alt: "Chat Icon",
         className: undefined
       },
@@ -916,16 +923,16 @@ export const dummyDefaultProps = {
         fontSize: 16,
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontWeight: "450",
-        color: "white",
+        color: "#FFFFFF",
         padding: "3px 0"
       },
       minimizeButtonStyleProps: {
-        color: "white",
+        color: "#FFFFFF",
         margin: "5px 0",
         fontSize: "12px"
       },
       closeButtonStyleProps: {
-        color: "white",
+        color: "#FFFFFF",
         margin: "5px 0",
         fontSize: "12px"
       },
@@ -1012,7 +1019,7 @@ export const dummyDefaultProps = {
         alignSelf: "auto"
       },
       iconImageProps: {
-        src: "assets/imgs/chat.svg",
+        src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2lpKSI+DQo8cGF0aCBkPSJNMTUuMTk3MSAxNi4yNzI1VjI1Ljg1MjRDMTUuMTk3MSAyNy4zODExIDE1Ljg0MDEgMjcuNTIwMSAxNi45ODMyIDI3LjUyMDFMMjYuNzA4NCAyNy41NjQ5TDMxLjAwMzkgMzIuMzEyM1YyNy41NjQ5SDMxLjg5N0MzMi4xNzQzIDI3LjU2MzcgMzIuNDQ4NyAyNy41MDc3IDMyLjcwNDUgMjcuNDAwMUMzMi45NjAzIDI3LjI5MjQgMzMuMTkyNSAyNy4xMzUzIDMzLjM4NzggMjYuOTM3NUMzMy41ODMxIDI2LjczOTggMzMuNzM3NyAyNi41MDU0IDMzLjg0MjcgMjYuMjQ3N0MzMy45NDc4IDI1Ljk5IDM0LjAwMTMgMjUuNzE0IDM0LjAwMDEgMjUuNDM1NVYxNi4zMDM4QzM0LjAwMTMgMTYuMDI1NCAzMy45NDc4IDE1Ljc0OTQgMzMuODQyNyAxNS40OTE3QzMzLjczNzcgMTUuMjM0IDMzLjU4MzEgMTQuOTk5NiAzMy4zODc4IDE0LjgwMThDMzMuMTkyNSAxNC42MDQxIDMyLjk2MDMgMTQuNDQ2OSAzMi43MDQ1IDE0LjMzOTNDMzIuNDQ4NyAxNC4yMzE2IDMyLjE3NDMgMTQuMTc1NiAzMS44OTcgMTQuMTc0NEwxNy4zMDQ3IDE0LjE0MzFDMTcuMDI2OSAxNC4xNDM3IDE2Ljc1MiAxNC4xOTkyIDE2LjQ5NTcgMTQuMzA2NkMxNi4yMzk0IDE0LjQxNCAxNi4wMDY3IDE0LjU3MTEgMTUuODEwOSAxNC43Njg5QzE1LjYxNTIgMTQuOTY2NyAxNS40NjAyIDE1LjIwMTMgMTUuMzU0OCAxNS40NTkzQzE1LjI0OTUgMTUuNzE3MyAxNS4xOTU5IDE1Ljk5MzYgMTUuMTk3MSAxNi4yNzI1WiIgZmlsbD0iI0Q2RDZENiIvPg0KPC9nPg0KPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjFfZGlpKSI+DQo8cGF0aCBkPSJNMjcuODczNSA2LjY5ODg3VjE4Ljg0MDlDMjcuODczNSAyMC43Nzg1IDI3LjA1NzIgMjAuOTU0NiAyNS42MDU4IDIwLjk1NDZMMTMuMjU4IDIxLjAxMTRMNy44MDQxNCAyNy4wMjg1VjIxLjAxMTRINi42NzAyN0M2LjMxODEyIDIxLjAwOTkgNS45Njk3MSAyMC45Mzg5IDUuNjQ0OTMgMjAuODAyNUM1LjMyMDE2IDIwLjY2NjEgNS4wMjUzOCAyMC40NjY4IDQuNzc3NDIgMjAuMjE2MkM0LjUyOTQ2IDE5Ljk2NTYgNC4zMzMxOSAxOS42Njg1IDQuMTk5OCAxOS4zNDE5QzQuMDY2NDIgMTkuMDE1MiAzLjk5ODUzIDE4LjY2NTUgNC4wMDAwMiAxOC4zMTI1VjYuNzM4NjRDMy45OTg1MyA2LjM4NTcxIDQuMDY2NDIgNi4wMzU5NSA0LjE5OTggNS43MDkzMUM0LjMzMzE5IDUuMzgyNjcgNC41Mjk0NiA1LjA4NTU3IDQuNzc3NDIgNC44MzQ5NUM1LjAyNTM4IDQuNTg0MzQgNS4zMjAxNiA0LjM4NTEzIDUuNjQ0OTMgNC4yNDg2OUM1Ljk2OTcxIDQuMTEyMjUgNi4zMTgxMiA0LjA0MTI2IDYuNjcwMjcgNC4wMzk3N0wyNS4xOTc2IDRDMjUuNTUwMiA0LjAwMDc0IDI1Ljg5OTMgNC4wNzExOCAyNi4yMjQ3IDQuMjA3MjlDMjYuNTUwMSA0LjM0MzM5IDI2Ljg0NTYgNC41NDI0OSAyNy4wOTQxIDQuNzkzMThDMjcuMzQyNyA1LjA0Mzg2IDI3LjUzOTUgNS4zNDEyMiAyNy42NzMyIDUuNjY4MjNDMjcuODA3IDUuOTk1MjMgMjcuODc1IDYuMzQ1NDYgMjcuODczNSA2LjY5ODg3WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIvPg0KPC9nPg0KPGRlZnM+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2lpIiB4PSIxNS4xOTcxIiB5PSIxNC4xNDMxIiB3aWR0aD0iMTguODAzMSIgaGVpZ2h0PSIxOC4xNjkzIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+DQo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMC4yIiBkeT0iLTAuMiIvPg0KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPg0KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMTcgMCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9InNoYXBlIiByZXN1bHQ9ImVmZmVjdDFfaW5uZXJTaGFkb3ciLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMC41IiBkeT0iLTAuNSIvPg0KPGZlQ29tcG9zaXRlIGluMj0iaGFyZEFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIvPg0KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAuMTYgMCIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9ImVmZmVjdDFfaW5uZXJTaGFkb3ciIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvdyIvPg0KPC9maWx0ZXI+DQo8ZmlsdGVyIGlkPSJmaWx0ZXIxX2RpaSIgeD0iMCIgeT0iMCIgd2lkdGg9IjM5Ljg3MzYiIGhlaWdodD0iMzkuMDI4NSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPg0KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+DQo8ZmVPZmZzZXQgZHg9IjQiIGR5PSI0Ii8+DQo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0Ii8+DQo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIi8+DQo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvdyIvPg0KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3ciIHJlc3VsdD0ic2hhcGUiLz4NCjxmZUNvbG9yTWF0cml4IGluPSJTb3VyY2VBbHBoYSIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIiByZXN1bHQ9ImhhcmRBbHBoYSIvPg0KPGZlT2Zmc2V0IGR4PSItMiIgZHk9Ii0yIi8+DQo8ZmVDb21wb3NpdGUgaW4yPSJoYXJkQWxwaGEiIG9wZXJhdG9yPSJhcml0aG1ldGljIiBrMj0iLTEiIGszPSIxIi8+DQo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4xNyAwIi8+DQo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0ic2hhcGUiIHJlc3VsdD0iZWZmZWN0Ml9pbm5lclNoYWRvdyIvPg0KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+DQo8ZmVPZmZzZXQgZHg9Ii0xIiBkeT0iLTEiLz4NCjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9ImFyaXRobWV0aWMiIGsyPSItMSIgazM9IjEiLz4NCjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwLjE2IDAiLz4NCjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW4yPSJlZmZlY3QyX2lubmVyU2hhZG93IiByZXN1bHQ9ImVmZmVjdDNfaW5uZXJTaGFkb3ciLz4NCjwvZmlsdGVyPg0KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyIiB4MT0iLTAuMzk1MDAxIiB5MT0iMjMuMTI4MiIgeDI9IjIwLjEwNTgiIHkyPSIzNy44NDc0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+DQo8c3RvcCBzdG9wLWNvbG9yPSIjRUZFRkVGIi8+DQo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPC9kZWZzPg0KPC9zdmc+DQo=",
         imageFit: 0,
         width: "86px",
         height: "86px",
@@ -1087,7 +1094,7 @@ export const dummyDefaultProps = {
       titleStyleProps: {
         // ...[Existing chat button title style props]
         margin: "0 0 0 10px",
-        color: "White"
+        color: "#FFFFFF"
       }
     }
   },
@@ -1172,7 +1179,8 @@ export const dummyDefaultProps = {
         backgroundColor: "#FFFFFF",
         borderColor: "#F1F1F1"
       }
-    }
+    },
+    isCustomerVoiceSurveyCompact: undefined
   },
   proactiveChatPaneProps: {
     componentOverrides: {
@@ -1192,7 +1200,17 @@ export const dummyDefaultProps = {
       hideSubtitle: false,
       subtitleText: "Live chat support!",
       hideCloseButton: false,
-      closeButtonAriaLabel: "Close Button",
+      closeButtonProps: {
+        id: "oc-lcw-proactivechat-closebutton",
+        type: "icon",
+        iconName: "ChromeClose",
+        ariaLabel: "Close",
+        imageIconProps: undefined,
+        text: "Close",
+        onClick: undefined,
+        className: undefined,
+        hideButtonTitle: true
+      },
       isBodyContainerHorizantal: false,
       hideBodyTitle: false,
       bodyTitleText: "Hi! Have any questions? I am here to help.",
@@ -1220,7 +1238,7 @@ export const dummyDefaultProps = {
       },
       headerContainerStyleProps: {
         backgroundColor: "rgb(49, 95, 162)",
-        backgroundImage: "assets/imgs/Proactive_banner.png",
+        backgroundImage: `url(${ProactiveChatBannerBase64})`,
         backgroundPosition: "initial",
         backgroundRepeat: "no-repeat",
         borderTopLeftRadius: "inherit",
@@ -1248,7 +1266,7 @@ export const dummyDefaultProps = {
         fontWeight: "600"
       },
       closeButtonStyleProps: {
-        backgroundImage: "assets/imgs/closeChatButton.svg",
+        backgroundImage: `url(${CloseChatButtonIconBase64})`,
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
         color: "#605e5c",
@@ -1371,7 +1389,7 @@ export const dummyDefaultProps = {
         lineHeight: "19px"
       },
       iconStyleProps: {
-        backgroundImage: "assets/imgs//ChatReconnectPopupIcon.png",
+        backgroundImage: `url(${ChatReconnectIconBase64})`,
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
         backgroundSize: "200px",
@@ -1420,9 +1438,9 @@ export const dummyDefaultProps = {
         startNewChatButtonClassName: undefined
       }
     },
-    authClientFunction: undefined,
     isReconnectEnabled: undefined,
-    reconnectId: undefined
+    reconnectId: undefined,
+    redirectInSameWindow: undefined
   },
   styleProps: {
     generalStyles: {
@@ -1453,7 +1471,7 @@ export const dummyDefaultProps = {
       bubbleBackground: "#315FA2",
       bubbleBorderRadius: 4,
       bubbleBorderWidth: 0,
-      bubbleFromUserBackground: "White",
+      bubbleFromUserBackground: "#FFFFFF",
       bubbleFromUserBorderRadius: 4,
       bubbleFromUserBorderWidth: 1,
       bubbleFromUserTextColor: "Black",
@@ -1461,7 +1479,7 @@ export const dummyDefaultProps = {
       bubbleMaxWidth: 250,
       bubbleMinHeight: 34,
       bubbleMinWidth: 20,
-      bubbleTextColor: "White",
+      bubbleTextColor: "#FFFFFF",
       hideSendBox: false,
       hideUploadButton: true,
       primaryFont: "Segoe UI, Arial, sans-serif",
@@ -1470,7 +1488,7 @@ export const dummyDefaultProps = {
       sendBoxTextWrap: true,
       sendBoxHeight: 60,
       sendBoxMaxHeight: 96,
-      sendBoxBackground: "White",
+      sendBoxBackground: "#FFFFFF",
       showAvatarInGroup: true,
       suggestedActionsStackedHeight: 125,
       suggestedActionsStackedOverflow: "scroll",
@@ -1494,7 +1512,7 @@ export const dummyDefaultProps = {
       internalErrorBoxClass: undefined,
       internalRenderErrorBox: undefined,
       locale: "en-US",
-      onTelemetry: undefined,
+      onTelemetry: createWebChatTelemetry(),
       overrideLocalizedStrings: undefined,
       renderMarkdown: createMarkdown(false, false),
       scrollToEndButtonMiddleware: undefined,
@@ -1542,6 +1560,12 @@ export const dummyDefaultProps = {
         lineHeight: "16px",
         padding: "0px 10px 0 10px"
       },
+      userMessageBoxStyles: {
+        maxWidth: "75%"
+      },
+      systemMessageBoxStyles: {
+        maxWidth: "75%"
+      },
       typingIndicatorStyleProps: {
         marginLeft: "10px",
         marginBottom: "5px",
@@ -1581,7 +1605,7 @@ export const dummyDefaultProps = {
         fontWeight: 600,
         fontSize: "13px",
         lineHeight: "18px",
-        color: "white",
+        color: "#FFFFFF",
         paddingTop: "7px",
         WebkitUserSelect: "none",
         MozUserSelect: "none",
@@ -1661,6 +1685,9 @@ export const dummyDefaultProps = {
       },
       attachmentSizeStyles: {
         display: "none"
+      },
+      receivedMessageAnchorStyles: {
+        color: "white"
       }
     },
     localizedTexts: {
@@ -1684,6 +1711,16 @@ export const dummyDefaultProps = {
       MIDDLEWARE_MESSAGE_RETRY: "Retry",
       PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
       MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external."
+    },
+    botMagicCode: {
+      disabled: false,
+      fwdUrl: ""
+    },
+    adaptiveCardStyles: {
+      background: "white",
+      color: "black"
     }
-  }
+  },
+  telemetryConfig: undefined,
+  getAuthToken: undefined
 };

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

@@ -0,0 +1,4 @@
+import { disposeLoggers } from "../../../common/telemetry/TelemetryManager";
+export const disposeTelemetryLoggers = () => {
+  disposeLoggers();
+};