@microsoft/omnichannel-chat-widget 0.1.0-main.3d1c026 → 0.1.0-main.7338c17

package/README.md

@@ -0,0 +1,235 @@
+# Omnichannel Live Chat Widget UI Components
+
+![Release CI](https://github.com/microsoft/omnichannel-chat-widget/workflows/chat-components-release/badge.svg) [![npm version](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-components.svg)](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-components.svg) ![npm](https://img.shields.io/npm/dm/@microsoft/omnichannel-chat-components)\
+![Release CI](https://github.com/microsoft/omnichannel-chat-widget/workflows/chat-widget-release/badge.svg) [![npm version](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-widget.svg)](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-widget.svg) ![npm](https://img.shields.io/npm/dm/@microsoft/omnichannel-chat-widget)
+
+[@microsoft/omnichannel-chat-widget](https://www.npmjs.com/package/@microsoft/omnichannel-chat-widget) is a React-based UI component library which allows you to build your own live chat widget experience using [@microsoft/omnichannel-chat-sdk](https://www.npmjs.com/package/@microsoft/omnichannel-chat-sdk).
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+1. [Installation](#installation)
+1. [Example Usage](#example-usage)
+1. [Components](#components)
+1. [Telemetry](#telemetry)
+1. [Features](#features)
+
+## Introduction
+
+Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.
+
+For more information about Live Chat Widget, see [here](https://docs.microsoft.com/en-us/dynamics365/customer-service/set-up-chat-widget).
+
+## Installation
+
+```powershell
+npm i @microsoft/omnichannel-chat-sdk
+npm i @microsoft/omnichannel-chat-widget
+```
+
+or
+
+```powershell
+yarn add @microsoft/omnichannel-chat-sdk
+yarn add @microsoft/omnichannel-chat-widget
+```
+
+The repo also contains the ```@microsoft/omnichannel-chat-components``` package, which is a collection of UI components. The ```@microsoft/omnichannel-chat-widget``` package is an integration of the Chat SDK and the UI components. To install the UI components separately, do
+
+```powershell
+npm i @microsoft/omnichannel-chat-components
+```
+
+or
+
+```powershell
+yarn add @microsoft/omnichannel-chat-components
+```
+
+## Example Usage
+
+The basic example below takes in the ```<LiveChatWidget/>``` component along with the Chat SDK to create a customized Omnichannel chat widget.
+> :warning: The Chat SDK has to be **_initialized_** before being passed in.
+
+```js
+import * as React from "react";
+
+import { LiveChatWidget } from "@microsoft/omnichannel-chat-widget";
+import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";
+import ReactDOM from "react-dom";
+//Below version numbers will help us to troubleshoot issues with specific package
+import { version as chatSdkVersion } from "@microsoft/omnichannel-chat-sdk/package.json";
+import { version as chatWidgetVersion } from "../package.json";
+import { version as chatComponentVersion } from "@microsoft/omnichannel-chat-components/package.json";
+
+const render = async () => {
+    const omnichannelConfig = {
+        orgId: "00000000-0000-0000-0000-000000000000", // dummy config
+        orgUrl: "https://www.org-url.com", // dummy config
+        widgetId: "00000000-0000-0000-0000-000000000000" // dummy config
+    };
+    const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
+    await chatSDK.initialize(); // mandatory
+    const chatConfig = await chatSDK.getLiveChatConfig();
+    const liveChatWidgetProps = {
+        styleProps: {
+            generalStyles: {
+                width: "700px",
+                height: "800px"
+            }
+        },
+        headerProps: {
+            controlProps: {
+                hideMinimizeButton: true
+            }
+        },
+        chatSDK: chatSDK, // mandatory
+        chatConfig: chatConfig, // mandatory
+        telemetryConfig: { //mandatory
+            orgId: omnichannelConfig.orgId,
+            orgUrl: omnichannelConfig.orgUrl,
+            appId: omnichannelConfig.widgetId,
+            OCChatSDKVersion: chatSdkVersion,
+            chatComponentVersion: chatComponentVersion,
+            chatWidgetVersion: chatWidgetVersion
+        }
+    };
+
+    ReactDOM.render(
+        <LiveChatWidget {...liveChatWidgetProps}/>,
+        document.getElementById("my-container")
+    );
+};
+
+render();
+```
+
+A sample widget can be found in this repo [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/sample). To build it, do ```yarn build-sample``` or ```yarn build-sample:dev``` from project root.
+
+## Components
+
+### Stateless UI Components
+
+These are components that are included in the ```@microsoft/omnichannel-chat-components``` package.
+
+| Component |  Usage | Interface |
+| ----- | -------- | ----- |
+| CallingContainerPane | The container for voice and video feature in the chat widget | [ICallingContainerProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/callingcontainer/interfaces/ICallingContainerProps.ts) |
+| ChatButton | The button that appears on the user's portal that is designed to be the entry point for the user to initate chat | [IChatButtonProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/chatbutton/interfaces/IChatButtonProps.ts) |
+| CommandButton | A customizable button component that can be injected to the header and/or footer | [ICommandButtonProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/common/interfaces/ICommandButtonProps.ts)|
+| ConfirmationPane | The default pane used when the Header close button is launched | [IConfirmationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/confirmationpane/interfaces/IConfirmationPaneProps.ts) |
+| Footer | The bottom container of the chat containing the download transcript, notification sound and email transcript buttons by default. | [IFooterProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/footer/interfaces/IFooterProps.ts) |
+| Header | The top container of the chat containing the default minimize, close and title of the chat widget | [IHeaderProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/header/interfaces/IHeaderProps.ts) |
+| InputValidationPane | A pop-up input pane with validation. In the default widget this is used as part of [EmailTranscriptPane](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/emailtranscriptpanestateful/interfaces/IEmailTranscriptPaneProps.ts) | [IInputValidationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/inputvalidationpane/interfaces/IInputValidationPaneProps.ts) |
+| LoadingPane | The default pane used after the chat button is clicked and before the chat loads completely | [ILoadingPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/loadingpane/interfaces/ILoadingPaneProps.ts) |
+| OutOfOfficeHoursPane | The pane that is displayed when the chat is outside of operating hours set on admin side | [IOOOHPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/outofofficehourspane/interfaces/IOOOHPaneProps.ts) |
+| PostChatSurveyPane | The pane that holds the [Customer Voice](https://dynamics.microsoft.com/en-us/customer-voice/overview/) survey which would be used by the customer to input their chat experience, provide user ratings etc. It uses an IFrame to render the survey URL fetched from `getPostChatSurveyContext` call from [OmniChannel ChatSDK](https://github.com/microsoft/omnichannel-chat-sdk#get-postchat-survey). | [IPostChatSurveyPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/postchatsurveypane/interfaces/IPostChatSurveyPaneProps.ts) |
+| PreChatSurveyPane | The pane that holds the form which would be used by the customer to input helpful information for using the Support Chat before starting up the Chat Process. Makes use of [AdaptiveCards](https://adaptivecards.io/) | [IPreChatSurveyPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneProps.ts) |
+| ProactiveChatSurveyPane | A pane that holds more information than a normal chat button and can be configured to proactively pop up | [IProactiveChatPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/proactivechatpane/interfaces/IProactiveChatPaneProps.ts) |
+| ReconnectChatPane | The pane that shows up when the customer is re-connecting to the chat to add additional conversation | [IReconnectChatPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/reconnectchatpane/interfaces/IReconnectChatPaneProps.ts) |
+
+> :warning: Because the components extend Microsoft's [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) components, the base interface for all the ```styleProps``` in the above table is [IStyle](https://github.com/microsoft/fluentui/blob/master/packages/merge-styles/src/IStyle.ts), which extends the [IRawStyleBase](https://docs.microsoft.com/en-us/javascript/api/merge-styles/irawstylebase?view=office-ui-fabric-react-latest) interface, which is the most useful reference.
+
+### Stateful Components
+
+| Component | Default Usage | Interface |
+| ----- | -------- | ----- |
+| LiveChatWidget | The default widget that stitches the UI components with Chat SDK | [ILiveChatWidgetProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/livechatwidget/interfaces/ILiveChatWidgetProps.ts) |
+
+Some of the interfaces listed in the Stateless table have Stateful counterparts defined in the ```@microsoft/omnichannel-chat-widget``` package. For example, [IConfirmationPaneStatefulProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/confirmationpanestateful/interfaces/IConfirmationPaneStatefulProps.ts) extends [IConfirmationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/confirmationpane/interfaces/IConfirmationPaneProps.ts) with additional attributes that only makes sense in the stateful context.
+
+### Default Props
+
+For a list of all default props used in the default stateful widget, please see [here](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/livechatwidget/common/defaultProps/dummyDefaultProps.ts). If you want to change a default prop, you need to explicitly set it and parse the object as the argument to ```<LiveChatWidget/>```
+
+### Custom Components
+
+There are two ways to custom the components provided in the library - 1) Replacing components using ComponentOverrides, and 2) Adding custom components in header and footer.
+
+#### ComponentOverrides
+
+Most sub-components and the default panes provided can be overriden. Components have "componentOverrides" as part of props interface, which consists of ReactNodes or strings for each part of the component. For example, the "ProactiveChatPane" component has a close button, and the close button can be overriden by creating a custom react node and setting it to the "closeButton" attribute of "componentOverrides" interface that is part of the props.
+
+```js
+const customButton = (
+    <button style={{
+        background: "green",
+        height: "80px",
+        margin: "30px 15px 0 0",
+        padding: "10px",
+        width: "160px"
+    }}>
+        This is a custom button
+    </button>
+);
+
+const liveChatWidgetProps = {
+    proactiveChatPaneProps: {
+        componentOverrides: {
+            closeButton: customButton
+        };
+    };
+}
+```
+
+#### Custom Components in Header and Footer
+
+Header's and Footer's child components consist of three parts:
+
+1. "leftGroup" - adding child components at the left of the Header/Footer
+1. "middleGroup" - adding child components in the middle of the Header/Footer
+1. "rightGroup" - adding child components at the right of the Header/Footer
+
+By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#ComponentOverrides). In addition, other custom child components can be added to both Header and Footer by creating custom react nodes and adding them to attributes "leftGroup", "middleGroup" or "rightGroup" of "controlProps".
+
+```js
+const buttonStyleProps: IButtonStyles = {
+    root: {
+        color: "blue",
+        height: 25,
+        width: 25,
+    }
+};
+
+const calendarIcon: IIconProps = { iconName: "Calendar" };
+const calendarIconButton = <IconButton
+    key="calendarIconButton"
+    iconProps={calendarIcon}
+    styles={buttonStyleProps}
+    title="Calendar">
+</IconButton>;
+
+const emojiIcon: IIconProps = { iconName: "Emoji2" };
+const emojiIconButton = <IconButton
+    key="emojiIconButton"
+    iconProps={emojiIcon}
+    styles={buttonStyleProps}
+    title="Sentiment">
+</IconButton>;
+
+const uploadIcon: IIconProps = { iconName: "Upload" };
+const uploadIconButton = <IconButton
+    key="uploadIconButton"
+    iconProps={uploadIcon}
+    styles={buttonStyleProps}
+    title="Upload">
+</IconButton>;
+
+const customizedFooterProp: IFooterProps = {
+    controlProps: {
+        leftGroup: { children: [uploadIconButton] },
+        middleGroup: { children: [calendarIconButton] },
+        rightGroup: { children: [emojiIconButton] }
+    }
+};
+```
+
+> :pushpin: Note that [WebChat hooks](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/HOOKS.md) can also be used in any custom components.
+
+## See Also
+
+[Telemetry](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Telemetry.md)\
+[Create LCW widget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md)\
+[Omnichannel Features](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Features.md)\
+[How to Add Visual Regression Tests](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/VisualRegressionTestingGuide.md)\
+[Security](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SECURITY.md)

package/lib/cjs/common/Constants.js

@@ -41,6 +41,8 @@ _defineProperty(Constants, "false", "false");
 
 _defineProperty(Constants, "maximumUnreadMessageCount", 99);
 
+_defineProperty(Constants, "widgetStateDataKey", "LcwChatWidgetState");
+
 _defineProperty(Constants, "channelIdKey", "ChannelId-");
 
 _defineProperty(Constants, "ChannelId", "lcw");

package/lib/cjs/common/contextDataStore/DataStoreManager.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataStoreManager = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class DataStoreManager {}
+
+exports.DataStoreManager = DataStoreManager;
+
+_defineProperty(DataStoreManager, "clientDataStore", void 0);

package/lib/cjs/common/interfaces/IContextDataStore.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/common/telemetry/TelemetryConstants.js

@@ -115,11 +115,15 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["SendTypingIndicatorSucceeded"] = "SendTypingIndicatorSucceeded";
   TelemetryEvent["SendTypingIndicatorFailed"] = "SendTypingIndicatorFailed";
   TelemetryEvent["PreChatSurveyStartChatMethodFailed"] = "PreChatSurveyStartChatMethodFailed";
+  TelemetryEvent["ChatAlreadyTriggered"] = "ChatAlreadyTriggered";
+  TelemetryEvent["StartProactiveChatEventReceived"] = "StartProactiveChatEventReceived";
   TelemetryEvent["StartProactiveChatMethodFailed"] = "StartProactiveChatMethodFailed";
   TelemetryEvent["ProactiveChatAccepted"] = "ProactiveChatAccepted";
   TelemetryEvent["ProactiveChatRejected"] = "ProactiveChatRejected";
   TelemetryEvent["IncomingProactiveChatScreenLoaded"] = "IncomingProactiveChatScreenLoaded";
   TelemetryEvent["ProactiveChatClosed"] = "ProactiveChatClosed";
+  TelemetryEvent["ProactiveChatStartChat"] = "ProactiveChatStartChat";
+  TelemetryEvent["ProactiveChatStartPopoutChat"] = "ProactiveChatStartPopoutChat";
   TelemetryEvent["ReconnectChatContinueConversation"] = "ReconnectChatContinueConversation";
   TelemetryEvent["ReconnectChatStartNewConversation"] = "ReconnectChatStartNewConversation";
   TelemetryEvent["ReconnectChatMinimize"] = "ReconnectChatMinimize";
@@ -129,7 +133,6 @@ exports.TelemetryEvent = TelemetryEvent;
 class TelemetryConstants {
   static map(eventTypeOrScenarioType) {
     switch (eventTypeOrScenarioType) {
-      case TelemetryEvent.StartChatSDKCall:
       case TelemetryEvent.ParseAdaptiveCardFailed:
         return ScenarioType.CONFIG_VALIDATION;
 
@@ -168,6 +171,7 @@ class TelemetryConstants {
       case TelemetryEvent.HeaderMinimizeButtonClicked:
         return ScenarioType.ACTIONS;
 
+      case TelemetryEvent.StartChatSDKCall:
       case TelemetryEvent.StartChatMethodException:
       case TelemetryEvent.CloseChatMethodException:
       case TelemetryEvent.StartProactiveChatMethodFailed:

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

@@ -13,10 +13,6 @@ var _utils = require("../../common/utils");
 
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 
-var _Constants = require("../../common/Constants");
-
-var _ConversationState = require("../../contexts/common/ConversationState");
-
 var _DimLayer = require("../dimlayer/DimLayer");
 
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
@@ -35,6 +31,8 @@ var _useChatContextStore = _interopRequireDefault(require("../../hooks/useChatCo
 
 var _useChatSDKStore = _interopRequireDefault(require("../../hooks/useChatSDKStore"));
 
+var _Constants = require("../../common/Constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,14 +44,14 @@ const ConfirmationPaneStateful = props => {
   var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _state$domainStates$l4;
 
   const initialTabIndexMap = new Map();
-  let elements = [];
+  let elements = []; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const chatSDK = (0, _useChatSDKStore.default)();
   const [state, dispatch] = (0, _useChatContextStore.default)();
   const {
-    setPostChatContext,
     endChat
   } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-  const chatSDK = (0, _useChatSDKStore.default)(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const [adapter] = (0, _useChatAdapterStore.default)();
   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;
@@ -62,7 +60,7 @@ const ConfirmationPaneStateful = props => {
     id: "oc-lcw-confirmation-pane",
     dir: state.domainStates.globalDir,
     onConfirm: async () => {
-      _TelemetryHelper.TelemetryHelper.logConfigDataEvent(_TelemetryConstants.LogLevel.INFO, {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.ConfirmationConfirmButtonClicked,
         Description: "Confirmation pane Confirm button clicked"
       });
@@ -73,26 +71,15 @@ const ConfirmationPaneStateful = props => {
       });
 
       try {
-        //ToDo: End Chat before PostChat Context and conversation Details is set once the getPostChatContext request ID fetch issue is fixed
-        const conversationDetails = await chatSDK.getConversationDetails(); // ToDo: Replace with CanRenderPostChat once available in conversationDetails API response 
+        // check agent has joined conversation
+        const conversationDetails = await chatSDK.getConversationDetails();
 
         if (isPostChatEnabled === "true" && postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Embed && conversationDetails.canRenderPostChat === _Constants.Constants.truePascal) {
-          dispatch({
-            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
-            payload: true
-          });
-          dispatch({
-            type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-            payload: _ConversationState.ConversationState.Loading
-          });
-          await setPostChatContext();
-
-          if (state.domainStates.postChatContext) {
-            dispatch({
-              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-              payload: _ConversationState.ConversationState.Postchat
-            });
-          }
+          const loadPostChatEvent = {
+            eventName: "LoadPostChatSurvey"
+          };
+
+          _omnichannelChatComponents.BroadcastService.postMessage(loadPostChatEvent);
         } else {
           (0, _utils.setTabIndices)(elements, initialTabIndexMap, true);
 
@@ -119,7 +106,7 @@ const ConfirmationPaneStateful = props => {
       }
     },
     onCancel: () => {
-      _TelemetryHelper.TelemetryHelper.logConfigDataEvent(_TelemetryConstants.LogLevel.INFO, {
+      _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
         Event: _TelemetryConstants.TelemetryEvent.ConfirmationCancelButtonClicked,
         Description: "Confirmation pane Cancel button clicked."
       });

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

@@ -95,8 +95,8 @@ const EmailTranscriptPaneStateful = props => {
     },
     onCancel: () => {
       _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
-        Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptButtonClicked,
-        Description: "Email Transcript button clicked."
+        Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptCancelButtonClicked,
+        Description: "Email Transcript cancel button clicked."
       });
 
       closeEmailTranscriptPane();

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

@@ -7,6 +7,8 @@ exports.endChat = void 0;
 
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
 
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
 var _ConversationState = require("../../../contexts/common/ConversationState");
 
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
@@ -21,14 +23,12 @@ var _WebChatStoreLoader = require("../../webchatcontainerstateful/webchatcontrol
 
 var _defaultWebChatContainerStatefulProps = require("../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps");
 
-var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, adapter) => {
   try {
     var _props$webChatContain;
 
-    _TelemetryHelper.TelemetryHelper.logConfigDataEvent(_TelemetryConstants.LogLevel.INFO, {
+    _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.EndChatSDKCall
     });
 
@@ -59,6 +59,10 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_TOKEN,
       payload: undefined
     });
+    dispatch({
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
+      payload: undefined
+    });
 
     _omnichannelChatComponents.BroadcastService.postMessage({
       eventName: "EndChat"

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

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

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

@@ -7,8 +7,6 @@ exports.initWebChatComposer = void 0;
 
 var _botframeworkWebchat = require("botframework-webchat");
 
-var _ConversationState = require("../../../contexts/common/ConversationState");
-
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 
 var _PostChatSurveyMode = require("../../postchatsurveypanestateful/enums/PostChatSurveyMode");
@@ -55,7 +53,7 @@ var _preProcessingMiddleware = _interopRequireDefault(require("../../webchatcont
 
 var _sanitizationMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"));
 
-var _setPostChatContextAndLoadSurvey = require("./setPostChatContextAndLoadSurvey");
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -89,15 +87,11 @@ const initWebChatComposer = (props, chatSDK, state, dispatch, setWebChatStyles)
       }
 
       if (isPostChatEnabled === "true" && postChatSurveyMode === _PostChatSurveyMode.PostChatSurveyMode.Embed) {
-        dispatch({
-          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOULD_SHOW_POST_CHAT,
-          payload: true
-        });
-        dispatch({
-          type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
-          payload: _ConversationState.ConversationState.Loading
-        });
-        await (0, _setPostChatContextAndLoadSurvey.setPostChatContextAndLoadSurvey)(chatSDK, dispatch, true);
+        const loadPostChatEvent = {
+          eventName: "LoadPostChatSurvey"
+        };
+
+        _omnichannelChatComponents.BroadcastService.postMessage(loadPostChatEvent);
       } else {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_ENDED_BY_AGENT,

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

@@ -17,9 +17,21 @@ var _defaultTelemetryInternalData = require("../../../common/telemetry/defaultCo
 
 var _defaultTelemetryConfiguration = require("../../../common/telemetry/defaultConfigs/defaultTelemetryConfiguration");
 
+var _package = require("@microsoft/omnichannel-chat-components/package.json");
+
+var _package2 = require("@microsoft/omnichannel-chat-sdk/package.json");
+
 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.defaultTelemetryConfiguration,
     ...props.telemetryConfig
   };
@@ -29,6 +41,8 @@ const registerTelemetryLoggers = (props, dispatch) => {
 
     _TelemetryManager.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 = { ..._defaultTelemetryInternalData.defaultInternalTelemetryData,
       telemetryConfig: Object.assign({}, _defaultTelemetryConfiguration.defaultTelemetryConfiguration, telemetryConfig),
       ariaConfig: Object.assign({}, _defaultAriaConfig.defaultAriaConfig, telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.ariaConfigurations)
@@ -39,9 +53,12 @@ const registerTelemetryLoggers = (props, dispatch) => {
     }
 
     telemetryData = _TelemetryHelper.TelemetryHelper.addWidgetDataToTelemetry(telemetryConfig, telemetryData);
-    telemetryData.OCChatSDKVersion = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.OCChatSDKVersion;
-    telemetryData.chatComponentVersion = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.chatComponentVersion;
-    telemetryData.chatWidgetVersion = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.chatWidgetVersion;
+    telemetryData.OCChatSDKVersion = _package2.version;
+    telemetryData.chatComponentVersion = _package.version;
+    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;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_TELEMETRY_DATA,
       payload: telemetryData

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

@@ -13,21 +13,25 @@ var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 
 var _ConversationState = require("../../../contexts/common/ConversationState");
 
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, loadSurvey) => {
+const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, persistedChat) => {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const context = await chatSDK.getPostChatSurveyContext();
-
-    _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
-      Event: _TelemetryConstants.TelemetryEvent.PostChatContextCallSucceed,
-      Description: "Postchat context call succeed."
-    });
-
-    dispatch({
-      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_POST_CHAT_CONTEXT,
-      payload: context
-    });
+    if (!persistedChat) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const context = await chatSDK.getPostChatSurveyContext();
+
+      _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
+        Event: _TelemetryConstants.TelemetryEvent.PostChatContextCallSucceed,
+        Description: "Postchat context call succeed."
+      });
+
+      dispatch({
+        type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_POST_CHAT_CONTEXT,
+        payload: context
+      });
+    }
   } catch (ex) {
     _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.PostChatContextCallFailed,
@@ -36,20 +40,17 @@ const setPostChatContextAndLoadSurvey = async (chatSDK, dispatch, loadSurvey) =>
       }
     });
   }
-  /* -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 
-  */
 
-
-  if (loadSurvey) {
+  _omnichannelChatComponents.BroadcastService.getMessageByEventName("LoadPostChatSurvey").subscribe(msg => {
+    dispatch({
+      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
+      payload: _ConversationState.ConversationState.Loading
+    });
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
       payload: _ConversationState.ConversationState.Postchat
     });
-  }
+  });
 };
 
 exports.setPostChatContextAndLoadSurvey = setPostChatContextAndLoadSurvey;