@microsoft/omnichannel-chat-widget 1.8.7 → 2.0.0-main.5ebd4eb

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

@@ -1,5 +1,11 @@
 var _LazyLoadHandler;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -44,10 +50,6 @@ 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
  * 
@@ -109,6 +111,7 @@ let LazyLoadHandler = /*#__PURE__*/function () {
     key: "directReset",
     value: function directReset() {
       LazyLoadHandler.resetPending = true;
+      LazyLoadHandler.initialLoadComplete = false; // New session — next batch is an initial load
       LazyLoadHandler.setHasMoreHistoryAvailable(true);
       LazyLoadHandler.unmount();
     }
@@ -184,9 +187,8 @@ let LazyLoadHandler = /*#__PURE__*/function () {
        */
       const setupObserver = () => {
         // Find the scroll container using multiple strategies
-        const {
-          container: scrollContainer
-        } = LazyLoadHandler.findScrollContainer();
+        const _LazyLoadHandler$find = LazyLoadHandler.findScrollContainer(),
+          scrollContainer = _LazyLoadHandler$find.container;
         if (!scrollContainer) {
           // Schedule retry with faster timeout for better responsiveness
           const timeoutId = window.setTimeout(() => {
@@ -308,10 +310,9 @@ let LazyLoadHandler = /*#__PURE__*/function () {
     key: "executeImmediateScrollFeedback",
     value: function executeImmediateScrollFeedback() {
       // Find container and validate scrollability
-      const {
-        container,
-        isScrollable
-      } = LazyLoadHandler.findScrollContainer();
+      const _LazyLoadHandler$find2 = LazyLoadHandler.findScrollContainer(),
+        container = _LazyLoadHandler$find2.container,
+        isScrollable = _LazyLoadHandler$find2.isScrollable;
       if (container && isScrollable) {
         const currentScrollTop = container.scrollTop;
         const immediateScrollTarget = currentScrollTop + 20; // Small immediate scroll for feedback
@@ -383,9 +384,8 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       if (!targetElement) {
         return;
       }
-      const {
-        container
-      } = LazyLoadHandler.findScrollContainer();
+      const _LazyLoadHandler$find3 = LazyLoadHandler.findScrollContainer(),
+        container = _LazyLoadHandler$find3.container;
       if (!container) {
         return;
       }
@@ -402,7 +402,7 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       targetRect.left < containerRect.right &&
       // Target left is before container right
       targetRect.right > containerRect.left // Target right is after container left
-      ;
+;
       if (isVisible) {
         LazyLoadHandler.handleImmediateScrollRequest();
       }
@@ -410,16 +410,15 @@ let LazyLoadHandler = /*#__PURE__*/function () {
 
     /**
      * 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
+     * 2. Captures scroll state BEFORE content loads (for height-delta anchoring)
+     * 3. Dispatches event to fetch more chat history
+     *
+     * Scroll anchoring is triggered by HISTORY_BATCH_LOADED event (not a blind timeout).
      */
   }, {
     key: "handleLazyLoadTrigger",
@@ -433,138 +432,58 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       LazyLoadHandler.pendingScrollAction = true; // Block new scroll actions
       LazyLoadHandler.paused = true; // Pause intersection observer
 
+      // Capture scroll geometry BEFORE new content loads — used for height-delta anchoring
+      const _LazyLoadHandler$find4 = LazyLoadHandler.findScrollContainer(),
+        container = _LazyLoadHandler$find4.container,
+        isScrollable = _LazyLoadHandler$find4.isScrollable;
+      if (container && isScrollable) {
+        LazyLoadHandler.preLoadScrollHeight = container.scrollHeight;
+        LazyLoadHandler.preLoadScrollTop = container.scrollTop;
+      }
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadTriggerFired, "Lazy load trigger fired — fetching history");
+
       // 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.
+     * Applies height-delta scroll anchoring after new history content is prepended.
+     *
+     * When content is added above the viewport, the browser keeps scrollTop constant
+     * but the content shifts down — making the viewport drift upward.
+     * Fix: scrollTop = savedScrollTop + (newScrollHeight - savedScrollHeight)
+     * This keeps the user looking at the same content they had before.
      */
   }, {
-    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();
+    key: "applyScrollAnchor",
+    value: function applyScrollAnchor() {
+      const _LazyLoadHandler$find5 = LazyLoadHandler.findScrollContainer(),
+        container = _LazyLoadHandler$find5.container,
+        isScrollable = _LazyLoadHandler$find5.isScrollable;
       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;
+      const newScrollHeight = container.scrollHeight;
+      const heightDelta = newScrollHeight - LazyLoadHandler.preLoadScrollHeight;
+      if (heightDelta > 0) {
+        container.scrollTop = LazyLoadHandler.preLoadScrollTop + heightDelta;
       }
-
-      // 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();
+      try {
+        TelemetryHelper.logActionEvent(LogLevel.INFO, {
+          Event: TelemetryEvent.LCWLazyLoadScrollAnchorApplied,
+          Description: "Scroll anchor applied after history batch",
+          CustomProperties: {
+            heightDelta,
+            preLoadScrollHeight: LazyLoadHandler.preLoadScrollHeight,
+            newScrollHeight,
+            newScrollTop: container.scrollTop
           }
         });
-      });
+      } catch {
+        // Silent fail — don't break scroll anchoring for telemetry issues
+      }
+      LazyLoadHandler.finishScrollAction();
     }
 
     /**
@@ -578,7 +497,6 @@ let LazyLoadHandler = /*#__PURE__*/function () {
     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
@@ -590,33 +508,9 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       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.
      */
@@ -734,7 +628,7 @@ let LazyLoadHandler = /*#__PURE__*/function () {
   }, {
     key: "moveScrollDown",
     value: function moveScrollDown() {
-      LazyLoadHandler.executeReliableScroll();
+      LazyLoadHandler.applyScrollAnchor();
     }
 
     /**
@@ -774,6 +668,9 @@ let LazyLoadHandler = /*#__PURE__*/function () {
   }, {
     key: "handleNoMoreHistoryAvailable",
     value: function handleNoMoreHistoryAvailable() {
+      if (!LazyLoadHandler.initialLoadComplete) {
+        LazyLoadHandler.initialLoadComplete = true;
+      }
       LazyLoadHandler.setHasMoreHistoryAvailable(false);
       LazyLoadHandler.paused = true;
       LazyLoadHandler.pendingScrollAction = false; // Reset this to prevent stuck states
@@ -791,9 +688,6 @@ let LazyLoadHandler = /*#__PURE__*/function () {
         LazyLoadHandler.observer.disconnect();
         LazyLoadHandler.observer = null;
       }
-
-      // Clear scroll state
-      LazyLoadHandler.scrollState = null;
     }
 
     /**
@@ -815,6 +709,8 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       LazyLoadHandler.setHasMoreHistoryAvailable(true); // Reset history availability flag
       LazyLoadHandler.initializationQueue = []; // Clear action queue
       LazyLoadHandler.resetPending = false; // Clear pending reset flag
+      // Note: initialLoadComplete is NOT reset here — it persists across observer cycles.
+      // It's only reset on new chat sessions (directReset / PersistentConversationReset).
 
       // Reinitialize with faster timing for better responsiveness
       const timeoutId = window.setTimeout(() => {
@@ -854,8 +750,9 @@ let LazyLoadHandler = /*#__PURE__*/function () {
       LazyLoadHandler.initialized = false;
       LazyLoadHandler.paused = false;
       LazyLoadHandler.pendingScrollAction = false;
-      LazyLoadHandler.scrollState = null;
       LazyLoadHandler.isReady = false;
+      LazyLoadHandler.preLoadScrollHeight = 0;
+      LazyLoadHandler.preLoadScrollTop = 0;
       LazyLoadHandler.initializationQueue = [];
       // Note: Don't reset resetPending here as it needs to persist across unmount/mount cycles
     }
@@ -911,9 +808,13 @@ _defineProperty(LazyLoadHandler, "paused", false);
 // Temporary disable flag
 _defineProperty(LazyLoadHandler, "observer", null);
 // The intersection observer instance
-// Scroll operation state
-_defineProperty(LazyLoadHandler, "scrollState", null);
-// Current scroll operation tracking
+// Scroll anchoring state (height-delta approach)
+_defineProperty(LazyLoadHandler, "preLoadScrollHeight", 0);
+// scrollHeight before content loads
+_defineProperty(LazyLoadHandler, "preLoadScrollTop", 0);
+// scrollTop before content loads
+_defineProperty(LazyLoadHandler, "initialLoadComplete", false);
+// Tracks if the first batch has loaded
 _defineProperty(LazyLoadHandler, "pendingScrollAction", false);
 // Prevents concurrent scroll operations (public for event handlers)
 // Timeout and queue management
@@ -926,6 +827,7 @@ _defineProperty(LazyLoadHandler, "initTimer", createTimer());
 _defineProperty(LazyLoadHandler, "resetEventListener", BroadcastService.getMessageByEventName(BroadcastEvent.PersistentConversationReset).subscribe(() => {
   _LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadReset, "LazyLoad reset triggered");
   _LazyLoadHandler.resetPending = true;
+  _LazyLoadHandler.initialLoadComplete = false; // New session — next batch is an initial load
   _LazyLoadHandler.setHasMoreHistoryAvailable(true); // Reset this immediately so activityMiddleware doesn't block rendering
   _LazyLoadHandler.unmount(); // Clean up current state immediately
 }));
@@ -937,7 +839,10 @@ _defineProperty(LazyLoadHandler, "initializationQueue", []);
 // History availability state
 _defineProperty(LazyLoadHandler, "hasMoreHistoryAvailable", true);
 const LazyLoadActivity = props => {
-  const [hasMoreHistory, setHasMoreHistory] = useState(LazyLoadHandler.hasMoreHistoryAvailable);
+  const _useState = useState(LazyLoadHandler.hasMoreHistoryAvailable),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasMoreHistory = _useState2[0],
+    setHasMoreHistory = _useState2[1];
   useEffect(() => {
     LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadActivityMounted, "LazyLoadActivity component mounted");
 
@@ -949,19 +854,11 @@ const LazyLoadActivity = props => {
       setHasMoreHistory(false);
     };
 
-    // Event listener for HISTORY_LOAD_ERROR - hides banner temporarily without disabling future loads
+    // Event listener for HISTORY_LOAD_ERROR — dismiss banner on any error
     const handleHistoryLoadError = () => {
-      // Temporarily hide the banner by pausing, but keep hasMoreHistory true to allow retry
-      LazyLoadHandler.paused = true;
-      LazyLoadHandler.pendingScrollAction = false;
-
-      // Re-enable after a delay to allow retry on next scroll
-      // Note: This timeout is intentionally not tracked as it's scoped to the component lifecycle
-      window.setTimeout(() => {
-        LazyLoadHandler.paused = false;
-      }, 2000); // 2 second delay before allowing retry
-
-      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadHistoryError, "History load error - will retry on next scroll");
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadHistoryError, `History load error - dismissing banner. initialLoadComplete: ${LazyLoadHandler.initialLoadComplete}`);
+      LazyLoadHandler.handleNoMoreHistoryAvailable();
+      setHasMoreHistory(false);
     };
 
     // Event listener for PersistentConversationReset to sync React state
@@ -972,6 +869,95 @@ const LazyLoadActivity = props => {
       setHasMoreHistory(true);
     };
 
+    // Event listener for HISTORY_BATCH_LOADED — applies scroll anchoring after batch is processed
+    const handleBatchLoaded = () => {
+      LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadBatchReceived, `Batch received — initialLoadComplete: ${LazyLoadHandler.initialLoadComplete}`);
+      if (!LazyLoadHandler.initialLoadComplete) {
+        // Initial load: use the same height-delta scroll anchoring as subsequent loads.
+        // This keeps the user at their current position while history is prepended above.
+        LazyLoadHandler.initialLoadComplete = true;
+        LazyLoadHandler.pendingScrollAction = false;
+        try {
+          const _LazyLoadHandler$find6 = LazyLoadHandler.findScrollContainer(),
+            container = _LazyLoadHandler$find6.container;
+          if (container) {
+            const savedScrollTop = container.scrollTop;
+            const savedScrollHeight = container.scrollHeight;
+
+            // Freeze viewport while React renders new content above
+            container.style.overflow = "hidden";
+            let framesRemaining = 6;
+            const anchorScroll = () => {
+              const newScrollHeight = container.scrollHeight;
+              const heightDelta = newScrollHeight - savedScrollHeight;
+              if (heightDelta > 0) {
+                container.scrollTop = savedScrollTop + heightDelta;
+              }
+              framesRemaining--;
+              if (framesRemaining > 0) {
+                requestAnimationFrame(anchorScroll);
+              } else {
+                container.style.overflow = "";
+                LazyLoadHandler.paused = false;
+                LazyLoadHandler.scheduleReset();
+              }
+            };
+            requestAnimationFrame(anchorScroll);
+          } else {
+            LazyLoadHandler.paused = false;
+            LazyLoadHandler.scheduleReset();
+          }
+        } catch {
+          LazyLoadHandler.paused = false;
+          LazyLoadHandler.scheduleReset();
+        }
+        LazyLoadHandler.logLifecycleEvent(TelemetryEvent.LCWLazyLoadInitialLoadComplete, "Initial history load complete — scroll anchored to current position");
+        return;
+      }
+      // Pagination: apply height-delta scroll anchoring repeatedly across frames.
+      //
+      // react-scroll-to-bottom uses useEffect + rAF to auto-scroll to bottom when new content
+      // arrives. This fires at unpredictable timing relative to our callbacks, so a single
+      // scrollTop assignment gets overridden intermittently.
+      //
+      // Fix: re-apply the correct scrollTop across several animation frames. After a few frames,
+      // react-scroll-to-bottom detects the user is NOT at the bottom (sticky=false) and stops
+      // auto-scrolling. We also temporarily freeze overflow to prevent visible flicker.
+      try {
+        const _LazyLoadHandler$find7 = LazyLoadHandler.findScrollContainer(),
+          container = _LazyLoadHandler$find7.container;
+        if (container) {
+          // Re-capture scrollTop — user may have scrolled during the API fetch
+          const savedScrollTop = container.scrollTop;
+          const savedScrollHeight = LazyLoadHandler.preLoadScrollHeight;
+
+          // Freeze viewport to prevent visible flicker between competing scroll positions
+          container.style.overflow = "hidden";
+          let framesRemaining = 6; // ~100ms at 60fps — enough for react-scroll-to-bottom to settle
+          const anchorScroll = () => {
+            const newScrollHeight = container.scrollHeight;
+            const heightDelta = newScrollHeight - savedScrollHeight;
+            if (heightDelta > 0) {
+              container.scrollTop = savedScrollTop + heightDelta;
+            }
+            framesRemaining--;
+            if (framesRemaining > 0) {
+              requestAnimationFrame(anchorScroll);
+            } else {
+              // All frames applied — restore overflow and finish
+              container.style.overflow = "";
+              LazyLoadHandler.finishScrollAction();
+            }
+          };
+          requestAnimationFrame(anchorScroll);
+        } else {
+          LazyLoadHandler.finishScrollAction();
+        }
+      } catch {
+        LazyLoadHandler.finishScrollAction();
+      }
+    };
+
     // Add secure event listener for no more history signal
     const eventBus = SecureEventBus.getInstance();
     const unsubscribeNoMoreHistory = eventBus.subscribe(ChatWidgetEvents.NO_MORE_HISTORY_AVAILABLE, handleNoMoreHistory);
@@ -979,6 +965,9 @@ const LazyLoadActivity = props => {
     // Add event listener for history load errors
     const unsubscribeHistoryError = eventBus.subscribe(ChatWidgetEvents.HISTORY_LOAD_ERROR, handleHistoryLoadError);
 
+    // Add event listener for history batch loaded
+    const unsubscribeBatchLoaded = eventBus.subscribe(ChatWidgetEvents.HISTORY_BATCH_LOADED, handleBatchLoaded);
+
     // Add event listener for persistent conversation reset
     const resetSubscription = BroadcastService.getMessageByEventName(BroadcastEvent.PersistentConversationReset).subscribe(handlePersistentConversationReset);
 
@@ -996,6 +985,7 @@ const LazyLoadActivity = props => {
       return () => {
         unsubscribeNoMoreHistory();
         unsubscribeHistoryError();
+        unsubscribeBatchLoaded();
         resetSubscription.unsubscribe();
       };
     }
@@ -1033,9 +1023,8 @@ const LazyLoadActivity = props => {
     };
 
     // Find container and attach scroll listener
-    const {
-      container
-    } = LazyLoadHandler.findScrollContainer();
+    const _LazyLoadHandler$find8 = LazyLoadHandler.findScrollContainer(),
+      container = _LazyLoadHandler$find8.container;
     if (container) {
       container.addEventListener("scroll", handleScroll, {
         passive: true
@@ -1049,6 +1038,7 @@ const LazyLoadActivity = props => {
       // Remove event listeners
       unsubscribeNoMoreHistory();
       unsubscribeHistoryError();
+      unsubscribeBatchLoaded();
       resetSubscription.unsubscribe();
       if (container) {
         container.removeEventListener("scroll", handleScroll);

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

@@ -3,11 +3,9 @@ import { defaultInlineBannerStyle } from "../defaultStyles/defaultInLineBannerSt
 import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
 import { mergeStyles } from "@fluentui/merge-styles";
 const LoadInlineBannerActivity = _ref => {
-  let {
-    webChatContainerProps,
-    persistentChatHistory,
-    id
-  } = _ref;
+  let webChatContainerProps = _ref.webChatContainerProps,
+    persistentChatHistory = _ref.persistentChatHistory,
+    id = _ref.id;
   const localizedTexts = useMemo(() => ({
     ...defaultMiddlewareLocalizedTexts,
     ...(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.localizedTexts)

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityMiddleware.js

@@ -47,7 +47,16 @@ const handleSystemMessage = (next, args, card, renderMarkdown, systemMessageStyl
   if ((_card$activity5 = card.activity) !== null && _card$activity5 !== void 0 && (_card$activity5 = _card$activity5.channelData) !== null && _card$activity5 !== void 0 && _card$activity5.clientmessageid && ((_card$nextVisibleActi = card.nextVisibleActivity) === null || _card$nextVisibleActi === void 0 || (_card$nextVisibleActi = _card$nextVisibleActi.channelData) === null || _card$nextVisibleActi === void 0 ? void 0 : _card$nextVisibleActi.clientmessageid) === ((_card$activity6 = card.activity) === null || _card$activity6 === void 0 || (_card$activity6 = _card$activity6.channelData) === null || _card$activity6 === void 0 ? void 0 : _card$activity6.clientmessageid) || (_card$activity7 = card.activity) !== null && _card$activity7 !== void 0 && _card$activity7.messageid && ((_card$nextVisibleActi2 = card.nextVisibleActivity) === null || _card$nextVisibleActi2 === void 0 ? void 0 : _card$nextVisibleActi2.messageid) === ((_card$activity8 = card.activity) === null || _card$activity8 === void 0 ? void 0 : _card$activity8.messageid)) {
     return () => false;
   }
-  card.activity.text = renderMarkdown(card.activity.text);
+
+  // Render latest text on every pass. We deliberately do NOT cache the pre-render text
+  // (removed post-PR #895), because:
+  //  1. card.activity.text is no longer mutated (renderedHtml is a local variable), so
+  //     exponential <br> growth from repeated markdown rendering is not possible.
+  //  2. Caching the first-seen text prevents edited system messages (same id, updated
+  //     text/version) from ever re-rendering with the latest content.
+  // renderMarkdown sanitizes the HTML using DOMPurify with allowlist-based configuration
+  // See initWebChatComposer.ts for sanitization details
+  const renderedHtml = renderMarkdown(card.activity.text);
   // eslint-disable-next-line react/display-name
   return () => /*#__PURE__*/React.createElement("div", {
     key: card.activity.id,
@@ -55,7 +64,7 @@ const handleSystemMessage = (next, args, card, renderMarkdown, systemMessageStyl
     "aria-hidden": "false",
     className: Constants.markDownSystemMessageClass,
     dangerouslySetInnerHTML: {
-      __html: card.activity.text
+      __html: renderedHtml
     }
   });
 };
@@ -75,7 +84,7 @@ export const createActivityMiddleware = (renderMarkdown, systemMessageStyleProps
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  const [card] = args;
+  const card = args[0];
   if (card.activity) {
     var _card$activity$from;
     if (((_card$activity$from = card.activity.from) === null || _card$activity$from === void 0 ? void 0 : _card$activity$from.role) === DirectLineSenderRole.Channel) {
@@ -124,7 +133,7 @@ export const createActivityMiddleware = (renderMarkdown, systemMessageStyleProps
     if (isTagIncluded(card, Constants.conversationDividerTag)) {
       const conversationDividerLabel = (localizedTexts === null || localizedTexts === void 0 ? void 0 : localizedTexts.CONVERSATION_DIVIDER_ARIA_LABEL) || defaultMiddlewareLocalizedTexts.CONVERSATION_DIVIDER_ARIA_LABEL;
       // Pass the computed localized text to the divider component
-      return /*#__PURE__*/React.createElement(ConversationDividerActivity, {
+      return () => /*#__PURE__*/React.createElement(ConversationDividerActivity, {
         dividerActivityAriaLabel: conversationDividerLabel
       });
     }
@@ -147,4 +156,10 @@ export const createActivityMiddleware = (renderMarkdown, systemMessageStyleProps
     }
   }
   return next(...args);
+};
+
+/** Clear module-level caches. Call on conversation end / chat close. */
+export const resetActivityMiddlewareCache = () => {
+  loggedSystemMessages.length = 0;
+  lastRenderedAt = 0;
 };