@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/contexts/common/LiveChatWidgetContextInitialState.js CHANGED
@@ -30,7 +30,7 @@ const getLiveChatWidgetContextInitialState = props => {
30
30
  * as part of the flow, the pre-chat will be detected and then it will be displayed properly
31
31
  * this case is only and only for pre-chat pane.
32
32
  * **/
33
- if (initialStateFromCache.appStates.conversationState === _ConversationState.ConversationState.Prechat || initialStateFromCache.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice || outsideOperatingHours) {
33
+ if (initialStateFromCache.appStates.conversationState === _ConversationState.ConversationState.Prechat || initialStateFromCache.appStates.conversationState === _ConversationState.ConversationState.OutOfOffice || outsideOperatingHours && initialStateFromCache.appStates.conversationState !== _ConversationState.ConversationState.Active) {
34
34
  initialStateFromCache.appStates.conversationState = _ConversationState.ConversationState.Closed;
35
35
  // if we are resetting the conversation state, there is no point to obtain minimized state from cache
36
36
  initialStateFromCache.appStates.isMinimized = undefined;
package/lib/esm/common/Constants.js CHANGED
@@ -124,7 +124,7 @@ _defineProperty(Constants, "WebchatSequenceIdAttribute", "webchat:sequence-id");
124
124
  _defineProperty(Constants, "MessageSequenceIdOverride", "MessageSequenceIdOverride");
125
125
  export const Regex = (_class = /*#__PURE__*/_createClass(function Regex() {
126
126
  _classCallCheck(this, Regex);
127
- }), _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);
127
+ }), _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);
128
128
  export let HtmlIdNames = /*#__PURE__*/_createClass(function HtmlIdNames() {
129
129
  _classCallCheck(this, HtmlIdNames);
130
130
  });
package/lib/esm/common/facades/FacadeChatSDK.js CHANGED
@@ -103,7 +103,7 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
103
103
  token: last3digits
104
104
  }
105
105
  });
106
- throw new Error("Invalid token format, must be in JWT format");
106
+ throw new Error("Authentication Setup Error: Invalid token format, must be in JWT format");
107
107
  }
108
108
  try {
109
109
  const payload = this.enforceBase64Encoding(tokenParts[1]);
@@ -125,9 +125,9 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
125
125
  token: last3digits
126
126
  }
127
127
  });
128
- throw new Error("Invalid token payload, payload is not valid JSON");
128
+ throw new Error("Authentication Setup Error: Invalid token payload, payload is not valid JSON");
129
129
  } catch (e) {
130
- console.error("Failed to decode token", e);
130
+ console.error("Authentication Setup Error: Failed to decode token", e);
131
131
  TelemetryHelper.logFacadeChatSDKEventToAllTelemetry(LogLevel.ERROR, {
132
132
  Event: TelemetryEvent.NewTokenValidationFailed,
133
133
  Description: "Failed to decode token",
@@ -136,7 +136,7 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
136
136
  token: last3digits
137
137
  }
138
138
  });
139
- throw new Error("Failed to decode token");
139
+ throw new Error("Authentication Setup Error: Failed to decode authentication token");
140
140
  }
141
141
  }
142
142
  }, {
@@ -160,7 +160,7 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
160
160
  "Token": last3digits
161
161
  }
162
162
  });
163
- throw new Error(`New token is already expired, with epoch time ${this.expiration} , last 3 digits of token: ${last3digits}`);
163
+ throw new Error("Authentication Setup Error: New authentication token is already expired");
164
164
  }
165
165
  }
166
166
  }
@@ -274,9 +274,9 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
274
274
  if (pingResponse.result === true) {
275
275
  return fn();
276
276
  }
277
- const executionErrorMessage = `Authentication failed: Process to get a token failed for ${functionName}, ${pingResponse.message}`;
277
+ const executionErrorMessage = "Authentication Setup Error: Token validation failed - GetAuthToken function is not present";
278
278
  //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
