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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Constants = require("../../../../common/Constants");
+var _SupportedAdaptiveCards = require("@microsoft/omnichannel-chat-sdk/lib/utils/printers/interfaces/SupportedAdaptiveCards");
 var _botActivity = _interopRequireDefault(require("../activities/botActivity"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -23,15 +24,22 @@ const convertStringValueToInt = value => {
 
 // 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;
+  var _from$application, _from$user, _from$application2;
+  const additionalData = message.additionalData,
+    attachments = message.attachments,
+    botContentType = message.botContentType,
+    content = message.content,
+    created = message.created,
+    from = message.from,
+    transcriptOriginalMessageId = message.transcriptOriginalMessageId;
+  const isFromCustomer = (from === null || from === void 0 || (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer";
+
+  // Filter out customer responses to adaptive cards (e.g., form submissions like {"value":{"goPaperless":"yes"}}).
+  // These are the customer's postBack/messageBack replies to bot adaptive cards — not displayable content.
+  // In live chat, webchat hides these natively; in history we must filter them explicitly.
+  if (isFromCustomer && botContentType === "azurebotservice.adaptivecard") {
+    return null;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const activity = {
     ..._botActivity.default,
@@ -68,13 +76,110 @@ const convertPersistentChatHistoryMessageToActivity = message => {
       name: from.user.displayName
     };
   }
-  if ((from === null || from === void 0 || (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer") {
+  if ((from === null || from === void 0 || (_from$application2 = from.application) === null || _from$application2 === void 0 ? void 0 : _from$application2.displayName) === "Customer") {
     activity.from = {
       role: "user",
       name: from.application.displayName
     };
   }
   if (content) {
+    var _parsedContent;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let parsedContent;
+    try {
+      parsedContent = JSON.parse(content);
+    } catch (error) {
+      parsedContent = null; // fall back to normal text handling
+    }
+
+    // Check if this is a customer form submission response (e.g., RichObjectMessage_Form)
+    // These should be ignored as they are form submission data, not displayable content
+    if (isFromCustomer && ((_parsedContent = parsedContent) === null || _parsedContent === void 0 || (_parsedContent = _parsedContent.value) === null || _parsedContent === void 0 ? void 0 : _parsedContent.type) === "RichObjectMessage_Form") {
+      return null;
+    }
+    if (parsedContent && typeof parsedContent === "object") {
+      var _parsedContent$sugges;
+      // Structural detection: check the parsed object's properties directly
+      const hasAttachments = Array.isArray(parsedContent.attachments) && parsedContent.attachments.length > 0;
+      const hasSuggestedActions = Array.isArray((_parsedContent$sugges = parsedContent.suggestedActions) === null || _parsedContent$sugges === void 0 ? void 0 : _parsedContent$sugges.actions) && parsedContent.suggestedActions.actions.length > 0;
+      const isRawAdaptiveCardBody = parsedContent.type === "AdaptiveCard";
+
+      // Filter out suggested-action-only messages from history.
+      // WebChat only renders suggestedActions for the most recent activity, so in history
+      // these render as empty "Suggested reply" text bubbles with no actionable buttons.
+      if (hasSuggestedActions && !hasAttachments) {
+        return null;
+      }
+
+      // Substring detection: check the raw content string for known card type patterns
+      const contentLower = content.toLowerCase();
+      const isAdaptiveCard = contentLower.includes(_Constants.Constants.AdaptiveCardType);
+      const isSuggestedActions = contentLower.includes(_Constants.Constants.SuggestedActionsType);
+      const containsSupportedCard = Object.values(_SupportedAdaptiveCards.SupportedAdaptiveCards).some(type => contentLower.includes(type.toLowerCase()));
+
+      // If the content is a raw adaptive card body (type: "AdaptiveCard"), wrap it as an attachment
+      // so webchat can render it properly instead of treating it as an unknown activity type
+      if (isRawAdaptiveCardBody) {
+        return {
+          ...activity,
+          text: "",
+          attachments: [{
+            contentType: _SupportedAdaptiveCards.SupportedAdaptiveCards.Adaptive,
+            content: parsedContent
+          }],
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+
+      // Detect rich content using both structural checks and substring matching
+      if (hasAttachments || hasSuggestedActions || isAdaptiveCard || isSuggestedActions || containsSupportedCard) {
+        var _activity$from;
+        // Preserve from.role from the base activity — parsedContent.from may lack the role property
+        // which webchat needs to determine how to render the message (bot vs user)
+        const preservedFrom = {
+          ...activity.from,
+          ...(parsedContent.from || {}),
+          role: ((_activity$from = activity.from) === null || _activity$from === void 0 ? void 0 : _activity$from.role) || "bot"
+        };
+        return {
+          ...activity,
+          ...parsedContent,
+          from: preservedFrom,
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+
+      // If parsedContent is a webchat activity (type: "message") but didn't match any specific card check,
+      // still treat it as a rich activity to avoid displaying raw JSON as text
+      if (parsedContent.type === "message" && (parsedContent.attachments || parsedContent.suggestedActions || parsedContent.value)) {
+        var _activity$from2;
+        const preservedFrom = {
+          ...activity.from,
+          ...(parsedContent.from || {}),
+          role: ((_activity$from2 = activity.from) === null || _activity$from2 === void 0 ? void 0 : _activity$from2.role) || "bot"
+        };
+        return {
+          ...activity,
+          ...parsedContent,
+          from: preservedFrom,
+          timestamp,
+          channelData: {
+            ...activity.channelData,
+            "webchat:sequence-id": webchatSequenceId
+          }
+        };
+      }
+    }
+
+    // Plain text message
     return {
       ...activity,
       text: content,

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

@@ -33,8 +33,11 @@ const defaultMiddlewareLocalizedTexts = exports.defaultMiddlewareLocalizedTexts
   MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat.",
   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_SENT: "File sent successfully.",
   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_SR_PREFIX_SUCCESS: "Success. ",
+  MIDDLEWARE_SR_PREFIX_ERROR: "Error. ",
   PREVIOUS_MESSAGES_LOADING: "Loading previous messages...",
   CONVERSATION_DIVIDER_ARIA_LABEL: "Conversation history divider"
 };

package/lib/cjs/components/webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps.js

@@ -20,5 +20,6 @@ const defaultWebChatContainerStatefulProps = exports.defaultWebChatContainerStat
   honorsTargetInHTMLLinks: false,
   hyperlinkTextOverride: false,
   directLine: new _mockadapter.default(),
-  adaptiveCardStyles: _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles
+  adaptiveCardStyles: _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles,
+  webChatNotificationRegionAccessibilityLabel: "Chat notifications"
 };

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultAdaptiveCardStyles = void 0;
+var _Constants = require("../../../../common/Constants");
 const defaultAdaptiveCardStyles = exports.defaultAdaptiveCardStyles = {
   background: "white",
   color: "black",
@@ -11,5 +12,6 @@ const defaultAdaptiveCardStyles = exports.defaultAdaptiveCardStyles = {
   textWhiteSpace: "normal",
   buttonWhiteSpace: "normal",
   buttonFlexWrap: "nowrap",
-  buttonGap: "0px"
+  buttonGap: "0px",
+  inputFontSize: _Constants.Constants.minInputFontSize
 };

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

@@ -23,7 +23,7 @@ const defaultWebChatStyles = exports.defaultWebChatStyles = {
   bubbleTextColor: "White",
   hideSendBox: false,
   hideUploadButton: true,
-  primaryFont: "Segoe UI, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\"",
+  primaryFont: "Segoe UI, Arial, sans-serif",
   rootHeight: "100%",
   rootWidth: "100%",
   sendBoxTextWrap: true,
@@ -34,7 +34,7 @@ const defaultWebChatStyles = exports.defaultWebChatStyles = {
   suggestedActionsStackedHeight: 125,
   suggestedActionsStackedOverflow: "scroll",
   // eslint-disable-line @typescript-eslint/no-explicit-any
-  typingAnimationDuration: 3500,
+  typingAnimationDuration: 4500,
   emojiSet: {
     ":)": "😊",
     ":-)": "😊",

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

@@ -41,11 +41,13 @@ exports.postEchoActivity = postEchoActivity;
 const postBotMessageActivity = function (activityObserver, text) {
   let tags = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
   let delay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1000;
+  let fromOverride = arguments.length > 4 ? arguments[4] : undefined;
   setTimeout(() => {
     activityObserver === null || activityObserver === void 0 || activityObserver.next({
       id: (0, _omnichannelChatSdk.uuidv4)(),
       from: {
-        ...botUser
+        ...botUser,
+        ...(fromOverride ?? {})
       },
       text,
       type: "message",

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

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.patchCitationAnchorsForA11y = void 0;
+// Accessibility helper: Merges WebChat's citation card number badge and link
+// text into a single focusable element.
+//
+// WebChat's LinkDefinitionItem renders an <a> containing a badge <div> (number)
+// and a text <div> (title). On iOS VoiceOver, these block-level descendants are
+// announced as two separate focusable links (e.g. "1, link" and
+// "Assessment of eligibility..., link"). Setting a combined aria-label on the
+// anchor and hiding inner descendants from the accessibility tree ensures the
+// whole card is announced as one link.
+
+const CITATION_ANCHOR_SELECTOR = "a.webchat__link-definitions__list-item-box";
+const PATCHED_MARKER = "ocwCitationA11yPatched";
+const STYLE_TAG_ID = "ocw-citation-a11y-styles";
+
+// Global CSS injected once per document. Neutralizes iOS Safari's per-inner-
+// element tap highlight / selection / focus rectangles that otherwise make
+// the "1" badge and the link text appear as separate selectable areas even
+// though they are inside a single <a>.
+// Strategy:
+//  - Make the anchor a block-level positioning parent.
+//  - Add a transparent ::after pseudo-element that covers the entire anchor.
+//    iOS Safari hit-tests that overlay as a SINGLE region, so the tap
+//    highlight / selection rectangle always covers the whole card instead
+//    of just the "1" badge or just the link text.
+//  - Make every descendant transparent to pointer / focus, so they can never
+//    become a standalone tap target.
+const STYLE_RULES = `
+a.webchat__link-definitions__list-item-box {
+    position: relative;
+    display: block;
+    isolation: isolate;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+    -webkit-touch-callout: none;
+    cursor: pointer;
+}
+a.webchat__link-definitions__list-item-box::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    background: transparent;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: rgba(0, 120, 212, 0.15);
+}
+a.webchat__link-definitions__list-item-box * {
+    pointer-events: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    outline: none;
+    text-decoration: inherit;
+    cursor: inherit;
+}
+`;
+const ensureStyleInjected = doc => {
+  if (!doc || typeof doc.getElementById !== "function" || doc.getElementById(STYLE_TAG_ID)) {
+    return;
+  }
+  const style = doc.createElement("style");
+  style.id = STYLE_TAG_ID;
+  style.textContent = STYLE_RULES;
+  (doc.head || doc.documentElement).appendChild(style);
+};
+const patchCitationAnchorsForA11y = root => {
+  var _defaultView;
+  if (!root || typeof root.querySelectorAll !== "function") {
+    return;
+  }
+
+  // Inject global CSS once per document. This covers every citation anchor
+  // regardless of whether our per-node patch has run on it yet.
+  const rootNode = root;
+  const doc = rootNode.ownerDocument ?? ((_defaultView = root.defaultView) === null || _defaultView === void 0 ? void 0 : _defaultView.document) ?? root ?? (typeof document !== "undefined" ? document : null);
+  if (doc && typeof doc.createElement === "function") {
+    ensureStyleInjected(doc);
+  }
+
+  // Also include the root itself when it matches — calls from MutationObserver
+  // pass the anchor element directly, which querySelectorAll wouldn't return.
+  const matched = new Set();
+  if (typeof root.matches === "function" && root.matches(CITATION_ANCHOR_SELECTOR)) {
+    matched.add(root);
+  }
+  root.querySelectorAll(CITATION_ANCHOR_SELECTOR).forEach(n => {
+    matched.add(n);
+  });
+  matched.forEach(anchor => {
+    var _badge$textContent, _textEl$textContent;
+    const badge = anchor.querySelector(".webchat__link-definitions__badge");
+    const textEl = anchor.querySelector(".webchat__link-definitions__list-item-text");
+    const identifier = (badge === null || badge === void 0 || (_badge$textContent = badge.textContent) === null || _badge$textContent === void 0 ? void 0 : _badge$textContent.trim()) ?? "";
+    // Prefer the explicit text element. For plain (non-card) citation anchors
+    // (no badge), fall back to the title or the anchor's own text. When a
+    // badge is present but no text element, avoid using anchor.textContent
+    // since it would duplicate the identifier.
+    let text = (textEl === null || textEl === void 0 || (_textEl$textContent = textEl.textContent) === null || _textEl$textContent === void 0 ? void 0 : _textEl$textContent.trim()) ?? "";
+    if (!text && !badge) {
+      var _anchor$getAttribute, _anchor$textContent;
+      text = ((_anchor$getAttribute = anchor.getAttribute("title")) === null || _anchor$getAttribute === void 0 ? void 0 : _anchor$getAttribute.trim()) || ((_anchor$textContent = anchor.textContent) === null || _anchor$textContent === void 0 ? void 0 : _anchor$textContent.trim()) || "";
+    }
+    if (!identifier && !text) {
+      return;
+    }
+    const combinedLabel = identifier && text ? `${identifier}, ${text}` : identifier || text;
+
+    // Always (re-)apply aria-label if absent. Setting it again with the same
+    // value when it already matches is a no-op for the DOM; this keeps the
+    // patch idempotent so React re-renders that strip the attribute heal.
+    const existingLabel = anchor.getAttribute("aria-label");
+    if (!existingLabel) {
+      anchor.setAttribute("aria-label", combinedLabel);
+    }
+
+    // Explicitly mark the anchor as a single link so iOS VoiceOver treats
+    // the whole card as one element.
+    if (!anchor.getAttribute("role")) {
+      anchor.setAttribute("role", "link");
+    }
+
+    // Nuclear a11y lockdown of EVERY descendant of the anchor (not just
+    // known class names, because WebChat can render additional nodes).
+    // iOS VoiceOver is known to split focus on block-level descendants
+    // inside an <a>. Applying all of the following guarantees only the
+    // outer <a> is a selectable a11y / focus target:
+    //   - aria-hidden="true"      removes element from the a11y tree
+    //   - role="presentation"     strips any implicit semantic role
+    //   - inert                   removes element from focus + interaction
+    //   - tabindex="-1"           defensive (covers browsers without inert)
+    //   - title removed           iOS VoiceOver in WKWebView still surfaces
+    //                             elements with a `title` attribute as a
+    //                             separately swipeable item even when
+    //                             aria-hidden=true. WebChat's ItemBody sets
+    //                             title={text} on the inner link-text div,
+    //                             which is the root cause of the "two
+    //                             separate links" announcement on iOS.
+    //                             We move the title to a data-* attribute
+    //                             so any tooltip-like tooling can still
+    //                             read it, but iOS VO ignores it.
+    anchor.querySelectorAll("*").forEach(el => {
+      const inner = el;
+      if (inner.getAttribute("aria-hidden") !== "true") {
+        inner.setAttribute("aria-hidden", "true");
+      }
+      if (inner.getAttribute("role") !== "presentation") {
+        inner.setAttribute("role", "presentation");
+      }
+      if (inner.getAttribute("tabindex") !== "-1") {
+        inner.setAttribute("tabindex", "-1");
+      }
+      if (!inner.hasAttribute("inert")) {
+        inner.setAttribute("inert", "");
+      }
+      const innerTitle = inner.getAttribute("title");
+      if (innerTitle !== null) {
+        inner.removeAttribute("title");
+        if (!inner.dataset.ocwOriginalTitle) {
+          inner.dataset.ocwOriginalTitle = innerTitle;
+        }
+      }
+      if (inner.style.pointerEvents !== "none") {
+        inner.style.pointerEvents = "none";
+      }
+    });
+
+    // DOM-level full-bleed overlay. Inline styles are used so this works
+    // even when the widget renders inside a shadow DOM (where an
+    // injected <style> tag in document.head cannot reach). The overlay
+    // becomes the ONLY visible hit-test target for iOS Safari, so tapping
+    // anywhere on the card highlights the entire card instead of just the
+    // "1" badge or just the link text.
+    const anchorStyle = anchor.style;
+    if (!anchorStyle.position) {
+      anchorStyle.position = "relative";
+    }
+    if (!anchorStyle.display || anchorStyle.display === "inline") {
+      anchorStyle.display = "block";
+    }
+    const ownerDoc = anchor.ownerDocument;
+    const existingOverlay = anchor.querySelector(":scope > [data-ocw-citation-overlay='true']");
+    if (!existingOverlay && ownerDoc && typeof ownerDoc.createElement === "function") {
+      const overlay = ownerDoc.createElement("span");
+      overlay.setAttribute("aria-hidden", "true");
+      overlay.setAttribute("data-ocw-citation-overlay", "true");
+      overlay.style.cssText = ["position:absolute", "top:0", "left:0", "right:0", "bottom:0", "z-index:2", "background:transparent", "pointer-events:auto", "-webkit-tap-highlight-color:rgba(0,120,212,0.15)", "-webkit-touch-callout:none", "-webkit-user-select:none", "user-select:none", "cursor:pointer"].join(";");
+      anchor.appendChild(overlay);
+    }
+    anchor.dataset[PATCHED_MARKER] = "true";
+  });
+};
+exports.patchCitationAnchorsForA11y = patchCitationAnchorsForA11y;

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

@@ -1 +1,17 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isWebChatAction = void 0;
+/**
+ * Type guard narrowing the `unknown` action received by a Redux 5 store middleware
+ * down to Web Chat's IWebChatAction shape, so middlewares can safely access `type`/`payload`.
+ */
+const isWebChatAction = action => typeof action === "object" && action !== null && "type" in action && typeof action.type === "string";
+
+/**
+ * Structural middleware type matching the unknown-action contract expected by
+ * botframework-webchat's `createStore` without exposing Redux as a public dependency.
+ */
+exports.isWebChatAction = isWebChatAction;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/WebChatEventSubscribers.js

@@ -13,13 +13,25 @@ var _WebChatStoreLoader = require("./WebChatStoreLoader");
 var _utils = require("../../../common/utils");
 var _dispatchCustomEvent = _interopRequireDefault(require("../../../common/utils/dispatchCustomEvent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
 /**
  * Component to handle persistent chat history events.
  * Uses WebChatStoreLoader instead of hooks to avoid context issues.
  */
 const WebChatEventSubscribers = () => {
-  const [isConnected, setIsConnected] = (0, _react.useState)(false);
-  const [storeReady, setStoreReady] = (0, _react.useState)(false);
+  const _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isConnected = _useState2[0],
+    setIsConnected = _useState2[1];
+  const _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    storeReady = _useState4[0],
+    setStoreReady = _useState4[1];
   const storeWaitTimer = (0, _utils.createTimer)();
   // Type the chatConfig properly to avoid 'any' usage
 
@@ -76,15 +88,26 @@ const WebChatEventSubscribers = () => {
             // Dispatch events when connection is established
             setTimeout(() => {
               (0, _dispatchCustomEvent.default)(_ChatWidgetEvents.default.FETCH_PERSISTENT_CHAT_HISTORY);
+              // The trigger activity renders the "Loading previous messages..." banner
+              // via LazyLoadActivity. We set webchat:sequence-id to 1 and timestamp
+              // to epoch+1ms so WebChat sorts this activity BEFORE all history messages
+              // (which have sequence-ids based on transcriptOriginalMessageId timestamps).
+              // Without these, WebChat places activities without a sequence-id at the
+              // end of the transcript, causing the banner to appear at the bottom and
+              // breaking the IntersectionObserver pagination trigger (the observer only
+              // fires on visibility transitions — if the element starts visible at the
+              // bottom, the initial fire is blocked by the paused state and never
+              // re-fires since there is no transition).
               (0, _dispatchCustomEvent.default)(_ChatWidgetEvents.default.ADD_ACTIVITY, {
                 activity: {
                   from: {
                     role: "bot"
                   },
-                  timestamp: 0,
+                  timestamp: new Date(1).toISOString(),
                   type: "message",
                   channelData: {
-                    tags: [_Constants.Constants.persistentChatHistoryMessagePullTriggerTag]
+                    tags: [_Constants.Constants.persistentChatHistoryMessagePullTriggerTag],
+                    "webchat:sequence-id": 1
                   }
                 }
               });

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/adaptermiddlewares/formatTagsEgressMiddleware.js

@@ -11,9 +11,7 @@ const FormatEgressTagsMiddleware = () => next => activity => {
   const activity_instance = JSON.parse(JSON.stringify(activity));
   if (activity_instance) {
     if (activity_instance.channelData && activity_instance.channelData.tags) {
-      const {
-        tags
-      } = activity_instance.channelData;
+      const tags = activity_instance.channelData.tags;
       if (typeof tags === "string") {
         return next(activity);
       } else if (tags instanceof Array) {

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/adaptermiddlewares/formatTagsIngressMiddleware.js

@@ -9,9 +9,7 @@ const formatTagsIngressMiddleware = () => next => activity => {
   const activity_instance = JSON.parse(JSON.stringify(activity));
   if (activity_instance) {
     if (activity_instance.channelData && activity_instance.channelData.tags) {
-      const {
-        tags
-      } = activity_instance.channelData;
+      const tags = activity_instance.channelData.tags;
       if (typeof tags === "string") {
         try {
           //If it is json format, parse the tags. Catch block will convert string to array.(We do not need to log anything since its not an error)