@microsoft/omnichannel-chat-components 1.1.12 → 1.1.14

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

@@ -0,0 +1,106 @@
+import { DefaultButton, IconButton, Label, Stack } from "@fluentui/react";
+import { ElementType, EventNames } from "../../common/Constants";
+import React, { useCallback } from "react";
+import { BroadcastService } from "../../services/BroadcastService";
+import { decodeComponentString } from "../../common/decodeComponentString";
+import { defaultCitationPaneCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "./common/defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneControlProps } from "./common/defaultProps/defaultCitationPaneControlProps";
+import { defaultCitationPaneGeneralStyles } from "./common/defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "./common/defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "./common/defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+
+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.id;
+  const handleClose = useCallback(() => {
+    var _props$controlProps2;
+
+    if ((_props$controlProps2 = props.controlProps) !== null && _props$controlProps2 !== void 0 && _props$controlProps2.onClose) {
+      var _props$controlProps3;
+
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      (_props$controlProps3 = props.controlProps) === null || _props$controlProps3 === void 0 ? void 0 : _props$controlProps3.onClose();
+    }
+  }, [props.controlProps, elementId]);
+  const handleTopClose = useCallback(() => {
+    if (handleClose) {
+      const customEvent = {
+        elementType: ElementType.CitationPaneCloseButton,
+        elementId: elementId + "-top-close",
+        eventName: EventNames.OnClick
+      };
+      BroadcastService.postMessage(customEvent);
+      handleClose();
+    }
+  }, [props.controlProps, elementId]);
+  const containerStyles = {
+    root: Object.assign({}, 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, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.titleStyleProps)
+  };
+  const contentStyles = { ...defaultCitationPaneContentStyles,
+    ...((_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.contentStyleProps)
+  };
+  const closeButtonStyles = {
+    root: Object.assign({}, 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.topCloseButtonPosition;
+  const topCloseButtonStyles = {
+    root: Object.assign({}, 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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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.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) && (decodeComponentString((_props$componentOverr = props.componentOverrides) === null || _props$componentOverr === void 0 ? void 0 : _props$componentOverr.topCloseButton) || /*#__PURE__*/React.createElement(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.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) && (decodeComponentString((_props$componentOverr2 = props.componentOverrides) === null || _props$componentOverr2 === void 0 ? void 0 : _props$componentOverr2.title) || /*#__PURE__*/React.createElement(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.titleText)), /*#__PURE__*/React.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) && (decodeComponentString((_props$componentOverr3 = props.componentOverrides) === null || _props$componentOverr3 === void 0 ? void 0 : _props$componentOverr3.closeButton) || /*#__PURE__*/React.createElement(DefaultButton, {
+    onClick: handleClose,
+    id: elementId + "-close",
+    text: ((_props$controlProps12 = props.controlProps) === null || _props$controlProps12 === void 0 ? void 0 : _props$controlProps12.closeButtonText) || defaultCitationPaneControlProps.closeButtonText,
+    ariaLabel: ((_props$controlProps13 = props.controlProps) === null || _props$controlProps13 === void 0 ? void 0 : _props$controlProps13.closeButtonAriaLabel) || 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
+  }))));
+}
+
+export default CitationPane;

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

@@ -0,0 +1,64 @@
+import CitationPane from "./CitationPane";
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+
+export 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.createElement("div", {
+    style: {
+      padding: "2em",
+      backgroundColor: "#f5f5f5",
+      minHeight: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "600px"
+    }
+  }, /*#__PURE__*/React.createElement("h2", {
+    style: {
+      marginBottom: "1em",
+      textAlign: "center"
+    }
+  }, "CitationPane Scaling Test"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: "2em",
+      textAlign: "center",
+      fontSize: "0.9em"
+    }
+  }, "Test this component at browser zoom levels from 50% to 400%"), /*#__PURE__*/React.createElement(CitationPane, baseProps)));
+};
+export default CitationPaneScalingTest;

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

@@ -0,0 +1,15 @@
+export 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");
+  }
+};

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

@@ -0,0 +1,6 @@
+import { defaultCitationPaneControlProps } from "./defaultCitationPaneControlProps";
+import { defaultCitationPaneStyleProps } from "./defaultCitationPaneStyleProps";
+export const defaultCitationPaneProps = {
+  controlProps: defaultCitationPaneControlProps,
+  styleProps: defaultCitationPaneStyleProps
+};

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

