@microsoft/omnichannel-chat-widget 1.8.4-main.c687f88 → 1.8.4-main.ffa5cbb

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 (6) hide show
  1. package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js +29 -19
  2. package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
  3. package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js +29 -19
  4. package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
  5. package/lib/types/components/webchatcontainerstateful/interfaces/IAdaptiveCardStyles.d.ts +2 -0
  6. package/package.json +1 -1
package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js CHANGED
@@ -62,7 +62,7 @@ const createMagicCodeSuccessResponse = signin => {
62
62
  };
63
63
  };
64
64
  const WebChatContainerStateful = props => {
65
- var _props$webChatContain, _defaultWebChatContai, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _props$webChatContain6, _props$webChatContain7, _defaultWebChatContai2, _props$webChatContain8, _props$webChatContain9, _defaultWebChatContai3, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _webChatContainerProp24, _props$webChatContain10, _props$webChatContain11, _webChatContainerProp25, _webChatContainerProp26, _webChatContainerProp27, _webChatContainerProp28, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
65
+ var _props$webChatContain, _defaultWebChatContai, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _props$webChatContain6, _props$webChatContain7, _defaultWebChatContai2, _props$webChatContain8, _props$webChatContain9, _defaultWebChatContai3, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _webChatContainerProp24, _webChatContainerProp25, _webChatContainerProp26, _webChatContainerProp27, _webChatContainerProp28, _webChatContainerProp29, _props$webChatContain10, _props$webChatContain11, _webChatContainerProp30, _webChatContainerProp31, _webChatContainerProp32, _webChatContainerProp33, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
66
66
  const [facadeChatSDK] = (0, _useFacadeChatSDKStore.default)();
67
67
 
68
68
  // Create a font family that includes emoji support, based on the primary font or default
@@ -261,34 +261,37 @@ const WebChatContainerStateful = props => {
261
261
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
262
262
  .webchat__stacked-layout__content .ac-pushButton {
263
263
  cursor: pointer;
264
+ border: 1px solid ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
265
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
266
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp3 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp3 === void 0 ? void 0 : _webChatContainerProp3.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background};
264
267
  }
265
268
 
266
269
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card {
267
- background: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background};
270
+ background: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp4 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp4 === void 0 ? void 0 : _webChatContainerProp4.background) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.background};
268
271
  }
269
272
 
270
273
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card .ac-textBlock[role=heading] {
271
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
274
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp5 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp5 === void 0 ? void 0 : _webChatContainerProp5.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
272
275
  }
273
276
 
274
277
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card label .ac-textRun:first-child {
275
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp3 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp3 === void 0 ? void 0 : _webChatContainerProp3.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
278
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp6 === void 0 ? void 0 : _webChatContainerProp6.color) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.color} !important;
276
279
  }
277
280
 
278
281
  .webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__bubble--from-user {
279
- max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp4 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp4 === void 0 ? void 0 : (_webChatContainerProp5 = _webChatContainerProp4.userMessageBoxStyles) === null || _webChatContainerProp5 === void 0 ? void 0 : _webChatContainerProp5.maxWidth) ?? (_defaultUserMessageBoxStyles.defaultUserMessageBoxStyles === null || _defaultUserMessageBoxStyles.defaultUserMessageBoxStyles === void 0 ? void 0 : _defaultUserMessageBoxStyles.defaultUserMessageBoxStyles.maxWidth)}
282
+ max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp7 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp7 === void 0 ? void 0 : (_webChatContainerProp8 = _webChatContainerProp7.userMessageBoxStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.maxWidth) ?? (_defaultUserMessageBoxStyles.defaultUserMessageBoxStyles === null || _defaultUserMessageBoxStyles.defaultUserMessageBoxStyles === void 0 ? void 0 : _defaultUserMessageBoxStyles.defaultUserMessageBoxStyles.maxWidth)}
280
283
  }
281
284
 
282
285
  .webchat__stacked-layout--show-avatar div.webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__stacked-layout__message {
283
- max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp6 === void 0 ? void 0 : (_webChatContainerProp7 = _webChatContainerProp6.systemMessageBoxStyles) === null || _webChatContainerProp7 === void 0 ? void 0 : _webChatContainerProp7.maxWidth) ?? (_defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === null || _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === void 0 ? void 0 : _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles.maxWidth)}
286
+ max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp9 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp9 === void 0 ? void 0 : (_webChatContainerProp10 = _webChatContainerProp9.systemMessageBoxStyles) === null || _webChatContainerProp10 === void 0 ? void 0 : _webChatContainerProp10.maxWidth) ?? (_defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === null || _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles === void 0 ? void 0 : _defaultSystemMessageBoxStyles.defaultSystemMessageBoxStyles.maxWidth)}
284
287
  }
