@microsoft/omnichannel-chat-widget 0.1.0-main.1a61ea0 → 0.1.0-main.47ede4d

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

@@ -1,5 +1,5 @@
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ConversationState } from "../../contexts/common/ConversationState";
 import { Header } from "@microsoft/omnichannel-chat-components";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
@@ -21,6 +21,7 @@ export const HeaderStateful = props => {
 
   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 conversationState = useRef(state.appStates.conversationState);
   const controlProps = {
     id: "oc-lcw-header",
     dir: state.domainStates.globalDir,
@@ -40,17 +41,21 @@ export const HeaderStateful = props => {
         Description: "Header Close button clicked."
       });
 
-      if (state.appStates.conversationState === ConversationState.Active) {
+      if (conversationState.current === ConversationState.Active) {
         dispatch({
           type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
           payload: true
         });
-      } else if (state.appStates.conversationState === ConversationState.Postchat) {
+      } else if (conversationState.current === ConversationState.Postchat) {
         dispatch({
           type: LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
           payload: false
         });
         await endChat(adapter);
+      } else if (conversationState.current === ConversationState.InActive) {
+        const skipEndChatSDK = true;
+        const skipCloseChat = false;
+        await endChat(adapter, skipEndChatSDK, skipCloseChat);
       }
 
       dispatch({
@@ -82,7 +87,11 @@ export const HeaderStateful = props => {
     if (state.appStates.outsideOperatingHours) {
       setOutOfOperatingHours(true);
     }
-  }, []);
+
+    if (state.appStates.conversationState) {
+      conversationState.current = state.appStates.conversationState;
+    }
+  }, [state.appStates]);
   return /*#__PURE__*/React.createElement(Header, {
     componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,
     controlProps: outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeControlProps : controlProps,

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,8 +11,9 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
       html: true,
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
-    });
-    markdown.use(MarkdownSlack); // Markdown override for open link in new tab
+    }); // ToDo: Commenting below usage of plugin until deferred bug is resolved: https://github.com/mayashavin/markdown-it-slack/issues/1
+    // 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) {

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";
@@ -11,7 +13,7 @@ import { typingIndicatorMiddleware } from "../../../webchatcontainerstateful/web
 
 export const dummyDefaultProps = {
   audioNotificationProps: {
-    audioSrc: "assets/audios/newMessageNotification.mp3"
+    audioSrc: NewMessageNotificationSoundBase64
   },
   callingContainerProps: {
     controlProps: {
@@ -132,7 +134,7 @@ export const dummyDefaultProps = {
           id: "oc-lcw-CurrentCall-timer",
           showHours: false,
           timerStyles: {
-            color: "white",
+            color: "#FFFFFF",
             textAlign: "center",
             backgroundColor: "#3d3c3c",
             height: "45px",
@@ -163,8 +165,8 @@ export const dummyDefaultProps = {
         },
         audioCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "green",
+          color: "#FFFFFF",
+          backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
@@ -175,8 +177,8 @@ export const dummyDefaultProps = {
         },
         videoCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "green",
+          color: "#FFFFFF",
+          backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
@@ -191,8 +193,8 @@ export const dummyDefaultProps = {
         },
         declineCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "white",
-          backgroundColor: "red",
+          color: "#FFFFFF",
+          backgroundColor: "#DC0000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
@@ -201,12 +203,12 @@ export const dummyDefaultProps = {
         },
         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 +220,7 @@ export const dummyDefaultProps = {
         },
         micButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
+          color: "#FFFFFF",
           backgroundColor: "#3d3c3c",
           height: "45px",
           width: "50px",
@@ -229,7 +231,7 @@ export const dummyDefaultProps = {
         },
         videoOffButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
+          color: "#FFFFFF",
           backgroundColor: "#3d3c3c",
           height: "45px",
           width: "50px",
@@ -243,8 +245,8 @@ export const dummyDefaultProps = {
         },
         endCallButtonStyleProps: {
           borderRadius: "2px",
-          color: "white",
-          backgroundColor: "red",
+          color: "#FFFFFF",
+          backgroundColor: "#DC0000",
           lineHeight: "50px",
           height: "45px",
           width: "50px",
@@ -253,7 +255,7 @@ export const dummyDefaultProps = {
         currentCallTimerStyleProps: {
           borderRadius: "2px",
           margin: "1px",
-          color: "white",
+          color: "#FFFFFF",
           paddingTop: "18px",
           fontSize: 12,
           fontFamily: "Segoe UI, Arial, sans-serif",
@@ -366,7 +368,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 +477,7 @@ export const dummyDefaultProps = {
     },
     styleProps: {
       generalStyleProps: {
-        backgroundColor: "white",
+        backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
@@ -517,7 +519,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 +533,7 @@ export const dummyDefaultProps = {
         border: "2px dotted #000"
       },
       cancelButtonStyleProps: {
-        backgroundColor: "white",
+        backgroundColor: "#FFFFFF",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
         fontWeight: "500",
@@ -887,7 +889,7 @@ export const dummyDefaultProps = {
       },
       headerIconProps: {
         id: "oc-lcw-header-icon",
-        src: "assets/imgs/chatIcon.svg",
+        src: ModernChatIconBase64,
         alt: "Chat Icon",
         className: undefined
       },
@@ -916,16 +918,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 +1014,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 +1089,7 @@ export const dummyDefaultProps = {
       titleStyleProps: {
         // ...[Existing chat button title style props]
         margin: "0 0 0 10px",
-        color: "White"
+        color: "#FFFFFF"
       }
     }
   },
@@ -1220,7 +1222,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 +1250,7 @@ export const dummyDefaultProps = {
         fontWeight: "600"
       },
       closeButtonStyleProps: {
-        backgroundImage: "assets/imgs/closeChatButton.svg",
+        backgroundImage: `url(${CloseChatButtonIconBase64})`,
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
         color: "#605e5c",
@@ -1371,7 +1373,7 @@ export const dummyDefaultProps = {
         lineHeight: "19px"
       },
       iconStyleProps: {
-        backgroundImage: "assets/imgs//ChatReconnectPopupIcon.png",
+        backgroundImage: `url(${ChatReconnectIconBase64})`,
         backgroundPosition: "center",
         backgroundRepeat: "no-repeat",
         backgroundSize: "200px",
@@ -1453,7 +1455,7 @@ export const dummyDefaultProps = {
       bubbleBackground: "#315FA2",
       bubbleBorderRadius: 4,
       bubbleBorderWidth: 0,
-      bubbleFromUserBackground: "White",
+      bubbleFromUserBackground: "#FFFFFF",
       bubbleFromUserBorderRadius: 4,
       bubbleFromUserBorderWidth: 1,
       bubbleFromUserTextColor: "Black",
@@ -1461,7 +1463,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 +1472,7 @@ export const dummyDefaultProps = {
       sendBoxTextWrap: true,
       sendBoxHeight: 60,
       sendBoxMaxHeight: 96,
-      sendBoxBackground: "White",
+      sendBoxBackground: "#FFFFFF",
       showAvatarInGroup: true,
       suggestedActionsStackedHeight: 125,
       suggestedActionsStackedOverflow: "scroll",
@@ -1581,7 +1583,7 @@ export const dummyDefaultProps = {
         fontWeight: 600,
         fontSize: "13px",
         lineHeight: "18px",
-        color: "white",
+        color: "#FFFFFF",
         paddingTop: "7px",
         WebkitUserSelect: "none",
         MozUserSelect: "none",
@@ -1685,5 +1687,6 @@ export const dummyDefaultProps = {
       PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
       MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external."
     }
-  }
+  },
+  telemetryConfig: undefined
 };

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

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

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

@@ -1,53 +1,72 @@
-import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 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 { WebChatStoreLoader } from "../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
-import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
-import { BroadcastService } from "@microsoft/omnichannel-chat-components"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter) => {
-  try {
-    var _props$webChatContain;
+export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat) => {
+  if (!skipEndChatSDK) {
+    try {
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.EndChatSDKCall
+      });
+      await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.endChat());
+    } catch (ex) {
+      TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
+        Event: TelemetryEvent.EndChatSDKCallFailed,
+        ExceptionDetails: {
+          exception: ex
+        }
+      });
+    }
+  }
+
+  if (!skipCloseChat) {
+    try {
+      var _props$webChatContain;
 
-    TelemetryHelper.logConfigDataEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.EndChatSDKCall
-    });
-    await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.endChat());
-    adapter === null || adapter === void 0 ? void 0 : adapter.end();
-    setAdapter(undefined);
-    setWebChatStyles({ ...defaultWebChatContainerStatefulProps.webChatStyles,
-      ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles)
-    });
-    WebChatStoreLoader.store = null;
-    dispatch({
-      type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-      payload: ConversationState.Closed
-    });
-    dispatch({
-      type: LiveChatWidgetActionType.SET_RECONNECT_ID,
-      payload: undefined
-    });
-    dispatch({
-      type: LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
-      payload: null
-    });
-    dispatch({
-      type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
-      payload: undefined
-    });
-    BroadcastService.postMessage({
-      eventName: "EndChat"
-    });
-  } catch (ex) {
-    TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
-      Event: TelemetryEvent.EndChatSDKCallFailed,
-      ExceptionDetails: {
-        exception: ex
-      }
-    });
-    NotificationHandler.notifyError(NotificationScenarios.Connection, "End Chat Call Failed: " + ex);
+      adapter === null || adapter === void 0 ? void 0 : adapter.end();
+      setAdapter(undefined);
+      setWebChatStyles({ ...defaultWebChatContainerStatefulProps.webChatStyles,
+        ...((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles)
+      });
+      WebChatStoreLoader.store = null;
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+        payload: ConversationState.Closed
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY_AGENT,
+        payload: false
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_RECONNECT_ID,
+        payload: undefined
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_AUDIO_NOTIFICATION,
+        payload: null
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
+        payload: undefined
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
+        payload: undefined
+      });
+      BroadcastService.postMessage({
+        eventName: BroadcastEvent.EndChat
+      });
+    } catch (error) {
+      TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+        Event: TelemetryEvent.CloseChatMethodException,
+        ExceptionDetails: {
+          exception: `Failed to endChat: ${error}`
+        }
+      });
+    }
   }
 };

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

