@microsoft/omnichannel-chat-widget 1.8.3 → 1.8.4-main.4478bbf

package/lib/esm/components/postchatsurveypanestateful/PostChatSurveyPaneStateful.js

@@ -1,4 +1,4 @@
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { ParticipantType } from "../../common/Constants";
 import { CustomerVoiceEvents } from "./enums/CustomerVoiceEvents";
@@ -6,9 +6,10 @@ import { PostChatSurveyMode } from "./enums/PostChatSurveyMode";
 import { PostChatSurveyPane } from "@microsoft/omnichannel-chat-components";
 import { TelemetryHelper } from "../../common/telemetry/TelemetryHelper";
 import { defaultGeneralPostChatSurveyPaneStyleProps } from "./common/defaultStyleProps/defaultgeneralPostChatSurveyPaneStyleProps";
-import { findAllFocusableElement } from "../../common/utils";
+import { createTimer, findAllFocusableElement } from "../../common/utils";
 import useChatContextStore from "../../hooks/useChatContextStore";
 import isValidSurveyUrl from "./common/isValidSurveyUrl";
+let uiTimer;
 const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, compact, customerVoiceSurveyCorrelationId) {
   let showMultiLingual = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   const surveyLinkParams = new URLSearchParams({
@@ -22,6 +23,16 @@ const generateSurveyInviteLink = function (surveyInviteLink, isEmbed, locale, co
 };
 export const PostChatSurveyPaneStateful = props => {
   var _props$styleProps, _state$appStates, _props$controlProps;
+  useEffect(() => {
+    uiTimer = createTimer();
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatPaneStarted,
+      Description: "Postchat survey pane loading started.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.ConversationEnd
+      }
+    });
+  }, []);
   const [state] = useChatContextStore();
   const generalStyleProps = Object.assign({}, defaultGeneralPostChatSurveyPaneStyleProps, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
     display: state.appStates.isMinimized ? "none" : "contents"
@@ -72,7 +83,14 @@ export const PostChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
       Event: TelemetryEvent.PostChatSurveyLoaded
     });
-
+    TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.UXPostChatPaneCompleted,
+      ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
+      Description: "Postchat survey pane loading completed.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.ConversationEnd
+      }
+    });
     //Customer Voice Telemetry Events
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener("message", message => {
@@ -87,7 +105,10 @@ export const PostChatSurveyPaneStateful = props => {
       } else if (data === CustomerVoiceEvents.FormResponseSubmitted) {
         TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
           Event: TelemetryEvent.CustomerVoiceFormResponseSubmitted,
-          Description: "Customer Voice form response submitted."
+          Description: "Customer Voice form response submitted.",
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
+          }
         });
       } else if (data === CustomerVoiceEvents.FormResponseError) {
         TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
@@ -95,6 +116,9 @@ export const PostChatSurveyPaneStateful = props => {
           Description: "Customer Voice form response error.",
           ExceptionDetails: {
             message: "Customer Voice form response error."
+          },
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
           }
         });
       } else if (typeof data === "string" && data.startsWith(CustomerVoiceEvents.FormsError)) {
@@ -103,6 +127,9 @@ export const PostChatSurveyPaneStateful = props => {
           Description: "Customer Voice failed to load with forms error.",
           ExceptionDetails: {
             message: `Customer Voice forms error details: ${data}`
+          },
+          CustomProperties: {
+            ConversationStage: ConversationStage.ConversationEnd
           }
         });
       }

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

@@ -1,5 +1,5 @@
 import { HtmlAttributeNames, Regex } from "../../common/Constants";
