@microsoft/omnichannel-chat-widget 1.7.3-main.3d9027c → 1.7.3-main.4c1722d

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

@@ -1,8 +1,9 @@
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
-import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
-import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleChatDisconnect = (props, state, setWebChatStyles) => {
   var _state$appStates, _state$domainStates, _state$domainStates$m, _props$webChatContain, _props$webChatContain2;

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

@@ -5,9 +5,14 @@ import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/
 import { ChatAdapterShim } from "./ChatAdapterShim";
 import { PauseActivitySubscriber } from "./ActivitySubscriber/PauseActivitySubscriber";
 import { BotAuthActivitySubscriber } from "./ActivitySubscriber/BotAuthActivitySubscriber";
+import { HiddenAdaptiveCardActivitySubscriber } from "./ActivitySubscriber/HiddenAdaptiveCardActivitySubscriber";
+const defaultBotAuthConfig = {
+  fetchBotAuthConfigRetries: 3,
+  fetchBotAuthConfigRetryInterval: 1000
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const createAdapter = async chatSDK => {
+export const createAdapter = async (chatSDK, props) => {
   const chatAdapterOptionalParams = {
     IC3Adapter: {
       options: {
@@ -33,9 +38,16 @@ export const createAdapter = async chatSDK => {
   let adapter = await chatSDK.createChatAdapter(chatAdapterOptionalParams);
   //so far, there is no need to convert to the shim adapter when using visual tests
   if (chatSDK.isMockModeOn !== true) {
+    var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4;
+    const botAuthActivitySubscriberOptionalParams = {
+      fetchBotAuthConfigRetries: (props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.botAuthConfig) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.fetchBotAuthConfigRetries) || defaultBotAuthConfig.fetchBotAuthConfigRetries,
+      fetchBotAuthConfigRetryInterval: (props === null || props === void 0 ? void 0 : (_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : (_props$webChatContain4 = _props$webChatContain3.botAuthConfig) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.fetchBotAuthConfigRetryInterval) || defaultBotAuthConfig.fetchBotAuthConfigRetryInterval
+    };
     adapter = new ChatAdapterShim(adapter);
     adapter.addSubscriber(new PauseActivitySubscriber());
-    adapter.addSubscriber(new BotAuthActivitySubscriber());
+    adapter.addSubscriber(new BotAuthActivitySubscriber(botAuthActivitySubscriberOptionalParams));
+    // Remove this code after ICM ID:544623085 is fixed
+    adapter.addSubscriber(new HiddenAdaptiveCardActivitySubscriber());
     return adapter.chatAdapter;
   }
   return adapter;

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

@@ -1,9 +1,10 @@
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { Constants } from "../../../common/Constants";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
-import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
 const isInternetConnected = async () => {
   try {
     const response = await fetch(Constants.internetConnectionTestUrl);
@@ -26,6 +27,9 @@ export const createInternetConnectionChangeHandler = async () => {
         Event: TelemetryEvent.NetworkReconnected
       });
       NotificationHandler.notifySuccess(NotificationScenarios.InternetConnection, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE);
+      BroadcastService.postMessage({
+        eventName: BroadcastEvent.NetworkReconnected
+      });
     }
   };
 

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

@@ -1,8 +1,8 @@
 import { Constants } from "../../../common/Constants";
 import MarkdownIt from "markdown-it";
 import MarkdownItForInline from "markdown-it-for-inline";
-import MarkdownSlack from "slack-markdown-it";
 import { defaultMarkdownLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMarkdownLocalizedTexts";
+import { addSlackMarkdownIt } from "./helpers/markdownHelper";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
@@ -13,7 +13,7 @@ export const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineM
       linkify: true,
       breaks: !disableNewLineMarkdownSupport
     });
-    markdown.use(MarkdownSlack);
+    markdown = addSlackMarkdownIt(markdown);
   } else {
     markdown = new MarkdownIt(Constants.Zero, {
       html: true,

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

@@ -0,0 +1,20 @@
+import { DemoChatSDK } from "../../webchatcontainerstateful/common/DemoChatSDK";
+import { DesignerChatSDK } from "../../webchatcontainerstateful/common/DesignerChatSDK";
+import { MockChatSDK } from "../../webchatcontainerstateful/common/mockchatsdk";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getMockChatSDKIfApplicable = (chatSDK, type) => {
+  if (type) {
+    switch (type.toLowerCase()) {
+      case "demo":
+        chatSDK = new DemoChatSDK();
+        break;
+      case "designer":
+        chatSDK = new DesignerChatSDK();
+        break;
+      default:
+        chatSDK = new MockChatSDK();
+    }
+  }
+  return chatSDK;
+};

package/lib/esm/components/livechatwidget/common/helpers/markdownHelper.js

@@ -0,0 +1,15 @@
+import SlackMarkdown from "slack-markdown-it";
+export const addSlackMarkdownIt = markdown => {
+  try {
+    markdown.use(SlackMarkdown);
+  } catch (e) {
+    // this is to support the case when slack-markdown-it 
+    // transpiled code doesn't export default (webpack5)
+    if (SlackMarkdown.default.apply) {
+      markdown.use(SlackMarkdown.default);
+    } else {
+      console.error("Error while adding slackMarkdown plugin", e);
+    }
+  }
+  return markdown;
+};

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

@@ -0,0 +1,34 @@
+const overridePropsOnMockIfApplicable = props => {
+  var _props$mock, _props$mock2;
+  if (props !== null && props !== void 0 && (_props$mock = props.mock) !== null && _props$mock !== void 0 && _props$mock.type && (props === null || props === void 0 ? void 0 : (_props$mock2 = props.mock) === null || _props$mock2 === void 0 ? void 0 : _props$mock2.type.toLowerCase()) === "designer") {
+    if (!props.webChatContainerProps) {
+      props.webChatContainerProps = {};
+    }
+    if (!props.webChatContainerProps.webChatProps) {
+      props.webChatContainerProps.webChatProps = {};
+    }
+    if (!props.webChatContainerProps.webChatStyles) {
+      props.webChatContainerProps.webChatStyles = {};
+    }
+    if (!props.webChatContainerProps.webChatProps.overrideLocalizedStrings) {
+      props.webChatContainerProps.webChatProps.overrideLocalizedStrings = {};
+    }
+    props.webChatContainerProps = {
+      ...props.webChatContainerProps,
+      webChatProps: {
+        disabled: true,
+        ...props.webChatContainerProps.webChatProps,
+        overrideLocalizedStrings: {
+          TEXT_INPUT_PLACEHOLDER: "Send a message . . .",
+          ...props.webChatContainerProps.webChatProps.overrideLocalizedStrings
+        }
+      },
+      webChatStyles: {
+        hideUploadButton: false,
+        sendBoxBackground: "rgb(243, 242, 241)",
+        ...props.webChatContainerProps.webChatStyles
+      }
+    };
+  }
+};
+export default overridePropsOnMockIfApplicable;

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

@@ -2,21 +2,21 @@ import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/teleme
 import { Constants, LiveWorkItemState, WidgetLoadCustomErrorString, WidgetLoadTelemetryMessage } from "../../../common/Constants";
 import { checkContactIdError, createTimer, getConversationDetailsCall, getStateFromCache, getWidgetCacheIdfromProps, isNullOrEmptyString, isUndefinedOrEmpty } from "../../../common/utils";
 import { getAuthClientFunction, handleAuthentication } from "./authHelper";
+import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "./reconnectChatHelper";
+import { handleStartChatError, logWidgetLoadComplete } from "./startChatErrorHandler";
 import { ActivityStreamHandler } from "./ActivityStreamHandler";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
+import { chatSDKStateCleanUp } from "./endChat";
 import { createAdapter } from "./createAdapter";
 import { createOnNewAdapterActivityHandler } from "../../../plugins/newMessageEventHandler";
-import { handleChatReconnect, isPersistentEnabled, isReconnectEnabled } from "./reconnectChatHelper";
-import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurvey";
-import { updateSessionDataForTelemetry } from "./updateSessionDataForTelemetry";
-import { logWidgetLoadComplete, handleStartChatError } from "./startChatErrorHandler";
-import { chatSDKStateCleanUp } from "./endChat";
 import { isPersistentChatEnabled } from "./liveChatConfigUtils";
+import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurvey";
 import { shouldSetPreChatIfPersistentChat } from "./persistentChatHelper";
+import { updateTelemetryData } from "./updateSessionDataForTelemetry";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let optionalParams = {};
@@ -151,7 +151,7 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
     chatSDKStateCleanUp(chatSDK);
   }
   try {
-    var _state$appStates2, _newAdapter$activity$;
+    var _state$appStates2;
     // Clear disconnect state on start chat
     (state === null || state === void 0 ? void 0 : (_state$appStates2 = state.appStates) === null || _state$appStates2 === void 0 ? void 0 : _state$appStates2.chatDisconnectEventReceived) && dispatch({
       type: LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
@@ -202,16 +202,7 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
       isStartChatSuccessful = false;
       throw error;
     }
-
-    // New adapter creation
-    const newAdapter = await createAdapter(chatSDK);
-    setAdapter(newAdapter);
-    const chatToken = await chatSDK.getChatToken();
-    dispatch({
-      type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
-      payload: chatToken
-    });
-    newAdapter === null || newAdapter === void 0 ? void 0 : (_newAdapter$activity$ = newAdapter.activity$) === null || _newAdapter$activity$ === void 0 ? void 0 : _newAdapter$activity$.subscribe(createOnNewAdapterActivityHandler(chatToken === null || chatToken === void 0 ? void 0 : chatToken.chatId, chatToken === null || chatToken === void 0 ? void 0 : chatToken.visitorId));
+    await createAdapterAndSubscribe(chatSDK, dispatch, setAdapter, props);
 
     // Set app state to Active
     if (isStartChatSuccessful) {
@@ -232,27 +223,26 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
         payload: persistedState
       });
       logWidgetLoadComplete(WidgetLoadTelemetryMessage.PersistedStateRetrievedMessage);
-      await setPostChatContextAndLoadSurvey(chatSDK, dispatch, true);
+      // Set post chat context in state, load in background to do not block the load
+      setPostChatContextAndLoadSurvey(chatSDK, dispatch, true);
       return;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const liveChatContext = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getCurrentLiveChatContext());
-
     // Persistent Chat relies on the `reconnectId` retrieved from reconnectablechats API to reconnect upon start chat and not `liveChatContext`
     if (!persistentChatEnabled) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const liveChatContext = await (chatSDK === null || chatSDK === void 0 ? void 0 : chatSDK.getCurrentLiveChatContext());
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       dispatch({
         type: LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
         payload: liveChatContext
       });
     }
     logWidgetLoadComplete();
-    // Set post chat context in state
-    // Commenting this for now as post chat context is fetched during end chat
-    await setPostChatContextAndLoadSurvey(chatSDK, dispatch);
-
+    // Set post chat context in state, load in background to do not block the load
+    setPostChatContextAndLoadSurvey(chatSDK, dispatch);
     // Updating chat session detail for telemetry
-    await updateSessionDataForTelemetry(chatSDK, dispatch);
+    await updateTelemetryData(chatSDK, dispatch);
   } catch (ex) {
     handleStartChatError(dispatch, chatSDK, props, ex, isStartChatSuccessful);
   } finally {
@@ -261,6 +251,19 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
   }
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const createAdapterAndSubscribe = async (chatSDK, dispatch, setAdapter, props) => {
+  var _newAdapter$activity$;
+  // New adapter creation
+  const newAdapter = await createAdapter(chatSDK, props);
+  setAdapter(newAdapter);
+  const chatToken = await chatSDK.getChatToken();
+  dispatch({
+    type: LiveChatWidgetActionType.SET_CHAT_TOKEN,
+    payload: chatToken
+  });
+  newAdapter === null || newAdapter === void 0 ? void 0 : (_newAdapter$activity$ = newAdapter.activity$) === null || _newAdapter$activity$ === void 0 ? void 0 : _newAdapter$activity$.subscribe(createOnNewAdapterActivityHandler(chatToken === null || chatToken === void 0 ? void 0 : chatToken.chatId, chatToken === null || chatToken === void 0 ? void 0 : chatToken.visitorId));
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const canConnectToExistingChat = async (props, chatSDK, state, dispatch, setAdapter) => {
   var _state$appStates3, _persistedState$domai6, _persistedState$appSt;
@@ -349,10 +352,8 @@ const checkIfConversationStillValid = async (chatSDK, dispatch, state) => {
   var _state$domainStates8, _state$domainStates8$, _state$domainStates9;
   const requestIdFromCache = (_state$domainStates8 = state.domainStates) === null || _state$domainStates8 === void 0 ? void 0 : (_state$domainStates8$ = _state$domainStates8.liveChatContext) === null || _state$domainStates8$ === void 0 ? void 0 : _state$domainStates8$.requestId;
   const liveChatContext = state === null || state === void 0 ? void 0 : (_state$domainStates9 = state.domainStates) === null || _state$domainStates9 === void 0 ? void 0 : _state$domainStates9.liveChatContext;
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let conversationDetails = undefined;
-
   // Preserve current requestId
   const currentRequestId = chatSDK.requestId ?? "";
   dispatch({

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

@@ -1,14 +1,14 @@
-import { ChatSDKErrorName, ChatSDKError } from "@microsoft/omnichannel-chat-sdk";
+import { ChatSDKError, ChatSDKErrorName } from "@microsoft/omnichannel-chat-sdk";
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
-import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
+import { PrepareEndChatDescriptionConstants, WidgetLoadCustomErrorString, WidgetLoadTelemetryMessage } from "../../../common/Constants";
+import { callingStateCleanUp, chatSDKStateCleanUp, closeChatStateCleanUp, endChatStateCleanUp } from "./endChat";
 import { ConversationState } from "../../../contexts/common/ConversationState";
-import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
-import { callingStateCleanUp, endChatStateCleanUp, closeChatStateCleanUp, chatSDKStateCleanUp } from "./endChat";
 import { DataStoreManager } from "../../../common/contextDataStore/DataStoreManager";
-import { getWidgetCacheIdfromProps } from "../../../common/utils";
-import { PrepareEndChatDescriptionConstants, WidgetLoadCustomErrorString, WidgetLoadTelemetryMessage } from "../../../common/Constants";
+import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { StartChatFailureType } from "../../../contexts/common/StartChatFailureType";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
+import { getWidgetCacheIdfromProps } from "../../../common/utils";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const handleStartChatError = (dispatch, chatSDK, props, ex, isStartChatSuccessful) => {

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

@@ -6,7 +6,13 @@ import { TelemetryManager } from "../../../common/telemetry/TelemetryManager";
 import { getConversationDetailsCall } from "../../../common/utils";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const updateSessionDataForTelemetry = async (chatSDK, dispatch) => {
+export const updateTelemetryData = async (chatSDK, dispatch) => {
+  // load it concurrently, this will reduce the load time
+  await Promise.all([updateSessionDataForTelemetry(chatSDK, dispatch), updateConversationDataForTelemetry(chatSDK, dispatch)]);
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const updateSessionDataForTelemetry = async (chatSDK, dispatch) => {
   if (chatSDK) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const chatSession = await chatSDK.getCurrentLiveChatContext();
@@ -21,7 +27,6 @@ export const updateSessionDataForTelemetry = async (chatSDK, dispatch) => {
         chatSession
       }
     });
-    await updateConversationDataForTelemetry(chatSDK, dispatch);
   }
 };
 

package/lib/esm/components/livechatwidget/interfaces/IBotAuthActivitySubscriberOptionalParams.js

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

package/lib/esm/components/livechatwidget/interfaces/IMockProps.js

@@ -0,0 +1,6 @@
+var LiveChatWidgetMockType;
+(function (LiveChatWidgetMockType) {
+  LiveChatWidgetMockType["Test"] = "Test";
+  LiveChatWidgetMockType["Demo"] = "Demo";
+})(LiveChatWidgetMockType || (LiveChatWidgetMockType = {}));
+export {};

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
 import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { Components } from "botframework-webchat";
-import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveWorkItemState, PrepareEndChatDescriptionConstants, StorageType } from "../../../common/Constants";
+import { ConfirmationState, Constants, ConversationEndEntity, E2VVOptions, LiveWorkItemState, PrepareEndChatDescriptionConstants, StorageType, WidgetLoadCustomErrorString } from "../../../common/Constants";
 import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { TelemetryManager, TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
@@ -346,6 +346,23 @@ export const LiveChatWidgetStateful = props => {
         }
       }
     });
+    BroadcastService.getMessageByEventName(BroadcastEvent.NetworkReconnected).subscribe(async () => {
+      var _window2, _window2$location;
+      if (isThisSessionPopout((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$location = _window2.location) === null || _window2$location === void 0 ? void 0 : _window2$location.href)) {
+        return;
+      }
+      const conversationDetails = await getConversationDetailsCall(chatSDK);
+      if ((conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === LiveWorkItemState.WrapUp || (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === LiveWorkItemState.Closed) {
+        dispatch({
+          type: LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
+          payload: true
+        });
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.ChatDisconnectThreadEventReceived,
+          Description: "Chat disconnected due to timeout, user went offline or blocked the device (including closing laptop)"
+        });
+      }
+    });
 
     /**
      * This will allow to sync multiple tabs to handle minimize and maximize state, 
@@ -663,11 +680,24 @@ export const LiveChatWidgetStateful = props => {
 
   // Handle Chat disconnect cases
   useEffect(() => {
+    var _inMemoryState$appSta5;
     const inMemoryState = executeReducer(state, {
       type: LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
       payload: null
     });
     handleChatDisconnect(props, inMemoryState, setWebChatStyles);
+    const chatDisconnectState = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta5 = inMemoryState.appStates) === null || _inMemoryState$appSta5 === void 0 ? void 0 : _inMemoryState$appSta5.chatDisconnectEventReceived;
+    if (chatDisconnectState && adapter) {
+      try {
+        adapter.end();
+        adapter.close();
+      } catch (e) {
+        TelemetryHelper.logWebChatEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.EndingAdapterAfterDisconnectionError,
+          Description: WidgetLoadCustomErrorString.CloseAdapterAfterDisconnectionErrorString
+        });
+      }
+    }
   }, [state.appStates.chatDisconnectEventReceived]);
 
   // if props state gets updates we need to update the renderingMiddlewareProps in the state

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

@@ -0,0 +1,79 @@
+import "rxjs/add/operator/share";
+import "rxjs/add/observable/of";
+import { Observable } from "rxjs/Observable";
+import MockAdapter from "./mockadapter";
+import { customerUser, postBotMessageActivity, postBotAttachmentActivity, postBotTypingActivity, postEchoActivity, postSystemMessageActivity } from "./utils/chatAdapterUtils";
+import { createHeroCardAttachment, createJpgFileAttachment, createSigninCardAttachment, createThumbnailCardAttachment } from "./utils/attachmentActivityUtils";
+import MockBotCommand from "./MockBotCommand";
+import MockBotCardCommandType from "./MockBotCardCommandType";
+export class DemoChatAdapter extends MockAdapter {
+  constructor() {
+    super();
+    setTimeout(() => {
+      postSystemMessageActivity(this.activityObserver, "You're currently using a demo.", 0);
+      postBotMessageActivity(this.activityObserver, "Type `/help` to learn more", undefined, 0); // send init message from bot
+    }, 1000);
+  }
+  postBotCommandsActivity() {
+    let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;
+    postBotAttachmentActivity(this.activityObserver, [{
+      contentType: "application/vnd.microsoft.card.thumbnail",
+      content: {
+        buttons: [{
+          title: "Send system message",
+          type: "imBack",
+          value: "send system message"
+        }, {
+          title: "Send typing",
+          type: "imBack",
+          value: "send typing"
+        }, {
+          title: "Send bot message",
+          type: "imBack",
+          value: "send bot message"
+        }],
+        title: "Commands"
+      }
+    }], delay);
+  }
+  postActivity(activity) {
+    if (activity) {
+      postEchoActivity(this.activityObserver, activity, customerUser);
+      if (activity.text) {
+        switch (true) {
+          case activity.text === MockBotCommand.Help:
+            this.postBotCommandsActivity();
+            break;
+          case activity.text === MockBotCommand.SendSystemMessage:
+            postSystemMessageActivity(this.activityObserver, "Contoso has joined the chat.");
+            break;
+          case activity.text === MockBotCommand.SendTyping:
+            postBotTypingActivity(this.activityObserver);
+            break;
+          case activity.text === MockBotCommand.SendAttachment:
+            postBotAttachmentActivity(this.activityObserver, [createJpgFileAttachment()]);
+            break;
+          case activity.text === MockBotCommand.SendBotMessage:
+            postBotMessageActivity(this.activityObserver, "Hi, how can I help you?");
+            break;
+          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Signin}`:
+            postBotAttachmentActivity(this.activityObserver, [createSigninCardAttachment()]);
+            break;
+          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Hero}`:
+            postBotAttachmentActivity(this.activityObserver, [createHeroCardAttachment()]);
+            break;
+          case activity.text === `${MockBotCommand.Card} ${MockBotCardCommandType.Thumbnail}`:
+            postBotAttachmentActivity(this.activityObserver, [createThumbnailCardAttachment()]);
+            break;
+          case activity.text.startsWith(`${MockBotCommand.Bot} `):
+            postBotMessageActivity(this.activityObserver, activity.text.substring(5));
+            break;
+          case activity.text.startsWith(`${MockBotCommand.System} `):
+            postSystemMessageActivity(this.activityObserver, activity.text.substring(8));
+            break;
+        }
+      }
+    }
+    return Observable.of(activity.id || "");
+  }
+}

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

@@ -0,0 +1,10 @@
+import { DemoChatAdapter } from "./DemoChatAdapter";
+import { MockChatSDK } from "./mockchatsdk";
+export class DemoChatSDK extends MockChatSDK {
+  constructor() {
+    super();
+  }
+  createChatAdapter() {
+    return new DemoChatAdapter();
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Observable } from "rxjs/Observable";
+import MockAdapter from "./mockadapter";
+import { customerUser, postBotMessageActivity, postEchoActivity, postSystemMessageActivity } from "./utils/chatAdapterUtils";
+export class DesignerChatAdapter extends MockAdapter {
+  constructor() {
+    super();
+    setTimeout(() => {
+      postBotMessageActivity(this.activityObserver, "Id venenatis a condimentum vitae?", undefined, 0);
+      this.postUserActivity("Diam donec adipiscing tristique risus nec feugiat in fermentum", 0);
+      postSystemMessageActivity(this.activityObserver, "We are finding the best agent for your inquiry, please hold ...", 100);
+      postSystemMessageActivity(this.activityObserver, "John has joined the chat", 100);
+      postBotMessageActivity(this.activityObserver, "Neque viverra justo nec ultrices dui sapien eget mi proin", undefined, 100);
+    }, 1000);
+  }
+  postUserActivity(text) {
+    let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+    setTimeout(() => {
+      postEchoActivity(this.activityObserver, {
+        text,
+        from: {
+          ...customerUser
+        },
+        type: "message"
+      }, customerUser, 0);
+    }, delay);
+  }
+  postActivity(activity) {
+    if (activity) {
+      postEchoActivity(this.activityObserver, activity, customerUser);
+    }
+    return Observable.of(activity.id || "");
+  }
+}

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

@@ -0,0 +1,10 @@
+import { DesignerChatAdapter } from "./DesignerChatAdapter";
+import { MockChatSDK } from "./mockchatsdk";
+export class DesignerChatSDK extends MockChatSDK {
+  constructor() {
+    super();
+  }
+  createChatAdapter() {
+    return new DesignerChatAdapter();
+  }
+}

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

@@ -0,0 +1,7 @@
+var MockBotCardCommandType;
+(function (MockBotCardCommandType) {
+  MockBotCardCommandType["Hero"] = "hero";
+  MockBotCardCommandType["Signin"] = "signin";
+  MockBotCardCommandType["Thumbnail"] = "thumbnail";
+})(MockBotCardCommandType || (MockBotCardCommandType = {}));
+export default MockBotCardCommandType;

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

@@ -0,0 +1,12 @@
+var MockBotCommand;
+(function (MockBotCommand) {
+  MockBotCommand["Bot"] = "/bot";
+  MockBotCommand["Card"] = "/card";
+  MockBotCommand["Help"] = "/help";
+  MockBotCommand["SendAttachment"] = "send attachment";
+  MockBotCommand["SendBotMessage"] = "send bot message";
+  MockBotCommand["SendSystemMessage"] = "send system message";
+  MockBotCommand["SendTyping"] = "send typing";
+  MockBotCommand["System"] = "/system";
+})(MockBotCommand || (MockBotCommand = {}));
+export default MockBotCommand;

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

@@ -14,6 +14,9 @@ export class MockChatSDK {
       orgUrl: "https://contoso.crm.dynamics.com"
     });
   }
+  async initialize() {
+    return this.getLiveChatConfig();
+  }
   async startChat() {
     await this.sleep(1000);
   }

package/lib/esm/components/webchatcontainerstateful/common/utils/attachmentActivityUtils.js

@@ -0,0 +1,61 @@
+export const createJpgFileAttachment = () => {
+  return {
+    contentType: "image/jpeg",
+    name: "600x400.jpg",
+    contentUrl: "https://raw.githubusercontent.com/microsoft/omnichannel-chat-sdk/e7e75d4ede351e1cf2e52f13860d2284848c4af0/playwright/public/images/600x400.jpg"
+  };
+};
+export const createHeroCardAttachment = () => {
+  return {
+    contentType: "application/vnd.microsoft.card.hero",
+    content: {
+      buttons: [{
+        title: "Bellevue",
+        type: "imBack",
+        value: "Bellevue"
+      }, {
+        title: "Redmond",
+        type: "imBack",
+        value: "Redmond"
+      }, {
+        title: "Seattle",
+        type: "imBack",
+        value: "Seattle"
+      }],
+      title: "Choose your location"
+    }
+  };
+};
+export const createThumbnailCardAttachment = () => {
+  return {
+    contentType: "application/vnd.microsoft.card.thumbnail",
+    content: {
+      title: "Microsoft",
+      subtitle: "Our mission is to empower every person and every organization on the planet to achieve more.",
+      text: "Microsoft creates platforms and tools powered by AI to deliver innovative solutions that meet the evolving needs of our customers. The technology company is committed to making AI available broadly and doing so responsibly, with a mission to empower every person and every organization on the planet to achieve more.",
+      images: [{
+        alt: "Microsoft logo",
+        url: "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31" // logo from https://microsoft.com
+      }],
+
+      buttons: [{
+        title: "Learn more",
+        type: "openUrl",
+        value: "https://www.microsoft.com/"
+      }]
+    }
+  };
+};
+export const createSigninCardAttachment = () => {
+  return {
+    contentType: "application/vnd.microsoft.card.signin",
+    content: {
+      text: "Please login",
+      buttons: [{
+        type: "signin",
+        title: "Signin",
+        value: "https://login.live.com/"
+      }]
+    }
+  };
+};