@microsoft/omnichannel-chat-components 1.1.12 → 1.1.14

package/lib/cjs/common/Constants.js

@@ -42,6 +42,7 @@ exports.ElementType = ElementType;
   ElementType["ReconnectChatPane"] = "ReconnectChatPane";
   ElementType["ConfirmationPaneConfirmButton"] = "ConfirmationPaneConfirmButton";
   ElementType["ConfirmationPaneCancelButton"] = "ConfirmationPaneCancelButton";
+  ElementType["CitationPaneCloseButton"] = "CitationPaneCloseButton";
   ElementType["PreChatSurveySubmitButton"] = "PreChatSurveySubmitButton";
   ElementType["PreChatSurveyError"] = "PreChatSurveyError";
   ElementType["IncomingCallDeclineCallButton"] = "IncomingCallDeclineCallButton";

package/lib/cjs/components/citationpane/CitationPane.js

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@fluentui/react");
+
+var _Constants = require("../../common/Constants");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _BroadcastService = require("../../services/BroadcastService");
+
+var _decodeComponentString = require("../../common/decodeComponentString");
+
+var _defaultCitationPaneCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("./common/defaultStyles/defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneControlProps = require("./common/defaultProps/defaultCitationPaneControlProps");
+
+var _defaultCitationPaneGeneralStyles = require("./common/defaultStyles/defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("./common/defaultStyles/defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function CitationPane(props) {
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$controlProps4, _props$styleProps5, _props$controlProps5, _props$styleProps6, _props$styleProps6$cl, _props$controlProps6, _props$componentOverr, _props$controlProps7, _props$styleProps7, _props$styleProps7$cl, _props$controlProps8, _props$componentOverr2, _props$styleProps8, _props$styleProps8$cl, _props$controlProps9, _props$styleProps9, _props$styleProps9$cl, _props$controlProps10, _props$controlProps11, _props$componentOverr3, _props$controlProps12, _props$controlProps13, _props$styleProps10, _props$styleProps10$c;
+
+  const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultCitationPaneControlProps.defaultCitationPaneControlProps.id;
+  const handleClose = (0, _react2.useCallback)(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: _Constants.ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-close",
+        eventName: _Constants.EventNames.OnClick
+      };
+
+      _BroadcastService.BroadcastService.postMessage(customEvent);
+
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+    }
+  }, [props.controlProps, elementId]);
+  const handleTopClose = (0, _react2.useCallback)(() => {
+    if (handleClose) {
+      const customEvent = {
+        elementType: _Constants.ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-top-close",
+        eventName: _Constants.EventNames.OnClick
+      };
+
+      _BroadcastService.BroadcastService.postMessage(customEvent);
+
+      handleClose();
+    }
+  }, [props.controlProps, elementId]);
+  const containerStyles = {
+    root: Object.assign({}, _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles, (_props$styleProps = props.styleProps) === null || _props$styleProps === void 0 ? void 0 : _props$styleProps.generalStyleProps, {
+      position: "relative" // Ensure container is positioned for absolute positioning of top close button
+
+    })
+  };
+  const titleStyles = {
+    root: Object.assign({}, _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const contentStyles = { ..._defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+    ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles, (_props$styleProps4 = props.styleProps) === null || _props$styleProps4 === void 0 ? void 0 : _props$styleProps4.closeButtonStyleProps)
+  };
+  const topCloseButtonPosition = ((_props$controlProps4 = props.controlProps) === null || _props$controlProps4 === void 0 ? void 0 : _props$controlProps4.topCloseButtonPosition) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonPosition;
+  const topCloseButtonStyles = {
+    root: Object.assign({}, _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles, (_props$styleProps5 = props.styleProps) === null || _props$styleProps5 === void 0 ? void 0 : _props$styleProps5.topCloseButtonStyleProps, topCloseButtonPosition === "topLeft" ? {
+      left: "0.5em",
+      right: "auto"
+    } : {
+      right: "0.5em",
+      left: "auto"
+    })
+  };
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_react.Stack, {
+    id: elementId,
+    role: "dialog",
+    "aria-labelledby": elementId + "-title",
+    "aria-describedby": elementId + "-content",
+    dir: ((_props$controlProps5 = props.controlProps) === null || _props$controlProps5 === void 0 ? void 0 : _props$controlProps5.dir) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.dir,
+    styles: containerStyles,
+    className: (_props$styleProps6 = props.styleProps) === null || _props$styleProps6 === void 0 ? void 0 : (_props$styleProps6$cl = _props$styleProps6.classNames) === null || _props$styleProps6$cl === void 0 ? void 0 : _props$styleProps6$cl.containerClassName
+  }, !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hideTopCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
+    onClick: handleTopClose,
+    id: elementId + "-top-close",
+    iconProps: {
+      iconName: "ChromeClose"
+    },
+    ariaLabel: ((_props$controlProps7 = props.controlProps) === null || _props$controlProps7 === void 0 ? void 0 : _props$controlProps7.topCloseButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.topCloseButtonAriaLabel,
+    styles: topCloseButtonStyles,
+    className: (_props$styleProps7 = props.styleProps) === null || _props$styleProps7 === void 0 ? void 0 : (_props$styleProps7$cl = _props$styleProps7.classNames) === null || _props$styleProps7$cl === void 0 ? void 0 : _props$styleProps7$cl.topCloseButtonClassName
+  })), !((_props$controlProps8 = props.controlProps) !== null && _props$controlProps8 !== void 0 && _props$controlProps8.hideTitle) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/_react2.default.createElement(_react.Label, {
+    id: elementId + "-title",
+    styles: titleStyles,
+    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.titleClassName
+  }, ((_props$controlProps9 = props.controlProps) === null || _props$controlProps9 === void 0 ? void 0 : _props$controlProps9.titleText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.titleText)), /*#__PURE__*/_react2.default.createElement("div", {
+    id: elementId + "-content",
+    style: contentStyles,
+    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.contentClassName,
+    dangerouslySetInnerHTML: {
+      __html: ((_props$controlProps10 = props.controlProps) === null || _props$controlProps10 === void 0 ? void 0 : _props$controlProps10.contentHtml) ?? ""
+    }
+  }), !((_props$controlProps11 = props.controlProps) !== null && _props$controlProps11 !== void 0 && _props$controlProps11.hideCloseButton) && ((0, _decodeComponentString.decodeComponentString)((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/_react2.default.createElement(_react.DefaultButton, {
+    onClick: handleClose,
+    id: elementId + "-close",
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonText,
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || _defaultCitationPaneControlProps.defaultCitationPaneControlProps.closeButtonAriaLabel,
+    styles: closeButtonStyles,
+    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.closeButtonClassName
+  }))));
+}
+
+var _default = CitationPane;
+exports.default = _default;

