@microsoft/omnichannel-chat-widget 1.0.6-main.ffb4e2a → 1.1.1-main.1f4a6a7

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

@@ -7,6 +7,7 @@ import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
 import { createTimer, getBroadcastChannelName, getConversationDetailsCall, getLocaleDirection, getStateFromCache, getWidgetCacheIdfromProps, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty, newGuid } from "../../../common/utils";
+import { defaultClientDataStoreProvider, isCookieAllowed } from "../../../common/storage/default/defaultClientDataStoreProvider";
 import { endChat, prepareEndChat } from "../common/endChat";
 import { handleChatReconnect, isReconnectEnabled } from "../common/reconnectChatHelper";
 import { shouldShowCallingContainer, shouldShowChatButton, shouldShowConfirmationPane, shouldShowEmailTranscriptPane, shouldShowHeader, shouldShowLoadingPane, shouldShowOutOfOfficeHoursPane, shouldShowPostChatLoadingPane, shouldShowPostChatSurveyPane, shouldShowPreChatSurveyPane, shouldShowProactiveChatPane, shouldShowReconnectChatPane, shouldShowWebChatContainer } from "../../../controller/componentController";
@@ -16,6 +17,7 @@ import ChatButtonStateful from "../../chatbuttonstateful/ChatButtonStateful";
 import ConfirmationPaneStateful from "../../confirmationpanestateful/ConfirmationPaneStateful";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { DataStoreManager } from "../../../common/contextDataStore/DataStoreManager";
+import DraggableChatWidget from "../../draggable/DraggableChatWidget";
 import { ElementType } from "@microsoft/omnichannel-chat-components";
 import EmailTranscriptPaneStateful from "../../emailtranscriptpanestateful/EmailTranscriptPaneStateful";
 import HeaderStateful from "../../headerstateful/HeaderStateful";
@@ -30,9 +32,9 @@ import ReconnectChatPaneStateful from "../../reconnectchatpanestateful/Reconnect
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import WebChatContainerStateful from "../../webchatcontainerstateful/WebChatContainerStateful";
+import createDownloadTranscriptProps from "../common/createDownloadTranscriptProps";
 import { createFooter } from "../common/createFooter";
 import { createInternetConnectionChangeHandler } from "../common/createInternetConnectionChangeHandler";
-import { defaultClientDataStoreProvider } from "../../../common/storage/default/defaultClientDataStoreProvider";
 import { defaultScrollBarProps } from "../common/defaultProps/defaultScrollBarProps";
 import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
 import { disposeTelemetryLoggers } from "../common/disposeTelemetryLoggers";
@@ -49,7 +51,7 @@ import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useChatSDKStore from "../../../hooks/useChatSDKStore";
 export const LiveChatWidgetStateful = props => {
-  var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$styleProps2, _props$controlProps11, _props$controlProps12, _props$componentOverr, _props$controlProps13, _props$componentOverr2, _props$controlProps14, _props$componentOverr3, _props$controlProps15, _props$componentOverr4, _props$controlProps16, _props$componentOverr5, _props$controlProps17, _props$componentOverr6, _props$controlProps18, _props$componentOverr7, _props$controlProps19, _props$controlProps20, _props$componentOverr8, _props$controlProps21, _props$componentOverr9, _props$controlProps22, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
+  var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _state$appStates7, _props$webChatContain5, _state$appStates14, _props$webChatContain6, _props$controlProps11, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$contro10, _livechatProps$compon8, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$compon11, _livechatProps$compon12;
   const [state, dispatch] = useChatContextStore();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [adapter, setAdapter] = useChatAdapterStore();
@@ -424,6 +426,9 @@ export const LiveChatWidgetStateful = props => {
         payload: undefined
       });
     });
+
+    // Check for TPC and log in telemetry if blocked
+    isCookieAllowed();
     return () => {
       disposeTelemetryLoggers();
     };
