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

package/dist/es/chat.Chat.js

@@ -0,0 +1,2009 @@
+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useContext, PureComponent, Fragment, Component } from "react";
+
+import { injectIntl, FormattedMessage } from "react-intl";
+
+import { useSelector, shallowEqual, connect } from "react-redux";
+
+import cx from "classnames";
+
+import throttle from "lodash-es/throttle.js";
+
+import { createComponent } from "@lit/react";
+
+import { __decorate } from "tslib";
+
+import { LitElement, html, unsafeCSS, css } from "lit";
+
+import { property } from "lit/decorators.js";
+
+import { c as carbonElement } from "./chat.customElement.js";
+
+import { W as WEB_COMPONENT_PREFIX, a as WriteableElement, A as AriaLiveMessageExport, C as ConfirmModal } from "./chat.Header.js";
+
+import { s as selectAgentDisplayState, a as selectInputState } from "./chat.selectors.js";
+
+import ScreenOff from "@carbon/icons-react/es/ScreenOff.js";
+
+import { Button, ActionableNotification, Loading } from "@carbon/react";
+
+import { u as useLanguagePack } from "./chat.AppState.js";
+
+import { u as useServiceManager, d as doFocusRef, S as ServiceManagerContext, a as doScrollElement, g as getScrollBottom, f as focusOnFirstFocusableItemInArrayOfElements } from "./chat.usePrevious.js";
+
+import { u as useDynamicCSSProperties, A as AnnounceOnMountComponentExport, w as withAriaAnnouncer, V as VisuallyHidden } from "./chat.VideoComponent.js";
+
+import UserAvatar from "@carbon/icons-react/es/UserAvatar.js";
+
+import { A as AvailabilityMessage, n as nodeToText, M as MessageTypeComponent, E as EndAgentChatModal } from "./chat.MessageTypeComponent.js";
+
+import { W as WriteableElementName, b as CarbonTheme, F as FileStatusValue } from "./chat.dynamic-imports.js";
+
+import { a as actions } from "./chat.actions.js";
+
+import { M as MessageErrorState, S as ScreenShareState } from "./chat.LocalMessageItem.js";
+
+import { I as IS_MOBILE } from "./chat.browserUtils.js";
+
+import { A as AUTO_SCROLL_EXTRA, a as AUTO_SCROLL_THROTTLE_TIMEOUT } from "./chat.constants.js";
+
+import { i as isConnectToAgent, a as isRequest, b as isResponse, r as renderAsUserDefinedMessage, c as isOptionItem, d as isSingleItemCarousel, e as arrayLastValue } from "./chat.messageUtils.js";
+
+import { a as createDidCatchErrorData, b as consoleError } from "./chat.miscUtils.js";
+
+import ChatBot from "@carbon/icons-react/es/ChatBot.js";
+
+import CheckmarkFilled from "@carbon/icons-react/es/CheckmarkFilled.js";
+
+import Headset from "@carbon/icons-react/es/Headset.js";
+
+import { u as uuid } from "./chat.uuid.js";
+
+import "./chat.carbonTypes.js";
+
+import { I as InlineError } from "./chat.MountChildrenOnDelay.js";
+
+import dayjs from "dayjs";
+
+import { b as MessageResponseTypes, A as AgentMessageType } from "./chat.Messages.js";
+
+import memoizeOne from "memoize-one";
+
+import { CatastrophicError as CatastrophicErrorExport } from "./chat.CatastrophicError.js";
+
+import { B as BotHeaderExport } from "./chat.BotHeader.js";
+
+import { I as InputExport } from "./chat.Input.js";
+
+import { O as OverlayPanelName } from "./chat.PageObjectId.js";
+
+import "@carbon/web-components/es-custom/components/slug/index.js";
+
+import "@carbon/icons-react/es/Close.js";
+
+import "@carbon/icons-react/es/CloseLarge.js";
+
+import "@carbon/icons-react/es/DownToBottom.js";
+
+import "@carbon/icons-react/es/Menu.js";
+
+import "@carbon/icons-react/es/Restart.js";
+
+import "@carbon/icons-react/es/SidePanelClose.js";
+
+import "@carbon/icons-react/es/SubtractLarge.js";
+
+import "@carbon/web-components/es-custom/components/ai-label/defs.js";
+
+import "@carbon/web-components/es-custom/components/popover/defs.js";
+
+import "@carbon/web-components/es-custom/components/skeleton-icon/index.js";
+
+import "bind-decorator";
+
+import "@carbon/web-components/es-custom/components/button/index.js";
+
+import "@carbon/web-components/es-custom/components/overflow-menu/index.js";
+
+import "@carbon/icons-react/es/ChevronDown.js";
+
+import "@carbon/icons-react/es/ChevronUp.js";
+
+import "@floating-ui/react";
+
+import "./chat.HideComponent.js";
+
+import "focus-trap-react";
+
+import "react-dom";
+
+import "@carbon/web-components/es-custom/components/ai-label/ai-label-action-button.js";
+
+import "@carbon/web-components/es-custom/components/ai-label/ai-label.js";
+
+import "compute-scroll-into-view";
+
+import "tabbable";
+
+import "dayjs/locale/en.js";
+
+import "intl-messageformat";
+
+import "@carbon/icons-react/es/Music.js";
+
+import "@carbon/icons-react/es/Attachment.js";
+
+import "@carbon/web-components/es-custom/components/textarea/index.js";
+
+import "@carbon/web-components/es-custom/components/icon-button/index.js";
+
+import "@carbon/icon-helpers";
+
+import "@carbon/icons/es/thumbs-down/16.js";
+
+import "@carbon/icons/es/thumbs-down--filled/16.js";
+
+import "@carbon/icons/es/thumbs-up/16.js";
+
+import "@carbon/icons/es/thumbs-up--filled/16.js";
+
+import "lit/directives/unsafe-svg.js";
+
+import "@carbon/web-components/es-custom/components/tag/index.js";
+
+import "@carbon/web-components/es-custom/components/chat-button/index.js";
+
+import "@carbon/web-components/es-custom/components/button/button.js";
+
+import "@carbon/web-components/es-custom/components/layer/index.js";
+
+import "@carbon/icons-react/es/Checkmark.js";
+
+import "@carbon/icons-react/es/HelpDesk.js";
+
+import "@carbon/icons-react/es/Logout.js";
+
+import "./chat.RichText.js";
+
+import "dompurify";
+
+import "lit/directives/repeat.js";
+
+import "lit/directives/unsafe-html.js";
+
+import "./chat.htmlUtils.js";
+
+import "./chat.stringUtils.js";
+
+import "@carbon/icons-react/es/TouchInteraction.js";
+
+import "@carbon/icons-react/es/Send.js";
+
+import "@carbon/icons-react/es/ArrowRight.js";
+
+import "@carbon/icons-react/es/Launch.js";
+
+import "./chat.BodyWithFooterComponent.js";
+
+import "lodash-es/debounce.js";
+
+import "@carbon/icons-react/es/Link.js";
+
+import "@carbon/icons-react/es/Maximize.js";
+
+import "./chat.useCounter.js";
+
+import "./chat.useOnMount.js";
+
+import "./chat.IFrameComponent.js";
+
+import "csv-stringify/browser/esm/sync";
+
+import "@carbon/web-components/es-custom/components/data-table/index.js";
+
+import "@carbon/web-components/es-custom/components/checkbox/index.js";
+
+import "@carbon/icons/es/download/16.js";
+
+import "lit-html/directives/repeat.js";
+
+import "@carbon/web-components/es-custom/components/pagination/index.js";
+
+import "@carbon/web-components/es-custom/components/select/index.js";
+
+import "@carbon/web-components/es-custom/components/data-table/table-skeleton.js";
+
+import "@carbon/web-components/es-custom/components/inline-loading/index.js";
+
+import "@carbon/icons/es/checkmark--filled/16.js";
+
+import "@carbon/icons/es/chevron--right/16.js";
+
+import "@carbon/icons/es/error--filled/16.js";
+
+import "detect-browser";
+
+import "lodash-es/cloneDeep.js";
+
+import "uuid";
+
+import "@carbon/icons-react/es/ErrorFilled.js";
+
+import "@carbon/icons-react/es/Home.js";
+
+import "@carbon/icons-react/es/SendFilled.js";
+
+import "@carbon/icons/es/stop--filled/16.js";
+
+var css_248z = ".dots{\n  block-size:32px;\n  inline-size:32px;\n}\n\n.dot{\n  fill:none;\n  r:0;\n  stroke-width:0;\n  transform:translateY(0);\n}\n\n[data-carbon-theme=white] .dot,\n[data-carbon-theme=g10] .dot{\n  stroke:#001d6c;\n}\n\n[data-carbon-theme=g90] .dot,\n[data-carbon-theme=g100] .dot{\n  stroke:#f4f4f4;\n}\n\n@media screen and (prefers-reduced-motion: reduce){\n  .linear .dot--left{\n    animation:none;\n    animation-delay:1s, 1s, 2s, 2s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1, 1, infinite, infinite;\n    transform-origin:25% 50%;\n  }\n}\n.linear .dot--left{\n  animation:linear-load-size, linear-load-stroke, linear-loop-size, linear-loop-stroke;\n  animation-delay:1s, 1s, 2s, 2s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1, 1, infinite, infinite;\n  transform-origin:25% 50%;\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .linear .dot--center{\n    animation:none;\n    animation-delay:1.167s, 1.167s, 2.167s, 2.167s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1, 1, infinite, infinite;\n    transform-origin:50% 50%;\n  }\n}\n.linear .dot--center{\n  animation:linear-load-size, linear-load-stroke, linear-loop-size, linear-loop-stroke;\n  animation-delay:1.167s, 1.167s, 2.167s, 2.167s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1, 1, infinite, infinite;\n  transform-origin:50% 50%;\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .linear .dot--right{\n    animation:none;\n    animation-delay:1.334s, 1.334s, 2.334s, 2.334s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1, 1, infinite, infinite;\n    transform-origin:75% 50%;\n  }\n}\n.linear .dot--right{\n  animation:linear-load-size, linear-load-stroke, linear-loop-size, linear-loop-stroke;\n  animation-delay:1.334s, 1.334s, 2.334s, 2.334s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1, 1, infinite, infinite;\n  transform-origin:75% 50%;\n}\n\n[dir=rtl] .linear .dot--left{\n  animation-delay:1.334s, 1.334s, 2.334s, 2.334s, 7.334s, 7.334s;\n}\n[dir=rtl] .linear .dot--center{\n  animation-delay:1.167s, 1.167s, 2.167s, 2.167s, 7.167s, 7.167s;\n}\n[dir=rtl] .linear .dot--right{\n  animation-delay:1s, 1s, 2s, 2s, 7s, 7s;\n}\n\n@media screen and (prefers-reduced-motion: reduce){\n  .linear--no-loop .dot--left{\n    animation:none;\n    animation-delay:1s, 1s, 2s, 2s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1;\n    transform-origin:25% 50%;\n  }\n}\n.linear--no-loop .dot--left{\n  animation:linear-load-size, linear-load-stroke, linear-unload-size, linear-unload-stroke;\n  animation-delay:1s, 1s, 2s, 2s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1;\n  transform-origin:25% 50%;\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .linear--no-loop .dot--center{\n    animation:none;\n    animation-delay:1.167s, 1.167s, 2.167s, 2.167s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1;\n    transform-origin:50% 50%;\n  }\n}\n.linear--no-loop .dot--center{\n  animation:linear-load-size, linear-load-stroke, linear-unload-size, linear-unload-stroke;\n  animation-delay:1.167s, 1.167s, 2.167s, 2.167s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1;\n  transform-origin:50% 50%;\n}\n@media screen and (prefers-reduced-motion: reduce){\n  .linear--no-loop .dot--right{\n    animation:none;\n    animation-delay:1.334s, 1.334s, 2.334s, 2.334s;\n    animation-duration:1s;\n    animation-fill-mode:forwards;\n    animation-iteration-count:1;\n    transform-origin:75% 50%;\n  }\n}\n.linear--no-loop .dot--right{\n  animation:linear-load-size, linear-load-stroke, linear-unload-size, linear-unload-stroke;\n  animation-delay:1.334s, 1.334s, 2.334s, 2.334s;\n  animation-duration:1s;\n  animation-fill-mode:forwards;\n  animation-iteration-count:1;\n  transform-origin:75% 50%;\n}\n\n[dir=rtl] .linear--no-loop .dot--left{\n  animation-delay:1.334s, 1.334s, 2.334s, 2.334s;\n}\n[dir=rtl] .linear--no-loop .dot--center{\n  animation-delay:1.167s, 1.167s, 2.167s, 2.167s;\n}\n[dir=rtl] .linear--no-loop .dot--right{\n  animation-delay:1s, 1s, 2s, 2s;\n}\n\n@keyframes linear-load-size{\n  0%{\n    animation-timing-function:cubic-bezier(0, 0, 0.3, 1);\n    r:0;\n  }\n  25%{\n    animation-timing-function:cubic-bezier(0, 0, 0.3, 1);\n    r:2.5px;\n  }\n  83.3%{\n    r:0.875px;\n  }\n  100%{\n    r:0.875px;\n  }\n}\n@keyframes linear-load-stroke{\n  0%{\n    animation-timing-function:cubic-bezier(0, 0, 0.3, 1);\n    stroke-width:0;\n  }\n  8.33%{\n    stroke-width:1.72;\n  }\n  100%{\n    stroke-width:1.72;\n  }\n}\n@keyframes linear-loop-size{\n  0%{\n    animation-timing-function:cubic-bezier(0, 0, 0.3, 1);\n    r:0.875px;\n  }\n  25%{\n    animation-timing-function:cubic-bezier(0, 0, 0.3, 1);\n    r:2.5px;\n  }\n  91.66%{\n    r:0.875px;\n  }\n  100%{\n    r:0.875px;\n  }\n}\n@keyframes linear-loop-stroke{\n  0%{\n    animation-timing-function:cubic-bezier(0.4, 0.14, 1, 1);\n    stroke-width:1.72;\n  }\n  100%{\n    stroke-width:1.72;\n  }\n}\n@keyframes linear-unload-size{\n  0%{\n    r:0.875px;\n  }\n  8.33%{\n    r:0.875px;\n  }\n  33.33%{\n    animation-timing-function:cubic-bezier(0.4, 0.14, 1, 1);\n    r:2.5px;\n  }\n  58.33%{\n    r:0;\n  }\n  100%{\n    r:0;\n  }\n}\n@keyframes linear-unload-stroke{\n  0%{\n    stroke-width:1.72;\n  }\n  50%{\n    stroke-width:1.72;\n  }\n  58.33%{\n    stroke-width:0;\n  }\n  100%{\n    stroke-width:0;\n  }\n}\n@media (prefers-reduced-motion: reduce){\n  .dot--left,\n  .dot--center,\n  .dot--right{\n    animation:none;\n    transition:none;\n  }\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
+ */ const INLINE_LOADING_TAG_NAME = `${WEB_COMPONENT_PREFIX}-inline-loading`;
+
+let CDSInlineLoadingElement = class CDSInlineLoadingElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.bounce = false;
+    this.loop = false;
+    this.quickLoad = false;
+    this.carbonTheme = "g10";
+  }
+  getAnimationEffect() {
+    const classNames = [];
+    if (this.quickLoad === true) {
+      classNames.push("quick-load");
+    }
+    if (this.bounce === true && this.loop === true) {
+      classNames.push("vertical");
+    }
+    if (this.bounce === false && this.loop === true) {
+      classNames.push("linear");
+    }
+    if (this.bounce === true && this.loop === false) {
+      classNames.push("vertical--no-loop");
+    }
+    if (classNames.length) {
+      return classNames.join(" ");
+    }
+    return "linear--no-loop";
+  }
+  render() {
+    return html`<div
+      data-carbon-theme=${this.carbonTheme}
+      class=${this.getAnimationEffect()}
+    >
+      <svg class="dots" viewBox="0 0 32 32">
+        <circle class="dot dot--left" cx="8" cy="16" />
+        <circle class="dot dot--center" cx="16" cy="16" r="2" />
+        <circle class="dot dot--right" cx="24" cy="16" r="2" />
+      </svg>
+    </div>`;
+  }
+};
+
+CDSInlineLoadingElement.styles = css`
+    ${unsafeCSS(css_248z)}
+  `;
+
+__decorate([ property({
+  type: Boolean
+}) ], CDSInlineLoadingElement.prototype, "bounce", void 0);
+
+__decorate([ property({
+  type: Boolean
+}) ], CDSInlineLoadingElement.prototype, "loop", void 0);
+
+__decorate([ property({
+  type: Boolean
+}) ], CDSInlineLoadingElement.prototype, "quickLoad", void 0);
+
+__decorate([ property({
+  type: String
+}) ], CDSInlineLoadingElement.prototype, "carbonTheme", void 0);
+
+CDSInlineLoadingElement = __decorate([ carbonElement(INLINE_LOADING_TAG_NAME) ], CDSInlineLoadingElement);
+
+/*
+ *  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 InlineLoadingComponent = createComponent({
+  tagName: INLINE_LOADING_TAG_NAME,
+  elementClass: CDSInlineLoadingElement,
+  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 AgentAvatar(props) {
+  const {agentProfile: agentProfile, languagePack: languagePack, width: width, height: height} = props;
+  const agentName = agentProfile?.nickname;
+  const avatarStyles = useDynamicCSSProperties({
+    width: width,
+    height: height
+  });
+  const avatarUrl = agentProfile?.profile_picture_url;
+  const [hasError, setHasError] = useState(false);
+  let component;
+  useEffect(() => {
+    setHasError(false);
+  }, [ avatarUrl ]);
+  if (!hasError && avatarUrl) {
+    component = React.createElement("img", {
+      src: avatarUrl,
+      alt: languagePack.agent_ariaAgentAvatar,
+      onError: () => setHasError(true)
+    });
+  } else if (agentName?.match(/^[\x20-\xFE]+$/)) {
+    component = React.createElement("div", {
+      "aria-label": languagePack.agent_ariaAgentAvatar,
+      className: "WACAgentAvatar__Circle",
+      style: avatarStyles
+    }, React.createElement("div", {
+      className: "WACAgentAvatar__Letter"
+    }, agentName.charAt(0)));
+  } else {
+    component = React.createElement(UserAvatar, {
+      size: 32,
+      width: width ? Number(width.replace("px", "")) : undefined,
+      height: height ? Number(height.replace("px", "")) : undefined,
+      "aria-label": languagePack.agent_ariaAgentAvatar
+    });
+  }
+  return React.createElement("div", {
+    className: "WACAgentAvatar"
+  }, component);
+}
+
+/*
+ *  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 AgentBanner(props, ref) {
+  const {onButtonClick: onButtonClick} = props;
+  const languagePack = useLanguagePack();
+  const serviceManager = useServiceManager();
+  const persistedAgentState = useSelector(state => state.persistedToBrowserStorage.chatState.agentState);
+  const agentState = useSelector(state => state.agentState);
+  const {isConnecting: isConnecting, availability: availability, isScreenSharing: isScreenSharing} = agentState;
+  const displayState = useSelector(selectAgentDisplayState, shallowEqual);
+  const {agentProfile: agentProfile} = persistedAgentState;
+  const buttonRef = useRef();
+  let line1;
+  let line2;
+  let avatar;
+  let buttonLabel;
+  let animation;
+  if (isConnecting) {
+    animation = React.createElement("div", {
+      className: "WACLoadingBar__ConnectingAnimation"
+    });
+    line1 = languagePack.agent_connecting;
+    line2 = React.createElement(AnnounceOnMountComponentExport, {
+      announceOnce: languagePack.agent_connecting
+    }, React.createElement(AvailabilityMessage, {
+      availability: availability,
+      fallbackText: languagePack.agent_connectWaiting
+    }));
+    buttonLabel = languagePack.agent_connectButtonCancel;
+  } else {
+    line1 = agentProfile?.nickname || languagePack.agent_noName;
+    buttonLabel = languagePack.agent_connectedButtonEndChat;
+    avatar = React.createElement(AgentAvatar, {
+      agentProfile: agentProfile,
+      languagePack: languagePack,
+      width: "32px",
+      height: "32px"
+    });
+  }
+  const onStopSharing = () => {
+    serviceManager.humanAgentService.screenShareStop();
+  };
+  useImperativeHandle(ref, () => ({
+    requestFocus: () => {
+      if (buttonRef.current) {
+        doFocusRef(buttonRef);
+        return true;
+      }
+      return false;
+    }
+  }));
+  return React.createElement("div", {
+    className: cx("WACAgentBanner", {
+      "WACAgentBanner--connected": !isConnecting
+    })
+  }, displayState.isConnectingOrConnected && React.createElement("div", {
+    className: "WACAgentBanner__Body"
+  }, avatar, React.createElement("div", {
+    className: "WACAgentBanner__AgentInfo"
+  }, React.createElement("div", {
+    className: "WACAgentBanner__AgentLine1"
+  }, line1), line2 && React.createElement("div", {
+    className: "WACAgentBanner__AgentLine2"
+  }, line2)), React.createElement(Button, {
+    ref: buttonRef,
+    className: "WACAgentBanner__Button WACAgentBanner__CancelButton",
+    onClick: onButtonClick,
+    size: "sm"
+  }, buttonLabel)), isScreenSharing && React.createElement(Button, {
+    className: "WACAgentBanner__Button WACAgentBanner__StopSharingButton",
+    kind: "danger",
+    size: "sm",
+    renderIcon: ScreenOff,
+    onClick: onStopSharing
+  }, languagePack.agent_sharingStopSharingButton), animation);
+}
+
+const AgentBannerExport = React.memo(forwardRef(AgentBanner));
+
+/*
+ *  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 AgentBannerContainer({onButtonClick: onButtonClick, bannerRef: bannerRef}) {
+  const agentState = useSelector(state => state.agentState);
+  const displayState = useSelector(selectAgentDisplayState, shallowEqual);
+  if (displayState.isConnectingOrConnected || agentState.isScreenSharing) {
+    return React.createElement(AgentBannerExport, {
+      ref: bannerRef,
+      onButtonClick: onButtonClick
+    });
+  }
+  return 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
+ */ function LatestWelcomeNodes({children: children}) {
+  const {namespace: namespace} = useServiceManager();
+  return React.createElement(React.Fragment, null, React.createElement(WriteableElement, {
+    slotName: WriteableElementName.WELCOME_NODE_BEFORE_ELEMENT,
+    id: `welcomeNodeBeforeElement${namespace.suffix}`
+  }), children);
+}
+
+var LatestWelcomeNodes$1 = React.memo(LatestWelcomeNodes);
+
+/*
+ *  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 Notifications({notifications: notifications, serviceManager: serviceManager}) {
+  const languagePack = useLanguagePack();
+  if (notifications.length) {
+    return React.createElement("div", {
+      className: "WACNotifications"
+    }, notifications.map(notification => {
+      const item = notification.notification;
+      const onClose = () => {
+        serviceManager.store.dispatch(actions.removeNotifications({
+          notificationID: notification.id
+        }));
+      };
+      let onActionButtonClick;
+      let actionButtonLabel;
+      if (item.actionButtonLabel && item.onActionButtonClick) {
+        onActionButtonClick = () => {
+          item.onActionButtonClick();
+          onClose();
+        };
+        actionButtonLabel = item.actionButtonLabel;
+      }
+      return React.createElement("div", {
+        className: "WACNotifications__Notification",
+        key: notification.id
+      }, React.createElement(ActionableNotification, {
+        "aria-label": languagePack.notifications_toastClose,
+        actionButtonLabel: actionButtonLabel,
+        onActionButtonClick: onActionButtonClick,
+        kind: item.kind,
+        onClose: () => {
+          onClose();
+          item.onCloseButtonClick?.();
+        },
+        subtitle: item.message,
+        title: item.title,
+        hasFocus: false
+      }));
+    }));
+  }
+  return 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
+ */ function withServiceManager(Component) {
+  const Wrapped = React.forwardRef((props, ref) => {
+    const serviceManager = useContext(ServiceManagerContext);
+    return React.createElement(Component, {
+      ...props,
+      ref: ref,
+      serviceManager: serviceManager
+    });
+  });
+  Wrapped.displayName = `withServiceManager(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
+}
+
+/*
+ *  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 Avatar({theme: theme}) {
+  const a = `a-${uuid()}`;
+  const b = `b-${uuid()}`;
+  const c = `c-${uuid()}`;
+  const d = `d-${uuid()}`;
+  const e = `e-${uuid()}`;
+  if (theme === CarbonTheme.WHITE || theme === CarbonTheme.G10) {
+    return React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      className: "cds--watsonx-avatar",
+      "aria-hidden": "true"
+    }, React.createElement("defs", null, React.createElement("linearGradient", {
+      id: a,
+      x1: "1186.526",
+      y1: "2863.168",
+      x2: "1199.825",
+      y2: "2845.109",
+      gradientTransform: "matrix(.8312 .55596 -.27409 .40979 -198.894 -1827.398)",
+      gradientUnits: "userSpaceOnUse"
+    }, React.createElement("stop", {
+      offset: ".3"
+    }), React.createElement("stop", {
+      offset: "1",
+      stopOpacity: "0"
+    })), React.createElement("linearGradient", {
+      id: b,
+      x1: "1189.388",
+      y1: "2911.794",
+      x2: "1200.478",
+      y2: "2896.735",
+      gradientTransform: "rotate(146.223 380.87 -882.286) scale(1 -.493)",
+      gradientUnits: "userSpaceOnUse"
+    }, React.createElement("stop", {
+      offset: ".3"
+    }), React.createElement("stop", {
+      offset: ".9",
+      stopOpacity: "0"
+    })), React.createElement("linearGradient", {
+      id: c,
+      x1: "-4995.033",
+      y1: "-20162.835",
+      x2: "-4981.733",
+      y2: "-20180.895",
+      gradientTransform: "rotate(-146.223 -971.422 -5714.55) scale(1 .493)",
+      gradientUnits: "userSpaceOnUse"
+    }, React.createElement("stop", {
+      offset: ".32"
+    }), React.createElement("stop", {
+      offset: ".354",
+      stopOpacity: ".798"
+    }), React.createElement("stop", {
+      offset: ".7",
+      stopOpacity: "0"
+    })), React.createElement("linearGradient", {
+      id: d,
+      x1: "0",
+      y1: "32",
+      x2: "32",
+      y2: "0",
+      gradientUnits: "userSpaceOnUse"
+    }, React.createElement("stop", {
+      offset: ".1",
+      stopColor: "#a56eff"
+    }), React.createElement("stop", {
+      offset: ".9",
+      stopColor: "#0f62fe"
+    })), React.createElement("mask", {
+      id: e,
+      x: "0",
+      y: "0",
+      width: "32",
+      height: "32",
+      maskUnits: "userSpaceOnUse"
+    }, React.createElement("path", {
+      d: "M16 1A14.915 14.915 0 0 0 5.502 5.286l1.4 1.429A12.922 12.922 0 0 1 16 3.001c.977 0 1.929.109 2.845.315-3.402.921-5.916 4.026-5.916 7.715 0 .782.118 1.537.328 2.252a7.978 7.978 0 0 0-2.188-.312c-3.704 0-6.819 2.534-7.726 5.957a12.954 12.954 0 0 1-.345-2.927c0-2.117.492-4.134 1.462-5.996l-1.773-.924A15.037 15.037 0 0 0 .999 16c0 8.271 6.729 15 15 15 3.949 0 7.678-1.522 10.498-4.286l-1.4-1.428A12.926 12.926 0 0 1 15.999 29c-3.648 0-6.945-1.516-9.309-3.945a5.959 5.959 0 0 1-1.621-4.086c0-3.309 2.691-6 6-6a6.006 6.006 0 0 1 5.897 7.107l1.967.367a7.971 7.971 0 0 0-.192-3.726 7.976 7.976 0 0 0 2.187.312c3.71 0 6.829-2.542 7.73-5.974.22.947.34 1.931.34 2.944 0 2.117-.492 4.134-1.462 5.995l1.773.924a15.034 15.034 0 0 0 1.688-6.919C31 7.729 24.272 1 16 1zm4.93 16.03c-3.309 0-6-2.692-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6z",
+      style: {
+        fill: "#fff",
+        strokeWidth: 0
+      }
+    }), React.createElement("path", {
+      style: {
+        fill: `url(#${a})`,
+        strokeWidth: 0
+      },
+      d: "M8 9 0 0h16l2.305 3.304L8 9z"
+    }), React.createElement("path", {
+      style: {
+        fill: `url(#${b})`,
+        strokeWidth: 0
+      },
+      d: "m12 31 4.386-9L6 21 2 31h10z"
+    }), React.createElement("path", {
+      style: {
+        fill: `url(#${c})`,
+        strokeWidth: 0
+      },
+      d: "m24 23 8 9H16l-2.304-3.305L24 23z"
+    }), React.createElement("path", {
+      style: {
+        strokeWidth: 0
+      },
+      d: "M16 31h-4.283L15 22h2l-1 9z"
+    }))), React.createElement("g", {
+      style: {
+        mask: `url(#${e})`
+      }
+    }, React.createElement("path", {
+      style: {
+        fill: `url(#${d})`,
+        strokeWidth: 0
+      },
+      d: "M0 0h32v32H0z"
+    })), React.createElement("circle", {
+      cx: "6",
+      cy: "6",
+      r: "2",
+      style: {
+        fill: "#001d6c",
+        strokeWidth: 0
+      }
+    }), React.createElement("circle", {
+      cx: "26",
+      cy: "26",
+      r: "2",
+      style: {
+        fill: "#001d6c",
+        strokeWidth: 0
+      }
+    }), React.createElement("path", {
+      d: "M16 31c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zm0-8c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z",
+      style: {
+        fill: "#001d6c",
+        strokeWidth: 0
+      }
+    }));
+  }
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    className: "cds--watsonx-avatar",
+    "aria-hidden": "true"
+  }, React.createElement("defs", null, React.createElement("linearGradient", {
+    id: a,
+    x1: "1196.653",
+    y1: "2930.892",
+    x2: "1209.953",
+    y2: "2912.832",
+    gradientTransform: "matrix(.8312 .55596 -.27409 .40979 -188.767 -1860.755)",
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: ".3"
+  }), React.createElement("stop", {
+    offset: "1",
+    stopOpacity: "0"
+  })), React.createElement("linearGradient", {
+    id: b,
+    x1: "1299.261",
+    y1: "2844.072",
+    x2: "1310.351",
+    y2: "2829.012",
+    gradientTransform: "rotate(146.223 440.869 -882.286) scale(1 -.493)",
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: ".3"
+  }), React.createElement("stop", {
+    offset: ".9",
+    stopOpacity: "0"
+  })), React.createElement("linearGradient", {
+    id: c,
+    x1: "-4885.16",
+    y1: "-20230.559",
+    x2: "-4871.86",
+    y2: "-20248.618",
+    gradientTransform: "rotate(-146.223 -911.421 -5714.55) scale(1 .493)",
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: ".32"
+  }), React.createElement("stop", {
+    offset: ".354",
+    stopOpacity: ".798"
+  }), React.createElement("stop", {
+    offset: ".7",
+    stopOpacity: "0"
+  })), React.createElement("linearGradient", {
+    id: d,
+    x1: "0",
+    y1: "32",
+    x2: "32",
+    y2: "0",
+    gradientUnits: "userSpaceOnUse"
+  }, React.createElement("stop", {
+    offset: ".1",
+    stopColor: "#be95ff"
+  }), React.createElement("stop", {
+    offset: ".9",
+    stopColor: "#4589ff"
+  })), React.createElement("mask", {
+    id: e,
+    x: "0",
+    y: "0",
+    width: "32",
+    height: "32",
+    maskUnits: "userSpaceOnUse"
+  }, React.createElement("path", {
+    d: "M16 1A14.915 14.915 0 0 0 5.502 5.286l1.4 1.429A12.922 12.922 0 0 1 16 3.001c.977 0 1.929.109 2.845.315-3.402.921-5.916 4.026-5.916 7.715 0 .782.118 1.537.328 2.252a7.978 7.978 0 0 0-2.188-.312c-3.704 0-6.819 2.534-7.726 5.957a12.954 12.954 0 0 1-.345-2.927c0-2.117.492-4.134 1.462-5.996l-1.773-.924A15.037 15.037 0 0 0 .999 16c0 8.271 6.729 15 15 15 3.949 0 7.678-1.522 10.498-4.286l-1.4-1.428A12.926 12.926 0 0 1 15.999 29c-3.648 0-6.945-1.516-9.309-3.945a5.959 5.959 0 0 1-1.621-4.086c0-3.309 2.691-6 6-6a6.006 6.006 0 0 1 5.897 7.107l1.967.367a7.971 7.971 0 0 0-.192-3.726 7.976 7.976 0 0 0 2.187.312c3.71 0 6.829-2.542 7.73-5.974.22.947.34 1.931.34 2.944 0 2.117-.492 4.134-1.462 5.995l1.773.924a15.034 15.034 0 0 0 1.688-6.919c0-8.271-6.729-15-15-15zm4.93 16.03c-3.309 0-6-2.692-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6z",
+    style: {
+      fill: "#fff",
+      strokeWidth: 0
+    }
+  }), React.createElement("path", {
+    style: {
+      fill: `url(#${a})`,
+      strokeWidth: 0
+    },
+    d: "M8 9 0 0h16l2.305 3.305L8 9z"
+  }), React.createElement("path", {
+    style: {
+      fill: `url(#${b})`,
+      strokeWidth: 0
+    },
+    d: "m12 31 4.386-9L6 21 2 31h10z"
+  }), React.createElement("path", {
+    style: {
+      fill: `url(#${c})`,
+      strokeWidth: 0
+    },
+    d: "m24 23 8 9H16l-2.305-3.305L24 23z"
+  }), React.createElement("path", {
+    style: {
+      strokeWidth: 0
+    },
+    d: "M16 31h-4.283L15 22h2l-1 9z"
+  }))), React.createElement("g", {
+    style: {
+      mask: `url(#${e})`
+    }
+  }, React.createElement("path", {
+    style: {
+      fill: `url(#${d})`,
+      strokeWidth: 0
+    },
+    d: "M0 0h32v32H0z"
+  })), React.createElement("circle", {
+    cx: "6",
+    cy: "6",
+    r: "2",
+    style: {
+      fill: "#f4f4f4",
+      strokeWidth: 0
+    }
+  }), React.createElement("circle", {
+    cx: "26",
+    cy: "26",
+    r: "2",
+    style: {
+      fill: "#f4f4f4",
+      strokeWidth: 0
+    }
+  }), React.createElement("path", {
+    d: "M16 31c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zm0-8c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z",
+    style: {
+      fill: "#f4f4f4",
+      strokeWidth: 0
+    }
+  }));
+}
+
+const AvatarExport = React.memo(Avatar);
+
+/*
+ *  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 IconHolder(props) {
+  return React.createElement("div", {
+    className: "WACIconHolder"
+  }, props.icon);
+}
+
+/*
+ *  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 ImageWithFallback(props) {
+  const {url: url, alt: alt, fallback: fallback} = props;
+  const [hasError, setHasError] = useState(false);
+  useEffect(() => {
+    setHasError(false);
+  }, [ url ]);
+  let component;
+  if (!hasError && url) {
+    component = React.createElement("img", {
+      src: url,
+      alt: alt,
+      onError: () => setHasError(true)
+    });
+  } else {
+    component = fallback;
+  }
+  return React.createElement("div", {
+    className: "WACImageWithFallback"
+  }, component);
+}
+
+/*
+ *  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 timestampToTimeString(timestamp) {
+  return dayjs(timestamp).format("LT");
+}
+
+/*
+ *  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
+ */ var MoveFocusType;
+
+(function(MoveFocusType) {
+  MoveFocusType[MoveFocusType["FIRST"] = 1] = "FIRST";
+  MoveFocusType[MoveFocusType["LAST"] = 2] = "LAST";
+  MoveFocusType[MoveFocusType["NEXT"] = 3] = "NEXT";
+  MoveFocusType[MoveFocusType["PREVIOUS"] = 4] = "PREVIOUS";
+  MoveFocusType[MoveFocusType["INPUT"] = 5] = "INPUT";
+})(MoveFocusType || (MoveFocusType = {}));
+
+class MessageComponent extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      didRenderErrorOccur: false,
+      focusHandleHasFocus: false
+    };
+    this.ref = React.createRef();
+    this.messageRef = React.createRef();
+    this.focusHandleRef = React.createRef();
+    this.getLocalMessage = () => this.props.localMessageItem;
+    this.onHandleFocus = () => {
+      this.setState({
+        focusHandleHasFocus: true
+      });
+    };
+    this.onHandleBlur = () => {
+      this.setState({
+        focusHandleHasFocus: false
+      });
+    };
+    this.onHandleKeyDown = event => {
+      if (event.altKey || event.metaKey || event.ctrlKey || event.shiftKey) {
+        return;
+      }
+      let moveFocus;
+      if (event.key === "ArrowUp") {
+        moveFocus = MoveFocusType.PREVIOUS;
+      } else if (event.key === "ArrowDown") {
+        moveFocus = MoveFocusType.NEXT;
+      } else if (event.key === "Home") {
+        moveFocus = MoveFocusType.FIRST;
+      } else if (event.key === "End") {
+        moveFocus = MoveFocusType.LAST;
+      } else if (event.key === "Escape") {
+        moveFocus = MoveFocusType.INPUT;
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        this.reAnnounceFocusHandle();
+        return;
+      }
+      if (moveFocus) {
+        event.preventDefault();
+        this.props.requestMoveFocus(moveFocus, this.props.messagesIndex);
+      }
+    };
+  }
+  getWidgetSaidMessage() {
+    const {intl: intl, botName: botName, localMessageItem: localMessageItem} = this.props;
+    let messageId;
+    if (localMessageItem.item.agent_message_type) {
+      if (localMessageItem.item.response_type === MessageResponseTypes.TEXT) {
+        messageId = "messages_agentSaid";
+      }
+    } else {
+      messageId = "messages_botSaid";
+    }
+    return messageId ? intl.formatMessage({
+      id: messageId
+    }, {
+      botName: botName
+    }) : null;
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.serviceManager.actions.errorOccurred(createDidCatchErrorData("Message", error, errorInfo));
+    this.setState({
+      didRenderErrorOccur: true
+    });
+  }
+  componentDidMount() {
+    const uiState = this.props.localMessageItem.ui_state;
+    if (uiState.needsAnnouncement) {
+      this.props.ariaAnnouncer(this.ref.current);
+      this.props.serviceManager.store.dispatch(actions.setMessageWasAnnounced(uiState.id));
+    }
+  }
+  componentDidUpdate() {
+    const uiState = this.props.localMessageItem.ui_state;
+    if (uiState.needsAnnouncement) {
+      this.props.ariaAnnouncer(this.ref.current);
+      this.props.serviceManager.store.dispatch(actions.setMessageWasAnnounced(uiState.id));
+    }
+  }
+  shouldRenderFailedMessage() {
+    if (this.state.didRenderErrorOccur) {
+      return true;
+    }
+    const {localMessageItem: localMessageItem, message: message} = this.props;
+    return isConnectToAgent(localMessageItem.item) && message.history?.agent_no_service_desk;
+  }
+  reAnnounceFocusHandle() {
+    const handle = this.focusHandleRef.current;
+    if (!handle) {
+      return;
+    }
+    this.props.ariaAnnouncer(handle.getAttribute("aria-label"));
+  }
+  requestHandleFocus() {
+    const {languagePack: languagePack, intl: intl, message: message, botName: botName} = this.props;
+    const whoAnnouncement = isRequest(message) ? languagePack.messages_youSaid : intl.formatMessage({
+      id: "messages_botSaid"
+    }, {
+      botName: botName
+    });
+    const strings = [ whoAnnouncement ];
+    nodeToText(this.messageRef.current, strings);
+    this.focusHandleRef.current.setAttribute("aria-label", strings.join(" "));
+    doFocusRef(this.focusHandleRef, true);
+  }
+  renderFailedRenderMessage() {
+    const {messagesIndex: messagesIndex} = this.props;
+    return React.createElement("div", {
+      className: `WAC__message WAC__message--inlineError WAC__message-${messagesIndex} ${this.props.className || ""}`,
+      ref: this.ref
+    }, React.createElement("div", {
+      className: "WAC__message--padding"
+    }, React.createElement("div", {
+      className: "WAC__bot-message"
+    }, React.createElement(VisuallyHidden, null, this.getWidgetSaidMessage()), React.createElement("div", {
+      className: "WAC__received WAC__message-vertical-padding WAC__received--text"
+    }, React.createElement(InlineError, {
+      text: this.props.languagePack.errors_singleMessage
+    })))));
+  }
+  renderAvatarLine(localMessageItem, message) {
+    let avatar;
+    const {languagePack: languagePack, botAvatarURL: botAvatarURL, useAITheme: useAITheme, carbonTheme: carbonTheme} = this.props;
+    const timestamp = timestampToTimeString(message.history.timestamp);
+    let label;
+    let actorName;
+    let iconClassName = "";
+    if (isResponse(message)) {
+      const agentMessageType = localMessageItem.item.agent_message_type;
+      const agentProfile = message.history.agent_profile;
+      if (isAgentStatusMessage(agentMessageType)) {
+        return null;
+      }
+      const fromAgent = agentMessageType === AgentMessageType.FROM_AGENT;
+      if (fromAgent || agentProfile?.profile_picture_url) {
+        avatar = React.createElement(ImageWithFallback, {
+          url: agentProfile?.profile_picture_url,
+          alt: fromAgent ? languagePack.agent_ariaAgentAvatar : languagePack.agent_ariaGenericAvatar,
+          fallback: React.createElement(IconHolder, {
+            icon: React.createElement(Headset, null)
+          })
+        });
+        iconClassName = "WACMessage__Avatar--agent";
+      } else {
+        const icon = useAITheme ? React.createElement(AvatarExport, {
+          theme: carbonTheme
+        }) : React.createElement(IconHolder, {
+          icon: React.createElement(ChatBot, null)
+        });
+        const imageUrl = useAITheme ? undefined : botAvatarURL;
+        avatar = React.createElement(ImageWithFallback, {
+          url: imageUrl,
+          alt: languagePack.agent_ariaGenericBotAvatar,
+          fallback: icon
+        });
+        iconClassName = "WACMessage__Avatar--bot";
+      }
+      if (fromAgent || agentProfile?.nickname) {
+        actorName = agentProfile?.nickname || languagePack.agent_agentNoNameTitle;
+      } else if (useAITheme) {
+        actorName = "watsonx";
+      }
+      label = React.createElement("span", {
+        "data-wac-exclude-node-read": true
+      }, React.createElement(FormattedMessage, {
+        id: "message_labelBot",
+        values: {
+          timestamp: timestamp,
+          actorName: actorName
+        }
+      }));
+    } else {
+      label = React.createElement(FormattedMessage, {
+        id: "message_labelYou",
+        values: {
+          timestamp: timestamp
+        }
+      });
+    }
+    return React.createElement("div", {
+      className: "WACMessage__AvatarLine",
+      key: `${message.id}-avatar-line`
+    }, avatar && React.createElement("div", {
+      className: `WACMessage__Avatar ${iconClassName}`
+    }, avatar), React.createElement("div", {
+      className: "WACMessage__Label"
+    }, label));
+  }
+  renderMessageState(message) {
+    const {languagePack: languagePack} = this.props;
+    let element;
+    let className;
+    let showBelowMessage = false;
+    const errorState = message.history?.error_state;
+    const fileStatus = message.history?.file_upload_status;
+    if (errorState === MessageErrorState.FAILED) {
+      element = React.createElement(InlineError, {
+        text: languagePack.errors_singleMessage
+      });
+      className = "WAC__message-error-failed";
+      showBelowMessage = true;
+    } else if (fileStatus === FileStatusValue.UPLOADING) {
+      element = React.createElement(Loading, {
+        withOverlay: false,
+        small: true,
+        "aria-label": languagePack.fileSharing_statusUploading
+      });
+      className = "WAC__message-status-file-uploading";
+    } else if (fileStatus === "success") {
+      element = React.createElement(CheckmarkFilled, {
+        "aria-label": languagePack.fileSharing_statusUploading
+      });
+      className = "WAC__message-status-file-success";
+    }
+    return element && {
+      element: React.createElement("div", {
+        className: `WAC__message-status ${className}`
+      }, element),
+      showBelowMessage: showBelowMessage
+    };
+  }
+  renderFocusHandle() {
+    return React.createElement("div", {
+      className: "WACMessage--focusHandle",
+      ref: this.focusHandleRef,
+      tabIndex: -1,
+      onFocus: this.onHandleFocus,
+      onBlur: this.onHandleBlur,
+      onKeyDown: event => this.onHandleKeyDown(event),
+      onClick: () => this.reAnnounceFocusHandle(),
+      role: "button"
+    });
+  }
+  render() {
+    if (this.shouldRenderFailedMessage()) {
+      return this.renderFailedRenderMessage();
+    }
+    const {serviceManager: serviceManager, config: config, localMessageItem: localMessageItem, message: message, languagePack: languagePack, requestInputFocus: requestInputFocus, messagesIndex: messagesIndex, disableUserInputs: disableUserInputs, showAvatarLine: showAvatarLine, className: className, doAutoScroll: doAutoScroll, isMessageForInput: isMessageForInput, scrollElementIntoView: scrollElementIntoView, isFirstMessageItem: isFirstMessageItem, hideFeedback: hideFeedback, allowNewFeedback: allowNewFeedback} = this.props;
+    const {isIntermediateStreaming: isIntermediateStreaming, isWelcomeResponse: isWelcomeResponse, disableFadeAnimation: disableFadeAnimation} = localMessageItem.ui_state;
+    const messageItem = localMessageItem.item;
+    const responseType = messageItem.response_type;
+    const agentMessageType = messageItem.agent_message_type;
+    const fromHistory = message.history.from_history;
+    const readWidgetSaid = isFirstMessageItem;
+    if (isIntermediateStreaming && !canRenderIntermediateStreaming(messageItem.response_type)) {
+      return false;
+    }
+    const messageComponent = React.createElement(MessageTypeComponent, {
+      serviceManager: serviceManager,
+      languagePack: languagePack,
+      requestInputFocus: requestInputFocus,
+      message: localMessageItem,
+      originalMessage: message,
+      disableUserInputs: disableUserInputs,
+      isMessageForInput: isMessageForInput,
+      config: config,
+      doAutoScroll: doAutoScroll,
+      scrollElementIntoView: scrollElementIntoView,
+      hideFeedback: hideFeedback,
+      allowNewFeedback: allowNewFeedback
+    });
+    const isCustomMessage = renderAsUserDefinedMessage(localMessageItem.item);
+    const noAnimation = isWelcomeResponse || disableFadeAnimation;
+    const agentClassName = getAgentMessageClassName(agentMessageType, responseType, isCustomMessage);
+    const messageIsRequest = isRequest(message);
+    const isSystemMessage = isAgentStatusMessage(localMessageItem.item.agent_message_type);
+    let isOptionResponseWithoutTitleOrDescription = false;
+    if (isOptionItem(localMessageItem.item)) {
+      if (!localMessageItem.item.title && !localMessageItem.item.description) {
+        isOptionResponseWithoutTitleOrDescription = true;
+      }
+    }
+    let messageState;
+    if (messageIsRequest) {
+      messageState = this.renderMessageState(message);
+    }
+    return React.createElement("div", {
+      id: `WAC__message-${messagesIndex}${serviceManager.namespace.suffix}`,
+      className: cx(`WAC__message WAC__message-${messagesIndex}`, className, agentMessageType && "WAC__message--agentMessage", {
+        "WAC__message--withAvatarLine": showAvatarLine,
+        "WAC__message--request": messageIsRequest,
+        "WAC__message--systemMessage": isSystemMessage,
+        "WAC__message--response": !messageIsRequest,
+        "WAC__message--no-animation": noAnimation,
+        "WAC__message--custom": isCustomMessage,
+        "WAC__message--disabled-inputs": disableUserInputs,
+        "WAC__message--has-focus": this.state.focusHandleHasFocus,
+        "WAC__message--option-response-without-title-or-description": isOptionResponseWithoutTitleOrDescription
+      }),
+      ref: this.ref
+    }, this.renderFocusHandle(), showAvatarLine && this.renderAvatarLine(localMessageItem, message), React.createElement("div", {
+      className: "WAC__message--padding"
+    }, isResponse(message) && React.createElement("div", {
+      className: "WAC__bot-message"
+    }, readWidgetSaid && React.createElement(VisuallyHidden, null, this.getWidgetSaidMessage()), React.createElement("div", {
+      className: cx("WAC__received", "WAC__message-vertical-padding", agentClassName, {
+        "WAC__received--text": responseType === MessageResponseTypes.TEXT,
+        "WAC__received--image": responseType === MessageResponseTypes.IMAGE,
+        "WAC__received--options": responseType === MessageResponseTypes.OPTION,
+        "WAC__received--inlineError": responseType === MessageResponseTypes.INLINE_ERROR,
+        "WAC__received--iframePreviewCard": responseType === MessageResponseTypes.IFRAME,
+        "WAC__received--video": responseType === MessageResponseTypes.VIDEO,
+        "WAC__received--audio": responseType === MessageResponseTypes.AUDIO,
+        "WAC__received--date": responseType === MessageResponseTypes.DATE,
+        "WAC__received--card": responseType === MessageResponseTypes.CARD,
+        "WAC__received--carousel": responseType === MessageResponseTypes.CAROUSEL,
+        "WAC__received--conversationalSearch": responseType === MessageResponseTypes.CONVERSATIONAL_SEARCH,
+        "WAC__received--carouselSingle": isSingleItemCarousel(localMessageItem.item),
+        "WAC__received--button": responseType === MessageResponseTypes.BUTTON,
+        "WAC__received--grid": responseType === MessageResponseTypes.GRID,
+        "WAC__received--fullWidth": localMessageItem.ui_state.fullWidth,
+        "WAC__message--historical": fromHistory
+      }),
+      ref: this.messageRef
+    }, React.createElement("div", {
+      className: "WAC__received--inner"
+    }, messageComponent))), messageIsRequest && React.createElement("div", {
+      className: "WAC__sent-container"
+    }, React.createElement("div", {
+      className: cx("WAC__sentAndMessageState-container", "WAC__message-vertical-padding", {
+        "WAC__sentAndMessageState--belowMessage": messageState?.showBelowMessage
+      })
+    }, !messageState?.showBelowMessage && messageState?.element, React.createElement("div", {
+      className: "WAC__sent"
+    }, React.createElement(VisuallyHidden, null, languagePack.messages_youSaid), React.createElement("div", {
+      className: "WAC__sent--bubble"
+    }, React.createElement("div", {
+      ref: this.messageRef
+    }, messageComponent))), messageState?.showBelowMessage && messageState?.element))));
+  }
+}
+
+function getAgentMessageClassName(agentMessageType, messageResponseType, isUserDefinedResponse) {
+  if (isUserDefinedResponse) {
+    return "WAC__received--agentCustom";
+  }
+  if (!messageResponseType || messageResponseType !== MessageResponseTypes.TEXT && messageResponseType !== MessageResponseTypes.BUTTON) {
+    return "";
+  }
+  switch (agentMessageType) {
+   case null:
+   case undefined:
+   case AgentMessageType.FROM_USER:
+    return null;
+
+   case AgentMessageType.RELOAD_WARNING:
+   case AgentMessageType.DISCONNECTED:
+    return "WAC__received--chatStatusMessage";
+
+   case AgentMessageType.FROM_AGENT:
+    return "WAC__received--fromAgent";
+
+   default:
+    return "WAC__received--agentStatusMessage";
+  }
+}
+
+function isAgentStatusMessage(agentMessageType) {
+  switch (agentMessageType) {
+   case null:
+   case undefined:
+   case AgentMessageType.FROM_USER:
+   case AgentMessageType.RELOAD_WARNING:
+   case AgentMessageType.DISCONNECTED:
+   case AgentMessageType.FROM_AGENT:
+   case AgentMessageType.INLINE_ERROR:
+    return false;
+
+   default:
+    return true;
+  }
+}
+
+function canRenderIntermediateStreaming(type) {
+  switch (type) {
+   case MessageResponseTypes.IMAGE:
+   case MessageResponseTypes.VIDEO:
+   case MessageResponseTypes.AUDIO:
+   case MessageResponseTypes.OPTION:
+   case MessageResponseTypes.IFRAME:
+   case MessageResponseTypes.INLINE_ERROR:
+   case MessageResponseTypes.CONVERSATIONAL_SEARCH:
+   case MessageResponseTypes.USER_DEFINED:
+   case MessageResponseTypes.TEXT:
+    return true;
+
+   default:
+    return false;
+  }
+}
+
+var MessageComponent$1 = withAriaAnnouncer(injectIntl(MessageComponent, {
+  forwardRef: true
+}));
+
+/*
+ *  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 MessagesComponent extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      scrollHandleHasFocus: false
+    };
+    this.messageRefs = new Map;
+    this.messagesContainerWithScrollingRef = React.createRef();
+    this.scrollHandleRef = React.createRef();
+    this.agentBannerRef = React.createRef();
+    this.onResize = () => {
+      if (this.props.messageState.isScrollAnchored) {
+        const element = this.messagesContainerWithScrollingRef.current;
+        if (element) {
+          element.scrollTop = element.scrollHeight;
+        }
+      }
+    };
+    this.doAutoScroll = throttle((options = {}) => {
+      try {
+        debugAutoScroll("[doAutoScroll] Running doAutoScroll", options);
+        const {scrollToTop: scrollToTop, scrollToBottom: scrollToBottom} = options;
+        const {localMessageItems: localMessageItems, messageState: messageState, allMessagesByID: allMessagesByID} = this.props;
+        const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
+        const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
+        const scrollElement = this.messagesContainerWithScrollingRef.current;
+        if (scrollToTop !== undefined) {
+          doScrollElement(scrollElement, scrollToTop, 0, false);
+          return;
+        }
+        if (scrollToBottom !== undefined) {
+          const scrollTop = scrollElement.scrollHeight - scrollElement.offsetHeight - scrollToBottom;
+          doScrollElement(scrollElement, scrollTop, 0, false);
+          return;
+        }
+        let animate = true;
+        let setScrollTop;
+        const lastLocalItemIndex = localMessageItems.length - 1;
+        const lastLocalItem = localMessageItems.length ? localMessageItems[lastLocalItemIndex] : null;
+        const lastMessage = allMessagesByID[lastLocalItem?.fullMessageID];
+        if (!lastLocalItem) {
+          debugAutoScroll("[doAutoScroll] No last time");
+          animate = false;
+          setScrollTop = 0;
+        } else if (isTypingCounter > 0 || isLoadingCounter > 0 || isAgentTyping) {
+          setScrollTop = scrollElement.scrollHeight;
+          debugAutoScroll("[doAutoScroll] isTyping visible", isTypingCounter);
+        } else {
+          const shouldScrollToMessage = (localItem, message) => {
+            if (isResponse(message)) {
+              const messageRequest = allMessagesByID[message?.request_id];
+              return messageRequest?.history?.silent && messageRequest.input?.text !== "";
+            }
+            return isRequest(message);
+          };
+          let messageIndex = localMessageItems.length - 1;
+          let localItem = localMessageItems[messageIndex];
+          let lastScrollableMessageComponent = this.messageRefs.get(localItem?.ui_state.id);
+          while (messageIndex >= 1) {
+            localItem = localMessageItems[messageIndex];
+            const message = allMessagesByID[localItem?.fullMessageID];
+            if (shouldScrollToMessage(localItem, message)) {
+              lastScrollableMessageComponent = this.messageRefs.get(localItem?.ui_state.id);
+              debugAutoScroll(`[doAutoScroll] lastScrollableMessageComponent=${messageIndex}`, localMessageItems[messageIndex], message);
+              break;
+            }
+            messageIndex--;
+          }
+          if (lastScrollableMessageComponent) {
+            const offsetTop = lastScrollableMessageComponent.ref.current?.offsetTop;
+            setScrollTop = offsetTop + AUTO_SCROLL_EXTRA;
+            debugAutoScroll(`[doAutoScroll] Scrolling to message offsetTop=${offsetTop}`);
+          } else {
+            setScrollTop = -1;
+            debugAutoScroll("[doAutoScroll] No message found");
+          }
+        }
+        if (setScrollTop !== -1) {
+          if (setScrollTop >= scrollElement.scrollTop) {
+            if (lastMessage?.history?.from_history) {
+              animate = false;
+            }
+            debugAutoScroll(`[doAutoScroll] doScrollElement`, scrollElement, setScrollTop, animate);
+            doScrollElement(scrollElement, setScrollTop, 0, animate);
+            this.checkScrollAnchor(true, setScrollTop);
+          }
+        }
+      } catch (error) {
+        consoleError("An error occurred while attempting to scroll.", error);
+      }
+    }, AUTO_SCROLL_THROTTLE_TIMEOUT);
+    this.getContainerScrollBottom = () => getScrollBottom(this.messagesContainerWithScrollingRef?.current);
+    this.scrollElementIntoView = (element, paddingTop = 8, paddingBottom = 8) => {
+      const scrollElement = this.messagesContainerWithScrollingRef.current;
+      const scrollRect = scrollElement.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+      const topDistanceFromTop = elementRect.top - scrollRect.top + scrollElement.scrollTop - paddingTop;
+      const bottomDistanceFromTop = elementRect.bottom - scrollRect.top + scrollElement.scrollTop + paddingBottom;
+      const elementHeight = element.offsetHeight + paddingTop + paddingBottom;
+      if (topDistanceFromTop < scrollElement.scrollTop || elementHeight > scrollElement.offsetHeight) {
+        doScrollElement(scrollElement, topDistanceFromTop, 0);
+      } else if (bottomDistanceFromTop > scrollElement.scrollTop + scrollElement.offsetHeight) {
+        doScrollElement(scrollElement, bottomDistanceFromTop - scrollElement.offsetHeight, 0);
+      }
+    };
+    this.requestMoveFocus = (moveFocusType, currentMessageIndex) => {
+      if (moveFocusType === MoveFocusType.INPUT) {
+        this.props.requestInputFocus();
+      } else {
+        const {localMessageItems: localMessageItems} = this.props;
+        let index;
+        switch (moveFocusType) {
+         case MoveFocusType.LAST:
+          index = localMessageItems.length - 1;
+          break;
+
+         case MoveFocusType.NEXT:
+          index = currentMessageIndex + 1;
+          if (index >= localMessageItems.length) {
+            index = 0;
+          }
+          break;
+
+         case MoveFocusType.PREVIOUS:
+          index = currentMessageIndex - 1;
+          if (index < 0) {
+            index = localMessageItems.length - 1;
+          }
+          break;
+
+         default:
+          index = 0;
+          break;
+        }
+        const messageItem = localMessageItems[index];
+        const ref = this.messageRefs.get(messageItem?.ui_state.id);
+        if (ref) {
+          ref.requestHandleFocus();
+        }
+      }
+    };
+  }
+  componentDidMount() {
+    this.scrollPanelObserver = new ResizeObserver(this.onResize);
+    this.scrollPanelObserver.observe(this.messagesContainerWithScrollingRef.current);
+    this.previousScrollOffsetHeight = this.messagesContainerWithScrollingRef.current.offsetHeight;
+  }
+  componentDidUpdate(oldProps) {
+    const newProps = this.props;
+    const numMessagesChanged = oldProps.localMessageItems.length !== newProps.localMessageItems.length;
+    const oldAgentDisplayState = selectAgentDisplayState(oldProps);
+    const newAgentDisplayState = selectAgentDisplayState(newProps);
+    const typingChanged = oldProps.messageState.isTypingCounter !== newProps.messageState.isTypingCounter || oldProps.messageState.isLoadingCounter !== newProps.messageState.isLoadingCounter || oldAgentDisplayState.isAgentTyping !== newAgentDisplayState.isAgentTyping;
+    if (numMessagesChanged || typingChanged) {
+      const newLastItem = arrayLastValue(newProps.localMessageItems);
+      const oldLastItem = arrayLastValue(oldProps.localMessageItems);
+      const lastItemChanged = newLastItem !== oldLastItem;
+      if (lastItemChanged || typingChanged) {
+        this.doAutoScroll();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.scrollPanelObserver.unobserve(this.messagesContainerWithScrollingRef.current);
+  }
+  checkScrollAnchor(fromAutoScroll, assumeScrollTop) {
+    const scrollElement = this.messagesContainerWithScrollingRef.current;
+    if (fromAutoScroll || this.previousScrollOffsetHeight === scrollElement.offsetHeight && !this.props.suspendScrollDetection) {
+      const assumedScrollTop = assumeScrollTop !== undefined ? assumeScrollTop : scrollElement.scrollTop;
+      const isScrollAnchored = assumedScrollTop >= scrollElement.scrollHeight - scrollElement.offsetHeight;
+      if (isScrollAnchored !== this.props.messageState.isScrollAnchored) {
+        this.props.serviceManager.store.dispatch(actions.setChatMessagesStateProperty("isScrollAnchored", isScrollAnchored));
+      }
+    }
+    this.previousScrollOffsetHeight = scrollElement.offsetHeight;
+  }
+  requestAgentBannerFocus() {
+    if (this.agentBannerRef.current) {
+      return this.agentBannerRef.current.requestFocus();
+    }
+    return false;
+  }
+  doScrollToMessage(messageID, animate = true) {
+    try {
+      const {localMessageItems: localMessageItems} = this.props;
+      let panelComponent;
+      for (let index = 0; index <= localMessageItems.length; index++) {
+        const messageItem = localMessageItems[index];
+        if (messageItem.fullMessageID === messageID) {
+          panelComponent = this.messageRefs.get(messageItem.ui_state.id);
+          break;
+        }
+      }
+      if (panelComponent) {
+        const scrollElement = this.messagesContainerWithScrollingRef.current;
+        const setScrollTop = panelComponent.ref.current.offsetTop;
+        doScrollElement(scrollElement, setScrollTop, 0, animate);
+        this.checkScrollAnchor(true, setScrollTop);
+      }
+    } catch (error) {
+      consoleError("An error occurred while attempting to scroll.", error);
+    }
+  }
+  getLastOutputMessageElements() {
+    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
+    const lastMessageItem = arrayLastValue(localMessageItems);
+    const lastMessage = allMessagesByID[lastMessageItem?.fullMessageID];
+    if (isResponse(lastMessage)) {
+      const elements = [];
+      let hasFoundLastBotMessageGroupID = false;
+      for (let index = localMessageItems.length - 1; index >= 0; index--) {
+        const messageItem = localMessageItems[index];
+        const componentRef = this.messageRefs.get(messageItem?.ui_state.id);
+        if (componentRef) {
+          const {getLocalMessage: getLocalMessage} = componentRef;
+          if (getLocalMessage().fullMessageID === lastMessage.id) {
+            hasFoundLastBotMessageGroupID = true;
+            const element = componentRef.ref?.current;
+            if (element) {
+              elements.push(element);
+            } else {
+              break;
+            }
+          } else if (hasFoundLastBotMessageGroupID) {
+            break;
+          }
+        }
+      }
+      return elements.reverse();
+    }
+    return [];
+  }
+  renderTypingIndicator(isTypingMessage, index) {
+    return React.createElement("div", {
+      className: `WAC__message WAC__message-${index} WAC__message--lastMessage`
+    }, React.createElement("div", {
+      className: "WAC__message--padding"
+    }, isTypingMessage && React.createElement(AriaLiveMessageExport, {
+      message: isTypingMessage
+    }), React.createElement("div", {
+      className: "WAC__bot-message"
+    }, React.createElement("div", {
+      className: "WAC__received WAC__received--loading WAC__message-vertical-padding"
+    }, React.createElement("div", {
+      className: "WAC__received--inner"
+    }, React.createElement(InlineLoadingComponent, {
+      loop: true,
+      carbonTheme: this.props.carbonTheme
+    }))))));
+  }
+  renderMessage(localMessage, fullMessage, messagesIndex, showBeforeWelcomeNodeElement, isMessageForInput, isFirstMessageItem, lastMessageID) {
+    const {serviceManager: serviceManager, config: config, languagePack: languagePack, requestInputFocus: requestInputFocus, persistedToBrowserStorage: persistedToBrowserStorage, botName: botName, messageState: messageState, locale: locale, botAvatarURL: botAvatarURL, carbonTheme: carbonTheme, useAITheme: useAITheme} = this.props;
+    const inputState = selectInputState(this.props);
+    const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
+    const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
+    const {chatState: chatState} = persistedToBrowserStorage;
+    const {disclaimersAccepted: disclaimersAccepted} = chatState;
+    if (config.public.disclaimer?.is_on && !disclaimersAccepted[window.location.hostname]) {
+      return null;
+    }
+    const totalMessagesWithTyping = this.props.localMessageItems.length + (isTypingCounter > 0 || isLoadingCounter > 0 || isAgentTyping ? 1 : 0);
+    const isLastMessage = messagesIndex === totalMessagesWithTyping - 1;
+    const className = cx({
+      "WAC__message--firstMessage": messagesIndex === 0,
+      "WAC__message--lastMessage": isLastMessage
+    });
+    const allowNewFeedback = localMessage.fullMessageID === lastMessageID;
+    const messageItemID = localMessage.ui_state.id;
+    const message = React.createElement(MessageComponent$1, {
+      ref: component => {
+        if (component) {
+          this.messageRefs.set(messageItemID, component);
+        } else {
+          this.messageRefs.delete(messageItemID);
+        }
+      },
+      className: className,
+      config: config,
+      localMessageItem: localMessage,
+      message: fullMessage,
+      languagePack: languagePack,
+      requestInputFocus: requestInputFocus,
+      serviceManager: serviceManager,
+      messagesIndex: messagesIndex,
+      botName: botName,
+      disableUserInputs: inputState.isReadonly,
+      isMessageForInput: isMessageForInput,
+      showAvatarLine: isFirstMessageItem,
+      botAvatarURL: botAvatarURL,
+      requestMoveFocus: this.requestMoveFocus,
+      doAutoScroll: this.doAutoScroll,
+      scrollElementIntoView: this.scrollElementIntoView,
+      isFirstMessageItem: isFirstMessageItem,
+      locale: locale,
+      carbonTheme: carbonTheme,
+      useAITheme: useAITheme,
+      allowNewFeedback: allowNewFeedback,
+      hideFeedback: false
+    });
+    if (showBeforeWelcomeNodeElement) {
+      return React.createElement(LatestWelcomeNodes$1, {
+        welcomeNodeBeforeElement: serviceManager.writeableElements[WriteableElementName.WELCOME_NODE_BEFORE_ELEMENT],
+        key: messageItemID
+      }, message);
+    }
+    return React.createElement(Fragment, {
+      key: messageItemID
+    }, message);
+  }
+  renderAgentBanner() {
+    return React.createElement(AgentBannerContainer, {
+      bannerRef: this.agentBannerRef,
+      onButtonClick: this.props.onEndAgentChat
+    });
+  }
+  renderScrollHandle(atTop) {
+    const {languagePack: languagePack} = this.props;
+    let labelKey;
+    if (IS_MOBILE) {
+      labelKey = atTop ? "messages_scrollHandle" : "messages_scrollHandleEnd";
+    } else {
+      labelKey = atTop ? "messages_scrollHandleDetailed" : "messages_scrollHandleEndDetailed";
+    }
+    const onClick = IS_MOBILE ? undefined : () => this.requestMoveFocus(atTop ? MoveFocusType.FIRST : MoveFocusType.LAST, 0);
+    return React.createElement("button", {
+      type: "button",
+      className: "WACMessages--scrollHandle",
+      ref: this.scrollHandleRef,
+      tabIndex: 0,
+      "aria-label": languagePack[labelKey] || languagePack.messages_scrollHandle,
+      onClick: onClick,
+      onFocus: () => this.setState({
+        scrollHandleHasFocus: true
+      }),
+      onBlur: () => this.setState({
+        scrollHandleHasFocus: false
+      })
+    });
+  }
+  getMessageIDForUserInput() {
+    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
+    for (let index = localMessageItems.length - 1; index >= 0; index--) {
+      const message = localMessageItems[index];
+      const originalMessage = allMessagesByID[message.fullMessageID];
+      if (isRequest(originalMessage) && originalMessage?.history?.error_state !== MessageErrorState.FAILED) {
+        return null;
+      }
+      if (isResponse(originalMessage)) {
+        return message.fullMessageID;
+      }
+    }
+    return null;
+  }
+  renderMessages(messageIDForInput) {
+    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
+    const renderMessageArray = [];
+    const lastMessageID = arrayLastValue(localMessageItems)?.fullMessageID;
+    let previousMessageID = null;
+    for (let currentIndex = 0; currentIndex < localMessageItems.length; currentIndex++) {
+      const localMessageItem = localMessageItems[currentIndex];
+      const fullMessage = allMessagesByID[localMessageItem.fullMessageID];
+      const isMessageForInput = messageIDForInput === localMessageItem.fullMessageID;
+      const isFirstMessageItem = previousMessageID !== localMessageItem.fullMessageID;
+      const showBeforeWelcomeNodeElement = localMessageItem.ui_state.isWelcomeResponse && isFirstMessageItem;
+      previousMessageID = localMessageItem.fullMessageID;
+      renderMessageArray.push(this.renderMessage(localMessageItem, fullMessage, currentIndex, showBeforeWelcomeNodeElement, isMessageForInput, isFirstMessageItem, lastMessageID));
+    }
+    return renderMessageArray;
+  }
+  render() {
+    const {localMessageItems: localMessageItems, messageState: messageState, intl: intl, botName: botName, serviceManager: serviceManager, notifications: notifications} = this.props;
+    const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
+    const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
+    const {scrollHandleHasFocus: scrollHandleHasFocus} = this.state;
+    const messageIDForInput = this.getMessageIDForUserInput();
+    const regularMessages = this.renderMessages(messageIDForInput);
+    let isTypingMessage;
+    if (isAgentTyping) {
+      isTypingMessage = intl.formatMessage({
+        id: "messages_agentIsTyping"
+      });
+    } else if (isTypingCounter) {
+      isTypingMessage = intl.formatMessage({
+        id: "messages_botIsTyping"
+      }, {
+        botName: botName
+      });
+    } else if (isLoadingCounter) {
+      isTypingMessage = intl.formatMessage({
+        id: "messages_botIsLoading"
+      }, {
+        botName: botName
+      });
+    }
+    return React.createElement("div", {
+      id: `WACMessages--holder${serviceManager.namespace.suffix}`,
+      className: "WACMessages--holder"
+    }, this.renderAgentBanner(), React.createElement("div", {
+      className: cx("WACMessages__Wrapper", {
+        "WACMessages__Wrapper--scrollHandleHasFocus": scrollHandleHasFocus
+      })
+    }, React.createElement("div", {
+      id: `WAC__messages${serviceManager.namespace.suffix}`,
+      className: "WAC__messages",
+      ref: this.messagesContainerWithScrollingRef,
+      onScroll: () => this.checkScrollAnchor()
+    }, this.renderScrollHandle(true), regularMessages, (Boolean(isTypingCounter) || Boolean(isLoadingCounter) || isAgentTyping) && this.renderTypingIndicator(isTypingMessage, localMessageItems.length), React.createElement(Notifications, {
+      serviceManager: serviceManager,
+      notifications: notifications
+    }), this.renderScrollHandle(false))));
+  }
+}
+
+function debugAutoScroll(message, ...args) {}
+
+var MessagesComponent$1 = withServiceManager(connect(state => state, null, null, {
+  forwardRef: true
+})(MessagesComponent));
+
+/*
+ *  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 createUnmappingMemoizer() {
+  return memoizeOne((keys, map) => keys.map(key => map[key]), isUnmappingEqual);
+}
+
+function isUnmappingEqual(newArgs, oldArgs) {
+  const [keys1, map1] = newArgs;
+  const [keys2, map2] = oldArgs;
+  if (keys1 === keys2 && map1 === map2) {
+    return true;
+  }
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (let index = 0; index <= keys1.length; index++) {
+    const key1 = keys1[index];
+    const key2 = keys2[index];
+    if (key1 !== key2) {
+      return false;
+    }
+    const value1 = map1[key1];
+    const value2 = map2[key2];
+    if (value1 !== value2) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/*
+ *  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 RequestScreenShareModal() {
+  const serviceManager = useServiceManager();
+  const languagePack = useLanguagePack();
+  const onConfirm = () => {
+    serviceManager.humanAgentService?.screenShareUpdateRequestState(ScreenShareState.ACCEPTED);
+  };
+  const onCancel = () => {
+    serviceManager.humanAgentService?.screenShareUpdateRequestState(ScreenShareState.DECLINED);
+  };
+  const title = languagePack.agent_sharingRequestTitle;
+  const message = languagePack.agent_sharingRequestMessage;
+  const cancelButtonLabel = languagePack.agent_sharingDeclineButton;
+  const confirmButtonLabel = languagePack.agent_sharingAcceptButton;
+  return React.createElement(ConfirmModal, {
+    title: title,
+    message: message,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    cancelButtonLabel: cancelButtonLabel,
+    confirmButtonLabel: confirmButtonLabel,
+    modalAnnounceMessage: message,
+    serviceManager: serviceManager
+  });
+}
+
+/*
+ *  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 Chat extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      showEndChatConfirmation: false,
+      hasCaughtError: false
+    };
+    this.inputRef = React.createRef();
+    this.headerRef = React.createRef();
+    this.messagesRef = React.createRef();
+    this.messagesToArray = createUnmappingMemoizer();
+    this.hideConfirmEndChat = () => {
+      this.setState({
+        showEndChatConfirmation: false
+      });
+      setTimeout(() => {
+        this.requestInputFocus();
+      });
+    };
+    this.showConfirmEndChat = () => {
+      this.setState({
+        showEndChatConfirmation: true
+      });
+    };
+    this.confirmAgentEndChat = () => {
+      this.hideConfirmEndChat();
+      this.props.serviceManager.humanAgentService.endChat(true);
+    };
+    this.requestDefaultFocus = () => {
+      if (!this.headerRef?.current?.requestFocus()) {
+        doFocusRef(this.messagesRef.current?.scrollHandleRef);
+      }
+    };
+    this.requestInputFocus = () => {
+      const {agentDisplayState: agentDisplayState} = this.props;
+      try {
+        if (agentDisplayState.isConnectingOrConnected && agentDisplayState.disableInput) {
+          if (this.messagesRef.current.requestAgentBannerFocus()) {
+            return;
+          }
+        }
+        if (this.inputRef.current) {
+          if (this.props.inputState.fieldVisible && !this.shouldDisableInput()) {
+            this.inputRef.current.takeFocus();
+          } else {
+            const htmlElements = this.messagesRef.current.getLastOutputMessageElements();
+            if (!focusOnFirstFocusableItemInArrayOfElements(htmlElements)) {
+              this.requestDefaultFocus();
+            }
+          }
+        } else {
+          this.requestDefaultFocus();
+        }
+      } catch (error) {
+        consoleError("An error occurred in Chat.requestInputFocus", error);
+      }
+    };
+    this.doAutoScroll = options => {
+      this.messagesRef.current?.doAutoScroll(options);
+    };
+    this.getMessagesScrollBottom = () => this.messagesRef?.current?.getContainerScrollBottom();
+    this.onFilesSelectedForUpload = uploads => {
+      const isInputToAgent = this.props.agentDisplayState.isConnectingOrConnected;
+      if (isInputToAgent) {
+        this.props.serviceManager.humanAgentService.filesSelectedForUpload(uploads);
+        if (!this.props.inputState.allowMultipleFileUploads) {
+          this.requestInputFocus();
+        }
+      }
+    };
+  }
+  async scrollOnHydrationComplete() {
+    this.doAutoScroll();
+  }
+  componentDidMount() {
+    if (this.props.isHydrationAnimationComplete) {
+      setTimeout(() => {
+        this.scrollOnHydrationComplete();
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const {isHydrationAnimationComplete: isHydrationAnimationComplete, agentState: agentState} = this.props;
+    if (isHydrationAnimationComplete && !prevProps.isHydrationAnimationComplete) {
+      setTimeout(() => {
+        this.scrollOnHydrationComplete();
+      });
+    }
+    const connectingChanged = agentState.isConnecting !== prevProps.agentState.isConnecting;
+    if (this.state.showEndChatConfirmation && connectingChanged) {
+      this.hideConfirmEndChat();
+    }
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.serviceManager.actions.errorOccurred(createDidCatchErrorData("Chat", error, errorInfo));
+    this.setState({
+      hasCaughtError: true
+    });
+  }
+  doScrollToMessage(messageID, animate = true) {
+    this.messagesRef.current?.doScrollToMessage(messageID, animate);
+  }
+  getMessageInput() {
+    return this.inputRef.current?.getMessageInput();
+  }
+  shouldDisableInput() {
+    return this.props.inputState.isReadonly || this.props.agentDisplayState.disableInput;
+  }
+  shouldDisableSend() {
+    const {isHydrated: isHydrated} = this.props;
+    return this.shouldDisableInput() || !isHydrated;
+  }
+  renderMessagesAndInput() {
+    const {languagePack: languagePack, messageState: messageState, intl: intl, allMessageItemsByID: allMessageItemsByID, isHydrated: isHydrated, serviceManager: serviceManager, inputState: inputState, onUserTyping: onUserTyping, agentState: agentState, botName: botName, onSendInput: onSendInput, locale: locale, useAITheme: useAITheme, carbonTheme: carbonTheme, agentDisplayState: agentDisplayState} = this.props;
+    const {fieldVisible: fieldVisible, files: files, allowFileUploads: allowFileUploads, allowedFileUploadTypes: allowedFileUploadTypes, allowMultipleFileUploads: allowMultipleFileUploads, stopStreamingButtonState: stopStreamingButtonState} = inputState;
+    const {fileUploadInProgress: fileUploadInProgress} = agentState;
+    const {inputPlaceholderKey: inputPlaceholderKey} = agentDisplayState;
+    const numFiles = files?.length ?? 0;
+    const anyCurrentFiles = numFiles > 0 || fileUploadInProgress;
+    const showUploadButtonDisabled = anyCurrentFiles && !allowMultipleFileUploads;
+    return React.createElement(React.Fragment, null, isHydrated && React.createElement("div", {
+      className: "WACMessagesContainer__NonInputContainer"
+    }, React.createElement(MessagesComponent$1, {
+      ref: this.messagesRef,
+      messageState: messageState,
+      localMessageItems: this.messagesToArray(messageState.localMessageIDs, allMessageItemsByID),
+      requestInputFocus: this.requestInputFocus,
+      botName: botName,
+      intl: intl,
+      onEndAgentChat: this.showConfirmEndChat,
+      locale: locale,
+      useAITheme: useAITheme,
+      carbonTheme: carbonTheme
+    })), React.createElement(WriteableElement, {
+      slotName: WriteableElementName.BEFORE_INPUT_ELEMENT,
+      id: `beforeInputElement${serviceManager.namespace.suffix}`
+    }), React.createElement(InputExport, {
+      ref: this.inputRef,
+      languagePack: languagePack,
+      serviceManager: serviceManager,
+      disableInput: this.shouldDisableInput(),
+      disableSend: this.shouldDisableSend(),
+      isInputVisible: fieldVisible,
+      onSendInput: onSendInput,
+      onUserTyping: onUserTyping,
+      showUploadButton: allowFileUploads,
+      disableUploadButton: showUploadButtonDisabled,
+      allowedFileUploadTypes: allowedFileUploadTypes,
+      allowMultipleFileUploads: allowMultipleFileUploads,
+      pendingUploads: files,
+      onFilesSelectedForUpload: this.onFilesSelectedForUpload,
+      placeholder: languagePack[inputPlaceholderKey],
+      isStopStreamingButtonVisible: stopStreamingButtonState.isVisible,
+      isStopStreamingButtonDisabled: stopStreamingButtonState.isDisabled,
+      testIdPrefix: OverlayPanelName.MAIN
+    }), this.state.showEndChatConfirmation && React.createElement(EndAgentChatModal, {
+      onConfirm: this.confirmAgentEndChat,
+      onCancel: this.hideConfirmEndChat
+    }), this.props.agentState.showScreenShareRequest && React.createElement(RequestScreenShareModal, null));
+  }
+  render() {
+    const {languagePack: languagePack, onClose: onClose, onCloseAndRestart: onCloseAndRestart, onRestart: onRestart, onToggleHomeScreen: onToggleHomeScreen, botName: botName, headerDisplayName: headerDisplayName, headerAvatarConfig: headerAvatarConfig} = this.props;
+    const {hasCaughtError: hasCaughtError} = this.state;
+    const className = "WAC";
+    return React.createElement("div", {
+      className: className
+    }, React.createElement(BotHeaderExport, {
+      ref: this.headerRef,
+      onClose: onClose,
+      onCloseAndRestart: onCloseAndRestart,
+      onRestart: onRestart,
+      headerDisplayName: headerDisplayName,
+      headerAvatarConfig: headerAvatarConfig,
+      onToggleHomeScreen: onToggleHomeScreen,
+      enableChatHeaderConfig: true,
+      includeWriteableElement: true,
+      testIdPrefix: OverlayPanelName.MAIN
+    }), React.createElement(NonHeaderBackground, null), React.createElement("div", {
+      className: "WACPanelContent WAC__ChatNonHeaderContainer"
+    }, hasCaughtError && React.createElement("div", {
+      className: "WAC__MessagesErrorHandler"
+    }, React.createElement(CatastrophicErrorExport, {
+      languagePack: languagePack,
+      onRestart: onRestart,
+      showHeader: false,
+      botName: botName,
+      headerDisplayName: headerDisplayName
+    })), !hasCaughtError && React.createElement("div", {
+      className: "WAC__messagesAndInputContainer"
+    }, this.renderMessagesAndInput())));
+  }
+}
+
+function NonHeaderBackground() {
+  const isVisible = useSelector(state => state.showNonHeaderBackgroundCover);
+  return isVisible ? React.createElement("div", {
+    className: "WACBackgroundCover WACBackgroundCover__NonHeader"
+  }) : null;
+}
+
+var Chat$1 = injectIntl(Chat, {
+  forwardRef: true
+});
+
+export { Chat as ChatClass, Chat$1 as default };