package/lib/cjs/components/citationpane/ScalingTest.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CitationPaneScalingTest = void 0;
+
+var _CitationPane = _interopRequireDefault(require("./CitationPane"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+const CitationPaneScalingTest = () => {
+  const baseProps = {
+    controlProps: {
+      id: "scaling-test-citation",
+      titleText: "Scaling Test Citation",
+      contentHtml: `
+                <div>
+                    <p>This citation pane is designed to scale properly from 50% to 400% zoom levels.</p>
+                    <p><strong>Key improvements for scaling:</strong></p>
+                    <ul>
+                        <li>Uses <code>em</code> units instead of <code>px</code> for dimensions</li>
+                        <li>Scalable padding, margins, and positioning</li>
+                        <li>Relative font sizes throughout</li>
+                        <li>Container-relative maximum height instead of viewport-based</li>
+                    </ul>
+                    <p><strong>Test Instructions:</strong></p>
+                    <ol>
+                        <li>Use your browser's zoom controls (Ctrl/Cmd + or -)</li>
+                        <li>Test zoom levels: 50%, 75%, 100%, 150%, 200%, 300%, 400%</li>
+                        <li>Verify all elements remain proportional and usable</li>
+                        <li>Check that buttons remain clickable and text remains readable</li>
+                    </ol>
+                </div>
+            `,
+      closeButtonText: "Close Test",
+      onClose: () => {
+        console.log("Scaling test close button clicked at current zoom level");
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: "2em",
+      backgroundColor: "#f5f5f5",
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: "600px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    style: {
+      marginBottom: "1em",
+      textAlign: "center"
+    }
+  }, "CitationPane Scaling Test"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: "2em",
+      textAlign: "center",
+      fontSize: "0.9em"
+    }
+  }, "Test this component at browser zoom levels from 50% to 400%"), /*#__PURE__*/_react.default.createElement(_CitationPane.default, baseProps)));
+};
+
+exports.CitationPaneScalingTest = CitationPaneScalingTest;
+var _default = CitationPaneScalingTest;
+exports.default = _default;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneControlProps = void 0;
+const defaultCitationPaneControlProps = {
+  id: "ocw-citation-pane",
+  dir: "ltr",
+  hideTitle: false,
+  titleText: "Citation",
+  hideCloseButton: false,
+  closeButtonText: "Close",
+  closeButtonAriaLabel: "Close citation",
+  hideTopCloseButton: false,
+  topCloseButtonAriaLabel: "Close",
+  topCloseButtonPosition: "topRight",
+  onClose: () => {
+    console.log("Citation pane close");
+  }
+};
+exports.defaultCitationPaneControlProps = defaultCitationPaneControlProps;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneProps = void 0;
+
+var _defaultCitationPaneControlProps = require("./defaultCitationPaneControlProps");
+
+var _defaultCitationPaneStyleProps = require("./defaultCitationPaneStyleProps");
+
+const defaultCitationPaneProps = {
+  controlProps: _defaultCitationPaneControlProps.defaultCitationPaneControlProps,
+  styleProps: _defaultCitationPaneStyleProps.defaultCitationPaneStyleProps
+};
+exports.defaultCitationPaneProps = defaultCitationPaneProps;

