@microsoft/omnichannel-chat-widget 0.1.0-main.d5a92f2 → 0.1.0-main.d5e0dfe

package/lib/cjs/common/Constants.js

@@ -51,8 +51,8 @@ _defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
 _defineProperty(Constants, "publicMessageTag", "public");
 _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, "maxUploadFileSize", "500000");
-_defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp)$/i);
-_defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|flac|mp2|mp3|pcm|wav|wma)$/i);
+_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);
 _defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
 _defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
 _defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);

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

@@ -62,6 +62,7 @@ class TelemetryHelper {
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
       event.Description = payload.Description;
+      event.CustomProperties = JSON.stringify(payload.CustomProperties);
     });
   }
   static conformToWebChatContract(level, input) {
@@ -167,7 +168,7 @@ class TelemetryHelper {
     telemetryDataLocal.widgetId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.appId;
     telemetryDataLocal.orgId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgId;
     telemetryDataLocal.orgUrl = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgUrl;
-    telemetryDataLocal.lcwRuntimeId = (0, _utils.newGuid)();
+    telemetryDataLocal.lcwRuntimeId = telemetryConfig.LCWRuntimeId ?? (0, _utils.newGuid)();
     return telemetryDataLocal;
   }
   static addSessionDataToTelemetry(chatSession, telemetryInternalData) {

package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -90,7 +90,7 @@ const ConfirmationPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.ConfirmationPaneLoaded
     });
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ConfirmationPane, {
     componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,

package/lib/cjs/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -97,7 +97,7 @@ const EmailTranscriptPaneStateful = props => {
       Event: _TelemetryConstants.TelemetryEvent.EmailTranscriptLoaded
     });
   }, [initialEmail]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_DimLayer.DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.InputValidationPane, {
     componentOverrides: props.componentOverrides,

package/lib/cjs/components/headerstateful/HeaderStateful.js

@@ -30,6 +30,7 @@ const HeaderStateful = props => {
   const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
   const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeHeaderStyleProps.defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
   const conversationState = (0, _react.useRef)(state.appStates.conversationState);
+  const conversationEndedByAgent = (0, _react.useRef)(state.appStates.conversationEndedByAgent);
   const controlProps = {
     id: "oc-lcw-header",
     dir: state.domainStates.globalDir,
@@ -49,7 +50,7 @@ const HeaderStateful = props => {
         Event: _TelemetryConstants.TelemetryEvent.HeaderCloseButtonClicked,
         Description: "Header Close button clicked."
       });
-      if (conversationState.current === _ConversationState.ConversationState.Active) {
+      if (conversationState.current === _ConversationState.ConversationState.Active || conversationEndedByAgent.current) {
         dispatch({
           type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
           payload: true
@@ -95,6 +96,7 @@ const HeaderStateful = props => {
     if (state.appStates.conversationState) {
       conversationState.current = state.appStates.conversationState;
     }
+    conversationEndedByAgent.current = state.appStates.conversationEndedByAgent;
   }, [state.appStates]);
   return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.Header, {
     componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,

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

@@ -13,9 +13,9 @@ var _activityMiddleware = require("../../../webchatcontainerstateful/webchatcont
 var _attachmentMiddleware = _interopRequireDefault(require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware"));
 var _avatarMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware");
 var _createMarkdown = require("../createMarkdown");
+var _WebChatLogger = require("../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger");
 var _groupActivitiesMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware");
 var _typingIndicatorMiddleware = require("../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware");
-var _WebChatLogger = require("../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */
 
@@ -413,6 +413,7 @@ const dummyDefaultProps = {
         width: "90px",
         cursor: "pointer",
         overflow: "hidden",
+        padding: "0px",
         whiteSpace: "nowrap"
       },
       subtitleStyleProps: {
@@ -420,6 +421,7 @@ const dummyDefaultProps = {
         fontWeight: "200",
         color: "#666",
         overflow: "hidden",
+        padding: "0px",
         fontFamily: "'Segoe UI',Arial,sans-serif",
         display: "block",
         alignItems: "center",
@@ -475,7 +477,6 @@ const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel. Return to Chat",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onConfirm: () => {},
       // Detailed implementation omitted
       onCancel: () => {} // Detailed implementation omitted
@@ -483,20 +484,23 @@ const dummyDefaultProps = {
 
     styleProps: {
       generalStyleProps: {
+        display: "flex",
+        minHeight: "160px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
         backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
-        height: "160px",
         padding: "10px 20px",
-        width: "262px",
         position: "absolute",
         justifyContent: "center",
         alignItems: "center",
-        display: "flex",
         flexFlow: "column",
-        zIndex: "9999"
+        zIndex: "9999",
+        left: "26px",
+        right: "26px"
       },
       titleStyleProps: {
         color: "#323130",
@@ -518,10 +522,14 @@ const dummyDefaultProps = {
       },
       buttonGroupStyleProps: {
         display: "flex",
+        width: "auto",
+        height: "auto",
+        boxSizing: "border-box",
         flexFlow: "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: "10px"
+        gap: "10px",
+        marginBottom: "10px"
       },
       confirmButtonStyleProps: {
         backgroundColor: "rgba(9,72,159,1)",
@@ -626,7 +634,6 @@ const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onSend: undefined,
       onCancel: undefined,
       checkInput: undefined
@@ -1159,7 +1166,7 @@ const dummyDefaultProps = {
       subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now."
     },
     styleProps: {
-      // ...[Existing chat button style props]
+      // ...[Existing loading pane style props]
       generalStyleProps: {
         position: "initial",
         width: "100%",
@@ -1190,6 +1197,47 @@ const dummyDefaultProps = {
     },
     isCustomerVoiceSurveyCompact: undefined
   },
+  preChatSurveyPaneProps: {
+    controlProps: {
+      id: "oc-lcw-prechatsurveypane-default",
+      dir: "auto",
+      hidePreChatSurveyPane: false,
+      adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
+      payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
+      onSubmit: function () {} // Detailed implementation omitted
+    },
+
+    styleProps: {
+      generalStyleProps: {
+        borderStyle: "solid",
+        borderRadius: "4px",
+        borderWidth: "3px",
+        backgroundColor: "#FFFFFF",
+        borderColor: "#F1F1F1",
+        overflowY: "auto",
+        height: "inherit",
+        width: "inherit"
+      },
+      customButtonStyleProps: {
+        backgroundColor: "rgb(49, 95, 162)",
+        color: "#FFFFFF",
+        fontFamily: "Segoe UI, Arial, sans-serif",
+        fontSize: "15px",
+        height: "48px"
+      },
+      adaptiveCardContainerStyleProps: {
+        border: "1px solid #ECECEC",
+        borderRadius: "4px",
+        margin: "3%"
+      },
+      customTextInputStyleProps: {
+        height: "20px"
+      },
+      customMultilineTextInputStyleProps: {
+        height: "52px"
+      }
+    }
+  },
   proactiveChatPaneProps: {
     componentOverrides: {
       title: undefined,
@@ -1568,10 +1616,10 @@ const dummyDefaultProps = {
         padding: "0px 10px 0 10px"
       },
       userMessageBoxStyles: {
-        maxWidth: "75%"
+        maxWidth: "90%"
       },
       systemMessageBoxStyles: {
-        maxWidth: "75%"
+        maxWidth: "90%"
       },
       typingIndicatorStyleProps: {
         marginLeft: "10px",

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.isReconnectEnabled = exports.handleChatReconnect = exports.getChatReconnectContext = void 0;
 require("regenerator-runtime/runtime");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
+var _authHelper = require("./authHelper");
+var _utils = require("../../../common/utils");
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
-var _authHelper = require("./authHelper");
-var _utils = require("../../../common/utils");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleChatReconnect = async (chatSDK, props, dispatch, setAdapter, initStartChat, state) => {
   var _props$chatConfig, _props$chatConfig$Liv;
@@ -84,10 +84,7 @@ const getChatReconnectContext = async (chatSDK, chatConfig, props, isAuthenticat
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 exports.getChatReconnectContext = getChatReconnectContext;
 const setReconnectIdAndStartChat = async (isAuthenticatedChat, chatSDK, props, dispatch, setAdapter, reconnectId, initStartChat) => {
-  if (isAuthenticatedChat) {
-    // Get auth token for for getting chat reconnect context
-    await (0, _authHelper.handleAuthentication)(chatSDK, props.chatConfig, props.getAuthToken);
-  } else {
+  if (!isAuthenticatedChat) {
     const startUnauthenticatedReconnectChat = {
       eventName: _TelemetryConstants.BroadcastEvent.StartUnauthenticatedReconnectChat
     };

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

@@ -4,8 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setPreChatAndInitiateChat = exports.prepareStartChat = exports.initStartChat = exports.checkIfConversationStillValid = void 0;
-var _Constants = require("../../../common/Constants");
 var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants");
+var _Constants = require("../../../common/Constants");
+var _utils = require("../../../common/utils");
+var _authHelper = require("./authHelper");
+var _ActivityStreamHandler = require("./ActivityStreamHandler");
+var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
 var _NotificationHandler = require("../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler");
@@ -14,13 +18,9 @@ var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
 var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
 var _createAdapter = require("./createAdapter");
 var _newMessageEventHandler = require("../../../plugins/newMessageEventHandler");
-var _utils = require("../../../common/utils");
+var _reconnectChatHelper = require("./reconnectChatHelper");
 var _setPostChatContextAndLoadSurvey = require("./setPostChatContextAndLoadSurvey");
 var _updateSessionDataForTelemetry = require("./updateSessionDataForTelemetry");
-var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
-var _ActivityStreamHandler = require("./ActivityStreamHandler");
-var _authHelper = require("./authHelper");
-var _reconnectChatHelper = require("./reconnectChatHelper");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let optionalParams = {};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -84,7 +84,10 @@ const setPreChatAndInitiateChat = async (chatSDK, dispatch, setAdapter, isProact
     type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
     payload: _ConversationState.ConversationState.Loading
   });
-  await initStartChat(chatSDK, props === null || props === void 0 ? void 0 : props.chatConfig, props === null || props === void 0 ? void 0 : props.getAuthToken, dispatch, setAdapter);
+  const optionalParams = {
+    isProactiveChat
+  };
+  await initStartChat(chatSDK, props === null || props === void 0 ? void 0 : props.chatConfig, props === null || props === void 0 ? void 0 : props.getAuthToken, dispatch, setAdapter, optionalParams);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -120,10 +123,16 @@ const initStartChat = async (chatSDK, chatConfig, getAuthToken, dispatch, setAda
       });
     }
     try {
+      var _window$Microsoft, _window$Microsoft$Dyn, _window$Microsoft$Dyn2, _window$Microsoft$Dyn3;
       // Set custom context params
       setCustomContextParams(chatSDK);
-      optionalParams = Object.assign({}, params, optionalParams);
-      await chatSDK.startChat(optionalParams);
+      const defaultOptionalParams = {
+        sendDefaultInitContext: true,
+        isProactiveChat: !!(params !== null && params !== void 0 && params.isProactiveChat),
+        portalContactId: (_window$Microsoft = window.Microsoft) === null || _window$Microsoft === void 0 ? void 0 : (_window$Microsoft$Dyn = _window$Microsoft.Dynamic365) === null || _window$Microsoft$Dyn === void 0 ? void 0 : (_window$Microsoft$Dyn2 = _window$Microsoft$Dyn.Portal) === null || _window$Microsoft$Dyn2 === void 0 ? void 0 : (_window$Microsoft$Dyn3 = _window$Microsoft$Dyn2.User) === null || _window$Microsoft$Dyn3 === void 0 ? void 0 : _window$Microsoft$Dyn3.contactId
+      };
+      const startChatOptionalParams = Object.assign({}, params, optionalParams, defaultOptionalParams);
+      await chatSDK.startChat(startChatOptionalParams);
       isStartChatSuccessful = true;
     } catch (error) {
       _TelemetryHelper.TelemetryHelper.logSDKEvent(_TelemetryConstants.LogLevel.ERROR, {

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

@@ -8,15 +8,18 @@ var _TelemetryConstants = require("../../../common/telemetry/TelemetryConstants"
 var _omnichannelChatComponents = require("@microsoft/omnichannel-chat-components");
 var _react = require("@fluentui/react");
 var _react2 = _interopRequireWildcard(require("react"));
-var _utils = require("../../../common/utils");
 var _startChat = require("../common/startChat");
+var _utils = require("../../../common/utils");
+var _endChat = require("../common/endChat");
 var _componentController = require("../../../controller/componentController");
+var _ActivityStreamHandler = require("../common/ActivityStreamHandler");
 var _CallingContainerStateful = _interopRequireDefault(require("../../callingcontainerstateful/CallingContainerStateful"));
 var _ChatButtonStateful = _interopRequireDefault(require("../../chatbuttonstateful/ChatButtonStateful"));
 var _botframeworkWebchat = require("botframework-webchat");
 var _ConfirmationPaneStateful = _interopRequireDefault(require("../../confirmationpanestateful/ConfirmationPaneStateful"));
 var _ConversationState = require("../../../contexts/common/ConversationState");
 var _DataStoreManager = require("../../../common/contextDataStore/DataStoreManager");
+var _Constants = require("../../../common/Constants");
 var _EmailTranscriptPaneStateful = _interopRequireDefault(require("../../emailtranscriptpanestateful/EmailTranscriptPaneStateful"));
 var _HeaderStateful = _interopRequireDefault(require("../../headerstateful/HeaderStateful"));
 var _LiveChatWidgetActionType = require("../../../contexts/common/LiveChatWidgetActionType");
@@ -32,24 +35,21 @@ var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
 var _WebChatContainerStateful = _interopRequireDefault(require("../../webchatcontainerstateful/WebChatContainerStateful"));
 var _createFooter = require("../common/createFooter");
 var _createInternetConnectionChangeHandler = require("../common/createInternetConnectionChangeHandler");
+var _defaultClientDataStoreProvider = require("../../../common/storage/default/defaultClientDataStoreProvider");
+var _defaultScrollBarProps = require("../common/defaultProps/defaultScrollBarProps");
 var _defaultWebChatContainerStatefulProps = require("../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps");
 var _disposeTelemetryLoggers = require("../common/disposeTelemetryLoggers");
-var _endChat = require("../common/endChat");
 var _getGeneralStylesForButton = require("../common/getGeneralStylesForButton");
 var _initCallingSdk = require("../common/initCallingSdk");
 var _initConfirmationPropsComposer = require("../common/initConfirmationPropsComposer");
 var _initWebChatComposer = require("../common/initWebChatComposer");
+var _defaultCacheManager = require("../../../common/storage/default/defaultCacheManager");
 var _registerTelemetryLoggers = require("../common/registerTelemetryLoggers");
 var _setPostChatContextAndLoadSurvey = require("../common/setPostChatContextAndLoadSurvey");
 var _startProactiveChat = require("../common/startProactiveChat");
 var _useChatAdapterStore = _interopRequireDefault(require("../../../hooks/useChatAdapterStore"));
 var _useChatContextStore = _interopRequireDefault(require("../../../hooks/useChatContextStore"));
 var _useChatSDKStore = _interopRequireDefault(require("../../../hooks/useChatSDKStore"));
-var _ActivityStreamHandler = require("../common/ActivityStreamHandler");
-var _defaultCacheManager = require("../../../common/storage/default/defaultCacheManager");
-var _defaultClientDataStoreProvider = require("../../../common/storage/default/defaultClientDataStoreProvider");
-var _defaultScrollBarProps = require("../common/defaultProps/defaultScrollBarProps");
-var _Constants = require("../../../common/Constants");
 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; }
@@ -103,7 +103,7 @@ const LiveChatWidgetStateful = props => {
       };
     } else {
       activeCachedChatExist = false;
-      optionalParams = undefined;
+      optionalParams = {};
     }
   };
 

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

@@ -12,6 +12,7 @@ const FileAttachmentIconMap = {
   "aac": _Icons.AudioIcon,
   "aiff": _Icons.AudioIcon,
   "alac": _Icons.AudioIcon,
+  "amr": _Icons.AudioIcon,
   "avchd": _Icons.VideoIcon,
   "avi": _Icons.VideoIcon,
   "bmp": _Icons.ImageIcon,
@@ -50,6 +51,7 @@ const FileAttachmentIconMap = {
   "vsdx": _Icons.VisioIcon,
   "wav": _Icons.AudioIcon,
   "webm": _Icons.VideoIcon,
+  "webp": _Icons.ImageIcon,
   "wma": _Icons.AudioIcon,
   "wmv": _Icons.VideoIcon,
   "xls": _Icons.ExcelIcon,

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/activityStatusMiddleware.js

@@ -57,9 +57,7 @@ const activityStatusMiddleware = () => next => args => {
       style: {
         padding: "2px"
       }
-    }, sendState === _SendStatus.SendStatus.Sending && /*#__PURE__*/_react.default.createElement(_SendingTimestamp.SendingTimestamp, {
-      args: args
-    }), sendState === _SendStatus.SendStatus.SendFailed && /*#__PURE__*/_react.default.createElement(_NotDeliveredTimestamp.NotDeliveredTimestamp, {
+    }, sendState === _SendStatus.SendStatus.Sending && /*#__PURE__*/_react.default.createElement(_SendingTimestamp.SendingTimestamp, null), sendState === _SendStatus.SendStatus.SendFailed && /*#__PURE__*/_react.default.createElement(_NotDeliveredTimestamp.NotDeliveredTimestamp, {
       args: args
     }), sendState === _SendStatus.SendStatus.Sent && /*#__PURE__*/_react.default.createElement(_DeliveredTimestamp.DeliveredTimestamp, {
       args: args,

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

@@ -236,7 +236,8 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-    if (fileExtension === "txt") {
+    const isUnknownImageObject = contentType.toLowerCase().includes("image") && !imageExtension;
+    if (fileExtension === "txt" || isUnknownImageObject) {
       return /*#__PURE__*/_react.default.createElement(Attachment, {
         iconData: iconData,
         textCard: patchAttachment(card, {

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultSystemMessageBoxStyles = void 0;
 const defaultSystemMessageBoxStyles = {
-  maxWidth: "75%"
+  maxWidth: "90%"
 };
 exports.defaultSystemMessageBoxStyles = defaultSystemMessageBoxStyles;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultUserMessageBoxStyles = void 0;
 const defaultUserMessageBoxStyles = {
-  maxWidth: "75%"
+  maxWidth: "90%"
 };
 exports.defaultUserMessageBoxStyles = defaultUserMessageBoxStyles;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/DeliveredTimestamp.js

@@ -33,14 +33,13 @@ const DeliveredTimestamp = _ref => {
   } = args;
   return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
     style: contentStyles,
+    dir: dir
+  }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     dir: dir,
-    horizontal: true
-  }, role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", {
     "aria-hidden": "false"
-  }, name), role === _DirectLineSenderRole.DirectLineSenderRole.Bot && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", {
+  }, name, " - ", (0, _utils.getTimestampHourMinute)(timestamp))), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "false",
     dir: dir
-  }, " ", (0, _utils.getTimestampHourMinute)(timestamp)), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), role === _DirectLineSenderRole.DirectLineSenderRole.User && /*#__PURE__*/_react.default.createElement("span", {
-    "aria-hidden": "false"
-  }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
+  }, " ", (0, _utils.getTimestampHourMinute)(timestamp), " - ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED)));
 };
 exports.DeliveredTimestamp = DeliveredTimestamp;

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/NotDeliveredTimestamp.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NotDeliveredTimestamp = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Constants = require("../../../../../../common/Constants");
 var _KeyCodes = require("../../../../../../common/KeyCodes");
 var _react2 = require("@fluentui/react");
 var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
@@ -57,9 +56,8 @@ const NotDeliveredTimestamp = _ref => {
       timestampWebChatNodes[1].innerText = (0, _utils.getTimestampHourMinute)(timestamp);
     }
   }, [timestampRef]);
-  const onRetryClick = (0, _react.useCallback)(async event => {
+  const onRetryClick = (0, _react.useCallback)(async () => {
     var _activity$channelData;
-    removeNotDeliveredTimestamp(event);
     activity.previousClientActivityID = (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.clientActivityID;
     await postActivity(activity);
     focus("sendBox");
@@ -67,19 +65,9 @@ const NotDeliveredTimestamp = _ref => {
   const onRetryKeyEnter = event => {
     if (event.code === _KeyCodes.KeyCodes.ENTER) {
       event.preventDefault();
-      onRetryClick(event);
+      onRetryClick();
     }
   };
-  const removeNotDeliveredTimestamp = event => {
-    let parent = event.target.parentElement;
-    while (parent.tagName !== _Constants.HtmlAttributeNames.listItem) {
-      parent = parent.parentElement;
-      if (parent.tagName === _Constants.HtmlAttributeNames.unorderedList) {
-        return;
-      }
-    }
-    parent.parentNode.removeChild(parent);
-  };
   return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
     style: contentStyles,
     dir: dir,

package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/SendingTimestamp.js

@@ -8,30 +8,21 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@fluentui/react");
 var _defaultMiddlewareLocalizedTexts = require("../../../../common/defaultProps/defaultMiddlewareLocalizedTexts");
 var _defaultTimestampContentStyles = require("../defaultStyles/defaultTimestampContentStyles");
-var _utils = require("../../../../../../common/utils");
 var _ = require("../../../../../..");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint @typescript-eslint/no-explicit-any: "off" */
-const SendingTimestamp = _ref => {
+const SendingTimestamp = () => {
   var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
-  let {
-    args
-  } = _ref;
   const [state] = (0, _.useChatContextStore)();
   const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
   const contentStyles = {
     ..._defaultTimestampContentStyles.defaultTimestampContentStyles,
     ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
   };
-  const {
-    activity: {
-      timestamp
-    }
-  } = args;
   return /*#__PURE__*/_react.default.createElement(_react2.Stack, {
     style: contentStyles,
     dir: dir,
     horizontal: true
-  }, /*#__PURE__*/_react.default.createElement("span", null, " ", (0, _utils.getTimestampHourMinute)(timestamp)), /*#__PURE__*/_react.default.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/_react.default.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+  }, /*#__PURE__*/_react.default.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? _defaultMiddlewareLocalizedTexts.defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
 };
 exports.SendingTimestamp = SendingTimestamp;

package/lib/cjs/plugins/newMessageEventHandler.js

@@ -45,6 +45,10 @@ const createOnNewAdapterActivityHandler = (chatId, userId) => {
         if (activity !== null && activity !== void 0 && (_activity$channelData5 = activity.channelData) !== null && _activity$channelData5 !== void 0 && (_activity$channelData6 = _activity$channelData5.tags) !== null && _activity$channelData6 !== void 0 && _activity$channelData6.includes(_Constants.Constants.systemMessageTag)) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           payload.messageType = _Constants.Constants.systemMessageTag;
+          _TelemetryHelper.TelemetryHelper.logActionEvent(_TelemetryConstants.LogLevel.INFO, {
+            Event: _TelemetryConstants.TelemetryEvent.MessageReceived,
+            Description: "System message received"
+          });
         } else {
           var _activity$channelData7, _activity$channelData8, _activity$channelData9;
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/esm/common/Constants.js

@@ -44,8 +44,8 @@ _defineProperty(Constants, "acsChannel", "ACS_CHANNEL");
 _defineProperty(Constants, "publicMessageTag", "public");
 _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, "maxUploadFileSize", "500000");
-_defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp)$/i);
-_defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|flac|mp2|mp3|pcm|wav|wma)$/i);
+_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);
 _defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
 _defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
 _defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);

package/lib/esm/common/telemetry/TelemetryHelper.js

@@ -56,6 +56,7 @@ export class TelemetryHelper {
       event.ElapsedTimeInMilliseconds = payload.ElapsedTimeInMilliseconds;
       event.ExceptionDetails = JSON.stringify(payload.ExceptionDetails);
       event.Description = payload.Description;
+      event.CustomProperties = JSON.stringify(payload.CustomProperties);
     });
   }
   static conformToWebChatContract(level, input) {
@@ -161,7 +162,7 @@ export class TelemetryHelper {
     telemetryDataLocal.widgetId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.appId;
     telemetryDataLocal.orgId = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgId;
     telemetryDataLocal.orgUrl = telemetryConfig === null || telemetryConfig === void 0 ? void 0 : telemetryConfig.orgUrl;
-    telemetryDataLocal.lcwRuntimeId = newGuid();
+    telemetryDataLocal.lcwRuntimeId = telemetryConfig.LCWRuntimeId ?? newGuid();
     return telemetryDataLocal;
   }
   static addSessionDataToTelemetry(chatSession, telemetryInternalData) {

package/lib/esm/components/confirmationpanestateful/ConfirmationPaneStateful.js

@@ -82,7 +82,7 @@ export const ConfirmationPaneStateful = props => {
       Event: TelemetryEvent.ConfirmationPaneLoaded
     });
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/React.createElement(ConfirmationPane, {
     componentOverrides: props === null || props === void 0 ? void 0 : props.componentOverrides,

package/lib/esm/components/emailtranscriptpanestateful/EmailTranscriptPaneStateful.js

@@ -88,7 +88,7 @@ export const EmailTranscriptPaneStateful = props => {
       Event: TelemetryEvent.EmailTranscriptLoaded
     });
   }, [initialEmail]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !(controlProps !== null && controlProps !== void 0 && controlProps.disableDimLayer) && /*#__PURE__*/React.createElement(DimLayer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DimLayer, {
     brightness: (controlProps === null || controlProps === void 0 ? void 0 : controlProps.brightnessValueOnDim) ?? "0.2"
   }), /*#__PURE__*/React.createElement(InputValidationPane, {
     componentOverrides: props.componentOverrides,

package/lib/esm/components/headerstateful/HeaderStateful.js

@@ -21,6 +21,7 @@ export const HeaderStateful = props => {
   const [outOfOperatingHours, setOutOfOperatingHours] = useState(((_state$domainStates$l = state.domainStates.liveChatConfig) === null || _state$domainStates$l === void 0 ? void 0 : (_state$domainStates$l2 = _state$domainStates$l.LiveWSAndLiveChatEngJoin) === null || _state$domainStates$l2 === void 0 ? void 0 : _state$domainStates$l2.OutOfOperatingHours) === "True");
   const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
   const conversationState = useRef(state.appStates.conversationState);
+  const conversationEndedByAgent = useRef(state.appStates.conversationEndedByAgent);
   const controlProps = {
     id: "oc-lcw-header",
     dir: state.domainStates.globalDir,
@@ -40,7 +41,7 @@ export const HeaderStateful = props => {
         Event: TelemetryEvent.HeaderCloseButtonClicked,
         Description: "Header Close button clicked."
       });
-      if (conversationState.current === ConversationState.Active) {
+      if (conversationState.current === ConversationState.Active || conversationEndedByAgent.current) {
         dispatch({
           type: LiveChatWidgetActionType.SET_SHOW_CONFIRMATION,
           payload: true
@@ -86,6 +87,7 @@ export const HeaderStateful = props => {
     if (state.appStates.conversationState) {
       conversationState.current = state.appStates.conversationState;
     }
+    conversationEndedByAgent.current = state.appStates.conversationEndedByAgent;
   }, [state.appStates]);
   return /*#__PURE__*/React.createElement(Header, {
     componentOverrides: headerProps === null || headerProps === void 0 ? void 0 : headerProps.componentOverrides,

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

@@ -9,9 +9,9 @@ import { createActivityMiddleware } from "../../../webchatcontainerstateful/webc
 import createAttachmentMiddleware from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/attachmentMiddleware";
 import { createAvatarMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/avatarMiddleware";
 import { createMarkdown } from "../createMarkdown";
+import { createWebChatTelemetry } from "../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger";
 import { groupActivitiesMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/groupActivitiesMiddleware";
 import { typingIndicatorMiddleware } from "../../../webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/typingIndicatorMiddleware";
-import { createWebChatTelemetry } from "../../../webchatcontainerstateful/webchatcontroller/webchattelemetry/WebChatLogger";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const dummyDefaultProps = {
@@ -407,6 +407,7 @@ export const dummyDefaultProps = {
         width: "90px",
         cursor: "pointer",
         overflow: "hidden",
+        padding: "0px",
         whiteSpace: "nowrap"
       },
       subtitleStyleProps: {
@@ -414,6 +415,7 @@ export const dummyDefaultProps = {
         fontWeight: "200",
         color: "#666",
         overflow: "hidden",
+        padding: "0px",
         fontFamily: "'Segoe UI',Arial,sans-serif",
         display: "block",
         alignItems: "center",
@@ -469,7 +471,6 @@ export const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel. Return to Chat",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onConfirm: () => {},
       // Detailed implementation omitted
       onCancel: () => {} // Detailed implementation omitted
@@ -477,20 +478,23 @@ export const dummyDefaultProps = {
 
     styleProps: {
       generalStyleProps: {
+        display: "flex",
+        minHeight: "160px",
+        maxHeight: "300px",
+        boxSizing: "border-box",
         backgroundColor: "#FFFFFF",
         borderRadius: "2px",
         color: "black",
         fontFamily: "Segoe UI, Arial, sans-serif",
         fontSize: "14px",
-        height: "160px",
         padding: "10px 20px",
-        width: "262px",
         position: "absolute",
         justifyContent: "center",
         alignItems: "center",
-        display: "flex",
         flexFlow: "column",
-        zIndex: "9999"
+        zIndex: "9999",
+        left: "26px",
+        right: "26px"
       },
       titleStyleProps: {
         color: "#323130",
@@ -512,10 +516,14 @@ export const dummyDefaultProps = {
       },
       buttonGroupStyleProps: {
         display: "flex",
+        width: "auto",
+        height: "auto",
+        boxSizing: "border-box",
         flexFlow: "row",
         justifyContent: "center",
         alignItems: "center",
-        gap: "10px"
+        gap: "10px",
+        marginBottom: "10px"
       },
       confirmButtonStyleProps: {
         backgroundColor: "rgba(9,72,159,1)",
@@ -620,7 +628,6 @@ export const dummyDefaultProps = {
       cancelButtonText: "Cancel",
       cancelButtonAriaLabel: "Cancel",
       brightnessValueOnDim: "0.2",
-      disableDimLayer: false,
       onSend: undefined,
       onCancel: undefined,
       checkInput: undefined
@@ -1153,7 +1160,7 @@ export const dummyDefaultProps = {
       subtitleText: "Please take a moment to give us feedback about your chat experience. We are loading the survey for you now."
     },
     styleProps: {
-      // ...[Existing chat button style props]
+      // ...[Existing loading pane style props]
       generalStyleProps: {
         position: "initial",
         width: "100%",
@@ -1184,6 +1191,47 @@ export const dummyDefaultProps = {
     },
     isCustomerVoiceSurveyCompact: undefined
   },
+  preChatSurveyPaneProps: {
+    controlProps: {
+      id: "oc-lcw-prechatsurveypane-default",
+      dir: "auto",
+      hidePreChatSurveyPane: false,
+      adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",
+      payload: "{\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"type\":\"AdaptiveCard\",\"version\":\"1.1\",\"body\":[{\"type\":\"TextBlock\",\"weight\":\"bolder\",\"text\":\"Please answer below questions.\"},{\"type\":\"Input.Text\",\"id\":\"1e5e4e7a-8f0b-ec11-b6e6-000d3a305d38\",\"label\":\"name pls?\",\"maxLength\":100,\"isRequired\":true,\"errorMessage\":\"Name is required\"},{\"type\":\"Input.Text\",\"id\":\"7f8f5d6d-995e-ec11-8f8f-000d3a31376e\",\"label\":\"multi\\nmulti\\nmulti\",\"style\":\"text\",\"isMultiline\":true,\"maxLength\":250},{\"type\":\"Input.ChoiceSet\",\"id\":\"e4bdf7cb-995e-ec11-8f8f-000d3a31376e\",\"label\":\"options\",\"isMultiSelect\":false,\"value\":\"1\",\"style\":\"compact\",\"choices\":[{\"title\":\"one\",\"value\":\"1\"},{\"title\":\"two\",\"value\":\"2\"},{\"title\":\"three\",\"value\":\"3\"}]},{\"type\":\"Input.Toggle\",\"id\":\"b26011d2-995e-ec11-8f8f-000d3a31376e\",\"title\":\"consent\",\"valueOn\":\"True\",\"valueOff\":\"False\",\"value\":\"false\"},{\"type\":\"TextBlock\",\"isSubtle\":true,\"text\":\"Fields marked with * are mandatory.\",\"wrap\":true}],\"actions\":[{\"type\":\"Action.Submit\",\"title\":\"Submit\",\"data\":{\"Type\":\"InputSubmit\"}}]}",
+      onSubmit: function () {} // Detailed implementation omitted
+    },
+
+    styleProps: {
+      generalStyleProps: {
+        borderStyle: "solid",
+        borderRadius: "4px",
+        borderWidth: "3px",
+        backgroundColor: "#FFFFFF",
+        borderColor: "#F1F1F1",
+        overflowY: "auto",
+        height: "inherit",
+        width: "inherit"
+      },
+      customButtonStyleProps: {
+        backgroundColor: "rgb(49, 95, 162)",
+        color: "#FFFFFF",
+        fontFamily: "Segoe UI, Arial, sans-serif",
+        fontSize: "15px",
+        height: "48px"
+      },
+      adaptiveCardContainerStyleProps: {
+        border: "1px solid #ECECEC",
+        borderRadius: "4px",
+        margin: "3%"
+      },
+      customTextInputStyleProps: {
+        height: "20px"
+      },
+      customMultilineTextInputStyleProps: {
+        height: "52px"
+      }
+    }
+  },
   proactiveChatPaneProps: {
     componentOverrides: {
       title: undefined,
@@ -1562,10 +1610,10 @@ export const dummyDefaultProps = {
         padding: "0px 10px 0 10px"
       },
       userMessageBoxStyles: {
-        maxWidth: "75%"
+        maxWidth: "90%"
       },
       systemMessageBoxStyles: {
-        maxWidth: "75%"
+        maxWidth: "90%"
       },
       typingIndicatorStyleProps: {
         marginLeft: "10px",

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

@@ -1,11 +1,12 @@
 import "regenerator-runtime/runtime";
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { handleAuthentication, removeAuthTokenProvider } from "./authHelper";
+import { isNullOrEmptyString, isNullOrUndefined } from "../../../common/utils";
 import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
-import { handleAuthentication, removeAuthTokenProvider } from "./authHelper";
-import { isNullOrEmptyString, isNullOrUndefined } from "../../../common/utils";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleChatReconnect = async (chatSDK, props, dispatch, setAdapter, initStartChat, state) => {
   var _props$chatConfig, _props$chatConfig$Liv;
@@ -76,10 +77,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) => {
-  if (isAuthenticatedChat) {
-    // Get auth token for for getting chat reconnect context
-    await handleAuthentication(chatSDK, props.chatConfig, props.getAuthToken);
-  } else {
+  if (!isAuthenticatedChat) {
     const startUnauthenticatedReconnectChat = {
       eventName: BroadcastEvent.StartUnauthenticatedReconnectChat
     };

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

@@ -1,5 +1,9 @@
-import { ChatSDKError, LiveWorkItemState } from "../../../common/Constants";
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
+import { ChatSDKError, LiveWorkItemState } from "../../../common/Constants";
+import { createTimer, getStateFromCache, isUndefinedOrEmpty } from "../../../common/utils";
+import { getAuthClientFunction, handleAuthentication } from "./authHelper";
+import { ActivityStreamHandler } from "./ActivityStreamHandler";
+import { BroadcastService } from "@microsoft/omnichannel-chat-components";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { LiveChatWidgetActionType } from "../../../contexts/common/LiveChatWidgetActionType";
 import { NotificationHandler } from "../../webchatcontainerstateful/webchatcontroller/notification/NotificationHandler";
@@ -8,13 +12,9 @@ import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
 import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import { createAdapter } from "./createAdapter";
 import { createOnNewAdapterActivityHandler } from "../../../plugins/newMessageEventHandler";
-import { createTimer, getStateFromCache, isUndefinedOrEmpty } from "../../../common/utils";
+import { handleChatReconnect } from "./reconnectChatHelper";
 import { setPostChatContextAndLoadSurvey } from "./setPostChatContextAndLoadSurvey";
 import { updateSessionDataForTelemetry } from "./updateSessionDataForTelemetry";
-import { BroadcastService } from "@microsoft/omnichannel-chat-components";
-import { ActivityStreamHandler } from "./ActivityStreamHandler";
-import { getAuthClientFunction, handleAuthentication } from "./authHelper";
-import { handleChatReconnect } from "./reconnectChatHelper";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let optionalParams = {};
@@ -78,7 +78,10 @@ const setPreChatAndInitiateChat = async (chatSDK, dispatch, setAdapter, isProact
     type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
     payload: ConversationState.Loading
   });
-  await initStartChat(chatSDK, props === null || props === void 0 ? void 0 : props.chatConfig, props === null || props === void 0 ? void 0 : props.getAuthToken, dispatch, setAdapter);
+  const optionalParams = {
+    isProactiveChat
+  };
+  await initStartChat(chatSDK, props === null || props === void 0 ? void 0 : props.chatConfig, props === null || props === void 0 ? void 0 : props.getAuthToken, dispatch, setAdapter, optionalParams);
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -113,10 +116,16 @@ const initStartChat = async (chatSDK, chatConfig, getAuthToken, dispatch, setAda
       });
     }
     try {
+      var _window$Microsoft, _window$Microsoft$Dyn, _window$Microsoft$Dyn2, _window$Microsoft$Dyn3;
       // Set custom context params
       setCustomContextParams(chatSDK);
-      optionalParams = Object.assign({}, params, optionalParams);
-      await chatSDK.startChat(optionalParams);
+      const defaultOptionalParams = {
+        sendDefaultInitContext: true,
+        isProactiveChat: !!(params !== null && params !== void 0 && params.isProactiveChat),
+        portalContactId: (_window$Microsoft = window.Microsoft) === null || _window$Microsoft === void 0 ? void 0 : (_window$Microsoft$Dyn = _window$Microsoft.Dynamic365) === null || _window$Microsoft$Dyn === void 0 ? void 0 : (_window$Microsoft$Dyn2 = _window$Microsoft$Dyn.Portal) === null || _window$Microsoft$Dyn2 === void 0 ? void 0 : (_window$Microsoft$Dyn3 = _window$Microsoft$Dyn2.User) === null || _window$Microsoft$Dyn3 === void 0 ? void 0 : _window$Microsoft$Dyn3.contactId
+      };
+      const startChatOptionalParams = Object.assign({}, params, optionalParams, defaultOptionalParams);
+      await chatSDK.startChat(startChatOptionalParams);
       isStartChatSuccessful = true;
     } catch (error) {
       TelemetryHelper.logSDKEvent(LogLevel.ERROR, {

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

@@ -1,17 +1,20 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { BroadcastEvent, LogLevel, TelemetryEvent } from "../../../common/telemetry/TelemetryConstants";
-import { BroadcastService, decodeComponentString, BroadcastServiceInitialize } from "@microsoft/omnichannel-chat-components";
+import { BroadcastService, BroadcastServiceInitialize, decodeComponentString } from "@microsoft/omnichannel-chat-components";
 import { Stack } from "@fluentui/react";
 import React, { useEffect, useRef, useState } from "react";
-import { createTimer, getBroadcastChannelName, getLocaleDirection, getStateFromCache, getWidgetCacheId, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty } from "../../../common/utils";
 import { checkIfConversationStillValid, initStartChat, prepareStartChat, setPreChatAndInitiateChat } from "../common/startChat";
+import { createTimer, getBroadcastChannelName, getLocaleDirection, getStateFromCache, getWidgetCacheId, getWidgetEndChatEventName, isNullOrEmptyString, isUndefinedOrEmpty } 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";
 import CallingContainerStateful from "../../callingcontainerstateful/CallingContainerStateful";
 import ChatButtonStateful from "../../chatbuttonstateful/ChatButtonStateful";
 import { Components } from "botframework-webchat";
 import ConfirmationPaneStateful from "../../confirmationpanestateful/ConfirmationPaneStateful";
 import { ConversationState } from "../../../contexts/common/ConversationState";
 import { DataStoreManager } from "../../../common/contextDataStore/DataStoreManager";
+import { E2VVOptions } from "../../../common/Constants";
 import { ElementType } from "@microsoft/omnichannel-chat-components";
 import EmailTranscriptPaneStateful from "../../emailtranscriptpanestateful/EmailTranscriptPaneStateful";
 import HeaderStateful from "../../headerstateful/HeaderStateful";
@@ -28,24 +31,21 @@ import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
 import WebChatContainerStateful from "../../webchatcontainerstateful/WebChatContainerStateful";
 import { createFooter } from "../common/createFooter";
 import { createInternetConnectionChangeHandler } from "../common/createInternetConnectionChangeHandler";
+import { defaultClientDataStoreProvider } from "../../../common/storage/default/defaultClientDataStoreProvider";
+import { defaultScrollBarProps } from "../common/defaultProps/defaultScrollBarProps";
 import { defaultWebChatContainerStatefulProps } from "../../webchatcontainerstateful/common/defaultProps/defaultWebChatContainerStatefulProps";
 import { disposeTelemetryLoggers } from "../common/disposeTelemetryLoggers";
-import { endChat, prepareEndChat } from "../common/endChat";
 import { getGeneralStylesForButton } from "../common/getGeneralStylesForButton";
 import { initCallingSdk } from "../common/initCallingSdk";
 import { initConfirmationPropsComposer } from "../common/initConfirmationPropsComposer";
 import { initWebChatComposer } from "../common/initWebChatComposer";
+import { registerBroadcastServiceForLocalStorage } from "../../../common/storage/default/defaultCacheManager";
 import { registerTelemetryLoggers } from "../common/registerTelemetryLoggers";
 import { setPostChatContextAndLoadSurvey } from "../common/setPostChatContextAndLoadSurvey";
 import { startProactiveChat } from "../common/startProactiveChat";
 import useChatAdapterStore from "../../../hooks/useChatAdapterStore";
 import useChatContextStore from "../../../hooks/useChatContextStore";
 import useChatSDKStore from "../../../hooks/useChatSDKStore";
-import { ActivityStreamHandler } from "../common/ActivityStreamHandler";
-import { registerBroadcastServiceForLocalStorage } from "../../../common/storage/default/defaultCacheManager";
-import { defaultClientDataStoreProvider } from "../../../common/storage/default/defaultClientDataStoreProvider";
-import { defaultScrollBarProps } from "../common/defaultProps/defaultScrollBarProps";
-import { E2VVOptions } from "../../../common/Constants";
 export const LiveChatWidgetStateful = props => {
   var _props$webChatContain, _props$styleProps, _chatSDK$omnichannelC, _props$controlProps, _props$controlProps2, _props$webChatContain3, _props$webChatContain4, _props$styleProps2, _props$controlProps13, _props$controlProps14, _props$componentOverr, _props$controlProps15, _props$componentOverr2, _props$controlProps16, _props$componentOverr3, _props$controlProps17, _props$componentOverr4, _props$controlProps18, _props$componentOverr5, _props$controlProps19, _props$componentOverr6, _props$controlProps20, _props$componentOverr7, _props$controlProps21, _props$controlProps22, _props$componentOverr8, _props$controlProps23, _props$componentOverr9, _props$controlProps24, _props$componentOverr10, _props$componentOverr11, _props$componentOverr12;
   const [state, dispatch] = useChatContextStore();
@@ -95,7 +95,7 @@ export const LiveChatWidgetStateful = props => {
       };
     } else {
       activeCachedChatExist = false;
-      optionalParams = undefined;
+      optionalParams = {};
     }
   };
 

package/lib/esm/components/webchatcontainerstateful/common/utils/FileAttachmentIconManager.js

@@ -6,6 +6,7 @@ const FileAttachmentIconMap = {
   "aac": AudioIcon,
   "aiff": AudioIcon,
   "alac": AudioIcon,
+  "amr": AudioIcon,
   "avchd": VideoIcon,
   "avi": VideoIcon,
   "bmp": ImageIcon,
@@ -44,6 +45,7 @@ const FileAttachmentIconMap = {
   "vsdx": VisioIcon,
   "wav": AudioIcon,
   "webm": VideoIcon,
+  "webp": ImageIcon,
   "wma": AudioIcon,
   "wmv": VideoIcon,
   "xls": ExcelIcon,

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

@@ -51,9 +51,7 @@ export const activityStatusMiddleware = () => next => args => {
       style: {
         padding: "2px"
       }
-    }, sendState === SendStatus.Sending && /*#__PURE__*/React.createElement(SendingTimestamp, {
-      args: args
-    }), sendState === SendStatus.SendFailed && /*#__PURE__*/React.createElement(NotDeliveredTimestamp, {
+    }, sendState === SendStatus.Sending && /*#__PURE__*/React.createElement(SendingTimestamp, null), sendState === SendStatus.SendFailed && /*#__PURE__*/React.createElement(NotDeliveredTimestamp, {
       args: args
     }), sendState === SendStatus.Sent && /*#__PURE__*/React.createElement(DeliveredTimestamp, {
       args: args,

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

@@ -229,7 +229,8 @@ const createAttachmentMiddleware = enableInlinePlaying => {
         renderer: next
       });
     }
-    if (fileExtension === "txt") {
+    const isUnknownImageObject = contentType.toLowerCase().includes("image") && !imageExtension;
+    if (fileExtension === "txt" || isUnknownImageObject) {
       return /*#__PURE__*/React.createElement(Attachment, {
         iconData: iconData,
         textCard: patchAttachment(card, {

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultSystemMessageBoxStyles.js

@@ -1,3 +1,3 @@
 export const defaultSystemMessageBoxStyles = {
-  maxWidth: "75%"
+  maxWidth: "90%"
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/defaultStyles/defaultUserMessageBoxStyles.js

@@ -1,3 +1,3 @@
 export const defaultUserMessageBoxStyles = {
-  maxWidth: "75%"
+  maxWidth: "90%"
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/DeliveredTimestamp.js

@@ -27,13 +27,12 @@ export const DeliveredTimestamp = _ref => {
   } = args;
   return /*#__PURE__*/React.createElement(Stack, {
     style: contentStyles,
+    dir: dir
+  }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     dir: dir,
-    horizontal: true
-  }, role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "false"
-  }, name), role === DirectLineSenderRole.Bot && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", {
+  }, name, " - ", getTimestampHourMinute(timestamp))), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "false",
     dir: dir
-  }, " ", getTimestampHourMinute(timestamp)), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), role === DirectLineSenderRole.User && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "false"
-  }, ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED));
+  }, " ", getTimestampHourMinute(timestamp), " - ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_DELIVERED) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_DELIVERED)));
 };

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/NotDeliveredTimestamp.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import { HtmlAttributeNames } from "../../../../../../common/Constants";
 import { KeyCodes } from "../../../../../../common/KeyCodes";
 import { Stack } from "@fluentui/react";
 import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
@@ -50,9 +49,8 @@ export const NotDeliveredTimestamp = _ref => {
       timestampWebChatNodes[1].innerText = getTimestampHourMinute(timestamp);
     }
   }, [timestampRef]);
-  const onRetryClick = useCallback(async event => {
+  const onRetryClick = useCallback(async () => {
     var _activity$channelData;
-    removeNotDeliveredTimestamp(event);
     activity.previousClientActivityID = (_activity$channelData = activity.channelData) === null || _activity$channelData === void 0 ? void 0 : _activity$channelData.clientActivityID;
     await postActivity(activity);
     focus("sendBox");
@@ -60,19 +58,9 @@ export const NotDeliveredTimestamp = _ref => {
   const onRetryKeyEnter = event => {
     if (event.code === KeyCodes.ENTER) {
       event.preventDefault();
-      onRetryClick(event);
+      onRetryClick();
     }
   };
-  const removeNotDeliveredTimestamp = event => {
-    let parent = event.target.parentElement;
-    while (parent.tagName !== HtmlAttributeNames.listItem) {
-      parent = parent.parentElement;
-      if (parent.tagName === HtmlAttributeNames.unorderedList) {
-        return;
-      }
-    }
-    parent.parentNode.removeChild(parent);
-  };
   return /*#__PURE__*/React.createElement(Stack, {
     style: contentStyles,
     dir: dir,

package/lib/esm/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/SendingTimestamp.js

@@ -2,29 +2,20 @@ import React from "react";
 import { Stack } from "@fluentui/react";
 import { defaultMiddlewareLocalizedTexts } from "../../../../common/defaultProps/defaultMiddlewareLocalizedTexts";
 import { defaultTimestampContentStyles } from "../defaultStyles/defaultTimestampContentStyles";
-import { getTimestampHourMinute } from "../../../../../../common/utils";
 import { useChatContextStore } from "../../../../../..";
 
 /* eslint @typescript-eslint/no-explicit-any: "off" */
-export const SendingTimestamp = _ref => {
+export const SendingTimestamp = () => {
   var _state$domainStates$r, _state$domainStates$r2, _state$domainStates$m;
-  let {
-    args
-  } = _ref;
   const [state] = useChatContextStore();
   const dir = ((_state$domainStates$r = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r === void 0 ? void 0 : _state$domainStates$r.timestampDir) ?? state.domainStates.globalDir;
   const contentStyles = {
     ...defaultTimestampContentStyles,
     ...((_state$domainStates$r2 = state.domainStates.renderingMiddlewareProps) === null || _state$domainStates$r2 === void 0 ? void 0 : _state$domainStates$r2.timestampContentStyleProps)
   };
-  const {
-    activity: {
-      timestamp
-    }
-  } = args;
   return /*#__PURE__*/React.createElement(Stack, {
     style: contentStyles,
     dir: dir,
     horizontal: true
-  }, /*#__PURE__*/React.createElement("span", null, " ", getTimestampHourMinute(timestamp)), /*#__PURE__*/React.createElement("span", null, " \xA0-\xA0 "), /*#__PURE__*/React.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
+  }, /*#__PURE__*/React.createElement("span", null, " ", ((_state$domainStates$m = state.domainStates.middlewareLocalizedTexts) === null || _state$domainStates$m === void 0 ? void 0 : _state$domainStates$m.MIDDLEWARE_MESSAGE_SENDING) ?? defaultMiddlewareLocalizedTexts.MIDDLEWARE_MESSAGE_SENDING, " "));
 };

package/lib/esm/plugins/newMessageEventHandler.js

@@ -39,6 +39,10 @@ export const createOnNewAdapterActivityHandler = (chatId, userId) => {
         if (activity !== null && activity !== void 0 && (_activity$channelData5 = activity.channelData) !== null && _activity$channelData5 !== void 0 && (_activity$channelData6 = _activity$channelData5.tags) !== null && _activity$channelData6 !== void 0 && _activity$channelData6.includes(Constants.systemMessageTag)) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           payload.messageType = Constants.systemMessageTag;
+          TelemetryHelper.logActionEvent(LogLevel.INFO, {
+            Event: TelemetryEvent.MessageReceived,
+            Description: "System message received"
+          });
         } else {
           var _activity$channelData7, _activity$channelData8, _activity$channelData9;
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/types/common/telemetry/definitions/Contracts.d.ts

@@ -32,6 +32,8 @@ export interface LoadContract extends BaseContract {
 export interface ActionsContract extends BaseContract {
     Event?: string;
     ActionType?: string;
+    Description?: string;
+    CustomProperties?: any;
 }
 export interface IC3ClientContract extends BaseContract {
     Event?: string;

package/lib/types/common/telemetry/definitions/Payload.d.ts

@@ -72,6 +72,7 @@ export interface ActionTelemetryData extends BaseTelemetryData {
     ActionType?: string;
     ExceptionDetails?: object;
     Description?: string;
+    CustomProperties?: any;
 }
 export interface CallingTelemetryData extends BaseTelemetryData {
     CallId?: string;

package/lib/types/common/telemetry/interfaces/ITelemetryConfig.d.ts

@@ -41,4 +41,8 @@ export interface ITelemetryConfig {
     * Omnichannel Chat SDK Version
     */
     OCChatSDKVersion: string;
+    /**
+    * LCW Runtime Id
+    */
+    LCWRuntimeId?: string;
 }

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

@@ -3,8 +3,9 @@ import { Dispatch } from "react";
 import { ILiveChatWidgetAction } from "../../../contexts/common/ILiveChatWidgetAction";
 import { ILiveChatWidgetContext } from "../../../contexts/common/ILiveChatWidgetContext";
 import { ILiveChatWidgetProps } from "../interfaces/ILiveChatWidgetProps";
+import StartChatOptionalParams from "@microsoft/omnichannel-chat-sdk/lib/core/StartChatOptionalParams";
 declare const prepareStartChat: (props: ILiveChatWidgetProps, chatSDK: any, state: ILiveChatWidgetContext, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any) => Promise<void>;
 declare const setPreChatAndInitiateChat: (chatSDK: any, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, isProactiveChat?: boolean | undefined, proactiveChatEnablePrechatState?: boolean | undefined, state?: ILiveChatWidgetContext | undefined, props?: ILiveChatWidgetProps | undefined) => Promise<void>;
-declare const initStartChat: (chatSDK: any, chatConfig: ChatConfig | undefined, getAuthToken: ((authClientFunction?: string | undefined) => Promise<string | null>) | undefined, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, params?: any, persistedState?: any) => Promise<void>;
+declare const initStartChat: (chatSDK: any, chatConfig: ChatConfig | undefined, getAuthToken: ((authClientFunction?: string | undefined) => Promise<string | null>) | undefined, dispatch: Dispatch<ILiveChatWidgetAction>, setAdapter: any, params?: StartChatOptionalParams | undefined, persistedState?: any) => Promise<void>;
 declare const checkIfConversationStillValid: (chatSDK: any, props: any, requestId: any, dispatch: Dispatch<ILiveChatWidgetAction>) => Promise<boolean>;
 export { prepareStartChat, initStartChat, setPreChatAndInitiateChat, checkIfConversationStillValid };

package/lib/types/components/webchatcontainerstateful/webchatcontroller/middlewares/renderingmiddlewares/timestamps/SendingTimestamp.d.ts

@@ -1 +1 @@
-export declare const SendingTimestamp: ({ args }: any) => JSX.Element;
+export declare const SendingTimestamp: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/omnichannel-chat-widget",
-  "version": "0.1.0-main.d5a92f2",
+  "version": "0.1.0-main.d5e0dfe",
   "description": "Microsoft Omnichannel Chat Widget",
   "main": "lib/cjs/index.js",
   "types": "lib/types/index.d.ts",
@@ -74,8 +74,8 @@
   },
   "dependencies": {
     "@fluentui/react": "^8.49.1",
-    "@microsoft/omnichannel-chat-components": "0.1.0-main.d066b23",
-    "@microsoft/omnichannel-chat-sdk": "1.1.1-main.b88f92d",
+    "@microsoft/omnichannel-chat-components": "0.1.0-main.501b425",
+    "@microsoft/omnichannel-chat-sdk": "1.2.1-main.aaf8f21",
     "abort-controller-es5": "^2.0.1",
     "dompurify": "^2.3.4",
     "markdown-it": "^12.3.2",