@@ -0,0 +1,12 @@
+import { defaultCitationPaneCloseButtonStyles } from "../defaultStyles/defaultCitationPaneCloseButtonStyles";
+import { defaultCitationPaneContentStyles } from "../defaultStyles/defaultCitationPaneContentStyles";
+import { defaultCitationPaneGeneralStyles } from "../defaultStyles/defaultCitationPaneGeneralStyles";
+import { defaultCitationPaneTitleStyles } from "../defaultStyles/defaultCitationPaneTitleStyles";
+import { defaultCitationPaneTopCloseButtonStyles } from "../defaultStyles/defaultCitationPaneTopCloseButtonStyles";
+export const defaultCitationPaneStyleProps = {
+  generalStyleProps: defaultCitationPaneGeneralStyles,
+  titleStyleProps: defaultCitationPaneTitleStyles,
+  contentStyleProps: defaultCitationPaneContentStyles,
+  closeButtonStyleProps: defaultCitationPaneCloseButtonStyles,
+  topCloseButtonStyleProps: defaultCitationPaneTopCloseButtonStyles
+};

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

@@ -0,0 +1,33 @@
+export 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
+
+    }
+  }
+};

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

@@ -0,0 +1,14 @@
+export 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)
+
+};

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

@@ -0,0 +1,22 @@
+export 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
+
+};

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

@@ -0,0 +1 @@
+export const defaultCitationPaneTitleStyles = {};

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

@@ -0,0 +1,36 @@
+export 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
+
+  }
+};

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

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

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

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

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

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

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

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

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

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

package/lib/esm/index.js

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/lib/esm/interfaces/IPostMessageOptions.js

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

package/lib/esm/services/BroadcastService.js

@@ -1,6 +1,8 @@
 import { Subject } from "rxjs";
 import { filter } from "rxjs/operators";
 import { BroadcastChannel } from "broadcast-channel";
+import { uuidv4 } from "../common/utils";
+import EventQueue from "./EventQueue";
 const newMessage = new Subject(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 const broadcastServicePubList = {}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,7 +12,10 @@ const broadcastServiceSubList = {}; // eslint-disable-next-line @typescript-esli
 let pubChannel; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 let subChannel;
+let eventQueue;
 export const BroadcastServiceInitialize = channelName => {
+  eventQueue = new EventQueue(newMessage);
+
   if (broadcastServicePubList[channelName]) {
     pubChannel = broadcastServicePubList[channelName];
   } else {
@@ -30,16 +35,37 @@ export const BroadcastServiceInitialize = channelName => {
 
   subChannel.onmessage = message => {
     newMessage.next(message);
+    eventQueue.popEvent(message);
+    eventQueue.stopIfEmpty();
   };
 };
 export 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 = 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(filter(msg => msg.elementId == message.elementId && msg.elementType == message.elementType && msg.eventName == message.eventName));
@@ -53,5 +79,6 @@ export const BroadcastService = {
   disposeChannel: () => {
     pubChannel.close();
     subChannel.close();
+    eventQueue.dispose();
   }
 };

package/lib/esm/services/EventQueue.js

@@ -0,0 +1,83 @@
+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();
+  }
+
+}
+
+export default EventQueue;

package/lib/types/common/Constants.d.ts

@@ -31,6 +31,7 @@ export declare enum ElementType {
     ReconnectChatPane = "ReconnectChatPane",
     ConfirmationPaneConfirmButton = "ConfirmationPaneConfirmButton",
     ConfirmationPaneCancelButton = "ConfirmationPaneCancelButton",
+    CitationPaneCloseButton = "CitationPaneCloseButton",
     PreChatSurveySubmitButton = "PreChatSurveySubmitButton",
     PreChatSurveyError = "PreChatSurveyError",
     IncomingCallDeclineCallButton = "IncomingCallDeclineCallButton",

package/lib/types/components/citationpane/CitationPane.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ICitationPaneProps } from "./interfaces/ICitationPaneProps";
+declare function CitationPane(props: ICitationPaneProps): React.JSX.Element;
+export default CitationPane;

package/lib/types/components/citationpane/ScalingTest.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Test component to verify CitationPane scaling behavior at different zoom levels
+ * This demonstrates how the component responds to 50% to 400% view sizes
+ */
+export declare const CitationPaneScalingTest: React.FC;
+export default CitationPaneScalingTest;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneControlProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneControlProps } from "../../interfaces/ICitationPaneControlProps";
+export declare const defaultCitationPaneControlProps: ICitationPaneControlProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneProps } from "../../interfaces/ICitationPaneProps";
+export declare const defaultCitationPaneProps: ICitationPaneProps;