279
- console.error(executionErrorMessage);
279
+ console.error(`${executionErrorMessage} Additional details: Process to get a token failed for ${functionName}, ${pingResponse.message}`);
280
280
  BroadcastService.postMessage({
281
281
  eventName: BroadcastEvent.OnWidgetError,
282
282
  payload: {
@@ -439,6 +439,48 @@ export let FacadeChatSDK = /*#__PURE__*/function () {
439
439
  let optionalParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
440
440
  return this.validateAndExecuteCall("getAgentAvailability", () => this.chatSDK.getAgentAvailability(optionalParams));
441
441
  }
442
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
443
+ }, {
444
+ key: "getReconnectableChats",
445
+ value: async function getReconnectableChats() {
446
+ let reconnectableChatsParams = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
447
+ /**
448
+ *
449
+ * This is a particular case, we dont expose getReconnectableChats in the SDK,
450
+ * The only way to use is by tunneling directly from the SDK to OCSDK,
451
+ *
452
+ * In case of prechat, the function is called before any formal authentication is made,
453
+ * this is an specific case for persistent chats, to prevent the survey be loaded again for an on going chat,
454
+ *
455
+ * In this case, we check for existance of the token , otherwise we perform the authentication, error is propagated in case of issues.
456
+ *
457
+ * Once the token is obtained , this will be added to the params to call the function.
458
+ *
459
+ * This is a particular case, should not be taken as pattern.
460
+ *
461
+ */
462
+
463
+ if (this.token === null || this.token === "") {
464
+ // If token is not set, try to get it using tokenRing
465
+ const pingResponse = await this.tokenRing();
466
+ if (pingResponse.result === false) {
467
+ const errorMessage = "Authentication Setup Error: Token validation failed for reconnectable chats";
468
+ //telemetry is already logged in tokenRing, so no need to log again, just return the error and communicate to the console
469
+ console.error(`Authentication failed: Process to get a token failed for getReconnectableChats, ${pingResponse.message}`);
470
+ BroadcastService.postMessage({
471
+ eventName: BroadcastEvent.OnWidgetError,
472
+ payload: {
473
+ errorMessage: errorMessage
474
+ }
475
+ });
476
+ throw new Error(errorMessage);
477
+ }
478
+ }
479
+
480
+ // Always override the token in params regardless of how getReconnectableChats was called
481
+ reconnectableChatsParams.authenticatedUserToken = this.token;
482
+ return this.validateAndExecuteCall("getReconnectableChats", () => this.chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams));
483
+ }
442
484
  }]);
443
485
  return FacadeChatSDK;
444
486
  }();
package/lib/esm/components/chatbuttonstateful/ChatButtonStateful.js CHANGED
@@ -30,7 +30,7 @@ export const ChatButtonStateful = props => {
30
30
  } = props;
31
31
  //Setting OutOfOperatingHours Flag
32
32
  //Setting OutOfOperatingHours Flag - to string conversion to normalize the value (could be boolean from other states or string directly from config)
33
- const [outOfOperatingHours, setOutOfOperatingHours] = useState(state.appStates.outsideOperatingHours);
33
+ const [outOfOperatingHours, setOutOfOperatingHours] = useState(false);
34
34
  const ref = useRef(() => {
35
35
  return;
36
36
  });
@@ -91,7 +91,6 @@ export const ChatButtonStateful = props => {
91
91
  ...(outOfOfficeButtonProps === null || outOfOfficeButtonProps === void 0 ? void 0 : outOfOfficeButtonProps.controlProps)
92
92
  };
93
93
  useEffect(() => {
94
- setOutOfOperatingHours(state.appStates.outsideOperatingHours);
95
94
  TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
96
95
  Event: TelemetryEvent.LCWChatButtonShow,
97
96
  ElapsedTimeInMilliseconds: TelemetryTimers.LcwLoadToChatButtonTimer.milliSecondsElapsed
@@ -110,6 +109,13 @@ export const ChatButtonStateful = props => {
110
109
  ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
111
110
  });
112
111
  }, []);