package/lib/cjs/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneStyleProps = void 0;
+
+var _defaultCitationPaneCloseButtonStyles = require("../defaultStyles/defaultCitationPaneCloseButtonStyles");
+
+var _defaultCitationPaneContentStyles = require("../defaultStyles/defaultCitationPaneContentStyles");
+
+var _defaultCitationPaneGeneralStyles = require("../defaultStyles/defaultCitationPaneGeneralStyles");
+
+var _defaultCitationPaneTitleStyles = require("../defaultStyles/defaultCitationPaneTitleStyles");
+
+var _defaultCitationPaneTopCloseButtonStyles = require("../defaultStyles/defaultCitationPaneTopCloseButtonStyles");
+
+const defaultCitationPaneStyleProps = {
+  generalStyleProps: _defaultCitationPaneGeneralStyles.defaultCitationPaneGeneralStyles,
+  titleStyleProps: _defaultCitationPaneTitleStyles.defaultCitationPaneTitleStyles,
+  contentStyleProps: _defaultCitationPaneContentStyles.defaultCitationPaneContentStyles,
+  closeButtonStyleProps: _defaultCitationPaneCloseButtonStyles.defaultCitationPaneCloseButtonStyles,
+  topCloseButtonStyleProps: _defaultCitationPaneTopCloseButtonStyles.defaultCitationPaneTopCloseButtonStyles
+};
+exports.defaultCitationPaneStyleProps = defaultCitationPaneStyleProps;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneCloseButtonStyles = void 0;
+const defaultCitationPaneCloseButtonStyles = {
+  marginTop: "1em",
+  // Space between content and close button (scalable)
+  alignSelf: "center",
+  // Center the button horizontally
+  backgroundColor: "#f3f2f1",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  color: "#323130",
+  cursor: "pointer",
+  fontSize: "1em",
+  // Use relative font size for better scaling
+  fontWeight: "500",
+  minHeight: "2em",
+  // Scalable minimum height
+  minWidth: "5em",
+  // Scalable minimum width
+  padding: "0.5em 1em",
+  // Scalable padding
+  selectors: {
+    ":hover": {
+      backgroundColor: "#e1dfdd",
+      borderColor: "#c8c6c4"
+    },
+    ":focus": {
+      outline: "0.125em solid #0078d4",
+      // Scalable outline
+      outlineOffset: "0.125em" // Scalable offset
+
+    }
+  }
+};
+exports.defaultCitationPaneCloseButtonStyles = defaultCitationPaneCloseButtonStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneContentStyles = void 0;
+const defaultCitationPaneContentStyles = {
+  fontSize: "1em",
+  // Use relative units for better scaling
+  lineHeight: "1.5",
+  // Already relative, good for scaling
+  marginBottom: "0",
+  // No bottom margin since close button has top margin
+  flex: "1",
+  // Allow content to grow and push close button to bottom
+  overflow: "auto",
+  // Enable scrolling for long content
+  paddingRight: "0.25em" // Small padding to prevent scrollbar from touching border (scalable)
+
+};
+exports.defaultCitationPaneContentStyles = defaultCitationPaneContentStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneGeneralStyles = void 0;
+const defaultCitationPaneGeneralStyles = {
+  position: "relative",
+  // Required for absolute positioning of top close button
+  paddingTop: "2.5em",
+  // Space for top close button to prevent overlap (scalable)
+  padding: "1em",
+  // Scalable padding using em units
+  backgroundColor: "#ffffff",
+  border: "1px solid #d2d0ce",
+  borderRadius: "0.5em",
+  // Scalable border radius
+  boxShadow: "0px 0.125em 0.25em rgba(0, 0, 0, 0.1)",
+  // Scalable shadow
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "7.5em",
+  // Minimum height to ensure proper layout (scalable)
+  maxHeight: "30em",
+  // Container-relative height instead of viewport-based
+  overflow: "hidden" // Hide overflow on container, let content area handle scrolling
+
+};
+exports.defaultCitationPaneGeneralStyles = defaultCitationPaneGeneralStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTitleStyles = void 0;
+const defaultCitationPaneTitleStyles = {};
+exports.defaultCitationPaneTitleStyles = defaultCitationPaneTitleStyles;

