@microsoft/omnichannel-chat-widget 1.0.1-main.068a14e → 1.0.2-main.2112105

package/lib/cjs/common/Constants.js

@@ -92,6 +92,7 @@ _defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChang
 _defineProperty(Constants, "PostChatLoadingDurationInMs", 2000);
 _defineProperty(Constants, "BrowserUnloadConfirmationMessage", "Do you want to leave chat?");
 _defineProperty(Constants, "CacheTtlInMinutes", 15);
+_defineProperty(Constants, "LWICheckOnVisibilityTimeout", 3 * 60 * 1000);
 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);
 exports.Regex = Regex;
 class HtmlIdNames {}

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

@@ -198,6 +198,7 @@ exports.TelemetryEvent = TelemetryEvent;
   TelemetryEvent["PostChatContextCallFailed"] = "PostChatContextCallFailed";
   TelemetryEvent["PostChatSurveyLoadingPaneLoaded"] = "PostChatSurveyLoadingPaneLoaded";
   TelemetryEvent["PostChatSurveyLoaded"] = "PostChatSurveyLoaded";
+  TelemetryEvent["ChatDisconnectThreadEventReceived"] = "ChatDisconnectThreadEventReceived";
 })(TelemetryEvent || (exports.TelemetryEvent = TelemetryEvent = {}));
 class TelemetryConstants {
   static map(eventTypeOrScenarioType) {

package/lib/cjs/common/utils.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.getBroadcastChannelName = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.getConversationDetailsCall = exports.getBroadcastChannelName = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.debounceLeading = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
 var _Constants = require("./Constants");
 var _DataStoreManager = require("./contextDataStore/DataStoreManager");
 var _KeyCodes = require("./KeyCodes");
 var _TelemetryConstants = require("./telemetry/TelemetryConstants");
 var _md5Typescript = require("md5-typescript");
+var _TelemetryHelper = require("./telemetry/TelemetryHelper");
 var _this = void 0;
 const getElementBySelector = selector => {
   let element;
@@ -355,4 +356,22 @@ const debounceLeading = function (fn) {
     }, ms);
   };
 };
-exports.debounceLeading = debounceLeading;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+exports.debounceLeading = debounceLeading;
+const getConversationDetailsCall = async chatSDK => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let conversationDetails = undefined;
+  try {
+    conversationDetails = await chatSDK.getConversationDetails();
+  } catch (error) {
+    _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {
+      Event: _TelemetryConstants.TelemetryEvent.GetConversationDetailsCallFailed,
+      ExceptionDetails: {
+        exception: `Get Conversation Details Call Failed : ${error}`
+      }
+    });
+  }
+  return conversationDetails;
+};
+exports.getConversationDetailsCall = getConversationDetailsCall;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleChatDisconnect = void 0;
+var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
+var _NotificationScenarios = require("../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios");
+var _defaultMiddlewareLocalizedTexts = require("../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts");
+var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
+var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const handleChatDisconnect = (props, state, setWebChatStyles) => {
+  var _state$appStates;
+  if (state !== null && state !== void 0 && (_state$appStates = state.appStates) !== null && _state$appStates !== void 0 && _state$appStates.chatDisconnectEventReceived) {
+    var _props$webChatContain, _props$webChatContain2;
+    if ((props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.hideSendboxOnConversationEnd) !== false) {
+      setWebChatStyles(styles => {
+        return {
+          ...styles,
+          hideSendBox: true
+        };
+      });
+    }
+    _NotificationHandler.NotificationHandler.notifyWarning(_NotificationScenarios.NotificationScenarios.ChatDisconnect, _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_CHAT_DISCONNECT);
+    _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+      Event: _TelemetryConstants.TelemetryEvent.ChatDisconnectThreadEventReceived,
+      Description: "Chat disconnected due to timeout, left or removed."
+    });
+  }
+};
+exports.handleChatDisconnect = handleChatDisconnect;

package/lib/cjs/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -1756,13 +1756,19 @@ const dummyDefaultProps = {
       }
     },
     localizedTexts: {
+      /*
+      MIDDLEWARE_BANNER_FILE parameters:
+      {0} = File limit size
+      {1} = File extension
+      {2} = File name
+      */
       MIDDLEWARE_BANNER_FILE_NULL_ERROR: "There was an error uploading the file, please try again.",
-      MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
-      MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and {1} files are not supported.",
-      MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file with an appropriate file extension.",
-      MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{0} files are not supported.",
-      MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File exceeds the allowed limit of {0} MB.",
-      MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file can't be attached because it's empty. Please try again with a different file.",
+      MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
+      MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and {1} files are not supported.",
+      MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file {2} with an appropriate file extension.",
+      MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{1} files are not supported.",
+      MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File {2} exceeds the allowed limit of {0} MB.",
+      MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file {2} can't be attached because it's empty. Please try again with a different file.",
       MIDDLEWARE_BANNER_ERROR_MESSAGE: "Upload failed, please try again.",
       MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE: "You're back online.",
       MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION: "Unable to connect—please check your internet connection.",
@@ -1775,7 +1781,8 @@ const dummyDefaultProps = {
       MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
       MIDDLEWARE_MESSAGE_RETRY: "Retry",
       PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
-      MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external."
+      MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external.",
+      MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
     },
     botMagicCode: {
       disabled: false,

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

@@ -93,6 +93,10 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
     type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_RECONNECT_ID,
     payload: undefined
   });