112
+ useEffect(() => {
113
+ if (state.appStates.conversationState === ConversationState.Closed) {
114
+ // If the conversation state is closed, check if we are outside operating hours
115
+ const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
116
+ setOutOfOperatingHours(isOutsideOperatingHours);
117
+ }
118
+ }, [state.appStates.conversationState]);
113
119
  return /*#__PURE__*/React.createElement(ChatButton, {
114
120
  componentOverrides: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.componentOverrides,
115
121
  controlProps: outOfOperatingHours ? outOfOfficeControlProps : controlProps,
package/lib/esm/components/confirmationpanestateful/ConfirmationPaneStateful.js CHANGED
@@ -75,9 +75,13 @@ export const ConfirmationPaneStateful = props => {
75
75
  useEffect(() => {
76
76
  preventFocusToMoveOutOfElement(controlProps.id);
77
77
  const focusableElements = findAllFocusableElement(`#${controlProps.id}`);
78
- if (focusableElements) {
79
- focusableElements[0].focus();
80
- }
78
+ requestAnimationFrame(() => {
79
+ if (focusableElements && focusableElements.length > 0 && focusableElements[0]) {
80
+ focusableElements[0].focus({
81
+ preventScroll: true
82
+ });
83
+ }
84
+ });
81
85
  elements = findParentFocusableElementsWithoutChildContainer(controlProps.id);
82
86
  setTabIndices(elements, initialTabIndexMap, false);
83
87
  TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
package/lib/esm/components/headerstateful/HeaderStateful.js CHANGED
@@ -28,7 +28,7 @@ export const HeaderStateful = props => {
28
28
  endChat
29
29
  } = props;
30
30
  //Setting OutOfOperatingHours Flag
31
- const [outOfOperatingHours, setOutOfOperatingHours] = useState(state.appStates.outsideOperatingHours);
31
+ const [outOfOperatingHours, setOutOfOperatingHours] = useState(false);
32
32
  const outOfOfficeStyleProps = Object.assign({}, defaultOutOfOfficeHeaderStyleProps, outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.styleProps);
33
33
 
34
34
  // For some reason state object is not getting updated values in this component
@@ -111,9 +111,6 @@ export const HeaderStateful = props => {
111
111
  ...(outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : outOfOfficeHeaderProps.controlProps),
112
112
  hideCloseButton: state.appStates.conversationState === ConversationState.OutOfOffice || (outOfOfficeHeaderProps === null || outOfOfficeHeaderProps === void 0 ? void 0 : (_outOfOfficeHeaderPro = outOfOfficeHeaderProps.controlProps) === null || _outOfOfficeHeaderPro === void 0 ? void 0 : _outOfOfficeHeaderPro.hideCloseButton)
113
113
  };
114
- useEffect(() => {
115
- setOutOfOperatingHours(state.appStates.outsideOperatingHours);
116
- }, []);
117
114
  useEffect(() => {
118
115
  var _state$domainStates2;
119
116
  localConfirmationPaneState.current = state === null || state === void 0 ? void 0 : (_state$domainStates2 = state.domainStates) === null || _state$domainStates2 === void 0 ? void 0 : _state$domainStates2.confirmationState;
@@ -129,6 +126,13 @@ export const HeaderStateful = props => {
129
126
  ElapsedTimeInMilliseconds: uiTimer.milliSecondsElapsed
130
127
  });
131
128
  }, []);
129
+ useEffect(() => {
130
+ if (state.appStates.conversationState === ConversationState.Closed) {
131
+ // If the conversation state is closed, check if we are outside operating hours
132
+ const isOutsideOperatingHours = state.appStates.outsideOperatingHours;
133
+ setOutOfOperatingHours(isOutsideOperatingHours);
134
+ }
135
+ }, [state.appStates.conversationState]);
132
136
  if (props.draggable === true) {
133
137
  var _generalStyleProps;
134
138
  const styleProps = outOfOperatingHours || state.appStates.conversationState === ConversationState.OutOfOffice ? outOfOfficeStyleProps : headerProps === null || headerProps === void 0 ? void 0 : headerProps.styleProps;
package/lib/esm/components/livechatwidget/LiveChatWidget.js CHANGED
@@ -10,11 +10,12 @@ import { createReducer } from "../../contexts/createReducer";
10
10
  import { getLiveChatWidgetContextInitialState } from "../../contexts/common/LiveChatWidgetContextInitialState";
11
11
  import { getMockChatSDKIfApplicable } from "./common/getMockChatSDKIfApplicable";
12
12
  import { isNullOrUndefined } from "../../common/utils";
13
+ import { isPersistentChatEnabled } from "./common/liveChatConfigUtils";
14
+ import { logWidgetLoadWithUnexpectedError } from "./common/startChatErrorHandler";
13
15
  import overridePropsOnMockIfApplicable from "./common/overridePropsOnMockIfApplicable";
14
16
  import { registerTelemetryLoggers } from "./common/registerTelemetryLoggers";
15
- import { logWidgetLoadWithUnexpectedError } from "./common/startChatErrorHandler";
16
17
  export const LiveChatWidget = props => {
17
- var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv;
18
+ var _props$mock, _props$featureConfigP, _props$chatConfig, _props$chatConfig$Liv, _props$chatConfig2, _props$chatConfig2$Li;
18
19
  const reducer = createReducer();
19
20
  const [state, dispatch] = useReducer(reducer, getLiveChatWidgetContextInitialState(props));
20
21
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -28,7 +29,7 @@ export const LiveChatWidget = props => {
28
29
  }
29
30
 
30
31
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
31
- 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);
32
+ 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) || 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);
32
33
  if (!facadeChatSDK) {
33
34
  var _props$mock2;
34
35
  setFacadeChatSDK(new FacadeChatSDK({
package/lib/esm/components/livechatwidget/common/liveChatConfigUtils.js CHANGED
@@ -6,7 +6,7 @@ export const isPostChatSurveyEnabled = async facadeChatSDK => {
6
6
  const postChatEnabled = (_chatConfig$LiveWSAnd = chatConfig.LiveWSAndLiveChatEngJoin) === null || _chatConfig$LiveWSAnd === void 0 ? void 0 : _chatConfig$LiveWSAnd.msdyn_postconversationsurveyenable.toString().toLowerCase();
7
7
  return postChatEnabled === "true";
8
8
  };
9
- export const isPersistentChatEnabled = async conversationMode => {
9
+ export const isPersistentChatEnabled = conversationMode => {
10
10
  if (isNullOrUndefined(conversationMode)) {
11
11
  return false;
12
12
  }
package/lib/esm/components/livechatwidget/common/persistentChatHelper.js CHANGED
@@ -1,16 +1,23 @@
1
1
  import { isPersistentChatEnabled } from "./liveChatConfigUtils";
2
2
 
3
3
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
4
- export const shouldSetPreChatIfPersistentChat = async (chatSDK, conversationMode, showPreChat) => {
5
- const persistentEnabled = await isPersistentChatEnabled(conversationMode);
4
+ export const shouldSetPreChatIfPersistentChat = async (facadeChatSDK, conversationMode, showPreChat) => {
5
+ const persistentEnabled = isPersistentChatEnabled(conversationMode);
6
6
  let skipPreChat = false;
7
7
  if (persistentEnabled) {
8
+ // Access private properties using type assertions
9
+ const chatSDK = facadeChatSDK.getChatSDK();
10
+
11
+ // Use type assertion to bypass private access restriction
12
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
13
+ const sdkAsAny = chatSDK;
14
+ // most likely this is not set , the facade will take care of it
8
15
  const reconnectableChatsParams = {
9
- authenticatedUserToken: chatSDK.authenticatedUserToken,
10
- requestId: chatSDK.requestId
16
+ authenticatedUserToken: sdkAsAny.authenticatedUserToken,
17
+ requestId: sdkAsAny.requestId
11
18
  };
12
19
  try {
13
- const reconnectableChatsResponse = await chatSDK.OCClient.getReconnectableChats(reconnectableChatsParams);
20
+ const reconnectableChatsResponse = await facadeChatSDK.getReconnectableChats(reconnectableChatsParams);
14
21
  if (reconnectableChatsResponse && reconnectableChatsResponse.reconnectid) {
15
22
  // Skip rendering prechat on existing persistent chat session
16
23
  skipPreChat = true;
package/lib/esm/components/livechatwidget/common/startChat.js CHANGED
@@ -69,7 +69,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
69
69
  const parseToJson = false;
70
70
  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));
71
71
  let showPrechat = isProactiveChat ? preChatSurveyResponse && proactiveChatEnablePrechatState : preChatSurveyResponse && !(props !== null && props !== void 0 && (_props$controlProps = props.controlProps) !== null && _props$controlProps !== void 0 && _props$controlProps.hidePreChatSurveyPane);
72
- showPrechat = await 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);
72
+ showPrechat = await 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);
73
73
  if (showPrechat) {
74
74
  var _state$domainStates2, _state$domainStates2$, _state$domainStates2$2, _state$domainStates2$3;
75
75
  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";
@@ -156,7 +156,7 @@ const setPreChatAndInitiateChat = async (facadeChatSDK, dispatch, setAdapter, is
156
156
  const initStartChat = async (facadeChatSDK, dispatch, setAdapter, state, props, params, persistedState) => {
157
157
  var _state$domainStates7, _state$domainStates7$, _state$domainStates7$2;
158
158
  let isStartChatSuccessful = false;
159
- const persistentChatEnabled = await 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);
159
+ const persistentChatEnabled = 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);
160
160
  if ((state === null || state === void 0 ? void 0 : state.appStates.conversationState) === ConversationState.Closed) {
161
161
  // Preventive reset to avoid starting chat with previous requestId which could potentially cause problems
162
162
  chatSDKStateCleanUp(facadeChatSDK.getChatSDK());
package/lib/esm/components/livechatwidget/common/startChatErrorHandler.js CHANGED
@@ -10,6 +10,11 @@ import { TelemetryHelper } from "../../../common/telemetry/TelemetryHelper";
10
10
  import { TelemetryTimers } from "../../../common/telemetry/TelemetryManager";
11
11
  import { getWidgetCacheIdfromProps } from "../../../common/utils";
12
12
 
13
+ // Helper function to check if error is authentication-related
14
+ const isAuthenticationError = errorMessage => {
15
+ return errorMessage === WidgetLoadCustomErrorString.AuthenticationFailedErrorString || errorMessage.startsWith("Authentication Setup Error:") || errorMessage.includes("Token validation failed") || errorMessage.includes("Authentication token");
16
+ };
17
+
13
18
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
14
19
  export const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStartChatSuccessful) => {
15
20
  var _props$controlProps;
@@ -18,19 +23,16 @@ export const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStart
18
23
  return;
19
24
  }
20
25
 
21
- // Handle internal or misc errors
22
- if (ex.message === WidgetLoadCustomErrorString.AuthenticationFailedErrorString) {
26
+ // Handle authentication-related errors
27
+ if (isAuthenticationError(ex.message)) {
23
28
  dispatch({
24
29
  type: LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
25
30
  payload: StartChatFailureType.AuthSetupError
26
31
  });
27
- // set conversation to error to enforce error UI pane
28
- dispatch({
29
- type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
30
- payload: ConversationState.Error
31
- });
32
32
  logWidgetLoadCompleteWithError(ex);
33
+ // Don't return early - let the generic error handling logic handle hideErrorUIPane and telemetry
33
34
  }
35
+
34
36
  if (ex.message === WidgetLoadCustomErrorString.NetworkErrorString) {
35
37
  logWidgetLoadCompleteWithError(ex);
36
38
  }
@@ -53,8 +55,11 @@ export const handleStartChatError = (dispatch, facadeChatSDK, props, ex, isStart
53
55
  case ChatSDKErrorName.UninitializedChatSDK:
54
56
  handleUninitializedChatSDK(ex);
55
57
  break;
56
- // Handle the case indicating failure to retrieve an authenticated chat conversation
57
58
  case ChatSDKErrorName.AuthenticatedChatConversationRetrievalFailure:
59
+ dispatch({
60
+ type: LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
61
+ payload: StartChatFailureType.Unauthorized
62
+ });
58
63
  logWidgetLoadCompleteWithError(ex);
59
64
  break;
60
65
  case ChatSDKErrorName.InvalidConversation:
@@ -106,6 +111,9 @@ const logWidgetLoadFailed = ex => {
106
111
  if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
107
112
  exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
108
113
  }
114
+ if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
115
+ exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
116
+ }
109
117
  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.ERROR, {
110
118
  Event: TelemetryEvent.WidgetLoadFailed,
111
119
  Description: "Widget load complete with error",
@@ -134,6 +142,9 @@ const logWidgetLoadCompleteWithError = ex => {
134
142
  if (ex !== null && ex !== void 0 && ex.httpResponseStatusCode) {
135
143
  exDetails.HttpResponseStatusCode = ex.httpResponseStatusCode;
136
144
  }
145
+ if (ex !== null && ex !== void 0 && ex.exceptionDetails) {
146
+ exDetails.ChatSDKExceptionDetails = ex.exceptionDetails;
147
+ }
137
148
  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.ERROR, {
138
149
  Event: TelemetryEvent.WidgetLoadFailed,
139
150
  Description: "Widget load complete with error",
@@ -221,6 +232,12 @@ const handleChatTokenRetrievalFailure = (dispatch, ex) => {
221
232
  type: LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
222
233
  payload: StartChatFailureType.Unauthorized
223
234
  });
235
+ } else {
236
+ // For other authentication-related token retrieval failures, set as AuthSetupError
237
+ dispatch({
238
+ type: LiveChatWidgetActionType.SET_START_CHAT_FAILURE_TYPE,
239
+ payload: StartChatFailureType.AuthSetupError
240
+ });
224
241
  }
225
242
  logWidgetLoadCompleteWithError(ex);
226
243
  }
package/lib/esm/components/livechatwidget/livechatwidgetstateful/LiveChatWidgetStateful.js CHANGED
@@ -55,7 +55,7 @@ import useChatContextStore from "../../../hooks/useChatContextStore";
55
55
  import useFacadeSDKStore from "../../../hooks/useFacadeChatSDKStore";
56
56
  let uiTimer;
57
57
  export const LiveChatWidgetStateful = props => {
58
- 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;
58
+ 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;
59
59
  useEffect(() => {
60
60
  uiTimer = createTimer();
61
61
  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
@@ -79,6 +79,8 @@ export const LiveChatWidgetStateful = props => {
79
79
  Composer
80
80
  } = Components;
81
81
  const canStartProactiveChat = useRef(true);
82
+ 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.background;
83
+ 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.color;
82
84
 
83
85
  // Process general styles
84
86
  const generalStyles = {
@@ -87,7 +89,7 @@ export const LiveChatWidgetStateful = props => {
87
89
 
88
90
  //Scrollbar styles
89
91
  const scrollbarProps = Object.assign({}, defaultScrollBarProps, props === null || props === void 0 ? void 0 : props.scrollBarProps);
90
- 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;
92
+ 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;
91
93
 
92
94
  // In case the broadcast channel is already initialized elsewhere; One tab can only hold 1 instance
93
95
  if ((props === null || props === void 0 ? void 0 : (_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.skipBroadcastChannelInit) !== true) {
@@ -274,7 +276,8 @@ export const LiveChatWidgetStateful = props => {
274
276
  var _state$appStates6;
275
277
  if ((state === null || state === void 0 ? void 0 : (_state$appStates6 = state.appStates) === null || _state$appStates6 === void 0 ? void 0 : _state$appStates6.hideStartChatButton) === true) {
276
278
  //handle OOH pane
277
- if (state.appStates.outsideOperatingHours === true) {
279
+ // Only set OutOfOffice state for new conversations, allow existing Active/InActive conversations to continue
280
+ if (state.appStates.outsideOperatingHours === true && state.appStates.conversationState !== ConversationState.Active) {
278
281
  dispatch({
279
282
  type: LiveChatWidgetActionType.SET_CONVERSATION_STATE,
280
283
  payload: ConversationState.OutOfOffice
@@ -623,8 +626,8 @@ export const LiveChatWidgetStateful = props => {
623
626
  });
624
627
  }
625
628
  if (state.appStates.conversationState === ConversationState.InActive) {
626
- var _props$webChatContain4, _props$webChatContain5;
627
- 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) {
629
+ var _props$webChatContain12, _props$webChatContain13;
630
+ 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) {
628
631
  setWebChatStyles(styles => {
629
632
  return {
630
633
  ...styles,
@@ -668,12 +671,12 @@ export const LiveChatWidgetStateful = props => {
668
671
  }
669
672
  }, [state.appStates.unreadMessageCount]);
670
673
  useEffect(() => {
671
- var _props$webChatContain6;
674
+ var _props$webChatContain14;
672
675
  setWebChatStyles({
673
676
  ...webChatStyles,
674
- ...((_props$webChatContain6 = props.webChatContainerProps) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.webChatStyles)
677
+ ...((_props$webChatContain14 = props.webChatContainerProps) === null || _props$webChatContain14 === void 0 ? void 0 : _props$webChatContain14.webChatStyles)
675
678
  });
676
- }, [(_props$webChatContain7 = props.webChatContainerProps) === null || _props$webChatContain7 === void 0 ? void 0 : _props$webChatContain7.webChatStyles]);
679
+ }, [(_props$webChatContain15 = props.webChatContainerProps) === null || _props$webChatContain15 === void 0 ? void 0 : _props$webChatContain15.webChatStyles]);
677
680
  useEffect(() => {
678
681
  //Confirmation pane dismissing through OK option, so proceed with end chat
679
682
  if (state.domainStates.confirmationState === ConfirmationState.Ok) {
@@ -772,12 +775,12 @@ export const LiveChatWidgetStateful = props => {
772
775
 
773
776
  // if props state gets updates we need to update the renderingMiddlewareProps in the state
774
777
  useEffect(() => {
775
- var _props$webChatContain8;
778
+ var _props$webChatContain16;
776
779
  dispatch({
777
780
  type: LiveChatWidgetActionType.SET_RENDERING_MIDDLEWARE_PROPS,
778
- payload: (_props$webChatContain8 = props.webChatContainerProps) === null || _props$webChatContain8 === void 0 ? void 0 : _props$webChatContain8.renderingMiddlewareProps
781
+ payload: (_props$webChatContain16 = props.webChatContainerProps) === null || _props$webChatContain16 === void 0 ? void 0 : _props$webChatContain16.renderingMiddlewareProps
779
782
  });
780
- }, [(_props$webChatContain9 = props.webChatContainerProps) === null || _props$webChatContain9 === void 0 ? void 0 : _props$webChatContain9.renderingMiddlewareProps]);
783
+ }, [(_props$webChatContain17 = props.webChatContainerProps) === null || _props$webChatContain17 === void 0 ? void 0 : _props$webChatContain17.renderingMiddlewareProps]);
781
784
  useEffect(() => {
782
785
  TelemetryHelper.logLoadingEventToAllTelemetry(LogLevel.INFO, {
783
786
  Event: TelemetryEvent.UXLiveChatWidgetCompleted,
@@ -820,7 +823,7 @@ export const LiveChatWidgetStateful = props => {
820
823
  const webChatProps = initWebChatComposer(props, state, dispatch, facadeChatSDK, endChatRelay);
821
824
  const downloadTranscriptProps = createDownloadTranscriptProps(props.downloadTranscriptProps, {
822
825
  ...(defaultWebChatContainerStatefulProps === null || defaultWebChatContainerStatefulProps === void 0 ? void 0 : defaultWebChatContainerStatefulProps.webChatStyles),
823
- ...((_props$webChatContain10 = props.webChatContainerProps) === null || _props$webChatContain10 === void 0 ? void 0 : _props$webChatContain10.webChatStyles)
826
+ ...((_props$webChatContain18 = props.webChatContainerProps) === null || _props$webChatContain18 === void 0 ? void 0 : _props$webChatContain18.webChatStyles)
824
827
  }, props.webChatContainerProps);
825
828
  const livechatProps = {
826
829
  ...props,
@@ -846,6 +849,11 @@ export const LiveChatWidgetStateful = props => {
846
849
  setOcUserAgent(facadeChatSDK.getChatSDK());
847
850
  const directLine = ((_livechatProps$webCha = livechatProps.webChatContainerProps) === null || _livechatProps$webCha === void 0 ? void 0 : _livechatProps$webCha.directLine) ?? adapter ?? defaultWebChatContainerStatefulProps.directLine;
848
851
  const userID = directLine.getState ? directLine === null || directLine === void 0 ? void 0 : directLine.getState("acs.userId") : "teamsvisitor";
852
+ const styleOptions = React.useMemo(() => ({
853
+ ...webChatStyles,
854
+ bubbleBackground,
855
+ bubbleTextColor
856
+ }), [webChatStyles, bubbleBackground, bubbleTextColor]);
849
857
 
850
858
  // WebChat's Composer can only be rendered if a directLine object is defined
851
859
  return directLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
@@ -884,11 +892,7 @@ export const LiveChatWidgetStateful = props => {
884
892
  }`}
885
893
  `), /*#__PURE__*/React.createElement(DraggableChatWidget, chatWidgetDraggableConfig, /*#__PURE__*/React.createElement(Composer, _extends({}, webChatProps, {
886
894
  userID: userID,
887
- styleOptions: {
888
- ...webChatStyles,
889
- 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.background,
890
- 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.color
891
- },
895
+ styleOptions: styleOptions,
892
896
  directLine: directLine
893
897
  }), /*#__PURE__*/React.createElement(Stack, {
894
898
  id: widgetElementId,
package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js CHANGED
@@ -48,7 +48,7 @@ const createMagicCodeSuccessResponse = signin => {
48
48
  };
49
49
  };
50
50
  export const WebChatContainerStateful = props => {
51
- 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;
51
+ 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;
52
52
  useEffect(() => {
53
53
  uiTimer = createTimer();
54
54
  TelemetryHelper.logLoadingEvent(LogLevel.INFO, {
@@ -208,14 +208,48 @@ export const WebChatContainerStateful = props => {
208
208
  .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.buttonWhiteSpace} !important;}
209
209
 
210
210
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
211
- background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03LjI1MDEgNC41MDAxN0gxMC43NDk1QzExLjE2MzcgNC41MDAxNyAxMS40OTk1IDQuODM1OTYgMTEuNDk5NSA1LjI1MDE3QzExLjQ5OTUgNS42Mjk4NiAxMS4yMTczIDUuOTQzNjYgMTAuODUxMyA1Ljk5MzMyTDEwLjc0OTUgNi4wMDAxN0g3LjI0OTc0QzYuMDcwNzkgNS45OTk2MSA1LjEwMzQ5IDYuOTA2NTYgNS4wMDc4NiA4LjA2MTEyTDUuMDAwMjggOC4yMjAwM0w1LjAwMzEyIDE2Ljc1MDdDNS4wMDM0MyAxNy45NDE1IDUuOTI4ODUgMTguOTE2MSA3LjA5OTY2IDE4Ljk5NDlMNy4yNTM3MSAxOS4wMDAxTDE1Ljc1MTggMTguOTg4NEMxNi45NDE1IDE4Ljk4NjggMTcuOTE0NSAxOC4wNjIgMTcuOTkzNSAxNi44OTIzTDE3Ljk5ODcgMTYuNzM4NFYxMy4yMzIxQzE3Ljk5ODcgMTIuODE3OSAxOC4zMzQ1IDEyLjQ4MjEgMTguNzQ4NyAxMi40ODIxQzE5LjEyODQgMTIuNDgyMSAxOS40NDIyIDEyLjc2NDMgMTkuNDkxOCAxMy4xMzAzTDE5LjQ5ODcgMTMuMjMyMVYxNi43Mzg0QzE5LjQ5ODcgMTguNzQwNyAxNy45MjkzIDIwLjM3NjkgMTUuOTUyOCAyMC40ODI5TDE1Ljc1MzggMjAuNDg4NEw3LjI1ODI3IDIwLjUwMDFMNy4wNTQ5NSAyMC40OTQ5QzUuMTQyMzkgMjAuMzk1NCAzLjYwODk1IDE4Ljg2MjcgMy41MDgzNyAxNi45NTAyTDMuNTAzMTIgMTYuNzUxMUwzLjUwMDg5IDguMjUyN0wzLjUwNTI5IDguMDUwMkMzLjYwNTM5IDYuMTM3NDkgNS4xMzg2NyA0LjYwNDQ5IDcuMDUwOTYgNC41MDUyN0w3LjI1MDEgNC41MDAxN0gxMC43NDk1SDcuMjUwMVpNMTMuNzQ4MSAzLjAwMTQ2TDIwLjMwMTggMy4wMDE5N0wyMC40MDE0IDMuMDE1NzVMMjAuNTAyMiAzLjA0MzkzTDIwLjU1OSAzLjA2ODAzQzIwLjYxMjIgMy4wOTEyMiAyMC42NjM0IDMuMTIxNjMgMjAuNzExMSAzLjE1ODg1TDIwLjc4MDQgMy4yMjE1NkwyMC44NjQxIDMuMzIwMTRMMjAuOTE4MyAzLjQxMDI1TDIwLjk1NyAzLjUwMDU3TDIwLjk3NjIgMy41NjQ3NkwyMC45ODk4IDMuNjI4NjJMMjAuOTk5MiAzLjcyMjgyTDIwLjk5OTcgMTAuMjU1NEMyMC45OTk3IDEwLjY2OTYgMjAuNjYzOSAxMS4wMDU0IDIwLjI0OTcgMTEuMDA1NEMxOS44NyAxMS4wMDU0IDE5LjU1NjIgMTAuNzIzMiAxOS41MDY1IDEwLjM1NzFMMTkuNDk5NyAxMC4yNTU0TDE5LjQ5ODkgNS41NjE0N0wxMi4yNzk3IDEyLjc4NDdDMTIuMDEzNCAxMy4wNTEgMTEuNTk2OCAxMy4wNzUzIDExLjMwMzEgMTIuODU3NUwxMS4yMTkgMTIuNzg0OUMxMC45NTI3IDEyLjUxODcgMTAuOTI4NCAxMi4xMDIxIDExLjE0NjIgMTEuODA4NEwxMS4yMTg4IDExLjcyNDNMMTguNDM2OSA0LjUwMTQ2SDEzLjc0ODFDMTMuMzY4NCA0LjUwMTQ2IDEzLjA1NDYgNC4yMTkzMSAxMy4wMDUgMy44NTMyNEwxMi45OTgxIDMuNzUxNDZDMTIuOTk4MSAzLjM3MTc3IDEzLjI4MDMgMy4wNTc5NyAxMy42NDY0IDMuMDA4MzFMMTMuNzQ4MSAzLjAwMTQ2WiIgZmlsbD0iI0ZGRkZGRiIgLz48L3N2Zz4) !important;
211
+ /* Fallback for browsers that don't support mask */
212
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
213
+ 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 === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.filter)};
212
214
  height: .75em;
215
+ width: .75em;
213
216
  margin-left: .25em;
214
- 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 === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.filter)};
217
+ display: inline-block;
218
+ }
219
+
220
+ .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
221
+ /* Fallback for browsers that don't support mask */
222
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
223
+ 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 === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.filter)};
224
+ height: .75em;
225
+ width: .75em;
226
+ margin-left: .25em;
227
+ display: inline-block;
228
+ }
229
+
230
+ /* Modern browsers with mask support */
231
+ @supports (mask: url()) or (-webkit-mask: url()) {
232
+ .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
233
+ 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 === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)} !important;
234
+ background-image: none !important;
235
+ filter: none !important;
236
+ 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;
237
+ -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;
238
+ mask-size: contain;
239
+ -webkit-mask-size: contain;
240
+ }
241
+
242
+ .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
243
+ 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 === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)} !important;
244
+ background-image: none !important;
245
+ filter: none !important;
246
+ 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;
247
+ -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;
248
+ mask-size: contain;
249
+ -webkit-mask-size: contain;
250
+ }
215
251
  }
216
252
  pre {
217
- white-space: pre-wrap;
218
- white-space: -moz-pre-wrap;
219
253
  white-space: -pre-wrap;
220
254
  white-space: -o-pre-wrap;
221
255
  word-wrap: break-word;
@@ -224,18 +258,18 @@ export const WebChatContainerStateful = props => {
224
258
  .ms_lcw_webchat_received_message a:visited,
225
259
  .ms_lcw_webchat_received_message a:hover,
226
260
  .ms_lcw_webchat_received_message a:active {
227
- 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 === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
261
+ 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 === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
228
262
  }
229
263
  .ms_lcw_webchat_sent_message a:link,
230
264
  .ms_lcw_webchat_sent_message a:visited,
231
265
  .ms_lcw_webchat_sent_message a:hover,
232
266
  .ms_lcw_webchat_sent_message a:active {
233
- 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 === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
267
+ 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 === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
234
268
  }
235
269
 
236
270
  // 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
237
271
  .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
238
- 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 */
272
+ 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 */
239
273
  }
240
274
 
241
275
  .webchat__stacked-layout_container>div {