@microsoft/omnichannel-chat-widget 1.8.4-main.c687f88 → 1.8.4-main.d63e7c6
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.
- package/README.md +12 -3
- package/lib/cjs/common/Constants.js +2 -0
- package/lib/cjs/common/utils/xssUtils.js +23 -51
- package/lib/cjs/common/utils.js +1 -1
- package/lib/cjs/components/livechatwidget/common/ActivitySubscriber/BotAuthActivitySubscriber.js +23 -6
- package/lib/cjs/components/livechatwidget/common/createAdapter.js +3 -2
- package/lib/cjs/components/proactivechatpanestateful/ProactiveChatPaneStateful.js +0 -1
- package/lib/cjs/components/webchatcontainerstateful/WebChatContainerStateful.js +29 -19
- package/lib/cjs/components/webchatcontainerstateful/common/activityConverters/convertPersistentChatHistoryMessageToActivity.js +109 -2
- package/lib/cjs/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
- package/lib/cjs/components/webchatcontainerstateful/webchatcontroller/WebChatEventSubscribers.js +13 -2
- package/lib/esm/common/Constants.js +2 -0
- package/lib/esm/common/utils/xssUtils.js +23 -51
- package/lib/esm/common/utils.js +1 -1
- package/lib/esm/components/livechatwidget/common/ActivitySubscriber/BotAuthActivitySubscriber.js +23 -6
- package/lib/esm/components/livechatwidget/common/createAdapter.js +3 -2
- package/lib/esm/components/proactivechatpanestateful/ProactiveChatPaneStateful.js +1 -2
- package/lib/esm/components/webchatcontainerstateful/WebChatContainerStateful.js +29 -19
- package/lib/esm/components/webchatcontainerstateful/common/activityConverters/convertPersistentChatHistoryMessageToActivity.js +109 -2
- package/lib/esm/components/webchatcontainerstateful/common/defaultStyles/defaultAdaptiveCardStyles.js +3 -1
- package/lib/esm/components/webchatcontainerstateful/webchatcontroller/WebChatEventSubscribers.js +13 -2
- package/lib/types/common/Constants.d.ts +2 -0
- package/lib/types/common/utils/xssUtils.d.ts +5 -21
- package/lib/types/components/livechatwidget/common/ActivitySubscriber/BotAuthActivitySubscriber.d.ts +1 -0
- package/lib/types/components/livechatwidget/interfaces/IBotAuthActivitySubscriberOptionalParams.d.ts +1 -0
- package/lib/types/components/webchatcontainerstateful/interfaces/IAdaptiveCardStyles.d.ts +2 -0
- package/lib/types/components/webchatcontainerstateful/interfaces/IBotAuthConfig.d.ts +7 -0
- package/package.json +14 -5
package/README.md
CHANGED
|
@@ -177,7 +177,7 @@ Header's and Footer's child components consist of three parts:
|
|
|
177
177
|
1. "middleGroup" - adding child components in the middle of the Header/Footer
|
|
178
178
|
1. "rightGroup" - adding child components at the right of the Header/Footer
|
|
179
179
|
|
|
180
|
-
By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#
|
|
180
|
+
By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#componentoverrides). In addition, other custom child components can be added to both Header and Footer by creating custom react nodes and adding them to attributes "leftGroup", "middleGroup" or "rightGroup" of "controlProps".
|
|
181
181
|
|
|
182
182
|
```js
|
|
183
183
|
const buttonStyleProps: IButtonStyles = {
|
|
@@ -224,8 +224,10 @@ const customizedFooterProp: IFooterProps = {
|
|
|
224
224
|
> :pushpin: Note that [WebChat hooks](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/HOOKS.md) can also be used in any custom components.
|
|
225
225
|
|
|
226
226
|
#### Bidirectional Custom Events
|
|
227
|
+
|
|
227
228
|
- Sending events from a hosting web page to bots/agents
|
|
228
|
-
|
|
229
|
+
- Register a function to post event
|
|
230
|
+
|
|
229
231
|
```js
|
|
230
232
|
//define sendCustomEvent function
|
|
231
233
|
const sendCustomEvent = (payload) => {
|
|
@@ -253,7 +255,9 @@ const customizedFooterProp: IFooterProps = {
|
|
|
253
255
|
}
|
|
254
256
|
})
|
|
255
257
|
```
|
|
256
|
-
|
|
258
|
+
|
|
259
|
+
- Receiving events from bots/agents
|
|
260
|
+
|
|
257
261
|
```js
|
|
258
262
|
//define setOnCustomEvent function
|
|
259
263
|
const setOnCustomEvent = (callback) => {
|
|
@@ -269,8 +273,10 @@ const customizedFooterProp: IFooterProps = {
|
|
|
269
273
|
```
|
|
270
274
|
|
|
271
275
|
#### Trigger initiateEndChat event
|
|
276
|
+
|
|
272
277
|
Customer can trigger the initiateEndChat event via BroadcastService to end a chat session.
|
|
273
278
|
When needed, the payload below could be triggered:
|
|
279
|
+
|
|
274
280
|
```js
|
|
275
281
|
const endChatEvent = {
|
|
276
282
|
eventName: "InitiateEndChat",
|
|
@@ -283,18 +289,21 @@ BroadcastService.postMessage(endChatEvent);
|
|
|
283
289
|
|
|
284
290
|
The payload of the event is optional, only needed when force closing of a persistent chat session is not required.
|
|
285
291
|
When chat widget receives the event without any payload, it will:
|
|
292
|
+
|
|
286
293
|
1. set the widget to closed state, the widget panel will be minimized. Post chat survey will not be displayed.
|
|
287
294
|
2. trigger a sessionclose service network request to OmniChannel services.
|
|
288
295
|
|
|
289
296
|
If skipSessionCloseForPersistentChat is set to true. The session close network request will not be triggered, instead, if postChat survey is available, post chat survey will be displayed.
|
|
290
297
|
|
|
291
298
|
After successfully processed initiateEndChat event. The CloseChat event is broadcasted.
|
|
299
|
+
|
|
292
300
|
```js
|
|
293
301
|
BroadcastService.getMessageByEventName("CloseChat").subscribe(async (msg) => {
|
|
294
302
|
console.log("close chat received: ", msg);
|
|
295
303
|
//more actions to unmount component and resources
|
|
296
304
|
})
|
|
297
305
|
```
|
|
306
|
+
|
|
298
307
|
## See Also
|
|
299
308
|
|
|
300
309
|
[Customizations Dev Guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md)\
|
|
@@ -82,6 +82,8 @@ _defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|amr|flac|mp2|m
|
|
|
82
82
|
_defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
|
|
83
83
|
_defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
|
|
84
84
|
_defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);
|
|
85
|
+
_defineProperty(Constants, "AdaptiveCardType", "adaptivecard");
|
|
86
|
+
_defineProperty(Constants, "SuggestedActionsType", "suggestedactions");
|
|
85
87
|
// calling container event names
|
|
86
88
|
_defineProperty(Constants, "CallAdded", "callAdded");
|
|
87
89
|
_defineProperty(Constants, "LocalVideoStreamAdded", "localVideoStreamAdded");
|
|
@@ -7,70 +7,42 @@ exports.detectAndCleanXSS = void 0;
|
|
|
7
7
|
var _dompurify = _interopRequireDefault(require("dompurify"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Sanitizes text input and detects XSS attack patterns.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* against various XSS techniques including script injection, event handler injection, style-based
|
|
15
|
-
* attacks, and encoded payloads.
|
|
12
|
+
* Sanitizes first with DOMPurify, then checks for malicious patterns in both
|
|
13
|
+
* the original and sanitized text to catch mutation XSS attacks.
|
|
16
14
|
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* - HTML event handlers (onmouseover, onclick, etc.)
|
|
20
|
-
* - Script tags (<script>)
|
|
21
|
-
* - CSS expression() functions
|
|
22
|
-
* - CSS url() functions
|
|
23
|
-
* - Position-based CSS attacks (position: fixed/absolute)
|
|
24
|
-
* - VBScript protocol URLs
|
|
25
|
-
* - Data URLs with HTML content
|
|
26
|
-
* - Fragment identifiers with escaped quotes
|
|
27
|
-
* - HTML entity-encoded angle brackets
|
|
28
|
-
*
|
|
29
|
-
* @param text - The input text to be analyzed and sanitized
|
|
30
|
-
* @returns An object containing:
|
|
31
|
-
* - cleanText: The sanitized version of the input text with all HTML tags and attributes removed
|
|
32
|
-
* - isXSSDetected: Boolean flag indicating whether potential XSS patterns were found in the original text
|
|
15
|
+
* @param text - Input text to sanitize
|
|
16
|
+
* @returns Object with cleanText (sanitized) and isXSSDetected flag
|
|
33
17
|
*/
|
|
34
18
|
const detectAndCleanXSS = text => {
|
|
35
|
-
//
|
|
36
|
-
const xssPatterns = [/javascript\s*:/gi,
|
|
37
|
-
// JavaScript protocol URLs (with optional spaces)
|
|
38
|
-
/vbscript\s*:/gi,
|
|
39
|
-
// VBScript protocol URLs (with optional spaces)
|
|
40
|
-
/on\w+\s*=/gi,
|
|
41
|
-
// HTML event handlers (onmouseover, onclick, onload, etc.)
|
|
42
|
-
/<\s*script/gi,
|
|
43
|
-
// Script tag opening (with optional spaces)
|
|
44
|
-
/expression\s*\(/gi,
|
|
45
|
-
// CSS expression() function (IE-specific)
|
|
46
|
-
/url\s*\(/gi,
|
|
47
|
-
// CSS url() function
|
|
48
|
-
/style\s*=.*position\s*:\s*fixed/gi,
|
|
49
|
-
// CSS position fixed attacks
|
|
50
|
-
/style\s*=.*position\s*:\s*absolute/gi,
|
|
51
|
-
// CSS position absolute attacks
|
|
52
|
-
/data\s*:\s*text\s*\/\s*html/gi,
|
|
53
|
-
// Data URLs containing HTML
|
|
54
|
-
/#.*\\"/gi,
|
|
55
|
-
// Fragment identifiers with escaped quotes
|
|
56
|
-
/>.*</gi // HTML entity-encoded angle brackets indicating tag structure
|
|
57
|
-
];
|
|
58
|
-
|
|
59
|
-
// Check if any XSS patterns are detected in the input text
|
|
60
|
-
const isXSSDetected = xssPatterns.some(pattern => pattern.test(text));
|
|
61
|
-
|
|
62
|
-
// Clean the text using DOMPurify with strict config
|
|
19
|
+
// Sanitize first to prevent mutation XSS (e.g., "s<iframe></iframe>tyle" → "style")
|
|
63
20
|
const cleanText = _dompurify.default.sanitize(text, {
|
|
64
21
|
ALLOWED_TAGS: [],
|
|
65
|
-
// No HTML tags allowed in title
|
|
66
22
|
ALLOWED_ATTR: [],
|
|
67
23
|
KEEP_CONTENT: true,
|
|
68
|
-
// Keep text content
|
|
69
24
|
ALLOW_DATA_ATTR: false,
|
|
70
25
|
ALLOW_UNKNOWN_PROTOCOLS: false,
|
|
71
26
|
SANITIZE_DOM: true,
|
|
72
27
|
FORCE_BODY: false
|
|
73
28
|
});
|
|
29
|
+
const contentChanged = text !== cleanText;
|
|
30
|
+
|
|
31
|
+
// Non-global regex patterns to avoid stateful .test() issues
|
|
32
|
+
const xssPatterns = [/javascript\s*:/i, /vbscript\s*:/i, /on\w+\s*=/i,
|
|
33
|
+
// Event handlers
|
|
34
|
+
/<\s*script/i, /<\s*iframe/i, /<\s*object/i, /<\s*embed/i, /<\s*svg/i, /expression\s*\(/i,
|
|
35
|
+
// IE CSS expressions
|
|
36
|
+
/style\s*=.*position\s*:\s*(fixed|absolute)/i, /data\s*:\s*text\s*\/\s*html/i, /#.*\\"/i, /&(lt|gt|#x3c|#60|#x3e|#62);/i,
|
|
37
|
+
// HTML entities
|
|
38
|
+
/&#x?[0-9a-f]+;.*</i, /\u003c.*\u003e/i,
|
|
39
|
+
// Unicode escapes
|
|
40
|
+
/src\s*=\s*["']?\s*javascript:/i, /href\s*=\s*["']?\s*javascript:/i];
|
|
41
|
+
const hasXSSPattern = xssPatterns.some(pattern => {
|
|
42
|
+
return pattern.test(text) || pattern.test(cleanText);
|
|
43
|
+
});
|
|
44
|
+
const hasHTMLStructure = /<[^>]+>/.test(text) && !/<[^>]+>/.test(cleanText);
|
|
45
|
+
const isXSSDetected = contentChanged || hasXSSPattern || hasHTMLStructure;
|
|
74
46
|
return {
|
|
75
47
|
cleanText,
|
|
76
48
|
isXSSDetected
|
package/lib/cjs/common/utils.js
CHANGED
|
@@ -480,7 +480,7 @@ const setOcUserAgent = chatSDK => {
|
|
|
480
480
|
// eslint-disable-line @typescript-eslint/no-explicit-any
|
|
481
481
|
if ((_chatSDK$OCClient = chatSDK.OCClient) !== null && _chatSDK$OCClient !== void 0 && _chatSDK$OCClient.ocUserAgent && !((_chatSDK$OCClient2 = chatSDK.OCClient) !== null && _chatSDK$OCClient2 !== void 0 && _chatSDK$OCClient2.ocUserAgent.join(" ").includes("omnichannel-chat-widget/"))) {
|
|
482
482
|
try {
|
|
483
|
-
const version = require("
|
|
483
|
+
const version = require("../../package.json").version; // eslint-disable-line @typescript-eslint/no-var-requires
|
|
484
484
|
const userAgent = `omnichannel-chat-widget/${version}`;
|
|
485
485
|
chatSDK.OCClient.ocUserAgent = [userAgent, ...chatSDK.OCClient.ocUserAgent];
|
|
486
486
|
} catch (error) {
|
package/lib/cjs/components/livechatwidget/common/ActivitySubscriber/BotAuthActivitySubscriber.js
CHANGED
|
@@ -44,7 +44,7 @@ const extractSasUrl = async attachment => {
|
|
|
44
44
|
}
|
|
45
45
|
return sasUrl;
|
|
46
46
|
};
|
|
47
|
-
const fetchBotAuthConfig = async (retries, interval) => {
|
|
47
|
+
const fetchBotAuthConfig = async (retries, interval, fallback) => {
|
|
48
48
|
_TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
|
|
49
49
|
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderFetchConfig
|
|
50
50
|
});
|
|
@@ -60,13 +60,23 @@ const fetchBotAuthConfig = async (retries, interval) => {
|
|
|
60
60
|
});
|
|
61
61
|
if (retries === 1) {
|
|
62
62
|
// Base Case
|
|
63
|
-
|
|
63
|
+
if (response !== undefined) {
|
|
64
|
+
return response;
|
|
65
|
+
}
|
|
66
|
+
if (fallback !== undefined) {
|
|
67
|
+
_TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.WARN, {
|
|
68
|
+
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderNotFound,
|
|
69
|
+
Description: `Failed to fetch bot auth config after maximum retries. Using fallback value: ${fallback}`
|
|
70
|
+
});
|
|
71
|
+
return fallback;
|
|
72
|
+
}
|
|
73
|
+
throw new Error("Failed to fetch bot auth config after maximum retries");
|
|
64
74
|
}
|
|
65
75
|
await delay(interval);
|
|
66
76
|
if (response !== undefined) {
|
|
67
77
|
return response;
|
|
68
78
|
}
|
|
69
|
-
return await fetchBotAuthConfig(--retries, interval);
|
|
79
|
+
return await fetchBotAuthConfig(--retries, interval, fallback);
|
|
70
80
|
};
|
|
71
81
|
let BotAuthActivitySubscriber = /*#__PURE__*/function () {
|
|
72
82
|
function BotAuthActivitySubscriber() {
|
|
@@ -76,6 +86,7 @@ let BotAuthActivitySubscriber = /*#__PURE__*/function () {
|
|
|
76
86
|
_defineProperty(this, "signInCardSeen", void 0);
|
|
77
87
|
_defineProperty(this, "fetchBotAuthConfigRetries", void 0);
|
|
78
88
|
_defineProperty(this, "fetchBotAuthConfigRetryInterval", void 0);
|
|
89
|
+
_defineProperty(this, "fallbackShowSignInCard", void 0);
|
|
79
90
|
this.signInCardSeen = new Set();
|
|
80
91
|
this.fetchBotAuthConfigRetries = 3;
|
|
81
92
|
this.fetchBotAuthConfigRetryInterval = 1000;
|
|
@@ -85,6 +96,11 @@ let BotAuthActivitySubscriber = /*#__PURE__*/function () {
|
|
|
85
96
|
if (optionalParams.fetchBotAuthConfigRetryInterval) {
|
|
86
97
|
this.fetchBotAuthConfigRetryInterval = optionalParams.fetchBotAuthConfigRetryInterval;
|
|
87
98
|
}
|
|
99
|
+
this.fallbackShowSignInCard = optionalParams.fallbackShowSignInCard;
|
|
100
|
+
_TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
|
|
101
|
+
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderFetchConfig,
|
|
102
|
+
Description: `BotAuthActivitySubscriber initialized with fallbackShowSignInCard: ${optionalParams.fallbackShowSignInCard}`
|
|
103
|
+
});
|
|
88
104
|
}
|
|
89
105
|
_createClass(BotAuthActivitySubscriber, [{
|
|
90
106
|
key: "applicable",
|
|
@@ -129,7 +145,7 @@ let BotAuthActivitySubscriber = /*#__PURE__*/function () {
|
|
|
129
145
|
_omnichannelChatComponents.BroadcastService.postMessage(event);
|
|
130
146
|
}
|
|
131
147
|
try {
|
|
132
|
-
const response = await fetchBotAuthConfig(this.fetchBotAuthConfigRetries, this.fetchBotAuthConfigRetryInterval);
|
|
148
|
+
const response = await fetchBotAuthConfig(this.fetchBotAuthConfigRetries, this.fetchBotAuthConfigRetryInterval, this.fallbackShowSignInCard);
|
|
133
149
|
if (response === false) {
|
|
134
150
|
_TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
|
|
135
151
|
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderHideCard
|
|
@@ -140,9 +156,10 @@ let BotAuthActivitySubscriber = /*#__PURE__*/function () {
|
|
|
140
156
|
});
|
|
141
157
|
return activity;
|
|
142
158
|
}
|
|
143
|
-
} catch {
|
|
159
|
+
} catch (e) {
|
|
144
160
|
_TelemetryHelper.TelemetryHelper.logLoadingEvent(_TelemetryConstants.LogLevel.INFO, {
|
|
145
|
-
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderNotFound
|
|
161
|
+
Event: _TelemetryConstants.TelemetryEvent.SetBotAuthProviderNotFound,
|
|
162
|
+
ExceptionDetails: e instanceof Error ? e.message : JSON.stringify(e)
|
|
146
163
|
});
|
|
147
164
|
//this is to ensure listener continues waiting for response
|
|
148
165
|
if (this.signInCardSeen.has(signInId)) {
|
|
@@ -45,10 +45,11 @@ const createAdapter = async (facadeChatSDK, props) => {
|
|
|
45
45
|
//so far, there is no need to convert to the shim adapter when using visual tests
|
|
46
46
|
const isMocked = facadeChatSDK.getChatSDK() instanceof _mockchatsdk.MockChatSDK;
|
|
47
47
|
if (isMocked !== true) {
|
|
48
|
-
var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4;
|
|
48
|
+
var _props$webChatContain, _props$webChatContain2, _props$webChatContain3, _props$webChatContain4, _props$webChatContain5, _props$webChatContain6;
|
|
49
49
|
const botAuthActivitySubscriberOptionalParams = {
|
|
50
50
|
fetchBotAuthConfigRetries: (props === null || props === void 0 ? void 0 : (_props$webChatContain = props.webChatContainerProps) === null || _props$webChatContain === void 0 ? void 0 : (_props$webChatContain2 = _props$webChatContain.botAuthConfig) === null || _props$webChatContain2 === void 0 ? void 0 : _props$webChatContain2.fetchBotAuthConfigRetries) || defaultBotAuthConfig.fetchBotAuthConfigRetries,
|
|
51
|
-
fetchBotAuthConfigRetryInterval: (props === null || props === void 0 ? void 0 : (_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : (_props$webChatContain4 = _props$webChatContain3.botAuthConfig) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.fetchBotAuthConfigRetryInterval) || defaultBotAuthConfig.fetchBotAuthConfigRetryInterval
|
|
51
|
+
fetchBotAuthConfigRetryInterval: (props === null || props === void 0 ? void 0 : (_props$webChatContain3 = props.webChatContainerProps) === null || _props$webChatContain3 === void 0 ? void 0 : (_props$webChatContain4 = _props$webChatContain3.botAuthConfig) === null || _props$webChatContain4 === void 0 ? void 0 : _props$webChatContain4.fetchBotAuthConfigRetryInterval) || defaultBotAuthConfig.fetchBotAuthConfigRetryInterval,
|
|
52
|
+
fallbackShowSignInCard: props === null || props === void 0 ? void 0 : (_props$webChatContain5 = props.webChatContainerProps) === null || _props$webChatContain5 === void 0 ? void 0 : (_props$webChatContain6 = _props$webChatContain5.botAuthConfig) === null || _props$webChatContain6 === void 0 ? void 0 : _props$webChatContain6.fallbackShowSignInCard
|
|
52
53
|
};
|
|
53
54
|
adapter = new _ChatAdapterShim.ChatAdapterShim(adapter);
|
|
54
55
|
adapter.addSubscriber(new _AddActivitySubscriber.AddActivitySubscriber());
|
|
@@ -122,7 +122,6 @@ const ProactiveChatPaneStateful = props => {
|
|
|
122
122
|
bodyTitleText: state.appStates.proactiveChatStates.proactiveChatBodyTitle ? state.appStates.proactiveChatStates.proactiveChatBodyTitle : proactiveChatProps === null || proactiveChatProps === void 0 ? void 0 : (_proactiveChatProps$c = proactiveChatProps.controlProps) === null || _proactiveChatProps$c === void 0 ? void 0 : _proactiveChatProps$c.bodyTitleText
|
|
123
123
|
};
|
|
124
124
|
(0, _react.useEffect)(() => {
|
|
125
|
-
(0, _utils.setFocusOnElement)(document.getElementById(controlProps.id + "-startbutton"));
|
|
126
125
|
_TelemetryManager.TelemetryTimers.ProactiveChatScreenTimer = (0, _utils.createTimer)();
|
|
127
126
|
const timeoutEvent = setTimeout(() => {
|
|
128
127
|
handleProactiveChatInviteTimeout();
|
|
@@ -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,
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 && (
|
|
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 : (
|
|
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
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
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 : (
|
|
408
|
-
outline-offset: ${(webChatContainerProps === null || webChatContainerProps === void 0 ? void 0 : (
|
|
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,
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _Constants = require("../../../../common/Constants");
|
|
8
|
+
var _SupportedAdaptiveCards = require("@microsoft/omnichannel-chat-sdk/lib/utils/printers/interfaces/SupportedAdaptiveCards");
|
|
8
9
|
var _botActivity = _interopRequireDefault(require("../activities/botActivity"));
|
|
9
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
11
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -23,15 +24,24 @@ const convertStringValueToInt = value => {
|
|
|
23
24
|
|
|
24
25
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
26
|
const convertPersistentChatHistoryMessageToActivity = message => {
|
|
26
|
-
var _from$user, _from$
|
|
27
|
+
var _from$application, _from$user, _from$application2;
|
|
27
28
|
const {
|
|
28
29
|
additionalData,
|
|
29
30
|
attachments,
|
|
31
|
+
botContentType,
|
|
30
32
|
content,
|
|
31
33
|
created,
|
|
32
34
|
from,
|
|
33
35
|
transcriptOriginalMessageId
|
|
34
36
|
} = message;
|
|
37
|
+
const isFromCustomer = (from === null || from === void 0 ? void 0 : (_from$application = from.application) === null || _from$application === void 0 ? void 0 : _from$application.displayName) === "Customer";
|
|
38
|
+
|
|
39
|
+
// Filter out customer responses to adaptive cards (e.g., form submissions like {"value":{"goPaperless":"yes"}}).
|
|
40
|
+
// These are the customer's postBack/messageBack replies to bot adaptive cards — not displayable content.
|
|
41
|
+
// In live chat, webchat hides these natively; in history we must filter them explicitly.
|
|
42
|
+
if (isFromCustomer && botContentType === "azurebotservice.adaptivecard") {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
35
45
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
36
46
|
const activity = {
|
|
37
47
|
..._botActivity.default,
|
|
@@ -68,13 +78,110 @@ const convertPersistentChatHistoryMessageToActivity = message => {
|
|
|
68
78
|
name: from.user.displayName
|
|
69
79
|
};
|
|
70
80
|
}
|
|
71
|
-
if ((from === null || from === void 0 ? void 0 : (_from$
|
|
81
|
+
if ((from === null || from === void 0 ? void 0 : (_from$application2 = from.application) === null || _from$application2 === void 0 ? void 0 : _from$application2.displayName) === "Customer") {
|
|
72
82
|
activity.from = {
|
|
73
83
|
role: "user",
|
|
74
84
|
name: from.application.displayName
|
|
75
85
|
};
|
|
76
86
|
}
|
|
77
87
|
if (content) {
|
|
88
|
+
var _parsedContent, _parsedContent$value;
|
|
89
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
90
|
+
let parsedContent;
|
|
91
|
+
try {
|
|
92
|
+
parsedContent = JSON.parse(content);
|
|
93
|
+
} catch (error) {
|
|
94
|
+
parsedContent = null; // fall back to normal text handling
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Check if this is a customer form submission response (e.g., RichObjectMessage_Form)
|
|
98
|
+
// These should be ignored as they are form submission data, not displayable content
|
|
99
|
+
if (isFromCustomer && ((_parsedContent = parsedContent) === null || _parsedContent === void 0 ? void 0 : (_parsedContent$value = _parsedContent.value) === null || _parsedContent$value === void 0 ? void 0 : _parsedContent$value.type) === "RichObjectMessage_Form") {
|
|
100
|
+
return null;
|
|
101
|
+
}
|
|
102
|
+
if (parsedContent && typeof parsedContent === "object") {
|
|
103
|
+
var _parsedContent$sugges;
|
|
104
|
+
// Structural detection: check the parsed object's properties directly
|
|
105
|
+
const hasAttachments = Array.isArray(parsedContent.attachments) && parsedContent.attachments.length > 0;
|
|
106
|
+
const hasSuggestedActions = Array.isArray((_parsedContent$sugges = parsedContent.suggestedActions) === null || _parsedContent$sugges === void 0 ? void 0 : _parsedContent$sugges.actions) && parsedContent.suggestedActions.actions.length > 0;
|
|
107
|
+
const isRawAdaptiveCardBody = parsedContent.type === "AdaptiveCard";
|
|
108
|
+
|
|
109
|
+
// Filter out suggested-action-only messages from history.
|
|
110
|
+
// WebChat only renders suggestedActions for the most recent activity, so in history
|
|
111
|
+
// these render as empty "Suggested reply" text bubbles with no actionable buttons.
|
|
112
|
+
if (hasSuggestedActions && !hasAttachments) {
|
|
113
|
+
return null;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
// Substring detection: check the raw content string for known card type patterns
|
|
117
|
+
const contentLower = content.toLowerCase();
|
|
118
|
+
const isAdaptiveCard = contentLower.includes(_Constants.Constants.AdaptiveCardType);
|
|
119
|
+
const isSuggestedActions = contentLower.includes(_Constants.Constants.SuggestedActionsType);
|
|
120
|
+
const containsSupportedCard = Object.values(_SupportedAdaptiveCards.SupportedAdaptiveCards).some(type => contentLower.includes(type.toLowerCase()));
|
|
121
|
+
|
|
122
|
+
// If the content is a raw adaptive card body (type: "AdaptiveCard"), wrap it as an attachment
|
|
123
|
+
// so webchat can render it properly instead of treating it as an unknown activity type
|
|
124
|
+
if (isRawAdaptiveCardBody) {
|
|
125
|
+
return {
|
|
126
|
+
...activity,
|
|
127
|
+
text: "",
|
|
128
|
+
attachments: [{
|
|
129
|
+
contentType: _SupportedAdaptiveCards.SupportedAdaptiveCards.Adaptive,
|
|
130
|
+
content: parsedContent
|
|
131
|
+
}],
|
|
132
|
+
timestamp,
|
|
133
|
+
channelData: {
|
|
134
|
+
...activity.channelData,
|
|
135
|
+
"webchat:sequence-id": webchatSequenceId
|
|
136
|
+
}
|
|
137
|
+
};
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
// Detect rich content using both structural checks and substring matching
|
|
141
|
+
if (hasAttachments || hasSuggestedActions || isAdaptiveCard || isSuggestedActions || containsSupportedCard) {
|
|
142
|
+
var _activity$from;
|
|
143
|
+
// Preserve from.role from the base activity — parsedContent.from may lack the role property
|
|
144
|
+
// which webchat needs to determine how to render the message (bot vs user)
|
|
145
|
+
const preservedFrom = {
|
|
146
|
+
...activity.from,
|
|
147
|
+
...(parsedContent.from || {}),
|
|
148
|
+
role: ((_activity$from = activity.from) === null || _activity$from === void 0 ? void 0 : _activity$from.role) || "bot"
|
|
149
|
+
};
|
|
150
|
+
return {
|
|
151
|
+
...activity,
|
|
152
|
+
...parsedContent,
|
|
153
|
+
from: preservedFrom,
|
|
154
|
+
timestamp,
|
|
155
|
+
channelData: {
|
|
156
|
+
...activity.channelData,
|
|
157
|
+
"webchat:sequence-id": webchatSequenceId
|
|
158
|
+
}
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// If parsedContent is a webchat activity (type: "message") but didn't match any specific card check,
|
|
163
|
+
// still treat it as a rich activity to avoid displaying raw JSON as text
|
|
164
|
+
if (parsedContent.type === "message" && (parsedContent.attachments || parsedContent.suggestedActions || parsedContent.value)) {
|
|
165
|
+
var _activity$from2;
|
|
166
|
+
const preservedFrom = {
|
|
167
|
+
...activity.from,
|
|
168
|
+
...(parsedContent.from || {}),
|
|
169
|
+
role: ((_activity$from2 = activity.from) === null || _activity$from2 === void 0 ? void 0 : _activity$from2.role) || "bot"
|
|
170
|
+
};
|
|
171
|
+
return {
|
|
172
|
+
...activity,
|
|
173
|
+
...parsedContent,
|
|
174
|
+
from: preservedFrom,
|
|
175
|
+
timestamp,
|
|
176
|
+
channelData: {
|
|
177
|
+
...activity.channelData,
|
|
178
|
+
"webchat:sequence-id": webchatSequenceId
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// Plain text message
|
|
78
185
|
return {
|
|
79
186
|
...activity,
|
|
80
187
|
text: content,
|
|
@@ -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;
|