@microsoft/omnichannel-chat-widget 1.8.3 → 1.8.4-main.424a580

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

@@ -0,0 +1,1060 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _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); }
+/**
+ * LazyLoadActivity Component
+ * 
+ * This component implements a sophisticated lazy loading system for chat history in the webchat widget.
+ * It uses an IntersectionObserver to detect when the user scrolls near the top of the chat container
+ * and then triggers the loading of previous chat messages.
+ * 
+ * Key Features:
+ * - Intersection Observer based detection for optimal performance
+ * - Reliable scroll management with retry mechanisms
+ * - Immediate user feedback even during initialization delays
+ * - Handles edge cases like minimize/maximize widget scenarios
+ * - Memory leak prevention with proper cleanup
+ * 
+ * Architecture:
+ * - LazyLoadHandler: Static class managing all lazy load logic
+ * - LazyLoadActivity: React component providing the UI and lifecycle integration for lazy loading
+ * 
+ * Flow:
+ * 1. Component renders a trigger element at the top of chat history
+ * 2. IntersectionObserver watches when this element becomes visible
+ * 3. When visible, dispatches event to fetch more chat history
+ * 4. Performs controlled scroll to maintain user position
+ * 5. Resets observer for next lazy load cycle
+ */
+
+import { LogLevel, TelemetryEvent } from "../../../../../../common/telemetry/TelemetryConstants";
+import React, { useEffect, useState } from "react";
+import { BroadcastEvent } from "../../../../../../common/telemetry/TelemetryConstants";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
+import ChatWidgetEvents from "../../../../../livechatwidget/common/ChatWidgetEvents";
+import { LazyLoadActivityConstants } from "./Constants";
+import LoadInlineBannerActivity from "./LoadInlineBannerActivity";
+import { TelemetryHelper } from "../../../../../../common/telemetry/TelemetryHelper";
+import { createTimer } from "../../../../../../common/utils";
+import dispatchCustomEvent from "../../../../../../common/utils/dispatchCustomEvent";
+import SecureEventBus from "../../../../../../common/utils/SecureEventBus";
+
+/*
+ * Interface defining the state of a scroll operation
+ * Used to track and verify scroll actions for reliability
+ */
+/**
+ * LazyLoadHandler - Static class managing all lazy loading functionality
+ * 
+ * This class uses a singleton pattern with static methods to ensure consistent
+ * state management across component re-renders and widget lifecycle events.
+ * 
+ * State Management:
+ * - initialized: Tracks if the IntersectionObserver has been set up
+ * - paused: Temporarily disables lazy loading (during initialization/loading)
+ * - pendingScrollAction: Prevents overlapping scroll operations
+ * - isReady: Indicates when the system is fully ready for user interactions
+ * - initializationQueue: Stores user actions while system initializes
+ * 
+ * Reliability Features:
+ * - Retry mechanisms with exponential backoff
+ * - Scroll verification with tolerance checking
+ * - Multiple container detection strategies
+ * - Immediate user feedback during delays
+ * - Proper memory management and cleanup
+ */
+let LazyLoadHandler = /*#__PURE__*/function () {
+  function LazyLoadHandler() {
+    _classCallCheck(this, LazyLoadHandler);
+  }
+  _createClass(LazyLoadHandler, null, [{
+    key: "logLifecycleEvent",
+    value:
+    // DOM element identifiers
+    // Main widget container
+    // Intersection trigger element
+
+    // Observer and initialization state
+    // Observer setup completion flag
+    // Temporary disable flag
+    // The intersection observer instance
+
+    // Scroll operation state
+    // Current scroll operation tracking
+    // Prevents concurrent scroll operations
+
+    // Timeout and queue management
+    // Tracks all setTimeout IDs for cleanup
+
+    // Flag to track if a reset is needed when component mounts
+
+    // Telemetry tracking - lifecycle events only
+
+    // Simple lifecycle logging without complex state tracking
+    function logLifecycleEvent(event, description, elapsedTime) {
+      try {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: event,
+          Description: description,
+          ...(elapsedTime && {
+            ElapsedTimeInMilliseconds: elapsedTime
+          })
+        });
+      } catch (error) {
+        // Silent fail - don't break functionality for telemetry issues
+      }
+    }
+
+    // Broadcast event subscription for marking reset needed when chat is closed/reopened
+  }, {
+    key: "setHasMoreHistoryAvailable",
+    value:
+    // Tracks if more history can be loaded
+
+    // Debug method to track what's changing hasMoreHistoryAvailable
+    function setHasMoreHistoryAvailable(value) {
+      LazyLoadHandler.hasMoreHistoryAvailable = value;
+    }
+
+    /**
+     * Direct reset method that can be called externally
+     * This bypasses the broadcast system for more reliable resets
+     */
+  }, {
+    key: "directReset",
+    value: function directReset() {
+      LazyLoadHandler.resetPending = true;
+      LazyLoadHandler.setHasMoreHistoryAvailable(true);
+      LazyLoadHandler.unmount();
+    }
+
+    /**
+     * Main initialization method for the lazy loading system
+     * 
+     * This method sets up the IntersectionObserver that watches for when the trigger
+     * element becomes visible, indicating the user has scrolled near the top.
+     * 
+     * Process:
+     * 1. Prevents duplicate initialization
+     * 2. Sets up intersection callback to handle visibility events
+     * 3. Finds appropriate scroll container with fallback strategies
+     * 4. Configures observer with optimal settings for chat history loading
+     * 5. Waits for target element availability with exponential backoff
+     * 
+     * Observer Configuration:
+     * - root: The scrollable container (webchat or fallback)
+     * - rootMargin: 20px top margin to trigger slightly before element is visible
+     * - threshold: 0.05 (5%) visibility required to trigger
+     */
+  }, {
+    key: "useLazyLoadObserver",
+    value: function useLazyLoadObserver() {
+      // Auto-correct stale state: if hasMoreHistoryAvailable is false but we're trying to initialize, reset it
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        LazyLoadHandler.setHasMoreHistoryAvailable(true);
+      }
+
+      // Prevent duplicate initialization
+      if (LazyLoadHandler.initialized) {
+        return;
+      }
+
+      // Start initialization timing
+      LazyLoadHandler.initTimer = createTimer();
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadInitializationStarted, "LazyLoad observer initialization started");
+
+      // Reset readiness during initialization to handle user interactions
+      LazyLoadHandler.isReady = false;
+
+      /**
+       * Intersection Observer Callback
+       * 
+       * Triggered when the target element's visibility changes.
+       * Guards against triggering during paused states or pending operations.
+       * 
+       * @param entries - Array of intersection observer entries
+       */
+      const callback = entries => {
+        // Guard clauses: Don't trigger if paused, already processing, or no more history available
+        if (LazyLoadHandler.paused || LazyLoadHandler.pendingScrollAction || !LazyLoadHandler.hasMoreHistoryAvailable) {
+          return;
+        }
+        entries.forEach(entry => {
+          // Check if element is intersecting with any visibility
+          if (entry.isIntersecting && entry.intersectionRatio > 0) {
+            // Double-check history availability at trigger time
+            if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+              return;
+            }
+            LazyLoadHandler.handleLazyLoadTrigger();
+          }
+        });
+      };
+
+      /**
+       * Observer Setup Function
+       * 
+       * Handles the complex process of finding the right container and
+       * setting up the intersection observer with proper configuration.
+       */
+      const setupObserver = () => {
+        // Find the scroll container using multiple strategies
+        const {
+          container: scrollContainer
+        } = LazyLoadHandler.findScrollContainer();
+        if (!scrollContainer) {
+          // Schedule retry with faster timeout for better responsiveness
+          const timeoutId = window.setTimeout(() => {
+            LazyLoadHandler.retryTimeouts.delete(timeoutId);
+            setupObserver();
+          }, 100); // Reduced from 200ms to 100ms for faster container detection
+          LazyLoadHandler.retryTimeouts.add(timeoutId);
+          return;
+        }
+
+        // Configure intersection observer options
+        const options = {
+          root: scrollContainer,
+          // Container to observe within
+          rootMargin: "20px 0px 0px 0px",
+          // Trigger 20px before element is visible
+          threshold: 0.05 // Trigger when 5% of element is visible
+        };
+
+        const observer = new IntersectionObserver(callback, options);
+
+        // Wait for target element and finalize setup
+        LazyLoadHandler.waitForTargetElement(() => {
+          const targetElement = document.getElementById(LazyLoadHandler.targetId);
+          if (targetElement) {
+            observer.observe(targetElement);
+            LazyLoadHandler.observer = observer;
+            LazyLoadHandler.initialized = true;
+            LazyLoadHandler.isReady = true; // Mark system as ready
+
+            // Log successful initialization
+            LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadInitializationCompleted, "LazyLoad observer initialization completed", LazyLoadHandler.initTimer.milliSecondsElapsed);
+
+            // Process any actions that were queued during initialization
+            LazyLoadHandler.processInitializationQueue();
+          }
+        });
+      };
+      setupObserver();
+    }
+
+    /**
+     * Waits for the target element to be available in the DOM
+     * 
+     * Uses exponential backoff to retry finding the target element.
+     * This is necessary because the target element may not be immediately
+     * available when the observer is being set up.
+     * 
+     * @param callback - Function to call when target element is found
+     * @param maxAttempts - Maximum number of retry attempts (default: 10)
+     * @param attempt - Current attempt number (default: 1)
+     */
+  }, {
+    key: "waitForTargetElement",
+    value: function waitForTargetElement(callback) {
+      let maxAttempts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+      let attempt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      const targetElement = document.getElementById(LazyLoadHandler.targetId);
+
+      // Target found, execute callback
+      if (targetElement) {
+        callback();
+        return;
+      }
+
+      // Max attempts reached, log error
+      if (attempt >= maxAttempts) {
+        LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadTargetElementNotFound, "Target element not found after max attempts");
+        return;
+      }
+
+      // Schedule retry with exponential backoff (50ms * attempt number for faster initial attempts)
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        LazyLoadHandler.waitForTargetElement(callback, maxAttempts, attempt + 1);
+      }, 50 * attempt); // Reduced from 100ms to 50ms for faster element detection
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Handles immediate scroll requests when system might not be ready
+     * 
+     * This is crucial for handling minimize/maximize scenarios where users
+     * immediately scroll up before the observer is fully initialized.
+     * 
+     * Two-Path Strategy:
+     * 1. If ready: Execute normal lazy load trigger
+     * 2. If not ready: Provide immediate feedback + queue action for later
+     * 
+     * This ensures users always get visual feedback even during initialization delays.
+     */
+  }, {
+    key: "handleImmediateScrollRequest",
+    value: function handleImmediateScrollRequest() {
+      if (LazyLoadHandler.isReady) {
+        // System is ready, handle normally
+        LazyLoadHandler.handleLazyLoadTrigger();
+      } else {
+        // System not ready, provide immediate feedback and queue action
+        LazyLoadHandler.executeImmediateScrollFeedback();
+
+        // Queue the full lazy load action to execute when system is ready
+        LazyLoadHandler.initializationQueue.push(() => {
+          LazyLoadHandler.handleLazyLoadTrigger();
+        });
+
+        // Try to speed up initialization
+        LazyLoadHandler.expediteInitialization();
+      }
+    }
+
+    /**
+     * Provides immediate scroll feedback during initialization
+     * 
+     * When the system isn't ready but user scrolls up, this provides
+     * immediate visual feedback (20px scroll) so the user knows their
+     * action was recognized.
+     */
+  }, {
+    key: "executeImmediateScrollFeedback",
+    value: function executeImmediateScrollFeedback() {
+      // Find container and validate scrollability
+      const {
+        container,
+        isScrollable
+      } = LazyLoadHandler.findScrollContainer();
+      if (container && isScrollable) {
+        const currentScrollTop = container.scrollTop;
+        const immediateScrollTarget = currentScrollTop + 20; // Small immediate scroll for feedback
+
+        // Use requestAnimationFrame for smooth scroll execution
+        requestAnimationFrame(() => {
+          if (container) {
+            container.scrollTop = immediateScrollTarget;
+          }
+        });
+      }
+    }
+
+    /**
+     * Forces faster initialization attempts
+     * 
+     * When user interacts before system is ready, this tries to
+     * speed up the initialization process.
+     */
+  }, {
+    key: "expediteInitialization",
+    value: function expediteInitialization() {
+      // Force faster initialization attempts if not already initialized
+      if (!LazyLoadHandler.initialized) {
+        LazyLoadHandler.useLazyLoadObserver();
+      }
+    }
+
+    /**
+     * Processes all queued actions once system is ready
+     * 
+     * During initialization, user actions are queued. Once the system
+     * is ready, this processes all queued actions with small delays
+     * between them to prevent overwhelming the system.
+     */
+  }, {
+    key: "processInitializationQueue",
+    value: function processInitializationQueue() {
+      // Process all queued actions sequentially
+      while (LazyLoadHandler.initializationQueue.length > 0) {
+        const action = LazyLoadHandler.initializationQueue.shift();
+        if (action) {
+          // Add small delay between queued actions to prevent conflicts
+          const timeoutId = window.setTimeout(() => {
+            LazyLoadHandler.retryTimeouts.delete(timeoutId);
+            action();
+          }, 25); // Reduced from 100ms to 25ms for faster processing
+          LazyLoadHandler.retryTimeouts.add(timeoutId);
+        }
+      }
+    }
+
+    /**
+     * Manually checks if target element is visible and triggers lazy load
+     * 
+     * This is used when the intersection observer might not be ready yet
+     * but we need to check if the trigger element is already in view.
+     * 
+     * Uses getBoundingClientRect() to calculate visibility manually.
+     */
+  }, {
+    key: "checkVisibilityAndTrigger",
+    value: function checkVisibilityAndTrigger() {
+      // Don't trigger if no more history is available
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        return;
+      }
+      const targetElement = document.getElementById(LazyLoadHandler.targetId);
+      if (!targetElement) {
+        return;
+      }
+      const {
+        container
+      } = LazyLoadHandler.findScrollContainer();
+      if (!container) {
+        return;
+      }
+
+      // Get bounding rectangles for visibility calculation
+      const targetRect = targetElement.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+
+      // Check if target element intersects with container viewport
+      const isVisible = targetRect.top < containerRect.bottom &&
+      // Target top is above container bottom
+      targetRect.bottom > containerRect.top &&
+      // Target bottom is below container top
+      targetRect.left < containerRect.right &&
+      // Target left is before container right
+      targetRect.right > containerRect.left // Target right is after container left
+      ;
+
+      if (isVisible) {
+        LazyLoadHandler.handleImmediateScrollRequest();
+      }
+    }
+
+    /**
+     * Main lazy load trigger handler
+     * 
+     * This is the core method that executes when the trigger element becomes visible.
+     * It coordinates the entire lazy loading process:
+     * 
+     * 1. Sets flags to prevent concurrent operations
+     * 2. Dispatches event to fetch more chat history
+     * 3. Waits for content to load
+     * 4. Executes scroll adjustment to maintain user position
+     * 
+     * Timing: Uses 300ms delay to allow content loading before scroll adjustment
+     */
+  }, {
+    key: "handleLazyLoadTrigger",
+    value: function handleLazyLoadTrigger() {
+      // Final guard: Don't proceed if no more history is available
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        return;
+      }
+
+      // Set flags to prevent overlapping operations
+      LazyLoadHandler.pendingScrollAction = true; // Block new scroll actions
+      LazyLoadHandler.paused = true; // Pause intersection observer
+
+      // Dispatch custom event to trigger chat history fetching
+      // This event is handled by other parts of the chat system
+      dispatchCustomEvent(ChatWidgetEvents.FETCH_PERSISTENT_CHAT_HISTORY);
+
+      // Wait for content to load before performing scroll adjustment
+      // 200ms provides good balance between responsiveness and content loading
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        LazyLoadHandler.executeReliableScroll();
+      }, 200); // Reduced from 300ms to 200ms for faster response
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Executes reliable scroll with validation and retry logic
+     * 
+     * This method implements a robust scroll system that:
+     * 1. Finds and validates the scroll container
+     * 2. Calculates target scroll position (current + 35px)
+     * 3. Sets up scroll state for tracking and retries
+     * 4. Initiates the scroll attempt process
+     * 
+     * If no suitable container is found, schedules a retry.
+     */
+  }, {
+    key: "executeReliableScroll",
+    value: function executeReliableScroll() {
+      // Guard: Don't execute scroll if no more history is available
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        LazyLoadHandler.finishScrollAction();
+        return;
+      }
+
+      // Find container using multiple fallback strategies
+      const {
+        container,
+        isScrollable
+      } = LazyLoadHandler.findScrollContainer();
+      if (!container || !isScrollable) {
+        LazyLoadHandler.scheduleScrollRetry();
+        return;
+      }
+
+      // Calculate scroll positions
+      const initialScrollTop = container.scrollTop;
+      const targetScrollTop = initialScrollTop + 35; // 35px down to maintain position
+
+      // Set up scroll state for tracking and retries
+      LazyLoadHandler.scrollState = {
+        container,
+        initialScrollTop,
+        targetScrollTop,
+        attemptCount: 0,
+        maxAttempts: 5 // Allow up to 5 retry attempts
+      };
+
+      // Begin the scroll attempt process
+      LazyLoadHandler.attemptScroll();
+    }
+
+    /**
+     * Attempts to perform scroll with verification and retry logic
+     * 
+     * This method implements a sophisticated scroll system:
+     * 
+     * 1. Uses requestAnimationFrame for smooth execution
+     * 2. Performs the scroll operation
+     * 3. Verifies scroll actually occurred (5px tolerance)
+     * 4. Retries with exponential backoff if failed
+     * 5. Continues operation after max attempts
+     * 
+     * The two-frame approach ensures scroll is applied and then verified
+     * after the browser has had time to process the scroll change.
+     */
+  }, {
+    key: "attemptScroll",
+    value: function attemptScroll() {
+      // Guard: Don't attempt scroll if no more history is available
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        LazyLoadHandler.finishScrollAction();
+        return;
+      }
+      if (!LazyLoadHandler.scrollState) {
+        LazyLoadHandler.finishScrollAction();
+        return;
+      }
+
+      // Extract current scroll state
+      const {
+        container,
+        targetScrollTop,
+        attemptCount,
+        maxAttempts
+      } = LazyLoadHandler.scrollState;
+      LazyLoadHandler.scrollState.attemptCount++;
+
+      // Perform scroll using requestAnimationFrame for smooth execution
+      // Frame 1: Apply the scroll
+      requestAnimationFrame(() => {
+        // Double-check history availability before applying scroll
+        if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+          LazyLoadHandler.finishScrollAction();
+          return;
+        }
+        if (container) {
+          container.scrollTop = targetScrollTop;
+        }
+
+        // Frame 2: Verify scroll occurred after browser has processed the change
+        requestAnimationFrame(() => {
+          // Triple-check history availability before verification
+          if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+            LazyLoadHandler.finishScrollAction();
+            return;
+          }
+          const actualScrollTop = container ? container.scrollTop : 0;
+          const scrollSucceeded = Math.abs(actualScrollTop - targetScrollTop) < 5; // 5px tolerance for success
+
+          if (scrollSucceeded) {
+            LazyLoadHandler.finishScrollAction();
+          } else if (attemptCount < maxAttempts) {
+            // Retry with exponential backoff (100ms * attempt number)
+            const timeoutId = window.setTimeout(() => {
+              LazyLoadHandler.retryTimeouts.delete(timeoutId);
+              LazyLoadHandler.attemptScroll();
+            }, 100 * attemptCount); // Exponential backoff
+            LazyLoadHandler.retryTimeouts.add(timeoutId);
+          } else {
+            LazyLoadHandler.finishScrollAction();
+          }
+        });
+      });
+    }
+
+    /**
+     * Finishes scroll action and prepares for next cycle
+     * 
+     * Cleans up scroll state and schedules the reset cycle.
+     * Uses delays to allow content stabilization before re-enabling
+     * the intersection observer for the next lazy load cycle.
+     */
+  }, {
+    key: "finishScrollAction",
+    value: function finishScrollAction() {
+      // Clean up scroll tracking state
+      LazyLoadHandler.scrollState = null;
+      LazyLoadHandler.pendingScrollAction = false;
+
+      // Schedule unpause and reset with delay for content stabilization
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        LazyLoadHandler.paused = false; // Re-enable intersection observer
+        LazyLoadHandler.scheduleReset(); // Schedule next cycle reset
+      }, 500);
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Schedules retry for failed scroll operations
+     * 
+     * Used when scroll container is not available or scrollable.
+     * Provides a longer delay to allow container to become ready.
+     */
+  }, {
+    key: "scheduleScrollRetry",
+    value: function scheduleScrollRetry() {
+      // Don't schedule retry if no more history is available
+      if (!LazyLoadHandler.hasMoreHistoryAvailable) {
+        LazyLoadHandler.finishScrollAction();
+        return;
+      }
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        // Only retry if we're still in a pending scroll action state and have more history
+        if (LazyLoadHandler.pendingScrollAction && LazyLoadHandler.hasMoreHistoryAvailable) {
+          LazyLoadHandler.executeReliableScroll();
+        }
+      }, 1000); // 1 second delay for container readiness
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Schedules observer reset for next lazy load cycle
+     * 
+     * After a lazy load operation completes, the observer needs to be reset
+     * to detect the next time the user scrolls to the top.
+     */
+  }, {
+    key: "scheduleReset",
+    value: function scheduleReset() {
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        LazyLoadHandler.reset();
+      }, 1000); // 1 second delay before resetting for next cycle
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Finds the appropriate scroll container using multiple strategies
+     * 
+     * Container Detection Priority:
+     * 1. Primary: Specific webchat scroll container (.webchat__basic-transcript__scrollable)
+     * 2. Secondary: Widget root container (ms_lcw_webchat_root)
+     * 3. Tertiary: Any scrollable parent of the target element
+     * 4. Fallback: Best available container (even if not scrollable)
+     * 
+     * Returns both the container and whether it's actually scrollable.
+     * 
+     * @returns Object containing container element and scrollability status
+     */
+  }, {
+    key: "findScrollContainer",
+    value: function findScrollContainer() {
+      // Primary: Look for the specific webchat scroll container
+      const webchatContainer = document.querySelector(LazyLoadActivityConstants.SCROLL_ID);
+      if (webchatContainer && LazyLoadHandler.isElementScrollable(webchatContainer)) {
+        return {
+          container: webchatContainer,
+          isScrollable: true
+        };
+      }
+
+      // Secondary: Try the root container
+      const rootContainer = document.getElementById(LazyLoadHandler.rootId);
+      if (rootContainer && LazyLoadHandler.isElementScrollable(rootContainer)) {
+        return {
+          container: rootContainer,
+          isScrollable: true
+        };
+      }
+
+      // Tertiary: Find any scrollable parent of the target element
+      const targetElement = document.getElementById(LazyLoadHandler.targetId);
+      if (targetElement) {
+        const scrollableParent = LazyLoadHandler.findScrollableParent(targetElement);
+        if (scrollableParent) {
+          return {
+            container: scrollableParent,
+            isScrollable: true
+          };
+        }
+      }
+
+      // Fallback: Return the best available container even if not scrollable
+      // This allows the system to continue functioning in edge cases
+      return {
+        container: webchatContainer || rootContainer || document.body,
+        isScrollable: false
+      };
+    }
+
+    /**
+     * Determines if an element is scrollable
+     * 
+     * Checks two conditions:
+     * 1. Content overflow: scrollHeight > clientHeight (content extends beyond visible area)
+     * 2. CSS overflow settings: overflow/overflowY set to 'auto' or 'scroll'
+     * 
+     * @param element - The element to check for scrollability
+     * @returns true if element is scrollable, false otherwise
+     */
+  }, {
+    key: "isElementScrollable",
+    value: function isElementScrollable(element) {
+      const style = window.getComputedStyle(element);
+      const hasScrollableContent = element.scrollHeight > element.clientHeight;
+      const hasScrollableOverflow = style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll";
+      return hasScrollableContent && hasScrollableOverflow;
+    }
+
+    /**
+     * Traverses up the DOM tree to find a scrollable parent element
+     * 
+     * Starting from the given element, walks up the parent chain
+     * until it finds a scrollable element or reaches document.body.
+     * 
+     * @param element - Starting element to search from
+     * @returns Scrollable parent element or null if none found
+     */
+  }, {
+    key: "findScrollableParent",
+    value: function findScrollableParent(element) {
+      let parent = element.parentElement;
+      while (parent && parent !== document.body) {
+        if (LazyLoadHandler.isElementScrollable(parent)) {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    }
+
+    /**
+     * Legacy method - redirects to new reliable scroll system
+     * 
+     * Maintained for backwards compatibility with existing code
+     * that might call this method directly.
+     */
+  }, {
+    key: "moveScrollDown",
+    value: function moveScrollDown() {
+      LazyLoadHandler.executeReliableScroll();
+    }
+
+    /**
+     * Legacy scroll adjustment method with enhancements
+     * 
+     * Enhanced version of the original adjustScroll method:
+     * - Validates container scrollability before attempting scroll
+     * - Uses requestAnimationFrame for smooth execution
+     * - Provides logging for debugging
+     * 
+     * @param scrollContainer - The container element to scroll
+     */
+  }, {
+    key: "adjustScroll",
+    value: function adjustScroll(scrollContainer) {
+      // Validate container is scrollable before attempting scroll
+      if (!LazyLoadHandler.isElementScrollable(scrollContainer)) {
+        return;
+      }
+      const currentScrollTop = scrollContainer.scrollTop;
+      const moveDownBy = 35; // Standard scroll adjustment amount
+      const targetScrollTop = currentScrollTop + moveDownBy;
+
+      // Use requestAnimationFrame for smooth scroll execution
+      requestAnimationFrame(() => {
+        scrollContainer.scrollTop = targetScrollTop;
+      });
+    }
+
+    /**
+     * Handles the NO_MORE_HISTORY_AVAILABLE event
+     * 
+     * Called when there's no more chat history to load.
+     * Disables further lazy loading attempts and cleans up the observer.
+     * Also removes the trigger element from the DOM to prevent further triggering.
+     */
+  }, {
+    key: "handleNoMoreHistoryAvailable",
+    value: function handleNoMoreHistoryAvailable() {
+      LazyLoadHandler.setHasMoreHistoryAvailable(false);
+      LazyLoadHandler.paused = true;
+      LazyLoadHandler.pendingScrollAction = false; // Reset this to prevent stuck states
+
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadNoMoreHistory, "No more history available");
+
+      // Clear all pending timeouts to stop any scheduled operations
+      LazyLoadHandler.retryTimeouts.forEach(timeoutId => {
+        clearTimeout(timeoutId);
+      });
+      LazyLoadHandler.retryTimeouts.clear();
+
+      // Disconnect observer to prevent further triggering
+      if (LazyLoadHandler.observer) {
+        LazyLoadHandler.observer.disconnect();
+        LazyLoadHandler.observer = null;
+      }
+
+      // Clear scroll state
+      LazyLoadHandler.scrollState = null;
+    }
+
+    /**
+     * Resets the lazy load system for the next cycle
+     * 
+     * This method prepares the system for the next lazy load operation:
+     * 1. Cleans up current state
+     * 2. Resets all flags and queues
+     * 3. Reinitializes the observer with faster timing
+     * 
+     * Called after each lazy load cycle completes.
+     */
+  }, {
+    key: "reset",
+    value: function reset() {
+      LazyLoadHandler.unmount(); // Clean up current state
+      LazyLoadHandler.initialized = false; // Reset initialization flag
+      LazyLoadHandler.isReady = false; // Reset readiness flag
+      LazyLoadHandler.setHasMoreHistoryAvailable(true); // Reset history availability flag
+      LazyLoadHandler.initializationQueue = []; // Clear action queue
+      LazyLoadHandler.resetPending = false; // Clear pending reset flag
+
+      // Reinitialize with faster timing for better responsiveness
+      const timeoutId = window.setTimeout(() => {
+        LazyLoadHandler.retryTimeouts.delete(timeoutId);
+        LazyLoadHandler.useLazyLoadObserver();
+      }, 25); // Reduced from 50ms to 25ms for faster reset
+      LazyLoadHandler.retryTimeouts.add(timeoutId);
+    }
+
+    /**
+     * Comprehensive cleanup method
+     * 
+     * Performs complete cleanup of all lazy load resources:
+     * - Clears all pending timeouts to prevent memory leaks
+     * - Removes intersection observer and event listeners
+     * - Resets all state variables to initial values
+     * - Clears action queue
+     * 
+     * Critical for preventing memory leaks and ensuring clean component unmounting.
+     */
+  }, {
+    key: "unmount",
+    value: function unmount() {
+      LazyLoadHandler.retryTimeouts.forEach(timeoutId => {
+        clearTimeout(timeoutId);
+      });
+      LazyLoadHandler.retryTimeouts.clear();
+
+      // Clean up intersection observer
+      const targetElement = document.getElementById(LazyLoadHandler.targetId);
+      if (targetElement && LazyLoadHandler.observer) {
+        LazyLoadHandler.observer.unobserve(targetElement);
+      }
+
+      // Reset all state variables to initial values
+      LazyLoadHandler.observer = null;
+      LazyLoadHandler.initialized = false;
+      LazyLoadHandler.paused = false;
+      LazyLoadHandler.pendingScrollAction = false;
+      LazyLoadHandler.scrollState = null;
+      LazyLoadHandler.isReady = false;
+      LazyLoadHandler.initializationQueue = [];
+      // Note: Don't reset resetPending here as it needs to persist across unmount/mount cycles
+    }
+
+    /**
+     * Complete cleanup including broadcast event listener
+     * 
+     * This method is used for final cleanup when the LazyLoadActivity component is being destroyed completely.
+     * It includes unsubscribing from broadcast events and performing complete cleanup.
+     * This is different from reset() which prepares the system for a new chat session.
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadDestroyed, "LazyLoad component destroyed");
+      LazyLoadHandler.unmount();
+
+      // Clean up broadcast event subscription
+      if (LazyLoadHandler.resetEventListener) {
+        LazyLoadHandler.resetEventListener.unsubscribe();
+      }
+    }
+  }]);
+  return LazyLoadHandler;
+}();
+/**
+ * LazyLoadActivity React Component
+ * 
+ * This component serves as the React wrapper for the LazyLoadHandler system.
+ * It renders the trigger element and manages the component lifecycle.
+ * 
+ * Component Lifecycle:
+ * 1. Mount: Initializes lazy load observer and sets up scroll listener
+ * 2. Active: Monitors user scroll behavior and responds to interactions
+ * 3. Unmount: Cleans up all resources and prevents memory leaks
+ * 
+ * Key Features:
+ * - Automatic initialization on mount
+ * - Scroll event monitoring for immediate responsiveness
+ * - Proper cleanup on unmount
+ * - Handles minimize/maximize scenarios
+ * - Reactive rendering based on history availability
+ */
+_defineProperty(LazyLoadHandler, "rootId", "ms_lcw_webchat_root");
+_defineProperty(LazyLoadHandler, "targetId", "lazy-load-trigger-element");
+_defineProperty(LazyLoadHandler, "initialized", false);
+_defineProperty(LazyLoadHandler, "paused", false);
+_defineProperty(LazyLoadHandler, "observer", null);
+_defineProperty(LazyLoadHandler, "scrollState", null);
+_defineProperty(LazyLoadHandler, "pendingScrollAction", false);
+_defineProperty(LazyLoadHandler, "retryTimeouts", new Set());
+_defineProperty(LazyLoadHandler, "resetPending", false);
+_defineProperty(LazyLoadHandler, "initTimer", createTimer());
+_defineProperty(LazyLoadHandler, "resetEventListener", BroadcastService.getMessageByEventName(BroadcastEvent.PersistentConversationReset).subscribe(() => {
+  LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadReset, "LazyLoad reset triggered");
+  LazyLoadHandler.resetPending = true;
+  LazyLoadHandler.setHasMoreHistoryAvailable(true); // Reset this immediately so activityMiddleware doesn't block rendering
+  LazyLoadHandler.unmount(); // Clean up current state immediately
+}));
+// Readiness and queue system (handles minimize/maximize scenarios)
+_defineProperty(LazyLoadHandler, "isReady", false);
+// System readiness flag
+_defineProperty(LazyLoadHandler, "initializationQueue", []);
+// Queue for actions during initialization
+// History availability state
+_defineProperty(LazyLoadHandler, "hasMoreHistoryAvailable", true);
+const LazyLoadActivity = props => {
+  const [hasMoreHistory, setHasMoreHistory] = useState(LazyLoadHandler.hasMoreHistoryAvailable);
+  useEffect(() => {
+    LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadActivityMounted, "LazyLoadActivity component mounted");
+
+    // Set up event listeners FIRST - before any early returns
+    // Event listener for NO_MORE_HISTORY_AVAILABLE
+    const handleNoMoreHistory = () => {
+      LazyLoadHandler.handleNoMoreHistoryAvailable();
+      // Update React state to trigger re-render and hide component
+      setHasMoreHistory(false);
+    };
+
+    // Event listener for PersistentConversationReset to sync React state
+    // This fixes the issue where banner doesn't appear in start chat + close chat + start chat sequence
+    // by ensuring React state (hasMoreHistory) is synchronized with handler state when reset occurs
+    const handlePersistentConversationReset = () => {
+      // Update React state to trigger re-render and show component for new chat session
+      setHasMoreHistory(true);
+    };
+
+    // Add secure event listener for no more history signal
+    const eventBus = SecureEventBus.getInstance();
+    const unsubscribeNoMoreHistory = eventBus.subscribe(ChatWidgetEvents.NO_MORE_HISTORY_AVAILABLE, handleNoMoreHistory);
+
+    // Add event listener for persistent conversation reset
+    const resetSubscription = BroadcastService.getMessageByEventName(BroadcastEvent.PersistentConversationReset).subscribe(handlePersistentConversationReset);
+
+    // Sync React state with handler state on mount in case they're out of sync
+    if (hasMoreHistory !== LazyLoadHandler.hasMoreHistoryAvailable) {
+      setHasMoreHistory(LazyLoadHandler.hasMoreHistoryAvailable);
+    }
+
+    // Check if a reset was pending from a previous chat session
+    if (LazyLoadHandler.resetPending) {
+      LazyLoadHandler.resetPending = false;
+      LazyLoadHandler.reset();
+
+      // Still need to return cleanup function even after reset
+      return () => {
+        unsubscribeNoMoreHistory();
+        resetSubscription.unsubscribe();
+      };
+    }
+
+    // Initialize the lazy load observer system
+    LazyLoadHandler.useLazyLoadObserver();
+
+    // Pause initially to prevent unexpected triggers during initialization
+    LazyLoadHandler.paused = true;
+
+    // Set up initialization completion with visibility check
+    const initTimeoutId = window.setTimeout(() => {
+      LazyLoadHandler.paused = false; // Enable lazy loading
+
+      // Check if target is already visible after initialization
+      // This handles cases where user scrolled during initialization
+      LazyLoadHandler.checkVisibilityAndTrigger();
+    }, 200); // Reduced from 500ms to 200ms for faster initial load
+
+    /**
+     * Scroll Event Handler for Immediate Responsiveness
+     * 
+     * This listener provides immediate feedback when users scroll
+     * before the system is fully ready (e.g., after minimize/maximize).
+     * 
+     * Uses passive event listener for better performance.
+     */
+    const handleScroll = () => {
+      if (!LazyLoadHandler.isReady) {
+        // System not ready, but user is scrolling - check if we should trigger
+        window.setTimeout(() => {
+          LazyLoadHandler.checkVisibilityAndTrigger();
+        }, 50); // Reduced from 100ms to 50ms for faster response
+      }
+    };
+
+    // Find container and attach scroll listener
+    const {
+      container
+    } = LazyLoadHandler.findScrollContainer();
+    if (container) {
+      container.addEventListener("scroll", handleScroll, {
+        passive: true
+      });
+    }
+
+    // Cleanup function - critical for preventing memory leaks
+    return () => {
+      clearTimeout(initTimeoutId);
+
+      // Remove event listeners
+      unsubscribeNoMoreHistory();
+      resetSubscription.unsubscribe();
+      if (container) {
+        container.removeEventListener("scroll", handleScroll);
+      }
+
+      // Perform complete system cleanup including broadcast event listener
+      LazyLoadHandler.destroy();
+    };
+  }, []); // Empty dependency array - only run on mount/unmount
+
+  // Don't render if no more history is available
+  if (!hasMoreHistory) {
+    return null;
+  }
+
+  // Render the trigger element that the intersection observer watches
+  return /*#__PURE__*/React.createElement(LoadInlineBannerActivity, _extends({}, props || {}, {
+    id: LazyLoadHandler.targetId
+  }));
+};
+export default LazyLoadActivity;
+export { LazyLoadHandler };