@microsoft/omnichannel-chat-widget 1.0.6-main.ffb4e2a → 1.1.0

package/lib/esm/common/utils.js

@@ -1,5 +1,5 @@
 var _this = this;
-import { AriaTelemetryConstants, ChatSDKError, Constants, LocaleConstants } from "./Constants";
+import { AriaTelemetryConstants, ChatSDKError, Constants, HtmlAttributeNames, LocaleConstants } from "./Constants";
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "./telemetry/TelemetryConstants";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { DataStoreManager } from "./contextDataStore/DataStoreManager";
@@ -382,4 +382,18 @@ export const checkContactIdError = e => {
     };
     BroadcastService.postMessage(contactIdNotFoundErrorEvent);
   }
+};
+export const createFileAndDownload = (fileName, blobData, mimeType) => {
+  const aElement = document.createElement("a");
+  const blob = new Blob([blobData], {
+    type: mimeType
+  });
+  const objectUrl = URL.createObjectURL(blob);
+  aElement.setAttribute(HtmlAttributeNames.href, objectUrl);
+  aElement.setAttribute(HtmlAttributeNames.download, fileName);
+  aElement.setAttribute(HtmlAttributeNames.ariaHidden, "true");
+  aElement.style.display = "none";
+  document.body.appendChild(aElement);
+  aElement.click();
+  document.body.removeChild(aElement);
 };

package/lib/esm/components/footerstateful/FooterStateful.js