@@ -8,6 +8,9 @@ export const initCallingSdk = async (chatSDK, setVoiceVideoCallingSDK) => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const callingSDK = await chatSDK.getVoiceVideoCalling();
       setVoiceVideoCallingSDK(callingSDK);
+      TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.CallingSDKLoadSuccess
+      });
       return true;
     }
 

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

@@ -1,7 +1,10 @@
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { createStore } from "botframework-webchat";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { PostChatSurveyMode } from "../../postchatsurveypanestateful/enums/PostChatSurveyMode";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { WebChatStoreLoader } from "../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
 import attachmentProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware";
 import { changeLanguageCodeFormatForWebChat } from "../../../common/utils";
@@ -22,8 +25,7 @@ import gifUploadMiddleware from "../../webchatcontainerstateful/webchatcontrolle
 import htmlPlayerMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlPlayerMiddleware";
 import htmlTextMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlTextMiddleware";
 import preProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware";
-import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware";
-import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurvey"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 export const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles) => {
   var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4, _state$domainStates$l8, _state$domainStates$l9, _props$webChatContain7, _props$webChatContain8, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain9, _props$webChatContain10, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain11, _props$webChatContain12, _defaultWebChatContai, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain17, _props$webChatContain18, _defaultWebChatContai2, _props$webChatContain19, _props$webChatContain20, _defaultWebChatContai3, _props$webChatContain21;
