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

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

@@ -1,18 +1,19 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { Constants, HtmlAttributeNames, HtmlClassNames } from "../../common/Constants";
 import { Stack } from "@fluentui/react";
 import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createTimer, getDeviceType, setFocusOnSendBox } from "../../common/utils";
 import { BotMagicCodeStore } from "./webchatcontroller/BotMagicCodeStore";
+import CitationPaneStateful from "../citationpanestateful/CitationPaneStateful";
 import { Components } from "botframework-webchat";
 import { LiveChatWidgetActionType } from "../../contexts/common/LiveChatWidgetActionType";
 import { NotificationHandler } from "./webchatcontroller/notification/NotificationHandler";
 import { NotificationScenarios } from "./webchatcontroller/enums/NotificationScenarios";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { WebChatActionType } from "./webchatcontroller/enums/WebChatActionType";
+import WebChatEventSubscribers from "./webchatcontroller/WebChatEventSubscribers";
 import { WebChatStoreLoader } from "./webchatcontroller/WebChatStoreLoader";
+import { createIOSOptimizedEmojiFont } from "./common/utils/fontUtils";
 import { defaultAdaptiveCardStyles } from "./common/defaultStyles/defaultAdaptiveCardStyles";
 import { defaultMiddlewareLocalizedTexts } from "./common/defaultProps/defaultMiddlewareLocalizedTexts";
 import { defaultReceivedMessageAnchorStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultReceivedMessageAnchorStyles";
@@ -20,9 +21,16 @@ import { defaultSentMessageAnchorStyles } from "./webchatcontroller/middlewares/
 import { defaultSystemMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles";
 import { defaultUserMessageBoxStyles } from "./webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles";
 import { defaultWebChatContainerStatefulProps } from "./common/defaultProps/defaultWebChatContainerStatefulProps";
+import { isPersistentChatEnabled } from "../livechatwidget/common/liveChatConfigUtils";
 import { useChatContextStore } from "../..";
+import useFacadeSDKStore from "../../hooks/useFacadeChatSDKStore";
+import usePersistentChatHistory from "./hooks/usePersistentChatHistory";
+
+// Types for better type safety
+
 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 {
@@ -48,13 +56,29 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 export 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] = useFacadeSDKStore();
+
+  // 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.webChatStyles;
+  const primaryFont = (webChatStyles === null || webChatStyles === void 0 ? void 0 : webChatStyles.primaryFont) ?? ((_defaultWebChatContai = 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 = createIOSOptimizedEmojiFont(primaryFont);
   useEffect(() => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.UXWebchatContainerCompleted
     });
   }, []);
+
+  // Citation pane state
+  const [citationPaneOpen, setCitationPaneOpen] = useState(false);
+  const [citationPaneText, setCitationPaneText] = 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 = useRef(false);
   const {
     BasicWebChat
   } = Components;
@@ -63,6 +87,68 @@ export 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) || 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) {
+    usePersistentChatHistory(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.
+  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.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, {
       display: state.appStates.isMinimized ? "none" : ""
@@ -74,7 +160,7 @@ export const WebChatContainerStateful = props => {
     ...(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.localizedTexts)
   };
   useEffect(() => {
-    var _props$webChatContain, _props$webChatContain2;
+    var _props$webChatContain2, _props$webChatContain3;
     if (getDeviceType() !== "standard" && (webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.webChatHistoryMobileAccessibilityLabel) !== undefined) {
       const chatHistoryElement = document.querySelector(`.${HtmlClassNames.webChatHistoryContainer}`);
       if (chatHistoryElement) {
@@ -92,21 +178,23 @@ export const WebChatContainerStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.WebChatLoaded
     });
-    if (((_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.disableThirdPartyCookiesAlert) !== true && !contextDataStore) {
+    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.notifyWarning(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;
         }
       }
     }
   }, []);
   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) {
@@ -198,8 +286,8 @@ export 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.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.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.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.webChatStyles) === null || _defaultWebChatContai3 === void 0 ? void 0 : _defaultWebChatContai3.bubbleTextColor)};
         }
 
         div[class="ac-textBlock"] a:link,
