@microsoft/omnichannel-chat-widget 1.8.1-main.f0e9e2f → 1.8.2-main.3368d1f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/lib/cjs/common/Constants.js +1 -1
  2. package/lib/cjs/common/facades/FacadeChatSDK.js +49 -7
  3. package/lib/cjs/components/chatbuttonstateful/ChatButtonStateful.js +8 -2
  4. package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js +7 -3
  5. package/lib/cjs/components/headerstateful/HeaderStateful.js +8 -4
  6. package/lib/cjs/components/livechatwidget/LiveChatWidget.js +4 -3
  7. package/lib/cjs/components/livechatwidget/common/liveChatConfigUtils.js +1 -1
  8. package/lib/cjs/components/livechatwidget/common/persistentChatHelper.js +12 -5
  9. package/lib/cjs/components/livechatwidget/common/startChat.js +2 -2
  10. package/lib/cjs/components/livechatwidget/common/startChatErrorHandler.js +25 -8
  11. package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +21 -17
  12. package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js +42 -8
  13. package/lib/cjs/contexts/common/LiveChatWidgetContextInitialState.js +1 -1
  14. package/lib/esm/common/Constants.js +1 -1
  15. package/lib/esm/common/facades/FacadeChatSDK.js +49 -7
  16. package/lib/esm/components/chatbuttonstateful/ChatButtonStateful.js +8 -2
  17. package/lib/esm/components/confirmationpanestateful/ConfirmationPaneStateful.js +7 -3
  18. package/lib/esm/components/headerstateful/HeaderStateful.js +8 -4
  19. package/lib/esm/components/livechatwidget/LiveChatWidget.js +4 -3
  20. package/lib/esm/components/livechatwidget/common/liveChatConfigUtils.js +1 -1
  21. package/lib/esm/components/livechatwidget/common/persistentChatHelper.js +12 -5
  22. package/lib/esm/components/livechatwidget/common/startChat.js +2 -2
  23. package/lib/esm/components/livechatwidget/common/startChatErrorHandler.js +25 -8
  24. package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js +21 -17
  25. package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js +42 -8
  26. package/lib/esm/contexts/common/LiveChatWidgetContextInitialState.js +1 -1
  27. package/lib/types/common/Constants.d.ts +1 -1
  28. package/lib/types/common/facades/FacadeChatSDK.d.ts +1 -0
  29. package/lib/types/components/livechatwidget/common/liveChatConfigUtils.d.ts +1 -1
  30. package/lib/types/components/livechatwidget/common/persistentChatHelper.d.ts +2 -1
  31. package/package.json +2 -2
package/lib/cjs/common/Constants.js CHANGED
@@ -131,7 +131,7 @@ _defineProperty(Constants, "WebchatSequenceIdAttribute", "webchat:sequence-id");
131
131
  _defineProperty(Constants, "MessageSequenceIdOverride", "MessageSequenceIdOverride");
132
132
  const Regex = (_class = /*#__PURE__*/_createClass(function Regex() {
133
133
  _classCallCheck(this, Regex);
134
- }), _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);
134
+ }), _defineProperty(_class, "EmailRegex", "^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"[^\"\\\\]*(?:\\\\.[^\"\\\\]*)*\")@(?:[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]?)\\])$"), _class);
135
135
  exports.Regex = Regex;
136
136
  let HtmlIdNames = /*#__PURE__*/_createClass(function HtmlIdNames() {
137
137
  _classCallCheck(this, HtmlIdNames);
package/lib/cjs/common/facades/FacadeChatSDK.js CHANGED
@@ -109,7 +109,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
109
109
  token: last3digits
110
110
  }
111
111
  });
112
- throw new Error("Invalid token format, must be in JWT format");
112
+ throw new Error("Authentication Setup Error: Invalid token format, must be in JWT format");
113
113
  }
114
114
  try {
115
115
  const payload = this.enforceBase64Encoding(tokenParts[1]);
@@ -131,9 +131,9 @@ let FacadeChatSDK = /*#__PURE__*/function () {
131
131
  token: last3digits
132
132
  }
133
133
  });
134
- throw new Error("Invalid token payload, payload is not valid JSON");
134
+ throw new Error("Authentication Setup Error: Invalid token payload, payload is not valid JSON");
135
135
  } catch (e) {
136
- console.error("Failed to decode token", e);
136
+ console.error("Authentication Setup Error: Failed to decode token", e);
137
137
  _TelemetryHelper.TelemetryHelper.logFacadeChatSDKEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
138
138
  Event: _TelemetryConstants.TelemetryEvent.NewTokenValidationFailed,
139
139
  Description: "Failed to decode token",
@@ -142,7 +142,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
142
142
  token: last3digits
143
143
  }
144
144
  });
145
- throw new Error("Failed to decode token");
145
+ throw new Error("Authentication Setup Error: Failed to decode authentication token");
146
146
  }
147
147
  }
148
148
  }, {
@@ -166,7 +166,7 @@ let FacadeChatSDK = /*#__PURE__*/function () {
166
166
  "Token": last3digits
167
167
  }
168
168
  });
169
- throw new Error(`New token is already expired, with epoch time ${this.expiration} , last 3 digits of token: ${last3digits}`);
169
+ throw new Error("Authentication Setup Error: New authentication token is already expired");
170
170
  }
171
171
  }
172
172
  }