285
288
 
286
289
  div[class="ac-textBlock"] *,
287
- div[class="ac-input-container"] * {white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp8 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.textWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.textWhiteSpace}}
290
+ div[class="ac-input-container"] * {white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp11 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.textWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.textWhiteSpace}}
288
291
 
289
292
  div[class="ac-input-container"] input.ac-multichoiceInput,
290
293
  div[class="ac-input-container"] select.ac-multichoiceInput {
291
- ${webChatContainerProps !== null && webChatContainerProps !== void 0 && (_webChatContainerProp9 = webChatContainerProps.adaptiveCardStyles) !== null && _webChatContainerProp9 !== void 0 && _webChatContainerProp9.choiceInputPadding ? `padding: ${webChatContainerProps.adaptiveCardStyles.choiceInputPadding} !important;` : ""}
294
+ ${webChatContainerProps !== null && webChatContainerProps !== void 0 && (_webChatContainerProp12 = webChatContainerProps.adaptiveCardStyles) !== null && _webChatContainerProp12 !== void 0 && _webChatContainerProp12.choiceInputPadding ? `padding: ${webChatContainerProps.adaptiveCardStyles.choiceInputPadding} !important;` : ""}
292
295
  }
293
296
 
294
297
  .ms_lcw_webchat_received_message>div.webchat__stacked-layout>div.webchat__stacked-layout__main>div.webchat__stacked-layout__content>div.webchat__stacked-layout__message-row>[class^=webchat]:not(.webchat__bubble--from-user)>.webchat__bubble__content {
@@ -300,15 +303,22 @@ const WebChatContainerStateful = props => {
300
303
  div[class="ac-textBlock"] a:visited,
301
304
  div[class="ac-textBlock"] a:hover,
302
305
  div[class="ac-textBlock"] a:active {
303
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp10 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp10 === void 0 ? void 0 : _webChatContainerProp10.anchorColor) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.anchorColor};
306
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp13 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp13 === void 0 ? void 0 : _webChatContainerProp13.anchorColor) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.anchorColor};
304
307
  }
305
308
 
306
- .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp11 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.buttonWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
309
+ .webchat__stacked-layout__content .ac-actionSet {
310
+ flex-wrap: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp14 === void 0 ? void 0 : _webChatContainerProp14.buttonFlexWrap) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonFlexWrap} !important;
311
+ gap: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp15 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.buttonGap) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonGap} !important;
312
+ }
313
+
314
+ .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {
315
+ white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp16 === void 0 ? void 0 : _webChatContainerProp16.buttonWhiteSpace) ?? _defaultAdaptiveCardStyles.defaultAdaptiveCardStyles.buttonWhiteSpace} !important;
316
+ }
307
317
 
308
318
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
309
319
  /* Fallback for browsers that don't support mask */
310
320
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
311
- filter: ${(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.filter) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.filter)};
321
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp17 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp17 === void 0 ? void 0 : (_webChatContainerProp18 = _webChatContainerProp17.receivedMessageAnchorStyles) === null || _webChatContainerProp18 === void 0 ? void 0 : _webChatContainerProp18.filter) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.filter)};
312
322
  height: .75em;
313
323
  width: .75em;
314
324
  margin-left: .25em;
@@ -318,7 +328,7 @@ const WebChatContainerStateful = props => {
318
328
  .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
319
329
  /* Fallback for browsers that don't support mask */
320
330
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
321
- filter: ${(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.filter) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.filter)};
331
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp19 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp19 === void 0 ? void 0 : (_webChatContainerProp20 = _webChatContainerProp19.sentMessageAnchorStyles) === null || _webChatContainerProp20 === void 0 ? void 0 : _webChatContainerProp20.filter) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.filter)};
322
332
  height: .75em;
323
333
  width: .75em;
324
334
  margin-left: .25em;
@@ -328,7 +338,7 @@ const WebChatContainerStateful = props => {
328
338
  /* Modern browsers with mask support */
329
339
  @supports (mask: url()) or (-webkit-mask: url()) {
330
340
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
331
- background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp16 === void 0 ? void 0 : (_webChatContainerProp17 = _webChatContainerProp16.receivedMessageAnchorStyles) === null || _webChatContainerProp17 === void 0 ? void 0 : _webChatContainerProp17.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)} !important;
341
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp21 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp21 === void 0 ? void 0 : (_webChatContainerProp22 = _webChatContainerProp21.receivedMessageAnchorStyles) === null || _webChatContainerProp22 === void 0 ? void 0 : _webChatContainerProp22.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)} !important;
332
342
  background-image: none !important;
