@microsoft/omnichannel-chat-widget 1.8.3-main.ec1328d → 1.8.4-main.7bdb634

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

@@ -10,6 +10,7 @@ var _utils = require("../../../common/utils");
 var _renderSurveyHelpers = require("./renderSurveyHelpers");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
+var _LazyLoadActivity = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activities/LazyLoadActivity");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
@@ -44,7 +45,7 @@ const prepareEndChat = async (props, facadeChatSDK, state, dispatch, setAdapter,
       }
 
       // Use Case: If ended by Agent, stay chat in InActive state
-      let isConversationalSurveyEnabled = state.appStates.isConversationalSurveyEnabled;
+      const isConversationalSurveyEnabled = state.appStates.isConversationalSurveyEnabled;
       if (isConversationalSurveyEnabled && ((state === null || state === void 0 ? void 0 : (_state$appStates2 = state.appStates) === null || _state$appStates2 === void 0 ? void 0 : _state$appStates2.conversationEndedBy) === _Constants.ConversationEndEntity.Agent || (state === null || state === void 0 ? void 0 : (_state$appStates3 = state.appStates) === null || _state$appStates3 === void 0 ? void 0 : _state$appStates3.conversationEndedBy) === _Constants.ConversationEndEntity.Bot)) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
@@ -153,8 +154,23 @@ const endChat = async (props, facadeChatSDK, state, dispatch, setAdapter, setWeb
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
       payload: null
     });
+    let isSessionEnded = inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta = inMemoryState.appStates) === null || _inMemoryState$appSta === void 0 ? void 0 : _inMemoryState$appSta.chatDisconnectEventReceived;
+    if (!isSessionEnded) {
+      // double check by fetching the latest conversation details
+      const conversationDetails = await (0, _utils.getConversationDetailsCall)(facadeChatSDK);
+      if ((conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === _Constants.LiveWorkItemState.WrapUp || (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === _Constants.LiveWorkItemState.Closed) {
+        _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+          Event: _TelemetryConstants.TelemetryEvent.ChatDisconnectThreadEventReceived,
+          Description: "Checking conversation details upon endChat. Chat disconnected.",
+          CustomProperties: {
+            conversationDetails
+          }
+        });
+        isSessionEnded = true;
+      }
+    }
     const endChatOptionalParameters = {
-      isSessionEnded: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$appSta = inMemoryState.appStates) === null || _inMemoryState$appSta === void 0 ? void 0 : _inMemoryState$appSta.chatDisconnectEventReceived
+      isSessionEnded
     };
     try {
       _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.INFO, {
@@ -216,7 +232,12 @@ const endChat = async (props, facadeChatSDK, state, dispatch, setAdapter, setWeb
         type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_POST_CHAT_CONTEXT,
         payload: undefined
       });
-      // Always allow to close the chat for embedded mode irrespective of end chat errors
+
+      // Call direct reset to ensure LazyLoadHandler gets reset regardless of broadcast timing
+      _LazyLoadActivity.LazyLoadHandler.directReset();
+      _omnichannelChatComponents.BroadcastService.postMessage({
+        eventName: _TelemetryConstants.BroadcastEvent.PersistentConversationReset
+      });
       closeChatWidget(dispatch, setWebChatStyles, props);
       facadeChatSDK.destroy();
     }
@@ -305,6 +326,10 @@ const closeChatStateCleanUp = dispatch => {
       proactiveChatInNewWindow: false
     }
   });