@@ -545,12 +550,11 @@ export const LiveChatWidgetStateful = props => {
     if (state.appStates.conversationState === ConversationState.Active &&
         props.controlProps?.hideStartChatButton === true) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        
-        window.onbeforeunload = function () {
+          window.onbeforeunload = function () {
             const prompt = Constants.BrowserUnloadConfirmationMessage;
             return prompt;
         };
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
         window.onunload = function () {
             initiateEndChatOnBrowserUnload();
         };
@@ -601,55 +605,79 @@ export const LiveChatWidgetStateful = props => {
   const confirmationPaneProps = initConfirmationPropsComposer(props);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const prepareEndChatRelay = () => prepareEndChat(props, chatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, uwid.current);
+  const downloadTranscriptProps = createDownloadTranscriptProps(props.downloadTranscriptProps, {
+    ...(defaultWebChatContainerStatefulProps === null || defaultWebChatContainerStatefulProps === void 0 ? void 0 : defaultWebChatContainerStatefulProps.webChatStyles),
+    ...((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.webChatStyles)
+  }, props.webChatContainerProps);
+  const livechatProps = {
+    ...props,
+    downloadTranscriptProps
+  };
+  const chatWidgetDraggableConfig = {
+    elementId: widgetElementId,
+    channel: ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.widgetInstanceId) ?? "lcw",
+    disabled: ((_props$draggableChatW = props.draggableChatWidgetProps) === null || _props$draggableChatW === void 0 ? void 0 : _props$draggableChatW.disabled) === true ?? false // Draggable by default, unless explicitly disabled
+  };
+
+  // Disable receiving IDraggableEvent in current window
+  if (((_props$draggableChatW2 = props.draggableChatWidgetProps) === null || _props$draggableChatW2 === void 0 ? void 0 : _props$draggableChatW2.disabled) === false && (_props$draggableChatW3 = props.draggableChatWidgetProps) !== null && _props$draggableChatW3 !== void 0 && _props$draggableChatW3.targetIframe) {
+    chatWidgetDraggableConfig.disabled = true;
+  }
+  const headerDraggableConfig = {
+    draggableEventChannel: chatWidgetDraggableConfig.channel ?? "lcw",
+    draggableEventEmitterTargetWindow: (_props$draggableChatW4 = props.draggableChatWidgetProps) !== null && _props$draggableChatW4 !== void 0 && _props$draggableChatW4.targetIframe ? window.parent : window,
+    draggable: ((_props$draggableChatW5 = props.draggableChatWidgetProps) === null || _props$draggableChatW5 === void 0 ? void 0 : _props$draggableChatW5.disabled) !== true // Draggable by default, unless explicitly disabled
+  };
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
             ::-webkit-scrollbar {
                 width: ${scrollbarProps.width};
             }
-            
+
             ::-webkit-scrollbar-track {
                 background: ${scrollbarProps.trackBackgroundColor};
             }
-            
+
             ::-webkit-scrollbar-thumb {
                 background: ${scrollbarProps.thumbBackgroundColor};
                 border-radius: ${scrollbarProps.thumbBorderRadius};
             }
-            
+
             ::-webkit-scrollbar-thumb:hover {
                 background: ${scrollbarProps.thumbHoverColor};
-            } 
-            `), /*#__PURE__*/React.createElement(Composer, _extends({}, webChatProps, {
+            }
+            `), /*#__PURE__*/React.createElement(DraggableChatWidget, chatWidgetDraggableConfig, /*#__PURE__*/React.createElement(Composer, _extends({}, webChatProps, {
     styleOptions: webChatStyles,
-    directLine: ((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.directLine) ?? adapter ?? defaultWebChatContainerStatefulProps.directLine
+    directLine: ((_livechatProps$webCha = livechatProps.webChatContainerProps) === null || _livechatProps$webCha === void 0 ? void 0 : _livechatProps$webCha.directLine) ?? adapter ?? defaultWebChatContainerStatefulProps.directLine
   }), /*#__PURE__*/React.createElement(Stack, {
     id: widgetElementId,
     styles: generalStyles,
-    className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.className
-  }, !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideChatButton) && !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hideStartChatButton) && shouldShowChatButton(state) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.chatButton) || /*#__PURE__*/React.createElement(ChatButtonStateful, {
-    buttonProps: props.chatButtonProps,
-    outOfOfficeButtonProps: props.outOfOfficeChatButtonProps,
+    className: (_livechatProps$styleP = livechatProps.styleProps) === null || _livechatProps$styleP === void 0 ? void 0 : _livechatProps$styleP.className
+  }, !((_livechatProps$contro = livechatProps.controlProps) !== null && _livechatProps$contro !== void 0 && _livechatProps$contro.hideChatButton) && !((_livechatProps$contro2 = livechatProps.controlProps) !== null && _livechatProps$contro2 !== void 0 && _livechatProps$contro2.hideStartChatButton) && shouldShowChatButton(state) && (decodeComponentString((_livechatProps$compon = livechatProps.componentOverrides) === null || _livechatProps$compon === void 0 ? void 0 : _livechatProps$compon.chatButton) || /*#__PURE__*/React.createElement(ChatButtonStateful, {
+    buttonProps: livechatProps.chatButtonProps,
+    outOfOfficeButtonProps: livechatProps.outOfOfficeChatButtonProps,
     startChat: prepareStartChatRelay
-  })), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideProactiveChatPane) && shouldShowProactiveChatPane(state) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.proactiveChatPane) || /*#__PURE__*/React.createElement(ProactiveChatPaneStateful, {
-    proactiveChatProps: props.proactiveChatPaneProps,
+  })), !((_livechatProps$contro3 = livechatProps.controlProps) !== null && _livechatProps$contro3 !== void 0 && _livechatProps$contro3.hideProactiveChatPane) && shouldShowProactiveChatPane(state) && (decodeComponentString((_livechatProps$compon2 = livechatProps.componentOverrides) === null || _livechatProps$compon2 === void 0 ? void 0 : _livechatProps$compon2.proactiveChatPane) || /*#__PURE__*/React.createElement(ProactiveChatPaneStateful, {
+    proactiveChatProps: livechatProps.proactiveChatPaneProps,
     startChat: prepareStartChatRelay
-  })), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideHeader) && shouldShowHeader(state) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.header) || /*#__PURE__*/React.createElement(HeaderStateful, {
-    headerProps: props.headerProps,
-    outOfOfficeHeaderProps: props.outOfOfficeHeaderProps,
+  })), !((_livechatProps$contro4 = livechatProps.controlProps) !== null && _livechatProps$contro4 !== void 0 && _livechatProps$contro4.hideHeader) && shouldShowHeader(state) && (decodeComponentString((_livechatProps$compon3 = livechatProps.componentOverrides) === null || _livechatProps$compon3 === void 0 ? void 0 : _livechatProps$compon3.header) || /*#__PURE__*/React.createElement(HeaderStateful, _extends({
+    headerProps: livechatProps.headerProps,
+    outOfOfficeHeaderProps: livechatProps.outOfOfficeHeaderProps,
     endChat: endChatRelay
-  })), !((_props$controlProps15 = props.controlProps) !== null && _props$controlProps15 !== void 0 && _props$controlProps15.hideLoadingPane) && shouldShowLoadingPane(state) && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.loadingPane) || /*#__PURE__*/React.createElement(LoadingPaneStateful, {
-    loadingPaneProps: props.loadingPaneProps,
-    startChatErrorPaneProps: props.startChatErrorPaneProps
-  })), !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideOutOfOfficeHoursPane) && shouldShowOutOfOfficeHoursPane(state) && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.outOfOfficeHoursPane) || /*#__PURE__*/React.createElement(OutOfOfficeHoursPaneStateful, props.outOfOfficeHoursPaneProps)), !((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.hideReconnectChatPane) && shouldShowReconnectChatPane(state) && (decodeComponentString((_props$componentOverr6 = props.componentOverrides) === null || _props$componentOverr6 === void 0 ? void 0 : _props$componentOverr6.reconnectChatPane) || /*#__PURE__*/React.createElement(ReconnectChatPaneStateful, {
-    reconnectChatProps: props.reconnectChatPaneProps,
+  }, headerDraggableConfig))), !((_livechatProps$contro5 = livechatProps.controlProps) !== null && _livechatProps$contro5 !== void 0 && _livechatProps$contro5.hideLoadingPane) && shouldShowLoadingPane(state) && (decodeComponentString((_livechatProps$compon4 = livechatProps.componentOverrides) === null || _livechatProps$compon4 === void 0 ? void 0 : _livechatProps$compon4.loadingPane) || /*#__PURE__*/React.createElement(LoadingPaneStateful, {
+    loadingPaneProps: livechatProps.loadingPaneProps,
+    startChatErrorPaneProps: livechatProps.startChatErrorPaneProps
+  })), !((_livechatProps$contro6 = livechatProps.controlProps) !== null && _livechatProps$contro6 !== void 0 && _livechatProps$contro6.hideOutOfOfficeHoursPane) && shouldShowOutOfOfficeHoursPane(state) && (decodeComponentString((_livechatProps$compon5 = livechatProps.componentOverrides) === null || _livechatProps$compon5 === void 0 ? void 0 : _livechatProps$compon5.outOfOfficeHoursPane) || /*#__PURE__*/React.createElement(OutOfOfficeHoursPaneStateful, livechatProps.outOfOfficeHoursPaneProps)), !((_livechatProps$contro7 = livechatProps.controlProps) !== null && _livechatProps$contro7 !== void 0 && _livechatProps$contro7.hideReconnectChatPane) && shouldShowReconnectChatPane(state) && (decodeComponentString((_livechatProps$compon6 = livechatProps.componentOverrides) === null || _livechatProps$compon6 === void 0 ? void 0 : _livechatProps$compon6.reconnectChatPane) || /*#__PURE__*/React.createElement(ReconnectChatPaneStateful, {
+    reconnectChatProps: livechatProps.reconnectChatPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_props$controlProps18 = props.controlProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.hidePreChatSurveyPane) && shouldShowPreChatSurveyPane(state) && (decodeComponentString((_props$componentOverr7 = props.componentOverrides) === null || _props$componentOverr7 === void 0 ? void 0 : _props$componentOverr7.preChatSurveyPane) || /*#__PURE__*/React.createElement(PreChatSurveyPaneStateful, {
-    surveyProps: props.preChatSurveyPaneProps,
+  })), !((_livechatProps$contro8 = livechatProps.controlProps) !== null && _livechatProps$contro8 !== void 0 && _livechatProps$contro8.hidePreChatSurveyPane) && shouldShowPreChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon7 = livechatProps.componentOverrides) === null || _livechatProps$compon7 === void 0 ? void 0 : _livechatProps$compon7.preChatSurveyPane) || /*#__PURE__*/React.createElement(PreChatSurveyPaneStateful, {
+    surveyProps: livechatProps.preChatSurveyPaneProps,
     initStartChat: initStartChatRelay
-  })), !((_props$controlProps19 = props.controlProps) !== null && _props$controlProps19 !== void 0 && _props$controlProps19.hideCallingContainer) && shouldShowCallingContainer(state) && /*#__PURE__*/React.createElement(CallingContainerStateful, _extends({
+  })), !((_livechatProps$contro9 = livechatProps.controlProps) !== null && _livechatProps$contro9 !== void 0 && _livechatProps$contro9.hideCallingContainer) && shouldShowCallingContainer(state) && /*#__PURE__*/React.createElement(CallingContainerStateful, _extends({
     voiceVideoCallingSdk: voiceVideoCallingSDK
-  }, props.callingContainerProps)), !((_props$controlProps20 = props.controlProps) !== null && _props$controlProps20 !== void 0 && _props$controlProps20.hideWebChatContainer) && shouldShowWebChatContainer(state) && (decodeComponentString((_props$componentOverr8 = props.componentOverrides) === null || _props$componentOverr8 === void 0 ? void 0 : _props$componentOverr8.webChatContainer) || /*#__PURE__*/React.createElement(WebChatContainerStateful, props.webChatContainerProps)), !((_props$controlProps21 = props.controlProps) !== null && _props$controlProps21 !== void 0 && _props$controlProps21.hideConfirmationPane) && shouldShowConfirmationPane(state) && (decodeComponentString((_props$componentOverr9 = props.componentOverrides) === null || _props$componentOverr9 === void 0 ? void 0 : _props$componentOverr9.confirmationPane) || /*#__PURE__*/React.createElement(ConfirmationPaneStateful, _extends({}, confirmationPaneProps, {
+  }, livechatProps.callingContainerProps)), !((_livechatProps$contro10 = livechatProps.controlProps) !== null && _livechatProps$contro10 !== void 0 && _livechatProps$contro10.hideWebChatContainer) && shouldShowWebChatContainer(state) && (decodeComponentString((_livechatProps$compon8 = livechatProps.componentOverrides) === null || _livechatProps$compon8 === void 0 ? void 0 : _livechatProps$compon8.webChatContainer) || /*#__PURE__*/React.createElement(WebChatContainerStateful, livechatProps)), !((_livechatProps$contro11 = livechatProps.controlProps) !== null && _livechatProps$contro11 !== void 0 && _livechatProps$contro11.hideConfirmationPane) && shouldShowConfirmationPane(state) && (decodeComponentString((_livechatProps$compon9 = livechatProps.componentOverrides) === null || _livechatProps$compon9 === void 0 ? void 0 : _livechatProps$compon9.confirmationPane) || /*#__PURE__*/React.createElement(ConfirmationPaneStateful, _extends({}, confirmationPaneProps, {
     setPostChatContext: setPostChatContextRelay,
     prepareEndChat: prepareEndChatRelay
-  }))), !((_props$controlProps22 = props.controlProps) !== null && _props$controlProps22 !== void 0 && _props$controlProps22.hidePostChatLoadingPane) && shouldShowPostChatLoadingPane(state) && (decodeComponentString((_props$componentOverr10 = props.componentOverrides) === null || _props$componentOverr10 === void 0 ? void 0 : _props$componentOverr10.postChatLoadingPane) || /*#__PURE__*/React.createElement(PostChatLoadingPaneStateful, props.postChatLoadingPaneProps)), shouldShowPostChatSurveyPane(state) && (decodeComponentString((_props$componentOverr11 = props.componentOverrides) === null || _props$componentOverr11 === void 0 ? void 0 : _props$componentOverr11.postChatSurveyPane) || /*#__PURE__*/React.createElement(PostChatSurveyPaneStateful, _extends({}, props.postChatSurveyPaneProps, props.chatSDK))), createFooter(props, state), shouldShowEmailTranscriptPane(state) && (decodeComponentString((_props$componentOverr12 = props.componentOverrides) === null || _props$componentOverr12 === void 0 ? void 0 : _props$componentOverr12.emailTranscriptPane) || /*#__PURE__*/React.createElement(EmailTranscriptPaneStateful, props.emailTranscriptPane)))));
+  }))), !((_livechatProps$contro12 = livechatProps.controlProps) !== null && _livechatProps$contro12 !== void 0 && _livechatProps$contro12.hidePostChatLoadingPane) && shouldShowPostChatLoadingPane(state) && (decodeComponentString((_livechatProps$compon10 = livechatProps.componentOverrides) === null || _livechatProps$compon10 === void 0 ? void 0 : _livechatProps$compon10.postChatLoadingPane) || /*#__PURE__*/React.createElement(PostChatLoadingPaneStateful, livechatProps.postChatLoadingPaneProps)), shouldShowPostChatSurveyPane(state) && (decodeComponentString((_livechatProps$compon11 = livechatProps.componentOverrides) === null || _livechatProps$compon11 === void 0 ? void 0 : _livechatProps$compon11.postChatSurveyPane) || /*#__PURE__*/React.createElement(PostChatSurveyPaneStateful, _extends({}, livechatProps.postChatSurveyPaneProps, livechatProps.chatSDK))), createFooter(livechatProps, state), shouldShowEmailTranscriptPane(state) && (decodeComponentString((_livechatProps$compon12 = livechatProps.componentOverrides) === null || _livechatProps$compon12 === void 0 ? void 0 : _livechatProps$compon12.emailTranscriptPane) || /*#__PURE__*/React.createElement(EmailTranscriptPaneStateful, livechatProps.emailTranscriptPane))))));
 };
 export default LiveChatWidgetStateful;

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