package/lib/types/components/citationpane/common/defaultProps/defaultCitationPaneStyleProps.d.ts

@@ -0,0 +1,2 @@
+import { ICitationPaneStyleProps } from "../../interfaces/ICitationPaneStyleProps";
+export declare const defaultCitationPaneStyleProps: ICitationPaneStyleProps;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneContentStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneContentStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneGeneralStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneGeneralStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTitleStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTitleStyles: IStyle;

package/lib/types/components/citationpane/common/defaultStyles/defaultCitationPaneTopCloseButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import { IStyle } from "@fluentui/react";
+export declare const defaultCitationPaneTopCloseButtonStyles: IStyle;

package/lib/types/components/citationpane/interfaces/ICitationPaneClassNames.d.ts

@@ -0,0 +1,7 @@
+export interface ICitationPaneClassNames {
+    containerClassName?: string;
+    titleClassName?: string;
+    contentClassName?: string;
+    closeButtonClassName?: string;
+    topCloseButtonClassName?: string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneComponentOverrides.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface ICitationPaneComponentOverrides {
+    title?: ReactNode | string;
+    subtitle?: ReactNode | string;
+    closeButton?: ReactNode | string;
+    topCloseButton?: ReactNode | string;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneControlProps.d.ts

@@ -0,0 +1,16 @@
+export interface ICitationPaneControlProps {
+    id?: string;
+    dir?: "ltr" | "rtl" | "auto";
+    hideCitationPane?: boolean;
+    hideTitle?: boolean;
+    titleText?: string;
+    contentHtml?: string;
+    hideCloseButton?: boolean;
+    closeButtonText?: string;
+    closeButtonAriaLabel?: string;
+    hideTopCloseButton?: boolean;
+    topCloseButtonAriaLabel?: string;
+    topCloseButtonPosition?: "topLeft" | "topRight";
+    brightnessValueOnDim?: string;
+    onClose?: () => void;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneProps.d.ts

@@ -0,0 +1,8 @@
+import { ICitationPaneComponentOverrides } from "./ICitationPaneComponentOverrides";
+import { ICitationPaneControlProps } from "./ICitationPaneControlProps";
+import { ICitationPaneStyleProps } from "./ICitationPaneStyleProps";
+export interface ICitationPaneProps {
+    controlProps?: ICitationPaneControlProps;
+    styleProps?: ICitationPaneStyleProps;
+    componentOverrides?: ICitationPaneComponentOverrides;
+}

package/lib/types/components/citationpane/interfaces/ICitationPaneStyleProps.d.ts

@@ -0,0 +1,10 @@
+import { ICitationPaneClassNames } from "./ICitationPaneClassNames";
+import { IStyle } from "@fluentui/react";
+export interface ICitationPaneStyleProps {
+    generalStyleProps?: IStyle;
+    titleStyleProps?: IStyle;
+    contentStyleProps?: IStyle;
+    closeButtonStyleProps?: IStyle;
+    topCloseButtonStyleProps?: IStyle;
+    classNames?: ICitationPaneClassNames;
+}

package/lib/types/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Header } from "./components/header/Header";
 export { default as Footer } from "./components/footer/Footer";
 export { default as ConfirmationPane } from "./components/confirmationpane/ConfirmationPane";
+export { default as CitationPane } from "./components/citationpane/CitationPane";
 export { default as ChatButton } from "./components/chatbutton/ChatButton";
 export { default as InputValidationPane } from "./components/inputvalidationpane/InputValidationPane";
 export { default as ProactiveChatPane } from "./components/proactivechatpane/ProactiveChatPane";

package/lib/types/interfaces/ICustomEvent.d.ts

@@ -4,4 +4,5 @@ export interface ICustomEvent {
     elementType?: ElementType | any;
     elementId?: string;
     payload?: any;
+    eventId?: string;
 }

package/lib/types/interfaces/IPostMessageOptions.d.ts

@@ -0,0 +1,4 @@
+export interface IPostMessageOptions {
+    retry?: boolean;
+    queueTimeout?: number;
+}