@microsoft/omnichannel-chat-components 0.1.0-main.fc27009 → 1.0.1-main.57b83f8

package/lib/esm/components/prechatsurveypane/common/presetThreeProps/presetThreePreChatSurveyPaneControlProps.js

@@ -1,5 +1,5 @@
 export const presetThreePreChatSurveyPaneControlProps = {
-  id: "oc-lcw-prechatsurveypane-preset3",
+  id: "lcw-prechat-survey-pane-preset3",
   dir: "auto",
   hidePreChatSurveyPane: false,
   adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#C3F60F\"}},\"backgroundColor\":\"#6A1E7A\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",

package/lib/esm/components/prechatsurveypane/common/presetTwoProps/presetTwoPreChatSurveyPaneControlProps.js

@@ -1,5 +1,5 @@
 export const presetTwoPreChatSurveyPaneControlProps = {
-  id: "oc-lcw-prechatsurveypane-preset2",
+  id: "lcw-prechat-survey-pane-preset2",
   dir: "auto",
   hidePreChatSurveyPane: false,
   adaptiveCardHostConfig: "{\"fontFamily\":\"Segoe UI, Helvetica Neue, sans-serif\",\"containerStyles\":{\"default\":{\"foregroundColors\":{\"default\":{\"default\":\"#000000\"}},\"backgroundColor\":\"#FFFFFF\"}},\"actions\":{\"actionsOrientation\":\"Vertical\",\"actionAlignment\":\"stretch\"}}",

package/lib/esm/components/prechatsurveypane/interfaces/IPreChatSurveyPaneElementStyles.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/components/proactivechatpane/ProactiveChatPane.js

@@ -1,13 +1,14 @@
-import { IconButton, Label, Stack } from "@fluentui/react";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { Label, Stack } from "@fluentui/react";
 import React, { useCallback } from "react";
 import { BroadcastService } from "../../services/BroadcastService";
 import { DefaultButton } from "@fluentui/react/lib/Button";
+import CloseButton from "../common/subcomponents/CloseButton";
 import { KeyCodes } from "../../common/Constants";
 import { decodeComponentString } from "../../common/decodeComponentString";
 import { defaultProactiveChatPaneBodyContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneBodyContainerStyles";
 import { defaultProactiveChatPaneBodyTitleStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneBodyTitleStyles";
-import { defaultProactiveChatPaneCloseButtonHoveredStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonHoveredStyles";
-import { defaultProactiveChatPaneCloseButtonStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles";
 import { defaultProactiveChatPaneControlProps } from "./common/default/defaultProps/defaultProactiveChatPaneControlProps";
 import { defaultProactiveChatPaneGeneralStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneGeneralStyles";
 import { defaultProactiveChatPaneHeaderContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneHeaderContainerStyles";
@@ -17,9 +18,10 @@ import { defaultProactiveChatPaneSubtitleStyles } from "./common/default/default
 import { defaultProactiveChatPaneTextContainerStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneTextContainerStyles";
 import { defaultProactiveChatPaneTitleStyles } from "./common/default/defaultStyles/defaultProactiveChatPaneTitleStyles";
 import { generateEventName } from "../../common/utils";
+import { defaultProactiveChatPaneProps } from "./common/default/defaultProps/defaultProactiveChatPaneProps";
 
 function ProactiveChatPane(props) {
-  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$styleProps13, _props$controlProps6, _props$styleProps14, _props$styleProps14$c, _props$controlProps7, _props$controlProps8, _props$styleProps15, _props$styleProps15$c, _props$styleProps16, _props$styleProps16$c, _props$controlProps9, _props$componentOverr, _props$styleProps17, _props$styleProps17$c, _props$controlProps10, _props$controlProps11, _props$componentOverr2, _props$styleProps18, _props$styleProps18$c, _props$controlProps12, _props$controlProps13, _props$componentOverr3, _props$styleProps19, _props$styleProps19$c, _props$controlProps14, _props$controlProps15, _props$styleProps20, _props$styleProps20$c, _props$controlProps16, _props$componentOverr4, _props$styleProps21, _props$styleProps21$c, _props$controlProps17, _props$controlProps18, _props$componentOverr5, _props$styleProps22, _props$styleProps22$c, _props$controlProps19, _props$controlProps20;
+  var _props$controlProps, _defaultProactiveChat, _props$controlProps6, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _defaultProactiveChat2, _props$styleProps6, _defaultProactiveChat3, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps10, _props$styleProps11, _props$styleProps12, _props$controlProps7, _props$styleProps13, _props$styleProps13$c, _props$controlProps8, _props$controlProps9, _props$styleProps14, _props$styleProps14$c, _props$styleProps15, _props$styleProps15$c, _props$controlProps10, _props$componentOverr, _props$styleProps16, _props$styleProps16$c, _props$controlProps11, _props$controlProps12, _props$componentOverr2, _props$styleProps17, _props$styleProps17$c, _props$controlProps13, _props$controlProps14, _props$componentOverr3, _props$styleProps18, _props$styleProps18$c, _props$controlProps15, _props$styleProps19, _props$styleProps19$c, _props$controlProps16, _props$componentOverr4, _props$styleProps20, _props$styleProps20$c, _props$controlProps17, _props$controlProps18, _props$componentOverr5, _props$styleProps21, _props$styleProps21$c, _props$controlProps19, _props$controlProps20;
 
   const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultProactiveChatPaneControlProps.id;
 
@@ -68,6 +70,7 @@ function ProactiveChatPane(props) {
       (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onStart();
     }
   }, []);
+  const closeButtonProps = Object.assign({}, (_defaultProactiveChat = defaultProactiveChatPaneProps.controlProps) === null || _defaultProactiveChat === void 0 ? void 0 : _defaultProactiveChat.closeButtonProps, (_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.closeButtonProps);
   const containerStyles = {
     root: Object.assign({}, defaultProactiveChatPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
   };
@@ -83,71 +86,67 @@ function ProactiveChatPane(props) {
   const subtitleStyles = {
     root: Object.assign({}, defaultProactiveChatPaneSubtitleStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.subtitleStyleProps)
   };
-  const closeButtonStyles = {
-    root: Object.assign({}, defaultProactiveChatPaneCloseButtonStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonStyleProps),
-    rootHovered: Object.assign({}, defaultProactiveChatPaneCloseButtonHoveredStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps),
-    rootPressed: Object.assign({}, defaultProactiveChatPaneCloseButtonHoveredStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.closeButtonHoveredStyleProps)
-  };
+  const closeButtonStyles = Object.assign({}, (_defaultProactiveChat2 = defaultProactiveChatPaneProps.styleProps) === null || _defaultProactiveChat2 === void 0 ? void 0 : _defaultProactiveChat2.closeButtonStyleProps, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.closeButtonStyleProps);
+  const closeButtonHoverStyles = Object.assign({}, (_defaultProactiveChat3 = defaultProactiveChatPaneProps.styleProps) === null || _defaultProactiveChat3 === void 0 ? void 0 : _defaultProactiveChat3.closeButtonHoveredStyleProps, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.closeButtonHoveredStyleProps);
   const bodyContainerStyles = {
-    root: Object.assign({}, defaultProactiveChatPaneBodyContainerStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.bodyContainerStyleProps)
+    root: Object.assign({}, defaultProactiveChatPaneBodyContainerStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.bodyContainerStyleProps)
   };
   const bodyTitleStyles = {
-    root: Object.assign({}, defaultProactiveChatPaneBodyTitleStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.bodyTitleStyleProps)
+    root: Object.assign({}, defaultProactiveChatPaneBodyTitleStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.bodyTitleStyleProps)
   };
   const startButtonStyles = {
-    root: Object.assign({}, defaultProactiveChatPaneStartButtonStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.startButtonStyleProps),
-    rootHovered: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.startButtonHoveredStyleProps),
-    rootPressed: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.startButtonHoveredStyleProps)
+    root: Object.assign({}, defaultProactiveChatPaneStartButtonStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.startButtonStyleProps),
+    rootHovered: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.startButtonHoveredStyleProps),
+    rootPressed: Object.assign({}, defaultProactiveChatPaneStartButtonHoveredStyles, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.startButtonHoveredStyleProps)
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideProactiveChatPane) && /*#__PURE__*/React.createElement(Stack, {
-    className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.containerClassName,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps7 = props.controlProps) !== null && _props$controlProps7 !== void 0 && _props$controlProps7.hideProactiveChatPane) && /*#__PURE__*/React.createElement(Stack, {
+    className: (_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 ? void 0 : (_props$styleProps13$c = _props$styleProps13.classNames) === null || _props$styleProps13$c === void 0 ? void 0 : _props$styleProps13$c.containerClassName,
     id: elementId,
     tabIndex: -1,
     onKeyDown: handleEscKeyDown,
-    dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || defaultProactiveChatPaneControlProps.dir,
-    "aria-label": ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.proactiveChatPaneAriaLabel) || defaultProactiveChatPaneControlProps.proactiveChatPaneAriaLabel,
+    dir: ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) || defaultProactiveChatPaneControlProps.dir,
+    "aria-label": ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.proactiveChatPaneAriaLabel) || defaultProactiveChatPaneControlProps.proactiveChatPaneAriaLabel,
     styles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     horizontal: true,
-    className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.headerContainerClassName,
+    className: (_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 ? void 0 : (_props$styleProps14$c = _props$styleProps14.classNames) === null || _props$styleProps14$c === void 0 ? void 0 : _props$styleProps14$c.headerContainerClassName,
     styles: headerContainerStyles,
     tabIndex: -1,
     id: elementId + "-headercontainer"
   }, /*#__PURE__*/React.createElement(Stack, {
-    className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.textContainerClassName,
+    className: (_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 ? void 0 : (_props$styleProps15$c = _props$styleProps15.classNames) === null || _props$styleProps15$c === void 0 ? void 0 : _props$styleProps15$c.textContainerClassName,
     styles: textContainerStyles,
     tabIndex: -1,
     id: elementId + "-textcontainer"
-  }, !((_props$controlProps9 = props.controlProps) !== null && _props$controlProps9 !== void 0 && _props$controlProps9.hideTitle) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/React.createElement(Label, {
-    className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.titleClassName,
+  }, !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideTitle) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/React.createElement(Label, {
+    className: (_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 ? void 0 : (_props$styleProps16$c = _props$styleProps16.classNames) === null || _props$styleProps16$c === void 0 ? void 0 : _props$styleProps16$c.titleClassName,
     styles: titleStyles,
     tabIndex: -1,
     id: elementId + "-title"
-  }, ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.titleText) || defaultProactiveChatPaneControlProps.titleText)), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideSubtitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/React.createElement(Label, {
-    className: (_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 ? void 0 : (_props$styleProps18$c = _props$styleProps18.classNames) === null || _props$styleProps18$c === void 0 ? void 0 : _props$styleProps18$c.subtitleClassName,
+  }, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.titleText) || defaultProactiveChatPaneControlProps.titleText)), !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hideSubtitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/React.createElement(Label, {
+    className: (_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 ? void 0 : (_props$styleProps17$c = _props$styleProps17.classNames) === null || _props$styleProps17$c === void 0 ? void 0 : _props$styleProps17$c.subtitleClassName,
     styles: subtitleStyles,
     tabIndex: -1,
     id: elementId + "-subtitle"
-  }, ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.subtitleText) || defaultProactiveChatPaneControlProps.subtitleText))), !((_props$controlProps13 = props.controlProps) !== null && _props$controlProps13 !== void 0 && _props$controlProps13.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(IconButton, {
-    className: (_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 ? void 0 : (_props$styleProps19$c = _props$styleProps19.classNames) === null || _props$styleProps19$c === void 0 ? void 0 : _props$styleProps19$c.closeButtonClassName,
-    styles: closeButtonStyles,
-    tabIndex: 0,
+  }, ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.subtitleText) || defaultProactiveChatPaneControlProps.subtitleText))), !((_props$controlProps14 = props.controlProps) !== null && _props$controlProps14 !== void 0 && _props$controlProps14.hideCloseButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(CloseButton, _extends({}, closeButtonProps, {
+    className: (_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 ? void 0 : (_props$styleProps18$c = _props$styleProps18.classNames) === null || _props$styleProps18$c === void 0 ? void 0 : _props$styleProps18$c.closeButtonClassName,
     onClick: handleCloseClick,
-    id: elementId + "-closebutton",
-    "aria-label": ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.closeButtonAriaLabel) || defaultProactiveChatPaneControlProps.closeButtonAriaLabel
-  }))), /*#__PURE__*/React.createElement(Stack, {
+    styles: closeButtonStyles,
+    hoverStyles: closeButtonHoverStyles,
+    id: elementId + "-closebutton"
+  })))), /*#__PURE__*/React.createElement(Stack, {
     horizontal: ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.isBodyContainerHorizantal) || defaultProactiveChatPaneControlProps.isBodyContainerHorizantal,
-    className: (_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 ? void 0 : (_props$styleProps20$c = _props$styleProps20.classNames) === null || _props$styleProps20$c === void 0 ? void 0 : _props$styleProps20$c.bodyContainerClassName,
+    className: (_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 ? void 0 : (_props$styleProps19$c = _props$styleProps19.classNames) === null || _props$styleProps19$c === void 0 ? void 0 : _props$styleProps19$c.bodyContainerClassName,
     styles: bodyContainerStyles,
     tabIndex: -1,
     id: elementId + "-bodycontainer"
   }, !((_props$controlProps16 = props.controlProps) !== null && _props$controlProps16 !== void 0 && _props$controlProps16.hideBodyTitle) && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.bodyTitle) || /*#__PURE__*/React.createElement(Label, {
-    className: (_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 ? void 0 : (_props$styleProps21$c = _props$styleProps21.classNames) === null || _props$styleProps21$c === void 0 ? void 0 : _props$styleProps21$c.bodyTitleClassName,
+    className: (_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 ? void 0 : (_props$styleProps20$c = _props$styleProps20.classNames) === null || _props$styleProps20$c === void 0 ? void 0 : _props$styleProps20$c.bodyTitleClassName,
     styles: bodyTitleStyles,
     tabIndex: -1,
     id: elementId + "-bodytitle"
   }, ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.bodyTitleText) || defaultProactiveChatPaneControlProps.bodyTitleText)), !((_props$controlProps18 = props.controlProps) !== null && _props$controlProps18 !== void 0 && _props$controlProps18.hideStartButton) && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.startButton) || /*#__PURE__*/React.createElement(DefaultButton, {
-    className: (_props$styleProps22 = props.styleProps) === null || _props$styleProps22 === void 0 ? void 0 : (_props$styleProps22$c = _props$styleProps22.classNames) === null || _props$styleProps22$c === void 0 ? void 0 : _props$styleProps22$c.startButtonClassName,
+    className: (_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 ? void 0 : (_props$styleProps21$c = _props$styleProps21.classNames) === null || _props$styleProps21$c === void 0 ? void 0 : _props$styleProps21$c.startButtonClassName,
     styles: startButtonStyles,
     tabIndex: 0,
     text: ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.startButtonText) || defaultProactiveChatPaneControlProps.startButtonText,

package/lib/esm/components/proactivechatpane/common/default/defaultProps/defaultProactiveChatPaneControlProps.js

@@ -1,20 +1,25 @@
+import { AriaLabels, ButtonTypes, IconNames, Ids, Texts } from "../../../../../common/Constants";
 export const defaultProactiveChatPaneControlProps = {
-  id: "oc-lcw-proactivechat",
+  id: Ids.DefaultProactiveChatPaneId,
   dir: "ltr",
   hideProactiveChatPane: false,
-  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  proactiveChatPaneAriaLabel: AriaLabels.ProactiveChatPane,
   hideTitle: false,
-  titleText: "Welcome to",
+  titleText: Texts.ProactiveChatPaneTitleText,
   hideSubtitle: false,
-  subtitleText: "Live chat support!",
+  subtitleText: Texts.ProactiveChatPaneSubtitleText,
   hideCloseButton: false,
-  closeButtonAriaLabel: "Close Button",
+  closeButtonProps: {
+    type: ButtonTypes.Icon,
+    iconName: IconNames.ChromeClose,
+    hideButtonTitle: true
+  },
   isBodyContainerHorizantal: false,
   hideBodyTitle: false,
-  bodyTitleText: "Hi! Have any questions? I am here to help.",
+  bodyTitleText: Texts.ProactiveChatPaneBodyTitleText,
   hideStartButton: false,
-  startButtonText: "Chat Now",
-  startButtonAriaLabel: "Chat Now",
+  startButtonText: Texts.ProactiveChatPaneStartButtonText,
+  startButtonAriaLabel: AriaLabels.ChatNow,
   onClose: function () {
     console.log("on close");
   },

package/lib/esm/components/proactivechatpane/common/default/defaultStyles/defaultProactiveChatPaneCloseButtonStyles.js

@@ -1,13 +1,4 @@
-import { CloseChatButtonIconBase64 } from "../../../../../assets/Icons";
 export const defaultProactiveChatPaneCloseButtonStyles = {
-  backgroundImage: `url(${CloseChatButtonIconBase64})`,
-  backgroundPosition: "center",
-  backgroundRepeat: "no-repeat",
-  color: "#605e5c",
-  cursor: "pointer",
-  height: "14px",
-  lineHeight: "14px",
-  textAlign: "center",
-  width: "14px",
-  zIndex: "inherit"
+  color: "white",
+  fontSize: "12px"
 };

package/lib/esm/components/proactivechatpane/common/presetOne/presetOneProps/presetOneProactiveChatPaneControlProps.js

@@ -1,20 +1,25 @@
+import { AriaLabels, ButtonTypes, IconNames, Texts } from "../../../../../common/Constants";
 export const presetOneProactiveChatPaneControlProps = {
-  id: "oclcw-incomingproactivechat",
+  id: "lcw-incoming-proactive-chat",
   dir: "ltr",
   hideProactiveChatPane: false,
-  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  proactiveChatPaneAriaLabel: AriaLabels.ProactiveChatPane,
   hideTitle: false,
-  titleText: "Welcome to",
+  titleText: Texts.ProactiveChatPaneTitleText,
   hideSubtitle: false,
-  subtitleText: "Live chat support!",
+  subtitleText: Texts.ProactiveChatPaneSubtitleText,
   hideCloseButton: false,
-  closeButtonAriaLabel: "Close Button",
+  closeButtonProps: {
+    type: ButtonTypes.Icon,
+    iconName: IconNames.ChromeClose,
+    hideButtonTitle: true
+  },
   isBodyContainerHorizantal: true,
   hideBodyTitle: false,
-  bodyTitleText: "Hi! Have any questions? I am here to help.",
+  bodyTitleText: Texts.ProactiveChatPaneBodyTitleText,
   hideStartButton: false,
-  startButtonText: "Chat Now",
-  startButtonAriaLabel: "Chat Now",
+  startButtonText: Texts.ProactiveChatPaneStartButtonText,
+  startButtonAriaLabel: AriaLabels.ChatNow,
   onClose: function () {
     console.log("on close");
   },

package/lib/esm/components/proactivechatpane/common/presetThree/presetThreeProps/presetThreeProactiveChatPaneControlProps.js

@@ -1,20 +1,25 @@
+import { AriaLabels, ButtonTypes, IconNames, Texts } from "../../../../../common/Constants";
 export const presetThreeProactiveChatPaneControlProps = {
-  id: "oclcw-incomingproactivechat",
+  id: "lcw-incoming-proactive-chat",
   dir: "ltr",
   hideProactiveChatPane: false,
-  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  proactiveChatPaneAriaLabel: AriaLabels.ProactiveChatPane,
   hideTitle: false,
-  titleText: "Welcome to",
+  titleText: Texts.ProactiveChatPaneTitleText,
   hideSubtitle: false,
-  subtitleText: "Live chat support!",
+  subtitleText: Texts.ProactiveChatPaneSubtitleText,
   hideCloseButton: false,
-  closeButtonAriaLabel: "Close Button",
+  closeButtonProps: {
+    type: ButtonTypes.Icon,
+    iconName: IconNames.ChromeClose,
+    hideButtonTitle: true
+  },
   isBodyContainerHorizantal: false,
   hideBodyTitle: false,
-  bodyTitleText: "Hi! Have any questions? I am here to help.",
+  bodyTitleText: Texts.ProactiveChatPaneBodyTitleText,
   hideStartButton: false,
-  startButtonText: "Chat Now",
-  startButtonAriaLabel: "Chat Now",
+  startButtonText: Texts.ProactiveChatPaneStartButtonText,
+  startButtonAriaLabel: AriaLabels.ChatNow,
   onClose: function () {
     console.log("on close");
   },

package/lib/esm/components/proactivechatpane/common/presetTwo/presetTwoProps/presetTwoProactiveChatPaneControlProps.js

@@ -1,18 +1,19 @@
+import { AriaLabels, Texts } from "../../../../../common/Constants";
 export const presetTwoProactiveChatPaneControlProps = {
-  id: "oclcw-incomingproactivechat",
+  id: "lcw-incoming-proactive-chat",
   dir: "ltr",
   hideProactiveChatPane: false,
-  proactiveChatPaneAriaLabel: "Proactive Chat Pane",
+  proactiveChatPaneAriaLabel: AriaLabels.ProactiveChatPane,
   hideTitle: true,
-  titleText: "Welcome to",
+  titleText: Texts.ProactiveChatPaneTitleText,
   hideSubtitle: false,
-  subtitleText: "Live chat support!",
+  subtitleText: Texts.ProactiveChatPaneSubtitleText,
   hideCloseButton: false,
   isBodyContainerHorizantal: true,
   hideBodyTitle: false,
   hideStartButton: false,
-  startButtonText: "Chat Now",
-  startButtonAriaLabel: "Chat Now",
+  startButtonText: Texts.ProactiveChatPaneStartButtonText,
+  startButtonAriaLabel: AriaLabels.ChatNow,
   onStart: function () {
     console.log("on start");
   }

package/lib/esm/components/reconnectchatpane/ReconnectChatPane.js

@@ -1,7 +1,7 @@
 import { DefaultButton, Icon, Label, Stack } from "@fluentui/react";
 import React, { useCallback } from "react";
 import { BroadcastService } from "../../services/BroadcastService";
-import { ElementType } from "../../common/Constants";
+import { ElementType, EventNames } from "../../common/Constants";
 import { KeyCodes } from "../../common/Constants";
 import { decodeComponentString } from "../../common/decodeComponentString";
 import { defaultReconnectChatPaneButtonGroupStyles } from "./common/default/defaultStyles/defaultReconnectChatPaneButtonGroupStyles";
@@ -29,7 +29,7 @@ function ReconnectChatPane(props) {
       const customEvent = {
         elementType: ElementType.ReconnectChatContinueChatButton,
         elementId: elementId + "-continueconversationbutton",
-        eventName: "OnClick"
+        eventName: EventNames.OnClick
       };
       BroadcastService.postMessage(customEvent);
       (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onContinueChat();
@@ -44,7 +44,7 @@ function ReconnectChatPane(props) {
       const customEvent = {
         elementType: ElementType.ReconnectChatStartNewChatButton,
         elementId: elementId + "-startnewconversationbutton",
-        eventName: "OnClick"
+        eventName: EventNames.OnClick
       };
       BroadcastService.postMessage(customEvent);
       (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onStartNewChat();
@@ -60,7 +60,7 @@ function ReconnectChatPane(props) {
       const customEvent = {
         elementType: ElementType.ReconnectChatPane,
         elementId: elementId,
-        eventName: "OnEscapeKeyDown"
+        eventName: EventNames.OnEscapeKeyDown
       };
       BroadcastService.postMessage(customEvent);
       (_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.onMinimize();

package/lib/esm/components/reconnectchatpane/common/default/defaultProps/defaultReconnectChatPaneControlProps.js

@@ -1,21 +1,22 @@
+import { AriaLabels, Ids, Texts } from "../../../../../common/Constants";
 export const defaultReconnectChatPaneControlProps = {
-  id: "oc-lcw-reconnectchat-pane",
+  id: Ids.DefaultReconnectChatPaneId,
   dir: "ltr",
   hideReconnectChatPane: false,
-  reconnectChatPaneAriaLabel: "Reconnect Chat Pane",
+  reconnectChatPaneAriaLabel: AriaLabels.ReconnectChatPane,
   hideTitle: false,
-  titleText: "Previous session detected",
+  titleText: Texts.ReconnectChatPaneTitleText,
   hideSubtitle: false,
-  subtitleText: "We have detected a previous chat session. Would you like to continue with your previous session?",
+  subtitleText: Texts.ReconnectChatPaneSubtitleText,
   hideIcon: false,
-  iconAriaLabel: "Reconnect Chat Pane Icon",
+  iconAriaLabel: AriaLabels.ReconnectChatPaneIcon,
   isButtonGroupHorizontal: false,
   hideContinueChatButton: false,
-  continueChatButtonText: "Continue conversation",
-  continueChatButtonAriaLabel: "Continue conversation",
+  continueChatButtonText: Texts.ReconnectChatPaneContinueChatButtonText,
+  continueChatButtonAriaLabel: AriaLabels.ContinueConversation,
   hideStartNewChatButton: false,
-  startNewChatButtonText: "Start new conversation",
-  startNewChatButtonAriaLabel: "Start new conversation",
+  startNewChatButtonText: Texts.ReconnectChatPaneStartNewChatButtonText,
+  startNewChatButtonAriaLabel: AriaLabels.StartNewConversation,
   onContinueChat: function () {
     console.log("on continue conversation");
   },

package/lib/esm/components/reconnectchatpane/common/presetThree/presetThreeProps/presetThreeReconnectChatPaneControlProps.js

@@ -1,21 +1,22 @@
+import { AriaLabels, Texts } from "../../../../../common/Constants";
 export const presetThreeReconnectChatPaneControlProps = {
   id: "lcw-components-reconnect-chat-pane",
   dir: "ltr",
   hideReconnectChatPane: false,
-  reconnectChatPaneAriaLabel: "Reconnect Chat Pane",
+  reconnectChatPaneAriaLabel: AriaLabels.ReconnectChatPane,
   hideTitle: false,
-  titleText: "Previous session detected",
+  titleText: Texts.ReconnectChatPaneTitleText,
   hideSubtitle: true,
-  subtitleText: "We have detected a previous chat session. Would you like to continue with your previous session?",
+  subtitleText: Texts.ReconnectChatPaneSubtitleText,
   hideIcon: false,
-  iconAriaLabel: "Reconnect Chat Pane Icon",
+  iconAriaLabel: AriaLabels.ReconnectChatPaneIcon,
   isButtonGroupHorizontal: false,
   hideContinueChatButton: false,
-  continueChatButtonText: "Continue conversation",
-  continueChatButtonAriaLabel: "Continue conversation",
+  continueChatButtonText: Texts.ReconnectChatPaneContinueChatButtonText,
+  continueChatButtonAriaLabel: AriaLabels.ContinueConversation,
   hideStartNewChatButton: true,
-  startNewChatButtonText: "Start new conversation",
-  startNewChatButtonAriaLabel: "Start new conversation",
+  startNewChatButtonText: Texts.ReconnectChatPaneStartNewChatButtonText,
+  startNewChatButtonAriaLabel: AriaLabels.StartNewConversation,
   onContinueChat: function () {
     console.log("on continue conversation");
   },

package/lib/esm/index.js

@@ -12,6 +12,7 @@ export { default as PostChatSurveyPane } from "./components/postchatsurveypane/P
 export { encodeComponentString } from "./common/encodeComponentString";
 export { decodeComponentString } from "./common/decodeComponentString";
 export { BroadcastService } from "./services/BroadcastService";
+export { BroadcastServiceInitialize } from "./services/BroadcastService";
 export { ElementType } from "./common/Constants";
 export { default as CallingContainer } from "./components/callingcontainer/CallingContainer";
 export { default as CurrentCall } from "./components/callingcontainer/subcomponents/CurrentCall/CurrentCall";

package/lib/esm/services/BroadcastService.js

@@ -1,19 +1,45 @@
 import { Subject } from "rxjs";
 import { filter } from "rxjs/operators";
 import { BroadcastChannel } from "broadcast-channel";
-import { BROADCAST_CHANNEL_NAME } from "../common/Constants";
-const newMessage = new Subject();
-const pubChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
-const subChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+const newMessage = new Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-subChannel.onmessage = message => {
-  newMessage.next(message);
-};
+const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+let subChannel;
+export const BroadcastServiceInitialize = channelName => {
+  if (broadcastServicePubList[channelName]) {
+    pubChannel = broadcastServicePubList[channelName];
+  } else {
+    const newPubChannel = new BroadcastChannel(channelName);
+    broadcastServicePubList[channelName] = newPubChannel;
+    pubChannel = newPubChannel;
+  }
+
+  if (broadcastServiceSubList[channelName]) {
+    subChannel = broadcastServiceSubList[channelName];
+  } else {
+    const newSubChannel = new BroadcastChannel(channelName);
+    broadcastServiceSubList[channelName] = newSubChannel;
+    subChannel = newSubChannel;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+
+  subChannel.onmessage = message => {
+    newMessage.next(message);
+  };
+};
 export const BroadcastService = {
   //broadcast a message
   postMessage: message => {
-    pubChannel.postMessage(message);
+    /**
+     * Omit copying methods to prevent 'DataCloneError' in older browsers when passing an object with functions
+     * This exception occurs when an object can't be clone with the 'structured clone algorithm' (used by postMessage)
+     */
+    pubChannel.postMessage(JSON.parse(JSON.stringify(message)));
   },
   getMessage: message => {
     return newMessage.pipe(filter(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));