package/lib/cjs/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultCitationPaneTopCloseButtonStyles = void 0;
+const defaultCitationPaneTopCloseButtonStyles = {
+  position: "absolute",
+  top: "0.5em",
+  // Scalable positioning
+  right: "0.5em",
+  // Scalable positioning
+  minWidth: "2em",
+  // Scalable minimum width
+  height: "2em",
+  // Scalable height
+  padding: "0",
+  fontSize: "1em",
+  // Scalable font size
+  fontWeight: "bold",
+  color: "#605e5c",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "0.25em",
+  // Scalable border radius
+  cursor: "pointer",
+  zIndex: 1000,
+  ":hover": {
+    backgroundColor: "#f3f2f1",
+    color: "#323130"
+  },
+  ":active": {
+    backgroundColor: "#edebe9",
+    color: "#201f1e"
+  },
+  ":focus": {
+    outline: "0.125em solid #605e5c",
+    // Scalable outline
+    outlineOffset: "0.125em" // Scalable offset
+
+  }
+};
+exports.defaultCitationPaneTopCloseButtonStyles = defaultCitationPaneTopCloseButtonStyles;

package/lib/cjs/components/citationpane/interfaces/ICitationPaneClassNames.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneComponentOverrides.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneControlProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/components/citationpane/interfaces/ICitationPaneStyleProps.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ChatReconnectIconBase64", {
     return _Icons.ChatReconnectIconBase64;
   }
 });