@@ -113,6 +113,12 @@ export const PreChatSurveyPaneStateful = props => {
         const current = children[index];
         if (current && current.className == HtmlAttributeNames.adaptiveCardTextBlockClassName) {
           value = current.innerHTML;
+          if (current.childElementCount > 0) {
+            const paragraph = current.children[0];
+            if (paragraph.tagName.toLowerCase() == HtmlAttributeNames.pTagName) {
+              value = paragraph.innerHTML;
+            }
+          }
         }
         if (current && current.tagName.toLowerCase() == HtmlAttributeNames.div && current.childElementCount > 0) {
           const input = current.children[0].children;

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

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
@@ -6,12 +8,15 @@ import { BroadcastChannel } from "broadcast-channel";
 import { Components } from "botframework-webchat";
 import { Constants } from "../../common/Constants";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
+import { NotificationHandler } from "./webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "./webchatcontroller/enums/NotificationScenarios";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { WebChatActionType } from "./webchatcontroller/enums/WebChatActionType";
 import { WebChatStoreLoader } from "./webchatcontroller/WebChatStoreLoader";
 import { defaultAdaptiveCardStyles } from "./common/defaultStyles/defaultAdaptiveCardStyles";
 import { defaultMiddlewareLocalizedTexts } from "./common/defaultProps/defaultMiddlewareLocalizedTexts";
 import { defaultReceivedMessageAnchorStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles";
+import { defaultSentMessageAnchorStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles";
 import { defaultSystemMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles";
 import { defaultUserMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles";
 import { defaultWebChatContainerStatefulProps } from "./common/defaultProps/defaultWebChatContainerStatefulProps";
@@ -43,28 +48,33 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 export const WebChatContainerStateful = props => {
-  var _props$adaptiveCardSt, _props$renderingMiddl, _props$renderingMiddl2, _props$renderingMiddl3, _props$renderingMiddl4, _props$adaptiveCardSt2, _props$adaptiveCardSt3, _props$adaptiveCardSt4, _props$renderingMiddl5, _props$renderingMiddl6, _props$renderingMiddl7, _props$renderingMiddl8;
+  var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15;
   const {
     BasicWebChat
   } = Components;
   const [state, dispatch] = useChatContextStore();
   const magicCodeBroadcastChannel = new BroadcastChannel(Constants.magicCodeBroadcastChannel);
   const magicCodeResponseBroadcastChannel = new BroadcastChannel(Constants.magicCodeResponseBroadcastChannel);
+  const {
+    webChatContainerProps,
+    contextDataStore
+  } = props;
   const containerStyles = {
-    root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, props === null || props === void 0 ? void 0 : props.containerStyles, {
+    root: Object.assign({}, defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.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,
-    ...(props === null || props === void 0 ? void 0 : props.localizedTexts)
+    ...(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.localizedTexts)
   };
   useEffect(() => {
+    var _props$webChatContain, _props$webChatContain2;
     setFocusOnSendBox();
     dispatch({
       type: LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
-      payload: props === null || props === void 0 ? void 0 : props.renderingMiddlewareProps
+      payload: webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.renderingMiddlewareProps
     });
     dispatch({
       type: LiveChatWidgetActionType.SET_MIDDLEWARE_LOCALIZED_TEXTS,
@@ -73,6 +83,17 @@ export const WebChatContainerStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.WebChatLoaded
     });
+    if (((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.disableThirdPartyCookiesAlert) !== true && !contextDataStore) {
+      try {
+        localStorage;
+        sessionStorage;
+      } catch (error) {
+        if (!window.TPCWarningShown) {
+          NotificationHandler.notifyWarning(NotificationScenarios.TPC, (localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE) ?? "");
+          window.TPCWarningShown = true;
+        }
+      }
+    }
   }, []);
   useEffect(() => {
     const eventListener = event => {
@@ -113,26 +134,33 @@ export const WebChatContainerStateful = props => {
   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};
+            background: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.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)}
+            max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp2 === void 0 ? void 0 : (_webChatContainerProp3 = _webChatContainerProp2.userMessageBoxStyles) === null || _webChatContainerProp3 === void 0 ? void 0 : _webChatContainerProp3.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)}
+            max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp4 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp4 === void 0 ? void 0 : (_webChatContainerProp5 = _webChatContainerProp4.systemMessageBoxStyles) === null || _webChatContainerProp5 === void 0 ? void 0 : _webChatContainerProp5.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}; white-space:${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt3 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt3 === void 0 ? void 0 : _props$adaptiveCardSt3.textWhiteSpace) ?? defaultAdaptiveCardStyles.textWhiteSpace}}
-        
-        .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(props === null || props === void 0 ? void 0 : (_props$adaptiveCardSt4 = props.adaptiveCardStyles) === null || _props$adaptiveCardSt4 === void 0 ? void 0 : _props$adaptiveCardSt4.buttonWhiteSpace) ?? defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
+        div[class="ac-textBlock"] *,
+        div[class="ac-input-container"] * {color:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp6 === void 0 ? void 0 : _webChatContainerProp6.color) ?? defaultAdaptiveCardStyles.color}; white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp7 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp7 === void 0 ? void 0 : _webChatContainerProp7.textWhiteSpace) ?? defaultAdaptiveCardStyles.textWhiteSpace}}
+        div[class="ac-textBlock"] a:link,
+        div[class="ac-textBlock"] a:visited,
+        div[class="ac-textBlock"] a:hover,
+        div[class="ac-textBlock"] a:active {
+            color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp8 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.anchorColor) ?? defaultAdaptiveCardStyles.anchorColor};
+        } 
+
+        .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp9 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp9 === void 0 ? void 0 : _webChatContainerProp9.buttonWhiteSpace) ?? defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
 
         .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';