+  dispatch({
+    type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
+    payload: false
+  });
   if (!skipCloseChat) {
     try {
       var _props$webChatContain;

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

@@ -53,6 +53,7 @@ var _useChatSDKStore = _interopRequireDefault(require("../../../hooks/useChatSDK
 var _ConversationEndEntity = require("../../../contexts/common/ConversationEndEntity");
 var _agentEndConversationHelper = require("../common/agentEndConversationHelper");
 var _reconnectChatHelper = require("../common/reconnectChatHelper");
+var _chatDisconnectHelper = require("../common/chatDisconnectHelper");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,6 +88,7 @@ const LiveChatWidgetStateful = props => {
   _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer = (0, _utils.createTimer)();
   const widgetElementId = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.id) || "oc-lcw";
   const currentMessageCountRef = (0, _react2.useRef)(0);
+  const lastLWICheckTimeRef = (0, _react2.useRef)(0);
   let widgetStateEventName = "";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let optionalParams;
@@ -253,7 +255,7 @@ const LiveChatWidgetStateful = props => {
     });
 
     // Toggle chat visibility
-    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.HideChatVisibilityChangeEvent).subscribe(event => {
+    _omnichannelChatComponents.BroadcastService.getMessageByEventName(_TelemetryConstants.BroadcastEvent.HideChatVisibilityChangeEvent).subscribe(async event => {
       var _event$payload;
       if ((event === null || event === void 0 ? void 0 : (_event$payload = event.payload) === null || _event$payload === void 0 ? void 0 : _event$payload.isChatHidden) !== undefined) {
         var _event$payload2, _props$controlProps10;
@@ -268,6 +270,21 @@ const LiveChatWidgetStateful = props => {
             payload: event === null || event === void 0 ? void 0 : (_event$payload3 = event.payload) === null || _event$payload3 === void 0 ? void 0 : _event$payload3.isChatHidden
           });
         }
+        const dateNow = Date.now();
+        if (dateNow - lastLWICheckTimeRef.current > _Constants.Constants.LWICheckOnVisibilityTimeout) {
+          const conversationDetails = await (0, _utils.getConversationDetailsCall)(chatSDK);
+          lastLWICheckTimeRef.current = dateNow;
+          if ((conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === _Constants.LiveWorkItemState.WrapUp || (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === _Constants.LiveWorkItemState.Closed) {
+            dispatch({
+              type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
+              payload: true
+            });
+            _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+              Event: _TelemetryConstants.TelemetryEvent.ChatDisconnectThreadEventReceived,
+              Description: "Chat disconnected due to timeout, left or removed."
+            });
+          }
+        }
       }
     });
 
@@ -487,6 +504,13 @@ const LiveChatWidgetStateful = props => {
       (0, _agentEndConversationHelper.handleAgentEndConversation)(props, state, dispatch);
     }
   }, [state.appStates.conversationEndedByAgentEventReceived]);
+
+  // Handle Chat disconnect cases
+  (0, _react2.useEffect)(() => {
+    if (state.appStates.chatDisconnectEventReceived) {
+      (0, _chatDisconnectHelper.handleChatDisconnect)(props, state, setWebChatStyles);
+    }
+  }, [state.appStates.chatDisconnectEventReceived]);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {

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

@@ -4,14 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultMiddlewareLocalizedTexts = void 0;
+/* 
+MIDDLEWARE_BANNER_FILE parameters:
+{0} = File limit size
+{1} = File extension
+{2} = File name 
+*/
+
 const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_BANNER_FILE_NULL_ERROR: "There was an error uploading the file, please try again.",
-  MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
-  MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and {1} files are not supported.",
-  MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file with an appropriate file extension.",
-  MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{0} files are not supported.",
-  MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File exceeds the allowed limit of {0} MB.",
-  MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file can't be attached because it's empty. Please try again with a different file.",
+  MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
+  MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and {1} files are not supported.",
+  MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file {2} with an appropriate file extension.",
+  MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{1} files are not supported.",
+  MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File {2} exceeds the allowed limit of {0} MB.",
+  MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file {2} can't be attached because it's empty. Please try again with a different file.",
   MIDDLEWARE_BANNER_ERROR_MESSAGE: "Upload failed, please try again.",
   MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE: "You’re back online.",
   MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION: "Unable to connect—please check your internet connection.",
@@ -22,6 +29,7 @@ const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_MESSAGE_SENDING: "Sending ...",
   MIDDLEWARE_MESSAGE_DELIVERED: "Sent",
   MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
-  MIDDLEWARE_MESSAGE_RETRY: "Retry"
+  MIDDLEWARE_MESSAGE_RETRY: "Retry",
+  MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
 };
 exports.defaultMiddlewareLocalizedTexts = defaultMiddlewareLocalizedTexts;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js

@@ -13,4 +13,5 @@ exports.NotificationScenarios = NotificationScenarios;
   NotificationScenarios["AttachmentError"] = "attachment";
   NotificationScenarios["InternetConnection"] = "internet connection";
   NotificationScenarios["MaxSizeError"] = "max size";
+  NotificationScenarios["ChatDisconnect"] = "chat disconnect";
 })(NotificationScenarios || (exports.NotificationScenarios = NotificationScenarios = {}));

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -76,6 +76,11 @@ const getMaxUploadFileSize = (maxFileSizeSupportedByDynamicsStr, contentType) =>
 const isImage = contentType => {
   return _Constants.AMSConstants.supportedImagesMimeTypes.includes(contentType);
 };