333
343
  filter: none !important;
334
344
  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;
@@ -338,7 +348,7 @@ const WebChatContainerStateful = props => {
338
348
  }
339
349
 
340
350
  .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
341
- background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp18 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp18 === void 0 ? void 0 : (_webChatContainerProp19 = _webChatContainerProp18.sentMessageAnchorStyles) === null || _webChatContainerProp19 === void 0 ? void 0 : _webChatContainerProp19.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)} !important;
351
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp23 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp23 === void 0 ? void 0 : (_webChatContainerProp24 = _webChatContainerProp23.sentMessageAnchorStyles) === null || _webChatContainerProp24 === void 0 ? void 0 : _webChatContainerProp24.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)} !important;
342
352
  background-image: none !important;
343
353
  filter: none !important;
344
354
  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;
@@ -356,18 +366,18 @@ const WebChatContainerStateful = props => {
356
366
  .ms_lcw_webchat_received_message a:visited,
357
367
  .ms_lcw_webchat_received_message a:hover,
358
368
  .ms_lcw_webchat_received_message a:active {
359
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp20 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp20 === void 0 ? void 0 : (_webChatContainerProp21 = _webChatContainerProp20.receivedMessageAnchorStyles) === null || _webChatContainerProp21 === void 0 ? void 0 : _webChatContainerProp21.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)};
369
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp25 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp25 === void 0 ? void 0 : (_webChatContainerProp26 = _webChatContainerProp25.receivedMessageAnchorStyles) === null || _webChatContainerProp26 === void 0 ? void 0 : _webChatContainerProp26.color) ?? (_defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === null || _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles === void 0 ? void 0 : _defaultReceivedMessageAnchorStyles.defaultReceivedMessageAnchorStyles.color)};
360
370
  }
361
371
  .ms_lcw_webchat_sent_message a:link,
362
372
  .ms_lcw_webchat_sent_message a:visited,
363
373
  .ms_lcw_webchat_sent_message a:hover,
364
374
  .ms_lcw_webchat_sent_message a:active {
365
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp22 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp22 === void 0 ? void 0 : (_webChatContainerProp23 = _webChatContainerProp22.sentMessageAnchorStyles) === null || _webChatContainerProp23 === void 0 ? void 0 : _webChatContainerProp23.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)};
375
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp27 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp27 === void 0 ? void 0 : (_webChatContainerProp28 = _webChatContainerProp27.sentMessageAnchorStyles) === null || _webChatContainerProp28 === void 0 ? void 0 : _webChatContainerProp28.color) ?? (_defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === null || _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles === void 0 ? void 0 : _defaultSentMessageAnchorStyles.defaultSentMessageAnchorStyles.color)};
366
376
  }
367
377
 
368
378
  // 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
369
379
  .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
370
- border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp24 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp24 === void 0 ? void 0 : _webChatContainerProp24.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
380
+ border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp29 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp29 === void 0 ? void 0 : _webChatContainerProp29.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
371
381
  }
372
382
 
373
383
  .webchat__stacked-layout_container>div {
@@ -404,8 +414,8 @@ const WebChatContainerStateful = props => {
404
414
 
405
415
  /* Suggested actions carousel previous/next navigation focus */
406
416
  .webchat__suggested-actions .webchat__suggested-actions__carousel .react-film__flipper:focus-visible .react-film__flipper__body {
407
- outline: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp25 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp25 === void 0 ? void 0 : _webChatContainerProp25.suggestedActionKeyboardFocusIndicatorBorderStyle) ?? "dashed"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp26 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp26 === void 0 ? void 0 : _webChatContainerProp26.suggestedActionKeyboardFocusIndicatorBorderWidth) ?? "1px"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp27 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp27 === void 0 ? void 0 : _webChatContainerProp27.suggestedActionKeyboardFocusIndicatorBorderColor) ?? "#605E5C"} !important;
408
- outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp28 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp28 === void 0 ? void 0 : _webChatContainerProp28.suggestedActionKeyboardFocusIndicatorInset) ?? "2px"} !important;
417
+ outline: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp30 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp30 === void 0 ? void 0 : _webChatContainerProp30.suggestedActionKeyboardFocusIndicatorBorderStyle) ?? "dashed"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp31 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp31 === void 0 ? void 0 : _webChatContainerProp31.suggestedActionKeyboardFocusIndicatorBorderWidth) ?? "1px"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp32 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp32 === void 0 ? void 0 : _webChatContainerProp32.suggestedActionKeyboardFocusIndicatorBorderColor) ?? "#605E5C"} !important;
418
+ outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp33 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp33 === void 0 ? void 0 : _webChatContainerProp33.suggestedActionKeyboardFocusIndicatorInset) ?? "2px"} !important;
409
419
 
