@microsoft/omnichannel-chat-components 0.1.0-main.91dd060 → 0.1.0-main.a306d8c

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 (21) hide show
  1. package/lib/cjs/common/Constants.js +10 -5
  2. package/lib/cjs/components/chatbutton/ChatButton.js +26 -23
  3. package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
  4. package/lib/cjs/components/common/commandbutton/CommandButton.js +4 -1
  5. package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js +2 -8
  6. package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  7. package/lib/cjs/index.js +6 -0
  8. package/lib/cjs/services/BroadcastService.js +31 -7
  9. package/lib/esm/common/Constants.js +8 -3
  10. package/lib/esm/components/chatbutton/ChatButton.js +26 -23
  11. package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js +3 -1
  12. package/lib/esm/components/common/commandbutton/CommandButton.js +4 -1
  13. package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js +2 -8
  14. package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js +1 -1
  15. package/lib/esm/index.js +1 -0
  16. package/lib/esm/services/BroadcastService.js +29 -7
  17. package/lib/types/common/Constants.d.ts +2 -1
  18. package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts +2 -0
  19. package/lib/types/index.d.ts +1 -0
  20. package/lib/types/services/BroadcastService.d.ts +1 -0
  21. package/package.json +1 -1
package/lib/cjs/common/Constants.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Regex = exports.KeyCodes = exports.ElementType = exports.BROADCAST_CHANNEL_NAME = exports.AccessibilityBrightnessRatio = void 0;
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 BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
18
- exports.BROADCAST_CHANNEL_NAME = BROADCAST_CHANNEL_NAME;
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);
package/lib/cjs/components/chatbutton/ChatButton.js CHANGED
@@ -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.Label, {
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$controlProps2, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
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$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.hideChatTitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTitle);
83
- const hideChatSubtitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatSubtitle) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatSubtitle);
84
- const titleDir = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
85
- const titleText = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.titleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.titleText);
86
- const subtitleDir = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
87
- const subtitleText = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.subtitleText) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.subtitleText);
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$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$styleProps11;
109
-
110
- const elementId = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.id) ?? "lcw-components-chat-button";
111
- const defaultAriaLabel = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.ariaLabel) ?? "live chat button";
112
- const defaultRole = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.role) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.role);
113
- const containersDir = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.dir) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.dir);
114
- const hideChatButton = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.hideChatButton) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatButton);
115
- const hideChatIcon = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatIcon) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatIcon);
116
- const hideChatTextContainer = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatTextContainer) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideChatTextContainer);
117
- const hideNotificationBubble = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideNotificationBubble) ?? (_defaultChatButtonControlProps.defaultChatButtonControlProps === null || _defaultChatButtonControlProps.defaultChatButtonControlProps === void 0 ? void 0 : _defaultChatButtonControlProps.defaultChatButtonControlProps.hideNotificationBubble);
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$controlProps16;
125
+ var _props$controlProps17;
123
126
 
124
- if ((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.onClick) {
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), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
156
+ }, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
154
157
  }
155
158
 
156
159
  var _default = ChatButton;