+const textEllipsis = function (str) {
+  let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+  const ellipsis = "...";
+  return str.length > maxLength ? str.slice(0, maxLength - ellipsis.length) + ellipsis : str;
+};
 const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize, fileIsEmpty, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
   let errorMessage = "";
   if (!fileName || !maxUploadFileSize) {
@@ -91,10 +96,11 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
   if (!supportedFileExtension && !supportedFileSize) {
     errorMessage = getFileSizeAndFileExtensionErrorMessage(fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
   } else if (!supportedFileSize) {
-    errorMessage = getFileSizeErrorMessage(maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
+    errorMessage = getFileSizeErrorMessage(fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
   } else if (!supportedFileExtension) {
     errorMessage = getFileExtensionErrorMessage(fileName, localizedTexts);
   } else if (fileIsEmpty) {
+    var _errorMessage;
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
       Description: "Attachment validation failed",
@@ -102,7 +108,8 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
         ErrorDetails: "File provided is empty"
       }
     });
-    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR ?? "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR || "";
+    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{2}")) errorMessage = errorMessage.replace("{2}", textEllipsis(fileName));
   } else {
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -116,19 +123,18 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
   return errorMessage;
 };
 const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  var _errorMessage3;
   const index = fileName.lastIndexOf(".");
   let errorMessage, exceptionDetails;
   if (index < 0) {
     errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR;
     exceptionDetails = `File exceeded the allowed limit of ${maxUploadFileSize} MB and File provided without file extension`;
   } else {
-    var _errorMessage;
+    var _errorMessage2;
     const fileExtension = fileName.substring(index);
     errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR;
+    if ((_errorMessage2 = errorMessage) !== null && _errorMessage2 !== void 0 && _errorMessage2.includes("{1}")) errorMessage = errorMessage.replace("{1}", fileExtension);
     exceptionDetails = `File exceeds the allowed limit of ${maxUploadFileSize} MB and ${fileExtension} files are not supported`;
-    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{1}")) {
-      errorMessage = errorMessage.replace("{1}", fileExtension);
-    }
   }
   _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
     Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -137,10 +143,12 @@ const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, ma
       ErrorDetails: `${exceptionDetails} Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${_Constants.AMSConstants.maxSupportedImageSize} AMS file size limit=${_Constants.AMSConstants.maxSupportedFileSize}`
     }
   });
-  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+  if ((_errorMessage3 = errorMessage) !== null && _errorMessage3 !== void 0 && _errorMessage3.includes("{0}")) errorMessage = errorMessage.replace("{0}", maxUploadFileSize);
+  return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
 };
 const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
   const index = fileName.lastIndexOf(".");
+  let errorMessage;
   if (index < 0) {
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -149,8 +157,10 @@ const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
         ErrorDetails: "File provided without file extension"
       }
     });
-    return localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION ?? "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION;
+    return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
   } else {
+    var _errorMessage4, _errorMessage5;
     const fileExtension = fileName.substring(index);
     _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
       Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -159,11 +169,14 @@ const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
         ErrorDetails: `${fileExtension} files extension is not supported.`
       }
     });
-    const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
-    return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", fileExtension) : errorMessage : "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
+    if ((_errorMessage4 = errorMessage) !== null && _errorMessage4 !== void 0 && _errorMessage4.includes("{0}")) errorMessage = errorMessage.replace("{0}", fileExtension); //keeping backwards compatibility for this localized string
+    if ((_errorMessage5 = errorMessage) !== null && _errorMessage5 !== void 0 && _errorMessage5.includes("{1}")) errorMessage = errorMessage.replace("{1}", fileExtension);
+    return errorMessage && errorMessage.length > 0 ? errorMessage : "";
   }
 };
-const getFileSizeErrorMessage = (maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+const getFileSizeErrorMessage = (fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  var _errorMessage6;
   _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.ERROR, {
     Event: _TelemetryConstants.TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
     Description: "Attachment validation failed",
@@ -171,8 +184,9 @@ const getFileSizeErrorMessage = (maxUploadFileSize, maxFileSizeSupportedByDynami
       ErrorDetails: `File exceeds the allowed limit of ${maxUploadFileSize}MB. Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${_Constants.AMSConstants.maxSupportedImageSize} AMS file size limit=${_Constants.AMSConstants.maxSupportedFileSize}`
     }
   });
-  const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_ERROR;
-  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+  let errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_ERROR;
+  if ((_errorMessage6 = errorMessage) !== null && _errorMessage6 !== void 0 && _errorMessage6.includes("{0}")) errorMessage = errorMessage.replace("{0}", maxUploadFileSize);
+  return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars

package/lib/cjs/contexts/common/LiveChatWidgetActionType.js

@@ -47,4 +47,5 @@ exports.LiveChatWidgetActionType = LiveChatWidgetActionType;
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_WORKFLOW_IN_PROGRESS"] = 37] = "SET_POST_CHAT_WORKFLOW_IN_PROGRESS";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INITIAL_CHAT_SDK_REQUEST_ID"] = 38] = "SET_INITIAL_CHAT_SDK_REQUEST_ID";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOULD_USE_BOT_SURVEY"] = 39] = "SET_SHOULD_USE_BOT_SURVEY";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_DISCONNECT_EVENT_RECEIVED"] = 40] = "SET_CHAT_DISCONNECT_EVENT_RECEIVED";
 })(LiveChatWidgetActionType || (exports.LiveChatWidgetActionType = LiveChatWidgetActionType = {}));