@@ -45,6 +47,11 @@ export const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatS
     const conversationEndCallback = async () => {
       var _props$webChatContain4, _props$webChatContain5;
 
+      TelemetryHelper.logActionEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.ConversationEndedThreadEventReceived,
+        Description: "Conversation is ended by agent side or by timeout."
+      });
+
       if ((props === null || props === void 0 ? void 0 : (_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : (_props$webChatContain5 = _props$webChatContain4.renderingMiddlewareProps) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.hideSendboxOnConversationEnd) !== false) {
         setWebChatStyles(styles => {
           return { ...styles,
@@ -53,16 +60,23 @@ export const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatS
         });
       }
 
-      if (isPostChatEnabled === "true" && postChatSurveyMode === PostChatSurveyMode.Embed) {
+      if (isPostChatEnabled === "true") {
+        if (postChatSurveyMode === PostChatSurveyMode.Embed) {
+          const loadPostChatEvent = {
+            eventName: BroadcastEvent.LoadPostChatSurvey
+          };
+          BroadcastService.postMessage(loadPostChatEvent);
+        } else if (postChatSurveyMode === PostChatSurveyMode.Link) {
+          dispatch({
+            type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+            payload: ConversationState.InActive
+          });
+        }
+      } else {
         dispatch({
-          type: LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
+          type: LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY_AGENT,
           payload: true
         });
-        dispatch({
-          type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-          payload: ConversationState.Loading
-        });
-        await setPostChatContextAndLoadSurvey(chatSDK, dispatch, true);
       }
 
       dispatch({

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

@@ -1,13 +1,22 @@
-import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { RegisterLoggers, TelemetryManager } from "../../../common/telemetry/TelemetryManager";
+import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { version as chatComponentVersion } from "@microsoft/omnichannel-chat-components/package.json";
+import { version as chatSdkVersion } from "@microsoft/omnichannel-chat-sdk/package.json";
 import { defaultAriaConfig } from "../../../common/telemetry/defaultConfigs/defaultAriaConfig";
 import { defaultInternalTelemetryData } from "../../../common/telemetry/defaultConfigs/defaultTelemetryInternalData";
 import { defaultTelemetryConfiguration } from "../../../common/telemetry/defaultConfigs/defaultTelemetryConfiguration";
-import packageInfo from "@microsoft/omnichannel-chat-sdk/package.json";
 export const registerTelemetryLoggers = (props, dispatch) => {
   var _props$liveChatContex, _props$liveChatContex2;
 
+  let widgetPackageInfo;
+
+  try {
+    widgetPackageInfo = require("@microsoft/omnichannel-chat-widget/package.json");
+  } catch (error) {
+    widgetPackageInfo = "0.0.0-0";
+  }
+
   const telemetryConfig = { ...defaultTelemetryConfiguration,
     ...props.telemetryConfig
   };
@@ -17,6 +26,8 @@ export const registerTelemetryLoggers = (props, dispatch) => {
 
     TelemetryManager.InternalTelemetryData = (_props$liveChatContex3 = props.liveChatContextFromCache) === null || _props$liveChatContex3 === void 0 ? void 0 : (_props$liveChatContex4 = _props$liveChatContex3.domainStates) === null || _props$liveChatContex4 === void 0 ? void 0 : _props$liveChatContex4.telemetryInternalData;
   } else {
+    var _props$chatSDK, _props$chatSDK$omnich, _props$chatSDK2, _props$chatSDK2$omnic, _props$chatSDK3, _props$chatSDK3$omnic;
+
     let telemetryData = { ...defaultInternalTelemetryData,
       telemetryConfig: Object.assign({}, defaultTelemetryConfiguration, telemetryConfig),
       ariaConfig: Object.assign({}, defaultAriaConfig, telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.ariaConfigurations)
@@ -27,7 +38,13 @@ export const registerTelemetryLoggers = (props, dispatch) => {
     }
 
     telemetryData = TelemetryHelper.addWidgetDataToTelemetry(telemetryConfig, telemetryData);
-    telemetryData.OCChatSDKVersion = packageInfo.version;
+    telemetryData.OCChatSDKVersion = chatSdkVersion;
+    telemetryData.chatComponentVersion = chatComponentVersion;
+    telemetryData.chatWidgetVersion = widgetPackageInfo;
+    telemetryData.orgId = (_props$chatSDK = props.chatSDK) === null || _props$chatSDK === void 0 ? void 0 : (_props$chatSDK$omnich = _props$chatSDK.omnichannelConfig) === null || _props$chatSDK$omnich === void 0 ? void 0 : _props$chatSDK$omnich.orgId;
+    telemetryData.widgetId = (_props$chatSDK2 = props.chatSDK) === null || _props$chatSDK2 === void 0 ? void 0 : (_props$chatSDK2$omnic = _props$chatSDK2.omnichannelConfig) === null || _props$chatSDK2$omnic === void 0 ? void 0 : _props$chatSDK2$omnic.widgetId;
+    telemetryData.orgUrl = (_props$chatSDK3 = props.chatSDK) === null || _props$chatSDK3 === void 0 ? void 0 : (_props$chatSDK3$omnic = _props$chatSDK3.omnichannelConfig) === null || _props$chatSDK3$omnic === void 0 ? void 0 : _props$chatSDK3$omnic.orgUrl;
+    TelemetryManager.InternalTelemetryData = telemetryData;
     dispatch({
       type: LiveChatWidgetActionType.SET_TELEMETRY_DATA,
       payload: telemetryData

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

@@ -1,20 +1,23 @@
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
-import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { ConversationState } from "../../../contexts/common/ConversationState"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-export const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, loadSurvey) => {
+export const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, persistedChat) => {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const context = await chatSDK.getPostChatSurveyContext();
-    TelemetryHelper.logSDKEvent(LogLevel.INFO, {
-      Event: TelemetryEvent.PostChatContextCallSucceed,
-      Description: "Postchat context call succeed."
-    });
-    dispatch({
-      type: LiveChatWidgetActionType.SET_POST_CHAT_CONTEXT,
-      payload: context
-    });
+    if (!persistedChat) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const context = await chatSDK.getPostChatSurveyContext();
+      TelemetryHelper.logSDKEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.PostChatContextCallSucceed,
+        Description: "Postchat context call succeed."
+      });
+      dispatch({
+        type: LiveChatWidgetActionType.SET_POST_CHAT_CONTEXT,
+        payload: context
+      });
+    }
   } catch (ex) {
     TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.PostChatContextCallFailed,
@@ -22,19 +25,17 @@ export const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, loadSur
         exception: ex
       }
     });
-  }
-  /* -true:   setPostChatContextAndLoadSurvey is called after passing all checks from ConfirmationPane and endChatMiddleware in usual scenario.
-     -false:  Below if condition is needed for multi-tab scenarios. So when agent ends a chat and customer has opened chat in multiple tabs,  
-              all tabs should show post chat survey as per existing functionality. But when an agent end a conversation, Omnichannel SDK 
-              getPostChatSurveyContext returns as invalid conversation. To avoid that, caching the survey url is needed after chat starts and 
-              in this case loadSurvey is false 
-  */
+  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 
-  if (loadSurvey) {
+  BroadcastService.getMessageByEventName("LoadPostChatSurvey").subscribe(msg => {
+    dispatch({
+      type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: ConversationState.Loading
+    });
     dispatch({
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
       payload: ConversationState.Postchat
     });
-  }
+  });
 };