-            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"};
+            filter:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp10 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp10 === void 0 ? void 0 : (_webChatContainerProp11 = _webChatContainerProp10.receivedMessageAnchorStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.filter) ?? "none"};
         }
         pre {
             white-space: pre-wrap;
@@ -145,8 +173,15 @@ 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: ${(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, {
+            color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp12 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp12 === void 0 ? void 0 : (_webChatContainerProp13 = _webChatContainerProp12.receivedMessageAnchorStyles) === null || _webChatContainerProp13 === void 0 ? void 0 : _webChatContainerProp13.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
+        } 
+        .ms_lcw_webchat_sent_message a:link,
+        .ms_lcw_webchat_sent_message a:visited,
+        .ms_lcw_webchat_sent_message a:hover,
+        .ms_lcw_webchat_sent_message a:active {
+            color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp14 === void 0 ? void 0 : (_webChatContainerProp15 = _webChatContainerProp14.sentMessageAnchorStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
+        }
+        `), /*#__PURE__*/React.createElement(Stack, {
     styles: containerStyles
   }, /*#__PURE__*/React.createElement(BasicWebChat, null)));
 };

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

@@ -24,5 +24,6 @@ export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_MESSAGE_DELIVERED: "Sent",
   MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
   MIDDLEWARE_MESSAGE_RETRY: "Retry",
-  MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
+  MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
+  THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Third party cookies are blocked. Reloading this page will start a new conversation."
 };

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

@@ -1,6 +1,7 @@
 export const defaultAdaptiveCardStyles = {
   background: "white",
   color: "black",
+  anchorColor: "blue",
   textWhiteSpace: "normal",
   buttonWhiteSpace: "normal"
 };

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

@@ -8,6 +8,11 @@ export class MockChatSDK {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "sleep", ms => new Promise(r => setTimeout(r, ms)));
     _defineProperty(this, "isMockModeOn", true);
+    _defineProperty(this, "omnichannelConfig", {
+      widgetId: "00000000-0000-0000-0000-000000000000",
+      orgId: "00000000-0000-0000-0000-000000000000",
+      orgUrl: "https://contoso.crm.dynamics.com"
+    });
   }
   async startChat() {
     await this.sleep(1000);

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js

@@ -7,4 +7,5 @@ export let NotificationScenarios;
   NotificationScenarios["InternetConnection"] = "internet connection";
   NotificationScenarios["MaxSizeError"] = "max size";
   NotificationScenarios["ChatDisconnect"] = "chat disconnect";
+  NotificationScenarios["TPC"] = "tpc blocked";
 })(NotificationScenarios || (NotificationScenarios = {}));

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.js

@@ -0,0 +1,3 @@
+export const defaultSentMessageAnchorStyles = {
+  color: "blue"
+};