@microsoft/omnichannel-chat-widget 0.1.0-main.bcfe8a3 → 0.1.0-main.bf74329

package/lib/esm/components/loadingpanestateful/LoadingPaneStateful.js

@@ -7,25 +7,24 @@ import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 export const LoadingPaneStateful = props => {
   var _props$styleProps;
-
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
     id: "oc-lcw-loading-pane",
     dir: state.domainStates.globalDir,
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.LoadingPaneLoaded,
       Description: "Loading pane loaded."

package/lib/esm/components/ooohpanestateful/OOOHPaneStateful.js

@@ -7,25 +7,24 @@ import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 export const OutOfOfficeHoursPaneStateful = props => {
   var _props$styleProps;
-
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
     id: "oc-lcw-outofofficehours-pane",
     dir: state.domainStates.globalDir,
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.OutOfOfficePaneLoaded
     });

package/lib/esm/components/postchatloadingpanestateful/PostChatLoadingPaneStateful.js

@@ -7,10 +7,10 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 export const PostChatLoadingPaneStateful = props => {
   var _props$styleProps;
-
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatLoadingPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps);
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
@@ -22,15 +22,14 @@ export const PostChatLoadingPaneStateful = props => {
     hideSpinnerText: true,
     subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now.",
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${state.domainStates.widgetElementId}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoadingPaneLoaded
     });

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -5,39 +5,60 @@ import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPostChatSurveyPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps";
 import { findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
+import { PostChatSurveyMode } from "./enums/PostChatSurveyMode";
+import { CustomerVoiceEvents } from "./enums/CustomerVoiceEvents";
 export const PostChatSurveyPaneStateful = props => {
-  var _props$styleProps, _props$controlProps;
-
-  const [state] = useChatContextStore(); // ToDo : TASK 2628392 Fix PostChat iframe reloading on Minimize
-
+  var _state$domainStates$l, _state$domainStates$l2, _props$styleProps, _props$controlProps;
+  const [state] = useChatContextStore();
+  const postChatSurveyMode = (_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.msdyn_postconversationsurveymode;
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
   });
   let surveyInviteLink = "";
-
   if (state.domainStates.postChatContext.surveyInviteLink) {
-    surveyInviteLink = state.domainStates.postChatContext.surveyInviteLink + "&lang=" + (state.domainStates.postChatContext.formsProLocale ?? "en");
+    surveyInviteLink = state.domainStates.postChatContext.surveyInviteLink + "&embed=" + (postChatSurveyMode === PostChatSurveyMode.Embed).toString() + "&compact=" + (props.isCustomerVoiceSurveyCompact ?? true).toString() + "&lang=" + (state.domainStates.postChatContext.formsProLocale ?? "en") + "&showmultilingual=false";
   }
-
-  const styleProps = { ...props.styleProps,
+  const styleProps = {
+    ...props.styleProps,
     generalStyleProps: generalStyleProps
   };
   const controlProps = {
     id: "oc-lcw-postchatsurvey-pane",
     surveyURL: ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.surveyURL) ?? surveyInviteLink,
     ...props.controlProps
-  }; // Move focus to the first button
+  };
 
