@microsoft/omnichannel-chat-widget 1.7.3-main.c8bb80a → 1.7.3-main.fee24eb

package/lib/cjs/components/livechatwidget/LiveChatWidget.js

@@ -11,16 +11,21 @@ var _ChatSDKStore = require("../../contexts/ChatSDKStore");
 var _LiveChatWidgetStateful = _interopRequireDefault(require("./livechatwidgetstateful/LiveChatWidgetStateful"));
 var _createReducer = require("../../contexts/createReducer");
 var _LiveChatWidgetContextInitialState = require("../../contexts/common/LiveChatWidgetContextInitialState");
+var _getMockChatSDKIfApplicable = require("./common/getMockChatSDKIfApplicable");
+var _overridePropsOnMockIfApplicable = _interopRequireDefault(require("./common/overridePropsOnMockIfApplicable"));
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const LiveChatWidget = props => {
+  var _props$mock;
   const reducer = (0, _createReducer.createReducer)();
   const [state, dispatch] = (0, _react.useReducer)(reducer, (0, _LiveChatWidgetContextInitialState.getLiveChatWidgetContextInitialState)(props));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = (0, _react.useState)(undefined);
+  const chatSDK = (0, _getMockChatSDKIfApplicable.getMockChatSDKIfApplicable)(props.chatSDK, props === null || props === void 0 ? void 0 : (_props$mock = props.mock) === null || _props$mock === void 0 ? void 0 : _props$mock.type);
+  (0, _overridePropsOnMockIfApplicable.default)(props);
   return /*#__PURE__*/_react.default.createElement(_ChatSDKStore.ChatSDKStore.Provider, {
-    value: props.chatSDK
+    value: chatSDK
   }, /*#__PURE__*/_react.default.createElement(_ChatAdapterStore.ChatAdapterStore.Provider, {
     value: [adapter, setAdapter]
   }, /*#__PURE__*/_react.default.createElement(_ChatContextStore.ChatContextStore.Provider, {

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMockChatSDKIfApplicable = void 0;
+var _DemoChatSDK = require("../../webchatcontainerstateful/common/DemoChatSDK");
+var _DesignerChatSDK = require("../../webchatcontainerstateful/common/DesignerChatSDK");
+var _mockchatsdk = require("../../webchatcontainerstateful/common/mockchatsdk");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getMockChatSDKIfApplicable = (chatSDK, type) => {
+  if (type) {
+    switch (type.toLowerCase()) {
+      case "demo":
+        chatSDK = new _DemoChatSDK.DemoChatSDK();
+        break;
+      case "designer":
+        chatSDK = new _DesignerChatSDK.DesignerChatSDK();
+        break;
+      default:
+        chatSDK = new _mockchatsdk.MockChatSDK();
+    }
+  }
+  return chatSDK;
+};
+exports.getMockChatSDKIfApplicable = getMockChatSDKIfApplicable;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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
+      }
+    };
+  }
+};
+var _default = overridePropsOnMockIfApplicable;
+exports.default = _default;

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

@@ -8,21 +8,21 @@ var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants"
 var _Constants = require("../../../common/Constants");
 var _utils = require("../../../common/utils");
 var _authHelper = require("./authHelper");
+var _reconnectChatHelper = require("./reconnectChatHelper");
+var _startChatErrorHandler = require("./startChatErrorHandler");
 var _ActivityStreamHandler = require("./ActivityStreamHandler");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
+var _endChat = require("./endChat");
 var _createAdapter = require("./createAdapter");
 var _newMessageEventHandler = require("../../../plugins/newMessageEventHandler");
-var _reconnectChatHelper = require("./reconnectChatHelper");
-var _setPostChatContextAndLoadSurvey = require("./setPostChatContextAndLoadSurvey");
-var _updateSessionDataForTelemetry = require("./updateSessionDataForTelemetry");
-var _startChatErrorHandler = require("./startChatErrorHandler");
-var _endChat = require("./endChat");
 var _liveChatConfigUtils = require("./liveChatConfigUtils");
+var _setPostChatContextAndLoadSurvey = require("./setPostChatContextAndLoadSurvey");
 var _persistentChatHelper = require("./persistentChatHelper");
+var _updateSessionDataForTelemetry = require("./updateSessionDataForTelemetry");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let optionalParams = {};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -158,7 +158,7 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
     (0, _endChat.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.LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
@@ -209,16 +209,7 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
       isStartChatSuccessful = false;
       throw error;
     }
-
-    // New adapter creation
-    const newAdapter = await (0, _createAdapter.createAdapter)(chatSDK);
-    setAdapter(newAdapter);
-    const chatToken = await chatSDK.getChatToken();
-    dispatch({
-      type: _LiveChatWidgetActionType.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((0, _newMessageEventHandler.createOnNewAdapterActivityHandler)(chatToken === null || chatToken === void 0 ? void 0 : chatToken.chatId, chatToken === null || chatToken === void 0 ? void 0 : chatToken.visitorId));
+    await createAdapterAndSubscribe(chatSDK, dispatch, setAdapter);
 
     // Set app state to Active
     if (isStartChatSuccessful) {
@@ -239,27 +230,26 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
         payload: persistedState
       });
       (0, _startChatErrorHandler.logWidgetLoadComplete)(_Constants.WidgetLoadTelemetryMessage.PersistedStateRetrievedMessage);
-      await (0, _setPostChatContextAndLoadSurvey.setPostChatContextAndLoadSurvey)(chatSDK, dispatch, true);
+      // Set post chat context in state, load in background to do not block the load
+      (0, _setPostChatContextAndLoadSurvey.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.LiveChatWidgetActionType.SET_LIVE_CHAT_CONTEXT,
         payload: liveChatContext
       });
     }
     (0, _startChatErrorHandler.logWidgetLoadComplete)();
