@microsoft/omnichannel-chat-components 0.1.0-main.263d1f1 → 0.1.0-main.2d7913d
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/lib/cjs/common/Constants.js +10 -5
- package/lib/cjs/components/chatbutton/ChatButton.js +26 -23
- package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
- package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
- package/lib/cjs/index.js +6 -0
- package/lib/cjs/services/BroadcastService.js +31 -7
- package/lib/esm/common/Constants.js +8 -3
- package/lib/esm/components/chatbutton/ChatButton.js +26 -23
- package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
- package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
- package/lib/esm/index.js +1 -0
- package/lib/esm/services/BroadcastService.js +29 -7
- package/lib/types/common/Constants.d.ts +2 -1
- package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts +2 -0
- package/lib/types/index.d.ts +1 -0
- package/lib/types/services/BroadcastService.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.Regex = exports.KeyCodes = exports.
|
|
6
|
+
exports.Regex = exports.KeyCodes = exports.HiddenTextStyles = exports.ElementType = exports.AccessibilityBrightnessRatio = void 0;
|
|
7
7
|
|
|
8
8
|
var _class, _class2;
|
|
9
9
|
|
|
@@ -11,11 +11,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
11
11
|
|
|
12
12
|
/* CSS Constants */
|
|
13
13
|
const AccessibilityBrightnessRatio = 1.2;
|
|
14
|
-
/* App constants*/
|
|
15
|
-
|
|
16
14
|
exports.AccessibilityBrightnessRatio = AccessibilityBrightnessRatio;
|
|
17
|
-
const
|
|
18
|
-
|
|
15
|
+
const HiddenTextStyles = {
|
|
16
|
+
position: "absolute",
|
|
17
|
+
height: "1px",
|
|
18
|
+
width: "1px",
|
|
19
|
+
overflow: "hidden",
|
|
20
|
+
clip: "rect(1px, 1px, 1px, 1px)",
|
|
21
|
+
whiteSpace: "nowrap"
|
|
22
|
+
};
|
|
23
|
+
exports.HiddenTextStyles = HiddenTextStyles;
|
|
19
24
|
const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _defineProperty(_class, "DeclineCallHotKey", "D"), _defineProperty(_class, "AcceptAudioCallHotKey", "S"), _defineProperty(_class, "AcceptVideoCallHotKey", "A"), _defineProperty(_class, "ToggleMicHotKey", "M"), _defineProperty(_class, "ToggleCameraHotKey", "O"), _class);
|
|
20
25
|
exports.KeyCodes = KeyCodes;
|
|
21
26
|
const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
|
|
@@ -42,13 +42,16 @@ function NotificationBubble(props, parentId) {
|
|
|
42
42
|
const unreadMessageCount = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.unreadMessageCount) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.unreadMessageCount);
|
|
43
43
|
|
|
44
44
|
if (unreadMessageCount !== "0") {
|
|
45
|
-
var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl;
|
|
45
|
+
var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
|
|
46
46
|
|
|
47
|
-
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.
|
|
47
|
+
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
|
|
48
|
+
role: "alert",
|
|
48
49
|
styles: notificationBubbleStyles,
|
|
49
50
|
className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
|
|
50
51
|
id: parentId + "-notification-bubble"
|
|
51
|
-
}, unreadMessageCount
|
|
52
|
+
}, unreadMessageCount, /*#__PURE__*/_react2.default.createElement("span", {
|
|
53
|
+
style: _Constants.HiddenTextStyles
|
|
54
|
+
}, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
|
|
52
55
|
}
|
|
53
56
|
|
|
54
57
|
return null;
|
|
@@ -68,7 +71,7 @@ function IconContainer(props, parentId) {
|
|
|
68
71
|
}
|
|
69
72
|
|
|
70
73
|
function TextContainer(props, parentId) {
|
|
71
|
-
var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$
|
|
74
|
+
var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
|
|
72
75
|
|
|
73
76
|
const textContainerStyles = {
|
|
74
77
|
root: Object.assign({}, _defaultChatButtonTextContainerStyles.defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
|
|
@@ -79,12 +82,12 @@ function TextContainer(props, parentId) {
|
|
|
79
82
|
const subtitleStyles = {
|
|
80
83
|
root: Object.assign({}, _defaultChatButtonSubTitleStyles.defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
|
|
81
84
|
};
|
|
82
|
-
const hideChatTitle = ((_props$
|
|
83
|
-
const hideChatSubtitle = ((_props$
|
|
84
|
-
const titleDir = ((_props$
|
|
85
|
-
const titleText = ((_props$
|
|
86
|
-
const subtitleDir = ((_props$
|
|
87
|
-
const subtitleText = ((_props$
|
|
85
|
+
const hideChatTitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
|
|
86
|
+
const hideChatSubtitle = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
|
|
87
|
+
const titleDir = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
|
|
88
|
+
const titleText = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
|
|
89
|
+
const subtitleDir = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
|
|
90
|
+
const subtitleText = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
|
|
88
91
|
return (0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/_react2.default.createElement(_react.Stack, {
|
|
89
92
|
styles: textContainerStyles,
|
|
90
93
|
className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
|
|
@@ -105,23 +108,23 @@ function TextContainer(props, parentId) {
|
|
|
105
108
|
}
|
|
106
109
|
|
|
107
110
|
function ChatButton(props) {
|
|
108
|
-
var _props$
|
|
109
|
-
|
|
110
|
-
const elementId = ((_props$
|
|
111
|
-
const defaultAriaLabel = ((_props$
|
|
112
|
-
const defaultRole = ((_props$
|
|
113
|
-
const containersDir = ((_props$
|
|
114
|
-
const hideChatButton = ((_props$
|
|
115
|
-
const hideChatIcon = ((_props$
|
|
116
|
-
const hideChatTextContainer = ((_props$
|
|
117
|
-
const hideNotificationBubble = ((_props$
|
|
111
|
+
var _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$styleProps11;
|
|
112
|
+
|
|
113
|
+
const elementId = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.id) ?? "lcw-components-chat-button";
|
|
114
|
+
const defaultAriaLabel = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.ariaLabel) ?? "live chat button";
|
|
115
|
+
const defaultRole = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
|
|
116
|
+
const containersDir = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
|
|
117
|
+
const hideChatButton = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
|
|
118
|
+
const hideChatIcon = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
|
|
119
|
+
const hideChatTextContainer = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
|
|
120
|
+
const hideNotificationBubble = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
|
|
118
121
|
const chatButtonGroupStyles = {
|
|
119
122
|
root: Object.assign({}, _defaultChatButtonGeneralStyles.defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
|
|
120
123
|
};
|
|
121
124
|
const handleInitiateChatClick = (0, _react2.useCallback)(() => {
|
|
122
|
-
var _props$
|
|
125
|
+
var _props$controlProps17;
|
|
123
126
|
|
|
124
|
-
if ((_props$
|
|
127
|
+
if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
|
|
125
128
|
const customEvent = {
|
|
126
129
|
elementType: _Constants.ElementType.ChatButton,
|
|
127
130
|
elementId: elementId,
|
|
@@ -150,7 +153,7 @@ function ChatButton(props) {
|
|
|
150
153
|
onClick: handleInitiateChatClick,
|
|
151
154
|
onKeyDown: handleInputKeyDown,
|
|
152
155
|
"aria-label": defaultAriaLabel
|
|
153
|
-
}, !hideChatIcon && IconContainer(props, elementId), !
|
|
156
|
+
}, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
|
|
154
157
|
}
|
|
155
158
|
|
|
156
159
|
var _default = ChatButton;
|
|
@@ -20,6 +20,8 @@ const defaultChatButtonControlProps = {
|
|
|
20
20
|
hideChatTextContainer: false,
|
|
21
21
|
hideChatSubtitle: false,
|
|
22
22
|
hideChatTitle: false,
|
|
23
|
-
hideNotificationBubble: true
|
|
23
|
+
hideNotificationBubble: true,
|
|
24
|
+
unreadMessageString: "new messages",
|
|
25
|
+
largeUnreadMessageString: "99+"
|
|
24
26
|
};
|
|
25
27
|
exports.defaultChatButtonControlProps = defaultChatButtonControlProps;
|
|
@@ -7,7 +7,7 @@ exports.defaultLoadingPaneIconStyles = void 0;
|
|
|
7
7
|
const defaultLoadingPaneIconStyles = {
|
|
8
8
|
borderRadius: "50%",
|
|
9
9
|
backgroundColor: "#F1F1F1",
|
|
10
|
-
boxShadow: "0px 0px 0.5px 7px
|
|
10
|
+
boxShadow: "0px 0px 0.5px 7px rgba(196, 196, 196, 0.15)",
|
|
11
11
|
width: "86px",
|
|
12
12
|
height: "86px",
|
|
13
13
|
margin: "0px 0px 20px 0px",
|
package/lib/cjs/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "BroadcastService", {
|
|
|
27
27
|
return _BroadcastService.BroadcastService;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "BroadcastServiceInitialize", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _BroadcastService.BroadcastServiceInitialize;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "CallAcceptButtonBase64", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function () {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.BroadcastService = void 0;
|
|
6
|
+
exports.BroadcastServiceInitialize = exports.BroadcastService = void 0;
|
|
7
7
|
|
|
8
8
|
var _rxjs = require("rxjs");
|
|
9
9
|
|
|
@@ -11,16 +11,40 @@ var _operators = require("rxjs/operators");
|
|
|
11
11
|
|
|
12
12
|
var _broadcastChannel = require("broadcast-channel");
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
const newMessage = new _rxjs.Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
15
15
|
|
|
16
|
-
const
|
|
17
|
-
const pubChannel = new _broadcastChannel.BroadcastChannel(_Constants.BROADCAST_CHANNEL_NAME);
|
|
18
|
-
const subChannel = new _broadcastChannel.BroadcastChannel(_Constants.BROADCAST_CHANNEL_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
16
|
+
const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
19
|
+
|
|
20
|
+
let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
21
|
+
|
|
22
|
+
let subChannel;
|
|
23
|
+
|
|
24
|
+
const BroadcastServiceInitialize = channelName => {
|
|
25
|
+
if (broadcastServicePubList[channelName]) {
|
|
26
|
+
pubChannel = broadcastServicePubList[channelName];
|
|
27
|
+
} else {
|
|
28
|
+
const newPubChannel = new _broadcastChannel.BroadcastChannel(channelName);
|
|
29
|
+
broadcastServicePubList[channelName] = newPubChannel;
|
|
30
|
+
pubChannel = newPubChannel;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (broadcastServiceSubList[channelName]) {
|
|
34
|
+
subChannel = broadcastServiceSubList[channelName];
|
|
35
|
+
} else {
|
|
36
|
+
const newSubChannel = new _broadcastChannel.BroadcastChannel(channelName);
|
|
37
|
+
broadcastServiceSubList[channelName] = newSubChannel;
|
|
38
|
+
subChannel = newSubChannel;
|
|
39
|
+
} // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
subChannel.onmessage = message => {
|
|
43
|
+
newMessage.next(message);
|
|
44
|
+
};
|
|
22
45
|
};
|
|
23
46
|
|
|
47
|
+
exports.BroadcastServiceInitialize = BroadcastServiceInitialize;
|
|
24
48
|
const BroadcastService = {
|
|
25
49
|
//broadcast a message
|
|
26
50
|
postMessage: message => {
|
|
@@ -4,9 +4,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
4
4
|
|
|
5
5
|
/* CSS Constants */
|
|
6
6
|
export const AccessibilityBrightnessRatio = 1.2;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export const HiddenTextStyles = {
|
|
8
|
+
position: "absolute",
|
|
9
|
+
height: "1px",
|
|
10
|
+
width: "1px",
|
|
11
|
+
overflow: "hidden",
|
|
12
|
+
clip: "rect(1px, 1px, 1px, 1px)",
|
|
13
|
+
whiteSpace: "nowrap"
|
|
14
|
+
};
|
|
10
15
|
export const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "ESCAPE", "Escape"), _defineProperty(_class, "SPACE", "Space"), _defineProperty(_class, "DeclineCallHotKey", "D"), _defineProperty(_class, "AcceptAudioCallHotKey", "S"), _defineProperty(_class, "AcceptVideoCallHotKey", "A"), _defineProperty(_class, "ToggleMicHotKey", "M"), _defineProperty(_class, "ToggleCameraHotKey", "O"), _class);
|
|
11
16
|
export const Regex = (_class2 = class Regex {}, _defineProperty(_class2, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _defineProperty(_class2, "URLRegex", /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi), _class2);
|
|
12
17
|
export let ElementType;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Icon, Label, Stack } from "@fluentui/react";
|
|
2
2
|
import React, { useCallback } from "react";
|
|
3
3
|
import { BroadcastService } from "../../services/BroadcastService";
|
|
4
|
-
import { ElementType, KeyCodes } from "../../common/Constants";
|
|
4
|
+
import { ElementType, HiddenTextStyles, KeyCodes } from "../../common/Constants";
|
|
5
5
|
import { decodeComponentString } from "../../common/decodeComponentString";
|
|
6
6
|
import { defaultChatButtonControlProps } from "./common/defaultProps/defaultChatButtonControlProps";
|
|
7
7
|
import { defaultChatButtonGeneralStyles } from "./common/defaultStyles/defaultChatButtonGeneralStyles";
|
|
@@ -20,13 +20,16 @@ function NotificationBubble(props, parentId) {
|
|
|
20
20
|
const unreadMessageCount = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.unreadMessageCount) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.unreadMessageCount);
|
|
21
21
|
|
|
22
22
|
if (unreadMessageCount !== "0") {
|
|
23
|
-
var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl;
|
|
23
|
+
var _props$componentOverr, _props$styleProps2, _props$styleProps2$cl, _props$controlProps2;
|
|
24
24
|
|
|
25
|
-
return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(
|
|
25
|
+
return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(Stack, {
|
|
26
|
+
role: "alert",
|
|
26
27
|
styles: notificationBubbleStyles,
|
|
27
28
|
className: (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : (_props$styleProps2$cl = _props$styleProps2.classNames) === null || _props$styleProps2$cl === void 0 ? void 0 : _props$styleProps2$cl.notificationBubbleClassName,
|
|
28
29
|
id: parentId + "-notification-bubble"
|
|
29
|
-
}, unreadMessageCount
|
|
30
|
+
}, unreadMessageCount, /*#__PURE__*/React.createElement("span", {
|
|
31
|
+
style: HiddenTextStyles
|
|
32
|
+
}, (_props$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.unreadMessageString));
|
|
30
33
|
}
|
|
31
34
|
|
|
32
35
|
return null;
|
|
@@ -46,7 +49,7 @@ function IconContainer(props, parentId) {
|
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
function TextContainer(props, parentId) {
|
|
49
|
-
var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$
|
|
52
|
+
var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
|
|
50
53
|
|
|
51
54
|
const textContainerStyles = {
|
|
52
55
|
root: Object.assign({}, defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
|
|
@@ -57,12 +60,12 @@ function TextContainer(props, parentId) {
|
|
|
57
60
|
const subtitleStyles = {
|
|
58
61
|
root: Object.assign({}, defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
|
|
59
62
|
};
|
|
60
|
-
const hideChatTitle = ((_props$
|
|
61
|
-
const hideChatSubtitle = ((_props$
|
|
62
|
-
const titleDir = ((_props$
|
|
63
|
-
const titleText = ((_props$
|
|
64
|
-
const subtitleDir = ((_props$
|
|
65
|
-
const subtitleText = ((_props$
|
|
63
|
+
const hideChatTitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
|
|
64
|
+
const hideChatSubtitle = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
|
|
65
|
+
const titleDir = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
|
|
66
|
+
const titleText = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
|
|
67
|
+
const subtitleDir = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
|
|
68
|
+
const subtitleText = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
|
|
66
69
|
return decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/React.createElement(Stack, {
|
|
67
70
|
styles: textContainerStyles,
|
|
68
71
|
className: (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : (_props$styleProps8$cl = _props$styleProps8.classNames) === null || _props$styleProps8$cl === void 0 ? void 0 : _props$styleProps8$cl.textContainerClassName,
|
|
@@ -83,23 +86,23 @@ function TextContainer(props, parentId) {
|
|
|
83
86
|
}
|
|
84
87
|
|
|
85
88
|
function ChatButton(props) {
|
|
86
|
-
var _props$
|
|
89
|
+
var _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$styleProps11;
|
|
87
90
|
|
|
88
|
-
const elementId = ((_props$
|
|
89
|
-
const defaultAriaLabel = ((_props$
|
|
90
|
-
const defaultRole = ((_props$
|
|
91
|
-
const containersDir = ((_props$
|
|
92
|
-
const hideChatButton = ((_props$
|
|
93
|
-
const hideChatIcon = ((_props$
|
|
94
|
-
const hideChatTextContainer = ((_props$
|
|
95
|
-
const hideNotificationBubble = ((_props$
|
|
91
|
+
const elementId = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.id) ?? "lcw-components-chat-button";
|
|
92
|
+
const defaultAriaLabel = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.ariaLabel) ?? "live chat button";
|
|
93
|
+
const defaultRole = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
|
|
94
|
+
const containersDir = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
|
|
95
|
+
const hideChatButton = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
|
|
96
|
+
const hideChatIcon = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
|
|
97
|
+
const hideChatTextContainer = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
|
|
98
|
+
const hideNotificationBubble = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
|
|
96
99
|
const chatButtonGroupStyles = {
|
|
97
100
|
root: Object.assign({}, defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
|
|
98
101
|
};
|
|
99
102
|
const handleInitiateChatClick = useCallback(() => {
|
|
100
|
-
var _props$
|
|
103
|
+
var _props$controlProps17;
|
|
101
104
|
|
|
102
|
-
if ((_props$
|
|
105
|
+
if ((_props$controlProps17 = props.controlProps) !== null && _props$controlProps17 !== void 0 && _props$controlProps17.onClick) {
|
|
103
106
|
const customEvent = {
|
|
104
107
|
elementType: ElementType.ChatButton,
|
|
105
108
|
elementId: elementId,
|
|
@@ -126,7 +129,7 @@ function ChatButton(props) {
|
|
|
126
129
|
onClick: handleInitiateChatClick,
|
|
127
130
|
onKeyDown: handleInputKeyDown,
|
|
128
131
|
"aria-label": defaultAriaLabel
|
|
129
|
-
}, !hideChatIcon && IconContainer(props, elementId), !
|
|
132
|
+
}, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
|
|
130
133
|
}
|
|
131
134
|
|
|
132
135
|
export default ChatButton;
|
|
@@ -14,5 +14,7 @@ export const defaultChatButtonControlProps = {
|
|
|
14
14
|
hideChatTextContainer: false,
|
|
15
15
|
hideChatSubtitle: false,
|
|
16
16
|
hideChatTitle: false,
|
|
17
|
-
hideNotificationBubble: true
|
|
17
|
+
hideNotificationBubble: true,
|
|
18
|
+
unreadMessageString: "new messages",
|
|
19
|
+
largeUnreadMessageString: "99+"
|
|
18
20
|
};
|
package/lib/esm/index.js
CHANGED
|
@@ -12,6 +12,7 @@ export { default as PostChatSurveyPane } from "./components/postchatsurveypane/P
|
|
|
12
12
|
export { encodeComponentString } from "./common/encodeComponentString";
|
|
13
13
|
export { decodeComponentString } from "./common/decodeComponentString";
|
|
14
14
|
export { BroadcastService } from "./services/BroadcastService";
|
|
15
|
+
export { BroadcastServiceInitialize } from "./services/BroadcastService";
|
|
15
16
|
export { ElementType } from "./common/Constants";
|
|
16
17
|
export { default as CallingContainer } from "./components/callingcontainer/CallingContainer";
|
|
17
18
|
export { default as CurrentCall } from "./components/callingcontainer/subcomponents/CurrentCall/CurrentCall";
|
|
@@ -1,15 +1,37 @@
|
|
|
1
1
|
import { Subject } from "rxjs";
|
|
2
2
|
import { filter } from "rxjs/operators";
|
|
3
3
|
import { BroadcastChannel } from "broadcast-channel";
|
|
4
|
-
|
|
5
|
-
const newMessage = new Subject();
|
|
6
|
-
const pubChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
|
|
7
|
-
const subChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4
|
+
const newMessage = new Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
5
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
6
|
+
const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
7
|
+
|
|
8
|
+
const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
9
|
+
|
|
10
|
+
let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
|
+
|
|
12
|
+
let subChannel;
|
|
13
|
+
export const BroadcastServiceInitialize = channelName => {
|
|
14
|
+
if (broadcastServicePubList[channelName]) {
|
|
15
|
+
pubChannel = broadcastServicePubList[channelName];
|
|
16
|
+
} else {
|
|
17
|
+
const newPubChannel = new BroadcastChannel(channelName);
|
|
18
|
+
broadcastServicePubList[channelName] = newPubChannel;
|
|
19
|
+
pubChannel = newPubChannel;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (broadcastServiceSubList[channelName]) {
|
|
23
|
+
subChannel = broadcastServiceSubList[channelName];
|
|
24
|
+
} else {
|
|
25
|
+
const newSubChannel = new BroadcastChannel(channelName);
|
|
26
|
+
broadcastServiceSubList[channelName] = newSubChannel;
|
|
27
|
+
subChannel = newSubChannel;
|
|
28
|
+
} // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12
29
|
|
|
30
|
+
|
|
31
|
+
subChannel.onmessage = message => {
|
|
32
|
+
newMessage.next(message);
|
|
33
|
+
};
|
|
34
|
+
};
|
|
13
35
|
export const BroadcastService = {
|
|
14
36
|
//broadcast a message
|
|
15
37
|
postMessage: message => {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const AccessibilityBrightnessRatio = 1.2;
|
|
2
|
-
export declare const
|
|
3
|
+
export declare const HiddenTextStyles: React.CSSProperties;
|
|
3
4
|
export declare const KeyCodes: {
|
|
4
5
|
new (): {};
|
|
5
6
|
readonly ENTER: "Enter";
|
package/lib/types/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export { default as PostChatSurveyPane } from "./components/postchatsurveypane/P
|
|
|
12
12
|
export { encodeComponentString } from "./common/encodeComponentString";
|
|
13
13
|
export { decodeComponentString } from "./common/decodeComponentString";
|
|
14
14
|
export { BroadcastService } from "./services/BroadcastService";
|
|
15
|
+
export { BroadcastServiceInitialize } from "./services/BroadcastService";
|
|
15
16
|
export { ElementType } from "./common/Constants";
|
|
16
17
|
export { default as CallingContainer } from "./components/callingcontainer/CallingContainer";
|
|
17
18
|
export { default as CurrentCall } from "./components/callingcontainer/subcomponents/CurrentCall/CurrentCall";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Subject } from "rxjs";
|
|
2
2
|
import { ICustomEvent } from "../interfaces/ICustomEvent";
|
|
3
|
+
export declare const BroadcastServiceInitialize: (channelName: string) => void;
|
|
3
4
|
export declare const BroadcastService: {
|
|
4
5
|
postMessage: (message: ICustomEvent) => void;
|
|
5
6
|
getMessage: (message: ICustomEvent) => import("rxjs").Observable<ICustomEvent>;
|
package/package.json
CHANGED