package/lib/cjs/contexts/common/LiveChatWidgetContextInitialState.js

@@ -55,7 +55,8 @@ const getLiveChatWidgetContextInitialState = props => {
       conversationEndedByAgentEventReceived: false,
       conversationEndedBy: undefined,
       postChatWorkflowInProgress: false,
-      shouldUseBotSurvey: false
+      shouldUseBotSurvey: false,
+      chatDisconnectEventReceived: false
     },
     uiStates: {
       showConfirmationPane: false,

package/lib/cjs/contexts/createReducer.js

@@ -333,6 +333,14 @@ const createReducer = () => {
             shouldUseBotSurvey: action.payload
           }
         };
+      case _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED:
+        return {
+          ...state,
+          appStates: {
+            ...state.appStates,
+            chatDisconnectEventReceived: action.payload
+          }
+        };
       default:
         return state;
     }

package/lib/esm/common/Constants.js

@@ -85,6 +85,7 @@ _defineProperty(Constants, "ChatWidgetStateChangedPrefix", "ChatWidgetStateChang
 _defineProperty(Constants, "PostChatLoadingDurationInMs", 2000);
 _defineProperty(Constants, "BrowserUnloadConfirmationMessage", "Do you want to leave chat?");
 _defineProperty(Constants, "CacheTtlInMinutes", 15);
+_defineProperty(Constants, "LWICheckOnVisibilityTimeout", 3 * 60 * 1000);
 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/common/telemetry/TelemetryConstants.js

@@ -192,6 +192,7 @@ export let TelemetryEvent;
   TelemetryEvent["PostChatContextCallFailed"] = "PostChatContextCallFailed";
   TelemetryEvent["PostChatSurveyLoadingPaneLoaded"] = "PostChatSurveyLoadingPaneLoaded";
   TelemetryEvent["PostChatSurveyLoaded"] = "PostChatSurveyLoaded";
+  TelemetryEvent["ChatDisconnectThreadEventReceived"] = "ChatDisconnectThreadEventReceived";
 })(TelemetryEvent || (TelemetryEvent = {}));
 export class TelemetryConstants {
   static map(eventTypeOrScenarioType) {

package/lib/esm/common/utils.js

@@ -2,8 +2,9 @@ var _this = this;
 import { AriaTelemetryConstants, Constants, LocaleConstants } from "./Constants";
 import { DataStoreManager } from "./contextDataStore/DataStoreManager";
 import { KeyCodes } from "./KeyCodes";
-import { BroadcastEvent } from "./telemetry/TelemetryConstants";
+import { BroadcastEvent, LogLevel, TelemetryEvent } from "./telemetry/TelemetryConstants";
 import { Md5 } from "md5-typescript";
+import { TelemetryHelper } from "./telemetry/TelemetryHelper";
 const getElementBySelector = selector => {
   let element;
   if (typeof selector === "string") {
@@ -324,4 +325,21 @@ export const debounceLeading = function (fn) {
       timeoutId = null;
     }, ms);
   };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getConversationDetailsCall = async chatSDK => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let conversationDetails = undefined;
+  try {
+    conversationDetails = await chatSDK.getConversationDetails();
+  } catch (error) {
+    TelemetryHelper.logSDKEvent(LogLevel.ERROR, {
+      Event: TelemetryEvent.GetConversationDetailsCallFailed,
+      ExceptionDetails: {
+        exception: `Get Conversation Details Call Failed : ${error}`
+      }
+    });
+  }
+  return conversationDetails;
 };

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

@@ -0,0 +1,26 @@
+import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
+import { NotificationScenarios } from "../../webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios";
+import { defaultMiddlewareLocalizedTexts } from "../../webchatcontainerstateful/common/defaultProps/defaultMiddlewareLocalizedTexts";
+import { LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const handleChatDisconnect = (props, state, setWebChatStyles) => {
+  var _state$appStates;
+  if (state !== null && state !== void 0 && (_state$appStates = state.appStates) !== null && _state$appStates !== void 0 && _state$appStates.chatDisconnectEventReceived) {
+    var _props$webChatContain, _props$webChatContain2;
+    if ((props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.renderingMiddlewareProps) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.hideSendboxOnConversationEnd) !== false) {
+      setWebChatStyles(styles => {
+        return {
+          ...styles,
+          hideSendBox: true
+        };
+      });
+    }
+    NotificationHandler.notifyWarning(NotificationScenarios.ChatDisconnect, defaultMiddlewareLocalizedTexts.MIDDLEWARE_BANNER_CHAT_DISCONNECT);
+    TelemetryHelper.logActionEvent(LogLevel.INFO, {
+      Event: TelemetryEvent.ChatDisconnectThreadEventReceived,
+      Description: "Chat disconnected due to timeout, left or removed."
+    });
+  }
+};
+export { handleChatDisconnect };

package/lib/esm/components/livechatwidget/common/defaultProps/dummyDefaultProps.js

@@ -1750,13 +1750,19 @@ export const dummyDefaultProps = {
       }
     },
     localizedTexts: {
+      /*
+      MIDDLEWARE_BANNER_FILE parameters:
+      {0} = File limit size
+      {1} = File extension
+      {2} = File name
+      */
       MIDDLEWARE_BANNER_FILE_NULL_ERROR: "There was an error uploading the file, please try again.",
-      MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
-      MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and {1} files are not supported.",
-      MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file with an appropriate file extension.",
-      MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{0} files are not supported.",
-      MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File exceeds the allowed limit of {0} MB.",
-      MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file can't be attached because it's empty. Please try again with a different file.",
+      MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
+      MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and {1} files are not supported.",
+      MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file {2} with an appropriate file extension.",
+      MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{1} files are not supported.",
+      MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File {2} exceeds the allowed limit of {0} MB.",
+      MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file {2} can't be attached because it's empty. Please try again with a different file.",
       MIDDLEWARE_BANNER_ERROR_MESSAGE: "Upload failed, please try again.",
       MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE: "You're back online.",
       MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION: "Unable to connect—please check your internet connection.",
@@ -1769,7 +1775,8 @@ export const dummyDefaultProps = {
       MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
       MIDDLEWARE_MESSAGE_RETRY: "Retry",
       PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE: "{0} field is required",
-      MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external."
+      MARKDOWN_EXTERNAL_LINK_ALT: "Opens in a new window; external.",
+      MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
     },
     botMagicCode: {
       disabled: false,

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

@@ -87,6 +87,10 @@ const endChat = async (props, chatSDK, setAdapter, setWebChatStyles, dispatch, a
     type: LiveChatWidgetActionType.SET_RECONNECT_ID,
     payload: undefined
   });
+  dispatch({
+    type: LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
+    payload: false
+  });
   if (!skipCloseChat) {
     try {
       var _props$webChatContain;

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

@@ -4,7 +4,7 @@ import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } f
 import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
-import { createTimer, getBroadcastChannelName, getLocaleDirection, getStateFromCache, getWidgetCacheId, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty } from "../../../common/utils";
+import { createTimer, getBroadcastChannelName, getLocaleDirection, getStateFromCache, getWidgetCacheId, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty, getConversationDetailsCall } from "../../../common/utils";
 import { endChat, prepareEndChat } from "../common/endChat";
 import { shouldShowCallingContainer, shouldShowChatButton, shouldShowConfirmationPane, shouldShowEmailTranscriptPane, shouldShowHeader, shouldShowLoadingPane, shouldShowOutOfOfficeHoursPane, shouldShowPostChatLoadingPane, shouldShowPostChatSurveyPane, shouldShowPreChatSurveyPane, shouldShowProactiveChatPane, shouldShowReconnectChatPane, shouldShowWebChatContainer } from "../../../controller/componentController";
 import { ActivityStreamHandler } from "../common/ActivityStreamHandler";
@@ -14,7 +14,7 @@ import { Components } from "botframework-webchat";
 import ConfirmationPaneStateful from "../../confirmationpanestateful/ConfirmationPaneStateful";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { DataStoreManager } from "../../../common/contextDataStore/DataStoreManager";
-import { Constants, E2VVOptions } from "../../../common/Constants";
+import { Constants, E2VVOptions, LiveWorkItemState } from "../../../common/Constants";
 import { ElementType } from "@microsoft/omnichannel-chat-components";
 import EmailTranscriptPaneStateful from "../../emailtranscriptpanestateful/EmailTranscriptPaneStateful";
 import HeaderStateful from "../../headerstateful/HeaderStateful";
@@ -49,6 +49,7 @@ import useChatSDKStore from "../../../hooks/useChatSDKStore";
 import { ConversationEndEntity } from "../../../contexts/common/ConversationEndEntity";
 import { handleAgentEndConversation } from "../common/agentEndConversationHelper";
 import { handleChatReconnect, isReconnectEnabled } from "../common/reconnectChatHelper";
+import { handleChatDisconnect } from "../common/chatDisconnectHelper";
 export const LiveChatWidgetStateful = props => {
   var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _props$webChatContain3, _props$webChatContain4, _props$styleProps2, _props$controlProps15, _props$controlProps16, _props$componentOverr, _props$controlProps17, _props$componentOverr2, _props$controlProps18, _props$componentOverr3, _props$controlProps19, _props$componentOverr4, _props$controlProps20, _props$componentOverr5, _props$controlProps21, _props$componentOverr6, _props$controlProps22, _props$componentOverr7, _props$controlProps23, _props$controlProps24, _props$componentOverr8, _props$controlProps25, _props$componentOverr9, _props$controlProps26, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
   const [state, dispatch] = useChatContextStore();
@@ -79,6 +80,7 @@ export const LiveChatWidgetStateful = props => {
   TelemetryTimers.LcwLoadToChatButtonTimer = createTimer();
   const widgetElementId = ((_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.id) || "oc-lcw";
   const currentMessageCountRef = useRef(0);
+  const lastLWICheckTimeRef = useRef(0);
   let widgetStateEventName = "";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let optionalParams;
@@ -245,7 +247,7 @@ export const LiveChatWidgetStateful = props => {
     });
 
     // Toggle chat visibility
-    BroadcastService.getMessageByEventName(BroadcastEvent.HideChatVisibilityChangeEvent).subscribe(event => {
+    BroadcastService.getMessageByEventName(BroadcastEvent.HideChatVisibilityChangeEvent).subscribe(async event => {
       var _event$payload;
       if ((event === null || event === void 0 ? void 0 : (_event$payload = event.payload) === null || _event$payload === void 0 ? void 0 : _event$payload.isChatHidden) !== undefined) {
         var _event$payload2, _props$controlProps10;
@@ -260,6 +262,21 @@ export const LiveChatWidgetStateful = props => {
             payload: event === null || event === void 0 ? void 0 : (_event$payload3 = event.payload) === null || _event$payload3 === void 0 ? void 0 : _event$payload3.isChatHidden
           });
         }
+        const dateNow = Date.now();
+        if (dateNow - lastLWICheckTimeRef.current > Constants.LWICheckOnVisibilityTimeout) {
+          const conversationDetails = await getConversationDetailsCall(chatSDK);
+          lastLWICheckTimeRef.current = dateNow;
+          if ((conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === LiveWorkItemState.WrapUp || (conversationDetails === null || conversationDetails === void 0 ? void 0 : conversationDetails.state) === LiveWorkItemState.Closed) {
+            dispatch({
+              type: LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED,
+              payload: true
+            });
+            TelemetryHelper.logActionEvent(LogLevel.INFO, {
+              Event: TelemetryEvent.ChatDisconnectThreadEventReceived,
+              Description: "Chat disconnected due to timeout, left or removed."
+            });
+          }
+        }
       }
     });
 
@@ -479,6 +496,13 @@ export const LiveChatWidgetStateful = props => {
       handleAgentEndConversation(props, state, dispatch);
     }
   }, [state.appStates.conversationEndedByAgentEventReceived]);
+
+  // Handle Chat disconnect cases
+  useEffect(() => {
+    if (state.appStates.chatDisconnectEventReceived) {
+      handleChatDisconnect(props, state, setWebChatStyles);
+    }
+  }, [state.appStates.chatDisconnectEventReceived]);
   const initiateEndChatOnBrowserUnload = () => {
     var _DataStoreManager$cli;
     TelemetryHelper.logActionEvent(LogLevel.INFO, {

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

@@ -1,11 +1,18 @@
+/* 
+MIDDLEWARE_BANNER_FILE parameters:
+{0} = File limit size
+{1} = File extension
+{2} = File name 
+*/
+
 export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_BANNER_FILE_NULL_ERROR: "There was an error uploading the file, please try again.",
-  MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
-  MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File exceeds the allowed limit of {0} MB and {1} files are not supported.",
-  MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file with an appropriate file extension.",
-  MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{0} files are not supported.",
-  MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File exceeds the allowed limit of {0} MB.",
-  MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file can't be attached because it's empty. Please try again with a different file.",
+  MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and please upload the file with an appropriate file extension.",
+  MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR: "File {2} exceeds the allowed limit of {0} MB and {1} files are not supported.",
+  MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION: "File upload error. Please upload the file {2} with an appropriate file extension.",
+  MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR: "{1} files are not supported.",
+  MIDDLEWARE_BANNER_FILE_SIZE_ERROR: "File {2} exceeds the allowed limit of {0} MB.",
+  MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR: "This file {2} can't be attached because it's empty. Please try again with a different file.",
   MIDDLEWARE_BANNER_ERROR_MESSAGE: "Upload failed, please try again.",
   MIDDLEWARE_BANNER_INTERNET_BACK_ONLINE: "You’re back online.",
   MIDDLEWARE_BANNER_NO_INTERNET_CONNECTION: "Unable to connect—please check your internet connection.",
@@ -16,5 +23,6 @@ export const defaultMiddlewareLocalizedTexts = {
   MIDDLEWARE_MESSAGE_SENDING: "Sending ...",
   MIDDLEWARE_MESSAGE_DELIVERED: "Sent",
   MIDDLEWARE_MESSAGE_NOT_DELIVERED: "Not Delivered",
-  MIDDLEWARE_MESSAGE_RETRY: "Retry"
+  MIDDLEWARE_MESSAGE_RETRY: "Retry",
+  MIDDLEWARE_BANNER_CHAT_DISCONNECT: "Your conversation has been disconnected. For additional assistance, please start a new chat."
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.js

@@ -6,4 +6,5 @@ export let NotificationScenarios;
   NotificationScenarios["AttachmentError"] = "attachment";
   NotificationScenarios["InternetConnection"] = "internet connection";
   NotificationScenarios["MaxSizeError"] = "max size";
+  NotificationScenarios["ChatDisconnect"] = "chat disconnect";
 })(NotificationScenarios || (NotificationScenarios = {}));

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/storemiddlewares/attachmentUploadValidatorMiddleware.js

@@ -70,6 +70,11 @@ const getMaxUploadFileSize = (maxFileSizeSupportedByDynamicsStr, contentType) =>
 const isImage = contentType => {
   return AMSConstants.supportedImagesMimeTypes.includes(contentType);
 };
+const textEllipsis = function (str) {
+  let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
+  const ellipsis = "...";
+  return str.length > maxLength ? str.slice(0, maxLength - ellipsis.length) + ellipsis : str;
+};
 const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize, fileIsEmpty, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
   let errorMessage = "";
   if (!fileName || !maxUploadFileSize) {
@@ -85,10 +90,11 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
   if (!supportedFileExtension && !supportedFileSize) {
     errorMessage = getFileSizeAndFileExtensionErrorMessage(fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
   } else if (!supportedFileSize) {
-    errorMessage = getFileSizeErrorMessage(maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
+    errorMessage = getFileSizeErrorMessage(fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts);
   } else if (!supportedFileExtension) {
     errorMessage = getFileExtensionErrorMessage(fileName, localizedTexts);
   } else if (fileIsEmpty) {
+    var _errorMessage;
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
       Description: "Attachment validation failed",
@@ -96,7 +102,8 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
         ErrorDetails: "File provided is empty"
       }
     });
-    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR ?? "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_IS_EMPTY_ERROR || "";
+    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{2}")) errorMessage = errorMessage.replace("{2}", textEllipsis(fileName));
   } else {
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -110,19 +117,18 @@ const buildErrorMessage = (fileName, supportedFileExtension, supportedFileSize,
   return errorMessage;
 };
 const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  var _errorMessage3;
   const index = fileName.lastIndexOf(".");
   let errorMessage, exceptionDetails;
   if (index < 0) {
     errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_WITHOUT_EXTENSION_ERROR;
     exceptionDetails = `File exceeded the allowed limit of ${maxUploadFileSize} MB and File provided without file extension`;
   } else {
-    var _errorMessage;
+    var _errorMessage2;
     const fileExtension = fileName.substring(index);
     errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_EXTENSION_ERROR;
+    if ((_errorMessage2 = errorMessage) !== null && _errorMessage2 !== void 0 && _errorMessage2.includes("{1}")) errorMessage = errorMessage.replace("{1}", fileExtension);
     exceptionDetails = `File exceeds the allowed limit of ${maxUploadFileSize} MB and ${fileExtension} files are not supported`;
-    if ((_errorMessage = errorMessage) !== null && _errorMessage !== void 0 && _errorMessage.includes("{1}")) {
-      errorMessage = errorMessage.replace("{1}", fileExtension);
-    }
   }
   TelemetryHelper.logActionEvent(LogLevel.ERROR, {
     Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -131,10 +137,12 @@ const getFileSizeAndFileExtensionErrorMessage = (fileName, maxUploadFileSize, ma
       ErrorDetails: `${exceptionDetails} Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${AMSConstants.maxSupportedImageSize} AMS file size limit=${AMSConstants.maxSupportedFileSize}`
     }
   });
-  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+  if ((_errorMessage3 = errorMessage) !== null && _errorMessage3 !== void 0 && _errorMessage3.includes("{0}")) errorMessage = errorMessage.replace("{0}", maxUploadFileSize);
+  return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
 };
 const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
   const index = fileName.lastIndexOf(".");
+  let errorMessage;
   if (index < 0) {
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -143,8 +151,10 @@ const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
         ErrorDetails: "File provided without file extension"
       }
     });
-    return localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION ?? "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_WITHOUT_EXTENSION;
+    return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
   } else {
+    var _errorMessage4, _errorMessage5;
     const fileExtension = fileName.substring(index);
     TelemetryHelper.logActionEvent(LogLevel.ERROR, {
       Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
@@ -153,11 +163,14 @@ const getFileExtensionErrorMessage = (fileName, localizedTexts) => {
         ErrorDetails: `${fileExtension} files extension is not supported.`
       }
     });
-    const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
-    return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", fileExtension) : errorMessage : "";
+    errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_EXTENSION_ERROR;
+    if ((_errorMessage4 = errorMessage) !== null && _errorMessage4 !== void 0 && _errorMessage4.includes("{0}")) errorMessage = errorMessage.replace("{0}", fileExtension); //keeping backwards compatibility for this localized string
+    if ((_errorMessage5 = errorMessage) !== null && _errorMessage5 !== void 0 && _errorMessage5.includes("{1}")) errorMessage = errorMessage.replace("{1}", fileExtension);
+    return errorMessage && errorMessage.length > 0 ? errorMessage : "";
   }
 };
-const getFileSizeErrorMessage = (maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+const getFileSizeErrorMessage = (fileName, maxUploadFileSize, maxFileSizeSupportedByDynamics, localizedTexts) => {
+  var _errorMessage6;
   TelemetryHelper.logActionEvent(LogLevel.ERROR, {
     Event: TelemetryEvent.AttachmentUploadValidatorMiddlewareFailed,
     Description: "Attachment validation failed",
@@ -165,8 +178,9 @@ const getFileSizeErrorMessage = (maxUploadFileSize, maxFileSizeSupportedByDynami
       ErrorDetails: `File exceeds the allowed limit of ${maxUploadFileSize}MB. Dynamics file size limit=${maxFileSizeSupportedByDynamics} AMS image size limit=${AMSConstants.maxSupportedImageSize} AMS file size limit=${AMSConstants.maxSupportedFileSize}`
     }
   });
-  const errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_ERROR;
-  return errorMessage ? errorMessage.includes("{0}") ? errorMessage.replace("{0}", maxUploadFileSize) : errorMessage : "";
+  let errorMessage = localizedTexts.MIDDLEWARE_BANNER_FILE_SIZE_ERROR;
+  if ((_errorMessage6 = errorMessage) !== null && _errorMessage6 !== void 0 && _errorMessage6.includes("{0}")) errorMessage = errorMessage.replace("{0}", maxUploadFileSize);
+  return errorMessage ? errorMessage.includes("{2}") ? errorMessage.replace("{2}", textEllipsis(fileName)) : errorMessage : "";
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars

package/lib/esm/contexts/common/LiveChatWidgetActionType.js

@@ -40,4 +40,5 @@ export let LiveChatWidgetActionType;
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_POST_CHAT_WORKFLOW_IN_PROGRESS"] = 37] = "SET_POST_CHAT_WORKFLOW_IN_PROGRESS";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_INITIAL_CHAT_SDK_REQUEST_ID"] = 38] = "SET_INITIAL_CHAT_SDK_REQUEST_ID";
   LiveChatWidgetActionType[LiveChatWidgetActionType["SET_SHOULD_USE_BOT_SURVEY"] = 39] = "SET_SHOULD_USE_BOT_SURVEY";
+  LiveChatWidgetActionType[LiveChatWidgetActionType["SET_CHAT_DISCONNECT_EVENT_RECEIVED"] = 40] = "SET_CHAT_DISCONNECT_EVENT_RECEIVED";
 })(LiveChatWidgetActionType || (LiveChatWidgetActionType = {}));