410
420
  `), /*#__PURE__*/_react2.default.createElement(_react.Stack, {
411
421
  styles: containerStyles,
package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js CHANGED
@@ -9,6 +9,8 @@ const defaultAdaptiveCardStyles = {
9
9
  color: "black",
10
10
  anchorColor: "blue",
11
11
  textWhiteSpace: "normal",
12
- buttonWhiteSpace: "normal"
12
+ buttonWhiteSpace: "normal",
13
+ buttonFlexWrap: "nowrap",
14
+ buttonGap: "0px"
13
15
  };
14
16
  exports.defaultAdaptiveCardStyles = defaultAdaptiveCardStyles;
package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js CHANGED
@@ -53,7 +53,7 @@ const createMagicCodeSuccessResponse = signin => {
53
53
  };
54
54
  };
55
55
  export const WebChatContainerStateful = props => {
56
- var _props$webChatContain, _defaultWebChatContai, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _props$webChatContain6, _props$webChatContain7, _defaultWebChatContai2, _props$webChatContain8, _props$webChatContain9, _defaultWebChatContai3, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _webChatContainerProp24, _props$webChatContain10, _props$webChatContain11, _webChatContainerProp25, _webChatContainerProp26, _webChatContainerProp27, _webChatContainerProp28, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
56
+ var _props$webChatContain, _defaultWebChatContai, _webChatContainerProp, _webChatContainerProp2, _webChatContainerProp3, _webChatContainerProp4, _webChatContainerProp5, _webChatContainerProp6, _webChatContainerProp7, _webChatContainerProp8, _webChatContainerProp9, _webChatContainerProp10, _webChatContainerProp11, _webChatContainerProp12, _props$webChatContain6, _props$webChatContain7, _defaultWebChatContai2, _props$webChatContain8, _props$webChatContain9, _defaultWebChatContai3, _webChatContainerProp13, _webChatContainerProp14, _webChatContainerProp15, _webChatContainerProp16, _webChatContainerProp17, _webChatContainerProp18, _webChatContainerProp19, _webChatContainerProp20, _webChatContainerProp21, _webChatContainerProp22, _webChatContainerProp23, _webChatContainerProp24, _webChatContainerProp25, _webChatContainerProp26, _webChatContainerProp27, _webChatContainerProp28, _webChatContainerProp29, _props$webChatContain10, _props$webChatContain11, _webChatContainerProp30, _webChatContainerProp31, _webChatContainerProp32, _webChatContainerProp33, _props$citationPanePr, _props$citationPanePr2, _props$citationPanePr3, _props$citationPanePr4, _props$citationPanePr5;
57
57
  const [facadeChatSDK] = useFacadeSDKStore();
58
58
 
59
59
  // Create a font family that includes emoji support, based on the primary font or default
@@ -252,34 +252,37 @@ export const WebChatContainerStateful = props => {
252
252
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
253
253
  .webchat__stacked-layout__content .ac-pushButton {
254
254
  cursor: pointer;
255
+ border: 1px solid ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.color) ?? defaultAdaptiveCardStyles.color} !important;
256
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? defaultAdaptiveCardStyles.color} !important;
257
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp3 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp3 === void 0 ? void 0 : _webChatContainerProp3.background) ?? defaultAdaptiveCardStyles.background};
255
258
  }
256
259
 
257
260
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card {
258
- background: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp === void 0 ? void 0 : _webChatContainerProp.background) ?? defaultAdaptiveCardStyles.background};
261
+ background: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp4 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp4 === void 0 ? void 0 : _webChatContainerProp4.background) ?? defaultAdaptiveCardStyles.background};
259
262
  }
260
263
 
261
264
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card .ac-textBlock[role=heading] {
262
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp2 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp2 === void 0 ? void 0 : _webChatContainerProp2.color) ?? defaultAdaptiveCardStyles.color} !important;
265
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp5 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp5 === void 0 ? void 0 : _webChatContainerProp5.color) ?? defaultAdaptiveCardStyles.color} !important;
263
266
  }
264
267
 
265
268
  .webchat__bubble__content>div#ms_lcw_webchat_adaptive_card label .ac-textRun:first-child {
266
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp3 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp3 === void 0 ? void 0 : _webChatContainerProp3.color) ?? defaultAdaptiveCardStyles.color} !important;
269
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp6 === void 0 ? void 0 : _webChatContainerProp6.color) ?? defaultAdaptiveCardStyles.color} !important;
267
270
  }
268
271
 
269
272
  .webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__bubble--from-user {
270
- max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp4 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp4 === void 0 ? void 0 : (_webChatContainerProp5 = _webChatContainerProp4.userMessageBoxStyles) === null || _webChatContainerProp5 === void 0 ? void 0 : _webChatContainerProp5.maxWidth) ?? (defaultUserMessageBoxStyles === null || defaultUserMessageBoxStyles === void 0 ? void 0 : defaultUserMessageBoxStyles.maxWidth)}
273
+ max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp7 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp7 === void 0 ? void 0 : (_webChatContainerProp8 = _webChatContainerProp7.userMessageBoxStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.maxWidth) ?? (defaultUserMessageBoxStyles === null || defaultUserMessageBoxStyles === void 0 ? void 0 : defaultUserMessageBoxStyles.maxWidth)}
271
274
  }
272
275
 
273
276
  .webchat__stacked-layout--show-avatar div.webchat__stacked-layout__content div.webchat__stacked-layout__message-row div.webchat__stacked-layout__message {
274
- max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp6 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp6 === void 0 ? void 0 : (_webChatContainerProp7 = _webChatContainerProp6.systemMessageBoxStyles) === null || _webChatContainerProp7 === void 0 ? void 0 : _webChatContainerProp7.maxWidth) ?? (defaultSystemMessageBoxStyles === null || defaultSystemMessageBoxStyles === void 0 ? void 0 : defaultSystemMessageBoxStyles.maxWidth)}
277
+ max-width: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp9 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp9 === void 0 ? void 0 : (_webChatContainerProp10 = _webChatContainerProp9.systemMessageBoxStyles) === null || _webChatContainerProp10 === void 0 ? void 0 : _webChatContainerProp10.maxWidth) ?? (defaultSystemMessageBoxStyles === null || defaultSystemMessageBoxStyles === void 0 ? void 0 : defaultSystemMessageBoxStyles.maxWidth)}
275
278
  }
276
279
 
277
280
  div[class="ac-textBlock"] *,
278
- div[class="ac-input-container"] * {white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp8 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp8 === void 0 ? void 0 : _webChatContainerProp8.textWhiteSpace) ?? defaultAdaptiveCardStyles.textWhiteSpace}}
281
+ div[class="ac-input-container"] * {white-space:${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp11 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.textWhiteSpace) ?? defaultAdaptiveCardStyles.textWhiteSpace}}
279
282
 
280
283
  div[class="ac-input-container"] input.ac-multichoiceInput,
281
284
  div[class="ac-input-container"] select.ac-multichoiceInput {
282
- ${webChatContainerProps !== null && webChatContainerProps !== void 0 && (_webChatContainerProp9 = webChatContainerProps.adaptiveCardStyles) !== null && _webChatContainerProp9 !== void 0 && _webChatContainerProp9.choiceInputPadding ? `padding: ${webChatContainerProps.adaptiveCardStyles.choiceInputPadding} !important;` : ""}
285
+ ${webChatContainerProps !== null && webChatContainerProps !== void 0 && (_webChatContainerProp12 = webChatContainerProps.adaptiveCardStyles) !== null && _webChatContainerProp12 !== void 0 && _webChatContainerProp12.choiceInputPadding ? `padding: ${webChatContainerProps.adaptiveCardStyles.choiceInputPadding} !important;` : ""}
283
286
  }
284
287
 
285
288
  .ms_lcw_webchat_received_message>div.webchat__stacked-layout>div.webchat__stacked-layout__main>div.webchat__stacked-layout__content>div.webchat__stacked-layout__message-row>[class^=webchat]:not(.webchat__bubble--from-user)>.webchat__bubble__content {
@@ -291,15 +294,22 @@ export const WebChatContainerStateful = props => {
291
294
  div[class="ac-textBlock"] a:visited,
292
295
  div[class="ac-textBlock"] a:hover,
293
296
  div[class="ac-textBlock"] a:active {
294
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp10 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp10 === void 0 ? void 0 : _webChatContainerProp10.anchorColor) ?? defaultAdaptiveCardStyles.anchorColor};
297
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp13 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp13 === void 0 ? void 0 : _webChatContainerProp13.anchorColor) ?? defaultAdaptiveCardStyles.anchorColor};
295
298
  }
296
299
 
297
- .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp11 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp11 === void 0 ? void 0 : _webChatContainerProp11.buttonWhiteSpace) ?? defaultAdaptiveCardStyles.buttonWhiteSpace} !important;}
300
+ .webchat__stacked-layout__content .ac-actionSet {
301
+ flex-wrap: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp14 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp14 === void 0 ? void 0 : _webChatContainerProp14.buttonFlexWrap) ?? defaultAdaptiveCardStyles.buttonFlexWrap} !important;
302
+ gap: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp15 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp15 === void 0 ? void 0 : _webChatContainerProp15.buttonGap) ?? defaultAdaptiveCardStyles.buttonGap} !important;
303
+ }
304
+
305
+ .webchat__stacked-layout__content .ac-actionSet > .ac-pushButton > div {
306
+ white-space: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.adaptiveCardStyles) === null || _webChatContainerProp16 === void 0 ? void 0 : _webChatContainerProp16.buttonWhiteSpace) ?? defaultAdaptiveCardStyles.buttonWhiteSpace} !important;
307
+ }
298
308
 
299
309
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
300
310
  /* Fallback for browsers that don't support mask */
301
311
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
302
- filter: ${(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.filter) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.filter)};
312
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp17 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp17 === void 0 ? void 0 : (_webChatContainerProp18 = _webChatContainerProp17.receivedMessageAnchorStyles) === null || _webChatContainerProp18 === void 0 ? void 0 : _webChatContainerProp18.filter) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.filter)};
303
313
  height: .75em;
304
314
  width: .75em;
305
315
  margin-left: .25em;
@@ -309,7 +319,7 @@ export const WebChatContainerStateful = props => {
309
319
  .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
310
320
  /* Fallback for browsers that don't support mask */
311
321
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzIDMgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjUwMSA0LjUwMDE3SDEwLjc0OTVDMTEuMTYzNyA0LjUwMDE3IDExLjQ5OTUgNC44MzU5NiAxMS40OTk1IDUuMjUwMTdDMTEuNDk5NSA1LjYyOTg2IDExLjIxNzMgNS45NDM2NiAxMC44NTEzIDUuOTkzMzJMMTAuNzQ5NSA2LjAwMDE3SDcuMjQ5NzRDNi4wNzA3OSA1Ljk5OTYxIDUuMTAzNDkgNi45MDY1NiA1LjAwNzg2IDguMDYxMTJMNS4wMDAyOCA4LjIyMDAzTDUuMDAzMTIgMTYuNzUwN0M1LjAwMzQzIDE3Ljk0MTUgNS45Mjg4NSAxOC45MTYxIDcuMDk5NjYgMTguOTk0OUw3LjI1MzcxIDE5LjAwMDFMMTUuNzUxOCAxOC45ODg0QzE2Ljk0MTUgMTguOTg2OCAxNy45MTQ1IDE4LjA2MiAxNy45OTM1IDE2Ljg5MjNMMTcuOTk4NyAxNi43Mzg0VjEzLjIzMjFDMTcuOTk4NyAxMi44MTc5IDE4LjMzNDUgMTIuNDgyMSAxOC43NDg3IDEyLjQ4MjFDMTkuMTI4NCAxMi40ODIxIDE5LjQ0MjIgMTIuNzY0MyAxOS40OTE4IDEzLjEzMDNMMTkuNDk4NyAxMy4yMzIxVjE2LjczODRDMTkuNDk4NyAxOC43NDA3IDE3LjkyOTMgMjAuMzc2OSAxNS45NTI4IDIwLjQ4MjlMMTUuNzUzOCAyMC40ODg0TDcuMjU4MjcgMjAuNTAwMUw3LjA1NDk1IDIwLjQ5NDlDNS4xNDIzOSAyMC4zOTU0IDMuNjA4OTUgMTguODYyNyAzLjUwODM3IDE2Ljk1MDJMMy41MDMxMiAxNi43NTExTDMuNTAwODkgOC4yNTI3TDMuNTA1MjkgOC4wNTAyQzMuNjA1MzkgNi4xMzc0OSA1LjEzODY3IDQuNjA0NDkgNy4wNTA5NiA0LjUwNTI3TDcuMjUwMSA0LjUwMDE3SDEwLjc0OTVINy4yNTAxWk0xMy43NDgxIDMuMDAxNDZMMjAuMzAxOCAzLjAwMTk3TDIwLjQwMTQgMy4wMTU3NUwyMC41MDIyIDMuMDQzOTNMMjAuNTU5IDMuMDY4MDNDMjAuNjEyMiAzLjA5MTIyIDIwLjY2MzQgMy4xMjE2MyAyMC43MTExIDMuMTU4ODVMMjAuNzgwNCAzLjIyMTU2TDIwLjg2NDEgMy4zMjAxNEwyMC45MTgzIDMuNDEwMjVMMjAuOTU3IDMuNTAwNTdMMjAuOTc2MiAzLjU2NDc2TDIwLjk4OTggMy42Mjg2MkwyMC45OTkyIDMuNzIyODJMMjAuOTk5NyAxMC4yNTU0QzIwLjk5OTcgMTAuNjY5NiAyMC42NjM5IDExLjAwNTQgMjAuMjQ5NyAxMS4wMDU0QzE5Ljg3IDExLjAwNTQgMTkuNTU2MiAxMC43MjMyIDE5LjUwNjUgMTAuMzU3MUwxOS40OTk3IDEwLjI1NTRMMTkuNDk4OSA1LjU2MTQ3TDEyLjI3OTcgMTIuNzg0N0MxMi4wMTM0IDEzLjA1MSAxMS41OTY4IDEzLjA3NTMgMTEuMzAzMSAxMi44NTc1TDExLjIxOSAxMi43ODQ5QzEwLjk1MjcgMTIuNTE4NyAxMC45Mjg0IDEyLjEwMjEgMTEuMTQ2MiAxMS44MDg0TDExLjIxODggMTEuNzI0M0wxOC40MzY5IDQuNTAxNDZIMTMuNzQ4MUMxMy4zNjg0IDQuNTAxNDYgMTMuMDU0NiA0LjIxOTMxIDEzLjAwNSAzLjg1MzI0TDEyLjk5ODEgMy43NTE0NkMxMi45OTgxIDMuMzcxNzcgMTMuMjgwMyAzLjA1Nzk3IDEzLjY0NjQgMy4wMDgzMUwxMy43NDgxIDMuMDAxNDZaIiBmaWxsPSIjRkZGRkZGIiAvPjwvc3ZnPg==);
312
- filter: ${(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.filter) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.filter)};
322
+ filter: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp19 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp19 === void 0 ? void 0 : (_webChatContainerProp20 = _webChatContainerProp19.sentMessageAnchorStyles) === null || _webChatContainerProp20 === void 0 ? void 0 : _webChatContainerProp20.filter) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.filter)};
313
323
  height: .75em;
314
324
  width: .75em;
315
325
  margin-left: .25em;
@@ -319,7 +329,7 @@ export const WebChatContainerStateful = props => {
319
329
  /* Modern browsers with mask support */
320
330
  @supports (mask: url()) or (-webkit-mask: url()) {
321
331
  .ms_lcw_webchat_received_message img.webchat__render-markdown__external-link-icon {
322
- background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp16 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp16 === void 0 ? void 0 : (_webChatContainerProp17 = _webChatContainerProp16.receivedMessageAnchorStyles) === null || _webChatContainerProp17 === void 0 ? void 0 : _webChatContainerProp17.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)} !important;
332
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp21 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp21 === void 0 ? void 0 : (_webChatContainerProp22 = _webChatContainerProp21.receivedMessageAnchorStyles) === null || _webChatContainerProp22 === void 0 ? void 0 : _webChatContainerProp22.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)} !important;
323
333
  background-image: none !important;
324
334
  filter: none !important;
325
335
  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;
@@ -329,7 +339,7 @@ export const WebChatContainerStateful = props => {
329
339
  }
330
340
 
331
341
  .ms_lcw_webchat_sent_message img.webchat__render-markdown__external-link-icon {
332
- background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp18 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp18 === void 0 ? void 0 : (_webChatContainerProp19 = _webChatContainerProp18.sentMessageAnchorStyles) === null || _webChatContainerProp19 === void 0 ? void 0 : _webChatContainerProp19.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)} !important;
342
+ background-color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp23 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp23 === void 0 ? void 0 : (_webChatContainerProp24 = _webChatContainerProp23.sentMessageAnchorStyles) === null || _webChatContainerProp24 === void 0 ? void 0 : _webChatContainerProp24.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)} !important;
333
343
  background-image: none !important;
334
344
  filter: none !important;
335
345
  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;
@@ -347,18 +357,18 @@ export const WebChatContainerStateful = props => {
347
357
  .ms_lcw_webchat_received_message a:visited,
348
358
  .ms_lcw_webchat_received_message a:hover,
349
359
  .ms_lcw_webchat_received_message a:active {
350
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp20 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp20 === void 0 ? void 0 : (_webChatContainerProp21 = _webChatContainerProp20.receivedMessageAnchorStyles) === null || _webChatContainerProp21 === void 0 ? void 0 : _webChatContainerProp21.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
360
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp25 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp25 === void 0 ? void 0 : (_webChatContainerProp26 = _webChatContainerProp25.receivedMessageAnchorStyles) === null || _webChatContainerProp26 === void 0 ? void 0 : _webChatContainerProp26.color) ?? (defaultReceivedMessageAnchorStyles === null || defaultReceivedMessageAnchorStyles === void 0 ? void 0 : defaultReceivedMessageAnchorStyles.color)};
351
361
  }
352
362
  .ms_lcw_webchat_sent_message a:link,
353
363
  .ms_lcw_webchat_sent_message a:visited,
354
364
  .ms_lcw_webchat_sent_message a:hover,
355
365
  .ms_lcw_webchat_sent_message a:active {
356
- color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp22 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp22 === void 0 ? void 0 : (_webChatContainerProp23 = _webChatContainerProp22.sentMessageAnchorStyles) === null || _webChatContainerProp23 === void 0 ? void 0 : _webChatContainerProp23.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
366
+ color: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp27 = webChatContainerProps.renderingMiddlewareProps) === null || _webChatContainerProp27 === void 0 ? void 0 : (_webChatContainerProp28 = _webChatContainerProp27.sentMessageAnchorStyles) === null || _webChatContainerProp28 === void 0 ? void 0 : _webChatContainerProp28.color) ?? (defaultSentMessageAnchorStyles === null || defaultSentMessageAnchorStyles === void 0 ? void 0 : defaultSentMessageAnchorStyles.color)};
357
367
  }
358
368
 
359
369
  // 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
360
370
  .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
361
- border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp24 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp24 === void 0 ? void 0 : _webChatContainerProp24.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
371
+ border-radius: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp29 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp29 === void 0 ? void 0 : _webChatContainerProp29.bubbleBorderRadius) ?? 0} !important; /* Override border-radius */
362
372
  }
363
373
 
364
374
  .webchat__stacked-layout_container>div {
@@ -395,8 +405,8 @@ export const WebChatContainerStateful = props => {
395
405
 
396
406
  /* Suggested actions carousel previous/next navigation focus */
397
407
  .webchat__suggested-actions .webchat__suggested-actions__carousel .react-film__flipper:focus-visible .react-film__flipper__body {
398
- outline: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp25 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp25 === void 0 ? void 0 : _webChatContainerProp25.suggestedActionKeyboardFocusIndicatorBorderStyle) ?? "dashed"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp26 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp26 === void 0 ? void 0 : _webChatContainerProp26.suggestedActionKeyboardFocusIndicatorBorderWidth) ?? "1px"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp27 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp27 === void 0 ? void 0 : _webChatContainerProp27.suggestedActionKeyboardFocusIndicatorBorderColor) ?? "#605E5C"} !important;
399
- outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp28 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp28 === void 0 ? void 0 : _webChatContainerProp28.suggestedActionKeyboardFocusIndicatorInset) ?? "2px"} !important;
408
+ outline: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp30 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp30 === void 0 ? void 0 : _webChatContainerProp30.suggestedActionKeyboardFocusIndicatorBorderStyle) ?? "dashed"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp31 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp31 === void 0 ? void 0 : _webChatContainerProp31.suggestedActionKeyboardFocusIndicatorBorderWidth) ?? "1px"} ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp32 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp32 === void 0 ? void 0 : _webChatContainerProp32.suggestedActionKeyboardFocusIndicatorBorderColor) ?? "#605E5C"} !important;
409
+ outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (_webChatContainerProp33 = webChatContainerProps.webChatStyles) === null || _webChatContainerProp33 === void 0 ? void 0 : _webChatContainerProp33.suggestedActionKeyboardFocusIndicatorInset) ?? "2px"} !important;
400
410
 
401
411
  `), /*#__PURE__*/React.createElement(Stack, {
402
412
  styles: containerStyles,
package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js CHANGED
@@ -3,5 +3,7 @@ export const defaultAdaptiveCardStyles = {
3
3
  color: "black",
4
4
  anchorColor: "blue",
5
5
  textWhiteSpace: "normal",
6
- buttonWhiteSpace: "normal"
6
+ buttonWhiteSpace: "normal",
7
+ buttonFlexWrap: "nowrap",
8
+ buttonGap: "0px"
7
9
  };
package/lib/types/components/webchatcontainerstateful/interfaces/IAdaptiveCardStyles.d.ts CHANGED
@@ -5,4 +5,6 @@ export interface IAdaptiveCardStyles {
5
5
  buttonWhiteSpace?: string;
6
6
  textWhiteSpace?: string;
7
7
  choiceInputPadding?: string;
8
+ buttonFlexWrap?: string;
9
+ buttonGap?: string;
8
10
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-widget",
3
- "version": "1.8.4-main.c687f88",
3
+ "version": "1.8.4-main.ffa5cbb",
4
4
  "description": "Microsoft Omnichannel Chat Widget",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",