@@ -277,7 +365,7 @@ export 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;
@@ -304,9 +392,34 @@ export 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__*/React.createElement(Stack, {
     styles: containerStyles,
     className: "webchat__stacked-layout_container"
-  }, /*#__PURE__*/React.createElement(BasicWebChat, null)));
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "ms_lcw_webchat_root",
+    style: {
+      height: "100%",
+      width: "100%"
+    }
+  }, shouldLoadPersistentHistoryMessages && /*#__PURE__*/React.createElement(WebChatEventSubscribers, {
+    persistentChatHistoryEnabled: props === null || props === void 0 ? void 0 : (_props$persistentChat2 = props.persistentChatHistoryProps) === null || _props$persistentChat2 === void 0 ? void 0 : _props$persistentChat2.persistentChatHistoryEnabled
+  }), /*#__PURE__*/React.createElement(BasicWebChat, null))), citationPaneOpen && /*#__PURE__*/React.createElement(CitationPaneStateful, {
+    id: ((_props$citationPanePr = props.citationPaneProps) === null || _props$citationPanePr === void 0 ? void 0 : _props$citationPanePr.id) || HtmlAttributeNames.ocwCitationPaneClassName,
+    title: ((_props$citationPanePr2 = props.citationPaneProps) === null || _props$citationPanePr2 === void 0 ? void 0 : _props$citationPanePr2.title) || 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
+  }));
 };
 export default WebChatContainerStateful;

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

@@ -1,8 +1,6 @@
 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); }; }
@@ -10,28 +8,59 @@ 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); }
-import { Observable } from "rxjs/Observable";
+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); }
+import { customerUser, postAgentAttachmentActivity, postAgentMessageActivity, postAgentSuggestedActionsActivity, postBotMessageActivity, postEchoActivity, postSystemMessageActivity } from "./utils/chatAdapterUtils";
 import MockAdapter from "./mockadapter";