package/lib/esm/contexts/common/LiveChatWidgetContextInitialState.js

@@ -49,7 +49,8 @@ export const getLiveChatWidgetContextInitialState = props => {
       conversationEndedByAgentEventReceived: false,
       conversationEndedBy: undefined,
       postChatWorkflowInProgress: false,
-      shouldUseBotSurvey: false
+      shouldUseBotSurvey: false,
+      chatDisconnectEventReceived: false
     },
     uiStates: {
       showConfirmationPane: false,

package/lib/esm/contexts/createReducer.js

@@ -327,6 +327,14 @@ export const createReducer = () => {
             shouldUseBotSurvey: action.payload
           }
         };
+      case LiveChatWidgetActionType.SET_CHAT_DISCONNECT_EVENT_RECEIVED:
+        return {
+          ...state,
+          appStates: {
+            ...state.appStates,
+            chatDisconnectEventReceived: action.payload
+          }
+        };
       default:
         return state;
     }

package/lib/types/common/Constants.d.ts

@@ -81,6 +81,7 @@ export declare class Constants {
     static readonly PostChatLoadingDurationInMs = 2000;
     static readonly BrowserUnloadConfirmationMessage = "Do you want to leave chat?";
     static readonly CacheTtlInMinutes = 15;
+    static readonly LWICheckOnVisibilityTimeout: number;
 }
 export declare const Regex: {
     new (): {};

package/lib/types/common/telemetry/TelemetryConstants.d.ts

@@ -184,7 +184,8 @@ export declare enum TelemetryEvent {
     PostChatContextCallSucceed = "PostChatContextCallSucceed",
     PostChatContextCallFailed = "PostChatContextCallFailed",
     PostChatSurveyLoadingPaneLoaded = "PostChatSurveyLoadingPaneLoaded",
-    PostChatSurveyLoaded = "PostChatSurveyLoaded"
+    PostChatSurveyLoaded = "PostChatSurveyLoaded",
+    ChatDisconnectThreadEventReceived = "ChatDisconnectThreadEventReceived"
 }
 export interface TelemetryInput {
     scenarioType: ScenarioType;

package/lib/types/common/utils.d.ts

@@ -29,3 +29,4 @@ export declare const isUndefinedOrEmpty: (object: any) => boolean;
 export declare const addDelayInMs: (ms: number) => Promise<void>;
 export declare const getBroadcastChannelName: (widgetId: string, widgetInstanceId: string) => string;
 export declare const debounceLeading: (fn: any, ms?: number) => (...args: any[]) => void;
+export declare const getConversationDetailsCall: (chatSDK: any) => Promise<any>;

package/lib/types/components/livechatwidget/common/chatDisconnectHelper.d.ts

@@ -0,0 +1,4 @@
+import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidgetContext";
+import { ILiveChatWidgetProps } from "../interfaces/ILiveChatWidgetProps";
+declare const handleChatDisconnect: (props: ILiveChatWidgetProps, state: ILiveChatWidgetContext, setWebChatStyles: any) => void;
+export { handleChatDisconnect };

package/lib/types/components/webchatcontainerstateful/webchatcontroller/enums/NotificationScenarios.d.ts

@@ -4,5 +4,6 @@ export declare enum NotificationScenarios {
     EmailTranscriptError = "email transcript",
     AttachmentError = "attachment",
     InternetConnection = "internet connection",
-    MaxSizeError = "max size"
+    MaxSizeError = "max size",
+    ChatDisconnect = "chat disconnect"
 }

package/lib/types/contexts/common/ILiveChatWidgetContext.d.ts

@@ -43,6 +43,7 @@ export interface ILiveChatWidgetContext {
         conversationEndedBy: ConversationEndEntity | undefined;
         postChatWorkflowInProgress: boolean;
         shouldUseBotSurvey: boolean;
+        chatDisconnectEventReceived: boolean;
     };
     uiStates: {
         showConfirmationPane: boolean;

package/lib/types/contexts/common/ILiveChatWidgetLocalizedTexts.d.ts

@@ -19,4 +19,5 @@ export interface ILiveChatWidgetLocalizedTexts {
     MIDDLEWARE_MESSAGE_RETRY?: string;
     PRECHAT_REQUIRED_FIELD_MISSING_MESSAGE?: string;
     MARKDOWN_EXTERNAL_LINK_ALT?: string;
+    MIDDLEWARE_BANNER_CHAT_DISCONNECT?: string;
 }

package/lib/types/contexts/common/LiveChatWidgetActionType.d.ts

@@ -38,5 +38,6 @@ export declare enum LiveChatWidgetActionType {
     SET_LIVE_CHAT_CONFIG = 36,
     SET_POST_CHAT_WORKFLOW_IN_PROGRESS = 37,
     SET_INITIAL_CHAT_SDK_REQUEST_ID = 38,
-    SET_SHOULD_USE_BOT_SURVEY = 39
+    SET_SHOULD_USE_BOT_SURVEY = 39,
+    SET_CHAT_DISCONNECT_EVENT_RECEIVED = 40
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "1.0.1-main.068a14e",
+  "version": "1.0.2-main.2112105",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",