@@ -280,9 +280,9 @@ let FacadeChatSDK = /*#__PURE__*/function () {
280
280
  if (pingResponse.result === true) {
281
281
  return fn();
282
282
  }
283
- const executionErrorMessage = `Authentication failed: Process to get a token failed for ${functionName}, ${pingResponse.message}`;
283
+ const executionErrorMessage = "Authentication Setup Error: Token validation failed - GetAuthToken function is not present";
284
284
  //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
285
- console.error(executionErrorMessage);
285
+ console.error(`${executionErrorMessage} Additional details: Process to get a token failed for ${functionName}, ${pingResponse.message}`);
286
286
  _omnichannelChatComponents.BroadcastService.postMessage({
287
287
  eventName: _TelemetryConstants.BroadcastEvent.OnWidgetError,
288
288
  payload: {
@@ -445,6 +445,48 @@ let FacadeChatSDK = /*#__PURE__*/function () {
445
445
  let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
446
446
  return this.validateAndExecuteCall("getAgentAvailability", () => this.chatSDK.getAgentAvailability(optionalParams));
447
447
  }
448
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
449
+ }, {
450
+ key: "getReconnectableChats",
451
+ value: async function getReconnectableChats() {
452
+ let reconnectableChatsParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
453
+ /**
454
+ *
455
+ * This is a particular case, we dont expose getReconnectableChats in the SDK,
456
+ * The only way to use is by tunneling directly from the SDK to OCSDK,
457
+ *
458
+ * In case of prechat, the function is called before any formal authentication is made,
459
+ * this is an specific case for persistent chats, to prevent the survey be loaded again for an on going chat,
460
+ *
461
+ * In this case, we check for existance of the token , otherwise we perform the authentication, error is propagated in case of issues.
462
+ *
463
+ * Once the token is obtained , this will be added to the params to call the function.
464
+ *
465
+ * This is a particular case, should not be taken as pattern.
466
+ *
467
+ */
468
+
469
+ if (this.token === null || this.token === "") {
470
+ // If token is not set, try to get it using tokenRing
471
+ const pingResponse = await this.tokenRing();
472
+ if (pingResponse.result === false) {
473
+ const errorMessage = "Authentication Setup Error: Token validation failed for reconnectable chats";
474
+ //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
475
+ console.error(`Authentication failed: Process to get a token failed for getReconnectableChats, ${pingResponse.message}`);
476
+ _omnichannelChatComponents.BroadcastService.postMessage({
477
+ eventName: _TelemetryConstants.BroadcastEvent.OnWidgetError,
478
+ payload: {
479
+ errorMessage: errorMessage
480
+ }
481
+ });
482
+ throw new Error(errorMessage);
483
+ }
484
+ }
485
+
486
+ // Always override the token in params regardless of how getReconnectableChats was called
487
+ reconnectableChatsParams.authenticatedUserToken = this.token;
488
+ return this.validateAndExecuteCall("getReconnectableChats", () => this.chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams));
489
+ }
448
490
  }]);
449
491
  return FacadeChatSDK;
450
492
  }();
package/lib/cjs/components/chatbuttonstateful/ChatButtonStateful.js CHANGED
@@ -39,7 +39,7 @@ const ChatButtonStateful = props => {
39
39
  } = props;
40
40
  //Setting OutOfOperatingHours Flag
41
41
  //Setting OutOfOperatingHours Flag - to string conversion to normalize the value (could be boolean from other states or string directly from config)
42
- const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(state.appStates.outsideOperatingHours);
42
+ const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(false);
43
43
  const ref = (0, _react.useRef)(() => {
44
44
  return;
45
45
  });
@@ -100,7 +100,6 @@ const ChatButtonStateful = props => {
100
100
  ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
101
101
  };
102
102
  (0, _react.useEffect)(() => {
103
- setOutOfOperatingHours(state.appStates.outsideOperatingHours);
104
103
  _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
105
104
  Event: _TelemetryConstants.TelemetryEvent.LCWChatButtonShow,
106
105
  ElapsedTimeInMilliseconds: _TelemetryManager.TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
@@ -119,6 +118,13 @@ const ChatButtonStateful = props => {
119
118
  ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
120
119
  });
121
120
  }, []);
