@microsoft/omnichannel-chat-widget 1.8.2-main.fc93d3d → 1.8.3-main.1381896

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

@@ -14,6 +14,7 @@ var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
 var _endChat = require("../common/endChat");
 var _startChat = require("../common/startChat");
 var _utils = require("../../../common/utils");
+var _customEventHandler = require("../common/customEventHandler");
 var _defaultClientDataStoreProvider = require("../../../common/storage/default/defaultClientDataStoreProvider");
 var _reconnectChatHelper = require("../common/reconnectChatHelper");
 var _componentController = require("../../../controller/componentController");
@@ -421,7 +422,7 @@ const LiveChatWidgetStateful = props => {
     _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.StartChat).subscribe(msg => {
       var _msg$payload5, _msg$payload6, _msg$payload7, _msg$payload9, _inMemoryState$appSta2, _inMemoryState$appSta3, _inMemoryState$appSta4;
       // If chat is out of operating hours chat widget sets the conversation state to OutOfOffice.
-      if (state.appStates.outsideOperatingHours === true) {
+      if (state.appStates.outsideOperatingHours && state.appStates.conversationState !== _ConversationState.ConversationState.Active) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_MINIMIZED,
           payload: false
@@ -487,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;
@@ -588,6 +590,9 @@ const LiveChatWidgetStateful = props => {
       }
     });
 
+    // subscribe custom event
+    (0, _customEventHandler.subscribeToSendCustomEvent)(_omnichannelChatComponents.BroadcastService, facadeChatSDK, _customEventHandler.customEventCallback);
+
     // Check for TPC and log in telemetry if blocked
     (0, _defaultClientDataStoreProvider.isCookieAllowed)();
     return () => {
@@ -723,11 +728,7 @@ const LiveChatWidgetStateful = props => {
       (0, _endChat.endChat)(props, facadeChatSDK, state, dispatch, setAdapter, setWebChatStyles, adapter, false, false, true);
       return;
     }
-    const inMemoryState = (0, _createReducer.executeReducer)(state, {
-      type: _LiveChatWidgetActionType.LiveChatWidgetActionType.GET_IN_MEMORY_STATE,
-      payload: null
-    });
-    let isConversationalSurveyEnabled = state.appStates.isConversationalSurveyEnabled;
+    const isConversationalSurveyEnabled = state.appStates.isConversationalSurveyEnabled;
 
     // In conversational survey, we need to check post chat survey logics before we set ConversationState to InActive
     // Hence setting ConversationState to InActive will be done later in the post chat flows
@@ -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;
             }
@@ -900,11 +924,21 @@ const LiveChatWidgetStateful = props => {
             .webchat__basic-transcript__activity-markdown-body > :first-child {
                 margin-top: 0px;
             }
+                
             .webchat__basic-transcript__activity-markdown-body img.webchat__render-markdown__external-link-icon {
                 background-image : url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjMjEyMTIxIiAvPjwvc3ZnPg==) !important;
                 height: .75em;
                 margin-left: .25em;
             }
+
+            .webchat__link-definitions__header-text {
+                color: ${bubbleBackground}
+            }
+            
+            .webchat__link-definitions__header-chevron {
+                color: ${bubbleBackground}
+            }
+
             ${(sendBoxTextArea === null || sendBoxTextArea === void 0 ? void 0 : sendBoxTextArea.minHeight) && `
             .webchat__auto-resize-textarea.webchat__send-box-text-box__text-area {
                 min-height: ${sendBoxTextArea === null || sendBoxTextArea === void 0 ? void 0 : sendBoxTextArea.minHeight} !important;

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

@@ -10,6 +10,7 @@ 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");
@@ -17,6 +18,7 @@ var _NotificationScenarios = require("./webchatcontroller/enums/NotificationScen
 var _TelemetryHelper = require("../../common/telemetry/TelemetryHelper");
 var _WebChatActionType = require("./webchatcontroller/enums/WebChatActionType");
 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");
@@ -25,12 +27,12 @@ var _defaultSystemMessageBoxStyles = require("./webchatcontroller/middlewares/re
 var _defaultUserMessageBoxStyles = require("./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles");
 var _defaultWebChatContainerStatefulProps = require("./common/defaultProps/defaultWebChatContainerStatefulProps");
 var _ = require("../..");
+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 +58,30 @@ 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, _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$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
+  // 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);
+
+  // ...existing code...
+
   const {
     BasicWebChat
   } = _botframeworkWebchat.Components;
@@ -71,6 +90,53 @@ const WebChatContainerStateful = props => {
     webChatContainerProps,
     contextDataStore
   } = props;
+
+  // 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 +148,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 +166,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) {
@@ -186,7 +254,7 @@ const WebChatContainerStateful = props => {
         }
 
         .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card .ac-textBlock {
-            color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
+            color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color};
         }
 
         .webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__bubble--from-user {
@@ -206,8 +274,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 +353,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;
@@ -295,11 +363,44 @@ const WebChatContainerStateful = props => {
             overflow-y: unset;
             }
 
-        
+        /* Custom styles for carousel hero cards */
+		ul.webchat__carousel-filmstrip__attachments .ac-image {
+			width: 200px !important;
+			height: 150px !important;
+			object-fit: cover !important;
+			border-radius: 8px !important;
+			border: 1px solid #e0e0e0 !important;
+		}
+
+		.webchat__carousel-filmstrip-attachment .webchat__bubble {
+			height: 100% !important;
+		}
+
+		.webchat__carousel-filmstrip-attachment .webchat__bubble #ms_lcw_webchat_adaptive_card {
+			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(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;

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

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesignerChatAdapter = void 0;
-var _Observable = require("rxjs/Observable");
-var _mockadapter = _interopRequireDefault(require("./mockadapter"));
 var _chatAdapterUtils = require("./utils/chatAdapterUtils");
+var _mockadapter = _interopRequireDefault(require("./mockadapter"));
+var _Observable = require("rxjs/Observable");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -20,23 +18,56 @@ function _possibleConstructorReturn(self, call) { if (call && (typeof call === "
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 let DesignerChatAdapter = /*#__PURE__*/function (_MockAdapter) {
   _inherits(DesignerChatAdapter, _MockAdapter);
   var _super = _createSuper(DesignerChatAdapter);
-  function DesignerChatAdapter() {
+  function DesignerChatAdapter(messages) {
     var _this;
     _classCallCheck(this, DesignerChatAdapter);
     _this = _super.call(this);
-    setTimeout(() => {
-      (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "Thank you for contacting us! How can I help you today?", undefined, 0);
-      _this.postUserActivity("I need to change my address.", 0);
-      (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "Okay, let me connect you with a live agent.", undefined, 100);
-      (0, _chatAdapterUtils.postSystemMessageActivity)(_this.activityObserver, "John has joined the chat", 100);
-      (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "I'd be happy to help you update your account.", undefined, 100);
-    }, 1000);
+    _defineProperty(_assertThisInitialized(_this), "messages", void 0);
+    _this.messages = messages;
+    if (_this.messages) {
+      if (_this.messages.length > 0) {
+        setTimeout(() => {
+          var _this$messages;
+          (_this$messages = _this.messages) === null || _this$messages === void 0 ? void 0 : _this$messages.forEach((msg, index) => {
+            _this.processMessage(msg, index);
+          });
+        }, 1000); // Initial 1 second delay to ensure activityObserver is ready
+      }
+    } else {
+      // Default hardcoded flow
+      setTimeout(() => {
+        (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "Thank you for contacting us! How can I help you today?", undefined, 0);
+        (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "Please accept terms and conditions to proceed. Visit the link for terms and conditions <a href=\"\">here</a>.", undefined, 0);
+        _this.postUserActivity("I need to change my address.", 0);
+        (0, _chatAdapterUtils.postBotMessageActivity)(_this.activityObserver, "Okay, let me connect you with a live agent.", undefined, 100);
+        (0, _chatAdapterUtils.postSystemMessageActivity)(_this.activityObserver, "John has joined the chat", 100);
+        (0, _chatAdapterUtils.postAgentMessageActivity)(_this.activityObserver, "I'd be happy to help you update your account.", undefined, 100);
+        _this.postUserActivity("I have trouble visiting the signin page <a href=\"\">signin</a>.", 0);
+      }, 1000);
+    }
     return _this;
   }
   _createClass(DesignerChatAdapter, [{
+    key: "processMessage",
+    value: function processMessage(msg, index) {
+      if (msg.text) {
+        if (msg.suggestedActions) {
+          (0, _chatAdapterUtils.postAgentSuggestedActionsActivity)(this.activityObserver, msg.text, msg.suggestedActions, index * 100);
+        } else {
+          (0, _chatAdapterUtils.postBotMessageActivity)(this.activityObserver, msg.text, undefined, index * 100);
+        }
+      }
+      if (msg.attachments && msg.attachments.length > 0) {
+        (0, _chatAdapterUtils.postAgentAttachmentActivity)(this.activityObserver, msg.attachments, index * 100, msg.attachmentLayout);
+      }
+    }
+  }, {
     key: "postUserActivity",
     value: function postUserActivity(text) {
       let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;

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

@@ -26,13 +26,18 @@ let DesignerChatSDK = /*#__PURE__*/function (_MockChatSDK) {
     var _this;
     _classCallCheck(this, DesignerChatSDK);
     _this = _super.call(this);
+    /**
+     * Create a chat adapter for the designer. Uses this.mockMessages if set.
+     */
+    _defineProperty(_assertThisInitialized(_this), "mockMessages", void 0);
     _defineProperty(_assertThisInitialized(_this), "localeId", _this.getLiveChatConfig().ChatWidgetLanguage.msdyn_localeid);
     return _this;
   }
   _createClass(DesignerChatSDK, [{
     key: "createChatAdapter",
     value: function createChatAdapter() {
-      return new _DesignerChatAdapter.DesignerChatAdapter();
+      const adapter = new _DesignerChatAdapter.DesignerChatAdapter(this.mockMessages);
+      return adapter;
     }
   }, {
     key: "getLiveChatConfig",

package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/defaultWebChatStyles.js

@@ -23,7 +23,7 @@ const defaultWebChatStyles = {
   bubbleTextColor: "White",
   hideSendBox: false,
   hideUploadButton: true,
-  primaryFont: "Segoe UI, Arial, sans-serif",
+  primaryFont: "Segoe UI, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\"",
   rootHeight: "100%",
   rootWidth: "100%",
   sendBoxTextWrap: true,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.postSystemMessageActivity = exports.postEchoActivity = exports.postBotTypingActivity = exports.postBotMessageActivity = exports.postBotAttachmentActivity = exports.customerUser = exports.botUser = void 0;
+exports.postSystemMessageActivity = exports.postEchoActivity = exports.postBotTypingActivity = exports.postBotMessageActivity = exports.postBotAttachmentActivity = exports.postAgentSuggestedActionsActivity = exports.postAgentMessageActivity = exports.postAgentAttachmentActivity = exports.customerUser = exports.botUser = exports.agentUser = void 0;
 var _omnichannelChatSdk = require("@microsoft/omnichannel-chat-sdk");
 const customerUser = {
   id: "usedId",
@@ -16,9 +16,15 @@ const botUser = {
   name: "Bot",
   role: "bot"
 };
+exports.botUser = botUser;
+const agentUser = {
+  id: "AgentId",
+  name: "John",
+  role: "bot"
+};
 
 // WebChat expects an "echo" activity to confirm the message has been sent successfully
-exports.botUser = botUser;
+exports.agentUser = agentUser;
 const postEchoActivity = function (activityObserver, activity, user) {
   let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
   const echoActivity = {
@@ -54,6 +60,25 @@ const postBotMessageActivity = function (activityObserver, text) {
   }, delay);
 };
 exports.postBotMessageActivity = postBotMessageActivity;
+const postAgentMessageActivity = function (activityObserver, text) {
+  let tags = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
+  let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...agentUser
+      },
+      text,
+      type: "message",
+      channelData: {
+        tags
+      },
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+exports.postAgentMessageActivity = postAgentMessageActivity;
 const postSystemMessageActivity = function (activityObserver, text) {
   let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
   postBotMessageActivity(activityObserver, text, "system", delay);
@@ -87,4 +112,38 @@ const postBotAttachmentActivity = function (activityObserver) {
     });
   }, delay);
 };
-exports.postBotAttachmentActivity = postBotAttachmentActivity;
+exports.postBotAttachmentActivity = postBotAttachmentActivity;
+const postAgentAttachmentActivity = function (activityObserver) {
+  let attachments = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;
+  let attachmentLayout = arguments.length > 3 ? arguments[3] : undefined;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...agentUser
+      },
+      attachments,
+      attachmentLayout,
+      type: "message",
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+exports.postAgentAttachmentActivity = postAgentAttachmentActivity;
+const postAgentSuggestedActionsActivity = function (activityObserver, text, suggestedActions) {
+  let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  setTimeout(() => {
+    activityObserver === null || activityObserver === void 0 ? void 0 : activityObserver.next({
+      id: (0, _omnichannelChatSdk.uuidv4)(),
+      from: {
+        ...agentUser
+      },
+      text,
+      type: "message",
+      suggestedActions,
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+exports.postAgentSuggestedActionsActivity = postAgentSuggestedActionsActivity;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createIOSOptimizedEmojiFont = void 0;
+/**
+ * Utility functions for font handling and emoji support
+ */
+
+/**
+ * Creates a font family optimized for iOS emoji support
+ * Uses system-ui as the primary font for better emoji rendering on iOS
+ * @param primaryFont - The base font family string (optional, used as fallback)
+ * @returns Font family string optimized for iOS emoji support
+ */
+const createIOSOptimizedEmojiFont = primaryFont => {
+  // For iOS emoji support, system-ui should be first
+  const baseFont = "system-ui";
+  const emojiSupport = "\"Apple Color Emoji\", \"Segoe UI Emoji\"";
+  if (!primaryFont || primaryFont.includes("system-ui") || primaryFont.includes("Apple Color Emoji")) {
+    return `${baseFont}, ${emojiSupport}`;
+  }
+
+  // Add configured font as fallback after emoji fonts
+  return `${baseFont}, ${emojiSupport}, ${primaryFont}`;
+};
+exports.createIOSOptimizedEmojiFont = createIOSOptimizedEmojiFont;

package/lib/cjs/components/webchatcontainerstateful/interfaces/ICitation.js

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

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultAvatarTextStyles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultAvatarTextStyles = void 0;
 const defaultAvatarTextStyles = {
   margin: "0",
-  fontFamily: "\"Segoe UI\", Arial, sans-serif",
+  fontFamily: "'Segoe UI', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', Arial, sans-serif",
   fontWeight: 600,
   fontSize: "13px",
   lineHeight: "18px",

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageStyles.js

@@ -11,7 +11,7 @@ const defaultSystemMessageStyles = {
   fontSize: "12px",
   borderRadius: 0,
   minHeight: "auto",
-  fontFamily: "Segoe UI",
+  fontFamily: "'Segoe UI', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', Arial, sans-serif",
   lineHeight: "16px",
   padding: "0px 10px 0 10px"
 };