@microsoft/omnichannel-chat-widget 0.1.0-main.c461296 → 0.1.0-main.c881067

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

@@ -1,4 +1,5 @@
 /* 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";
@@ -8,9 +9,11 @@ import { createActivityMiddleware } from "../../../webchatcontainerstateful/webc
 import createAttachmentMiddleware from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware";
 import { createAvatarMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware";
 import { createMarkdown } from "../createMarkdown";
+import { createWebChatTelemetry } from "../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger";
 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";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const dummyDefaultProps = {
   audioNotificationProps: {
     audioSrc: NewMessageNotificationSoundBase64
@@ -165,24 +168,28 @@ export const dummyDefaultProps = {
         },
         audioCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "#FFFFFF",
           backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         audioCallButtonHoverStyleProps: {
           filter: "brightness(0.8)"
         },
         videoCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "#FFFFFF",
           backgroundColor: "#008000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         videoCallButtonHoverStyleProps: {
           filter: "brightness(0.8)"
@@ -193,13 +200,15 @@ export const dummyDefaultProps = {
         },
         declineCallButtonStyleProps: {
           borderRadius: "50%",
-          color: "#FFFFFF",
           backgroundColor: "#DC0000",
           lineHeight: "40px",
           height: "40px",
           width: "40px",
-          fontSize: 18,
-          marginLeft: "5px"
+          marginLeft: "5px",
+          icon: {
+            fontSize: 18,
+            color: "#FFFFFF"
+          }
         },
         incomingCallTitleStyleProps: {
           margin: "0 5px",
@@ -252,18 +261,6 @@ export const dummyDefaultProps = {
           width: "50px",
           fontSize: "18px"
         },
-        currentCallTimerStyleProps: {
-          borderRadius: "2px",
-          margin: "1px",
-          color: "#FFFFFF",
-          paddingTop: "18px",
-          fontSize: 12,
-          fontFamily: "Segoe UI, Arial, sans-serif",
-          backgroundColor: "darkgrey",
-          height: "45px",
-          width: "50px",
-          textAlign: "center"
-        },
         videoTileStyleProps: {
           width: "100%",
           marginLeft: "auto",
@@ -327,7 +324,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: {
@@ -407,6 +407,7 @@ export const dummyDefaultProps = {
         width: "90px",
         cursor: "pointer",
         overflow: "hidden",
+        padding: "0px",
         whiteSpace: "nowrap"
       },
       subtitleStyleProps: {
@@ -414,6 +415,7 @@ export const dummyDefaultProps = {
         fontWeight: "200",
         color: "#666",
         overflow: "hidden",
+        padding: "0px",
         fontFamily: "'Segoe UI',Arial,sans-serif",
         display: "block",
         alignItems: "center",
@@ -469,28 +471,30 @@ export const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel. Return to Chat",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onConfirm: () => {},
       // Detailed implementation omitted
       onCancel: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
+        display: "flex",
+        minHeight: "160px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
         backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
-        height: "160px",
         padding: "10px 20px",
-        width: "262px",
         position: "absolute",
         justifyContent: "center",
         alignItems: "center",
-        display: "flex",
         flexFlow: "column",
-        zIndex: "9999"
+        zIndex: "9999",
+        left: "26px",
+        right: "26px"
       },
       titleStyleProps: {
         color: "#323130",
@@ -512,10 +516,14 @@ export const dummyDefaultProps = {
       },
       buttonGroupStyleProps: {
         display: "flex",
+        width: "auto",
+        height: "auto",
+        boxSizing: "border-box",
         flexFlow: "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: "10px"
+        gap: "10px",
+        marginBottom: "10px"
       },
       confirmButtonStyleProps: {
         backgroundColor: "rgba(9,72,159,1)",
@@ -579,7 +587,7 @@ export const dummyDefaultProps = {
     hideProactiveChatPane: false,
     hideReconnectChatPane: false,
     hideWebChatContainer: false,
-    skipChatButtonRendering: false
+    hideStartChatButton: false
   },
   directLine: new MockAdapter(),
   downloadTranscriptProps: {
@@ -620,7 +628,6 @@ export const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onSend: undefined,
       onCancel: undefined,
       checkInput: undefined
@@ -779,6 +786,7 @@ export const dummyDefaultProps = {
       },
       audioNotificationButtonProps: {
         id: "oc-lcw-footer-audionotification-button",
+        type: "icon",
         ariaLabel: "Turn sound off",
         toggleAriaLabel: "Turn sound on",
         iconName: "Volume3",
@@ -804,8 +812,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"
@@ -815,8 +825,10 @@ export const dummyDefaultProps = {
         backgroundColor: "#C8C8C8"
       },
       emailTranscriptButtonStyleProps: {
-        color: "blue",
-        fontSize: 16,
+        cicon: {
+          color: "blue",
+          fontSize: 16
+        },
         height: "25px",
         lineHeight: "25px",
         width: "25px"
@@ -826,8 +838,10 @@ export const dummyDefaultProps = {
         backgroundColor: "#C8C8C8"
       },
       audioNotificationButtonStyleProps: {
-        color: "blue",
-        fontSize: 16,
+        icon: {
+          color: "blue",
+          fontSize: 16
+        },
         height: "25px",
         lineHeight: "25px",
         width: "25px"
@@ -878,7 +892,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",
@@ -1057,8 +1071,8 @@ export const dummyDefaultProps = {
       titleText: "We're Offline",
       subtitleText: "No agents available",
       onClick: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       // ...[Existing chat button style props]
       iconStyleProps: {
@@ -1076,8 +1090,8 @@ export const dummyDefaultProps = {
         text: "We're Offline"
       },
       onMinimizeClick: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       // ...[Existing chat button style props]
       generalStyleProps: {
@@ -1103,7 +1117,8 @@ export const dummyDefaultProps = {
       dir: "auto",
       hideOOOHPane: false,
       hideTitle: false,
-      titleText: "Thanks for contacting us. You have reached us outside of our operating hours. An agent will respond when we open."
+      titleText: "Thanks for contacting us. You have reached us outside of our operating hours. An agent will respond when we open. Please see link https://microsoft.com",
+      openLinkInNewTab: true
     },
     styleProps: {
       generalStyleProps: {
@@ -1146,7 +1161,7 @@ export const dummyDefaultProps = {
       subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now."
     },
     styleProps: {
-      // ...[Existing chat button style props]
+      // ...[Existing loading pane style props]
       generalStyleProps: {
         position: "initial",
         width: "100%",
@@ -1174,6 +1189,48 @@ export const dummyDefaultProps = {
         backgroundColor: "#FFFFFF",
         borderColor: "#F1F1F1"
       }
+    },
+    isCustomerVoiceSurveyCompact: undefined
+  },
+  preChatSurveyPaneProps: {
+    controlProps: {
+      id: "oc-lcw-prechatsurveypane-default",
+      dir: "auto",
+      hidePreChatSurveyPane: false,
+      adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
+      payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
+      onSubmit: function () {} // Detailed implementation omitted
+    },
+
+    styleProps: {
+      generalStyleProps: {
+        borderStyle: "solid",
+        borderRadius: "4px",
+        borderWidth: "3px",
+        backgroundColor: "#FFFFFF",
+        borderColor: "#F1F1F1",
+        overflowY: "auto",
+        height: "inherit",
+        width: "inherit"
+      },
+      customButtonStyleProps: {
+        backgroundColor: "rgb(49, 95, 162)",
+        color: "#FFFFFF",
+        fontFamily: "Segoe UI, Arial, sans-serif",
+        fontSize: "15px",
+        height: "48px"
+      },
+      adaptiveCardContainerStyleProps: {
+        border: "1px solid #ECECEC",
+        borderRadius: "4px",
+        margin: "3%"
+      },
+      customTextInputStyleProps: {
+        height: "20px"
+      },
+      customMultilineTextInputStyleProps: {
+        height: "52px"
+      }
     }
   },
   proactiveChatPaneProps: {
@@ -1194,7 +1251,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.",
@@ -1204,8 +1271,8 @@ export const dummyDefaultProps = {
       onClose: () => {},
       // Detailed implementation omitted
       onStart: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
         backgroundColor: "rgb(255, 255, 255)",
@@ -1336,8 +1403,8 @@ export const dummyDefaultProps = {
       onStartNewChat: () => {},
       // Detailed implementation omitted
       onMinimize: () => {} // Detailed implementation omitted
-
     },
+
     styleProps: {
       generalStyleProps: {
         backgroundColor: "rgb(255, 255, 255)",
@@ -1422,9 +1489,8 @@ export const dummyDefaultProps = {
         startNewChatButtonClassName: undefined
       }
     },
-    authClientFunction: undefined,
-    isReconnectEnabled: undefined,
-    reconnectId: undefined
+    reconnectId: undefined,
+    redirectInSameWindow: undefined
   },
   styleProps: {
     generalStyles: {
@@ -1496,7 +1562,7 @@ export const dummyDefaultProps = {
       internalErrorBoxClass: undefined,
       internalRenderErrorBox: undefined,
       locale: "en-US",
-      onTelemetry: undefined,
+      onTelemetry: createWebChatTelemetry(),
       overrideLocalizedStrings: undefined,
       renderMarkdown: createMarkdown(false, false),
       scrollToEndButtonMiddleware: undefined,
@@ -1544,6 +1610,12 @@ export const dummyDefaultProps = {
         lineHeight: "16px",
         padding: "0px 10px 0 10px"
       },
+      userMessageBoxStyles: {
+        maxWidth: "90%"
+      },
+      systemMessageBoxStyles: {
+        maxWidth: "90%"
+      },
       typingIndicatorStyleProps: {
         marginLeft: "10px",
         marginBottom: "5px",
@@ -1663,6 +1735,9 @@ export const dummyDefaultProps = {
       },
       attachmentSizeStyles: {
         display: "none"
+      },
+      receivedMessageAnchorStyles: {
+        color: "white"
       }
     },
     localizedTexts: {
@@ -1686,7 +1761,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
+  telemetryConfig: undefined,
+  getAuthToken: undefined
 };

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

@@ -4,9 +4,92 @@ import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { WebChatStoreLoader } from "../../webchatcontainerstateful/webchatcontroller/WebChatStoreLoader";
-import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
+import { PostChatSurveyMode } from "../../postchatsurveypanestateful/enums/PostChatSurveyMode";
+import { Constants } from "../../../common/Constants";
+import { addDelayInMs, getWidgetEndChatEventName } from "../../../common/utils";
+import { getAuthClientFunction, handleAuthentication } from "./authHelper";
 
-export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat) => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const prepareEndChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, state) => {
+  var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4, _conversationDetails;
+  const isPostChatEnabled = (_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.msdyn_postconversationsurveyenable;
+  const postChatSurveyMode = (_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : (_state$domainStates$l4 = _state$domainStates$l3.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l4 === void 0 ? void 0 : _state$domainStates$l4.msdyn_postconversationsurveymode;
+
+  //Unable to end chat if token has expired
+  if (props.getAuthToken) {
+    const authClientFunction = getAuthClientFunction(props.chatConfig);
+    if (props.getAuthToken && authClientFunction) {
+      // set auth token to chat sdk before start chat
+      const authSuccess = await handleAuthentication(chatSDK, props.chatConfig, props.getAuthToken);
+      if (!authSuccess) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.GetAuthTokenFailed,
+          ExceptionDetails: {
+            exception: "Unable to get auth token during end chat"
+          }
+        });
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let conversationDetails = undefined;
+  try {
+    conversationDetails = await chatSDK.getConversationDetails();
+  } catch (erorr) {
+    TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.GetConversationDetailsException,
+      ExceptionDetails: {
+        exception: `Failed to get conversation details: ${erorr}`
+      }
+    });
+  }
+  if (isPostChatEnabled === "true" && ((_conversationDetails = conversationDetails) === null || _conversationDetails === void 0 ? void 0 : _conversationDetails.canRenderPostChat) === Constants.truePascal) {
+    const skipEndChatSDK = false;
+    const skipCloseChat = true;
+    const chatSession = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getCurrentLiveChatContext());
+    await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat, false);
+    if (chatSession) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      chatSDK.chatToken = chatSession.chatToken ?? {};
+      chatSDK.requestId = chatSession.requestId;
+    }
+    if (postChatSurveyMode === PostChatSurveyMode.Embed) {
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+        payload: ConversationState.PostchatLoading
+      });
+      await addDelayInMs(Constants.PostChatLoadingDurationInMs);
+      const loadPostChatEvent = {
+        eventName: BroadcastEvent.LoadPostChatSurvey
+      };
+      BroadcastService.postMessage(loadPostChatEvent);
+    } else if (postChatSurveyMode === PostChatSurveyMode.Link) {
+      var _props$webChatContain, _props$webChatContain2;
+      dispatch({
+        type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+        payload: ConversationState.InActive
+      });
+
+      // Disable SendBox
+      if ((props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.hideSendboxOnConversationEnd) !== false) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setWebChatStyles(styles => {
+          return {
+            ...styles,
+            hideSendBox: true
+          };
+        });
+      }
+    }
+    return;
+  }
+  await endChat(props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, false, false, true);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab) => {
   if (!skipEndChatSDK) {
     try {
       TelemetryHelper.logSDKEvent(LogLevel.INFO, {
@@ -20,17 +103,35 @@ export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
           exception: ex
         }
       });
+      postMessageToOtherTab = false;
     }
   }
 
+  // Need to clear these states immediately when chat ended from OC.
+  dispatch({
+    type: LiveChatWidgetActionType.SET_CUSTOM_CONTEXT,
+    payload: undefined
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
+    payload: undefined
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
+    payload: undefined
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.SET_RECONNECT_ID,
+    payload: undefined
+  });
   if (!skipCloseChat) {
     try {
-      var _props$webChatContain;
-
+      var _props$webChatContain3;
       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)
+      setWebChatStyles({
+        ...defaultWebChatContainerStatefulProps.webChatStyles,
+        ...((_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.webChatStyles)
       });
       WebChatStoreLoader.store = null;
       dispatch({
@@ -50,16 +151,24 @@ export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
         payload: null
       });
       dispatch({
-        type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
-        payload: undefined
+        type: LiveChatWidgetActionType.SET_UNREAD_MESSAGE_COUNT,
+        payload: 0
       });
       dispatch({
-        type: LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
-        payload: undefined
-      });
-      BroadcastService.postMessage({
-        eventName: BroadcastEvent.EndChat
+        type: LiveChatWidgetActionType.SET_PROACTIVE_CHAT_PARAMS,
+        payload: {
+          proactiveChatBodyTitle: "",
+          proactiveChatEnablePrechat: false,
+          proactiveChatInNewWindow: false
+        }
       });
+      if (postMessageToOtherTab) {
+        var _chatSDK$omnichannelC, _chatSDK$omnichannelC2, _props$controlProps;
+        const endChatEventName = getWidgetEndChatEventName(chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC === void 0 ? void 0 : _chatSDK$omnichannelC.orgId, chatSDK === null || chatSDK === void 0 ? void 0 : (_chatSDK$omnichannelC2 = chatSDK.omnichannelConfig) === null || _chatSDK$omnichannelC2 === void 0 ? void 0 : _chatSDK$omnichannelC2.widgetId, (props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.widgetInstanceId) ?? "");
+        BroadcastService.postMessage({
+          eventName: endChatEventName
+        });
+      }
     } catch (error) {
       TelemetryHelper.logActionEvent(LogLevel.ERROR, {
         Event: TelemetryEvent.CloseChatMethodException,
@@ -69,4 +178,5 @@ export const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, disp
       });
     }
   }
-};
+};
+export { prepareEndChat, endChat };

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

@@ -2,7 +2,6 @@ import { shouldShowChatButton, shouldShowProactiveChatPane } from "../../../cont
 import { defaultLiveChatWidgetGeneralStyles } from "./defaultStyles/defaultLiveChatWidgetGeneralStyles";
 export const getGeneralStylesForButton = state => {
   let generalStylesForButton = defaultLiveChatWidgetGeneralStyles;
-
   if (!shouldShowChatButton(state) && !shouldShowProactiveChatPane(state)) {
     generalStylesForButton = Object.assign({}, defaultLiveChatWidgetGeneralStyles, {
       boxShadow: "0px 0px 2px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12)",
@@ -12,6 +11,5 @@ export const getGeneralStylesForButton = state => {
       padding: "0.5"
     });
   }
-
   return generalStylesForButton;
 };

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

@@ -1,6 +1,7 @@
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
-import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper"; // 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 initCallingSdk = async (chatSDK, setVoiceVideoCallingSDK) => {
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8,23 +9,20 @@ 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.ERROR, {
+      TelemetryHelper.logCallingEvent(LogLevel.INFO, {
         Event: TelemetryEvent.CallingSDKLoadSuccess
       });
       return true;
     }
-
     return false;
   } catch (error) {
-    if (error !== "Voice and video call is not enabled") {
-      TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
-        Event: TelemetryEvent.CallingSDKLoadFailed,
-        ExceptionDetails: {
-          exception: error
-        }
-      });
-    }
-
+    TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.CallingSDKLoadFailed,
+      ExceptionDetails: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        exception: error.message
+      }
+    });
     return false;
   }
 };