-import { customerUser, postAgentMessageActivity, postBotMessageActivity, postEchoActivity, postSystemMessageActivity } from "./utils/chatAdapterUtils";
+import { Observable } from "rxjs/Observable";
 export 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(() => {
-      postBotMessageActivity(_this.activityObserver, "Thank you for contacting us! How can I help you today?", undefined, 0);
-      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);
-      postBotMessageActivity(_this.activityObserver, "Okay, let me connect you with a live agent.", undefined, 100);
-      postSystemMessageActivity(_this.activityObserver, "John has joined the chat", 100);
-      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);
+    _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(() => {
+        postBotMessageActivity(_this.activityObserver, "Thank you for contacting us! How can I help you today?", undefined, 0);
+        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);
+        postBotMessageActivity(_this.activityObserver, "Okay, let me connect you with a live agent.", undefined, 100);
+        postSystemMessageActivity(_this.activityObserver, "John has joined the chat", 100);
+        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) {
+          postAgentSuggestedActionsActivity(this.activityObserver, msg.text, msg.suggestedActions, index * 100);
+        } else {
+          postBotMessageActivity(this.activityObserver, msg.text, undefined, index * 100);
+        }
+      }
+      if (msg.attachments && msg.attachments.length > 0) {
+        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/esm/components/webchatcontainerstateful/common/DesignerChatSDK.js

@@ -20,13 +20,18 @@ export 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();
+      const adapter = new DesignerChatAdapter(this.mockMessages);
+      return adapter;
     }
   }, {
     key: "getLiveChatConfig",

package/lib/esm/components/webchatcontainerstateful/common/activities/botActivity.js

@@ -0,0 +1,7 @@
+const botActivity = {
+  from: {
+    role: "bot"
+  },
+  type: "message"
+};
+export default botActivity;

package/lib/esm/components/webchatcontainerstateful/common/activities/conversationDividerActivity.js

@@ -0,0 +1,9 @@
+import { Constants } from "../../../../common/Constants";
+import botActivity from "./botActivity";
+const conversationDividerActivity = {
+  ...botActivity,
+  channelData: {
+    tags: [Constants.conversationDividerTag]
+  }
+};
+export default conversationDividerActivity;

package/lib/esm/components/webchatcontainerstateful/common/activityConverters/convertPersistentChatHistoryMessageToActivity.js

@@ -0,0 +1,90 @@
+import { Constants } from "../../../../common/Constants";
+import botActivity from "../activities/botActivity";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const convertStringValueToInt = value => {
+  if (typeof value !== "string" || value === "") {
+    return undefined;
+  }
+  let result;
+  try {
+    result = parseInt(value);
+  } catch (e) {
+    return undefined;
+  }
+  return isNaN(result) ? undefined : result;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const convertPersistentChatHistoryMessageToActivity = message => {
+  var _from$user, _from$application;
+  const {
+    additionalData,
+    attachments,
+    content,
+    created,
+    from,
+    transcriptOriginalMessageId
+  } = message;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const activity = {
+    ...botActivity,
+    channelData: {
+      tags: [Constants.persistentChatHistoryMessageTag]
+    }
+  };
+  let webchatSequenceId;
+  let timestamp;
+  if (transcriptOriginalMessageId) {
+    const id = convertStringValueToInt(transcriptOriginalMessageId); // Id used to determine the sequence of messages which is the same as the 'live' messages
+    if (id) {
+      webchatSequenceId = id;
+      timestamp = new Date(id) || created;
+      activity.channelData = {
+        ...activity.channelData,
+        "webchat:sequence-id": webchatSequenceId
+      };
+    }
+  }
+  if (additionalData !== null && additionalData !== void 0 && additionalData.tags) {
+    const {
+      tags,
+      ConversationId
+    } = additionalData;
+    if (ConversationId) {
+      activity.channelData.conversationId = ConversationId;
+    }
+    if (tags) {
+      const formattedTags = additionalData.tags.split(",");
+      activity.channelData.tags = [...activity.channelData.tags, ...formattedTags];
+    }
+  }
+  if (from !== null && from !== void 0 && (_from$user = from.user) !== null && _from$user !== void 0 && _from$user.displayName) {
+    activity.from.name = from.user.displayName;
+  }
+  if ((from === null || from === void 0 ? void 0 : (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer") {
+    activity.from = {
+      role: "user",
+      name: from.application.displayName
+    };
+  }
+  if (content) {
+    return {
+      ...activity,
+      text: content,
+      timestamp
+    };
+  }
+  if (attachments && attachments.length > 0) {
+    const fileName = attachments[0].name || "Unknown";
+    const text = `The following attachment was uploaded during the conversation: ${fileName}`;
+    return {
+      ...activity,
+      text,
+      timestamp
+    };
+  }
+  // If neither content nor attachments are present, return null to indicate no activity could be created.
+  return null;
+};
+export default convertPersistentChatHistoryMessageToActivity;

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

@@ -28,5 +28,6 @@ export const defaultMiddlewareLocalizedTexts = {
   THIRD_PARTY_COOKIES_BLOCKED_ALERT_MESSAGE: "Allow sites to save/read cookies in browser settings. Reloading page starts a new chat.",
   MIDDLEWARE_BANNER_FILE_IS_MALICIOUS: "{0} has been blocked because the file may contain a malware.",
   MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_SUCCESS: "Email will be sent after chat ends!",
-  MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later."
+  MIDDLEWARE_BANNER_FILE_EMAIL_ADDRESS_RECORDED_ERROR: "Email {0} could not be saved, try again later.",
+  PREVIOUS_MESSAGES_LOADING: "Loading previous messages..."
 };

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

@@ -1,9 +1,9 @@
-import { activityStatusMiddleware } from "../../webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
+import { createActivityStatusMiddleware } from "../../webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware";
 import { groupActivitiesMiddleware } from "../../webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware";
 import { typingIndicatorMiddleware } from "../../webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware";
 export const defaultWebChatStatefulProps = {
   // activityMiddleware: activityMiddleware, - this is implemented elsewhere and can be customized
-  activityStatusMiddleware: activityStatusMiddleware,
+  activityStatusMiddleware: createActivityStatusMiddleware(),
   // avatarMiddleware: avatarMiddleware, - this is implemented elsewhere and can be customized
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   groupActivitiesMiddleware: groupActivitiesMiddleware,

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

@@ -17,7 +17,7 @@ export 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/esm/components/webchatcontainerstateful/common/utils/chatAdapterUtils.js

@@ -97,4 +97,36 @@ export const postBotAttachmentActivity = function (activityObserver) {
       timestamp: new Date().toISOString()
     });
   }, delay);
+};
+export 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: uuidv4(),
+      from: {
+        ...agentUser
+      },
+      attachments,
+      attachmentLayout,
+      type: "message",
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
+};
+export 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: uuidv4(),
+      from: {
+        ...agentUser
+      },
+      text,
+      type: "message",
+      suggestedActions,
+      timestamp: new Date().toISOString()
+    });
+  }, delay);
 };

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