+  dispatch({
+    type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CITATIONS,
+    payload: {}
+  });
 
   // Clear live chat context only if chat widget is fully closed to support transcript calls after sessionclose is called
   dispatch({

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

@@ -8,14 +8,15 @@ var _DemoChatSDK = require("../../webchatcontainerstateful/common/DemoChatSDK");
 var _DesignerChatSDK = require("../../webchatcontainerstateful/common/DesignerChatSDK");
 var _mockchatsdk = require("../../webchatcontainerstateful/common/mockchatsdk");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getMockChatSDKIfApplicable = (chatSDK, type) => {
-  if (type) {
-    switch (type.toLowerCase()) {
+const getMockChatSDKIfApplicable = (chatSDK, mockProps) => {
+  if (mockProps !== null && mockProps !== void 0 && mockProps.type) {
+    switch (mockProps.type.toLowerCase()) {
       case "demo":
         chatSDK = new _DemoChatSDK.DemoChatSDK();
         break;
       case "designer":
         chatSDK = new _DesignerChatSDK.DesignerChatSDK();
+        chatSDK.mockMessages = mockProps === null || mockProps === void 0 ? void 0 : mockProps.mockMessages;
         break;
       default:
         chatSDK = new _mockchatsdk.MockChatSDK();

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

@@ -7,6 +7,7 @@ exports.initWebChatComposer = void 0;
 var _Constants = require("../../../common/Constants");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
 var _utils = require("../../../common/utils");
+var _localizedStringsBotInitialsMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/localizedStringsBotInitialsMiddleware");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _dompurify = _interopRequireDefault(require("dompurify"));
@@ -17,6 +18,7 @@ var _WebChatStoreLoader = require("../../webchatcontainerstateful/webchatcontrol
 var _attachmentProcessingMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentProcessingMiddleware"));
 var _channelDataMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/channelDataMiddleware"));
 var _activityMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware");
+var _activityStatusMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware");
 var _attachmentMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware");
 var _attachmentUploadValidatorMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware"));
 var _avatarMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware");
@@ -44,11 +46,10 @@ var _htmlPlayerMiddleware = _interopRequireDefault(require("../../webchatcontain
 var _htmlTextMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/htmlTextMiddleware"));
 var _preProcessingMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware"));
 var _sanitizationMiddleware = _interopRequireDefault(require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware"));
-var _localizedStringsBotInitialsMiddleware = require("../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/localizedStringsBotInitialsMiddleware");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) => {
-  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _state$domainStates$l4, _state$domainStates$l5, _props$webChatContain11, _props$webChatContain12, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain13, _props$webChatContain14, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain15, _props$webChatContain16, _defaultWebChatContai, _props$webChatContain17, _props$webChatContain18, _props$webChatContain19, _props$webChatContain20, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain21, _props$webChatContain22, _defaultWebChatContai2, _props$webChatContain23, _props$webChatContain24, _defaultWebChatContai3, _props$webChatContain25, _props$webChatContain26, _props$webChatContain27, _props$webChatContain28;
+  var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _state$domainStates$l4, _state$domainStates$l5, _props$webChatContain11, _props$webChatContain12, _state$domainStates$r, _state$domainStates$r2, _props$webChatContain13, _props$webChatContain14, _state$domainStates$r3, _state$domainStates$r4, _props$webChatContain15, _props$webChatContain16, _state$domainStates$l6, _state$domainStates$l7, _props$webChatContain17, _props$webChatContain18, _props$webChatContain19, _props$webChatContain20, _state$domainStates$r5, _state$domainStates$r6, _props$webChatContain21, _props$webChatContain22, _defaultWebChatContai, _props$webChatContain23, _props$webChatContain24, _defaultWebChatContai2, _props$webChatContain25, _props$webChatContain26, _props$webChatContain27, _props$webChatContain28;
   // Add a hook to make all links open a new window
   postDomPurifyActivities();
   const localizedTexts = {
@@ -66,6 +67,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
   let webChatStore = _WebChatStoreLoader.WebChatStoreLoader.store;
   if (!webChatStore) {
     var _state$domainStates$l, _state$domainStates$l2, _state$domainStates$l3, _props$webChatContain7;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addConversationalSurveyTagsCallback = action => {
       var _inMemoryState$appSta;
       const inMemoryState = (0, _createReducer.executeReducer)(state, {
@@ -123,7 +125,7 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     };
     webChatStore = (0, _botframeworkWebchat.createStore)({},
     //initial state
-    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, _citationsMiddleware.createCitationsMiddleware, _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(), (0, _localizedStringsBotInitialsMiddleware.localizedStringsBotInitialsMiddleware)(),
+    _preProcessingMiddleware.default, _attachmentProcessingMiddleware.default, (0, _attachmentUploadValidatorMiddleware.default)((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), (0, _customEventMiddleware.default)(_omnichannelChatComponents.BroadcastService), (0, _queueOverflowHandlerMiddleware.createQueueOverflowMiddleware)(state, dispatch), (0, _channelDataMiddleware.default)(addConversationalSurveyTagsCallback), (0, _conversationEndMiddleware.default)(conversationEndCallback, startConversationalSurveyCallback, endConversationalSurveyCallback), (0, _dataMaskingMiddleware.default)((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), _messageTimestampMiddleware.createMessageTimeStampMiddleware, _messageSequenceIdOverrideMiddleware.createMessageSequenceIdOverrideMiddleware, (0, _citationsMiddleware.createCitationsMiddleware)(state, dispatch), _gifUploadMiddleware.default, _htmlPlayerMiddleware.default, (0, _htmlTextMiddleware.default)(honorsTargetInHTMLLinks), (0, _maxMessageSizeValidator.default)(localizedTexts), _sanitizationMiddleware.default, (0, _callActionMiddleware.default)(), (0, _localizedStringsBotInitialsMiddleware.localizedStringsBotInitialsMiddleware)(),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ...(((_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.storeMiddlewares) ?? []));
     _WebChatStoreLoader.WebChatStoreLoader.store = webChatStore;
@@ -168,12 +170,12 @@ const initWebChatComposer = (props, state, dispatch, facadeChatSDK, endChat) =>
     store: webChatStore,
     activityMiddleware: (_props$webChatContain11 = props.webChatContainerProps) !== null && _props$webChatContain11 !== void 0 && (_props$webChatContain12 = _props$webChatContain11.renderingMiddlewareProps) !== null && _props$webChatContain12 !== void 0 && _props$webChatContain12.disableActivityMiddleware ? undefined : (0, _activityMiddleware.createActivityMiddleware)(renderMarkdown, (_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.systemMessageStyleProps, (_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.userMessageStyleProps),
     attachmentMiddleware: (_props$webChatContain13 = props.webChatContainerProps) !== null && _props$webChatContain13 !== void 0 && (_props$webChatContain14 = _props$webChatContain13.renderingMiddlewareProps) !== null && _props$webChatContain14 !== void 0 && _props$webChatContain14.disableAttachmentMiddleware ? undefined : (0, _attachmentMiddleware.createAttachmentMiddleware)(((_state$domainStates$r3 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r3 === void 0 ? void 0 : (_state$domainStates$r4 = _state$domainStates$r3.attachmentProps) === null || _state$domainStates$r4 === void 0 ? void 0 : _state$domainStates$r4.enableInlinePlaying) ?? _defaultAttachmentProps.defaultAttachmentProps.enableInlinePlaying),
-    activityStatusMiddleware: (_props$webChatContain15 = props.webChatContainerProps) !== null && _props$webChatContain15 !== void 0 && (_props$webChatContain16 = _props$webChatContain15.renderingMiddlewareProps) !== null && _props$webChatContain16 !== void 0 && _props$webChatContain16.disableActivityStatusMiddleware ? undefined : (_defaultWebChatContai = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.activityStatusMiddleware,
+    activityStatusMiddleware: (_props$webChatContain15 = props.webChatContainerProps) !== null && _props$webChatContain15 !== void 0 && (_props$webChatContain16 = _props$webChatContain15.renderingMiddlewareProps) !== null && _props$webChatContain16 !== void 0 && _props$webChatContain16.disableActivityStatusMiddleware ? undefined : (0, _activityStatusMiddleware.createActivityStatusMiddleware)((0, _omnichannelChatSdk.getLocaleStringFromId)((_state$domainStates$l6 = state.domainStates.liveChatConfig) === null || _state$domainStates$l6 === void 0 ? void 0 : (_state$domainStates$l7 = _state$domainStates$l6.ChatWidgetLanguage) === null || _state$domainStates$l7 === void 0 ? void 0 : _state$domainStates$l7.msdyn_localeid)),
     toastMiddleware: (_props$webChatContain17 = props.webChatContainerProps) !== null && _props$webChatContain17 !== void 0 && (_props$webChatContain18 = _props$webChatContain17.renderingMiddlewareProps) !== null && _props$webChatContain18 !== void 0 && _props$webChatContain18.disableToastMiddleware ? undefined : (0, _toastMiddleware.createToastMiddleware)(props.notificationPaneProps, endChat),
     renderMarkdown,
     avatarMiddleware: (_props$webChatContain19 = props.webChatContainerProps) !== null && _props$webChatContain19 !== void 0 && (_props$webChatContain20 = _props$webChatContain19.renderingMiddlewareProps) !== null && _props$webChatContain20 !== void 0 && _props$webChatContain20.disableAvatarMiddleware ? undefined : (0, _avatarMiddleware.createAvatarMiddleware)((_state$domainStates$r5 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r5 === void 0 ? void 0 : _state$domainStates$r5.avatarStyleProps, (_state$domainStates$r6 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r6 === void 0 ? void 0 : _state$domainStates$r6.avatarTextStyleProps),
-    groupActivitiesMiddleware: (_props$webChatContain21 = props.webChatContainerProps) !== null && _props$webChatContain21 !== void 0 && (_props$webChatContain22 = _props$webChatContain21.renderingMiddlewareProps) !== null && _props$webChatContain22 !== void 0 && _props$webChatContain22.disableGroupActivitiesMiddleware ? undefined : (_defaultWebChatContai2 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.groupActivitiesMiddleware,
-    typingIndicatorMiddleware: (_props$webChatContain23 = props.webChatContainerProps) !== null && _props$webChatContain23 !== void 0 && (_props$webChatContain24 = _props$webChatContain23.renderingMiddlewareProps) !== null && _props$webChatContain24 !== void 0 && _props$webChatContain24.disableTypingIndicatorMiddleware ? undefined : (_defaultWebChatContai3 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.typingIndicatorMiddleware,
+    groupActivitiesMiddleware: (_props$webChatContain21 = props.webChatContainerProps) !== null && _props$webChatContain21 !== void 0 && (_props$webChatContain22 = _props$webChatContain21.renderingMiddlewareProps) !== null && _props$webChatContain22 !== void 0 && _props$webChatContain22.disableGroupActivitiesMiddleware ? undefined : (_defaultWebChatContai = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.groupActivitiesMiddleware,
+    typingIndicatorMiddleware: (_props$webChatContain23 = props.webChatContainerProps) !== null && _props$webChatContain23 !== void 0 && (_props$webChatContain24 = _props$webChatContain23.renderingMiddlewareProps) !== null && _props$webChatContain24 !== void 0 && _props$webChatContain24.disableTypingIndicatorMiddleware ? undefined : (_defaultWebChatContai2 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatProps) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.typingIndicatorMiddleware,
     onTelemetry: (0, _WebChatLogger.createWebChatTelemetry)(),
     cardActionMiddleware: (0, _cardActionMiddleware.createCardActionMiddleware)(((_props$webChatContain25 = props.webChatContainerProps) === null || _props$webChatContain25 === void 0 ? void 0 : _props$webChatContain25.botMagicCode) || undefined),
     sendTypingIndicator: true,

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

@@ -7,6 +7,7 @@ exports.default = void 0;
 const overridePropsOnMockIfApplicable = props => {
   var _props$mock, _props$mock2;
   if (props !== null && props !== void 0 && (_props$mock = props.mock) !== null && _props$mock !== void 0 && _props$mock.type && (props === null || props === void 0 ? void 0 : (_props$mock2 = props.mock) === null || _props$mock2 === void 0 ? void 0 : _props$mock2.type.toLowerCase()) === "designer") {
+    var _props$mock3, _props$mock3$mockMess;
     if (!props.webChatContainerProps) {
       props.webChatContainerProps = {};
     }
@@ -22,7 +23,7 @@ const overridePropsOnMockIfApplicable = props => {
     props.webChatContainerProps = {
       ...props.webChatContainerProps,
       webChatProps: {
-        disabled: true,
+        disabled: !(props !== null && props !== void 0 && (_props$mock3 = props.mock) !== null && _props$mock3 !== void 0 && (_props$mock3$mockMess = _props$mock3.mockMessages) !== null && _props$mock3$mockMess !== void 0 && _props$mock3$mockMess.length),
         ...props.webChatContainerProps.webChatProps,
         overrideLocalizedStrings: {
           TEXT_INPUT_PLACEHOLDER: "Send a message . . .",

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

@@ -105,7 +105,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
 
       // If minimized, maximize the chat, if the state is missing, consider it as minimized
       if ((state === null || state === void 0 ? void 0 : state.appStates.isMinimized) === undefined || (state === null || state === void 0 ? void 0 : (_state$appStates = state.appStates) === null || _state$appStates === void 0 ? void 0 : _state$appStates.isMinimized) === true) {
-        var _state$domainStates3, _state$domainStates3$, _state$domainStates4, _state$domainStates4$;
+        var _state$domainStates3, _state$domainStates3$, _state$domainStates4, _state$domainStates4$, _TelemetryManager$Int;
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -116,7 +116,8 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
           eventName: _TelemetryConstants.BroadcastEvent.MaximizeChat,
           payload: {
             height: state === null || state === void 0 ? void 0 : (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : (_state$domainStates3$ = _state$domainStates3.widgetSize) === null || _state$domainStates3$ === void 0 ? void 0 : _state$domainStates3$.height,
-            width: state === null || state === void 0 ? void 0 : (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : (_state$domainStates4$ = _state$domainStates4.widgetSize) === null || _state$domainStates4$ === void 0 ? void 0 : _state$domainStates4$.width
+            width: state === null || state === void 0 ? void 0 : (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : (_state$domainStates4$ = _state$domainStates4.widgetSize) === null || _state$domainStates4$ === void 0 ? void 0 : _state$domainStates4$.width,
+            runtimeId: _TelemetryManager.TelemetryManager === null || _TelemetryManager.TelemetryManager === void 0 ? void 0 : (_TelemetryManager$Int = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int === void 0 ? void 0 : _TelemetryManager$Int.lcwRuntimeId
           }
         });
       }
@@ -137,7 +138,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
    * This is because a new change to control OOH as closed event when a widget is coming from chat.
    */
   if ((state === null || state === void 0 ? void 0 : state.appStates.isMinimized) === undefined || (state === null || state === void 0 ? void 0 : (_state$appStates2 = state.appStates) === null || _state$appStates2 === void 0 ? void 0 : _state$appStates2.isMinimized) === true) {
-    var _state$domainStates5, _state$domainStates5$, _state$domainStates6, _state$domainStates6$, _TelemetryManager$Int;
+    var _state$domainStates5, _state$domainStates5$, _state$domainStates6, _state$domainStates6$, _TelemetryManager$Int2;
     dispatch({
       type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
       payload: false
@@ -148,7 +149,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
       payload: {
         height: state === null || state === void 0 ? void 0 : (_state$domainStates5 = state.domainStates) === null || _state$domainStates5 === void 0 ? void 0 : (_state$domainStates5$ = _state$domainStates5.widgetSize) === null || _state$domainStates5$ === void 0 ? void 0 : _state$domainStates5$.height,
         width: state === null || state === void 0 ? void 0 : (_state$domainStates6 = state.domainStates) === null || _state$domainStates6 === void 0 ? void 0 : (_state$domainStates6$ = _state$domainStates6.widgetSize) === null || _state$domainStates6$ === void 0 ? void 0 : _state$domainStates6$.width,
-        runtimeId: _TelemetryManager.TelemetryManager === null || _TelemetryManager.TelemetryManager === void 0 ? void 0 : (_TelemetryManager$Int = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int === void 0 ? void 0 : _TelemetryManager$Int.lcwRuntimeId
+        runtimeId: _TelemetryManager.TelemetryManager === null || _TelemetryManager.TelemetryManager === void 0 ? void 0 : (_TelemetryManager$Int2 = _TelemetryManager.TelemetryManager.InternalTelemetryData) === null || _TelemetryManager$Int2 === void 0 ? void 0 : _TelemetryManager$Int2.lcwRuntimeId
       }
     });
   }

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

@@ -1,7 +1,13 @@
 "use strict";
 
-var LiveChatWidgetMockType;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveChatWidgetMockType = void 0;
+let LiveChatWidgetMockType;
+exports.LiveChatWidgetMockType = LiveChatWidgetMockType;
 (function (LiveChatWidgetMockType) {
   LiveChatWidgetMockType["Test"] = "Test";
   LiveChatWidgetMockType["Demo"] = "Demo";
-})(LiveChatWidgetMockType || (LiveChatWidgetMockType = {}));
+  LiveChatWidgetMockType["Designer"] = "Designer";
+})(LiveChatWidgetMockType || (exports.LiveChatWidgetMockType = LiveChatWidgetMockType = {}));

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -488,7 +488,8 @@ const LiveChatWidgetStateful = props => {
           eventName: _TelemetryConstants.BroadcastEvent.MaximizeChat,
           payload: {
             height: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain = inMemoryState.domainStates) === null || _inMemoryState$domain === void 0 ? void 0 : (_inMemoryState$domain2 = _inMemoryState$domain.widgetSize) === null || _inMemoryState$domain2 === void 0 ? void 0 : _inMemoryState$domain2.height,
-            width: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain3 = inMemoryState.domainStates) === null || _inMemoryState$domain3 === void 0 ? void 0 : (_inMemoryState$domain4 = _inMemoryState$domain3.widgetSize) === null || _inMemoryState$domain4 === void 0 ? void 0 : _inMemoryState$domain4.width
+            width: inMemoryState === null || inMemoryState === void 0 ? void 0 : (_inMemoryState$domain3 = inMemoryState.domainStates) === null || _inMemoryState$domain3 === void 0 ? void 0 : (_inMemoryState$domain4 = _inMemoryState$domain3.widgetSize) === null || _inMemoryState$domain4 === void 0 ? void 0 : _inMemoryState$domain4.width,
+            lcwRuntimeId: _TelemetryManager.TelemetryManager.InternalTelemetryData.lcwRuntimeId
           }
         });
         return;
@@ -876,23 +877,46 @@ const LiveChatWidgetStateful = props => {
 
   // WebChat's Composer can only be rendered if a directLine object is defined
   return directLine && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
-            ::-webkit-scrollbar {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar {
                 width: ${scrollbarProps.width};
             }
 
-            ::-webkit-scrollbar-track {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
                 background: ${scrollbarProps.trackBackgroundColor};
             }
 
-            ::-webkit-scrollbar-thumb {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
                 background: ${scrollbarProps.thumbBackgroundColor};
                 border-radius: ${scrollbarProps.thumbBorderRadius};
             }
 
-            ::-webkit-scrollbar-thumb:hover {
+            #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb:hover {
                 background: ${scrollbarProps.thumbHoverColor};
             }
 
+            /* High Contrast mode support - optimized for all variants */
+            @media (prefers-contrast: high), (-ms-high-contrast: active), (forced-colors: active) {
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-track {
+                    background: Canvas !important;
+                    border: 1px solid CanvasText !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb {
+                    background: CanvasText !important;
+                    border: 1px solid Canvas !important;
+                    min-height: 20px !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-thumb:hover {
+                    background: Highlight !important;
+                    border: 1px solid CanvasText !important;
+                }
+
+                #oc-lcw .webchat__basic-transcript__scrollable::-webkit-scrollbar-corner {
+                    background: Canvas !important;
+                }
+            }
+
             .webchat__basic-transcript__activity-markdown-body > :last-child {
                 margin-bottom: 0px;
             }

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

@@ -10,13 +10,16 @@ var _TelemetryConstants = require("../../common/telemetry/TelemetryConstants");
 var _react2 = _interopRequireWildcard(require("react"));
 var _utils = require("../../common/utils");
 var _BotMagicCodeStore = require("./webchatcontroller/BotMagicCodeStore");
+var _CitationPaneStateful = _interopRequireDefault(require("../citationpanestateful/CitationPaneStateful"));
 var _botframeworkWebchat = require("botframework-webchat");
 var _LiveChatWidgetActionType = require("../../contexts/common/LiveChatWidgetActionType");
 var _NotificationHandler = require("./webchatcontroller/notification/NotificationHandler");
 var _NotificationScenarios = require("./webchatcontroller/enums/NotificationScenarios");
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _WebChatActionType = require("./webchatcontroller/enums/WebChatActionType");
+var _WebChatEventSubscribers = _interopRequireDefault(require("./webchatcontroller/WebChatEventSubscribers"));
 var _WebChatStoreLoader = require("./webchatcontroller/WebChatStoreLoader");
+var _fontUtils = require("./common/utils/fontUtils");
 var _defaultAdaptiveCardStyles = require("./common/defaultStyles/defaultAdaptiveCardStyles");
 var _defaultMiddlewareLocalizedTexts = require("./common/defaultProps/defaultMiddlewareLocalizedTexts");
 var _defaultReceivedMessageAnchorStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles");
@@ -24,13 +27,16 @@ var _defaultSentMessageAnchorStyles = require("./webchatcontroller/middlewares/r
 var _defaultSystemMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles");
 var _defaultUserMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles");
 var _defaultWebChatContainerStatefulProps = require("./common/defaultProps/defaultWebChatContainerStatefulProps");
+var _liveChatConfigUtils = require("../livechatwidget/common/liveChatConfigUtils");
 var _ = require("../..");
+var _useFacadeChatSDKStore = _interopRequireDefault(require("../../hooks/useFacadeChatSDKStore"));
+var _usePersistentChatHistory = _interopRequireDefault(require("./hooks/usePersistentChatHistory"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 let uiTimer;
 const broadcastChannelMessageEvent = "message";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const postActivity = activity => {
   // eslint-disable-line @typescript-eslint/no-explicit-any
   return {
@@ -56,13 +62,29 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 const WebChatContainerStateful = props => {
-  var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai, _props$webChatContain7, _props$webChatContain8, _defaultWebChatContai2, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _props$webChatContain9, _props$webChatContain10;
+  var _props$webChatContain, _defaultWebChatContai, _extendedChatConfig$L, _props$persistentChat, _extendedChatConfig$L2, _extendedChatConfig$L3, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _props$webChatContain6, _props$webChatContain7, _defaultWebChatContai2, _props$webChatContain8, _props$webChatContain9, _defaultWebChatContai3, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _props$webChatContain10, _props$webChatContain11, _webChatContainerProp24, _webChatContainerProp25, _webChatContainerProp26, _webChatContainerProp27, _props$persistentChat2, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
+  const [facadeChatSDK] = (0, _useFacadeChatSDKStore.default)();
+
+  // Create a font family that includes emoji support, based on the primary font or default
+  const webChatStyles = ((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : _props$webChatContain.webChatStyles) ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles;
+  const primaryFont = (webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.primaryFont) ?? ((_defaultWebChatContai = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.primaryFont);
+
+  // Use iOS-optimized emoji font that prioritizes system-ui for proper emoji rendering
+  const fontFamilyWithEmojis = (0, _fontUtils.createIOSOptimizedEmojiFont)(primaryFont);
   (0, _react2.useEffect)(() => {
     uiTimer = (0, _utils.createTimer)();
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.TelemetryEvent.UXWebchatContainerCompleted
     });
   }, []);
+
+  // Citation pane state
+  const [citationPaneOpen, setCitationPaneOpen] = (0, _react2.useState)(false);
+  const [citationPaneText, setCitationPaneText] = (0, _react2.useState)("");
+
+  // Guard to prevent handling multiple rapid clicks which could cause
+  // the dim layer and pane to re-render out of sync and create a flicker.
+  const citationOpeningRef = (0, _react2.useRef)(false);
   const {
     BasicWebChat
   } = _botframeworkWebchat.Components;
@@ -71,6 +93,68 @@ const WebChatContainerStateful = props => {
     webChatContainerProps,
     contextDataStore
   } = props;
+
+  // Type the chatConfig properly to avoid 'any' usage
+  const extendedChatConfig = props.chatConfig;
+  const isHistoryEnabledInConfig = extendedChatConfig === null || extendedChatConfig === void 0 ? void 0 : (_extendedChatConfig$L = extendedChatConfig.LcwFcbConfiguration) === null || _extendedChatConfig$L === void 0 ? void 0 : _extendedChatConfig$L.lcwPersistentChatHistoryEnabled;
+  const isHistoryEnabledViaProps = props === null || props === void 0 ? void 0 : (_props$persistentChat = props.persistentChatHistoryProps) === null || _props$persistentChat === void 0 ? void 0 : _props$persistentChat.persistentChatHistoryEnabled;
+  const isPersistentChatEnabledForWidget = !!(extendedChatConfig !== null && extendedChatConfig !== void 0 && (_extendedChatConfig$L2 = extendedChatConfig.LiveChatConfigAuthSettings) !== null && _extendedChatConfig$L2 !== void 0 && _extendedChatConfig$L2.msdyn_javascriptclientfunction) || (0, _liveChatConfigUtils.isPersistentChatEnabled)(extendedChatConfig === null || extendedChatConfig === void 0 ? void 0 : (_extendedChatConfig$L3 = extendedChatConfig.LiveWSAndLiveChatEngJoin) === null || _extendedChatConfig$L3 === void 0 ? void 0 : _extendedChatConfig$L3.msdyn_conversationmode);
+
+  // Persistent chat history is enabled if explicitly set via props, or if enabled in config
+  // Props take precedence over config settings
+  const isPersistentHistoryEnabled = isHistoryEnabledViaProps || isHistoryEnabledInConfig;
+
+  // Check if both persistent chat and widget support are enabled
+  const shouldLoadPersistentHistoryMessages = isPersistentHistoryEnabled && isPersistentChatEnabledForWidget;
+  if (shouldLoadPersistentHistoryMessages) {
+    (0, _usePersistentChatHistory.default)(facadeChatSDK, (props === null || props === void 0 ? void 0 : props.persistentChatHistoryProps) ?? {});
+  }
+  // Delegated click handler for citation anchors. Placed after state is
+  // available so we can prefer reading citations from app state and fall
+  // back to the legacy window map for backward-compatibility in tests.
+  (0, _react2.useEffect)(() => {
+    const clickHandler = ev => {
+      try {
+        if (citationOpeningRef.current) {
+          return;
+        }
+        const target = ev.target;
+        // Only consider anchors whose href starts with the citation scheme
+        const anchor = target.closest && target.closest("a[href^=\"cite:\"]");
+        if (anchor) {
+          ev.preventDefault();
+          citationOpeningRef.current = true;
+          // Rely only on the href to identify the citation key
+          let text = "";
+          try {
+            var _state$domainStates;
+            const cid = anchor.getAttribute("href");
+            // Prefer state-based citations injected by middleware
+            if (state !== null && state !== void 0 && (_state$domainStates = state.domainStates) !== null && _state$domainStates !== void 0 && _state$domainStates.citations && cid) {
+              text = state.domainStates.citations[cid] ?? "";
+            }
+            // If state lookup failed, fall back to the anchor's title or innerText
+            if (!text) {
+              text = anchor.getAttribute("title") || anchor.innerText || "";
+            }
+          } catch (e) {
+            // ignore
+          }
+          setCitationPaneOpen(true);
+          setCitationPaneText(text);
+
+          // Simple debounce - reset guard after a short delay
+          setTimeout(() => {
+            citationOpeningRef.current = false;
+          }, 100);
+        }
+      } catch (e) {
+        citationOpeningRef.current = false;
+      }
+    };
+    document.addEventListener("click", clickHandler);
+    return () => document.removeEventListener("click", clickHandler);
+  }, [state]);
   const containerStyles = {
     root: Object.assign({}, _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, {
       display: state.appStates.isMinimized ? "none" : ""
@@ -82,7 +166,7 @@ const WebChatContainerStateful = props => {
     ...(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.localizedTexts)
   };
   (0, _react2.useEffect)(() => {
-    var _props$webChatContain, _props$webChatContain2;
+    var _props$webChatContain2, _props$webChatContain3;
     if ((0, _utils.getDeviceType)() !== "standard" && (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatHistoryMobileAccessibilityLabel) !== undefined) {
       const chatHistoryElement = document.querySelector(`.${_Constants.HtmlClassNames.webChatHistoryContainer}`);
       if (chatHistoryElement) {
@@ -100,21 +184,23 @@ const WebChatContainerStateful = props => {
     _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
       Event: _TelemetryConstants.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) {
+    if (((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : (_props$webChatContain3 = _props$webChatContain2.renderingMiddlewareProps) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.disableThirdPartyCookiesAlert) !== true && !contextDataStore) {
       try {
         localStorage;
         sessionStorage;
       } catch (error) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!window.TPCWarningShown) {
           _NotificationHandler.NotificationHandler.notifyWarning(_NotificationScenarios.NotificationScenarios.TPC, (localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE) ?? "");
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           window.TPCWarningShown = true;
         }
       }
     }
   }, []);
   (0, _react2.useEffect)(() => {
-    var _props$webChatContain3, _props$webChatContain4;
-    if (!((_props$webChatContain3 = props.webChatContainerProps) !== null && _props$webChatContain3 !== void 0 && (_props$webChatContain4 = _props$webChatContain3.botMagicCode) !== null && _props$webChatContain4 !== void 0 && _props$webChatContain4.disabled)) {
+    var _props$webChatContain4, _props$webChatContain5;
+    if (!((_props$webChatContain4 = props.webChatContainerProps) !== null && _props$webChatContain4 !== void 0 && (_props$webChatContain5 = _props$webChatContain4.botMagicCode) !== null && _props$webChatContain5 !== void 0 && _props$webChatContain5.disabled)) {
       return;
     }
     if (!window.BroadcastChannel) {
@@ -206,8 +292,8 @@ const WebChatContainerStateful = props => {
         }
 
         .ms_lcw_webchat_received_message>div.webchat__stacked-layout>div.webchat__stacked-layout__main>div.webchat__stacked-layout__content>div.webchat__stacked-layout__message-row>[class^=webchat]:not(.webchat__bubble--from-user)>.webchat__bubble__content {
-            background-color: ${((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 ? void 0 : (_props$webChatContain6 = _props$webChatContain5.webChatStyles) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.bubbleBackground) ?? ((_defaultWebChatContai = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai === void 0 ? void 0 : _defaultWebChatContai.bubbleBackground)};
-            color:${((_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : (_props$webChatContain8 = _props$webChatContain7.webChatStyles) === null || _props$webChatContain8 === void 0 ? void 0 : _props$webChatContain8.bubbleTextColor) ?? ((_defaultWebChatContai2 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleTextColor)};
+            background-color: ${((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : (_props$webChatContain7 = _props$webChatContain6.webChatStyles) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.bubbleBackground) ?? ((_defaultWebChatContai2 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai2 === void 0 ? void 0 : _defaultWebChatContai2.bubbleBackground)};
+            color:${((_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : (_props$webChatContain9 = _props$webChatContain8.webChatStyles) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.bubbleTextColor) ?? ((_defaultWebChatContai3 = _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.bubbleTextColor)};
         }
 
         div[class="ac-textBlock"] a:link,
@@ -285,7 +371,7 @@ const WebChatContainerStateful = props => {
         }
 
         .webchat__stacked-layout_container>div {
-            background: ${(props === null || props === void 0 ? void 0 : (_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : (_props$webChatContain10 = _props$webChatContain9.containerStyles) === null || _props$webChatContain10 === void 0 ? void 0 : _props$webChatContain10.background) ?? ""}
+            background: ${(props === null || props === void 0 ? void 0 : (_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : (_props$webChatContain11 = _props$webChatContain10.containerStyles) === null || _props$webChatContain11 === void 0 ? void 0 : _props$webChatContain11.background) ?? ""}
         }
         .webchat__toast_text {
             display: flex;
@@ -312,10 +398,35 @@ const WebChatContainerStateful = props => {
 			height: 100% !important;
 		}
 
+        .webchat__auto-resize-textarea__textarea.webchat__send-box-text-box__html-text-area {
+            font-family: ${fontFamilyWithEmojis} !important;
+        }
+
+        /* Suggested actions carousel previous/next navigation focus */
+        .webchat__suggested-actions .webchat__suggested-actions__carousel .react-film__flipper:focus-visible .react-film__flipper__body {
+            outline: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp24 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp24 === void 0 ? void 0 : _webChatContainerProp24.suggestedActionKeyboardFocusIndicatorBorderStyle) ?? "dashed"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp25 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp25 === void 0 ? void 0 : _webChatContainerProp25.suggestedActionKeyboardFocusIndicatorBorderWidth) ?? "1px"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp26 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp26 === void 0 ? void 0 : _webChatContainerProp26.suggestedActionKeyboardFocusIndicatorBorderColor) ?? "#605E5C"} !important;
+            outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp27 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp27 === void 0 ? void 0 : _webChatContainerProp27.suggestedActionKeyboardFocusIndicatorInset) ?? "2px"} !important;
+
         `), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     styles: containerStyles,
     className: "webchat__stacked-layout_container"
-  }, /*#__PURE__*/_react2.default.createElement(BasicWebChat, null)));
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    id: "ms_lcw_webchat_root",
+    style: {
+      height: "100%",
+      width: "100%"
+    }
+  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/_react2.default.createElement(_WebChatEventSubscribers.default, {
+    persistentChatHistoryEnabled: props === null || props === void 0 ? void 0 : (_props$persistentChat2 = props.persistentChatHistoryProps) === null || _props$persistentChat2 === void 0 ? void 0 : _props$persistentChat2.persistentChatHistoryEnabled
+  }), /*#__PURE__*/_react2.default.createElement(BasicWebChat, null))), citationPaneOpen && /*#__PURE__*/_react2.default.createElement(_CitationPaneStateful.default, {
+    id: ((_props$citationPanePr = props.citationPaneProps) === null || _props$citationPanePr === void 0 ? void 0 : _props$citationPanePr.id) || _Constants.HtmlAttributeNames.ocwCitationPaneClassName,
+    title: ((_props$citationPanePr2 = props.citationPaneProps) === null || _props$citationPanePr2 === void 0 ? void 0 : _props$citationPanePr2.title) || _Constants.HtmlAttributeNames.ocwCitationPaneTitle,
+    contentHtml: citationPaneText,
+    onClose: () => setCitationPaneOpen(false),
+    componentOverrides: (_props$citationPanePr3 = props.citationPaneProps) === null || _props$citationPanePr3 === void 0 ? void 0 : _props$citationPanePr3.componentOverrides,
+    controlProps: (_props$citationPanePr4 = props.citationPaneProps) === null || _props$citationPanePr4 === void 0 ? void 0 : _props$citationPanePr4.controlProps,
+    styleProps: (_props$citationPanePr5 = props.citationPaneProps) === null || _props$citationPanePr5 === void 0 ? void 0 : _props$citationPanePr5.styleProps
+  }));
 };
 exports.WebChatContainerStateful = WebChatContainerStateful;
 var _default = WebChatContainerStateful;