@microsoft/omnichannel-chat-widget 1.2.4-main.9847fc4 → 1.3.1-main.57e27d3

package/lib/cjs/components/webchatcontainerstateful/common/mockchatsdk.js

@@ -60,5 +60,8 @@ class MockChatSDK {
       reconnectId: "123"
     };
   }
+  getVoiceVideoCalling() {
+    return null;
+  }
 }
 exports.MockChatSDK = MockChatSDK;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/toastMiddleware.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _NotificationScenarios = require("../../enums/NotificationScenarios");
+var _NotificationPaneStateful = _interopRequireDefault(require("../../../../notificationpanestateful/NotificationPaneStateful"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createToastMiddleware = (notificationPaneProps, endChat) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
+  const toastMiddleware = () => next => card => {
+    const {
+      notification
+    } = card;
+    if (notificationPaneProps) {
+      if (notification.id === _NotificationScenarios.NotificationScenarios.ChatDisconnect) {
+        return /*#__PURE__*/_react.default.createElement(_NotificationPaneStateful.default, {
+          notificationPaneProps: notificationPaneProps,
+          notificationScenarioType: _NotificationScenarios.NotificationScenarios.ChatDisconnect,
+          endChat: endChat
+        });
+      }
+
+      // TODO: additional notification scenarios to be added...
+    }
+
+    return next(card);
+  };
+  return toastMiddleware;
+};
+var _default = createToastMiddleware;
+exports.default = _default;

package/lib/esm/assets/Icons.js

@@ -9,4 +9,5 @@ export const PowerpointIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo
 export const VideoIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICAgdmlld0JveD0iMCAwIDIwNDggMjA0OCINCiAgICB3aWR0aD0iMTJweCINCiAgICBoZWlnaHQ9IjEycHgiPg0KICAgIDxwYXRoIGQ9Ik0wIDI1NmgyMDQ4djE0MDhIMFYyNTZ6bTI1NiAxMjgwdi0xMjhIMTI4djEyOGgxMjh6bTAtMjU2di0xMjhIMTI4djEyOGgxMjh6bTAtMjU2Vjg5NkgxMjh2MTI4aDEyOHptMC0yNTZWNjQwSDEyOHYxMjhoMTI4em0wLTI1NlYzODRIMTI4djEyOGgxMjh6bTE0MDggNzg2VjM4NEgzODR2ODIzbDQxMS01NDkgNzQxIDg3OC0zMjktNTU4IDEzNy0xMzcgMzIwIDQ1N3ptMjU2IDIzOHYtMTI4aC0xMjh2MTI4aDEyOHptMC0yNTZ2LTEyOGgtMTI4djEyOGgxMjh6bTAtMjU2Vjg5NmgtMTI4djEyOGgxMjh6bTAtMjU2VjY0MGgtMTI4djEyOGgxMjh6bTAtMjU2VjM4NGgtMTI4djEyOGgxMjh6IiAvPg0KPC9zdmc+";
 export const VisioIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICAgdmlld0JveD0iMCAwIDIwNDggMjA0OCINCiAgICB3aWR0aD0iMTJweCINCiAgICBoZWlnaHQ9IjEycHgiPg0KICAgIDxwYXRoIGQ9Ik0yMDQ4IDQ3NXYxNDQ1cTAgMjctMTAgNTB0LTI3IDQwLTQxIDI4LTUwIDEwSDY0MHEtMjcgMC01MC0xMHQtNDAtMjctMjgtNDEtMTAtNTB2LTI1NkgxMTVxLTI0IDAtNDQtOXQtMzctMjUtMjUtMzYtOS00NVY2MjdxMC0yNCA5LTQ0dDI1LTM3IDM2LTI1IDQ1LTloMzk3VjEyOHEwLTI3IDEwLTUwdDI3LTQwIDQxLTI4IDUwLTEwaDkzM3EyNiAwIDQ5IDl0NDIgMjhsMzQ3IDM0N3ExOCAxOCAyNyA0MXQxMCA1MHptLTM4NC0yNTZ2MTY1aDE2NWwtMTY1LTE2NXpNNDkzIDE0MjRoMTYzbDI1NS02NzJINzQ1bC0xNDcgNDI3cS01IDE2LTEwIDMxdC0xMSAzMXEtNDEtMTIzLTgyLTI0NHQtODQtMjQ1SDI0MWwyNDggNjYyIDQgMTB6bTE0NyA0OTZoMTI4MFY1MTJoLTI1NnEtMjcgMC01MC0xMHQtNDAtMjctMjgtNDEtMTAtNTBWMTI4SDY0MHYzODRoMzk3cTI0IDAgNDQgOXQzNyAyNSAyNSAzNiA5IDQ1djkyMnEwIDI0LTkgNDR0LTI1IDM3LTM2IDI1LTQ1IDlINjQwdjI1NnptOTYwLTEyODBsMTkyIDE5Mi0xMjggMTI4djQ0OGgtMjU2djEyOGgtMTI4di0zODRoMTI4djEyOGgxMjhWOTYwbC0xMjgtMTI4IDE5Mi0xOTJ6IiAvPg0KPC9zdmc+";
 export const WordIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICAgdmlld0JveD0iMCAwIDIwNDggMjA0OCINCiAgICB3aWR0aD0iMTJweCINCiAgICBoZWlnaHQ9IjEycHgiPg0KICAgIDxwYXRoIGQ9Ik0yMDQ4IDQ3NXYxNDQ1cTAgMjctMTAgNTB0LTI3IDQwLTQxIDI4LTUwIDEwSDY0MHEtMjcgMC01MC0xMHQtNDAtMjctMjgtNDEtMTAtNTB2LTI1NkgxMTVxLTI0IDAtNDQtOXQtMzctMjUtMjUtMzYtOS00NVY2MjdxMC0yNCA5LTQ0dDI1LTM3IDM2LTI1IDQ1LTloMzk3VjEyOHEwLTI3IDEwLTUwdDI3LTQwIDQxLTI4IDUwLTEwaDkzM3EyNiAwIDQ5IDl0NDIgMjhsMzQ3IDM0N3ExOCAxOCAyNyA0MXQxMCA1MHptLTM4NC0yNTZ2MTY1aDE2NWwtMTY1LTE2NXpNMzIwIDE0MjRoMTYxcTItOCA5LTQzdDE4LTgzIDIxLTEwMyAyMi0xMDEgMTYtNzYgOC0zMWw3IDMwcTcgMzAgMTcgNzd0MjMgMTAwIDIzIDEwMyAxOSA4NCAxMCA0M2gxNjBsMTQ4LTY3Mkg4MzRsLTgwIDQzOC0xMDAtNDM4SDUwMmwtOTYgNDQwLTg2LTQ0MEgxNzBsMTUwIDY3MnptMzIwIDQ5NmgxMjgwVjUxMmgtMjU2cS0yNyAwLTUwLTEwdC00MC0yNy0yOC00MS0xMC01MFYxMjhINjQwdjM4NGgzOTdxMjQgMCA0NCA5dDM3IDI1IDI1IDM2IDkgNDV2OTIycTAgMjQtOSA0NHQtMjUgMzctMzYgMjUtNDUgOUg2NDB2MjU2em02NDAtMTAyNFY3NjhoNTEydjEyOGgtNTEyem0wIDI1NnYtMTI4aDUxMnYxMjhoLTUxMnptMCAyNTZ2LTEyOGg1MTJ2MTI4aC01MTJ6IiAvPg0KPC9zdmc+";
-export const AlertIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTEzLDE3aC0ydi0yaDJWMTd6IE0xMywxM2gtMlY3aDJWMTN6Ii8+PGc+PHBhdGggZD0iTTEyLDRjNC40LDAsOCwzLjYsOCw4cy0zLjYsOC04LDhzLTgtMy42LTgtOFM3LjYsNCwxMiw0IE0xMiwyQzYuNSwyLDIsNi41LDIsMTJjMCw1LjUsNC41LDEwLDEwLDEwczEwLTQuNSwxMC0xMCAgIEMyMiw2LjUsMTcuNSwyLDEyLDJMMTIsMnoiLz48L2c+PC9zdmc+";
+export const AlertIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTEzLDE3aC0ydi0yaDJWMTd6IE0xMywxM2gtMlY3aDJWMTN6Ii8+PGc+PHBhdGggZD0iTTEyLDRjNC40LDAsOCwzLjYsOCw4cy0zLjYsOC04LDhzLTgtMy42LTgtOFM3LjYsNCwxMiw0IE0xMiwyQzYuNSwyLDIsNi41LDIsMTJjMCw1LjUsNC41LDEwLDEwLDEwczEwLTQuNSwxMC0xMCAgIEMyMiw2LjUsMTcuNSwyLDEyLDJMMTIsMnoiLz48L2c+PC9zdmc+";
+export const NotificationAlertIcon = "data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJXYXJuaW5nIiBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHdpZHRoPSIxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS4zNzUgMEMxMC4yNDA5IDAgMTEuMDcxIDAuMTEwNjc3IDExLjg2NTIgMC4zMzIwMzFDMTIuNjY2IDAuNTUzMzg1IDEzLjQxNDcgMC44NjkxNDEgMTQuMTExMyAxLjI3OTNDMTQuODA3OSAxLjY4Mjk0IDE1LjQzOTUgMi4xNzEyMiAxNi4wMDU5IDIuNzQ0MTRDMTYuNTc4OCAzLjMxMDU1IDE3LjA2NzEgMy45NDIwNiAxNy40NzA3IDQuNjM4NjdDMTcuODgwOSA1LjMzNTI5IDE4LjE5NjYgNi4wODM5OCAxOC40MTggNi44ODQ3N0MxOC42MzkzIDcuNjc5MDQgMTguNzUgOC41MDkxMSAxOC43NSA5LjM3NUMxOC43NSAxMC4yNDA5IDE4LjYzOTMgMTEuMDc0MiAxOC40MTggMTEuODc1QzE4LjE5NjYgMTIuNjY5MyAxNy44ODA5IDEzLjQxNDcgMTcuNDcwNyAxNC4xMTEzQzE3LjA2NzEgMTQuODA3OSAxNi41Nzg4IDE1LjQ0MjcgMTYuMDA1OSAxNi4wMTU2QzE1LjQzOTUgMTYuNTgyIDE0LjgwNzkgMTcuMDcwMyAxNC4xMTEzIDE3LjQ4MDVDMTMuNDE0NyAxNy44ODQxIDEyLjY2NiAxOC4xOTY2IDExLjg2NTIgMTguNDE4QzExLjA3MSAxOC42MzkzIDEwLjI0MDkgMTguNzUgOS4zNzUgMTguNzVDOC41MDkxMSAxOC43NSA3LjY3NTc4IDE4LjYzOTMgNi44NzUgMTguNDE4QzYuMDgwNzMgMTguMTk2NiA1LjMzNTI5IDE3Ljg4NDEgNC42Mzg2NyAxNy40ODA1QzMuOTQyMDYgMTcuMDcwMyAzLjMwNzI5IDE2LjU4MiAyLjczNDM4IDE2LjAxNTZDMi4xNjc5NyAxNS40NDI3IDEuNjc5NjkgMTQuODA3OSAxLjI2OTUzIDE0LjExMTNDMC44NjU4ODUgMTMuNDE0NyAwLjU1MzM4NSAxMi42NjkzIDAuMzMyMDMxIDExLjg3NUMwLjExMDY3NyAxMS4wNzQyIDAgMTAuMjQwOSAwIDkuMzc1QzAgOC41MDkxMSAwLjExMDY3NyA3LjY3OTA0IDAuMzMyMDMxIDYuODg0NzdDMC41NTMzODUgNi4wODM5OCAwLjg2NTg4NSA1LjMzNTI5IDEuMjY5NTMgNC42Mzg2N0MxLjY3OTY5IDMuOTQyMDYgMi4xNjc5NyAzLjMxMDU1IDIuNzM0MzggMi43NDQxNEMzLjMwNzI5IDIuMTcxMjIgMy45NDIwNiAxLjY4Mjk0IDQuNjM4NjcgMS4yNzkzQzUuMzM1MjkgMC44NjkxNDEgNi4wODA3MyAwLjU1MzM4NSA2Ljg3NSAwLjMzMjAzMUM3LjY3NTc4IDAuMTEwNjc3IDguNTA5MTEgMCA5LjM3NSAwWk05LjM3NSAxNy41QzEwLjExNzIgMTcuNSAxMC44MzMzIDE3LjQwMjMgMTEuNTIzNCAxNy4yMDdDMTIuMjIwMSAxNy4wMTE3IDEyLjg2NzggMTYuNzM4MyAxMy40NjY4IDE2LjM4NjdDMTQuMDcyMyAxNi4wMzUyIDE0LjYyMjQgMTUuNjEyIDE1LjExNzIgMTUuMTE3MkMxNS42MTIgMTQuNjIyNCAxNi4wMzUyIDE0LjA3NTUgMTYuMzg2NyAxMy40NzY2QzE2LjczODMgMTIuODcxMSAxNy4wMTE3IDEyLjIyMzMgMTcuMjA3IDExLjUzMzJDMTcuNDAyMyAxMC44NDMxIDE3LjUgMTAuMTIzNyAxNy41IDkuMzc1QzE3LjUgOC42MzI4MSAxNy40MDIzIDcuOTE2NjcgMTcuMjA3IDcuMjI2NTZDMTcuMDExNyA2LjUyOTk1IDE2LjczODMgNS44ODIxNiAxNi4zODY3IDUuMjgzMkMxNi4wMzUyIDQuNjc3NzMgMTUuNjEyIDQuMTI3NiAxNS4xMTcyIDMuNjMyODFDMTQuNjIyNCAzLjEzODAyIDE0LjA3MjMgMi43MTQ4NCAxMy40NjY4IDIuMzYzMjhDMTIuODY3OCAyLjAxMTcyIDEyLjIyMDEgMS43MzgyOCAxMS41MjM0IDEuNTQyOTdDMTAuODMzMyAxLjM0NzY2IDEwLjExNzIgMS4yNSA5LjM3NSAxLjI1QzguNjI2MyAxLjI1IDcuOTA2OSAxLjM0NzY2IDcuMjE2OCAxLjU0Mjk3QzYuNTI2NjkgMS43MzgyOCA1Ljg3ODkxIDIuMDExNzIgNS4yNzM0NCAyLjM2MzI4QzQuNjc0NDggMi43MTQ4NCA0LjEyNzYgMy4xMzgwMiAzLjYzMjgxIDMuNjMyODFDMy4xMzgwMiA0LjEyNzYgMi43MTQ4NCA0LjY3NzczIDIuMzYzMjggNS4yODMyQzIuMDExNzIgNS44ODIxNiAxLjczODI4IDYuNTI5OTUgMS41NDI5NyA3LjIyNjU2QzEuMzQ3NjYgNy45MTY2NyAxLjI1IDguNjMyODEgMS4yNSA5LjM3NUMxLjI1IDEwLjExNzIgMS4zNDc2NiAxMC44MzY2IDEuNTQyOTcgMTEuNTMzMkMxLjczODI4IDEyLjIyMzMgMi4wMTE3MiAxMi44NzExIDIuMzYzMjggMTMuNDc2NkMyLjcxNDg0IDE0LjA3NTUgMy4xMzgwMiAxNC42MjI0IDMuNjMyODEgMTUuMTE3MkM0LjEyNzYgMTUuNjEyIDQuNjc0NDggMTYuMDM1MiA1LjI3MzQ0IDE2LjM4NjdDNS44Nzg5MSAxNi43MzgzIDYuNTI2NjkgMTcuMDExNyA3LjIxNjggMTcuMjA3QzcuOTA2OSAxNy40MDIzIDguNjI2MyAxNy41IDkuMzc1IDE3LjVaTTguNzUgNUgxMFYxMS4yNUg4Ljc1VjVaTTguNzUgMTIuNUgxMFYxMy43NUg4Ljc1VjEyLjVaIj48L3BhdGg+PC9zdmc+";

package/lib/esm/common/Constants.js

@@ -239,6 +239,19 @@ _defineProperty(TranscriptConstants, "AdaptiveCardType", "adaptivecard");
 _defineProperty(TranscriptConstants, "InternalMode", "internal");
 _defineProperty(TranscriptConstants, "AgentDialogColor", "#2266E3");
 _defineProperty(TranscriptConstants, "AgentFontColor", "white");
+export class NotificationPaneConstants {}
+_defineProperty(NotificationPaneConstants, "DefaultNotificationPaneId", "lcw-notification-pane");
+_defineProperty(NotificationPaneConstants, "DismissId", "lcw-notification-pane-dismiss-button");
+_defineProperty(NotificationPaneConstants, "DismissText", "Dismiss");
+_defineProperty(NotificationPaneConstants, "DismissAriaLabel", "Notification dismiss");
+_defineProperty(NotificationPaneConstants, "CloseChatId", "lcw-notification-pane-close-chat-button");
+_defineProperty(NotificationPaneConstants, "CloseChatText", "Close Chat");
+_defineProperty(NotificationPaneConstants, "CloseChatAriaLabel", "Close chat");
+_defineProperty(NotificationPaneConstants, "IconId", "lcw-notification-pane-icon");
+_defineProperty(NotificationPaneConstants, "IconText", "Notification Icon");
+_defineProperty(NotificationPaneConstants, "ChatDisconnectTitleText", "Chat disconnected");
+_defineProperty(NotificationPaneConstants, "ChatDisconnectSubtitleText", "For additional assistance, please close the chat and try again.");
+_defineProperty(NotificationPaneConstants, "ChromeCloseIconName", "ChromeClose");
 export class AriaTelemetryConstants {}
 // Aria Endpoint for different environment types.
 _defineProperty(AriaTelemetryConstants, "GERMANY_ENDPOINT", "https://de.pipe.aria.microsoft.com/Collector/3.0/");

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

@@ -138,6 +138,8 @@ export let TelemetryEvent;
   TelemetryEvent["ReconnectChatPaneLoaded"] = "ReconnectChatPaneLoaded";
   TelemetryEvent["HeaderCloseButtonClicked"] = "HeaderCloseButtonClicked";
   TelemetryEvent["HeaderMinimizeButtonClicked"] = "HeaderMinimizeButtonClicked";
+  TelemetryEvent["NotificationCloseChatButtonClicked"] = "NotificationCloseChatButtonClicked";
+  TelemetryEvent["NotificationDismissButtonClicked"] = "NotificationDismissButtonClicked";
   TelemetryEvent["DownloadTranscriptButtonClicked"] = "DownloadTranscriptButtonClicked";
   TelemetryEvent["EmailTranscriptButtonClicked"] = "EmailTranscriptButtonClicked";
   TelemetryEvent["EmailTranscriptCancelButtonClicked"] = "EmailTranscriptCancelButtonClicked";
@@ -248,6 +250,8 @@ export class TelemetryConstants {
       case TelemetryEvent.PreChatSurveyStartChatMethodFailed:
       case TelemetryEvent.HeaderCloseButtonClicked:
       case TelemetryEvent.HeaderMinimizeButtonClicked:
+      case TelemetryEvent.NotificationCloseChatButtonClicked:
+      case TelemetryEvent.NotificationDismissButtonClicked:
       case TelemetryEvent.MessageSent:
       case TelemetryEvent.MessageReceived:
       case TelemetryEvent.CustomContextReceived:

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

@@ -14,20 +14,22 @@ import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstat
 const prepareEndChat = async (props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, uwid) => {
   try {
     var _conversationDetails$, _state$domainStates, _state$domainStates2;
+    // Use Case: If call is ongoing, end the call by simulating end call button click
+    endVoiceVideoCallIfOngoing(chatSDK, dispatch);
     const conversationDetails = await getConversationDetailsCall(chatSDK);
 
-    // Use Case : When post chat is not configured
+    // Use Case: When post chat is not configured
     if ((conversationDetails === null || conversationDetails === void 0 ? void 0 : (_conversationDetails$ = conversationDetails.canRenderPostChat) === null || _conversationDetails$ === void 0 ? void 0 : _conversationDetails$.toLowerCase()) === Constants.false) {
       var _state$appStates;
       // If ended by customer, just close chat
       if ((state === null || state === void 0 ? void 0 : (_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.conversationEndedBy) === ConversationEndEntity.Customer) {
         await endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true, uwid);
       }
-      //Use Case: If ended by Agent, stay chat in InActive state
+      // Use Case: If ended by Agent, stay chat in InActive state
       return;
     }
 
-    // Use Case : Can render post chat scenarios
+    // Use Case: Can render post chat scenarios
     await getPostChatContext(chatSDK, state, dispatch);
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -135,6 +137,28 @@ const endChat = async function (props, chatSDK, state, dispatch, setAdapter, set
     });
   }
 };
+const callingStateCleanUp = async dispatch => {
+  dispatch({
+    type: LiveChatWidgetActionType.SHOW_CALLING_CONTAINER,
+    payload: false
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.SET_INCOMING_CALL,
+    payload: true
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.DISABLE_VIDEO_CALL,
+    payload: true
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.DISABLE_LOCAL_VIDEO,
+    payload: true
+  });
+  dispatch({
+    type: LiveChatWidgetActionType.DISABLE_REMOTE_VIDEO,
+    payload: true
+  });
+};
 const endChatStateCleanUp = async dispatch => {
   // Need to clear these states immediately when chat ended from OC.
   dispatch({
@@ -185,6 +209,30 @@ const closeChatStateCleanUp = async dispatch => {
     }
   });
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const endVoiceVideoCallIfOngoing = async (chatSDK, dispatch) => {
+  let callId = "";
+  try {
+    const voiceVideoCallingSdk = await chatSDK.getVoiceVideoCalling();
+    if (voiceVideoCallingSdk && voiceVideoCallingSdk.isInACall()) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      callId = voiceVideoCallingSdk.callId;
+      voiceVideoCallingSdk.stopCall();
+      TelemetryHelper.logCallingEvent(LogLevel.INFO, {
+        Event: TelemetryEvent.EndCallButtonClick
+      }, callId);
+      callingStateCleanUp(dispatch);
+    }
+  } catch (error) {
+    TelemetryHelper.logCallingEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.EndCallButtonClickException,
+      ExceptionDetails: {
+        exception: `Failed to End Call:  ${error}`
+      }
+    }, callId);
+  }
+};
 const closeChatWidget = (dispatch, props, state) => {
   var _state$appStates3;
   if (state !== null && state !== void 0 && (_state$appStates3 = state.appStates) !== null && _state$appStates3 !== void 0 && _state$appStates3.hideStartChatButton) {

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

@@ -30,10 +30,11 @@ import preProcessingMiddleware from "../../webchatcontainerstateful/webchatcontr
 import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware";
 import DOMPurify from "dompurify";
 import createMessageSequenceIdOverrideMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageSequenceIdOverrideMiddleware";
+import createToastMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/toastMiddleware";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const initWebChatComposer = (props, state, dispatch, chatSDK) => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _state$domainStates$l4, _state$domainStates$l5, _props$webChatContain9, _props$webChatContain10, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain11, _props$webChatContain12, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain13, _props$webChatContain14, _defaultWebChatContai, _props$webChatContain15, _props$webChatContain16, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain17, _props$webChatContain18, _defaultWebChatContai2, _props$webChatContain19, _props$webChatContain20, _defaultWebChatContai3, _props$webChatContain21, _props$webChatContain22;
+export const initWebChatComposer = (props, state, dispatch, chatSDK, endChat) => {
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _state$domainStates$l4, _state$domainStates$l5, _props$webChatContain9, _props$webChatContain10, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain11, _props$webChatContain12, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain13, _props$webChatContain14, _defaultWebChatContai, _props$webChatContain15, _props$webChatContain16, _props$webChatContain17, _props$webChatContain18, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain19, _props$webChatContain20, _defaultWebChatContai2, _props$webChatContain21, _props$webChatContain22, _defaultWebChatContai3, _props$webChatContain23, _props$webChatContain24;
   // Add a hook to make all links open a new window
   postDomPurifyActivities();
   const localizedTexts = {
@@ -108,14 +109,15 @@ export const initWebChatComposer = (props, state, dispatch, chatSDK) => {
     activityMiddleware: (_props$webChatContain9 = props.webChatContainerProps) !== null && _props$webChatContain9 !== void 0 && (_props$webChatContain10 = _props$webChatContain9.renderingMiddlewareProps) !== null && _props$webChatContain10 !== void 0 && _props$webChatContain10.disableActivityMiddleware ? undefined : createActivityMiddleware((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.systemMessageStyleProps, (_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.userMessageStyleProps),
     attachmentMiddleware: (_props$webChatContain11 = props.webChatContainerProps) !== null && _props$webChatContain11 !== void 0 && (_props$webChatContain12 = _props$webChatContain11.renderingMiddlewareProps) !== null && _props$webChatContain12 !== void 0 && _props$webChatContain12.disableAttachmentMiddleware ? undefined : createAttachmentMiddleware(((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : (_state$domainStates$r4 = _state$domainStates$r3.attachmentProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.enableInlinePlaying) ?? defaultAttachmentProps.enableInlinePlaying),
     activityStatusMiddleware: (_props$webChatContain13 = props.webChatContainerProps) !== null && _props$webChatContain13 !== void 0 && (_props$webChatContain14 = _props$webChatContain13.renderingMiddlewareProps) !== null && _props$webChatContain14 !== void 0 && _props$webChatContain14.disableActivityStatusMiddleware ? undefined : (_defaultWebChatContai = defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.activityStatusMiddleware,
+    toastMiddleware: (_props$webChatContain15 = props.webChatContainerProps) !== null && _props$webChatContain15 !== void 0 && (_props$webChatContain16 = _props$webChatContain15.renderingMiddlewareProps) !== null && _props$webChatContain16 !== void 0 && _props$webChatContain16.disableToastMiddleware ? undefined : createToastMiddleware(props.notificationPaneProps, endChat),
     renderMarkdown,
-    avatarMiddleware: (_props$webChatContain15 = props.webChatContainerProps) !== null && _props$webChatContain15 !== void 0 && (_props$webChatContain16 = _props$webChatContain15.renderingMiddlewareProps) !== null && _props$webChatContain16 !== void 0 && _props$webChatContain16.disableAvatarMiddleware ? undefined : createAvatarMiddleware((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.avatarStyleProps, (_state$domainStates$r6 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r6 === void 0 ? void 0 : _state$domainStates$r6.avatarTextStyleProps),
-    groupActivitiesMiddleware: (_props$webChatContain17 = props.webChatContainerProps) !== null && _props$webChatContain17 !== void 0 && (_props$webChatContain18 = _props$webChatContain17.renderingMiddlewareProps) !== null && _props$webChatContain18 !== void 0 && _props$webChatContain18.disableGroupActivitiesMiddleware ? undefined : (_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.groupActivitiesMiddleware,
-    typingIndicatorMiddleware: (_props$webChatContain19 = props.webChatContainerProps) !== null && _props$webChatContain19 !== void 0 && (_props$webChatContain20 = _props$webChatContain19.renderingMiddlewareProps) !== null && _props$webChatContain20 !== void 0 && _props$webChatContain20.disableTypingIndicatorMiddleware ? undefined : (_defaultWebChatContai3 = defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.typingIndicatorMiddleware,
+    avatarMiddleware: (_props$webChatContain17 = props.webChatContainerProps) !== null && _props$webChatContain17 !== void 0 && (_props$webChatContain18 = _props$webChatContain17.renderingMiddlewareProps) !== null && _props$webChatContain18 !== void 0 && _props$webChatContain18.disableAvatarMiddleware ? undefined : createAvatarMiddleware((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.avatarStyleProps, (_state$domainStates$r6 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r6 === void 0 ? void 0 : _state$domainStates$r6.avatarTextStyleProps),
+    groupActivitiesMiddleware: (_props$webChatContain19 = props.webChatContainerProps) !== null && _props$webChatContain19 !== void 0 && (_props$webChatContain20 = _props$webChatContain19.renderingMiddlewareProps) !== null && _props$webChatContain20 !== void 0 && _props$webChatContain20.disableGroupActivitiesMiddleware ? undefined : (_defaultWebChatContai2 = defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.groupActivitiesMiddleware,
+    typingIndicatorMiddleware: (_props$webChatContain21 = props.webChatContainerProps) !== null && _props$webChatContain21 !== void 0 && (_props$webChatContain22 = _props$webChatContain21.renderingMiddlewareProps) !== null && _props$webChatContain22 !== void 0 && _props$webChatContain22.disableTypingIndicatorMiddleware ? undefined : (_defaultWebChatContai3 = defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.typingIndicatorMiddleware,
     onTelemetry: createWebChatTelemetry(),
-    cardActionMiddleware: createCardActionMiddleware(((_props$webChatContain21 = props.webChatContainerProps) === null || _props$webChatContain21 === void 0 ? void 0 : _props$webChatContain21.botMagicCode) || undefined),
+    cardActionMiddleware: createCardActionMiddleware(((_props$webChatContain23 = props.webChatContainerProps) === null || _props$webChatContain23 === void 0 ? void 0 : _props$webChatContain23.botMagicCode) || undefined),
     sendTypingIndicator: true,
-    ...((_props$webChatContain22 = props.webChatContainerProps) === null || _props$webChatContain22 === void 0 ? void 0 : _props$webChatContain22.webChatProps)
+    ...((_props$webChatContain24 = props.webChatContainerProps) === null || _props$webChatContain24 === void 0 ? void 0 : _props$webChatContain24.webChatProps)
   };
   return webChatProps;
 };

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

@@ -50,7 +50,7 @@ const prepareStartChat = async (props, chatSDK, state, dispatch, setAdapter) =>
   const isPreChatEnabledInProactiveChat = state.appStates.proactiveChatStates.proactiveChatEnablePrechat;
 
   //Setting PreChat and intiate chat
-  await setPreChatAndInitiateChat(chatSDK, dispatch, setAdapter, isProactiveChat, isPreChatEnabledInProactiveChat, undefined, props);
+  await setPreChatAndInitiateChat(chatSDK, dispatch, setAdapter, isProactiveChat, isPreChatEnabledInProactiveChat, state, props);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js

@@ -318,7 +318,27 @@ export const LiveChatWidgetStateful = props => {
     });
 
     // Start chat from SDK Event
-    BroadcastService.getMessageByEventName(BroadcastEvent.StartChat).subscribe(() => {
+    BroadcastService.getMessageByEventName(BroadcastEvent.StartChat).subscribe(msg => {
+      var _msg$payload4;
+      let stateWithUpdatedContext = state;
+      if (msg !== null && msg !== void 0 && (_msg$payload4 = msg.payload) !== null && _msg$payload4 !== void 0 && _msg$payload4.customContext) {
+        var _msg$payload5, _msg$payload6;
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomContextReceived,
+          Description: "CustomContext received through startChat event."
+        });
+        dispatch({
+          type: LiveChatWidgetActionType.SET_CUSTOM_CONTEXT,
+          payload: msg === null || msg === void 0 ? void 0 : (_msg$payload5 = msg.payload) === null || _msg$payload5 === void 0 ? void 0 : _msg$payload5.customContext
+        });
+        stateWithUpdatedContext = {
+          ...state,
+          domainStates: {
+            ...state.domainStates,
+            customContext: msg === null || msg === void 0 ? void 0 : (_msg$payload6 = msg.payload) === null || _msg$payload6 === void 0 ? void 0 : _msg$payload6.customContext
+          }
+        };
+      }
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.StartChatEventRecevied,
         Description: "Start chat event received."
@@ -332,7 +352,7 @@ export const LiveChatWidgetStateful = props => {
         BroadcastService.postMessage({
           eventName: BroadcastEvent.ChatInitiated
         });
-        prepareStartChat(props, chatSDK, state, dispatch, setAdapter);
+        prepareStartChat(props, chatSDK, stateWithUpdatedContext, dispatch, setAdapter);
         return;
       }
 
@@ -344,7 +364,7 @@ export const LiveChatWidgetStateful = props => {
           BroadcastService.postMessage({
             eventName: BroadcastEvent.ChatInitiated
           });
-          prepareStartChat(props, chatSDK, state, dispatch, setAdapter);
+          prepareStartChat(props, chatSDK, stateWithUpdatedContext, dispatch, setAdapter);
           return;
         }
 
@@ -596,7 +616,6 @@ export const LiveChatWidgetStateful = props => {
       eventName: BroadcastEvent.ClosePopoutWindow
     });
   };
-  const webChatProps = initWebChatComposer(props, state, dispatch, chatSDK);
   const setPostChatContextRelay = () => setPostChatContextAndLoadSurvey(chatSDK, dispatch);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const endChatRelay = (adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab) => endChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTab, uwid.current);
@@ -606,6 +625,7 @@ export const LiveChatWidgetStateful = props => {
   const confirmationPaneProps = initConfirmationPropsComposer(props);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const prepareEndChatRelay = () => prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, uwid.current);
+  const webChatProps = initWebChatComposer(props, state, dispatch, chatSDK, endChatRelay);
   const downloadTranscriptProps = createDownloadTranscriptProps(props.downloadTranscriptProps, {
     ...(defaultWebChatContainerStatefulProps === null || defaultWebChatContainerStatefulProps === void 0 ? void 0 : defaultWebChatContainerStatefulProps.webChatStyles),
     ...((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.webChatStyles)

package/lib/esm/components/notificationpanestateful/NotificationPaneStateful.js

@@ -0,0 +1,167 @@
+import React, { useEffect, useRef } from "react";
+import { NotificationPane } from "@microsoft/omnichannel-chat-components";
+import { hooks } from "botframework-webchat";
+import { useCallback } from "react";
+import { NotificationScenarios } from "../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import useChatAdapterStore from "../../hooks/useChatAdapterStore";
+import useChatContextStore from "../../hooks/useChatContextStore";
+import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
+import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { ConfirmationState, NotificationPaneConstants } from "../../common/Constants";
+import { defaultChatDisconnectStyleProps } from "./defaultProps/defaultChatDisconnectStyleProps";
+import { defaultChatDisconnectControlProps } from "./defaultProps/defaultChatDisconnectControlProps";
+export const NotificationPaneStateful = props => {
+  var _state$domainStates, _state$domainStates3;
+  const {
+    notificationPaneProps,
+    notificationScenarioType,
+    endChat
+  } = props;
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [adapter] = useChatAdapterStore();
+  const localConfirmationPaneState = useRef(state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : _state$domainStates.confirmationState);
+  const onCloseChatClick = async () => {
+    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.NotificationCloseChatButtonClicked,
+      Description: "Notification Close Chat button clicked."
+    });
+    if (localConfirmationPaneState.current !== ConfirmationState.Ok) {
+      dispatch({
+        type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
+        payload: true
+      });
+    } else {
+      const skipEndChatSDK = true;
+      const skipCloseChat = false;
+      const postMessageToOtherTabs = true;
+      await endChat(adapter, skipEndChatSDK, skipCloseChat, postMessageToOtherTabs);
+    }
+  };
+  useEffect(() => {
+    var _state$domainStates2;
+    localConfirmationPaneState.current = state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
+  }, [state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : _state$domainStates3.confirmationState]);
+  const {
+    useDismissNotification
+  } = hooks;
+  const dismissNotification = useDismissNotification();
+  const handleDismissNotification = useCallback(() => {
+    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.NotificationDismissButtonClicked,
+      Description: `${notificationScenarioType} Notification Dismiss button clicked.`
+    });
+    dismissNotification(notificationScenarioType ?? "");
+  }, [notificationScenarioType]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateTitleInternalProps = notificationProps => {
+    var _notificationProps$co, _notificationProps$co2, _notificationProps$st, _notificationProps$st2, _notificationProps$st3, _defaultChatDisconnec;
+    return {
+      hideTitle: ((_notificationProps$co = notificationProps.controlProps) === null || _notificationProps$co === void 0 ? void 0 : _notificationProps$co.hideTitle) ?? defaultChatDisconnectControlProps.hideTitle,
+      titleText: ((_notificationProps$co2 = notificationProps.controlProps) === null || _notificationProps$co2 === void 0 ? void 0 : _notificationProps$co2.titleText) ?? defaultChatDisconnectControlProps.titleText,
+      titleStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.titleStyleProps, (_notificationProps$st = notificationProps.styleProps) === null || _notificationProps$st === void 0 ? void 0 : _notificationProps$st.titleStyleProps),
+      titleClassName: ((_notificationProps$st2 = notificationProps.styleProps) === null || _notificationProps$st2 === void 0 ? void 0 : (_notificationProps$st3 = _notificationProps$st2.classNames) === null || _notificationProps$st3 === void 0 ? void 0 : _notificationProps$st3.titleClassName) ?? ((_defaultChatDisconnec = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec === void 0 ? void 0 : _defaultChatDisconnec.titleClassName)
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateSubtitleInternalProps = notificationProps => {
+    var _notificationProps$co3, _notificationProps$co4, _notificationProps$st4, _notificationProps$st5, _notificationProps$st6, _defaultChatDisconnec2;
+    return {
+      hideSubtitle: ((_notificationProps$co3 = notificationProps.controlProps) === null || _notificationProps$co3 === void 0 ? void 0 : _notificationProps$co3.hideSubtitle) ?? defaultChatDisconnectControlProps.hideSubtitle,
+      subtitleText: ((_notificationProps$co4 = notificationProps.controlProps) === null || _notificationProps$co4 === void 0 ? void 0 : _notificationProps$co4.subtitleText) ?? defaultChatDisconnectControlProps.subtitleText,
+      subtitleStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.subtitleStyleProps, (_notificationProps$st4 = notificationProps.styleProps) === null || _notificationProps$st4 === void 0 ? void 0 : _notificationProps$st4.subtitleStyleProps),
+      subtitleClassName: ((_notificationProps$st5 = notificationProps.styleProps) === null || _notificationProps$st5 === void 0 ? void 0 : (_notificationProps$st6 = _notificationProps$st5.classNames) === null || _notificationProps$st6 === void 0 ? void 0 : _notificationProps$st6.subtitleClassName) ?? ((_defaultChatDisconnec2 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec2 === void 0 ? void 0 : _defaultChatDisconnec2.subtitleClassName)
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateHyperlinkInternalProps = notificationProps => {
+    var _notificationProps$co5, _notificationProps$co6, _notificationProps$co7, _notificationProps$co8, _notificationProps$st7, _notificationProps$st8, _notificationProps$st9, _notificationProps$st10, _defaultChatDisconnec3;
+    return {
+      hideHyperlink: ((_notificationProps$co5 = notificationProps.controlProps) === null || _notificationProps$co5 === void 0 ? void 0 : _notificationProps$co5.hideHyperlink) ?? defaultChatDisconnectControlProps.hideHyperlink,
+      hyperlinkText: ((_notificationProps$co6 = notificationProps.controlProps) === null || _notificationProps$co6 === void 0 ? void 0 : _notificationProps$co6.hyperlinkText) ?? defaultChatDisconnectControlProps.hyperlinkText,
+      hyperlinkAriaLabel: ((_notificationProps$co7 = notificationProps.controlProps) === null || _notificationProps$co7 === void 0 ? void 0 : _notificationProps$co7.hyperlinkAriaLabel) ?? defaultChatDisconnectControlProps.hyperlinkAriaLabel,
+      hyperlinkHref: ((_notificationProps$co8 = notificationProps.controlProps) === null || _notificationProps$co8 === void 0 ? void 0 : _notificationProps$co8.hyperlinkHref) ?? defaultChatDisconnectControlProps.hyperlinkHref,
+      hyperlinkStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.hyperlinkStyleProps, (_notificationProps$st7 = notificationProps.styleProps) === null || _notificationProps$st7 === void 0 ? void 0 : _notificationProps$st7.hyperlinkStyleProps),
+      hyperlinkHoverStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.hyperlinkHoverStyleProps, (_notificationProps$st8 = notificationProps.styleProps) === null || _notificationProps$st8 === void 0 ? void 0 : _notificationProps$st8.hyperlinkHoverStyleProps),
+      hyperlinkClassName: ((_notificationProps$st9 = notificationProps.styleProps) === null || _notificationProps$st9 === void 0 ? void 0 : (_notificationProps$st10 = _notificationProps$st9.classNames) === null || _notificationProps$st10 === void 0 ? void 0 : _notificationProps$st10.hyperlinkClassName) ?? ((_defaultChatDisconnec3 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec3 === void 0 ? void 0 : _defaultChatDisconnec3.hyperlinkClassName)
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateNotificationIconInternalProps = notificationProps => {
+    var _notificationProps$co9, _notificationProps$co10, _notificationProps$st11, _notificationProps$st12, _notificationProps$st13, _defaultChatDisconnec4, _notificationProps$st14;
+    return {
+      hideNotificationIcon: ((_notificationProps$co9 = notificationProps.controlProps) === null || _notificationProps$co9 === void 0 ? void 0 : _notificationProps$co9.hideIcon) ?? defaultChatDisconnectControlProps.hideIcon,
+      notificationIconProps: Object.assign({}, defaultChatDisconnectControlProps.notificationIconProps, (_notificationProps$co10 = notificationProps.controlProps) === null || _notificationProps$co10 === void 0 ? void 0 : _notificationProps$co10.notificationIconProps),
+      notificationIconStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.notificationIconStyleProps, (_notificationProps$st11 = notificationProps.styleProps) === null || _notificationProps$st11 === void 0 ? void 0 : _notificationProps$st11.notificationIconStyleProps),
+      notificationIconClassName: ((_notificationProps$st12 = notificationProps.styleProps) === null || _notificationProps$st12 === void 0 ? void 0 : (_notificationProps$st13 = _notificationProps$st12.classNames) === null || _notificationProps$st13 === void 0 ? void 0 : _notificationProps$st13.notificationIconClassName) ?? ((_defaultChatDisconnec4 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec4 === void 0 ? void 0 : _defaultChatDisconnec4.notificationIconClassName),
+      notificationIconContainerStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.notificationIconContainerStyleProps, (_notificationProps$st14 = notificationProps.styleProps) === null || _notificationProps$st14 === void 0 ? void 0 : _notificationProps$st14.notificationIconContainerStyleProps)
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateDismissButtonInternalProps = notificationProps => {
+    var _notificationProps$co11, _notificationProps$co12, _notificationProps$st15, _notificationProps$st16, _notificationProps$st17, _notificationProps$st18, _defaultChatDisconnec5;
+    return {
+      hideDismissButton: ((_notificationProps$co11 = notificationProps.controlProps) === null || _notificationProps$co11 === void 0 ? void 0 : _notificationProps$co11.hideDismissButton) ?? defaultChatDisconnectControlProps.hideDismissButton,
+      dismissButtonProps: Object.assign({
+        onClick: handleDismissNotification
+      }, defaultChatDisconnectControlProps.dismissButtonProps, (_notificationProps$co12 = notificationProps.controlProps) === null || _notificationProps$co12 === void 0 ? void 0 : _notificationProps$co12.dismissButtonProps),
+      dismissButtonStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.dismissButtonStyleProps, (_notificationProps$st15 = notificationProps.styleProps) === null || _notificationProps$st15 === void 0 ? void 0 : _notificationProps$st15.dismissButtonStyleProps),
+      dismissButtonHoverStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.dismissButtonHoverStyleProps, (_notificationProps$st16 = notificationProps.styleProps) === null || _notificationProps$st16 === void 0 ? void 0 : _notificationProps$st16.dismissButtonHoverStyleProps),
+      dismissButtonClassName: ((_notificationProps$st17 = notificationProps.styleProps) === null || _notificationProps$st17 === void 0 ? void 0 : (_notificationProps$st18 = _notificationProps$st17.classNames) === null || _notificationProps$st18 === void 0 ? void 0 : _notificationProps$st18.dismissButtonClassName) ?? ((_defaultChatDisconnec5 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec5 === void 0 ? void 0 : _defaultChatDisconnec5.dismissButtonClassName)
+    };
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateCloseChatButtonInternalProps = notificationProps => {
+    var _notificationProps$co13, _notificationProps$co14, _notificationProps$st19, _notificationProps$st20, _notificationProps$st21, _notificationProps$st22, _defaultChatDisconnec6;
+    return {
+      hideCloseChatButton: ((_notificationProps$co13 = notificationProps.controlProps) === null || _notificationProps$co13 === void 0 ? void 0 : _notificationProps$co13.hideCloseChatButton) ?? defaultChatDisconnectControlProps.hideCloseChatButton,
+      closeChatButtonProps: Object.assign({
+        onClick: onCloseChatClick
+      }, defaultChatDisconnectControlProps.closeChatButtonProps, (_notificationProps$co14 = notificationProps.controlProps) === null || _notificationProps$co14 === void 0 ? void 0 : _notificationProps$co14.closeChatButtonProps),
+      closeChatButtonStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.closeChatButtonStyleProps, (_notificationProps$st19 = notificationProps.styleProps) === null || _notificationProps$st19 === void 0 ? void 0 : _notificationProps$st19.closeChatButtonStyleProps),
+      closeChatButtonHoverStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.closeChatButtonHoverStyleProps, (_notificationProps$st20 = notificationProps.styleProps) === null || _notificationProps$st20 === void 0 ? void 0 : _notificationProps$st20.closeChatButtonHoverStyleProps),
+      closeChatButtonClassName: ((_notificationProps$st21 = notificationProps.styleProps) === null || _notificationProps$st21 === void 0 ? void 0 : (_notificationProps$st22 = _notificationProps$st21.classNames) === null || _notificationProps$st22 === void 0 ? void 0 : _notificationProps$st22.closeChatButtonClassName) ?? ((_defaultChatDisconnec6 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec6 === void 0 ? void 0 : _defaultChatDisconnec6.closeChatButtonClassName)
+    };
+  };
+  let genericPropsObj = {};
+
+  // Populate INotificationPaneInternal after merging customized props with default props
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const populateInternalProps = notificationProps => {
+    var _notificationProps$st23, _notificationProps$st24, _notificationProps$st25, _defaultChatDisconnec7, _notificationProps$st26, _notificationProps$st27;
+    if (!notificationProps) {
+      notificationProps = {};
+    }
+    genericPropsObj = {
+      id: notificationProps.id ?? NotificationPaneConstants.DefaultNotificationPaneId,
+      dir: notificationProps.dir,
+      generalStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.generalStyleProps, (_notificationProps$st23 = notificationProps.styleProps) === null || _notificationProps$st23 === void 0 ? void 0 : _notificationProps$st23.generalStyleProps),
+      containerClassName: ((_notificationProps$st24 = notificationProps.styleProps) === null || _notificationProps$st24 === void 0 ? void 0 : (_notificationProps$st25 = _notificationProps$st24.classNames) === null || _notificationProps$st25 === void 0 ? void 0 : _notificationProps$st25.containerClassName) ?? ((_defaultChatDisconnec7 = defaultChatDisconnectStyleProps.classNames) === null || _defaultChatDisconnec7 === void 0 ? void 0 : _defaultChatDisconnec7.containerClassName),
+      componentOverrides: notificationProps.componentOverrides,
+      infoGroupStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.infoGroupStyleProps, (_notificationProps$st26 = notificationProps.styleProps) === null || _notificationProps$st26 === void 0 ? void 0 : _notificationProps$st26.infoGroupStyleProps),
+      buttonGroupStyleProps: Object.assign({}, defaultChatDisconnectStyleProps.buttonGroupStyleProps, (_notificationProps$st27 = notificationProps.styleProps) === null || _notificationProps$st27 === void 0 ? void 0 : _notificationProps$st27.buttonGroupStyleProps),
+      ...populateTitleInternalProps(notificationProps),
+      ...populateSubtitleInternalProps(notificationProps),
+      ...populateHyperlinkInternalProps(notificationProps),
+      ...populateNotificationIconInternalProps(notificationProps),
+      ...populateDismissButtonInternalProps(notificationProps),
+      ...populateCloseChatButtonInternalProps(notificationProps)
+    };
+  };
+  switch (notificationScenarioType) {
+    case NotificationScenarios.ChatDisconnect:
+      populateInternalProps(notificationPaneProps === null || notificationPaneProps === void 0 ? void 0 : notificationPaneProps.chatDisconnectNotificationProps);
+      break;
+    // TODO additional scenarios to be added...
+  }
+
+  return /*#__PURE__*/React.createElement(NotificationPane, genericPropsObj);
+};
+export default NotificationPaneStateful;

package/lib/esm/components/notificationpanestateful/defaultProps/defaultChatDisconnectControlProps.js

@@ -0,0 +1,34 @@
+import { NotificationPaneConstants } from "../../../common/Constants";
+import { NotificationAlertIcon } from "../../../assets/Icons";
+export const defaultChatDisconnectControlProps = {
+  hideTitle: false,
+  titleText: NotificationPaneConstants.ChatDisconnectTitleText,
+  hideSubtitle: false,
+  subtitleText: NotificationPaneConstants.ChatDisconnectSubtitleText,
+  hideIcon: false,
+  notificationIconProps: {
+    id: NotificationPaneConstants.IconId,
+    src: NotificationAlertIcon,
+    alt: NotificationPaneConstants.IconText
+  },
+  hideHyperlink: true,
+  hyperlinkText: "Learn more",
+  hyperlinkAriaLabel: "Learn more",
+  hyperlinkHref: "https://www.microsoft.com",
+  hideDismissButton: false,
+  dismissButtonProps: {
+    id: NotificationPaneConstants.DismissId,
+    text: NotificationPaneConstants.DismissText,
+    type: "icon",
+    iconName: NotificationPaneConstants.ChromeCloseIconName,
+    ariaLabel: NotificationPaneConstants.DismissAriaLabel
+  },
+  hideCloseChatButton: false,
+  closeChatButtonProps: {
+    id: NotificationPaneConstants.CloseChatId,
+    text: NotificationPaneConstants.CloseChatText,
+    type: "text",
+    iconName: NotificationPaneConstants.ChromeCloseIconName,
+    ariaLabel: NotificationPaneConstants.CloseChatAriaLabel
+  }
+};

package/lib/esm/components/notificationpanestateful/defaultProps/defaultChatDisconnectStyleProps.js

@@ -0,0 +1,91 @@
+export const defaultChatDisconnectStyleProps = {
+  generalStyleProps: {
+    backgroundColor: "#FFF4CE",
+    display: "flex"
+  },
+  notificationIconStyleProps: {
+    display: "flex",
+    height: "19px",
+    width: "19px"
+  },
+  notificationIconContainerStyleProps: {
+    display: "flex",
+    width: "36px",
+    height: "32px",
+    flexShrink: "0",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  titleStyleProps: {
+    fontFamily: "'Segoe UI', Arial, sans-serif",
+    fontSize: "87.5%",
+    minHeight: "32px",
+    fontWeight: "bold"
+  },
+  subtitleStyleProps: {
+    fontFamily: "'Segoe UI', Arial, sans-serif",
+    fontSize: "87.5%",
+    fontWeight: "normal"
+  },
+  hyperlinkStyleProps: {
+    fontFamily: "'Segoe UI', Arial, sans-serif",
+    fontSize: "87.5%",
+    textDecoration: "none",
+    color: "#0078d4",
+    fontWeight: "normal"
+  },
+  hyperlinkHoverStyleProps: {
+    textDecoration: "none",
+    color: "#005a9e"
+  },
+  dismissButtonStyleProps: {
+    width: "22px",
+    height: "22px",
+    borderRadius: "3px",
+    border: "0",
+    margin: "4px",
+    backgroundColor: "transparent",
+    color: "black",
+    icon: {
+      fontSize: "14px"
+    }
+  },
+  dismissButtonHoverStyleProps: {
+    filter: "brightness(0.8)",
+    icon: {
+      color: "black"
+    }
+  },
+  closeChatButtonStyleProps: {
+    backgroundColor: "white",
+    fontFamily: "Segoe UI, Arial, sans-serif",
+    fontSize: "87.5%",
+    fontWeight: "500",
+    height: "32px",
+    width: "80px",
+    padding: "0px"
+  },
+  closeChatButtonHoverStyleProps: {
+    filter: "brightness(0.8)"
+  },
+  infoGroupStyleProps: {
+    display: "flex",
+    justifyContent: "space-between",
+    flex: "1 1 0%",
+    marginTop: "2px"
+  },
+  buttonGroupStyleProps: {
+    display: "flex",
+    justifyContent: "flex-end",
+    margin: "8px"
+  },
+  classNames: {
+    containerClassName: "chat-disconnect-container",
+    titleClassName: "chat-disconnect-title",
+    subtitleClassName: "chat-disconnect-subtitle",
+    dismissButtonClassName: "chat-disconnect-dismiss-button",
+    hyperlinkClassName: "chat-disconnect-hyperlink",
+    notificationIconClassName: "chat-disconnect-notification-icon",
+    closeChatButtonClassName: "chat-disconnect-close-chat-button"
+  }
+};

package/lib/esm/components/notificationpanestateful/interfaces/INotificationPaneStatefulProps.js

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

package/lib/esm/components/webchatcontainerstateful/common/mockchatsdk.js

@@ -53,4 +53,7 @@ export class MockChatSDK {
       reconnectId: "123"
     };
   }
+  getVoiceVideoCalling() {
+    return null;
+  }
 }