-    // Set post chat context in state
-    // Commenting this for now as post chat context is fetched during end chat
-    await (0, _setPostChatContextAndLoadSurvey.setPostChatContextAndLoadSurvey)(chatSDK, dispatch);
-
+    // Set post chat context in state, load in background to do not block the load
+    (0, _setPostChatContextAndLoadSurvey.setPostChatContextAndLoadSurvey)(chatSDK, dispatch);
     // Updating chat session detail for telemetry
-    await (0, _updateSessionDataForTelemetry.updateSessionDataForTelemetry)(chatSDK, dispatch);
+    await (0, _updateSessionDataForTelemetry.updateTelemetryData)(chatSDK, dispatch);
   } catch (ex) {
     (0, _startChatErrorHandler.handleStartChatError)(dispatch, chatSDK, props, ex, isStartChatSuccessful);
   } finally {
@@ -270,6 +260,19 @@ const initStartChat = async (chatSDK, dispatch, setAdapter, state, props, params
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 exports.initStartChat = initStartChat;
+const createAdapterAndSubscribe = async (chatSDK, dispatch, setAdapter) => {
+  var _newAdapter$activity$;
+  // New adapter creation
+  const newAdapter = await (0, _createAdapter.createAdapter)(chatSDK);
+  setAdapter(newAdapter);
+  const chatToken = await chatSDK.getChatToken();
+  dispatch({
+    type: _LiveChatWidgetActionType.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((0, _newMessageEventHandler.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;
   // By pass this function in case of popout chat
@@ -357,10 +360,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/cjs/components/livechatwidget/common/startChatErrorHandler.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.logWidgetLoadComplete = exports.handleStartChatError = void 0;
 var _omnichannelChatSdk = require("@microsoft/omnichannel-chat-sdk");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
-var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
-var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
-var _ConversationState = require("../../../contexts/common/ConversationState");
-var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
+var _Constants = require("../../../common/Constants");
 var _endChat = require("./endChat");
+var _ConversationState = require("../../../contexts/common/ConversationState");
 var _DataStoreManager = require("../../../common/contextDataStore/DataStoreManager");
-var _utils = require("../../../common/utils");
-var _Constants = require("../../../common/Constants");
+var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _StartChatFailureType = require("../../../contexts/common/StartChatFailureType");
+var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
+var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
+var _utils = require("../../../common/utils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleStartChatError = (dispatch, chatSDK, props, ex, isStartChatSuccessful) => {
   var _props$controlProps;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateSessionDataForTelemetry = void 0;
+exports.updateTelemetryData = void 0;
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
@@ -11,6 +11,13 @@ var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
 var _utils = require("../../../common/utils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
+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
+exports.updateTelemetryData = updateTelemetryData;
 const updateSessionDataForTelemetry = async (chatSDK, dispatch) => {
   if (chatSDK) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -26,12 +33,10 @@ const updateSessionDataForTelemetry = async (chatSDK, dispatch) => {
         chatSession
       }
     });
-    await updateConversationDataForTelemetry(chatSDK, dispatch);
   }
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-exports.updateSessionDataForTelemetry = updateSessionDataForTelemetry;
 const updateConversationDataForTelemetry = async (chatSDK, dispatch) => {
   if (chatSDK) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

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

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DemoChatAdapter = void 0;
+require("rxjs/add/operator/share");
+require("rxjs/add/observable/of");
+var _Observable = require("rxjs/Observable");
+var _mockadapter = _interopRequireDefault(require("./mockadapter"));
+var _chatAdapterUtils = require("./utils/chatAdapterUtils");
+var _attachmentActivityUtils = require("./utils/attachmentActivityUtils");
+var _MockBotCommand = _interopRequireDefault(require("./MockBotCommand"));
+var _MockBotCardCommandType = _interopRequireDefault(require("./MockBotCardCommandType"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class DemoChatAdapter extends _mockadapter.default {
+  constructor() {
+    super();
+    setTimeout(() => {
+      (0, _chatAdapterUtils.postSystemMessageActivity)(this.activityObserver, "You're currently using a demo.", 0);
+      (0, _chatAdapterUtils.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;
+    (0, _chatAdapterUtils.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) {
+      (0, _chatAdapterUtils.postEchoActivity)(this.activityObserver, activity, _chatAdapterUtils.customerUser);
+      if (activity.text) {
+        switch (true) {
+          case activity.text === _MockBotCommand.default.Help:
+            this.postBotCommandsActivity();
+            break;
+          case activity.text === _MockBotCommand.default.SendSystemMessage:
+            (0, _chatAdapterUtils.postSystemMessageActivity)(this.activityObserver, "Contoso has joined the chat.");
+            break;
+          case activity.text === _MockBotCommand.default.SendTyping:
+            (0, _chatAdapterUtils.postBotTypingActivity)(this.activityObserver);
+            break;
+          case activity.text === _MockBotCommand.default.SendAttachment:
+            (0, _chatAdapterUtils.postBotAttachmentActivity)(this.activityObserver, [(0, _attachmentActivityUtils.createJpgFileAttachment)()]);
+            break;
+          case activity.text === _MockBotCommand.default.SendBotMessage:
+            (0, _chatAdapterUtils.postBotMessageActivity)(this.activityObserver, "Hi, how can I help you?");
+            break;
+          case activity.text === `${_MockBotCommand.default.Card} ${_MockBotCardCommandType.default.Signin}`:
+            (0, _chatAdapterUtils.postBotAttachmentActivity)(this.activityObserver, [(0, _attachmentActivityUtils.createSigninCardAttachment)()]);
+            break;
+          case activity.text === `${_MockBotCommand.default.Card} ${_MockBotCardCommandType.default.Hero}`:
+            (0, _chatAdapterUtils.postBotAttachmentActivity)(this.activityObserver, [(0, _attachmentActivityUtils.createHeroCardAttachment)()]);
+            break;
+          case activity.text === `${_MockBotCommand.default.Card} ${_MockBotCardCommandType.default.Thumbnail}`:
+            (0, _chatAdapterUtils.postBotAttachmentActivity)(this.activityObserver, [(0, _attachmentActivityUtils.createThumbnailCardAttachment)()]);
+            break;
+          case activity.text.startsWith(`${_MockBotCommand.default.Bot} `):
+            (0, _chatAdapterUtils.postBotMessageActivity)(this.activityObserver, activity.text.substring(5));
+            break;
+          case activity.text.startsWith(`${_MockBotCommand.default.System} `):
+            (0, _chatAdapterUtils.postSystemMessageActivity)(this.activityObserver, activity.text.substring(8));
+            break;
+        }
+      }
+    }
+    return _Observable.Observable.of(activity.id || "");
+  }
+}
+exports.DemoChatAdapter = DemoChatAdapter;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DemoChatSDK = void 0;
+var _DemoChatAdapter = require("./DemoChatAdapter");
+var _mockchatsdk = require("./mockchatsdk");
+class DemoChatSDK extends _mockchatsdk.MockChatSDK {
+  constructor() {
+    super();
+  }
+  createChatAdapter() {
+    return new _DemoChatAdapter.DemoChatAdapter();
+  }
+}
+exports.DemoChatSDK = DemoChatSDK;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DesignerChatAdapter = void 0;
+var _Observable = require("rxjs/Observable");
+var _mockadapter = _interopRequireDefault(require("./mockadapter"));
+var _chatAdapterUtils = require("./utils/chatAdapterUtils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+class DesignerChatAdapter extends _mockadapter.default {
+  constructor() {
+    super();
+    setTimeout(() => {
+      (0, _chatAdapterUtils.postBotMessageActivity)(this.activityObserver, "Id venenatis a condimentum vitae?", undefined, 0);
+      this.postUserActivity("Diam donec adipiscing tristique risus nec feugiat in fermentum", 0);
+      (0, _chatAdapterUtils.postSystemMessageActivity)(this.activityObserver, "We are finding the best agent for your inquiry, please hold ...", 100);
+      (0, _chatAdapterUtils.postSystemMessageActivity)(this.activityObserver, "John has joined the chat", 100);
+      (0, _chatAdapterUtils.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(() => {
+      (0, _chatAdapterUtils.postEchoActivity)(this.activityObserver, {
+        text,
+        from: {
+          ..._chatAdapterUtils.customerUser
+        },
+        type: "message"
+      }, _chatAdapterUtils.customerUser, 0);
+    }, delay);
+  }
+  postActivity(activity) {
+    if (activity) {
+      (0, _chatAdapterUtils.postEchoActivity)(this.activityObserver, activity, _chatAdapterUtils.customerUser);
+    }
+    return _Observable.Observable.of(activity.id || "");
+  }
+}
+exports.DesignerChatAdapter = DesignerChatAdapter;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DesignerChatSDK = void 0;
+var _DesignerChatAdapter = require("./DesignerChatAdapter");
+var _mockchatsdk = require("./mockchatsdk");
+class DesignerChatSDK extends _mockchatsdk.MockChatSDK {
+  constructor() {
+    super();
+  }
+  createChatAdapter() {
+    return new _DesignerChatAdapter.DesignerChatAdapter();
+  }
+}
+exports.DesignerChatSDK = DesignerChatSDK;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var MockBotCardCommandType;
+(function (MockBotCardCommandType) {
+  MockBotCardCommandType["Hero"] = "hero";
+  MockBotCardCommandType["Signin"] = "signin";
+  MockBotCardCommandType["Thumbnail"] = "thumbnail";
+})(MockBotCardCommandType || (MockBotCardCommandType = {}));
+var _default = MockBotCardCommandType;
+exports.default = _default;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 = {}));
+var _default = MockBotCommand;
+exports.default = _default;

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

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

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createThumbnailCardAttachment = exports.createSigninCardAttachment = exports.createJpgFileAttachment = exports.createHeroCardAttachment = void 0;
+const createJpgFileAttachment = () => {
+  return {
+    contentType: "image/jpeg",
+    name: "600x400.jpg",
+    contentUrl: "https://raw.githubusercontent.com/microsoft/omnichannel-chat-sdk/e7e75d4ede351e1cf2e52f13860d2284848c4af0/playwright/public/images/600x400.jpg"
+  };
+};
+exports.createJpgFileAttachment = createJpgFileAttachment;
+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"
+    }
+  };
+};
+exports.createHeroCardAttachment = createHeroCardAttachment;
+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/"
+      }]
+    }
+  };
+};
+exports.createThumbnailCardAttachment = createThumbnailCardAttachment;
+const createSigninCardAttachment = () => {
+  return {
+    contentType: "application/vnd.microsoft.card.signin",
+    content: {
+      text: "Please login",
+      buttons: [{
+        type: "signin",
+        title: "Signin",
+        value: "https://login.live.com/"
+      }]
+    }
+  };
+};
+exports.createSigninCardAttachment = createSigninCardAttachment;

package/lib/cjs/components/webchatcontainerstateful/common/utils/chatAdapterUtils.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.postSystemMessageActivity = exports.postEchoActivity = exports.postBotTypingActivity = exports.postBotMessageActivity = exports.postBotAttachmentActivity = exports.customerUser = exports.botUser = void 0;
+var _omnichannelChatSdk = require("@microsoft/omnichannel-chat-sdk");
+const customerUser = {
+  id: "usedId",
+  name: "User",
+  role: "user"
+};
+exports.customerUser = customerUser;
+const botUser = {
+  id: "botId",
+  name: "Bot",
+  role: "bot"
+};
+
+// WebChat expects an "echo" activity to confirm the message has been sent successfully
+exports.botUser = botUser;
+const postEchoActivity = function (activityObserver, activity, user) {
+  let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  const echoActivity = {
+    ...activity,
+    id: (0, _omnichannelChatSdk.uuidv4)(),
+    from: {
+      ...activity.from,
+      ...user
+    },
+    timestamp: new Date().toISOString()
+  };
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next(echoActivity); // mock message sent activity
+  }, delay);
+};
+exports.postEchoActivity = postEchoActivity;
+const postBotMessageActivity = function (activityObserver, text) {
+  let tags = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...botUser
+      },
+      text,
+      type: "message",
+      channelData: {
+        tags
+      },
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+exports.postBotMessageActivity = postBotMessageActivity;
+const postSystemMessageActivity = function (activityObserver, text) {
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  postBotMessageActivity(activityObserver, text, "system", delay);
+};
+exports.postSystemMessageActivity = postSystemMessageActivity;
+const postBotTypingActivity = function (activityObserver) {
+  let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...botUser
+      },
+      type: "typing"
+    });
+  }, delay);
+};
+exports.postBotTypingActivity = postBotTypingActivity;
+const postBotAttachmentActivity = function (activityObserver) {
+  let attachments = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...botUser
+      },
+      attachments,
+      type: "message",
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+exports.postBotAttachmentActivity = postBotAttachmentActivity;