package/lib/cjs/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -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;
package/lib/cjs/components/common/commandbutton/CommandButton.js CHANGED
@@ -22,7 +22,10 @@ function CommandButton(props) {
22
22
  const iconProp = props.imageIconProps ? {
23
23
  imageProps: props.imageIconProps
24
24
  } : {
25
- iconName: props.iconName
25
+ iconName: props.iconName,
26
+ styles: {
27
+ root: props.styles
28
+ }
26
29
  };
27
30
  const buttonStyles = {
28
31
  root: props.styles,
package/lib/cjs/components/footer/subcomponents/AudioNotificationButton.js CHANGED
@@ -32,18 +32,12 @@ function AudioNotificationButton(props) {
32
32
  const volume0Icon = props.imageToggleIconProps ? {
33
33
  imageProps: props === null || props === void 0 ? void 0 : props.imageToggleIconProps
34
34
  } : {
35
- iconName: (props === null || props === void 0 ? void 0 : props.toggleIconName) ?? "Volume0",
36
- styles: {
37
- root: props.styles
38
- }
35
+ iconName: (props === null || props === void 0 ? void 0 : props.toggleIconName) ?? "Volume0"
39
36
  };
40
37
  const volume3Icon = props.imageIconProps ? {
41
38
  imageProps: props === null || props === void 0 ? void 0 : props.imageIconProps
42
39
  } : {
43
- iconName: (props === null || props === void 0 ? void 0 : props.iconName) ?? "Volume3",
44
- styles: {
45
- root: props.styles
46
- }
40
+ iconName: (props === null || props === void 0 ? void 0 : props.iconName) ?? "Volume3"
47
41
  };
48
42
  const handleOnClick = (0, _react2.useCallback)(() => {
49
43
  setMuted(!muted);
package/lib/cjs/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js CHANGED
@@ -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 #3F75AB",
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 () {
package/lib/cjs/services/BroadcastService.js CHANGED
@@ -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
- var _Constants = require("../common/Constants");
14
+ const newMessage = new _rxjs.Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
15
 
16
- const newMessage = new _rxjs.Subject();
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
- subChannel.onmessage = message => {
21
- newMessage.next(message);
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 => {
package/lib/esm/common/Constants.js CHANGED
@@ -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
- /* App constants*/
8
-
9
- export const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
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;
package/lib/esm/components/chatbutton/ChatButton.js CHANGED
@@ -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(Label, {
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$controlProps2, _props$controlProps3, _props$controlProps4, _props$controlProps5, _props$controlProps6, _props$controlProps7, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
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$controlProps2 = props.controlProps) === null || _props$controlProps2 === void 0 ? void 0 : _props$controlProps2.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
61
- const hideChatSubtitle = ((_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
62
- const titleDir = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
63
- const titleText = ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
64
- const subtitleDir = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
65
- const subtitleText = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
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$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$styleProps11;
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$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.id) ?? "lcw-components-chat-button";
89
- const defaultAriaLabel = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.ariaLabel) ?? "live chat button";
90
- const defaultRole = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
91
- const containersDir = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
92
- const hideChatButton = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
93
- const hideChatIcon = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
94
- const hideChatTextContainer = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
95
- const hideNotificationBubble = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
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$controlProps16;
103
+ var _props$controlProps17;
101
104
 
102
- if ((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.onClick) {
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), !hideChatTextContainer && TextContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId)));
132
+ }, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
130
133
  }
131
134
 
132
135
  export default ChatButton;
package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js CHANGED
@@ -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/components/common/commandbutton/CommandButton.js CHANGED
@@ -8,7 +8,10 @@ function CommandButton(props) {
8
8
  const iconProp = props.imageIconProps ? {
9
9
  imageProps: props.imageIconProps
10
10
  } : {
11
- iconName: props.iconName
11
+ iconName: props.iconName,
12
+ styles: {
13
+ root: props.styles
14
+ }
12
15
  };
13
16
  const buttonStyles = {
14
17
  root: props.styles,
package/lib/esm/components/footer/subcomponents/AudioNotificationButton.js CHANGED
@@ -18,18 +18,12 @@ function AudioNotificationButton(props) {
18
18
  const volume0Icon = props.imageToggleIconProps ? {
19
19
  imageProps: props === null || props === void 0 ? void 0 : props.imageToggleIconProps
20
20
  } : {
21
- iconName: (props === null || props === void 0 ? void 0 : props.toggleIconName) ?? "Volume0",
22
- styles: {
23
- root: props.styles
24
- }
21
+ iconName: (props === null || props === void 0 ? void 0 : props.toggleIconName) ?? "Volume0"
25
22
  };
26
23
  const volume3Icon = props.imageIconProps ? {
27
24
  imageProps: props === null || props === void 0 ? void 0 : props.imageIconProps
28
25
  } : {
29
- iconName: (props === null || props === void 0 ? void 0 : props.iconName) ?? "Volume3",
30
- styles: {
31
- root: props.styles
32
- }
26
+ iconName: (props === null || props === void 0 ? void 0 : props.iconName) ?? "Volume3"
33
27
  };
34
28
  const handleOnClick = useCallback(() => {
35
29
  setMuted(!muted);
package/lib/esm/components/loadingpane/common/defaultProps/defaultStyles/defaultLoadingPaneIconStyles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export const defaultLoadingPaneIconStyles = {
2
2
  borderRadius: "50%",
3
3
  backgroundColor: "#F1F1F1",
4
- boxShadow: "0px 0px 0.5px 7px #3F75AB",
4
+ boxShadow: "0px 0px 0.5px 7px rgba(196, 196, 196, 0.15)",
5
5
  width: "86px",
6
6
  height: "86px",
7
7
  margin: "0px 0px 20px 0px",
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";
package/lib/esm/services/BroadcastService.js CHANGED
@@ -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
- import { BROADCAST_CHANNEL_NAME } from "../common/Constants";
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
- subChannel.onmessage = message => {
10
- newMessage.next(message);
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 => {
package/lib/types/common/Constants.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ /// <reference types="react" />
1
2
  export declare const AccessibilityBrightnessRatio = 1.2;
2
- export declare const BROADCAST_CHANNEL_NAME = "omnichannel_broadcast_channel";
3
+ export declare const HiddenTextStyles: React.CSSProperties;
3
4
  export declare const KeyCodes: {
4
5
  new (): {};
5
6
  readonly ENTER: "Enter";
package/lib/types/components/chatbutton/interfaces/IChatButtonControlProps.d.ts CHANGED
@@ -13,4 +13,6 @@ export interface IChatButtonControlProps {
13
13
  hideChatSubtitle?: boolean;
14
14
  hideChatTitle?: boolean;
15
15
  hideNotificationBubble?: boolean;
16
+ unreadMessageString?: string;
17
+ largeUnreadMessageString?: string;
16
18
  }
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";
package/lib/types/services/BroadcastService.d.ts CHANGED
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/omnichannel-chat-components",
3
- "version": "0.1.0-main.91dd060",
3
+ "version": "0.1.0-main.a306d8c",
4
4
  "description": "Microsoft Omnichannel Chat Components",
5
5
  "main": "lib/cjs/index.js",
6
6
  "types": "lib/types/index.d.ts",