@carbon/ai-chat 0.4.0-rc.2 → 0.4.0-rc.4

package/dist/es/chat.Header.js

@@ -0,0 +1,1025 @@
+import "@carbon/web-components/es-custom/components/slug/index.js";
+
+import Close from "@carbon/icons-react/es/Close.js";
+
+import CloseLarge from "@carbon/icons-react/es/CloseLarge.js";
+
+import DownToBottom from "@carbon/icons-react/es/DownToBottom.js";
+
+import Menu$1 from "@carbon/icons-react/es/Menu.js";
+
+import Restart from "@carbon/icons-react/es/Restart.js";
+
+import SidePanelClose from "@carbon/icons-react/es/SidePanelClose.js";
+
+import SubtractLarge from "@carbon/icons-react/es/SubtractLarge.js";
+
+import { Button, Menu, MenuItem, MenuItemRadioGroup, MenuItemDivider } from "@carbon/react";
+
+import { AI_LABEL_SIZE } from "@carbon/web-components/es-custom/components/ai-label/defs.js";
+
+import { POPOVER_ALIGNMENT } from "@carbon/web-components/es-custom/components/popover/defs.js";
+
+import cx from "classnames";
+
+import React, { useContext, useEffect, Component, useRef, useState, forwardRef, useCallback, useImperativeHandle, Fragment } from "react";
+
+import { useSelector } from "react-redux";
+
+import { m as makeTestId, P as PageObjectId, C as ChatHeaderObjectType } from "./chat.PageObjectId.js";
+
+import { createComponent } from "@lit/react";
+
+import { __decorate } from "tslib";
+
+import { c as carbonElement } from "./chat.customElement.js";
+
+import "@carbon/web-components/es-custom/components/skeleton-icon/index.js";
+
+import { html, LitElement, unsafeCSS, css } from "lit";
+
+import { a as CornersType, M as MinimizeButtonIconType, W as WriteableElementName } from "./chat.dynamic-imports.js";
+
+import { bind } from "bind-decorator";
+
+import { property, state } from "lit/decorators.js";
+
+import "@carbon/web-components/es-custom/components/button/index.js";
+
+import "@carbon/web-components/es-custom/components/overflow-menu/index.js";
+
+import { a as ButtonKindEnum, B as ButtonSizeEnum } from "./chat.carbonTypes.js";
+
+import ChevronDown from "@carbon/icons-react/es/ChevronDown.js";
+
+import ChevronUp from "@carbon/icons-react/es/ChevronUp.js";
+
+import { useFloating, useInteractions, useClick, useDismiss } from "@floating-ui/react";
+
+import { u as uuid, U as UUIDType } from "./chat.uuid.js";
+
+import { a as HideComponentContext } from "./chat.HideComponent.js";
+
+import { u as useLanguagePack, C as ChatWidthBreakpoint } from "./chat.AppState.js";
+
+import { A as AriaAnnouncerContext, u as useServiceManager, b as usePrevious, d as doFocusRef } from "./chat.usePrevious.js";
+
+import { a as actions } from "./chat.actions.js";
+
+import "./chat.constants.js";
+
+import FocusTrap from "focus-trap-react";
+
+import ReactDOM from "react-dom";
+
+import "@carbon/web-components/es-custom/components/ai-label/ai-label-action-button.js";
+
+import CDSAILabel from "@carbon/web-components/es-custom/components/ai-label/ai-label.js";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const CSS_CLASS_PREFIX = "cds--aichat";
+
+const WEB_COMPONENT_PREFIX = "cds-aichat";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function AriaLiveMessage(props) {
+  const ariaAnnouncer = useContext(AriaAnnouncerContext);
+  useEffect(() => {
+    ariaAnnouncer(props.message);
+  }, [ ariaAnnouncer, props.message ]);
+  return React.createElement("div", null);
+}
+
+const AriaLiveMessageExport = React.memo(AriaLiveMessage);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function WriteableElement({slotName: slotName, id: id, className: className}) {
+  return React.createElement("div", {
+    className: className,
+    id: id,
+    "data-floating-menu-container": true
+  }, React.createElement("slot", {
+    name: slotName
+  }));
+}
+
+var WriteableElement$1 = React.memo(WriteableElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ModalPortalRootContext = React.createContext(null);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class ModalPortal extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      attachedToHost: null
+    };
+    this.modalElement = document.createElement("div");
+  }
+  componentDidMount() {
+    this.attachIfNeeded();
+  }
+  componentDidUpdate() {
+    this.attachIfNeeded();
+  }
+  componentWillUnmount() {
+    if (this.state.attachedToHost) {
+      this.state.attachedToHost.removeChild(this.modalElement);
+    }
+  }
+  attachIfNeeded() {
+    const hostElement = this.context;
+    if (hostElement && !this.state.attachedToHost) {
+      this.setState({
+        attachedToHost: hostElement
+      });
+      hostElement.appendChild(this.modalElement);
+    }
+  }
+  render() {
+    if (!this.state.attachedToHost) {
+      return null;
+    }
+    return ReactDOM.createPortal(this.props.children, this.modalElement);
+  }
+}
+
+ModalPortal.contextType = ModalPortalRootContext;
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class ConfirmModal extends Component {
+  constructor() {
+    super(...arguments);
+    this.onYesClick = () => {
+      this.props.onConfirm();
+    };
+    this.onNoClick = () => {
+      this.props.onCancel();
+    };
+    this.onKeyDown = event => {
+      if (event.key === "Escape") {
+        this.props.onCancel();
+      }
+    };
+  }
+  render() {
+    const {title: title, message: message, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, modalAnnounceMessage: modalAnnounceMessage, serviceManager: serviceManager} = this.props;
+    return React.createElement(ModalPortal, null, React.createElement(FocusTrap, null, React.createElement("div", {
+      className: "WACConfirmModal",
+      role: "dialog",
+      "aria-labelledby": `WACConfirmModal__title${serviceManager.namespace.suffix}`,
+      "aria-describedby": `WACConfirmModal__message${serviceManager.namespace.suffix}`
+    }, React.createElement("div", {
+      className: "WACConfirmModal__container"
+    }, React.createElement(AriaLiveMessageExport, {
+      message: modalAnnounceMessage
+    }), React.createElement("div", {
+      className: "WACConfirmModal__title",
+      id: `WACConfirmModal__title${serviceManager.namespace.suffix}`
+    }, title), React.createElement("div", {
+      className: "WACConfirmModal__message",
+      id: `WACConfirmModal__message${serviceManager.namespace.suffix}`
+    }, message), React.createElement("div", {
+      className: "WACConfirmModal__buttonContainer"
+    }, React.createElement(Button, {
+      className: "WACConfirmModal__NoButton",
+      kind: "secondary",
+      onClick: this.onNoClick,
+      onKeyDown: this.onKeyDown,
+      size: "md"
+    }, cancelButtonLabel), React.createElement(Button, {
+      className: "WACConfirmModal__YesButton",
+      onClick: this.onYesClick,
+      onKeyDown: this.onKeyDown,
+      size: "md"
+    }, confirmButtonLabel))))));
+  }
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function useUUID() {
+  const ref = useRef();
+  if (ref.current === undefined) {
+    ref.current = uuid(UUIDType.COMPONENT);
+  }
+  return ref.current;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function chatHeaderAvatarTemplate(classElement) {
+  const {url: url, corners: corners, alt: alt, onError: onError} = classElement;
+  return html`
+    <img
+      class="${cx(`${CSS_CLASS_PREFIX}-chat-header-avatar`, {
+    [`${CSS_CLASS_PREFIX}-chat-header-avatar--round`]: corners === CornersType.ROUND
+  })}"
+      src="${url}"
+      alt="${alt}"
+      @error="${onError}"
+    />
+  `;
+}
+
+var css_248z$1 = ".cds--aichat-chat-header-avatar{\n  display:block;\n  block-size:20px;\n  max-block-size:20px;\n}\n\n.cds--aichat-chat-header-avatar--round{\n  border-radius:10px;\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ class ChatHeaderAvatarElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isLoaded = false;
+  }
+  _handleOnError() {
+    this.onError?.();
+  }
+}
+
+ChatHeaderAvatarElement.styles = css`
+    ${unsafeCSS(css_248z$1)}
+  `;
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderAvatarElement.prototype, "url", void 0);
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderAvatarElement.prototype, "corners", void 0);
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderAvatarElement.prototype, "alt", void 0);
+
+__decorate([ property({
+  type: Object
+}) ], ChatHeaderAvatarElement.prototype, "onError", void 0);
+
+__decorate([ state() ], ChatHeaderAvatarElement.prototype, "isLoaded", void 0);
+
+__decorate([ bind ], ChatHeaderAvatarElement.prototype, "_handleOnError", null);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const CHAT_HEADER_AVATAR_TAG_NAME = "cds-aichat-chat-header-avatar";
+
+let CDSChatHeaderAvatarElement = class CDSChatHeaderAvatarElement extends ChatHeaderAvatarElement {
+  render() {
+    return chatHeaderAvatarTemplate(this);
+  }
+};
+
+CDSChatHeaderAvatarElement = __decorate([ carbonElement(CHAT_HEADER_AVATAR_TAG_NAME) ], CDSChatHeaderAvatarElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ChatHeaderAvatar = createComponent({
+  tagName: CHAT_HEADER_AVATAR_TAG_NAME,
+  elementClass: CDSChatHeaderAvatarElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function chatHeaderLinkTemplate(customElementClass) {
+  const {label: label, url: url, isNewTab: isNewTab} = customElementClass;
+  return html`<cds-custom-button
+    class="WACChatHeaderLink"
+    href="${url}"
+    target="${isNewTab ? "_blank" : "_self"}"
+    kind="${ButtonKindEnum.GHOST}"
+    size="md"
+    >${label}</cds-custom-button
+  >`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ let ChatHeaderLinkElement = class ChatHeaderLinkElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isNewTab = true;
+  }
+  render() {
+    return chatHeaderLinkTemplate(this);
+  }
+};
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderLinkElement.prototype, "url", void 0);
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderLinkElement.prototype, "label", void 0);
+
+__decorate([ property({
+  type: Boolean
+}) ], ChatHeaderLinkElement.prototype, "isNewTab", void 0);
+
+ChatHeaderLinkElement = __decorate([ carbonElement(`${WEB_COMPONENT_PREFIX}-chat-header-link`) ], ChatHeaderLinkElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ChatHeaderLink = createComponent({
+  tagName: `${WEB_COMPONENT_PREFIX}-chat-header-link`,
+  elementClass: ChatHeaderLinkElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatHeaderMenu({id: id, className: className, label: label, isOpen: isOpen, target: target, children: children, menuAlignment: menuAlignment, containerRef: containerRef}) {
+  return React.createElement(Menu, {
+    id: id,
+    className: className,
+    open: isOpen,
+    target: target,
+    label: label,
+    size: "md",
+    menuAlignment: menuAlignment,
+    mode: "full",
+    legacyAutoalign: false,
+    containerRef: containerRef
+  }, children);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatHeaderMenuButton(props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const {refs: menuRefs, context: menuContext} = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen
+  });
+  const {getReferenceProps: getMenuReferenceProps, getFloatingProps: getMenuFloatingProps} = useInteractions([ useClick(menuContext), useDismiss(menuContext) ]);
+  const id = useUUID();
+  return React.createElement("div", {
+    ref: menuRefs.setReference,
+    "aria-owns": id,
+    ...getMenuReferenceProps()
+  }, React.createElement(Button, {
+    size: ButtonSizeEnum.MEDIUM,
+    kind: ButtonKindEnum.GHOST,
+    onClick: () => setIsOpen(!isOpen),
+    renderIcon: isOpen ? ChevronUp : ChevronDown,
+    onMouseDown: event => event.preventDefault(),
+    "aria-label": props.ariaLabel,
+    "aria-haspopup": true,
+    "aria-expanded": isOpen,
+    "aria-controls": id
+  }, props.label), React.createElement(ChatHeaderMenu, {
+    id: id,
+    isOpen: isOpen,
+    target: menuRefs.floating.current,
+    label: props.label,
+    containerRef: props.containerRef,
+    menuAlignment: props.menuAlignment
+  }, props.children), React.createElement("div", {
+    ref: menuRefs.setFloating,
+    className: "WAChatHeaderMenuButton_HostElement",
+    ...getMenuFloatingProps()
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatHeaderMenuItem({label: label, url: url, isNewTab: isNewTab = true, onClick: onClick, children: children}) {
+  return React.createElement(MenuItem, {
+    label: label,
+    onClick: () => {
+      onClick?.();
+      if (url) {
+        window.open(url, isNewTab ? "_blank" : "_self");
+      }
+    }
+  }, children);
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatHeaderMenuItemRadioGroup(props) {
+  const {label: label, items: items, defaultSelectedItem: defaultSelectedItem, selectedItem: selectedItem, onChange: onChange} = props;
+  return React.createElement(MenuItemRadioGroup, {
+    label: label,
+    items: items,
+    defaultSelectedItem: defaultSelectedItem,
+    selectedItem: selectedItem,
+    onChange: selectedItem => {
+      if (!selectedItem.preventDefault) {
+        onChange(selectedItem);
+      }
+    },
+    itemToString: menuItem => typeof menuItem === "string" ? menuItem : menuItem.label || menuItem.value
+  });
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function ChatHeaderOverflowMenu(props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const {refs: menuRefs, context: menuContext} = useFloating({
+    open: isOpen,
+    onOpenChange: isOpen => {
+      setIsOpen(isOpen);
+      if (isOpen) {
+        props.onOpen?.();
+      } else {
+        props.onClose?.();
+      }
+    }
+  });
+  const {getReferenceProps: getMenuReferenceProps, getFloatingProps: getMenuFloatingProps} = useInteractions([ useClick(menuContext), useDismiss(menuContext) ]);
+  const id = useUUID();
+  return React.createElement("div", {
+    ref: menuRefs.setReference,
+    "aria-owns": id,
+    ...getMenuReferenceProps()
+  }, React.createElement(Button, {
+    className: cx("WACChatHeaderOverflowMenu__Button", props.className),
+    size: ButtonSizeEnum.MEDIUM,
+    kind: ButtonKindEnum.GHOST,
+    onClick: () => setIsOpen(!isOpen),
+    tooltipPosition: props.tooltipPosition,
+    renderIcon: props.renderIcon,
+    onMouseDown: event => event.preventDefault(),
+    iconDescription: props.iconDescription,
+    hasIconOnly: true,
+    "aria-label": props.ariaLabel,
+    "aria-haspopup": true,
+    "aria-expanded": isOpen,
+    "aria-controls": id
+  }), React.createElement(ChatHeaderMenu, {
+    id: id,
+    label: props.ariaLabel,
+    isOpen: isOpen,
+    target: menuRefs.floating.current,
+    containerRef: props.containerRef,
+    menuAlignment: props.menuAlignment
+  }, props.children), React.createElement("div", {
+    ref: menuRefs.setFloating,
+    className: "WACChatHeaderOverflowMenu__HostElement",
+    ...getMenuFloatingProps()
+  }));
+}
+
+var css_248z = "cds-chat-header-title{\n  text-align:center;\n}\n\n.WACChatHeaderTitle{\n  overflow:hidden;\n  font-size:var(--cds-chat-BASE-font-size-med);\n  font-weight:400;\n  line-height:var(--cds-chat-BASE-line-height-med);\n  overflow-wrap:break-word;\n  text-overflow:ellipsis;\n  white-space:nowrap;\n  word-wrap:break-word;\n}\n\n.WACChatHeaderTitle .WACChatHeaderTitle__Title:only-child{\n  padding-inline-end:0.25rem;\n}\n\n.WACChatHeaderTitle__Name{\n  font-weight:var(--cds-chat-BASE-weight-semibold);\n}";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function chatHeaderTitleTemplate(customElementClass) {
+  const {title: title, name: name} = customElementClass;
+  return html`<div class="WACChatHeaderTitle">
+    <span className="WACChatHeaderTitle__Title" ?hidden="${!title}"
+      >${title}</span
+    >
+    <span class="WACChatHeaderTitle__Name">${name}</span>
+  </div>`;
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ let ChatHeaderTitleElement = class ChatHeaderTitleElement extends LitElement {
+  render() {
+    return chatHeaderTitleTemplate(this);
+  }
+};
+
+ChatHeaderTitleElement.styles = css`
+    ${unsafeCSS(css_248z)}
+  `;
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderTitleElement.prototype, "title", void 0);
+
+__decorate([ property({
+  type: String
+}) ], ChatHeaderTitleElement.prototype, "name", void 0);
+
+ChatHeaderTitleElement = __decorate([ carbonElement(`${WEB_COMPONENT_PREFIX}-chat-header-title`) ], ChatHeaderTitleElement);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const ChatHeaderTitle = createComponent({
+  tagName: `${WEB_COMPONENT_PREFIX}-chat-header-title`,
+  elementClass: ChatHeaderTitleElement,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const AISlug = createComponent({
+  tagName: "cds-custom-ai-label",
+  elementClass: CDSAILabel,
+  react: React
+});
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ const HEADER_OBJECTS_GAP_MIN_SIZE = 100;
+
+function Header(props, ref) {
+  const {displayName: displayName, backContent: backContent, showRestartButton: showRestartButton, showBackButton: showBackButton, useAITheme: useAITheme, labelBackButton: labelBackButton, onClickClose: onClickClose, onClickRestart: onClickRestart, onCloseAndRestart: onCloseAndRestart, onClickBack: onClickBack, overflowItems: overflowItems, overflowClicked: overflowClicked, backButtonType: backButtonType, showCenter: showCenter, hideCloseButton: hideCloseButton, hideCloseAndRestartButton: hideCloseAndRestartButton, brandColor: brandColor = "primary", enableChatHeaderConfig: enableChatHeaderConfig, headerAvatarConfig: headerAvatarConfig, testIdPrefix: testIdPrefix} = props;
+  const backButtonRef = useRef();
+  const restartButtonRef = useRef();
+  const closeAndRestartButtonRef = useRef();
+  const closeButtonRef = useRef();
+  const centerObjectsRef = useRef();
+  const centerGapRef = useRef();
+  const overflowRef = useRef();
+  const serviceManager = useServiceManager();
+  const languagePack = useLanguagePack();
+  const publicConfig = useSelector(state => state.config.public);
+  const chatHeaderConfig = useSelector(state => state.chatHeaderState.config);
+  const chatWidthBreakpoint = useSelector(state => state.chatWidthBreakpoint);
+  const maxVisibleHeaderObjects = useSelector(state => state.chatHeaderState.maxVisibleHeaderObjects);
+  const [overflowIsOpen, setOverflowIsOpen] = useState(false);
+  const [confirmModelOpen, setConfirmModelOpen] = useState(false);
+  const [selectedGroupMenuitems, setSelectedGroupMenuItems] = useState({});
+  const [isImageError, setIsImageError] = useState(false);
+  const hasHeaderAvatar = Boolean(headerAvatarConfig) && !isImageError;
+  const isHidden = useContext(HideComponentContext);
+  const prevChatHeaderAvatarURL = usePrevious(headerAvatarConfig?.url);
+  const {headerConfig: headerConfig} = publicConfig;
+  const isWideWidth = chatWidthBreakpoint === ChatWidthBreakpoint.WIDE;
+  const chatHeaderTitle = enableChatHeaderConfig ? chatHeaderConfig?.headerTitle?.title : undefined;
+  const chatHeaderName = enableChatHeaderConfig ? chatHeaderConfig?.headerTitle?.name : undefined;
+  const chatHeaderDisplayName = chatHeaderName || displayName;
+  const closeConfirmModel = useCallback(() => {
+    setConfirmModelOpen(false);
+  }, []);
+  const showCloseAndRestartButton = headerConfig?.showCloseAndRestartButton && !hideCloseAndRestartButton && onCloseAndRestart;
+  const useHideCloseButton = headerConfig?.hideMinimizeButton || hideCloseButton;
+  let closeIcon;
+  let closeReverseIcon = false;
+  let closeIsReversible = true;
+  const minimizeButtonIconType = headerConfig?.minimizeButtonIconType;
+  switch (minimizeButtonIconType) {
+   case MinimizeButtonIconType.CLOSE:
+    closeIcon = React.createElement(CloseLarge, {
+      className: "WACIcon__Close",
+      size: 16
+    });
+    break;
+
+   case MinimizeButtonIconType.MINIMIZE:
+    closeIcon = React.createElement(SubtractLarge, {
+      className: "WACIcon__Subtract",
+      size: 16
+    });
+    break;
+
+   case MinimizeButtonIconType.SIDE_PANEL_LEFT:
+    closeIsReversible = false;
+    closeIcon = React.createElement(SidePanelClose, {
+      className: "WACIcon__SidePanelClose"
+    });
+    break;
+
+   case MinimizeButtonIconType.SIDE_PANEL_RIGHT:
+    closeIsReversible = false;
+    closeReverseIcon = true;
+    closeIcon = React.createElement(SidePanelClose, {
+      className: "WACIcon__SidePanelClose"
+    });
+    break;
+
+   default:
+    {
+      closeIcon = React.createElement(SubtractLarge, {
+        className: "WACIcon__Subtract",
+        size: 16
+      });
+      break;
+    }
+  }
+  if (showCloseAndRestartButton && showRestartButton) {
+    throw new Error("You cannot enable both the restart button and the close-and-restart buttons.");
+  }
+  const onConfirm = useCallback(() => {
+    setConfirmModelOpen(false);
+    onCloseAndRestart();
+  }, [ onCloseAndRestart ]);
+  useImperativeHandle(ref, () => ({
+    requestFocus: () => {
+      if (closeButtonRef.current) {
+        doFocusRef(closeButtonRef, false, true);
+        return true;
+      }
+      if (backButtonRef.current) {
+        doFocusRef(backButtonRef, false, true);
+        return true;
+      }
+      if (restartButtonRef.current) {
+        doFocusRef(restartButtonRef, false, true);
+        return true;
+      }
+      return false;
+    }
+  }));
+  function getComponentInMenu(item, index, list) {
+    switch (item.type) {
+     case ChatHeaderObjectType.LINK:
+      return React.createElement(ChatHeaderMenuItem, {
+        key: index,
+        label: item.label,
+        url: item.url,
+        isNewTab: item.isNewTab,
+        onClick: () => {
+          doFocusRef(overflowRef);
+        }
+      });
+
+     case ChatHeaderObjectType.BUTTON:
+      return React.createElement(ChatHeaderMenuItem, {
+        key: index,
+        label: item.label,
+        onClick: () => {
+          item.onClick?.();
+          doFocusRef(overflowRef);
+        }
+      });
+
+     case ChatHeaderObjectType.RADIO_GROUP:
+      {
+        const nextObject = list[index + 1];
+        return React.createElement(Fragment, {
+          key: index
+        }, index !== 0 && React.createElement(MenuItemDivider, null), React.createElement(ChatHeaderMenuItemRadioGroup, {
+          label: item.label,
+          items: item.items,
+          defaultSelectedItem: item.defaultSelectedItem,
+          selectedItem: selectedGroupMenuitems[item.label],
+          onChange: selectedItem => {
+            setSelectedGroupMenuItems(prevState => ({
+              ...prevState,
+              [item.label]: selectedItem
+            }));
+            item.onChange?.(selectedItem);
+          }
+        }), Boolean(nextObject) && nextObject.type !== ChatHeaderObjectType.RADIO_GROUP && React.createElement(MenuItemDivider, null));
+      }
+
+     case ChatHeaderObjectType.MENU:
+      return React.createElement(ChatHeaderMenuItem, {
+        key: index,
+        label: item.label
+      }, item.items.filter(menuItem => menuItem.type !== ChatHeaderObjectType.MENU).map(getComponentInMenu));
+
+     default:
+      return null;
+    }
+  }
+  function getComponentInChatHeader(headerObject, index) {
+    switch (headerObject.type) {
+     case ChatHeaderObjectType.LINK:
+      return React.createElement(ChatHeaderLink, {
+        key: index,
+        label: headerObject.label,
+        url: headerObject.url,
+        isNewTab: headerObject.isNewTab
+      });
+
+     case ChatHeaderObjectType.MENU:
+      return React.createElement(ChatHeaderMenuButton, {
+        key: index,
+        label: headerObject.label,
+        menuAlignment: "bottom-start"
+      }, headerObject.items.map(getComponentInMenu));
+
+     case ChatHeaderObjectType.BUTTON:
+      return React.createElement(Button, {
+        key: index,
+        kind: ButtonKindEnum.GHOST,
+        size: ButtonSizeEnum.MEDIUM,
+        onClick: headerObject.onClick
+      }, headerObject.label);
+
+     default:
+      return null;
+    }
+  }
+  let leftObjectsLength = 0;
+  let rightObjectsLength = 0;
+  if (enableChatHeaderConfig) {
+    leftObjectsLength = chatHeaderConfig?.left?.length ?? 0;
+    rightObjectsLength = chatHeaderConfig?.right?.length ?? 0;
+  }
+  const isLeftObjectsInOverflow = leftObjectsLength > maxVisibleHeaderObjects;
+  const isRightObjectsInOverflow = rightObjectsLength > maxVisibleHeaderObjects;
+  const hasChatHeaderObjects = leftObjectsLength || rightObjectsLength;
+  const renderChatHeaderObjectsInOverflow = hasChatHeaderObjects && (!isWideWidth || isLeftObjectsInOverflow || isRightObjectsInOverflow);
+  const hasOverflow = Boolean(overflowItems?.length) || renderChatHeaderObjectsInOverflow;
+  const isRTL = document.dir === "rtl";
+  let leftChatHeaderComponents = null;
+  let rightChatHeaderComponents = null;
+  let leftChatHeaderMenuComponents = null;
+  let rightChatHeaderMenuComponents = null;
+  if (enableChatHeaderConfig) {
+    leftChatHeaderComponents = chatHeaderConfig?.left?.slice(0, isLeftObjectsInOverflow ? maxVisibleHeaderObjects : undefined).map(getComponentInChatHeader);
+    rightChatHeaderComponents = chatHeaderConfig?.right?.slice(0, isRightObjectsInOverflow ? maxVisibleHeaderObjects : undefined).map(getComponentInChatHeader);
+    leftChatHeaderMenuComponents = isLeftObjectsInOverflow && chatHeaderConfig?.left?.slice(maxVisibleHeaderObjects).map(getComponentInMenu);
+    rightChatHeaderMenuComponents = isRightObjectsInOverflow && chatHeaderConfig?.right?.slice(maxVisibleHeaderObjects).map(getComponentInMenu);
+  }
+  let leftContent;
+  if (hasOverflow) {
+    leftContent = React.createElement(ChatHeaderOverflowMenu, {
+      className: "WACHeader__OverflowMenu",
+      renderIcon: overflowIsOpen ? Close : Menu$1,
+      iconDescription: languagePack.header_overflowMenu_options,
+      ariaLabel: languagePack.components_overflow_ariaLabel,
+      containerRef: overflowRef,
+      tooltipPosition: isRTL ? "left" : "right",
+      menuAlignment: "bottom-start",
+      onOpen: () => {
+        setTimeout(() => {
+          setOverflowIsOpen(true);
+        });
+      },
+      onClose: () => {
+        setOverflowIsOpen(false);
+      }
+    }, overflowItems?.map((item, index) => React.createElement(MenuItem, {
+      key: item,
+      label: item,
+      onClick: () => {
+        doFocusRef(overflowRef);
+        overflowClicked(index);
+      }
+    })), leftChatHeaderMenuComponents, rightChatHeaderMenuComponents);
+  } else if (showBackButton) {
+    leftContent = React.createElement(HeaderButton, {
+      className: "WACHeader__BackButton",
+      label: labelBackButton,
+      onClick: onClickBack,
+      buttonRef: backButtonRef,
+      buttonKind: backButtonType,
+      tooltipPosition: isRTL ? "left" : "right"
+    }, backContent || React.createElement(DownToBottom, null));
+  }
+  useEffect(() => {
+    if (!isWideWidth) {
+      serviceManager.store.dispatch(actions.setMaxVisibleHeaderObjects(0));
+      return undefined;
+    }
+    if (!enableChatHeaderConfig) {
+      return undefined;
+    }
+    const centerResizeObserver = new ResizeObserver(() => {
+      const centerGapElement = centerGapRef.current;
+      if (centerGapElement) {
+        if (centerGapElement.offsetWidth > HEADER_OBJECTS_GAP_MIN_SIZE || centerGapElement.offsetWidth === 0) {
+          let newTotal = Math.floor((centerObjectsRef.current.offsetWidth - HEADER_OBJECTS_GAP_MIN_SIZE) / (HEADER_OBJECTS_GAP_MIN_SIZE * 2));
+          if (newTotal < 0) {
+            newTotal = 0;
+          }
+          setTimeout(() => {
+            serviceManager.store.dispatch(actions.setMaxVisibleHeaderObjects(newTotal));
+          });
+        }
+      }
+    });
+    centerResizeObserver.observe(centerObjectsRef.current);
+    return () => {
+      centerResizeObserver.disconnect();
+    };
+  }, [ isWideWidth, enableChatHeaderConfig, serviceManager ]);
+  useEffect(() => {
+    if (isImageError && prevChatHeaderAvatarURL !== headerAvatarConfig?.url) {
+      setIsImageError(false);
+    }
+  }, [ prevChatHeaderAvatarURL, headerAvatarConfig?.url, isImageError ]);
+  return React.createElement("div", {
+    className: cx("WACHeader", `WAC--${brandColor}Color`, {
+      "WACHeader--withAvatar": hasHeaderAvatar
+    })
+  }, React.createElement("div", {
+    className: cx("WACHeader--content", `WAC--${brandColor}Color`),
+    "data-floating-menu-container": true
+  }, leftContent && React.createElement("div", {
+    className: "WACHeader__Buttons WACHeader__LeftButtons"
+  }, leftContent), showCenter && React.createElement("div", {
+    className: "WACHeader__CenterContainer"
+  }, hasHeaderAvatar && React.createElement(ChatHeaderAvatar, {
+    url: headerAvatarConfig.url,
+    corners: headerAvatarConfig.corners,
+    alt: languagePack.header_ariaBotAvatar,
+    onError: () => setIsImageError(true)
+  }), (chatHeaderTitle || chatHeaderDisplayName) && React.createElement("div", {
+    className: "WACHeader__TitleContainer"
+  }, React.createElement(ChatHeaderTitle, {
+    title: chatHeaderTitle,
+    name: chatHeaderDisplayName
+  })), isWideWidth && Boolean(leftObjectsLength) && React.createElement("div", {
+    className: "WACHeader__Separator"
+  }), React.createElement("div", {
+    ref: centerObjectsRef,
+    className: "WACHeader__HeaderObjects"
+  }, isWideWidth && Boolean(leftObjectsLength) && React.createElement("div", {
+    className: "WACHeader__LeftItems"
+  }, leftChatHeaderComponents), React.createElement("div", {
+    ref: centerGapRef,
+    className: "WACHeader__CenterGap"
+  }), isWideWidth && Boolean(rightObjectsLength) && React.createElement("div", {
+    className: "WACHeader__RightItems"
+  }, rightChatHeaderComponents))), React.createElement("div", {
+    className: "WACHeader__Buttons WACHeader__RightButtons"
+  }, useAITheme && React.createElement(AISlug, {
+    className: "WACHeader__Slug",
+    size: AI_LABEL_SIZE.EXTRA_SMALL,
+    alignment: isRTL ? POPOVER_ALIGNMENT.BOTTOM_LEFT : POPOVER_ALIGNMENT.BOTTOM_RIGHT
+  }, React.createElement("div", {
+    slot: "body-text"
+  }, React.createElement("h4", {
+    className: "WACHeader__Slug-title"
+  }, languagePack.ai_slug_title), React.createElement("div", {
+    className: "WACHeader__Slug-description"
+  }, React.createElement("div", null, languagePack.ai_slug_description), !isHidden && React.createElement(WriteableElement$1, {
+    slotName: WriteableElementName.AI_TOOLTIP_AFTER_DESCRIPTION_ELEMENT,
+    id: `aiTooltipAfterDescription${serviceManager.namespace.suffix}`
+  })))), showRestartButton && React.createElement(HeaderButton, {
+    className: "WACHeader__RestartButton",
+    label: languagePack.buttons_restart,
+    onClick: onClickRestart,
+    buttonRef: restartButtonRef,
+    tooltipPosition: isRTL ? "right" : "left"
+  }, React.createElement(Restart, null)), !useHideCloseButton && React.createElement(HeaderButton, {
+    className: cx("WACHeader__CloseButton", {
+      WACReverseIcon: closeReverseIcon
+    }),
+    isReversible: closeIsReversible,
+    label: languagePack.launcher_isOpen,
+    onClick: async () => {
+      onClickClose();
+    },
+    buttonRef: closeButtonRef,
+    tooltipPosition: isRTL ? "right" : "left",
+    testId: makeTestId(PageObjectId.CLOSE_CHAT, testIdPrefix)
+  }, closeIcon), showCloseAndRestartButton && React.createElement(HeaderButton, {
+    className: "WACHeader__CloseAndRestartButton",
+    label: languagePack.header_ariaCloseRestart,
+    onClick: () => setConfirmModelOpen(true),
+    buttonRef: closeAndRestartButtonRef,
+    tooltipPosition: isRTL ? "right" : "left"
+  }, React.createElement(CloseLarge, {
+    className: "WACIcon__Close"
+  }))), confirmModelOpen && React.createElement(ConfirmModal, {
+    title: languagePack.closeAndRestartModal_title,
+    message: languagePack.closeAndRestartModal_message,
+    onConfirm: onConfirm,
+    onCancel: closeConfirmModel,
+    cancelButtonLabel: languagePack.closeAndRestartModal_cancel,
+    confirmButtonLabel: languagePack.closeAndRestartModal_confirm,
+    modalAnnounceMessage: languagePack.closeAndRestartModal_message,
+    serviceManager: serviceManager
+  })));
+}
+
+function HeaderButton({onClick: onClick, buttonRef: buttonRef, label: label, className: className, children: children, buttonKind: buttonKind, isReversible: isReversible = true, tooltipPosition: tooltipPosition, testId: testId}) {
+  return React.createElement(Button, {
+    ref: buttonRef,
+    className: cx(className, {
+      WACDirectionHasReversibleSVG: isReversible
+    }),
+    onClick: onClick,
+    hasIconOnly: true,
+    iconDescription: label,
+    size: ButtonSizeEnum.MEDIUM,
+    kind: buttonKind || ButtonKindEnum.GHOST,
+    tooltipPosition: tooltipPosition,
+    "data-testid": testId
+  }, children);
+}
+
+const HeaderExport = React.memo(forwardRef(Header));
+
+export { AriaLiveMessageExport as A, ConfirmModal as C, HeaderExport as H, ModalPortalRootContext as M, WEB_COMPONENT_PREFIX as W, WriteableElement$1 as a, CSS_CLASS_PREFIX as b, useUUID as u };