@microsoft/omnichannel-chat-widget 1.8.4-main.2e1ef38 → 1.8.4-main.40cbfab

package/README.md

@@ -177,7 +177,7 @@ Header's and Footer's child components consist of three parts:
 1. "middleGroup" - adding child components in the middle of the Header/Footer
 1. "rightGroup" - adding child components at the right of the Header/Footer
 
-By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#ComponentOverrides). In addition, other custom child components can be added to both Header and Footer by creating custom react nodes and adding them to attributes "leftGroup", "middleGroup" or "rightGroup" of "controlProps".
+By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#componentoverrides). In addition, other custom child components can be added to both Header and Footer by creating custom react nodes and adding them to attributes "leftGroup", "middleGroup" or "rightGroup" of "controlProps".
 
 ```js
 const buttonStyleProps: IButtonStyles = {
@@ -224,8 +224,10 @@ const customizedFooterProp: IFooterProps = {
 > :pushpin: Note that [WebChat hooks](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/HOOKS.md) can also be used in any custom components.
 
 #### Bidirectional Custom Events
+
 - Sending events from a hosting web page to bots/agents
-    - Register a function to post event
+  - Register a function to post event
+
         ```js
         //define sendCustomEvent function
         const sendCustomEvent = (payload) => {
@@ -253,7 +255,9 @@ const customizedFooterProp: IFooterProps = {
             }
         })
         ```
-    - Receiving events from bots/agents
+
+  - Receiving events from bots/agents
+
         ```js
         //define setOnCustomEvent function
         const setOnCustomEvent = (callback) => {
@@ -269,8 +273,10 @@ const customizedFooterProp: IFooterProps = {
         ```
 
 #### Trigger initiateEndChat event
+
 Customer can trigger the initiateEndChat event via BroadcastService to end a chat session.
 When needed, the payload below could be triggered:
+
 ```js
 const endChatEvent = {
     eventName: "InitiateEndChat",
@@ -283,18 +289,21 @@ BroadcastService.postMessage(endChatEvent);
 
 The payload of the event is optional, only needed when force closing of a persistent chat session is not required.
 When chat widget receives the event without any payload, it will:
+
 1. set the widget to closed state, the widget panel will be minimized. Post chat survey will not be displayed.
 2. trigger a sessionclose service network request to OmniChannel services.
 
 If skipSessionCloseForPersistentChat is set to true. The session close network request will not be triggered, instead, if postChat survey is available, post chat survey will be displayed.
 
 After successfully processed initiateEndChat event. The CloseChat event is broadcasted.
+
 ```js
 BroadcastService.getMessageByEventName("CloseChat").subscribe(async (msg) => {
     console.log("close chat received: ", msg);
     //more actions to unmount component and resources
 })
 ```
+
 ## See Also
 
 [Customizations Dev Guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md)\

package/lib/cjs/common/telemetry/TelemetryConstants.js

@@ -318,10 +318,16 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["LCWLazyLoadNoMoreHistory"] = "LCWLazyLoadNoMoreHistory";
   TelemetryEvent["LCWLazyLoadHistoryError"] = "LCWLazyLoadHistoryError";
   TelemetryEvent["LCWLazyLoadDestroyed"] = "LCWLazyLoadDestroyed";
+  TelemetryEvent["LCWLazyLoadTriggerFired"] = "LCWLazyLoadTriggerFired";
+  TelemetryEvent["LCWLazyLoadBatchReceived"] = "LCWLazyLoadBatchReceived";
+  TelemetryEvent["LCWLazyLoadInitialLoadComplete"] = "LCWLazyLoadInitialLoadComplete";
+  TelemetryEvent["LCWLazyLoadScrollAnchorApplied"] = "LCWLazyLoadScrollAnchorApplied";
   TelemetryEvent["SecureEventBusUnauthorizedDispatch"] = "SecureEventBusUnauthorizedDispatch";
   TelemetryEvent["SecureEventBusListenerError"] = "SecureEventBusListenerError";
   TelemetryEvent["SecureEventBusDispatchError"] = "SecureEventBusDispatchError";
   TelemetryEvent["StartChatComplete"] = "StartChatComplete";
+  TelemetryEvent["AgentJoinedConversation"] = "AgentJoinedConversation";
+  TelemetryEvent["BrowserTabHidden"] = "BrowserTabHidden";
 })(TelemetryEvent || (exports.TelemetryEvent = TelemetryEvent = {}));
 let TelemetryConstants = /*#__PURE__*/function () {
   function TelemetryConstants() {
@@ -392,6 +398,8 @@ let TelemetryConstants = /*#__PURE__*/function () {
         case TelemetryEvent.SecureEventBusUnauthorizedDispatch:
         case TelemetryEvent.SecureEventBusListenerError:
         case TelemetryEvent.SecureEventBusDispatchError:
+        case TelemetryEvent.AgentJoinedConversation:
+        case TelemetryEvent.BrowserTabHidden:
           return ScenarioType.ACTIONS;
         case TelemetryEvent.StartChatSDKCall:
         case TelemetryEvent.StartChatEventReceived:

package/lib/cjs/components/livechatwidget/common/ChatWidgetEvents.js

@@ -10,6 +10,7 @@ var ChatWidgetEvents;
   ChatWidgetEvents["FETCH_PERSISTENT_CHAT_HISTORY"] = "CHAT_WIDGET/FETCH_PERSISTENT_CHAT_HISTORY";
   ChatWidgetEvents["NO_MORE_HISTORY_AVAILABLE"] = "CHAT_WIDGET/NO_MORE_HISTORY_AVAILABLE";
   ChatWidgetEvents["HISTORY_LOAD_ERROR"] = "CHAT_WIDGET/HISTORY_LOAD_ERROR";
+  ChatWidgetEvents["HISTORY_BATCH_LOADED"] = "CHAT_WIDGET/HISTORY_BATCH_LOADED";
 })(ChatWidgetEvents || (ChatWidgetEvents = {}));
 var _default = ChatWidgetEvents;
 exports.default = _default;

package/lib/cjs/components/livechatwidget/common/PersistentConversationHandler.js

@@ -133,6 +133,12 @@ let PersistentConversationHandler = /*#__PURE__*/function () {
         }
         const messagesDescOrder = (_ref = [...messages]) === null || _ref === void 0 ? void 0 : _ref.reverse();
         this.processHistoryMessages(messagesDescOrder);
+
+        // Signal that a batch of history messages has been added to the store.
+        // LazyLoadActivity subscribes to this to apply scroll anchoring after render.
+        (0, _dispatchCustomEvent.default)(_ChatWidgetEvents.default.HISTORY_BATCH_LOADED, {
+          messageCount: messages.length
+        });
         _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
           Event: _TelemetryConstants.TelemetryEvent.LCWPersistentHistoryPullCompleted,
           Description: "History pull completed successfully",
@@ -241,6 +247,9 @@ let PersistentConversationHandler = /*#__PURE__*/function () {
     value: function processMessageToActivity(message) {
       try {
         const activity = (0, _convertPersistentChatHistoryMessageToActivity.default)(message);
+        if (!activity) {
+          return null;
+        }
         activity.id = activity.id || `activity-${this.count}`;
         activity.channelData = {
           ...activity.channelData,

package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js

@@ -54,6 +54,7 @@ var _initConfirmationPropsComposer = require("../common/initConfirmationPropsCom
 var _initWebChatComposer = require("../common/initWebChatComposer");
 var _defaultCacheManager = require("../../../common/storage/default/defaultCacheManager");
 var _setPostChatContextAndLoadSurvey = require("../common/setPostChatContextAndLoadSurvey");
+var _liveChatConfigUtils = require("../common/liveChatConfigUtils");
 var _startProactiveChat = require("../common/startProactiveChat");
 var _useChatAdapterStore = _interopRequireDefault(require("../../../hooks/useChatAdapterStore"));
 var _useChatContextStore = _interopRequireDefault(require("../../../hooks/useChatContextStore"));
@@ -736,7 +737,15 @@ const LiveChatWidgetStateful = props => {
     if (state.appStates.isMinimized) {
       _ActivityStreamHandler.ActivityStreamHandler.cork();
     } else {
-      setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+      var _state$domainStates4;
+      const extendedChatConfig = state === null || state === void 0 ? void 0 : (_state$domainStates4 = state.domainStates) === null || _state$domainStates4 === void 0 ? void 0 : _state$domainStates4.liveChatConfig;
+      if ((0, _liveChatConfigUtils.shouldLoadPersistentChatHistory)(extendedChatConfig)) {
+        requestAnimationFrame(() => {
+          setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+        });
+      } else {
+        setTimeout(() => _ActivityStreamHandler.ActivityStreamHandler.uncork(), 500);
+      }
     }
   }, [state.appStates.isMinimized]);
 
@@ -893,6 +902,25 @@ const LiveChatWidgetStateful = props => {
       }
     });
   }, []);
+
+  // Reliable browser close detection via visibilitychange + sendBeacon
+  // visibilitychange fires while the page is still alive (unlike beforeunload),
+  // so telemetry calls complete reliably. False positives (tab switch, minimize)
+  // are filtered in Kusto by checking if this is the last event in the session.
+  (0, _react2.useEffect)(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && state.appStates.conversationState === _ConversationState.ConversationState.Active) {
+        _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+          Event: _TelemetryConstants.TelemetryEvent.BrowserTabHidden,
+          Description: "Browser tab hidden during active conversation"
+        });
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [state.appStates.conversationState]);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {

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

@@ -151,10 +151,18 @@ const WebChatContainerStateful = props => {
     document.addEventListener("click", clickHandler);
     return () => document.removeEventListener("click", clickHandler);
   }, [state]);