+Object.defineProperty(exports, "CitationPane", {
+  enumerable: true,
+  get: function () {
+    return _CitationPane.default;
+  }
+});
 Object.defineProperty(exports, "CloseChatButtonIconBase64", {
   enumerable: true,
   get: function () {
@@ -262,6 +268,8 @@ var _Footer = _interopRequireDefault(require("./components/footer/Footer"));
 
 var _ConfirmationPane = _interopRequireDefault(require("./components/confirmationpane/ConfirmationPane"));
 
+var _CitationPane = _interopRequireDefault(require("./components/citationpane/CitationPane"));
+
 var _ChatButton = _interopRequireDefault(require("./components/chatbutton/ChatButton"));
 
 var _InputValidationPane = _interopRequireDefault(require("./components/inputvalidationpane/InputValidationPane"));

package/lib/cjs/interfaces/IPostMessageOptions.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/services/BroadcastService.js

@@ -11,6 +11,12 @@ var _operators = require("rxjs/operators");
 
 var _broadcastChannel = require("broadcast-channel");
 
+var _utils = require("../common/utils");
+
+var _EventQueue = _interopRequireDefault(require("./EventQueue"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const newMessage = new _rxjs.Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,8 +26,11 @@ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-esli
 let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 let subChannel;
+let eventQueue;
 
 const BroadcastServiceInitialize = channelName => {
+  eventQueue = new _EventQueue.default(newMessage);
+
   if (broadcastServicePubList[channelName]) {
     pubChannel = broadcastServicePubList[channelName];
   } else {
@@ -41,18 +50,39 @@ const BroadcastServiceInitialize = channelName => {
 
   subChannel.onmessage = message => {
     newMessage.next(message);
+    eventQueue.popEvent(message);
+    eventQueue.stopIfEmpty();
   };
 };
 
 exports.BroadcastServiceInitialize = BroadcastServiceInitialize;
 const BroadcastService = {
   //broadcast a message
-  postMessage: message => {
+  postMessage: function (message) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      retry: true
+    };
+
     /**
      * 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)));
+    try {
+      const messageCopy = JSON.parse(JSON.stringify(message));
+      const eventId = (0, _utils.uuidv4)();
+      const event = { ...messageCopy,
+        eventId
+      };
+      eventQueue.pushEvent(event);
+      pubChannel.postMessage(event);
+    } catch (error) {
+      console.error("Error in BroadcastService.postMessage:", error);
+    }
+
+    if (options !== null && options !== void 0 && options.retry) {
+      const queueTimeout = (options === null || options === void 0 ? void 0 : options.queueTimeout) || 500;
+      eventQueue.startQueue(queueTimeout);
+    }
   },
   getMessage: message => {
     return newMessage.pipe((0, _operators.filter)(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));
@@ -66,6 +96,7 @@ const BroadcastService = {
   disposeChannel: () => {
     pubChannel.close();
     subChannel.close();
+    eventQueue.dispose();
   }
 };
 exports.BroadcastService = BroadcastService;

package/lib/cjs/services/EventQueue.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class EventQueue {
+  constructor(newMessage) {
+    _defineProperty(this, "queueing", false);
+
+    _defineProperty(this, "channelEventQueue", void 0);
+
+    _defineProperty(this, "queueingId", void 0);
+
+    _defineProperty(this, "newMessage", void 0);
+
+    this.channelEventQueue = new Map();
+    this.newMessage = newMessage;
+  }
+
+  processEvents() {
+    this.channelEventQueue.forEach((event, eventId) => {
+      // Process entry based on insertion order
+      this.newMessage.next(event); // Post event directly instead of using pubChannel
+
+      this.channelEventQueue.delete(eventId); // Remove event from queue regardless of outcome
+    });
+  }
+
+  queueEvents() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.stopIfEmpty();
+
+    if (this.queueingId) {
+      // Queueing in progress
+      return;
+    }
+
+    if (this.queueing) {
+      this.queueingId = setTimeout(() => {
+        this.processEvents();
+        this.queueEvents(timeout);
+      }, timeout);
+    }
+  }
+
+  startQueue() {
+    let timeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
+    this.queueing = true;
+    this.queueEvents(timeout);
+  }
+
+  stopIfEmpty() {
+    if (this.channelEventQueue.size === 0) {
+      if (this.queueingId) {
+        clearTimeout(this.queueingId);
+      }
+
+      this.queueing = false;
+      this.queueingId = undefined;
+    }
+  }
+
+  pushEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.set(event.eventId, event);
+    }
+  }
+
+  popEvent(event) {
+    if (event.eventId) {
+      this.channelEventQueue.delete(event.eventId);
+    }
+  }
+
+  dispose() {
+    if (this.queueingId) {
+      clearTimeout(this.queueingId);
+      this.queueingId = undefined;
+    }
+
+    this.channelEventQueue.clear();
+  }
+
+}
+
+var _default = EventQueue;
+exports.default = _default;

package/lib/esm/common/Constants.js

@@ -30,6 +30,7 @@ export let ElementType;
   ElementType["ReconnectChatPane"] = "ReconnectChatPane";
   ElementType["ConfirmationPaneConfirmButton"] = "ConfirmationPaneConfirmButton";
   ElementType["ConfirmationPaneCancelButton"] = "ConfirmationPaneCancelButton";
+  ElementType["CitationPaneCloseButton"] = "CitationPaneCloseButton";
   ElementType["PreChatSurveySubmitButton"] = "PreChatSurveySubmitButton";
   ElementType["PreChatSurveyError"] = "PreChatSurveyError";
   ElementType["IncomingCallDeclineCallButton"] = "IncomingCallDeclineCallButton";