@microsoft/omnichannel-chat-components 0.1.0-1

package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/interfaces/IIncomingCallControlProps.js

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

package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/interfaces/IIncomingCallProps.js

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

package/lib/esm/components/callingcontainer/subcomponents/IncomingCall/interfaces/IIncomingCallStyleProps.js

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

package/lib/esm/components/callingcontainer/subcomponents/Timer/ITimer.js

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

package/lib/esm/components/callingcontainer/subcomponents/Timer/Timer.js

@@ -0,0 +1,22 @@
+import { Label } from "@fluentui/react";
+import React, { useEffect, useState } from "react";
+import { getHours, getMinutes, getSeconds } from "../../../../common/utils";
+
+function Timer(props) {
+  const [time, setTime] = useState(0);
+  const running = true;
+  const timerStyles = {
+    root: props.timerStyles
+  };
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(prevTime => prevTime + 1000);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [running]);
+  return /*#__PURE__*/React.createElement(Label, {
+    styles: timerStyles
+  }, props.showHours && getHours(time) + ":", getMinutes(time), ":", getSeconds(time));
+}
+
+export default Timer;

package/lib/esm/components/chatbutton/ChatButton.js

@@ -0,0 +1,136 @@
+import { Icon, Label, Stack } from "@fluentui/react";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../services/BroadcastService";
+import { ElementType, HiddenTextStyles, KeyCodes } from "../../common/Constants";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { defaultChatButtonControlProps } from "./common/defaultProps/defaultChatButtonControlProps";
+import { defaultChatButtonGeneralStyles } from "./common/defaultStyles/defaultChatButtonGeneralStyles";
+import { defaultChatButtonIconContainerStyles } from "./common/defaultStyles/defaultChatButtonIconContainerStyles";
+import { defaultChatButtonNotificationBubbleStyles } from "./common/defaultStyles/defaultChatButtonNotificationBubbleStyles";
+import { defaultChatButtonSubTitleStyles } from "./common/defaultStyles/defaultChatButtonSubTitleStyles";
+import { defaultChatButtonTextContainerStyles } from "./common/defaultStyles/defaultChatButtonTextContainerStyles";
+import { defaultChatButtonTitleStyles } from "./common/defaultStyles/defaultChatButtonTitleStyles";
+
+function NotificationBubble(props, parentId) {
+  var _props$styleProps, _props$controlProps;
+
+  const notificationBubbleStyles = {
+    root: Object.assign({}, defaultChatButtonNotificationBubbleStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.notificationBubbleStyleProps)
+  };
+  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);
+
+  if (unreadMessageCount !== "0") {
+    var _props$componentOverr, _props$controlProps2, _props$controlProps3, _props$styleProps2, _props$styleProps2$cl, _props$controlProps4, _props$controlProps5;
+
+    return decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.notificationBubble) || /*#__PURE__*/React.createElement(Stack, {
+      "aria-live": "polite",
+      styles: notificationBubbleStyles,
+      "aria-label": (_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.ariaLabelUnreadMessageString ? (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.ariaLabelUnreadMessageString : defaultChatButtonControlProps.ariaLabelUnreadMessageString,
+      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,
+      id: parentId + "-notification-bubble"
+    }, unreadMessageCount, /*#__PURE__*/React.createElement("span", {
+      style: HiddenTextStyles
+    }, (_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.unreadMessageString ? (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.unreadMessageString : defaultChatButtonControlProps.unreadMessageString));
+  }
+
+  return null;
+}
+
+function IconContainer(props, parentId) {
+  var _props$styleProps3, _props$componentOverr2, _props$styleProps4, _props$styleProps4$cl;
+
+  const iconContainerStyles = {
+    root: Object.assign({}, defaultChatButtonIconContainerStyles, (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.iconStyleProps)
+  };
+  return decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.iconContainer) || /*#__PURE__*/React.createElement(Icon, {
+    className: (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : (_props$styleProps4$cl = _props$styleProps4.classNames) === null || _props$styleProps4$cl === void 0 ? void 0 : _props$styleProps4$cl.iconContainerClassName,
+    styles: iconContainerStyles,
+    id: parentId + "-icon-container"
+  });
+}
+
+function TextContainer(props, parentId) {
+  var _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$controlProps6, _props$controlProps7, _props$controlProps8, _props$controlProps9, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$styleProps8, _props$styleProps8$cl, _props$componentOverr4, _props$styleProps9, _props$styleProps9$cl, _props$componentOverr5, _props$styleProps10, _props$styleProps10$c;
+
+  const textContainerStyles = {
+    root: Object.assign({}, defaultChatButtonTextContainerStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.textContainerStyleProps)
+  };
+  const titleStyles = {
+    root: Object.assign({}, defaultChatButtonTitleStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.titleStyleProps)
+  };
+  const subtitleStyles = {
+    root: Object.assign({}, defaultChatButtonSubTitleStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.subtitleStyleProps)
+  };
+  const hideChatTitle = ((_props$controlProps6 = props.controlProps) === null || _props$controlProps6 === void 0 ? void 0 : _props$controlProps6.hideChatTitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTitle);
+  const hideChatSubtitle = ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.hideChatSubtitle) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatSubtitle);
+  const titleDir = ((_props$controlProps8 = props.controlProps) === null || _props$controlProps8 === void 0 ? void 0 : _props$controlProps8.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
+  const titleText = ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.titleText);
+  const subtitleDir = ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
+  const subtitleText = ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.subtitleText) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.subtitleText);
+  return decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.textContainer) || /*#__PURE__*/React.createElement(Stack, {
+    styles: textContainerStyles,
+    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,
+    id: parentId + "-text-container"
+  }, !hideChatTitle && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.title) || /*#__PURE__*/React.createElement(Label, {
+    styles: titleStyles,
+    dir: titleDir,
+    className: (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : (_props$styleProps9$cl = _props$styleProps9.classNames) === null || _props$styleProps9$cl === void 0 ? void 0 : _props$styleProps9$cl.titleClassName,
+    id: parentId + "-title",
+    title: titleText
+  }, titleText)), !hideChatSubtitle && (decodeComponentString((_props$componentOverr5 = props.componentOverrides) === null || _props$componentOverr5 === void 0 ? void 0 : _props$componentOverr5.subtitle) || /*#__PURE__*/React.createElement(Label, {
+    styles: subtitleStyles,
+    dir: subtitleDir,
+    className: (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : (_props$styleProps10$c = _props$styleProps10.classNames) === null || _props$styleProps10$c === void 0 ? void 0 : _props$styleProps10$c.subtitleClassName,
+    id: parentId + "-subtitle",
+    title: subtitleText
+  }, subtitleText)));
+}
+
+function ChatButton(props) {
+  var _props$controlProps12, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$controlProps16, _props$controlProps17, _props$controlProps18, _props$controlProps19, _props$styleProps11;
+
+  const elementId = ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.id) ?? "lcw-components-chat-button";
+  const defaultAriaLabel = ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.ariaLabel) ?? defaultChatButtonControlProps.ariaLabel;
+  const defaultRole = ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.role) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.role);
+  const containersDir = ((_props$controlProps15 = props.controlProps) === null || _props$controlProps15 === void 0 ? void 0 : _props$controlProps15.dir) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.dir);
+  const hideChatButton = ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.hideChatButton) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatButton);
+  const hideChatIcon = ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.hideChatIcon) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatIcon);
+  const hideChatTextContainer = ((_props$controlProps18 = props.controlProps) === null || _props$controlProps18 === void 0 ? void 0 : _props$controlProps18.hideChatTextContainer) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideChatTextContainer);
+  const hideNotificationBubble = ((_props$controlProps19 = props.controlProps) === null || _props$controlProps19 === void 0 ? void 0 : _props$controlProps19.hideNotificationBubble) ?? (defaultChatButtonControlProps === null || defaultChatButtonControlProps === void 0 ? void 0 : defaultChatButtonControlProps.hideNotificationBubble);
+  const chatButtonGroupStyles = {
+    root: Object.assign({}, defaultChatButtonGeneralStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.generalStyleProps)
+  };
+  const handleInitiateChatClick = useCallback(() => {
+    var _props$controlProps20;
+
+    if ((_props$controlProps20 = props.controlProps) !== null && _props$controlProps20 !== void 0 && _props$controlProps20.onClick) {
+      const customEvent = {
+        elementType: ElementType.ChatButton,
+        elementId: elementId,
+        eventName: "OnClick"
+      };
+      BroadcastService.postMessage(customEvent);
+      props.controlProps.onClick();
+    }
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleInputKeyDown = e => {
+    if (e.code === KeyCodes.ENTER || e.code === KeyCodes.SPACE) {
+      handleInitiateChatClick();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !hideChatButton && /*#__PURE__*/React.createElement(Stack, {
+    horizontal: true,
+    id: elementId,
+    dir: containersDir,
+    styles: chatButtonGroupStyles,
+    tabIndex: 0,
+    role: defaultRole,
+    onClick: handleInitiateChatClick,
+    onKeyDown: handleInputKeyDown,
+    "aria-label": defaultAriaLabel
+  }, !hideChatIcon && IconContainer(props, elementId), !hideNotificationBubble && NotificationBubble(props, elementId), !hideChatTextContainer && TextContainer(props, elementId)));
+}
+
+export default ChatButton;

package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonControlProps.js

@@ -0,0 +1,21 @@
+export const defaultChatButtonControlProps = {
+  id: "lcw-components-chat-button",
+  dir: "ltr",
+  role: "button",
+  ariaLabel: "Let's chat We are online",
+  unreadMessageCount: "0",
+  titleText: "Let's Chat!",
+  subtitleText: "We're online.",
+  onClick: function () {
+    console.log("initiate chat");
+  },
+  hideChatButton: false,
+  hideChatIcon: false,
+  hideChatTextContainer: false,
+  hideChatSubtitle: false,
+  hideChatTitle: false,
+  hideNotificationBubble: true,
+  unreadMessageString: "new messages",
+  largeUnreadMessageString: "99+",
+  ariaLabelUnreadMessageString: "you have new messages"
+};

package/lib/esm/components/chatbutton/common/defaultProps/defaultChatButtonProps.js

@@ -0,0 +1,6 @@
+import { defaultChatButtonStyleProps } from "../defaultStyles/defaultChatButtonStyleProps";
+import { defaultChatButtonControlProps } from "./defaultChatButtonControlProps";
+export const defaultChatButtonProps = {
+  controlProps: defaultChatButtonControlProps,
+  styleProps: defaultChatButtonStyleProps
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonGeneralStyles.js

@@ -0,0 +1,25 @@
+export const defaultChatButtonGeneralStyles = {
+  backgroundColor: "#fff",
+  borderColor: "#fff",
+  borderRadius: "100px 100px 100px 99px",
+  borderStyle: "solid",
+  borderWidth: "1px",
+  bottom: "0px",
+  boxShadow: "0 0 4px rgb(102 102 102 / 50%)",
+  cursor: "pointer",
+  display: "flex",
+  height: "60px",
+  margin: "3px 3px 3px 3px",
+  padding: "0px",
+  position: "absolute",
+  right: "0px",
+  selectors: {
+    ":hover": {
+      backgroundColor: "lightgrey"
+    },
+    ":focus": {
+      outline: "dotted 2px #000"
+    }
+  },
+  width: "180px"
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonIconContainerStyles.js

@@ -0,0 +1,18 @@
+import { ModernChatIconBase64 } from "../../../../assets/Icons";
+export const defaultChatButtonIconContainerStyles = {
+  align: "center",
+  backgroundColor: "#315FA2",
+  backgroundImage: `url(${ModernChatIconBase64})`,
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "65% 65%",
+  borderColor: "transparent",
+  borderRadius: "50%",
+  borderStyle: "solid",
+  borderWidth: "1px",
+  display: "flex",
+  height: "60px",
+  justifyContent: "center",
+  margin: "-2px -2px -2px -3px",
+  width: "62px"
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonNotificationBubbleStyles.js

@@ -0,0 +1,16 @@
+export const defaultChatButtonNotificationBubbleStyles = {
+  backgroundColor: "#cc4a31",
+  borderRadius: "50%",
+  color: "#fff",
+  fontFamily: "Segoe UI,Arial,sans-serif",
+  fontSize: "14px",
+  fontStyle: "normal",
+  fontWeight: "bold",
+  lineHeight: "22px",
+  padding: "1px",
+  position: "absolute",
+  textAlign: "center",
+  top: "-5px",
+  minHeight: "24px",
+  minWidth: "24px"
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonStyleProps.js

@@ -0,0 +1,17 @@
+import { defaultChatButtonGeneralStyles } from "./defaultChatButtonGeneralStyles";
+import { defaultChatButtonIconContainerStyles } from "./defaultChatButtonIconContainerStyles";
+import { defaultChatButtonNotificationBubbleStyles } from "./defaultChatButtonNotificationBubbleStyles";
+import { defaultChatButtonSubTitleStyles } from "./defaultChatButtonSubTitleStyles";
+import { defaultChatButtonTitleStyles } from "./defaultChatButtonTitleStyles";
+import { defaultChatButtonTextContainerStyles } from "./defaultChatButtonTextContainerStyles";
+export const defaultChatButtonStyleProps = {
+  generalStyleProps: defaultChatButtonGeneralStyles,
+  // Icon
+  iconStyleProps: defaultChatButtonIconContainerStyles,
+  //Notification Bubble
+  notificationBubbleStyleProps: defaultChatButtonNotificationBubbleStyles,
+  //Text Container having title and subtitle
+  textContainerStyleProps: defaultChatButtonTextContainerStyles,
+  titleStyleProps: defaultChatButtonTitleStyles,
+  subtitleStyleProps: defaultChatButtonSubTitleStyles
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonSubTitleStyles.js

@@ -0,0 +1,15 @@
+export const defaultChatButtonSubTitleStyles = {
+  alignItems: "center",
+  color: "#666",
+  cursor: "pointer",
+  display: "block",
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontSize: "12px",
+  fontWeight: "200",
+  margin: "0px 14px 0px 14px",
+  overflow: "hidden",
+  padding: "0px",
+  textOverflow: "ellipsis !important",
+  whiteSpace: "nowrap",
+  width: "90px"
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonTextContainerStyles.js

@@ -0,0 +1,5 @@
+export const defaultChatButtonTextContainerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center"
+};

package/lib/esm/components/chatbutton/common/defaultStyles/defaultChatButtonTitleStyles.js

@@ -0,0 +1,16 @@
+export const defaultChatButtonTitleStyles = {
+  color: "#262626",
+  cursor: "pointer",
+  display: "block",
+  fontFamily: "'Segoe UI',Arial,sans-serif",
+  fontSize: "16px",
+  fontWeight: "bold",
+  lineHeight: "19px",
+  height: "22px",
+  margin: "0px 14px 0px 14px",
+  overflow: "hidden",
+  padding: "0px",
+  textOverflow: "ellipsis !important",
+  whiteSpace: "nowrap",
+  width: "90px"
+};

package/lib/esm/components/chatbutton/interfaces/IChatButtonClassNames.js

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

package/lib/esm/components/chatbutton/interfaces/IChatButtonComponentOverrides.js

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

package/lib/esm/components/chatbutton/interfaces/IChatButtonControlProps.js

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

package/lib/esm/components/chatbutton/interfaces/IChatButtonProps.js

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

package/lib/esm/components/chatbutton/interfaces/IChatButtonStyleProps.js

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

package/lib/esm/components/common/commandbutton/CommandButton.js

@@ -0,0 +1,78 @@
+import { DefaultButton, IconButton } from "@fluentui/react";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../../services/BroadcastService";
+import { ElementType } from "../../../common/Constants";
+
+function CommandButton(props) {
+  var _props$hoverStyles, _props$hoverStyles2, _props$focusStyles;
+
+  //imageIconProps > iconName
+  const iconProp = props.imageIconProps ? {
+    imageProps: props.imageIconProps
+  } : {
+    iconName: props.iconName
+  };
+  let iconStyles = {};
+
+  if (props.type === "icon") {
+    var _props$styles;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    iconStyles = { ...(props === null || props === void 0 ? void 0 : (_props$styles = props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.icon)
+    };
+  }
+
+  const buttonStyles = {
+    icon: { ...iconStyles
+    },
+    root: {
+      selectors: {
+        ":hover .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles = props.hoverStyles) === null || _props$hoverStyles === void 0 ? void 0 : _props$hoverStyles.icon)
+        },
+        ":active .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ...(props === null || props === void 0 ? void 0 : (_props$hoverStyles2 = props.hoverStyles) === null || _props$hoverStyles2 === void 0 ? void 0 : _props$hoverStyles2.icon)
+        },
+        ":focus .ms-Button-icon": { // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ...(props === null || props === void 0 ? void 0 : (_props$focusStyles = props.focusStyles) === null || _props$focusStyles === void 0 ? void 0 : _props$focusStyles.icon)
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...(props === null || props === void 0 ? void 0 : props.styles)
+    },
+    rootHovered: props.hoverStyles,
+    rootFocused: props.focusStyles,
+    rootPressed: props.hoverStyles
+  };
+  const handleOnClick = useCallback(() => {
+    if (props !== null && props !== void 0 && props.onClick) {
+      const customEvent = props.customEvent ?? {
+        eventName: "onClick",
+        elementType: ElementType.Custom,
+        elementId: props === null || props === void 0 ? void 0 : props.id
+      };
+      BroadcastService.postMessage(customEvent);
+      props === null || props === void 0 ? void 0 : props.onClick();
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.type === "text" && /*#__PURE__*/React.createElement(DefaultButton, {
+    id: props.id,
+    text: props.text,
+    ariaLabel: props.ariaLabel,
+    onClick: handleOnClick,
+    disabled: props.disabled,
+    className: props.className,
+    styles: buttonStyles
+  }), props.type === "icon" && /*#__PURE__*/React.createElement(IconButton, {
+    id: props.id,
+    iconProps: iconProp,
+    title: props.hideButtonTitle ? undefined : props.ariaLabel,
+    ariaLabel: props.ariaLabel,
+    disabled: props.disabled,
+    styles: buttonStyles,
+    onClick: handleOnClick,
+    className: props.className
+  }));
+}
+
+export default CommandButton;

package/lib/esm/components/common/interfaces/ICommandButtonControlProps.js

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

package/lib/esm/components/common/interfaces/ICommandButtonProps.js

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

package/lib/esm/components/common/interfaces/IImageControlProps.js

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

package/lib/esm/components/common/interfaces/ILabelControlProps.js

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

package/lib/esm/components/common/subcomponents/CloseButton.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { ElementType } from "../../../common/Constants";
+import CommandButton from "../commandbutton/CommandButton";
+
+function CloseButton(props) {
+  const {
+    type
+  } = props;
+  const customEvent = {
+    elementType: ElementType.CloseButton,
+    elementId: props === null || props === void 0 ? void 0 : props.id,
+    eventName: "OnClick"
+  };
+  return /*#__PURE__*/React.createElement(CommandButton, {
+    id: props === null || props === void 0 ? void 0 : props.id,
+    type: type,
+    text: props.text ?? "Close",
+    styles: props.styles,
+    hoverStyles: props.hoverStyles,
+    focusStyles: props.focusStyles,
+    iconName: props.iconName ?? "ChromeClose",
+    imageIconProps: props.imageIconProps,
+    onClick: props.onClick,
+    ariaLabel: props.ariaLabel ?? "Close",
+    className: props.className,
+    customEvent: customEvent,
+    hideButtonTitle: props.hideButtonTitle
+  });
+}
+
+export default CloseButton;

package/lib/esm/components/confirmationpane/ConfirmationPane.js

@@ -0,0 +1,124 @@
+import { DefaultButton, PrimaryButton } from "@fluentui/react/lib/Button";
+import { Label, Stack } from "@fluentui/react";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../services/BroadcastService";
+import { ElementType, KeyCodes } from "../../common/Constants";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { defaultConfirmationPaneButtonGroupStyles } from "./common/defaultStyles/defaultConfirmationPaneButtonGroupStyles";
+import { defaultConfirmationPaneCancelButtonHoveredStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonHoveredStyles";
+import { defaultConfirmationPaneCancelButtonStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonStyles";
+import { defaultConfirmationPaneConfirmButtonHoveredStyles } from "./common/defaultStyles/defaultConfirmationPaneConfirmButtonHoveredStyles";
+import { defaultConfirmationPaneConfirmButtonStyles } from "./common/defaultStyles/defaultConfirmationPaneConfirmButtonStyles";
+import { defaultConfirmationPaneControlProps } from "./common/defaultProps/defaultConfirmationPaneControlProps";
+import { defaultConfirmationPaneGeneralStyles } from "./common/defaultStyles/defaultConfirmationPaneGeneralStyles";
+import { defaultConfirmationPaneSubtitleStyles } from "./common/defaultStyles/defaultConfirmationPaneSubtitleStyles";
+import { defaultConfirmationPaneTitleStyles } from "./common/defaultStyles/defaultConfirmationPaneTitleStyles";
+import { defaultConfirmationPaneConfirmButtonFocusedStyles } from "./common/defaultStyles/defaultConfirmationPaneConfirmButtonFocusedStyles";
+import { defaultConfirmationPaneCancelButtonFocusedStyles } from "./common/defaultStyles/defaultConfirmationPaneCancelButtonFocusedStyles";
+
+function ConfirmationPane(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$controlProps6, _props$controlProps7, _props$controlProps8, _props$componentOverr, _props$styleProps13, _props$styleProps13$c, _props$controlProps9, _props$controlProps10, _props$componentOverr2, _props$styleProps14, _props$styleProps14$c, _props$controlProps11, _props$styleProps15, _props$styleProps15$c, _props$controlProps12, _props$componentOverr3, _props$styleProps16, _props$styleProps16$c, _props$controlProps13, _props$controlProps14, _props$controlProps15, _props$componentOverr4, _props$styleProps17, _props$styleProps17$c, _props$controlProps16, _props$controlProps17;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? defaultConfirmationPaneControlProps.id;
+  const handleConfirmClick = useCallback(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onConfirm) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: ElementType.ConfirmationPaneConfirmButton,
+        elementId: elementId + "-confirmbutton",
+        eventName: "OnClick"
+      };
+      BroadcastService.postMessage(customEvent);
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onConfirm();
+    }
+  }, []);
+  const handleCancelClick = useCallback(() => {
+    var _props$controlProps4;
+
+    if ((_props$controlProps4 = props.controlProps) !== null && _props$controlProps4 !== void 0 && _props$controlProps4.onCancel) {
+      var _props$controlProps5;
+
+      const customEvent = {
+        elementType: ElementType.ConfirmationPaneCancelButton,
+        elementId: elementId + "-cancelbutton",
+        eventName: "OnClick"
+      };
+      BroadcastService.postMessage(customEvent);
+      (_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.onCancel();
+    }
+  }, []); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+  const handleEscKeyDown = useCallback(e => {
+    if (e.code === KeyCodes.ESCAPE) {
+      handleCancelClick();
+    }
+  }, []);
+  const containerStyles = {
+    root: Object.assign({}, defaultConfirmationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps)
+  };
+  const titleStyles = {
+    root: Object.assign({}, defaultConfirmationPaneTitleStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const subtitleStyles = {
+    root: Object.assign({}, defaultConfirmationPaneSubtitleStyles, (_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.subtitleStyleProps)
+  };
+  const buttonGroupStyles = {
+    root: Object.assign({}, defaultConfirmationPaneButtonGroupStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.buttonGroupStyleProps)
+  };
+  const confirmButtonStyles = {
+    root: Object.assign({}, defaultConfirmationPaneConfirmButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.confirmButtonStyleProps),
+    rootHovered: Object.assign({}, defaultConfirmationPaneConfirmButtonHoveredStyles, (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : _props$styleProps6.confirmButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, defaultConfirmationPaneConfirmButtonFocusedStyles, (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : _props$styleProps7.confirmButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, defaultConfirmationPaneConfirmButtonHoveredStyles, (_props$styleProps8 = props.styleProps) === null || _props$styleProps8 === void 0 ? void 0 : _props$styleProps8.confirmButtonHoveredStyleProps)
+  };
+  const cancelButtonStyles = {
+    root: Object.assign({}, defaultConfirmationPaneCancelButtonStyles, (_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.cancelButtonStyleProps),
+    rootHovered: Object.assign({}, defaultConfirmationPaneCancelButtonHoveredStyles, (_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.cancelButtonHoveredStyleProps),
+    rootFocused: Object.assign({}, defaultConfirmationPaneCancelButtonFocusedStyles, (_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.cancelButtonFocusedStyleProps),
+    rootPressed: Object.assign({}, defaultConfirmationPaneCancelButtonHoveredStyles, (_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.cancelButtonHoveredStyleProps)
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideConfirmationPane) && /*#__PURE__*/React.createElement(Stack, {
+    id: elementId,
+    onKeyDown: handleEscKeyDown,
+    tabIndex: -1,
+    dir: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.dir) || defaultConfirmationPaneControlProps.dir,
+    styles: containerStyles,
+    role: "dialog",
+    "aria-labelledby": elementId + "-title",
+    "aria-describedby": elementId + "-subtitle"
+  }, !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.title) || /*#__PURE__*/React.createElement(Label, {
+    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.titleClassName,
+    styles: titleStyles,
+    tabIndex: -1,
+    id: elementId + "-title"
+  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || defaultConfirmationPaneControlProps.titleText)), !((_props$controlProps10 = props.controlProps) !== null && _props$controlProps10 !== void 0 && _props$controlProps10.hideSubtitle) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.subtitle) || /*#__PURE__*/React.createElement(Label, {
+    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.subtitleClassName,
+    styles: subtitleStyles,
+    tabIndex: -1,
+    id: elementId + "-subtitle"
+  }, ((_props$controlProps11 = props.controlProps) === null || _props$controlProps11 === void 0 ? void 0 : _props$controlProps11.subtitleText) || defaultConfirmationPaneControlProps.subtitleText)), /*#__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.buttonGroupClassName,
+    styles: buttonGroupStyles,
+    id: elementId + "-buttongroup"
+  }, !((_props$controlProps12 = props.controlProps) !== null && _props$controlProps12 !== void 0 && _props$controlProps12.hideConfirmButton) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.confirmButton) || /*#__PURE__*/React.createElement(PrimaryButton, {
+    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.confirmButtonClassName,
+    styles: confirmButtonStyles,
+    text: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.confirmButtonText) || defaultConfirmationPaneControlProps.confirmButtonText,
+    onClick: handleConfirmClick,
+    id: elementId + "-confirmbutton",
+    ariaLabel: ((_props$controlProps14 = props.controlProps) === null || _props$controlProps14 === void 0 ? void 0 : _props$controlProps14.confirmButtonAriaLabel) || defaultConfirmationPaneControlProps.confirmButtonAriaLabel
+  })), !((_props$controlProps15 = props.controlProps) !== null && _props$controlProps15 !== void 0 && _props$controlProps15.hideCancelButton) && (decodeComponentString((_props$componentOverr4 = props.componentOverrides) === null || _props$componentOverr4 === void 0 ? void 0 : _props$componentOverr4.cancelButton) || /*#__PURE__*/React.createElement(DefaultButton, {
+    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.cancelButtonClassName,
+    styles: cancelButtonStyles,
+    text: ((_props$controlProps16 = props.controlProps) === null || _props$controlProps16 === void 0 ? void 0 : _props$controlProps16.cancelButtonText) || defaultConfirmationPaneControlProps.cancelButtonText,
+    onClick: handleCancelClick,
+    id: elementId + "-cancelbutton",
+    ariaLabel: ((_props$controlProps17 = props.controlProps) === null || _props$controlProps17 === void 0 ? void 0 : _props$controlProps17.cancelButtonAriaLabel) || defaultConfirmationPaneControlProps.cancelButtonAriaLabel
+  })))));
+}
+
+export default ConfirmationPane;

package/lib/esm/components/confirmationpane/common/defaultProps/defaultConfirmationPaneControlProps.js

@@ -0,0 +1,21 @@
+export const defaultConfirmationPaneControlProps = {
+  id: "lcw-components-confirmation-pane",
+  dir: "ltr",
+  hideConfirmationPane: false,
+  hideTitle: false,
+  titleText: "Close chat",
+  hideSubtitle: false,
+  subtitleText: "Do you really want to close this chat?",
+  hideConfirmButton: false,
+  confirmButtonText: "Close",
+  confirmButtonAriaLabel: "Close Chat",
+  hideCancelButton: false,
+  cancelButtonText: "Cancel",
+  cancelButtonAriaLabel: "Cancel. Return to Chat",
+  onConfirm: function () {
+    console.log("on confirm");
+  },
+  onCancel: function () {
+    console.log("on cancel");
+  }
+};

package/lib/esm/components/confirmationpane/common/defaultProps/defaultConfirmationPaneProps.js

@@ -0,0 +1,6 @@
+import { defaultConfirmationPaneControlProps } from "./defaultConfirmationPaneControlProps";
+import { defaultConfirmationPaneStyles } from "../defaultStyles/defaultConfirmationPaneStyles";
+export const defaultConfirmationPaneProps = {
+  controlProps: defaultConfirmationPaneControlProps,
+  styleProps: defaultConfirmationPaneStyles
+};