@microsoft/omnichannel-chat-widget 1.2.2 → 1.2.3-main.2ce131d

package/lib/cjs/plugins/createChatTranscript.js

@@ -124,7 +124,13 @@ class TranscriptHTMLBuilder {
                 <script>
                     class Translator {
                         static convertTranscriptMessageToActivity(message) {
-                            const {created, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            const {created, OriginalMessageId, id, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            
+                            //it's required to convert the id to a number, otherwise the webchat will not render the messages in the correct order
+                            // if the OrginalMessageId is not present, we can use the id as the sequence id, which is always present.
+                            
+                            const webchatSequenceId = Translator.convertStringValueToInt(OriginalMessageId) || Translator.convertStringValueToInt(id);
+                            
                             const activity = {
                                 from: {
                                     role: 'bot'
@@ -179,7 +185,10 @@ class TranscriptHTMLBuilder {
                                 return {
                                     ...activity,
                                     text,
-                                    timestamp: created
+                                    timestamp: created,
+                                    channelData: { 
+                                        "webchat:sequence-id": webchatSequenceId
+                                    }
                                 }
                             }
 
@@ -192,7 +201,10 @@ class TranscriptHTMLBuilder {
                                         return {
                                             ...activity,
                                             ...partialActivity,
-                                            timestamp: created
+                                            timestamp: created,
+                                            channelData: { 
+                                                "webchat:sequence-id": webchatSequenceId
+                                            }
                                         };
                                     } catch {
 
@@ -203,9 +215,21 @@ class TranscriptHTMLBuilder {
                             return {
                                 ...activity,
                                 text: content,
-                                timestamp: created
+                                timestamp: created,
+                                channelData: { 
+                                    "webchat:sequence-id": webchatSequenceId
+                                }
                             };
                         }
+                        
+                        static convertStringValueToInt(value) {
+                            if (typeof value !== "string" || value === "") {
+                                return undefined;
+                            }
+
+                            const result = parseInt(value);
+                            return isNaN(result) ? undefined : result;
+                        }
                     }
                 <\/script>
                 <script>

package/lib/esm/common/Constants.js

@@ -51,7 +51,8 @@ _defineProperty(Constants, "prefixTimestampTag", "ServerMessageTimestamp_");
 _defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
 _defineProperty(Constants, "publicMessageTag", "public");
 //attachmentMiddleware
-_defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
+_defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth", "application/vnd.microsoft.card.video"]);
+_defineProperty(Constants, "adaptiveCardContentTypePrefix", "application/vnd.microsoft.card");
 _defineProperty(Constants, "maxUploadFileSize", "500000");
 _defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp|webp)$/i);
 _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|amr|flac|mp2|mp3|pcm|wav|wma)$/i);
@@ -109,6 +110,9 @@ _defineProperty(Constants, "LWICheckOnVisibilityTimeout", 3 * 60 * 1000);
 // Popup mode custom context response event message name
 _defineProperty(Constants, "InitContextParamsRequest", "initContextParamsRequest");
 _defineProperty(Constants, "InitContextParamsResponse", "initContextParamsResponse");
+_defineProperty(Constants, "OCOriginalMessageId", "OriginalMessageId");
+_defineProperty(Constants, "WebchatSequenceIdAttribute", "webchat:sequence-id");
+_defineProperty(Constants, "MessageSequenceIdOverride", "MessageSequenceIdOverride");
 export const Regex = (_class = class Regex {}, _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
 export class HtmlIdNames {}
 _defineProperty(HtmlIdNames, "MSLiveChatWidget", "MSLiveChatWidget");

package/lib/esm/components/livechatwidget/common/initWebChatComposer.js

@@ -29,6 +29,7 @@ import htmlTextMiddleware from "../../webchatcontainerstateful/webchatcontroller
 import preProcessingMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/preProcessingMiddleware";
 import sanitizationMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/sanitizationMiddleware";
 import DOMPurify from "dompurify";
+import createMessageSequenceIdOverrideMiddleware from "../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/messageSequenceIdOverrideMiddleware";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const initWebChatComposer = (props, state, dispatch, chatSDK) => {
@@ -68,7 +69,7 @@ export const initWebChatComposer = (props, state, dispatch, chatSDK) => {
     };
     webChatStore = createStore({},
     //initial state
-    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), channelDataMiddleware, createConversationEndMiddleware(conversationEndCallback), createDataMaskingMiddleware((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), createMessageTimeStampMiddleware, gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware, createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware,
+    preProcessingMiddleware, attachmentProcessingMiddleware, createAttachmentUploadValidatorMiddleware((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.allowedFileExtensions, (_state$domainStates$l2 = state.domainStates.liveChatConfig) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.maxUploadFileSize, localizedTexts), channelDataMiddleware, createConversationEndMiddleware(conversationEndCallback), createDataMaskingMiddleware((_state$domainStates$l3 = state.domainStates.liveChatConfig) === null || _state$domainStates$l3 === void 0 ? void 0 : _state$domainStates$l3.DataMaskingInfo), createMessageTimeStampMiddleware, createMessageSequenceIdOverrideMiddleware, gifUploadMiddleware, htmlPlayerMiddleware, htmlTextMiddleware, createMaxMessageSizeValidator(localizedTexts), sanitizationMiddleware,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ...(((_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.storeMiddlewares) ?? []));
     WebChatStoreLoader.store = webChatStore;

package/lib/esm/components/livechatwidget/common/reconnectChatHelper.js

@@ -8,10 +8,11 @@ import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 
+// Return value: should start normal chat flow when reconnect is enabled
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleChatReconnect = async (chatSDK, props, dispatch, setAdapter, initStartChat, state) => {
   var _props$chatConfig, _props$chatConfig$Liv;
-  if (!isReconnectEnabled(props.chatConfig) || isPersistentEnabled(props.chatConfig)) return;
+  if (!isReconnectEnabled(props.chatConfig) || isPersistentEnabled(props.chatConfig)) return false;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const isAuthenticatedChat = (_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction ? true : false;
@@ -23,14 +24,14 @@ const handleChatReconnect = async (chatSDK, props, dispatch, setAdapter, initSta
   if (reconnectChatContext !== null && reconnectChatContext !== void 0 && reconnectChatContext.redirectURL) {
     var _props$reconnectChatP;
     redirectPage(reconnectChatContext.redirectURL, (_props$reconnectChatP = props.reconnectChatPaneProps) === null || _props$reconnectChatP === void 0 ? void 0 : _props$reconnectChatP.redirectInSameWindow);
-    return;
+    return false;
   }
   if (hasReconnectId(reconnectChatContext)) {
     var _props$reconnectChatP2, _props$reconnectChatP3;
     //if reconnect id is provided in props, don't show reconnect pane
     if ((_props$reconnectChatP2 = props.reconnectChatPaneProps) !== null && _props$reconnectChatP2 !== void 0 && _props$reconnectChatP2.reconnectId && !isNullOrEmptyString((_props$reconnectChatP3 = props.reconnectChatPaneProps) === null || _props$reconnectChatP3 === void 0 ? void 0 : _props$reconnectChatP3.reconnectId)) {
-      await setReconnectIdAndStartChat(isAuthenticatedChat, chatSDK, props, dispatch, setAdapter, reconnectChatContext.reconnectId ?? "", initStartChat);
-      return;
+      await setReconnectIdAndStartChat(isAuthenticatedChat, chatSDK, state, props, dispatch, setAdapter, reconnectChatContext.reconnectId ?? "", initStartChat);
+      return false;
     }
 
     //show reconnect pane
@@ -43,8 +44,12 @@ const handleChatReconnect = async (chatSDK, props, dispatch, setAdapter, initSta
       type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
       payload: ConversationState.ReconnectChat
     });
-    return;
+    return false;
   }
+
+  // If we have reached this point, it means there is no valid reconnect id or redirectUrl
+  // This is a unauth reconnect refresh scenario - returns true so that we can start normal hydration process
+  return true;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -81,7 +86,7 @@ const getChatReconnectContext = async (chatSDK, chatConfig, props, isAuthenticat
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, props, dispatch, setAdapter, reconnectId, initStartChat) => {
+const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, state, props, dispatch, setAdapter, reconnectId, initStartChat) => {
   if (!isAuthenticatedChat) {
     const startUnauthenticatedReconnectChat = {
       eventName: BroadcastEvent.StartUnauthenticatedReconnectChat
@@ -99,7 +104,7 @@ const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, props, d
     type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
     payload: ConversationState.Loading
   });
-  await initStartChat(chatSDK, dispatch, setAdapter, props, optionalParams);
+  await initStartChat(chatSDK, dispatch, setAdapter, state, props, optionalParams);
 };
 const redirectPage = (redirectURL, redirectInSameWindow) => {
   const redirectPageRequest = {

package/lib/esm/components/livechatwidget/common/startChat.js

@@ -295,16 +295,17 @@ const canConnectToExistingChat = async (props, chatSDK, state, dispatch, setAdap
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const setCustomContextParams = async (state, props) => {
-  var _props$chatConfig, _props$chatConfig$Liv, _persistedState$domai8;
+  var _props$chatConfig, _props$chatConfig$Liv, _state$domainStates, _persistedState$domai8;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const isAuthenticatedChat = props !== null && props !== void 0 && (_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction ? true : false;
   //Should not set custom context for auth chat
   if (isAuthenticatedChat) {
     return;
   }
-  if (state !== null && state !== void 0 && state.domainStates.customContext) {
+  if (state !== null && state !== void 0 && (_state$domainStates = state.domainStates) !== null && _state$domainStates !== void 0 && _state$domainStates.customContext) {
+    var _state$domainStates2;
     optionalParams = Object.assign({}, optionalParams, {
-      customContext: JSON.parse(JSON.stringify(state === null || state === void 0 ? void 0 : state.domainStates.customContext))
+      customContext: JSON.parse(JSON.stringify(state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.customContext))
     });
     return;
   }
@@ -352,8 +353,8 @@ const canStartPopoutChat = async props => {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const checkIfConversationStillValid = async (chatSDK, dispatch, state) => {
-  var _state$domainStates, _state$domainStates$l;
-  const requestIdFromCache = (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_state$domainStates$l = _state$domainStates.liveChatContext) === null || _state$domainStates$l === void 0 ? void 0 : _state$domainStates$l.requestId;
+  var _state$domainStates3, _state$domainStates3$;
+  const requestIdFromCache = (_state$domainStates3 = state.domainStates) === null || _state$domainStates3 === void 0 ? void 0 : (_state$domainStates3$ = _state$domainStates3.liveChatContext) === null || _state$domainStates3$ === void 0 ? void 0 : _state$domainStates3$.requestId;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let conversationDetails = undefined;
 

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

@@ -108,6 +108,16 @@ export const LiveChatWidgetStateful = props => {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const startChat = async (props, localState) => {
+    const isReconnectTriggered = async () => {
+      if (isReconnectEnabled(props.chatConfig) === true && !isPersistentEnabled(props.chatConfig)) {
+        const noValidReconnectId = await handleChatReconnect(chatSDK, props, dispatch, setAdapter, initStartChat, state);
+        // If chat reconnect has kicked in chat state will become Active or Reconnect. So just exit, else go next
+        if (!noValidReconnectId && (state.appStates.conversationState === ConversationState.Active || state.appStates.conversationState === ConversationState.ReconnectChat)) {
+          return true;
+        }
+      }
+      return false;
+    };
     let isChatValid = false;
     //Start a chat from cache/reconnectid
     if (activeCachedChatExist === true) {
@@ -122,29 +132,20 @@ export const LiveChatWidgetStateful = props => {
       //Check if conversation state is not in wrapup or closed state
       isChatValid = await checkIfConversationStillValid(chatSDK, dispatch, state);
       if (isChatValid === true) {
-        //Check if reconnect enabled
-        if (isReconnectEnabled(props.chatConfig) === true && !isPersistentEnabled(props.chatConfig)) {
-          await handleChatReconnect(chatSDK, props, dispatch, setAdapter, initStartChat, state);
-          // If chat reconnect has kicked in chat state will become Active or Reconnect. So just exit, else go next
-          if (state.appStates.conversationState === ConversationState.Active || state.appStates.conversationState === ConversationState.ReconnectChat) {
-            return;
-          }
+        const reconnectTriggered = await isReconnectTriggered();
+        if (!reconnectTriggered) {
+          await initStartChat(chatSDK, dispatch, setAdapter, state, props, optionalParams);
         }
-        await initStartChat(chatSDK, dispatch, setAdapter, state, props, optionalParams);
         return;
       }
     }
     if (isChatValid === false) {
       if (localState) {
         // adding the reconnect logic for the case when customer tries to reconnect from a new browser or InPrivate browser
-        if (isReconnectEnabled(props.chatConfig) === true && !isPersistentEnabled(props.chatConfig)) {
-          await handleChatReconnect(chatSDK, props, dispatch, setAdapter, initStartChat, state);
-          // If chat reconnect has kicked in chat state will become Active or Reconnect. So just exit, else go next
-          if (state.appStates.conversationState === ConversationState.Active || state.appStates.conversationState === ConversationState.ReconnectChat) {
-            return;
-          }
+        const reconnectTriggered = await isReconnectTriggered();
+        if (!reconnectTriggered) {
+          await setPreChatAndInitiateChat(chatSDK, dispatch, setAdapter, undefined, undefined, localState, props);
         }
-        await setPreChatAndInitiateChat(chatSDK, dispatch, setAdapter, undefined, undefined, localState, props);
         return;
       } else {
         var _state$appStates4;

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

@@ -202,12 +202,17 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         id: attachmentId,
         style: atttachmentAdaptiveCardStyles
       }, next(...args));
+    } else if (contentType.startsWith(Constants.adaptiveCardContentTypePrefix)) {
+      console.warn(`${contentType} adaptive card type is currently not supported.`);
     }
     if ((_card$activity$channe = card.activity.channelData) !== null && _card$activity$channe !== void 0 && _card$activity$channe.middlewareData) {
       attachment.contentUrl = card.activity.channelData.middlewareData[attachment.name];
     } else if (attachment !== null && attachment !== void 0 && attachment.tempContentUrl) {
       attachment.contentUrl = attachment.tempContentUrl;
     }
+    if (!attachment.name) {
+      return next(...args);
+    }
     const fileExtension = attachment.name.substring(attachment.name.lastIndexOf(".") + 1, attachment.name.length) || attachment.name;
     const imageExtension = Constants.imageRegex.test(attachment.name);
     const audioExtension = Constants.audioMediaRegex.test(attachment.name);

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

@@ -0,0 +1,58 @@
+import { WebChatActionType } from "../../enums/WebChatActionType";
+import { Constants } from "../../../../../common/Constants";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const createMessageSequenceIdOverrideMiddleware = _ref => {
+  let {
+    dispatch
+  } = _ref;
+  return next => action => {
+    if (isApplicable(action)) {
+      return next(overrideSequenceIdWithOriginalMessageId(action));
+    }
+    return next(action);
+  };
+};
+const isApplicable = action => {
+  return action.type === WebChatActionType.DIRECT_LINE_INCOMING_ACTIVITY && isValidChannel(action) && isWebSequenceIdPresent(action) && lookupOriginalMessageId(action) !== undefined;
+};
+const isValidChannel = action => {
+  var _action$payload, _action$payload$activ;
+  return (action === null || action === void 0 ? void 0 : (_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$activ = _action$payload.activity) === null || _action$payload$activ === void 0 ? void 0 : _action$payload$activ.channelId) === Constants.acsChannel;
+};
+const isChannelDataPresent = action => {
+  var _action$payload2, _action$payload2$acti, _action$payload3, _action$payload3$acti;
+  return (action === null || action === void 0 ? void 0 : (_action$payload2 = action.payload) === null || _action$payload2 === void 0 ? void 0 : (_action$payload2$acti = _action$payload2.activity) === null || _action$payload2$acti === void 0 ? void 0 : _action$payload2$acti.channelData) !== undefined && (action === null || action === void 0 ? void 0 : (_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : (_action$payload3$acti = _action$payload3.activity) === null || _action$payload3$acti === void 0 ? void 0 : _action$payload3$acti.channelData) !== null;
+};
+const isWebSequenceIdPresent = action => {
+  if (!isChannelDataPresent(action)) return false;
+  const channelData = action.payload.activity.channelData;
+  return Object.keys(channelData).some(key => {
+    return key === Constants.WebchatSequenceIdAttribute;
+  });
+};
+const overrideSequenceIdWithOriginalMessageId = action => {
+  const originalMessageId = extractOriginalMessageId(action);
+  const channelData = action.payload.activity.channelData;
+  if (originalMessageId === undefined) return action;
+  Object.keys(channelData).forEach(function (key) {
+    if (key === Constants.WebchatSequenceIdAttribute && action.payload.activity.channelData[key] !== originalMessageId) {
+      action.payload.activity.channelData[key] = originalMessageId;
+    }
+  });
+  return action;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+const extractOriginalMessageId = action => {
+  const originalMessageId = lookupOriginalMessageId(action);
+  if (typeof originalMessageId !== "string" || originalMessageId === "") {
+    return undefined;
+  }
+  const originalMessageIdResult = parseInt(originalMessageId);
+  return isNaN(originalMessageIdResult) ? undefined : originalMessageIdResult;
+};
+const lookupOriginalMessageId = action => {
+  var _action$payload4, _action$payload4$acti, _action$payload4$acti2, _action$payload4$acti3;
+  return action === null || action === void 0 ? void 0 : (_action$payload4 = action.payload) === null || _action$payload4 === void 0 ? void 0 : (_action$payload4$acti = _action$payload4.activity) === null || _action$payload4$acti === void 0 ? void 0 : (_action$payload4$acti2 = _action$payload4$acti.channelData) === null || _action$payload4$acti2 === void 0 ? void 0 : (_action$payload4$acti3 = _action$payload4$acti2.metadata) === null || _action$payload4$acti3 === void 0 ? void 0 : _action$payload4$acti3.OriginalMessageId;
+};
+export default createMessageSequenceIdOverrideMiddleware;