@@ -0,0 +1,21 @@
+/**
+ * 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
+ */
+export 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}`;
+};

package/lib/esm/components/webchatcontainerstateful/hooks/usePersistentChatHistory.js

@@ -0,0 +1,51 @@
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { useEffect, useRef } from "react";
+import ChatWidgetEvents from "../../livechatwidget/common/ChatWidgetEvents";
+import PersistentConversationHandler from "../../livechatwidget/common/PersistentConversationHandler";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import dispatchCustomEvent from "../../../common/utils/dispatchCustomEvent";
+import SecureEventBus from "../../../common/utils/SecureEventBus";
+const usePersistentChatHistory = (facadeChatSDK, props) => {
+  const handlerRef = useRef(null);
+  useEffect(() => {
+    if (!facadeChatSDK) {
+      return;
+    }
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXLCWPersistentChatHistoryInitialized,
+      Description: "Persistent chat history hook initialized"
+    });
+    handlerRef.current = new PersistentConversationHandler(facadeChatSDK, props);
+    const handler = async () => {
+      TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+        Event: TelemetryEvent.LCWPersistentChatHistoryFetchStarted,
+        Description: "Persistent chat history fetch started"
+      });
+      try {
+        var _handlerRef$current;
+        await ((_handlerRef$current = handlerRef.current) === null || _handlerRef$current === void 0 ? void 0 : _handlerRef$current.pullHistory());
+        dispatchCustomEvent(ChatWidgetEvents.HIDE_LOADING_BANNER);
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+          Event: TelemetryEvent.LCWPersistentChatHistoryFetchCompleted,
+          Description: "Persistent chat history fetch completed successfully"
+        });
+      } catch (error) {
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
+          Event: TelemetryEvent.LCWPersistentChatHistoryFetchFailed,
+          Description: "Persistent chat history fetch failed",
+          ExceptionDetails: error
+        });
+      }
+    };
+
+    // Subscribe to the secure event bus instead of global window events
+    const eventBus = SecureEventBus.getInstance();
+    const unsubscribe = eventBus.subscribe(ChatWidgetEvents.FETCH_PERSISTENT_CHAT_HISTORY, handler);
+    return () => {
+      var _handlerRef$current2;
+      unsubscribe();
+      (_handlerRef$current2 = handlerRef.current) === null || _handlerRef$current2 === void 0 ? void 0 : _handlerRef$current2.destroy(); // Call destroy instead of reset to properly clean up
+    };
+  }, [facadeChatSDK]);
+};
+export default usePersistentChatHistory;

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

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