@@ -16,7 +16,7 @@ import useChatSDKStore from "../../hooks/useChatSDKStore";
 export const FooterStateful = props => {
   var _footerProps$controlP3, _footerProps$controlP4;
   const [state, dispatch] = useChatContextStore();
-  // hideFooterDisplay - the purpose of this is to keep the footer always "active", 
+  // hideFooterDisplay - the purpose of this is to keep the footer always "active",
   // but hide it visually in certain states (e.g., loading state) and show in some other states (e.g. active state).
   // The reason for this approach is to make sure that state variables for audio notification work correctly after minimizing
   const {
@@ -36,7 +36,7 @@ export const FooterStateful = props => {
           Event: TelemetryEvent.DownloadTranscriptButtonClicked,
           Description: "Download Transcript button clicked."
         });
-        await downloadTranscript(chatSDK, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.renderMarkDown, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.bannerMessageOnError, downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.attachmentMessage, state);
+        await downloadTranscript(chatSDK, downloadTranscriptProps, state);
       } catch (ex) {
         TelemetryHelper.logActionEvent(LogLevel.ERROR, {
           Event: TelemetryEvent.DownloadTranscriptFailed,

package/lib/esm/components/footerstateful/downloadtranscriptstateful/DownloadTranscriptStateful.js

@@ -1,9 +1,11 @@
-import { Constants, HtmlAttributeNames, TranscriptConstants } from "../../../common/Constants";
+import { Constants, TranscriptConstants } from "../../../common/Constants";
 import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import createChatTranscript from "../../../plugins/createChatTranscript";
 import DOMPurify from "dompurify";
+import { createFileAndDownload, isNullOrUndefined } from "../../../common/utils";
 const processDisplayName = displayName => {
   // if displayname matches "teamsvisitor:<some alphanumeric string>", we replace it with "Customer"
   const displayNameRegex = ".+:.+";
@@ -154,7 +156,7 @@ const beautifyChatTranscripts = (chatTranscripts, renderMarkDown, attachmentMess
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageOnError, attachmentMessage, state) => {
+export const downloadTranscript = async (chatSDK, downloadTranscriptProps, state) => {
   var _state$domainStates, _state$domainStates2, _state$domainStates2$;
   // Need to keep existing request id for scenarios when trnascript is downloaded after endchat
   const liveChatContext = {
@@ -167,18 +169,25 @@ export const downloadTranscript = async (chatSDK, renderMarkDown, bannerMessageO
   if (typeof data === Constants.String) {
     data = JSON.parse(data);
   }
+  const {
+    bannerMessageOnError,
+    renderMarkDown,
+    attachmentMessage,
+    webChatTranscript
+  } = downloadTranscriptProps;
   if (data[Constants.ChatMessagesJson] !== null && data[Constants.ChatMessagesJson] !== undefined) {
-    const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
-    const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
-    const blob = new Blob([byteCharacters], {
-      "type": "text/html;charset=utf-8"
-    });
-    const link = document.createElement("a");
-    document.body.appendChild(link);
-    link.setAttribute(HtmlAttributeNames.download, TranscriptConstants.ChatTranscriptDownloadFile);
-    link.setAttribute(HtmlAttributeNames.href, URL.createObjectURL(blob));
-    link.setAttribute(HtmlAttributeNames.ariaHidden, "true");
-    link.click();
+    const useWebChatTranscript = isNullOrUndefined(webChatTranscript === null || webChatTranscript === void 0 ? void 0 : webChatTranscript.disabled) || (webChatTranscript === null || webChatTranscript === void 0 ? void 0 : webChatTranscript.disabled) === false;
+    if (useWebChatTranscript) {
+      const transcriptOptions = {
+        ...webChatTranscript
+      };
+      await createChatTranscript(data[Constants.ChatMessagesJson], chatSDK, false, transcriptOptions);
+    } else {
+      // Legacy Transcript
+      const chatTranscripts = window.btoa(encodeURIComponent(beautifyChatTranscripts(data[Constants.ChatMessagesJson], renderMarkDown, attachmentMessage)));
+      const byteCharacters = decodeURIComponent(window.atob(chatTranscripts));
+      createFileAndDownload(TranscriptConstants.ChatTranscriptDownloadFile, byteCharacters, "text/html;charset=utf-8");
+    }
   } else {
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.DownloadTranscriptResponseNullOrUndefined,

package/lib/esm/components/footerstateful/downloadtranscriptstateful/interfaces/IWebChatTranscriptConfig.js

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

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

@@ -0,0 +1,20 @@
+import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
+const createDownloadTranscriptProps = (downloadTranscriptProps, webChatStyles, webChatContainerProps) => {
+  const disableNewLineMarkdownSupport = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableNewLineMarkdownSupport) ?? defaultWebChatContainerStatefulProps.disableNewLineMarkdownSupport;
+  const disableMarkdownMessageFormatting = (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.disableMarkdownMessageFormatting) ?? defaultWebChatContainerStatefulProps.disableMarkdownMessageFormatting;
+  const props = {
+    ...downloadTranscriptProps,
+    webChatTranscript: {
+      ...(downloadTranscriptProps === null || downloadTranscriptProps === void 0 ? void 0 : downloadTranscriptProps.webChatTranscript),
+      disableNewLineMarkdownSupport,
+      disableMarkdownMessageFormatting,
+      transcriptBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.backgroundColor,
+      agentAvatarBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleBackground,
+      agentAvatarFontColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleTextColor,
+      customerAvatarBackgroundColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleFromUserBackground,
+      customerAvatarFontColor: webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.bubbleFromUserTextColor
+    }
+  };
+  return props;
+};
+export default createDownloadTranscriptProps;

package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -595,7 +595,15 @@ export const dummyDefaultProps = {
   downloadTranscriptProps: {
     bannerMessageOnError: "Download transcript failed.",
     renderMarkDown: undefined,
-    attachmentMessage: "The following attachment was uploaded during the conversation:"
+    attachmentMessage: "The following attachment was uploaded during the conversation:",
+    webChatTranscript: {
+      disabled: false,
+      fileName: "transcript",
+      pageTitle: "Customer Transcript",
+      attachmentMessage: "The following attachment was uploaded during the conversation: ",
+      networkOnlineMessage: "Connection restored. Please refresh the page",
+      networkOfflineMessage: "Network Error. Please make sure you are connected to the internet."
+    }
   },
   emailTranscriptPane: {
     componentOverrides: {

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

@@ -15,6 +15,7 @@ import CallingContainerStateful from "../../callingcontainerstateful/CallingCont
 import ChatButtonStateful from "../../chatbuttonstateful/ChatButtonStateful";
 import ConfirmationPaneStateful from "../../confirmationpanestateful/ConfirmationPaneStateful";
 import { ConversationState } from "../../../contexts/common/ConversationState";
+import createDownloadTranscriptProps from "../common/createDownloadTranscriptProps";
 import { DataStoreManager } from "../../../common/contextDataStore/DataStoreManager";
 import { ElementType } from "@microsoft/omnichannel-chat-components";
 import EmailTranscriptPaneStateful from "../../emailtranscriptpanestateful/EmailTranscriptPaneStateful";
@@ -49,7 +50,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, _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();
@@ -545,12 +546,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 +601,63 @@ 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
+  };
   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, {
     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, {
+    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,
+  })), !((_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.webChatContainerProps)), !((_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

@@ -17,6 +17,7 @@ import { defaultUserMessageBoxStyles } from "./webchatcontroller/middlewares/ren
 import { defaultWebChatContainerStatefulProps } from "./common/defaultProps/defaultWebChatContainerStatefulProps";
 import { setFocusOnSendBox } from "../../common/utils";
 import { useChatContextStore } from "../..";
+import { defaultSentMessageAnchorStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles";
 const broadcastChannelMessageEvent = "message";
 const postActivity = activity => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -43,7 +44,7 @@ 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 _props$adaptiveCardSt, _props$renderingMiddl, _props$renderingMiddl2, _props$renderingMiddl3, _props$renderingMiddl4, _props$adaptiveCardSt2, _props$adaptiveCardSt3, _props$adaptiveCardSt4, _props$renderingMiddl5, _props$renderingMiddl6, _props$renderingMiddl7, _props$renderingMiddl8, _props$renderingMiddl9, _props$renderingMiddl10;
   const {
     BasicWebChat
   } = Components;
@@ -146,7 +147,14 @@ export const WebChatContainerStateful = props => {
         .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, {
+        } 
+        .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: ${(props === null || props === void 0 ? void 0 : (_props$renderingMiddl9 = props.renderingMiddlewareProps) === null || _props$renderingMiddl9 === void 0 ? void 0 : (_props$renderingMiddl10 = _props$renderingMiddl9.sentMessageAnchorStyles) === null || _props$renderingMiddl10 === void 0 ? void 0 : _props$renderingMiddl10.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/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSentMessageAnchorStyles.js

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