+  const minimizedStyles = state.appStates.isMinimized ? shouldLoadPersistentHistoryMessages ? {
+    visibility: "hidden",
+    position: "absolute",
+    width: 0,
+    height: 0,
+    overflow: "hidden",
+    pointerEvents: "none"
+  } : {
+    display: "none"
+  } : {};
   const containerStyles = {
-    root: Object.assign({}, _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, {
-      display: state.appStates.isMinimized ? "none" : ""
-    }) // Use this instead of removing WebChat from the picture so that the activity observer inside the adapter is not invoked
+    root: Object.assign({}, _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.containerStyles, webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : webChatContainerProps.containerStyles, minimizedStyles) // Use visibility-based hiding instead of display:none to preserve scroll position across minimize/maximize
   };
 
   const localizedTexts = {

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

@@ -24,15 +24,24 @@ const convertStringValueToInt = value => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const convertPersistentChatHistoryMessageToActivity = message => {
-  var _from$user, _from$application;
+  var _from$application, _from$user, _from$application2;
   const {
     additionalData,
     attachments,
+    botContentType,
     content,
     created,
     from,
     transcriptOriginalMessageId
   } = message;
+  const isFromCustomer = (from === null || from === void 0 ? 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,
@@ -69,43 +78,107 @@ const convertPersistentChatHistoryMessageToActivity = message => {
       name: from.user.displayName
     };
   }
-  if ((from === null || from === void 0 ? void 0 : (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer") {
+  if ((from === null || from === void 0 ? 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 _from$application2, _parsedContent, _parsedContent$value;
-    // Check if content contains adaptive card or rich card JSON using SupportedAdaptiveCards enum
-    const isAdaptiveCard = content.toLowerCase().includes(_Constants.Constants.AdaptiveCardType);
-    const isSuggestedActions = content.toLowerCase().includes(_Constants.Constants.SuggestedActionsType);
-    const containsSupportedCard = Object.values(_SupportedAdaptiveCards.SupportedAdaptiveCards).some(type => content.toLowerCase().includes(type.toLowerCase()));
+    var _parsedContent, _parsedContent$value;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let parsedContent;
     try {
       parsedContent = JSON.parse(content);
     } catch (error) {
-      console.error("Failed to parse content as JSON:", 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
-    const isFromCustomer = (from === null || from === void 0 ? void 0 : (_from$application2 = from.application) === null || _from$application2 === void 0 ? void 0 : _from$application2.displayName) === "Customer";
     if (isFromCustomer && ((_parsedContent = parsedContent) === null || _parsedContent === void 0 ? void 0 : (_parsedContent$value = _parsedContent.value) === null || _parsedContent$value === void 0 ? void 0 : _parsedContent$value.type) === "RichObjectMessage_Form") {
       return null;
     }
-    if (parsedContent && (isAdaptiveCard || isSuggestedActions || containsSupportedCard)) {
-      return {
-        ...activity,
-        ...parsedContent,
-        timestamp,
-        channelData: {
-          ...activity.channelData,
-          "webchat:sequence-id": webchatSequenceId
-        }
-      };
+    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

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

@@ -76,15 +76,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
                   }
                 }
               });