-import { LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
+import { ConversationStage, LogLevel, TelemetryEvent } from "../../common/telemetry/TelemetryConstants";
 import React, { useEffect } from "react";
 import { createTimer, extractPreChatSurveyResponseValues, findAllFocusableElement, getStateFromCache, getWidgetCacheId, isUndefinedOrEmpty, parseAdaptiveCardPayload } from "../../common/utils";
 import { ConversationState } from "../../contexts/common/ConversationState";
@@ -19,7 +19,10 @@ export const PreChatSurveyPaneStateful = props => {
     uiTimer = createTimer();
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXPrechatPaneStart,
-      Description: "Prechat survey pane loading started."
+      Description: "Prechat survey pane loading started.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
 
@@ -70,7 +73,10 @@ export const PreChatSurveyPaneStateful = props => {
     onSubmit: async values => {
       TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
         Event: TelemetryEvent.PrechatSubmitted,
-        Description: "Prechat survey submitted."
+        Description: "Prechat survey submitted.",
+        CustomProperties: {
+          ConversationStage: ConversationStage.Initialization
+        }
       });
       dispatch({
         type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
@@ -144,7 +150,10 @@ export const PreChatSurveyPaneStateful = props => {
     TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
       Event: TelemetryEvent.UXPrechatPaneCompleted,
       ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed,
-      Description: "Prechat survey pane loading completed."
+      Description: "Prechat survey pane loading completed.",
+      CustomProperties: {
+        ConversationStage: ConversationStage.Initialization
+      }
     });
   }, []);
 

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

@@ -11,6 +11,7 @@ import { NotificationHandler } from "./webchatcontroller/notification/Notificati
 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";
@@ -20,7 +21,13 @@ 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
@@ -49,7 +56,9 @@ const createMagicCodeSuccessResponse = signin => {
   };
 };
 export const WebChatContainerStateful = props => {
-  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;
+  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);
@@ -70,9 +79,6 @@ export const WebChatContainerStateful = props => {
   // 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);
-
-  // ...existing code...
-
   const {
     BasicWebChat
   } = Components;
@@ -82,6 +88,21 @@ export const WebChatContainerStateful = props => {
     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.
@@ -383,7 +404,15 @@ export const WebChatContainerStateful = props => {
         `), /*#__PURE__*/React.createElement(Stack, {
     styles: containerStyles,
     className: "webchat__stacked-layout_container"
-  }, /*#__PURE__*/React.createElement(BasicWebChat, null)), citationPaneOpen && /*#__PURE__*/React.createElement(CitationPaneStateful, {
+  }, /*#__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,

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/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/webchatcontroller/WebChatEventSubscribers.js

@@ -0,0 +1,115 @@
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { useEffect, useState } from "react";
+import ChatWidgetEvents from "../../livechatwidget/common/ChatWidgetEvents";
+import { Constants } from "../../../common/Constants";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+import { WebChatStoreLoader } from "./WebChatStoreLoader";
+import { createTimer } from "../../../common/utils";
+import dispatchCustomEvent from "../../../common/utils/dispatchCustomEvent";
+
+/**
+ * Component to handle persistent chat history events.
+ * Uses WebChatStoreLoader instead of hooks to avoid context issues.
+ */
+const WebChatEventSubscribers = props => {
+  const [isConnected, setIsConnected] = useState(false);
+  const [storeReady, setStoreReady] = useState(false);
+  const storeWaitTimer = createTimer();
+  useEffect(() => {
+    if (!props.persistentChatHistoryEnabled) {
+      return;
+    }
+    TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+      Event: TelemetryEvent.LCWWebChatStorePollingStarted,
+      Description: "WebChat store polling started"
+    });
+
+    // Wait for WebChat store to be available
+    const waitForStore = () => {
+      if (WebChatStoreLoader.store) {
+        setStoreReady(true);
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+          Event: TelemetryEvent.LCWWebChatStoreReady,
+          Description: "WebChat store ready",
+          ElapsedTimeInMilliseconds: storeWaitTimer.milliSecondsElapsed
+        });
+        return true;
+      }
+      return false;
+    };
+
+    // Check if store is already available
+    if (!waitForStore()) {
+      // Poll for store availability
+      const storeCheckInterval = setInterval(() => {
+        if (waitForStore()) {
+          clearInterval(storeCheckInterval);
+        }
+      }, 100);
+      return () => {
+        clearInterval(storeCheckInterval);
+      };
+    }
+  }, [props.persistentChatHistoryEnabled]);
+  useEffect(() => {
+    if (!props.persistentChatHistoryEnabled || !storeReady) {
+      return;
+    }
+    const checkConnectionStatus = () => {
+      try {
+        if (WebChatStoreLoader.store) {
+          const state = WebChatStoreLoader.store.getState();
+          const connectivityStatus = state === null || state === void 0 ? void 0 : state.connectivityStatus;
+          const newIsConnected = connectivityStatus === "connected";
+          if (newIsConnected && !isConnected) {
+            setIsConnected(true);
+            TelemetryHelper.logActionEventToAllTelemetry(LogLevel.INFO, {
+              Event: TelemetryEvent.LCWWebChatConnected,
+              Description: "WebChat connection established, dispatching events"
+            });
+
+            // Dispatch events when connection is established
+            setTimeout(() => {
+              dispatchCustomEvent(ChatWidgetEvents.FETCH_PERSISTENT_CHAT_HISTORY);
+              dispatchCustomEvent(ChatWidgetEvents.ADD_ACTIVITY, {
+                activity: {
+                  from: {
+                    role: "bot"
+                  },
+                  timestamp: 0,
+                  type: "message",
+                  channelData: {
+                    tags: [Constants.persistentChatHistoryMessagePullTriggerTag]
+                  }
+                }
+              });
+            }, 2000);
+          } else if (!newIsConnected && isConnected) {
+            setIsConnected(false);
+            TelemetryHelper.logActionEventToAllTelemetry(LogLevel.WARN, {
+              Event: TelemetryEvent.LCWWebChatDisconnected,
+              Description: "WebChat connection lost"
+            });
+          }
+        }
+      } catch (error) {
+        TelemetryHelper.logActionEventToAllTelemetry(LogLevel.ERROR, {
+          Event: TelemetryEvent.LCWWebChatConnectionCheckFailed,
+          Description: "WebChat connection status check failed",
+          ExceptionDetails: error
+        });
+      }
+    };
+
+    // Check immediately
+    checkConnectionStatus();
+
+    // Set up interval to check connection status
+    const interval = setInterval(checkConnectionStatus, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isConnected, props.persistentChatHistoryEnabled, storeReady]);
+  return null;
+};
+export default WebChatEventSubscribers;

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activities/Constants.js

@@ -0,0 +1,3 @@
+export const LazyLoadActivityConstants = {
+  SCROLL_ID: ".webchat__basic-transcript__scrollable"
+};

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activities/ConversationDividerActivity.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { defaultPersistentChatHistoryProps } from "../../../../../livechatwidget/common/defaultProps/defaultPersistentChatHistoryProps";
+import { mergeStyles } from "@fluentui/react";
+const ConversationDividerActivity = props => {
+  const styleApplied = mergeStyles(defaultPersistentChatHistoryProps.dividerActivityStyle, props.dividerActivityStyle);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styleApplied
+  });
+};
+export default ConversationDividerActivity;