+  // Move focus to the first button
   useEffect(() => {
     const firstElement = findAllFocusableElement(`#${controlProps.id}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoaded
     });
+
+    //Customer Voice Telemetry Events
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    window.addEventListener("message", message => {
+      const {
+        data
+      } = message;
+      if (!data) return;
+      if (data === CustomerVoiceEvents.ResponsePageLoaded) {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomerVoiceResponsePageLoaded
+        });
+      } else if (data === CustomerVoiceEvents.FormResponseSubmitted) {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted
+        });
+      } else if (data === CustomerVoiceEvents.FormResponseError) {
+        TelemetryHelper.logActionEvent(LogLevel.ERROR, {
+          Event: TelemetryEvent.CustomerVoiceFormResponseError
+        });
+      }
+    });
   }, []);
   return /*#__PURE__*/React.createElement(PostChatSurveyPane, {
     controlProps: controlProps,

package/lib/esm/components/postchatsurveypanestateful/common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps.js

@@ -6,5 +6,5 @@ export const defaultGeneralPostChatSurveyPaneStyleProps = {
   top: "0%",
   borderRadius: "0 0 4px 4px",
   borderWidth: "0px",
-  overflowY: "auto"
+  maxHeight: "calc(100% - 80px)"
 };

package/lib/esm/components/postchatsurveypanestateful/enums/CustomerVoiceEvents.js

@@ -0,0 +1,6 @@
+export let CustomerVoiceEvents;
+(function (CustomerVoiceEvents) {
+  CustomerVoiceEvents["ResponsePageLoaded"] = "ResponsePageLoaded";
+  CustomerVoiceEvents["FormResponseSubmitted"] = "FormResponseSubmitted";
+  CustomerVoiceEvents["FormResponseError"] = "FormResponseError";
+})(CustomerVoiceEvents || (CustomerVoiceEvents = {}));

package/lib/esm/components/postchatsurveypanestateful/enums/PostChatSurveyMode.js

@@ -1,5 +1,4 @@
 export let PostChatSurveyMode;
-
 (function (PostChatSurveyMode) {
   PostChatSurveyMode["Embed"] = "192350000";
   PostChatSurveyMode["Link"] = "192350001";

package/lib/esm/components/postchatsurveypanestateful/interfaces/IPostChatSurveyPaneStatefulProps.js

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

package/lib/esm/components/prechatsurveypanestateful/PreChatSurveyPaneStateful.js

@@ -1,19 +1,18 @@
 import { HtmlAttributeNames, Regex } from "../../common/Constants";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
-import { extractPreChatSurveyResponseValues, findAllFocusableElement, getWidgetCacheId, parseAdaptiveCardPayload } from "../../common/utils";
+import { extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
-import { DataStoreManager } from "../../common/contextDataStore/DataStoreManager";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { PreChatSurveyPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPreChatSurveyPaneStyleProps } from "./common/defaultStyles/defaultGeneralPreChatSurveyPaneStyleProps";
 import { defaultPreChatSurveyLocalizedTexts } from "./common/defaultProps/defaultPreChatSurveyLocalizedTexts";
-import useChatContextStore from "../../hooks/useChatContextStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatContextStore from "../../hooks/useChatContextStore";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const PreChatSurveyPaneStateful = props => {
   var _surveyProps$stylePro, _props$surveyProps, _props$surveyProps$co;
-
   const [state, dispatch] = useChatContextStore();
   const {
     surveyProps,
@@ -21,8 +20,9 @@ export const PreChatSurveyPaneStateful = props => {
   } = props;
   const generalStyleProps = Object.assign({}, defaultGeneralPreChatSurveyPaneStyleProps, surveyProps === null || surveyProps === void 0 ? void 0 : (_surveyProps$stylePro = surveyProps.styleProps) === null || _surveyProps$stylePro === void 0 ? void 0 : _surveyProps$stylePro.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : ""
-  }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const setPreChatResponseEmail = preChatResponse => {
     if (preChatResponse) {
       for (let index = 0; index < preChatResponse.length; index++) {
@@ -35,7 +35,6 @@ export const PreChatSurveyPaneStateful = props => {
       }
     }
   };
-
   const getAdaptiveCardPayload = (payload, requiredFieldMissingMessage) => {
     try {
       return parseAdaptiveCardPayload(payload, requiredFieldMissingMessage);
@@ -49,7 +48,6 @@ export const PreChatSurveyPaneStateful = props => {
       });
     }
   };
-
   const requiredFieldMissingMessage = ((_props$surveyProps = props.surveyProps) === null || _props$surveyProps === void 0 ? void 0 : (_props$surveyProps$co = _props$surveyProps.controlProps) === null || _props$surveyProps$co === void 0 ? void 0 : _props$surveyProps$co.requiredFieldMissingMessage) ?? defaultPreChatSurveyLocalizedTexts.PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE;
   const controlProps = {
     id: "oc-lcw-prechatsurvey-pane",
@@ -65,18 +63,14 @@ export const PreChatSurveyPaneStateful = props => {
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
         payload: ConversationState.Loading
       });
-
       try {
-        var _state$domainStates, _state$domainStates$t, _state$domainStates$t2, _DataStoreManager$cli, _persistedState$domai;
-
-        const widgetStateCacheId = getWidgetCacheId(((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) ?? "", ((_state$domainStates$t2 = state.domainStates.telemetryInternalData) === null || _state$domainStates$t2 === void 0 ? void 0 : _state$domainStates$t2.widgetId) ?? "");
-        const widgetStateFromCache = (_DataStoreManager$cli = DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.getData(widgetStateCacheId, "localStorage");
-        const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
+        var _state$domainStates, _state$domainStates$t, _state$domainStates$t2, _persistedState$domai, _persistedState$appSt;
+        const persistedState = getStateFromCache(((_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$t = _state$domainStates.telemetryInternalData) === null || _state$domainStates$t === void 0 ? void 0 : _state$domainStates$t.orgId) ?? "", ((_state$domainStates$t2 = state.domainStates.telemetryInternalData) === null || _state$domainStates$t2 === void 0 ? void 0 : _state$domainStates$t2.widgetId) ?? "", state.domainStates.widgetInstanceId ?? "");
         let optionalParams = {};
 
-        if (persistedState !== null && persistedState !== void 0 && (_persistedState$domai = persistedState.domainStates) !== null && _persistedState$domai !== void 0 && _persistedState$domai.liveChatContext) {
+        //Connect to Active chats and chat is not popout
+        if (persistedState && !isUndefinedOrEmpty(persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai = persistedState.domainStates) === null || _persistedState$domai === void 0 ? void 0 : _persistedState$domai.liveChatContext) && (persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$appSt = persistedState.appStates) === null || _persistedState$appSt === void 0 ? void 0 : _persistedState$appSt.conversationState) === ConversationState.Active && !state.appStates.skipChatButtonRendering) {
           var _persistedState$domai2;
-
           optionalParams = {
             liveChatContext: persistedState === null || persistedState === void 0 ? void 0 : (_persistedState$domai2 = persistedState.domainStates) === null || _persistedState$domai2 === void 0 ? void 0 : _persistedState$domai2.liveChatContext
           };
@@ -101,41 +95,34 @@ export const PreChatSurveyPaneStateful = props => {
     },
     ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.controlProps)
   };
-  const styleProps = { ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
+  const styleProps = {
+    ...(surveyProps === null || surveyProps === void 0 ? void 0 : surveyProps.styleProps),
     generalStyleProps: generalStyleProps
   };
   useEffect(() => {
     // Set Aria-Label Attribute for Inputs
     const adaptiveCardElements = document.getElementsByClassName(HtmlAttributeNames.adaptiveCardClassName);
-
     if (adaptiveCardElements && adaptiveCardElements.length > 0) {
       const children = adaptiveCardElements[0].children;
       let value = "";
-
       for (let index = 0; index < children.length; index++) {
         const current = children[index];
-
         if (current && current.className == HtmlAttributeNames.adaptiveCardTextBlockClassName) {
           value = current.innerHTML;
         }
-
         if (current && current.tagName.toLowerCase() == HtmlAttributeNames.div && current.childElementCount > 0) {
           const input = current.children[0].children;
-
           if (input && input.length > 0 && input[0].className != HtmlAttributeNames.adaptiveCardToggleInputClassName) {
             input[0].setAttribute(HtmlAttributeNames.ariaLabel, value);
           }
         }
       }
-    } // Move focus to the first button
-
-
+    }
+    // Move focus to the first button
     const firstElement = findAllFocusableElement(`#${controlProps.id}`);
-
     if (firstElement && firstElement[0]) {
       firstElement[0].focus();
     }
-
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PrechatSurveyLoaded
     });

package/lib/esm/components/proactivechatpanestateful/ProactiveChatPaneStateful.js

@@ -8,19 +8,18 @@ import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetAc
 import { ProactiveChatPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../common/telemetry/TelemetryManager";
-import useChatContextStore from "../../hooks/useChatContextStore"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import useChatContextStore from "../../hooks/useChatContextStore";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ProactiveChatPaneStateful = props => {
   var _proactiveChatProps$c;
-
   const [state, dispatch] = useChatContextStore();
   const {
     proactiveChatProps,
     startChat
-  } = props; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  } = props;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [timeoutRemoved, setTimeoutRemoved] = useState(false);
-
   const handleProactiveChatInviteTimeout = () => {
     if (!timeoutRemoved) {
       setTimeoutRemoved(true);
@@ -43,19 +42,16 @@ export const ProactiveChatPaneStateful = props => {
       });
     }
   };
-
   const controlProps = {
     id: "oc-lcw-proactivechat",
     dir: state.domainStates.globalDir,
     onStart: async () => {
       var _state$domainStates$l, _state$domainStates$l2;
-
       setTimeoutRemoved(true);
       TelemetryHelper.logActionEvent(LogLevel.INFO, {
         Event: TelemetryEvent.ProactiveChatAccepted,
         Description: "Proactive chat accepted."
       });
-
       if (state.appStates.proactiveChatStates.proactiveChatInNewWindow) {
         // TODO: BroadcastService: replace with the sdk broadcast service, when in place
         const startPopoutChatEvent = {
@@ -103,7 +99,7 @@ export const ProactiveChatPaneStateful = props => {
       });
     },
     ...(proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : proactiveChatProps.controlProps),
-    bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ?? (proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText)
+    bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ? state.appStates.proactiveChatStates.proactiveChatBodyTitle : proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText
   };
   useEffect(() => {
     setFocusOnElement(document.getElementById(controlProps.id + "-startbutton"));

package/lib/esm/components/reconnectchatpanestateful/ReconnectChatPaneStateful.js

@@ -8,20 +8,18 @@ import { setFocusOnElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import useChatSDKStore from "../../hooks/useChatSDKStore";
 export const ReconnectChatPaneStateful = props => {
-  const [state, dispatch] = useChatContextStore(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  const [state, dispatch] = useChatContextStore();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const chatSDK = useChatSDKStore();
   const {
     reconnectChatProps,
     initStartChat
   } = props;
-
   const startChat = async continueChat => {
     dispatch({
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
       payload: ConversationState.Loading
     });
-
     if (continueChat && state.appStates.reconnectId) {
       const optionalParams = {
         reconnectId: state.appStates.reconnectId
@@ -30,7 +28,6 @@ export const ReconnectChatPaneStateful = props => {
     } else {
       const parseToJson = false;
       const preChatSurveyResponse = await chatSDK.getPreChatSurvey(parseToJson);
-
       if (preChatSurveyResponse) {
         dispatch({
           type: LiveChatWidgetActionType.SET_PRE_CHAT_SURVEY_RESPONSE,
@@ -49,7 +46,6 @@ export const ReconnectChatPaneStateful = props => {
       }
     }
   };
-
   const controlProps = {
     id: "lcw-components-reconnect-chat-pane",
     dir: state.domainStates.globalDir,

package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js

@@ -2,6 +2,7 @@ import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { Components } from "botframework-webchat";
+import { BroadcastChannel } from "broadcast-channel";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultMiddlewareLocalizedTexts } from "./common/defaultProps/defaultMiddlewareLocalizedTexts";
@@ -12,8 +13,11 @@ import { WebChatActionType } from "./webchatcontroller/enums/WebChatActionType";
 import { WebChatStoreLoader } from "./webchatcontroller/WebChatStoreLoader";
 import { Constants } from "../../common/Constants";
 import { BotMagicCodeStore } from "./webchatcontroller/BotMagicCodeStore";
+import { defaultAdaptiveCardStyles } from "./common/defaultStyles/defaultAdaptiveCardStyles";
+import { defaultReceivedMessageAnchorStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles";
+import { defaultUserMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles";
+import { defaultSystemMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles";
 const broadcastChannelMessageEvent = "message";
-
 const postActivity = activity => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
   return {
@@ -32,15 +36,14 @@ const postActivity = activity => {
     }
   };
 };
-
 const createMagicCodeSuccessResponse = signin => {
   return {
     signin,
     result: "Success"
   };
 };
-
 export const WebChatContainerStateful = props => {
+  var _props$adaptiveCardSt, _props$renderingMiddl, _props$renderingMiddl2, _props$renderingMiddl3, _props$renderingMiddl4, _props$adaptiveCardSt2, _props$renderingMiddl5, _props$renderingMiddl6, _props$renderingMiddl7, _props$renderingMiddl8;
   const {
     BasicWebChat
   } = Components;
@@ -51,9 +54,10 @@ export const WebChatContainerStateful = props => {
     root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, props === null || props === void 0 ? void 0 : props.containerStyles, {
       display: state.appStates.isMinimized ? "none" : ""
     }) // Use this instead of removing WebChat from the picture so that the activity observer inside the adapter is not invoked 
-
   };
-  const localizedTexts = { ...defaultMiddlewareLocalizedTexts,
+
+  const localizedTexts = {
+    ...defaultMiddlewareLocalizedTexts,
     ...(props === null || props === void 0 ? void 0 : props.localizedTexts)
   };
   useEffect(() => {
@@ -76,7 +80,6 @@ export const WebChatContainerStateful = props => {
       const {
         data
       } = event;
-
       if (BotMagicCodeStore.botOAuthSignInId === data.signin) {
         const {
           signin,
@@ -105,14 +108,29 @@ export const WebChatContainerStateful = props => {
         });
       }
     };
-
     magicCodeBroadcastChannel.addEventListener(broadcastChannelMessageEvent, eventListener);
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
+
+        .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card {
+            background: ${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt = props.adaptiveCardStyles) === null || _props$adaptiveCardSt === void 0 ? void 0 : _props$adaptiveCardSt.background) ?? defaultAdaptiveCardStyles.background};
+        }
+
+        .webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__bubble--from-user {
+            max-width: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl = props.renderingMiddlewareProps) === null || _props$renderingMiddl === void 0 ? void 0 : (_props$renderingMiddl2 = _props$renderingMiddl.userMessageBoxStyles) === null || _props$renderingMiddl2 === void 0 ? void 0 : _props$renderingMiddl2.maxWidth) ?? (defaultUserMessageBoxStyles === null || defaultUserMessageBoxStyles === void 0 ? void 0 : defaultUserMessageBoxStyles.maxWidth)}
+        }
+
+        .webchat__stacked-layout--show-avatar div.webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__stacked-layout__message {
+            max-width: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl3 = props.renderingMiddlewareProps) === null || _props$renderingMiddl3 === void 0 ? void 0 : (_props$renderingMiddl4 = _props$renderingMiddl3.systemMessageBoxStyles) === null || _props$renderingMiddl4 === void 0 ? void 0 : _props$renderingMiddl4.maxWidth) ?? (defaultSystemMessageBoxStyles === null || defaultSystemMessageBoxStyles === void 0 ? void 0 : defaultSystemMessageBoxStyles.maxWidth)}
+        }
+
+        div[class="ac-textBlock"]>p{color:${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt2 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt2 === void 0 ? void 0 : _props$adaptiveCardSt2.color) ?? defaultAdaptiveCardStyles.color};}
+
         .ms_lcw_webchat_received_message img.webchat__markdown__external-link-icon { 
             background-image : url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjI1MDEgNC41MDAxN0gxMC43NDk1QzExLjE2MzcgNC41MDAxNyAxMS40OTk1IDQuODM1OTYgMTEuNDk5NSA1LjI1MDE3QzExLjQ5OTUgNS42Mjk4NiAxMS4yMTczIDUuOTQzNjYgMTAuODUxMyA1Ljk5MzMyTDEwLjc0OTUgNi4wMDAxN0g3LjI0OTc0QzYuMDcwNzkgNS45OTk2MSA1LjEwMzQ5IDYuOTA2NTYgNS4wMDc4NiA4LjA2MTEyTDUuMDAwMjggOC4yMjAwM0w1LjAwMzEyIDE2Ljc1MDdDNS4wMDM0MyAxNy45NDE1IDUuOTI4ODUgMTguOTE2MSA3LjA5OTY2IDE4Ljk5NDlMNy4yNTM3MSAxOS4wMDAxTDE1Ljc1MTggMTguOTg4NEMxNi45NDE1IDE4Ljk4NjggMTcuOTE0NSAxOC4wNjIgMTcuOTkzNSAxNi44OTIzTDE3Ljk5ODcgMTYuNzM4NFYxMy4yMzIxQzE3Ljk5ODcgMTIuODE3OSAxOC4zMzQ1IDEyLjQ4MjEgMTguNzQ4NyAxMi40ODIxQzE5LjEyODQgMTIuNDgyMSAxOS40NDIyIDEyLjc2NDMgMTkuNDkxOCAxMy4xMzAzTDE5LjQ5ODcgMTMuMjMyMVYxNi43Mzg0QzE5LjQ5ODcgMTguNzQwNyAxNy45MjkzIDIwLjM3NjkgMTUuOTUyOCAyMC40ODI5TDE1Ljc1MzggMjAuNDg4NEw3LjI1ODI3IDIwLjUwMDFMNy4wNTQ5NSAyMC40OTQ5QzUuMTQyMzkgMjAuMzk1NCAzLjYwODk1IDE4Ljg2MjcgMy41MDgzNyAxNi45NTAyTDMuNTAzMTIgMTYuNzUxMUwzLjUwMDg5IDguMjUyN0wzLjUwNTI5IDguMDUwMkMzLjYwNTM5IDYuMTM3NDkgNS4xMzg2NyA0LjYwNDQ5IDcuMDUwOTYgNC41MDUyN0w3LjI1MDEgNC41MDAxN0gxMC43NDk1SDcuMjUwMVpNMTMuNzQ4MSAzLjAwMTQ2TDIwLjMwMTggMy4wMDE5N0wyMC40MDE0IDMuMDE1NzVMMjAuNTAyMiAzLjA0MzkzTDIwLjU1OSAzLjA2ODAzQzIwLjYxMjIgMy4wOTEyMiAyMC42NjM0IDMuMTIxNjMgMjAuNzExMSAzLjE1ODg1TDIwLjc4MDQgMy4yMjE1NkwyMC44NjQxIDMuMzIwMTRMMjAuOTE4MyAzLjQxMDI1TDIwLjk1NyAzLjUwMDU3TDIwLjk3NjIgMy41NjQ3NkwyMC45ODk4IDMuNjI4NjJMMjAuOTk5MiAzLjcyMjgyTDIwLjk5OTcgMTAuMjU1NEMyMC45OTk3IDEwLjY2OTYgMjAuNjYzOSAxMS4wMDU0IDIwLjI0OTcgMTEuMDA1NEMxOS44NyAxMS4wMDU0IDE5LjU1NjIgMTAuNzIzMiAxOS41MDY1IDEwLjM1NzFMMTkuNDk5NyAxMC4yNTU0TDE5LjQ5ODkgNS41NjE0N0wxMi4yNzk3IDEyLjc4NDdDMTIuMDEzNCAxMy4wNTEgMTEuNTk2OCAxMy4wNzUzIDExLjMwMzEgMTIuODU3NUwxMS4yMTkgMTIuNzg0OUMxMC45NTI3IDEyLjUxODcgMTAuOTI4NCAxMi4xMDIxIDExLjE0NjIgMTEuODA4NEwxMS4yMTg4IDExLjcyNDNMMTguNDM2OSA0LjUwMTQ2SDEzLjc0ODFDMTMuMzY4NCA0LjUwMTQ2IDEzLjA1NDYgNC4yMTkzMSAxMy4wMDUgMy44NTMyNEwxMi45OTgxIDMuNzUxNDZDMTIuOTk4MSAzLjM3MTc3IDEzLjI4MDMgMy4wNTc5NyAxMy42NDY0IDMuMDA4MzFMMTMuNzQ4MSAzLjAwMTQ2WiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4) !important;
             height: '.75em';
-            marginLeft: '.25em'; 
+            marginLeft: '.25em';
+            filter:${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl5 = props.renderingMiddlewareProps) === null || _props$renderingMiddl5 === void 0 ? void 0 : (_props$renderingMiddl6 = _props$renderingMiddl5.receivedMessageAnchorStyles) === null || _props$renderingMiddl6 === void 0 ? void 0 : _props$renderingMiddl6.filter) ?? "none"};
         }
         pre {
             white-space: pre-wrap;
@@ -125,7 +143,7 @@ export const WebChatContainerStateful = props => {
         .ms_lcw_webchat_received_message a:visited,
         .ms_lcw_webchat_received_message a:hover,
         .ms_lcw_webchat_received_message a:active {
-            color: white;
+            color: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl7 = props.renderingMiddlewareProps) === null || _props$renderingMiddl7 === void 0 ? void 0 : (_props$renderingMiddl8 = _props$renderingMiddl7.receivedMessageAnchorStyles) === null || _props$renderingMiddl8 === void 0 ? void 0 : _props$renderingMiddl8.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
         } `), /*#__PURE__*/React.createElement(Stack, {
     styles: containerStyles
   }, /*#__PURE__*/React.createElement(BasicWebChat, null)));

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js

@@ -2,11 +2,13 @@ import MockAdapter from "../mockadapter";
 import { defaultWebChatStatefulContainerStyles } from "../defaultStyles/defaultWebChatStatefulContainerStyles";
 import { defaultWebChatStatefulProps } from "./defaultWebChatStatefulProps";
 import { defaultWebChatStatefulStyles } from "../defaultStyles/defaultWebChatContainerStatefulStyles";
+import { defaultAdaptiveCardStyles } from "../defaultStyles/defaultAdaptiveCardStyles";
 export const defaultWebChatContainerStatefulProps = {
   webChatStyles: defaultWebChatStatefulStyles,
   webChatProps: defaultWebChatStatefulProps,
   containerStyles: defaultWebChatStatefulContainerStyles,
   disableNewLineMarkdownSupport: false,
   disableMarkdownMessageFormatting: false,
-  directLine: new MockAdapter()
+  directLine: new MockAdapter(),
+  adaptiveCardStyles: defaultAdaptiveCardStyles
 };

package/lib/esm/components/webchatcontainerstateful/common/defaultProps/defaultWebChatStatefulProps.js

@@ -7,6 +7,6 @@ export const defaultWebChatStatefulProps = {
   // avatarMiddleware: avatarMiddleware, - this is implemented elsewhere and can be customized
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   groupActivitiesMiddleware: groupActivitiesMiddleware,
-  typingIndicatorMiddleware: typingIndicatorMiddleware // attachmentMiddleware: createAttachmentMiddleware(false), - this is implemented elsewhere and can be customized
-
+  typingIndicatorMiddleware: typingIndicatorMiddleware
+  // attachmentMiddleware: createAttachmentMiddleware(false), - this is implemented elsewhere and can be customized
 };

package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js

@@ -0,0 +1,4 @@
+export const defaultAdaptiveCardStyles = {
+  background: "white",
+  color: "black"
+};

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

@@ -1,5 +1,4 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import "rxjs/add/operator/share";
 import "rxjs/add/observable/of";
 import { ConnectionStatus } from "botframework-directlinejs";
@@ -9,16 +8,12 @@ import { uuidv4 } from "@microsoft/omnichannel-chat-sdk";
 export default class MockAdapter {
   constructor() {
     _defineProperty(this, "activityObserver", void 0);
-
     _defineProperty(this, "activity$", void 0);
-
     _defineProperty(this, "connectionStatus$", new BehaviorSubject(ConnectionStatus.Uninitialized));
-
     this.activity$ = new Observable(observer => {
       this.activityObserver = observer;
       Promise.resolve().then(async () => {
         this.connectionStatus$.next(ConnectionStatus.Online);
-
         try {
           if (this.connectionStatus$) {
             this.connectionStatus$.next(ConnectionStatus.Online);
@@ -30,22 +25,20 @@ export default class MockAdapter {
       });
     }).share();
   }
-
   postActivity(activity) {
     if (activity) {
       var _activity$text;
-
       let modActivity;
       let typingActivity;
       const userId = "userId",
-            botId = "botId";
-
+        botId = "botId";
       if ((_activity$text = activity.text) !== null && _activity$text !== void 0 && _activity$text.startsWith(":")) {
         var _this$activityObserve, _this$activityObserve2;
-
-        modActivity = { ...activity,
+        modActivity = {
+          ...activity,
           id: uuidv4(),
-          from: { ...activity.from,
+          from: {
+            ...activity.from,
             id: botId,
             name: "Bot",
             role: "bot"
@@ -62,14 +55,14 @@ export default class MockAdapter {
           type: "typing"
         };
         (_this$activityObserve = this.activityObserver) === null || _this$activityObserve === void 0 ? void 0 : _this$activityObserve.next(modActivity); // mock echo message
-
         (_this$activityObserve2 = this.activityObserver) === null || _this$activityObserve2 === void 0 ? void 0 : _this$activityObserve2.next(typingActivity); // mock typing
       } else {
         var _this$activityObserve3;
-
-        modActivity = { ...activity,
+        modActivity = {
+          ...activity,
           id: uuidv4(),
-          from: { ...activity.from,
+          from: {
+            ...activity.from,
             id: userId,
             name: "User",
             role: "user"
@@ -81,9 +74,7 @@ export default class MockAdapter {
 
     return Observable.of(activity.id || "");
   }
-
   end() {
     return;
   }
-
 }