121
+ (0, _react.useEffect)(() => {
122
+ if (state.appStates.conversationState === _ConversationState.ConversationState.Closed) {
123
+ // If the conversation state is closed, check if we are outside operating hours
124
+ const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
125
+ setOutOfOperatingHours(isOutsideOperatingHours);
126
+ }
127
+ }, [state.appStates.conversationState]);
122
128
  return /*#__PURE__*/_react.default.createElement(_omnichannelChatComponents.ChatButton, {
123
129
  componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
124
130
  controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,
package/lib/cjs/components/confirmationpanestateful/ConfirmationPaneStateful.js CHANGED
@@ -84,9 +84,13 @@ const ConfirmationPaneStateful = props => {
84
84
  (0, _react.useEffect)(() => {
85
85
  (0, _utils.preventFocusToMoveOutOfElement)(controlProps.id);
86
86
  const focusableElements = (0, _utils.findAllFocusableElement)(`#${controlProps.id}`);
87
- if (focusableElements) {
88
- focusableElements[0].focus();
89
- }
87
+ requestAnimationFrame(() => {
88
+ if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
89
+ focusableElements[0].focus({
90
+ preventScroll: true
91
+ });
92
+ }
93
+ });
90
94
  elements = (0, _utils.findParentFocusableElementsWithoutChildContainer)(controlProps.id);
91
95
  (0, _utils.setTabIndices)(elements, initialTabIndexMap, false);
92
96
  _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
package/lib/cjs/components/headerstateful/HeaderStateful.js CHANGED
@@ -37,7 +37,7 @@ const HeaderStateful = props => {
37
37
  endChat
38
38
  } = props;
39
39
  //Setting OutOfOperatingHours Flag
40
- const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(state.appStates.outsideOperatingHours);
40
+ const [outOfOperatingHours, setOutOfOperatingHours] = (0, _react.useState)(false);
41
41
  const outOfOfficeStyleProps = Object.assign({}, _defaultOutOfOfficeHeaderStyleProps.defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
42
42
 
43
43
  // For some reason state object is not getting updated values in this component
@@ -120,9 +120,6 @@ const HeaderStateful = props => {
120
120
  ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
121
121
  hideCloseButton: state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
122
122
  };
123
- (0, _react.useEffect)(() => {
124
- setOutOfOperatingHours(state.appStates.outsideOperatingHours);
125
- }, []);
126
123
  (0, _react.useEffect)(() => {
127
124
  var _state$domainStates2;
128
125
  localConfirmationPaneState.current = state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
@@ -138,6 +135,13 @@ const HeaderStateful = props => {
138
135
  ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
139
136
  });
140
137
  }, []);
138
+ (0, _react.useEffect)(() => {
139
+ if (state.appStates.conversationState === _ConversationState.ConversationState.Closed) {
140
+ // If the conversation state is closed, check if we are outside operating hours
141
+ const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
142
+ setOutOfOperatingHours(isOutsideOperatingHours);
143
+ }
144
+ }, [state.appStates.conversationState]);
141
145
  if (props.draggable === true) {
142
146
  var _generalStyleProps;
143
147
  const styleProps = outOfOperatingHours || state.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;
package/lib/cjs/components/livechatwidget/LiveChatWidget.js CHANGED
@@ -16,14 +16,15 @@ var _createReducer = require("../../contexts/createReducer");
16
16
  var _LiveChatWidgetContextInitialState = require("../../contexts/common/LiveChatWidgetContextInitialState");
17
17
  var _getMockChatSDKIfApplicable = require("./common/getMockChatSDKIfApplicable");
18
18
  var _utils = require("../../common/utils");
19
+ var _liveChatConfigUtils = require("./common/liveChatConfigUtils");
20
+ var _startChatErrorHandler = require("./common/startChatErrorHandler");
19
21
  var _overridePropsOnMockIfApplicable = _interopRequireDefault(require("./common/overridePropsOnMockIfApplicable"));
20
22
  var _registerTelemetryLoggers = require("./common/registerTelemetryLoggers");
21
- var _startChatErrorHandler = require("./common/startChatErrorHandler");
22
23
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
24
  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); }
24
25
  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; }
25
26
  const LiveChatWidget = props => {
26
- var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv;
27
+ var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv, _props$chatConfig2, _props$chatConfig2$Li;
27
28
  const reducer = (0, _createReducer.createReducer)();
28
29
  const [state, dispatch] = (0, _react.useReducer)(reducer, (0, _LiveChatWidgetContextInitialState.getLiveChatWidgetContextInitialState)(props));
29
30
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,7 +38,7 @@ const LiveChatWidget = props => {
37
38
  }
38
39
 
39
40
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
40
- const isAuthenticatedChat = !!((_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction);
41
+ const isAuthenticatedChat = !!((_props$chatConfig = props.chatConfig) !== null && _props$chatConfig !== void 0 && (_props$chatConfig$Liv = _props$chatConfig.LiveChatConfigAuthSettings) !== null && _props$chatConfig$Liv !== void 0 && _props$chatConfig$Liv.msdyn_javascriptclientfunction) || (0, _liveChatConfigUtils.isPersistentChatEnabled)((_props$chatConfig2 = props.chatConfig) === null || _props$chatConfig2 === void 0 ? void 0 : (_props$chatConfig2$Li = _props$chatConfig2.LiveWSAndLiveChatEngJoin) === null || _props$chatConfig2$Li === void 0 ? void 0 : _props$chatConfig2$Li.msdyn_conversationmode);
41
42
  if (!facadeChatSDK) {
42
43
  var _props$mock2;
43
44
  setFacadeChatSDK(new _FacadeChatSDK.FacadeChatSDK({
package/lib/cjs/components/livechatwidget/common/liveChatConfigUtils.js CHANGED
@@ -13,7 +13,7 @@ const isPostChatSurveyEnabled = async facadeChatSDK => {
13
13
  return postChatEnabled === "true";
14
14
  };
15
15
  exports.isPostChatSurveyEnabled = isPostChatSurveyEnabled;
16
- const isPersistentChatEnabled = async conversationMode => {
16
+ const isPersistentChatEnabled = conversationMode => {
17
17
  if ((0, _utils.isNullOrUndefined)(conversationMode)) {
18
18
  return false;
19
19
  }
package/lib/cjs/components/livechatwidget/common/persistentChatHelper.js CHANGED
@@ -6,16 +6,23 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.shouldSetPreChatIfPersistentChat = void 0;
7
7
  var _liveChatConfigUtils = require("./liveChatConfigUtils");
8
8
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
9
- const shouldSetPreChatIfPersistentChat = async (chatSDK, conversationMode, showPreChat) => {
10
- const persistentEnabled = await (0, _liveChatConfigUtils.isPersistentChatEnabled)(conversationMode);
9
+ const shouldSetPreChatIfPersistentChat = async (facadeChatSDK, conversationMode, showPreChat) => {
10
+ const persistentEnabled = (0, _liveChatConfigUtils.isPersistentChatEnabled)(conversationMode);
11
11
  let skipPreChat = false;
12
12
  if (persistentEnabled) {
13
+ // Access private properties using type assertions
14
+ const chatSDK = facadeChatSDK.getChatSDK();
15
+
16
+ // Use type assertion to bypass private access restriction
17
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
18
+ const sdkAsAny = chatSDK;
19
+ // most likely this is not set , the facade will take care of it
13
20
  const reconnectableChatsParams = {
14
- authenticatedUserToken: chatSDK.authenticatedUserToken,
15
- requestId: chatSDK.requestId
21
+ authenticatedUserToken: sdkAsAny.authenticatedUserToken,
22
+ requestId: sdkAsAny.requestId
16
23
  };
17
24
  try {
18
- const reconnectableChatsResponse = await chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams);
25
+ const reconnectableChatsResponse = await facadeChatSDK.getReconnectableChats(reconnectableChatsParams);
19
26
  if (reconnectableChatsResponse && reconnectableChatsResponse.reconnectid) {
20
27
  // Skip rendering prechat on existing persistent chat session
21
28
  skipPreChat = true;
package/lib/cjs/components/livechatwidget/common/startChat.js CHANGED
@@ -75,7 +75,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
75
75
  const parseToJson = false;
76
76
  const preChatSurveyResponse = (props === null || props === void 0 ? void 0 : (_props$preChatSurveyP = props.preChatSurveyPaneProps) === null || _props$preChatSurveyP === void 0 ? void 0 : (_props$preChatSurveyP2 = _props$preChatSurveyP.controlProps) === null || _props$preChatSurveyP2 === void 0 ? void 0 : _props$preChatSurveyP2.payload) ?? (await facadeChatSDK.getPreChatSurvey(parseToJson));
77
77
  let showPrechat = isProactiveChat ? preChatSurveyResponse && proactiveChatEnablePrechatState : preChatSurveyResponse && !(props !== null && props !== void 0 && (_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hidePreChatSurveyPane);
78
- showPrechat = await (0, _persistentChatHelper.shouldSetPreChatIfPersistentChat)(facadeChatSDK.getChatSDK(), state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_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.msdyn_conversationmode, showPrechat);
78
+ showPrechat = await (0, _persistentChatHelper.shouldSetPreChatIfPersistentChat)(facadeChatSDK, state === null || state === void 0 ? void 0 : (_state$domainStates = state.domainStates) === null || _state$domainStates === void 0 ? void 0 : (_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.msdyn_conversationmode, showPrechat);
79
79
  if (showPrechat) {
80
80
  var _state$domainStates2, _state$domainStates2$, _state$domainStates2$2, _state$domainStates2$3;
81
81
  const isOutOfOperatingHours = (state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : (_state$domainStates2$ = _state$domainStates2.liveChatConfig) === null || _state$domainStates2$ === void 0 ? void 0 : (_state$domainStates2$2 = _state$domainStates2$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates2$2 === void 0 ? void 0 : (_state$domainStates2$3 = _state$domainStates2$2.OutOfOperatingHours) === null || _state$domainStates2$3 === void 0 ? void 0 : _state$domainStates2$3.toString().toLowerCase()) === "true";
@@ -163,7 +163,7 @@ exports.setPreChatAndInitiateChat = setPreChatAndInitiateChat;
163
163
  const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props, params, persistedState) => {
164
164
  var _state$domainStates7, _state$domainStates7$, _state$domainStates7$2;
165
165
  let isStartChatSuccessful = false;
166
- const persistentChatEnabled = await (0, _liveChatConfigUtils.isPersistentChatEnabled)(state === null || state === void 0 ? void 0 : (_state$domainStates7 = state.domainStates) === null || _state$domainStates7 === void 0 ? void 0 : (_state$domainStates7$ = _state$domainStates7.liveChatConfig) === null || _state$domainStates7$ === void 0 ? void 0 : (_state$domainStates7$2 = _state$domainStates7$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates7$2 === void 0 ? void 0 : _state$domainStates7$2.msdyn_conversationmode);
166
+ const persistentChatEnabled = (0, _liveChatConfigUtils.isPersistentChatEnabled)(state === null || state === void 0 ? void 0 : (_state$domainStates7 = state.domainStates) === null || _state$domainStates7 === void 0 ? void 0 : (_state$domainStates7$ = _state$domainStates7.liveChatConfig) === null || _state$domainStates7$ === void 0 ? void 0 : (_state$domainStates7$2 = _state$domainStates7$.LiveWSAndLiveChatEngJoin) === null || _state$domainStates7$2 === void 0 ? void 0 : _state$domainStates7$2.msdyn_conversationmode);
167
167
  if ((state === null || state === void 0 ? void 0 : state.appStates.conversationState) === _ConversationState.ConversationState.Closed) {
168
168
  // Preventive reset to avoid starting chat with previous requestId which could potentially cause problems
169
169
  (0, _endChat.chatSDKStateCleanUp)(facadeChatSDK.getChatSDK());
package/lib/cjs/components/livechatwidget/common/startChatErrorHandler.js CHANGED
@@ -15,6 +15,11 @@ var _StartChatFailureType = require("../../../contexts/common/StartChatFailureTy
15
15
  var _TelemetryHelper = require("../../../common/telemetry/TelemetryHelper");
16
16
  var _TelemetryManager = require("../../../common/telemetry/TelemetryManager");
17
17
  var _utils = require("../../../common/utils");
18
+ // Helper function to check if error is authentication-related
19
+ const isAuthenticationError = errorMessage => {
20
+ return errorMessage === _Constants.WidgetLoadCustomErrorString.AuthenticationFailedErrorString || errorMessage.startsWith("Authentication Setup Error:") || errorMessage.includes("Token validation failed") || errorMessage.includes("Authentication token");
21
+ };
22
+
18
23
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
19
24
  const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuccessful) => {
20
25
  var _props$controlProps;
@@ -23,19 +28,16 @@ const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuc
23
28
  return;
24
29
  }
25
30
 
26
- // Handle internal or misc errors
27
- if (ex.message === _Constants.WidgetLoadCustomErrorString.AuthenticationFailedErrorString) {
31
+ // Handle authentication-related errors
32
+ if (isAuthenticationError(ex.message)) {
28
33
  dispatch({
29
34
  type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
30
35
  payload: _StartChatFailureType.StartChatFailureType.AuthSetupError
31
36
  });
32
- // set conversation to error to enforce error UI pane
33
- dispatch({
34
- type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
35
- payload: _ConversationState.ConversationState.Error
36
- });
37
37
  logWidgetLoadCompleteWithError(ex);
38
+ // Don't return early - let the generic error handling logic handle hideErrorUIPane and telemetry
38
39
  }
40
+
39
41
  if (ex.message === _Constants.WidgetLoadCustomErrorString.NetworkErrorString) {
40
42
  logWidgetLoadCompleteWithError(ex);
41
43
  }
@@ -58,8 +60,11 @@ const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuc
58
60
  case _omnichannelChatSdk.ChatSDKErrorName.UninitializedChatSDK:
59
61
  handleUninitializedChatSDK(ex);
60
62
  break;
61
- // Handle the case indicating failure to retrieve an authenticated chat conversation
62
63
  case _omnichannelChatSdk.ChatSDKErrorName.AuthenticatedChatConversationRetrievalFailure:
64
+ dispatch({
65
+ type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
66
+ payload: _StartChatFailureType.StartChatFailureType.Unauthorized
67
+ });
63
68
  logWidgetLoadCompleteWithError(ex);
64
69
  break;
65
70
  case _omnichannelChatSdk.ChatSDKErrorName.InvalidConversation:
@@ -112,6 +117,9 @@ const logWidgetLoadFailed = ex => {
112
117
  if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
113
118
  exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
114
119
  }
120
+ if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
121
+ exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
122
+ }
115
123
  _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
116
124
  Event: _TelemetryConstants.TelemetryEvent.WidgetLoadFailed,
117
125
  Description: "Widget load complete with error",
@@ -141,6 +149,9 @@ const logWidgetLoadCompleteWithError = ex => {
141
149
  if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
142
150
  exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
143
151
  }
152
+ if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
153
+ exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
154
+ }
144
155
  _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.ERROR, {
145
156
  Event: _TelemetryConstants.TelemetryEvent.WidgetLoadFailed,
146
157
  Description: "Widget load complete with error",
@@ -229,6 +240,12 @@ const handleChatTokenRetrievalFailure = (dispatch, ex) => {
229
240
  type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
230
241
  payload: _StartChatFailureType.StartChatFailureType.Unauthorized
231
242
  });
243
+ } else {
244
+ // For other authentication-related token retrieval failures, set as AuthSetupError
245
+ dispatch({
246
+ type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
247
+ payload: _StartChatFailureType.StartChatFailureType.AuthSetupError
248
+ });
232
249
  }
233
250
  logWidgetLoadCompleteWithError(ex);
234
251
  }
package/lib/cjs/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js CHANGED
@@ -63,7 +63,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
63
63
  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); }
64
64
  let uiTimer;
65
65
  const LiveChatWidgetStateful = props => {
66
- var _props$webChatContain, _props$styleProps, _props$webChatContain2, _props$webChatContain3, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain7, _state$appStates14, _props$webChatContain9, _props$webChatContain10, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _props$webChatContain11, _props$webChatContain12, _props$webChatContain13, _props$webChatContain14, _props$webChatContain15, _props$webChatContain16, _props$webChatContain17, _props$webChatContain18, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
66
+ var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6, _props$webChatContain7, _props$webChatContain8, _props$webChatContain9, _props$styleProps, _props$webChatContain10, _props$webChatContain11, _props$controlProps, _props$controlProps3, _state$appStates7, _props$webChatContain15, _state$appStates14, _props$webChatContain17, _props$webChatContain18, _props$controlProps12, _props$draggableChatW, _props$draggableChatW2, _props$draggableChatW3, _props$draggableChatW4, _props$draggableChatW5, _livechatProps$webCha, _livechatProps$styleP, _livechatProps$contro, _livechatProps$contro2, _livechatProps$compon, _livechatProps$contro3, _livechatProps$compon2, _livechatProps$contro4, _livechatProps$compon3, _livechatProps$contro5, _livechatProps$compon4, _livechatProps$contro6, _livechatProps$compon5, _livechatProps$contro7, _livechatProps$compon6, _livechatProps$contro8, _livechatProps$compon7, _livechatProps$contro9, _livechatProps$compon8, _livechatProps$contro10, _livechatProps$contro11, _livechatProps$compon9, _livechatProps$contro12, _livechatProps$compon10, _livechatProps$contro13, _livechatProps$compon11, _livechatProps$compon12, _livechatProps$compon13;
67
67
  (0, _react2.useEffect)(() => {
68
68
  uiTimer = (0, _utils.createTimer)();
69
69
  _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
@@ -87,6 +87,8 @@ const LiveChatWidgetStateful = props => {
87
87
  Composer
88
88
  } = _botframeworkWebchat.Components;
89
89
  const canStartProactiveChat = (0, _react2.useRef)(true);
90
+ const bubbleBackground = ((_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : (_props$webChatContain3 = _props$webChatContain2.webChatStyles) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.bubbleBackground) ?? ((_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : (_props$webChatContain5 = _props$webChatContain4.adaptiveCardStyles) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background;
91
+ const bubbleTextColor = ((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : (_props$webChatContain7 = _props$webChatContain6.webChatStyles) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.bubbleTextColor) ?? ((_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : (_props$webChatContain9 = _props$webChatContain8.adaptiveCardStyles) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color;
90
92
 
91
93
  // Process general styles
92
94
  const generalStyles = {
@@ -95,7 +97,7 @@ const LiveChatWidgetStateful = props => {
95
97
 
96
98
  //Scrollbar styles
97
99
  const scrollbarProps = Object.assign({}, _defaultScrollBarProps.defaultScrollBarProps, props === null || props === void 0 ? void 0 : props.scrollBarProps);
98
- const sendBoxTextArea = props === null || props === void 0 ? void 0 : (_props$webChatContain2 = props.webChatContainerProps) === null || _props$webChatContain2 === void 0 ? void 0 : (_props$webChatContain3 = _props$webChatContain2.sendBoxTextBox) === null || _props$webChatContain3 === void 0 ? void 0 : _props$webChatContain3.textarea;
100
+ const sendBoxTextArea = props === null || props === void 0 ? void 0 : (_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : (_props$webChatContain11 = _props$webChatContain10.sendBoxTextBox) === null || _props$webChatContain11 === void 0 ? void 0 : _props$webChatContain11.textarea;
99
101
 
100
102
  // In case the broadcast channel is already initialized elsewhere; One tab can only hold 1 instance
101
103
  if ((props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.skipBroadcastChannelInit) !== true) {
@@ -282,7 +284,8 @@ const LiveChatWidgetStateful = props => {
282
284
  var _state$appStates6;
283
285
  if ((state === null || state === void 0 ? void 0 : (_state$appStates6 = state.appStates) === null || _state$appStates6 === void 0 ? void 0 : _state$appStates6.hideStartChatButton) === true) {
284
286
  //handle OOH pane
285
- if (state.appStates.outsideOperatingHours === true) {
287
+ // Only set OutOfOffice state for new conversations, allow existing Active/InActive conversations to continue
288
+ if (state.appStates.outsideOperatingHours === true && state.appStates.conversationState !== _ConversationState.ConversationState.Active) {
286
289
  dispatch({
287
290
  type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_CONVERSATION_STATE,
288
291
  payload: _ConversationState.ConversationState.OutOfOffice
@@ -631,8 +634,8 @@ const LiveChatWidgetStateful = props => {
631
634
  });
632
635
  }
633
636
  if (state.appStates.conversationState === _ConversationState.ConversationState.InActive) {
634
- var _props$webChatContain4, _props$webChatContain5;
635
- if ((props === null || props === void 0 ? void 0 : (_props$webChatContain4 = props.webChatContainerProps) === null || _props$webChatContain4 === void 0 ? void 0 : (_props$webChatContain5 = _props$webChatContain4.renderingMiddlewareProps) === null || _props$webChatContain5 === void 0 ? void 0 : _props$webChatContain5.hideSendboxOnConversationEnd) !== false) {
637
+ var _props$webChatContain12, _props$webChatContain13;
638
+ if ((props === null || props === void 0 ? void 0 : (_props$webChatContain12 = props.webChatContainerProps) === null || _props$webChatContain12 === void 0 ? void 0 : (_props$webChatContain13 = _props$webChatContain12.renderingMiddlewareProps) === null || _props$webChatContain13 === void 0 ? void 0 : _props$webChatContain13.hideSendboxOnConversationEnd) !== false) {
636
639
  setWebChatStyles(styles => {
637
640
  return {
638
641
  ...styles,
@@ -676,12 +679,12 @@ const LiveChatWidgetStateful = props => {
676
679
  }
677
680
  }, [state.appStates.unreadMessageCount]);
678
681
  (0, _react2.useEffect)(() => {
679
- var _props$webChatContain6;
682
+ var _props$webChatContain14;
680
683
  setWebChatStyles({
681
684
  ...webChatStyles,
682
- ...((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.webChatStyles)
685
+ ...((_props$webChatContain14 = props.webChatContainerProps) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.webChatStyles)
683
686
  });
684
- }, [(_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.webChatStyles]);
687
+ }, [(_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : _props$webChatContain15.webChatStyles]);
685
688
  (0, _react2.useEffect)(() => {
686
689
  //Confirmation pane dismissing through OK option, so proceed with end chat
687
690
  if (state.domainStates.confirmationState === _Constants.ConfirmationState.Ok) {
@@ -780,12 +783,12 @@ const LiveChatWidgetStateful = props => {
780
783
 
781
784
  // if props state gets updates we need to update the renderingMiddlewareProps in the state
782
785
  (0, _react2.useEffect)(() => {
783
- var _props$webChatContain8;
786
+ var _props$webChatContain16;
784
787
  dispatch({
785
788
  type: _LiveChatWidgetActionType.LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
786
- payload: (_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : _props$webChatContain8.renderingMiddlewareProps
789
+ payload: (_props$webChatContain16 = props.webChatContainerProps) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.renderingMiddlewareProps
787
790
  });
788
- }, [(_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.renderingMiddlewareProps]);
791
+ }, [(_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : _props$webChatContain17.renderingMiddlewareProps]);
789
792
  (0, _react2.useEffect)(() => {
790
793
  _TelemetryHelper.TelemetryHelper.logLoadingEventToAllTelemetry(_TelemetryConstants.LogLevel.INFO, {
791
794
  Event: _TelemetryConstants.TelemetryEvent.UXLiveChatWidgetCompleted,
@@ -828,7 +831,7 @@ const LiveChatWidgetStateful = props => {
828
831
  const webChatProps = (0, _initWebChatComposer.initWebChatComposer)(props, state, dispatch, facadeChatSDK, endChatRelay);
829
832
  const downloadTranscriptProps = (0, _createDownloadTranscriptProps.default)(props.downloadTranscriptProps, {
830
833
  ...(_defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps === null || _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps === void 0 ? void 0 : _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.webChatStyles),
831
- ...((_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : _props$webChatContain10.webChatStyles)
834
+ ...((_props$webChatContain18 = props.webChatContainerProps) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.webChatStyles)
832
835
  }, props.webChatContainerProps);
833
836
  const livechatProps = {
834
837
  ...props,
@@ -854,6 +857,11 @@ const LiveChatWidgetStateful = props => {
854
857
  (0, _utils.setOcUserAgent)(facadeChatSDK.getChatSDK());
855
858
  const directLine = ((_livechatProps$webCha = livechatProps.webChatContainerProps) === null || _livechatProps$webCha === void 0 ? void 0 : _livechatProps$webCha.directLine) ?? adapter ?? _defaultWebChatContainerStatefulProps.defaultWebChatContainerStatefulProps.directLine;
856
859
  const userID = directLine.getState ? directLine === null || directLine === void 0 ? void 0 : directLine.getState("acs.userId") : "teamsvisitor";
860
+ const styleOptions = _react2.default.useMemo(() => ({
861
+ ...webChatStyles,
862
+ bubbleBackground,
863
+ bubbleTextColor
864
+ }), [webChatStyles, bubbleBackground, bubbleTextColor]);
857
865
 
858
866
  // WebChat's Composer can only be rendered if a directLine object is defined
859
867
  return directLine && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
@@ -892,11 +900,7 @@ const LiveChatWidgetStateful = props => {
892
900
  }`}
893
901
  `), /*#__PURE__*/_react2.default.createElement(_DraggableChatWidget.default, chatWidgetDraggableConfig, /*#__PURE__*/_react2.default.createElement(Composer, _extends({}, webChatProps, {
894
902
  userID: userID,
895
- styleOptions: {
896
- ...webChatStyles,
897
- bubbleBackground: ((_props$webChatContain11 = props.webChatContainerProps) === null || _props$webChatContain11 === void 0 ? void 0 : (_props$webChatContain12 = _props$webChatContain11.webChatStyles) === null || _props$webChatContain12 === void 0 ? void 0 : _props$webChatContain12.bubbleBackground) ?? ((_props$webChatContain13 = props.webChatContainerProps) === null || _props$webChatContain13 === void 0 ? void 0 : (_props$webChatContain14 = _props$webChatContain13.adaptiveCardStyles) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background,
898
- bubbleTextColor: ((_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : (_props$webChatContain16 = _props$webChatContain15.webChatStyles) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.bubbleTextColor) ?? ((_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : (_props$webChatContain18 = _props$webChatContain17.adaptiveCardStyles) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color
899
- },
903
+ styleOptions: styleOptions,
900
904
  directLine: directLine
901
905
  }), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
902
906
  id: widgetElementId,
package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js CHANGED
@@ -56,7 +56,7 @@ const createMagicCodeSuccessResponse = signin => {
56
56
  };
57
57
  };
58
58
  const WebChatContainerStateful = props => {
59
- var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai, _props$webChatContain7, _props$webChatContain8, _defaultWebChatContai2, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _props$webChatContain9, _props$webChatContain10;
59
+ var _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _props$webChatContain5, _props$webChatContain6, _defaultWebChatContai, _props$webChatContain7, _props$webChatContain8, _defaultWebChatContai2, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _props$webChatContain9, _props$webChatContain10;
60
60
  (0, _react2.useEffect)(() => {
61
61
  uiTimer = (0, _utils.createTimer)();
62
62
  _TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
@@ -216,14 +216,48 @@ const WebChatContainerStateful = props => {
216
216
  .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp9 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp9 === void 0 ? void 0 : _webChatContainerProp9.buttonWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
217
217
 
218
218
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
219
- background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjI1MDEgNC41MDAxN0gxMC43NDk1QzExLjE2MzcgNC41MDAxNyAxMS40OTk1IDQuODM1OTYgMTEuNDk5NSA1LjI1MDE3QzExLjQ5OTUgNS42Mjk4NiAxMS4yMTczIDUuOTQzNjYgMTAuODUxMyA1Ljk5MzMyTDEwLjc0OTUgNi4wMDAxN0g3LjI0OTc0QzYuMDcwNzkgNS45OTk2MSA1LjEwMzQ5IDYuOTA2NTYgNS4wMDc4NiA4LjA2MTEyTDUuMDAwMjggOC4yMjAwM0w1LjAwMzEyIDE2Ljc1MDdDNS4wMDM0MyAxNy45NDE1IDUuOTI4ODUgMTguOTE2MSA3LjA5OTY2IDE4Ljk5NDlMNy4yNTM3MSAxOS4wMDAxTDE1Ljc1MTggMTguOTg4NEMxNi45NDE1IDE4Ljk4NjggMTcuOTE0NSAxOC4wNjIgMTcuOTkzNSAxNi44OTIzTDE3Ljk5ODcgMTYuNzM4NFYxMy4yMzIxQzE3Ljk5ODcgMTIuODE3OSAxOC4zMzQ1IDEyLjQ4MjEgMTguNzQ4NyAxMi40ODIxQzE5LjEyODQgMTIuNDgyMSAxOS40NDIyIDEyLjc2NDMgMTkuNDkxOCAxMy4xMzAzTDE5LjQ5ODcgMTMuMjMyMVYxNi43Mzg0QzE5LjQ5ODcgMTguNzQwNyAxNy45MjkzIDIwLjM3NjkgMTUuOTUyOCAyMC40ODI5TDE1Ljc1MzggMjAuNDg4NEw3LjI1ODI3IDIwLjUwMDFMNy4wNTQ5NSAyMC40OTQ5QzUuMTQyMzkgMjAuMzk1NCAzLjYwODk1IDE4Ljg2MjcgMy41MDgzNyAxNi45NTAyTDMuNTAzMTIgMTYuNzUxMUwzLjUwMDg5IDguMjUyN0wzLjUwNTI5IDguMDUwMkMzLjYwNTM5IDYuMTM3NDkgNS4xMzg2NyA0LjYwNDQ5IDcuMDUwOTYgNC41MDUyN0w3LjI1MDEgNC41MDAxN0gxMC43NDk1SDcuMjUwMVpNMTMuNzQ4MSAzLjAwMTQ2TDIwLjMwMTggMy4wMDE5N0wyMC40MDE0IDMuMDE1NzVMMjAuNTAyMiAzLjA0MzkzTDIwLjU1OSAzLjA2ODAzQzIwLjYxMjIgMy4wOTEyMiAyMC42NjM0IDMuMTIxNjMgMjAuNzExMSAzLjE1ODg1TDIwLjc4MDQgMy4yMjE1NkwyMC44NjQxIDMuMzIwMTRMMjAuOTE4MyAzLjQxMDI1TDIwLjk1NyAzLjUwMDU3TDIwLjk3NjIgMy41NjQ3NkwyMC45ODk4IDMuNjI4NjJMMjAuOTk5MiAzLjcyMjgyTDIwLjk5OTcgMTAuMjU1NEMyMC45OTk3IDEwLjY2OTYgMjAuNjYzOSAxMS4wMDU0IDIwLjI0OTcgMTEuMDA1NEMxOS44NyAxMS4wMDU0IDE5LjU1NjIgMTAuNzIzMiAxOS41MDY1IDEwLjM1NzFMMTkuNDk5NyAxMC4yNTU0TDE5LjQ5ODkgNS41NjE0N0wxMi4yNzk3IDEyLjc4NDdDMTIuMDEzNCAxMy4wNTEgMTEuNTk2OCAxMy4wNzUzIDExLjMwMzEgMTIuODU3NUwxMS4yMTkgMTIuNzg0OUMxMC45NTI3IDEyLjUxODcgMTAuOTI4NCAxMi4xMDIxIDExLjE0NjIgMTEuODA4NEwxMS4yMTg4IDExLjcyNDNMMTguNDM2OSA0LjUwMTQ2SDEzLjc0ODFDMTMuMzY4NCA0LjUwMTQ2IDEzLjA1NDYgNC4yMTkzMSAxMy4wMDUgMy44NTMyNEwxMi45OTgxIDMuNzUxNDZDMTIuOTk4MSAzLjM3MTc3IDEzLjI4MDMgMy4wNTc5NyAxMy42NDY0IDMuMDA4MzFMMTMuNzQ4MSAzLjAwMTQ2WiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4) !important;
219
+ /* Fallback for browsers that don't support mask */
220
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
221
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp10 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp10 === void 0 ? void 0 : (_webChatContainerProp11 = _webChatContainerProp10.receivedMessageAnchorStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.filter) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.filter)};
220
222
  height: .75em;
223
+ width: .75em;
221
224
  margin-left: .25em;
222
- filter:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp10 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp10 === void 0 ? void 0 : (_webChatContainerProp11 = _webChatContainerProp10.receivedMessageAnchorStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.filter) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.filter)};
225
+ display: inline-block;
226
+ }
227
+
228
+ .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
229
+ /* Fallback for browsers that don't support mask */
230
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
231
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp12 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp12 === void 0 ? void 0 : (_webChatContainerProp13 = _webChatContainerProp12.sentMessageAnchorStyles) === null || _webChatContainerProp13 === void 0 ? void 0 : _webChatContainerProp13.filter) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.filter)};
232
+ height: .75em;
233
+ width: .75em;
234
+ margin-left: .25em;
235
+ display: inline-block;
236
+ }
237
+
238
+ /* Modern browsers with mask support */
239
+ @supports (mask: url()) or (-webkit-mask: url()) {
240
+ .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
241
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp14 === void 0 ? void 0 : (_webChatContainerProp15 = _webChatContainerProp14.receivedMessageAnchorStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)} !important;
242
+ background-image: none !important;
243
+ filter: none !important;
244
+ mask: url("data:image/svg+xml,%3Csvg viewBox='3 3 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z' fill='currentColor' /%3E%3C/svg%3E") no-repeat center;
245
+ -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='3 3 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z' fill='currentColor' /%3E%3C/svg%3E") no-repeat center;
246
+ mask-size: contain;
247
+ -webkit-mask-size: contain;
248
+ }
249
+
250
+ .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
251
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp16 === void 0 ? void 0 : (_webChatContainerProp17 = _webChatContainerProp16.sentMessageAnchorStyles) === null || _webChatContainerProp17 === void 0 ? void 0 : _webChatContainerProp17.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)} !important;
252
+ background-image: none !important;
253
+ filter: none !important;
254
+ mask: url("data:image/svg+xml,%3Csvg viewBox='3 3 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z' fill='currentColor' /%3E%3C/svg%3E") no-repeat center;
255
+ -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='3 3 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z' fill='currentColor' /%3E%3C/svg%3E") no-repeat center;
256
+ mask-size: contain;
257
+ -webkit-mask-size: contain;
258
+ }
223
259
  }
224
260
  pre {
225
- white-space: pre-wrap;
226
- white-space: -moz-pre-wrap;
227
261
  white-space: -pre-wrap;
228
262
  white-space: -o-pre-wrap;
229
263
  word-wrap: break-word;
@@ -232,18 +266,18 @@ const WebChatContainerStateful = props => {
232
266
  .ms_lcw_webchat_received_message a:visited,
233
267
  .ms_lcw_webchat_received_message a:hover,
234
268
  .ms_lcw_webchat_received_message a:active {
235
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp12 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp12 === void 0 ? void 0 : (_webChatContainerProp13 = _webChatContainerProp12.receivedMessageAnchorStyles) === null || _webChatContainerProp13 === void 0 ? void 0 : _webChatContainerProp13.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)};
269
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp18 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp18 === void 0 ? void 0 : (_webChatContainerProp19 = _webChatContainerProp18.receivedMessageAnchorStyles) === null || _webChatContainerProp19 === void 0 ? void 0 : _webChatContainerProp19.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)};
236
270
  }
237
271
  .ms_lcw_webchat_sent_message a:link,
238
272
  .ms_lcw_webchat_sent_message a:visited,
239
273
  .ms_lcw_webchat_sent_message a:hover,
240
274
  .ms_lcw_webchat_sent_message a:active {
241
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp14 === void 0 ? void 0 : (_webChatContainerProp15 = _webChatContainerProp14.sentMessageAnchorStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)};
275
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp20 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp20 === void 0 ? void 0 : (_webChatContainerProp21 = _webChatContainerProp20.sentMessageAnchorStyles) === null || _webChatContainerProp21 === void 0 ? void 0 : _webChatContainerProp21.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)};
242
276
  }
243
277
 
244
278
  // we had a nasty bug long time ago with crashing borders messing with the sendbox, so if customer adds this value, they need to deal with that
245
279
  .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
246
- border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp16 === void 0 ? void 0 : _webChatContainerProp16.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
280
+ border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp22 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp22 === void 0 ? void 0 : _webChatContainerProp22.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
247
281
  }
248
282
 
249
283
  .webchat__stacked-layout_container>div {