@carbon/ai-chat 0.3.2-2 → 0.3.3

package/dist/es/Chat.js

@@ -0,0 +1,2288 @@
+/**
+* @license
+* 
+* (C) Copyright IBM Corp. 2017, 2025. All Rights Reserved.
+* 
+* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+* in compliance with the License. You may obtain a copy of the License at
+* 
+* http://www.apache.org/licenses/LICENSE-2.0
+* 
+* Unless required by applicable law or agreed to in writing, software distributed under the License
+* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+* or implied. See the License for the specific language governing permissions and limitations under
+* the License.
+* 
+* @carbon/ai-chat 0.3.2
+* 
+* Built: Jul 9 2025 11:10 am -04:00
+* 
+* 
+*/
+
+import React__default, { useContext, useState, useEffect, forwardRef, useRef, useImperativeHandle, PureComponent, Fragment, useLayoutEffect, useCallback, Suspense, Component } from 'react';
+import { injectIntl, FormattedMessage, useIntl } from 'react-intl';
+import { useSelector, connect } from 'react-redux';
+import { a5 as ServiceManagerContext, a6 as isObject, a7 as WEB_COMPONENT_PREFIX, _ as useLanguagePack, a0 as useServiceManager, a8 as selectAgentDisplayState, a9 as AnnounceOnMountComponentExport, aa as doFocusRef, Z as cx, ab as selectInputState, w as actions, ac as AlternateSuggestionsPanelState, ad as WriteableElement, ae as withAriaAnnouncer, af as createDidCatchErrorData, ag as isConnectToAgent, ah as ConnectToAgentBehaviorType, ai as isRequest, aj as nodeToText, ak as VisuallyHidden, al as timestampToTimeString, am as isResponse, M as MessageErrorState, an as renderAsUserDefinedMessage, ao as isChatStatusResponseType, ap as isOptionItem, aq as InternalMessageResponseType, ar as isSingleItemCarousel, as as getScrollBottom, at as doScrollElement, au as arrayLastValue, j as consoleError, av as AriaLiveMessageExport, aw as AUTO_SCROLL_EXTRA, ax as IS_MOBILE, ay as AUTO_SCROLL_THROTTLE_TIMEOUT, az as memoizeOne, aA as lazyPDFViewer, aB as AriaAnnouncerContext, aC as isEmptyString, aD as doFocus, aE as ButtonKindEnum, aF as isSuggestionListItem, aG as AlternateSuggestionsSection, aH as ButtonSizeEnum, aI as THREAD_ID_MAIN, S as assertType, aJ as createTextItem, aK as HideComponentContext, aL as FocusTrap, aM as animateWithClass, aN as ConfirmModal, aO as focusOnFirstFocusableItemInArrayOfElements, aP as BotHeaderExport } from './AppContainer.js';
+import { d as debounce, A as AvailabilityMessage, M as MessageTypeComponent, L as LoadingPDFViewer, g as getSearchLinkLabel, s as shouldShowAsPDFButton, a as getSearchResultMetaData, E as EndAgentChatModal } from './MessageTypeComponent.js';
+import { _ as __decorate, c as carbonElement, o, W as WriteableElementName, u as useOnMount, j as MessageResponseTypes, A as AgentMessageType, i as FileStatusValue, S as ScreenShareState, e as CatastrophicErrorType } from './customElement.js';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import ScreenOff from '@carbon/icons-react/es/ScreenOff.js';
+import { Button, ActionableNotification, Loading, Tile, unstable__ChatButton } from '@carbon/react';
+import UserAvatar from '@carbon/icons-react/es/UserAvatar.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 { A as AvatarExport } from './Avatar.js';
+import { I as InlineError } from './InlineError.js';
+import { CatastrophicError as CatastrophicErrorExport } from './CatastrophicError.js';
+import Close from '@carbon/icons-react/es/Close.js';
+import DownToBottom from '@carbon/icons-react/es/DownToBottom.js';
+import HelpDesk from '@carbon/icons-react/es/HelpDesk.js';
+import SatelliteRadar from '@carbon/icons-react/es/SatelliteRadar.js';
+import UpToTop from '@carbon/icons-react/es/UpToTop.js';
+import ChevronDown from '@carbon/icons-react/es/ChevronDown.js';
+import { h as hasSearchResultBody, S as SearchResultBodyExport, s as shouldTruncateBody } from './SearchResultBody.js';
+import Bookmark from '@carbon/icons-react/es/Bookmark.js';
+import ChevronUp from '@carbon/icons-react/es/ChevronUp.js';
+import { u as useWindowSize } from './useWindowSize.js';
+import DocumentView from '@carbon/icons-react/es/DocumentView.js';
+import { S as SkeletonText } from './VideoComponent.js';
+import { I as InputExport } from './Input.js';
+import '@carbon/icons-react/es/AiLaunch.js';
+import '@carbon/icons-react/es/ArrowUpLeft.js';
+import '@carbon/icons-react/es/ChatLaunch.js';
+import '@carbon/icons-react/es/Information.js';
+import '@carbon/icons-react/es/Home.js';
+import '@carbon/web-components/es-custom/components/slug/index.js';
+import '@carbon/icons-react/es/CloseLarge.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 '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+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 '@carbon/icons-react/es/Attachment.js';
+import './RichText.js';
+import 'lit/directives/unsafe-html.js';
+import '@carbon/web-components/es-custom/components/inline-loading/index.js';
+import '@carbon/icon-helpers';
+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 'lit/directives/unsafe-svg.js';
+import '@carbon/web-components/es-custom/components/textarea/index.js';
+import '@carbon/web-components/es-custom/components/icon-button/index.js';
+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 '@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/Logout.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 '@carbon/icons-react/es/DocumentPdf.js';
+import '@carbon/icons-react/es/Link.js';
+import '@carbon/icons-react/es/Maximize.js';
+import './useCounter.js';
+import './IFrameComponent.js';
+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 './moduleFederationPluginUtils.js';
+import '@carbon/icons-react/es/ErrorFilled.js';
+import '@carbon/icons-react/es/Music.js';
+import '@carbon/icons-react/es/SendFilled.js';
+import '@carbon/icons/es/stop--filled/16.js';
+
+function withServiceManager(Component) {
+    return React__default.forwardRef((props, ref) => {
+        const serviceManager = useContext(ServiceManagerContext);
+        return React__default.createElement(Component, { ...props, ref: ref, serviceManager: serviceManager });
+    });
+}
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+var css_248z = ".dots{width:32px;height:32px}.dot{fill:none;r:0;stroke-width:0;transform:translateY(0)}[data-carbon-theme=g10] .dot,[data-carbon-theme=white] .dot{stroke:#001d6c}[data-carbon-theme=g100] .dot,[data-carbon-theme=g90] .dot{stroke:#f4f4f4}.linear .dot--left{transform-origin:25% 50%;animation:linear-load-size,linear-load-stroke,linear-loop-size,linear-loop-stroke;animation-duration:1s;animation-iteration-count:1,1,infinite,infinite;animation-fill-mode:forwards;animation-delay:1s,1s,2s,2s}.linear .dot--center{transform-origin:50% 50%;animation:linear-load-size,linear-load-stroke,linear-loop-size,linear-loop-stroke;animation-duration:1s;animation-iteration-count:1,1,infinite,infinite;animation-fill-mode:forwards;animation-delay:1.167s,1.167s,2.167s,2.167s}.linear .dot--right{transform-origin:75% 50%;animation:linear-load-size,linear-load-stroke,linear-loop-size,linear-loop-stroke;animation-duration:1s;animation-iteration-count:1,1,infinite,infinite;animation-fill-mode:forwards;animation-delay:1.334s,1.334s,2.334s,2.334s}[dir=rtl] .linear .dot--left{animation-delay:1.334s,1.334s,2.334s,2.334s,7.334s,7.334s}[dir=rtl] .linear .dot--center{animation-delay:1.167s,1.167s,2.167s,2.167s,7.167s,7.167s}[dir=rtl] .linear .dot--right{animation-delay:1s,1s,2s,2s,7s,7s}.linear--no-loop .dot--left{transform-origin:25% 50%;animation:linear-load-size,linear-load-stroke,linear-unload-size,linear-unload-stroke;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:1s,1s,2s,2s}.linear--no-loop .dot--center{transform-origin:50% 50%;animation:linear-load-size,linear-load-stroke,linear-unload-size,linear-unload-stroke;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-delay:1.167s,1.167s,2.167s,2.167s}.linear--no-loop .dot--right{transform-origin:75% 50%;animation:linear-load-size,linear-load-stroke,linear-unload-size,linear-unload-stroke;animation-duration:1s;animation-iteration-count:1;animation-fill-mode:forwards}.linear--no-loop .dot--right,[dir=rtl] .linear--no-loop .dot--left{animation-delay:1.334s,1.334s,2.334s,2.334s}[dir=rtl] .linear--no-loop .dot--center{animation-delay:1.167s,1.167s,2.167s,2.167s}[dir=rtl] .linear--no-loop .dot--right{animation-delay:1s,1s,2s,2s}@keyframes linear-load-size{0%{r:0;animation-timing-function:cubic-bezier(0,0,.3,1)}25%{r:2.5px;animation-timing-function:cubic-bezier(0,0,.3,1)}83.3%{r:.875px}to{r:.875px}}@keyframes linear-load-stroke{0%{stroke-width:0;animation-timing-function:cubic-bezier(0,0,.3,1)}8.33%{stroke-width:1.72}to{stroke-width:1.72}}@keyframes linear-loop-size{0%{r:.875px;animation-timing-function:cubic-bezier(0,0,.3,1)}25%{r:2.5px;animation-timing-function:cubic-bezier(0,0,.3,1)}91.66%{r:.875px}to{r:.875px}}@keyframes linear-loop-stroke{0%{stroke-width:1.72;animation-timing-function:cubic-bezier(.4,.14,1,1)}to{stroke-width:1.72}}@keyframes linear-unload-size{0%{r:.875px}8.33%{r:.875px}33.33%{r:2.5px;animation-timing-function:cubic-bezier(.4,.14,1,1)}58.33%{r:0}to{r:0}}@keyframes linear-unload-stroke{0%{stroke-width:1.72}50%{stroke-width:1.72}58.33%{stroke-width:0}to{stroke-width:0}}@media (prefers-reduced-motion:reduce){.dot--center,.dot--left,.dot--right{transition:none;animation:none}}";
+
+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';
+    }
+    static { this.styles = css `
+    ${unsafeCSS(css_248z)}
+  `; }
+    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>`;
+    }
+};
+__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);
+var CDSInlineLoadingElement$1 = CDSInlineLoadingElement;
+
+const InlineLoadingComponent = o({
+    tagName: INLINE_LOADING_TAG_NAME,
+    elementClass: CDSInlineLoadingElement$1,
+    react: React__default,
+});
+
+function AgentAvatar(props) {
+    const { agentProfile, languagePack, width, height } = props;
+    const agentName = agentProfile?.nickname;
+    const avatarStyle = { width, height };
+    const avatarUrl = agentProfile?.profile_picture_url;
+    // Indicates if the avatar for a human agent failed to load.
+    const [hasError, setHasError] = useState(false);
+    let component;
+    // If the avatar Url changes, then hasError should reset to allow an attempt at loading the new avatar url.
+    useEffect(() => {
+        setHasError(false);
+    }, [avatarUrl]);
+    if (!hasError && avatarUrl) {
+        component = React__default.createElement("img", { src: avatarUrl, alt: languagePack.agent_ariaAgentAvatar, onError: () => setHasError(true) });
+    }
+    else if (agentName?.match(/^[\x20-\xFE]+$/)) {
+        // If the agentName only contains ASCII characters (and at least one), then show the first letter of the agentName
+        // as the agentAvatar. For most Latin languages, we can infer that the first letter of the name is an appropriate
+        // representation for that person. For other languages such as Chinese, it's not clear what the correct letter
+        // would be so if we see any such characters at all, we'll just fall back to showing a picture instead of a letter.
+        // We're only accepting ASCII (and extended ASCII) because proper browser detection for Latin characters is lacking.
+        component = (React__default.createElement("div", { "aria-label": languagePack.agent_ariaAgentAvatar, className: "WACAgentAvatar__Circle", style: avatarStyle },
+            React__default.createElement("div", { className: "WACAgentAvatar__Letter" }, agentName.charAt(0))));
+    }
+    else {
+        // If the agentName contains any non-ASCII characters, then show the default agent avatar.
+        component = (React__default.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__default.createElement("div", { className: "WACAgentAvatar" }, component);
+}
+
+/**
+ * This component is a banner that appears at the top of the screen when the user is connecting or connected to a
+ * live agent. It will display a cancel button in the case where the user is waiting for an agent or an "end chat"
+ * button for when the user is connected to an agent.
+ */
+function AgentBanner(props, ref) {
+    const { onButtonClick } = props;
+    const languagePack = useLanguagePack();
+    const serviceManager = useServiceManager();
+    const persistedAgentState = useSelector((state) => state.persistedToBrowserStorage.chatState.agentState);
+    const agentState = useSelector((state) => state.agentState);
+    const { isConnecting, availability, isScreenSharing } = agentState;
+    const displayState = useSelector(selectAgentDisplayState);
+    const { agentProfile } = persistedAgentState;
+    const buttonRef = useRef();
+    let line1;
+    let line2;
+    let avatar;
+    let buttonLabel;
+    let animation;
+    if (isConnecting) {
+        animation = React__default.createElement("div", { className: "WACLoadingBar__ConnectingAnimation" });
+        line1 = languagePack.agent_connecting;
+        line2 = (React__default.createElement(AnnounceOnMountComponentExport, { announceOnce: languagePack.agent_connecting },
+            React__default.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__default.createElement(AgentAvatar, { agentProfile: agentProfile, languagePack: languagePack, width: "32px", height: "32px" });
+    }
+    const onStopSharing = () => {
+        serviceManager.humanAgentService.screenShareStop();
+    };
+    // Add a "requestFocus" imperative function to the ref so other components can trigger focus here.
+    useImperativeHandle(ref, () => ({
+        requestFocus: () => {
+            if (buttonRef.current) {
+                doFocusRef(buttonRef);
+                return true;
+            }
+            return false;
+        },
+    }));
+    return (React__default.createElement("div", { className: cx('WACAgentBanner', { 'WACAgentBanner--connected': !isConnecting }) },
+        displayState.isConnectingOrConnected && (React__default.createElement("div", { className: "WACAgentBanner__Body" },
+            avatar,
+            React__default.createElement("div", { className: "WACAgentBanner__AgentInfo" },
+                React__default.createElement("div", { className: "WACAgentBanner__AgentLine1" }, line1),
+                line2 && React__default.createElement("div", { className: "WACAgentBanner__AgentLine2" }, line2)),
+            React__default.createElement(Button, { ref: buttonRef, className: "WACAgentBanner__Button WACAgentBanner__CancelButton", onClick: onButtonClick, size: "sm" }, buttonLabel))),
+        isScreenSharing && (React__default.createElement(Button, { className: "WACAgentBanner__Button WACAgentBanner__StopSharingButton", kind: "danger", size: "sm", renderIcon: ScreenOff, onClick: onStopSharing }, languagePack.agent_sharingStopSharingButton)),
+        animation));
+}
+const AgentBannerExport = React__default.memo(forwardRef(AgentBanner));
+
+/**
+ * A simple container for the agent banner that avoids rendering it if it is hidden.
+ */
+function AgentBannerContainer({ onButtonClick, bannerRef }) {
+    const agentState = useSelector((state) => state.agentState);
+    const displayState = useSelector(selectAgentDisplayState);
+    if (displayState.isConnectingOrConnected || agentState.isScreenSharing) {
+        return React__default.createElement(AgentBannerExport, { ref: bannerRef, onButtonClick: onButtonClick });
+    }
+    return null;
+}
+
+function QuestionMarkIcon(props) {
+    return (React__default.createElement("svg", { className: props.className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12.75 20.64" },
+        React__default.createElement("circle", { cx: "6.07", cy: "18.82", r: "1.82" }),
+        React__default.createElement("path", { d: "M7.28,0H5.46A5.45,5.45,0,0,0,0,5.44v.63H2.43V5.46a3,3,0,0,1,3-3H7.28a3,3,0,1,1,0,6.07H4.86V14H7.28v-3A5.47,5.47,0,1,0,7.28,0Z" })));
+}
+
+function AlternateSuggestionsButton() {
+    const serviceManager = useServiceManager();
+    const alternateSuggestionsState = useSelector((state) => state.alternateSuggestionsState);
+    const { isReadonly } = useSelector(selectInputState);
+    const languagePack = useSelector((state) => state.languagePack);
+    const { showButton } = alternateSuggestionsState;
+    const buttonRef = useRef();
+    const buttonLabel = languagePack.suggestions_ariaButtonToOpen;
+    if (!showButton) {
+        return null;
+    }
+    function onMenuClick() {
+        serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(AlternateSuggestionsPanelState.OPEN_FULL, 'User'));
+    }
+    return (React__default.createElement("div", { className: "WACAlternateSuggestionsButton" },
+        React__default.createElement("div", { className: "WACAlternateSuggestionsButton__ButtonContainer" },
+            React__default.createElement(Button, { type: "button", className: "WACAlternateSuggestionsButton__button", ref: buttonRef, onClick: onMenuClick, "aria-label": buttonLabel, disabled: isReadonly },
+                React__default.createElement(QuestionMarkIcon, null)))));
+}
+const AlternateSuggestionsButtonExport = React__default.memo(AlternateSuggestionsButton);
+
+function LatestWelcomeNodes({ welcomeNodeBeforeElement, children }) {
+    const { namespace } = useServiceManager();
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(WriteableElement, { slotName: WriteableElementName.WELCOME_NODE_BEFORE_ELEMENT, id: `welcomeNodeBeforeElement${namespace.suffix}`, element: welcomeNodeBeforeElement }),
+        children));
+}
+var LatestWelcomeNodes$1 = React__default.memo(LatestWelcomeNodes);
+
+function Notifications({ notifications, serviceManager }) {
+    const languagePack = useLanguagePack();
+    if (notifications.length) {
+        return (React__default.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__default.createElement("div", { className: "WACNotifications__Notification", key: notification.id },
+                React__default.createElement(ActionableNotification, { "aria-label": languagePack.notifications_toastClose, actionButtonLabel: actionButtonLabel, onActionButtonClick: onActionButtonClick, kind: item.kind, onClose: () => {
+                        onClose();
+                        item.onCloseButtonClick?.();
+                    }, subtitle: item.message, title: item.title, 
+                    // Instead of this property, we are supposed to use the StaticNotification component which does not
+                    // steal focus but it's still experimental and does not provide the functionality we need (it does not
+                    // have a close button).
+                    hasFocus: false })));
+        })));
+    }
+    return null;
+}
+
+function IconHolder(props) {
+    return React__default.createElement("div", { className: "WACIconHolder" }, props.icon);
+}
+
+function ImageWithFallback(props) {
+    const { url, alt, fallback } = props;
+    // Indicates if the image failed to load.
+    const [hasError, setHasError] = useState(false);
+    // If the url changes, then hasError should reset to allow an attempt at loading the new image.
+    useEffect(() => {
+        setHasError(false);
+    }, [url]);
+    let component;
+    if (!hasError && url) {
+        component = React__default.createElement("img", { src: url, alt: alt, onError: () => setHasError(true) });
+    }
+    else {
+        component = fallback;
+    }
+    return React__default.createElement("div", { className: "WACImageWithFallback" }, component);
+}
+
+/**
+ * This component with render an element in the DOM and on mount, will fire a bus event with the given element.
+ */
+function UICustomizationElement(props) {
+    const { event, zIndex = 1 } = props;
+    const ref = useRef();
+    const serviceManager = useServiceManager();
+    useOnMount(() => {
+        const busEvent = {
+            ...event,
+            element: ref.current,
+        };
+        serviceManager.eventBus.fireSync(busEvent, serviceManager.instance);
+    });
+    return (React__default.createElement("div", { className: cx('WACUICustomizationElement', {
+            'WACUICustomizationElement--request': event.type === "customization:message:request:item:left" /* BusEventType.CUSTOMIZATION_REQUEST_LEFT */,
+            'WACUICustomizationElement--response': event.type === "customization:message:response:item:left" /* BusEventType.CUSTOMIZATION_RESPONSE_LEFT */,
+        }), style: { zIndex }, ref: ref }));
+}
+
+class MessageComponent extends PureComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Default state.
+         */
+        this.state = { didRenderErrorOccur: false, focusHandleHasFocus: false };
+        /**
+         * A reference to the root element in this component.
+         */
+        this.ref = React__default.createRef();
+        /**
+         * A reference to the pure message element in this component.
+         */
+        this.messageRef = React__default.createRef();
+        /**
+         * A reference to the focus handle element in this component.
+         */
+        this.focusHandleRef = React__default.createRef();
+        /**
+         * Returns the value of the local message for the component.
+         */
+        this.getLocalMessage = () => {
+            return this.props.localMessageItem;
+        };
+        /**
+         * Called when the focus handle gets focus.
+         */
+        this.onHandleFocus = () => {
+            this.setState({ focusHandleHasFocus: true });
+        };
+        /**
+         * Called when the focus handle loses focus.
+         */
+        this.onHandleBlur = () => {
+            this.setState({ focusHandleHasFocus: false });
+        };
+        /**
+         * Sets the z-index value used for the message.
+         */
+        this.setZIndex = (zIndex) => {
+            this.setState({ zIndex });
+        };
+        /**
+         * Called when a key down event occurs while the focus handle has focus.
+         */
+        this.onHandleKeyDown = (event) => {
+            if (event.altKey || event.metaKey || event.ctrlKey || event.shiftKey) {
+                // Don't do anything if any modifiers are present.
+                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 === ' ') {
+                // Prevent native scrolling on Space
+                event.preventDefault();
+                this.reAnnounceFocusHandle(); // Re-announce message content
+                return;
+            }
+            if (moveFocus) {
+                // This will stop the scroll panel from moving as a result of the keypress. We only want it to move as a
+                // result of the focus change.
+                event.preventDefault();
+                this.props.requestMoveFocus(moveFocus, this.props.messagesIndex);
+            }
+        };
+    }
+    /**
+     * Returns an ARIA message that can be used to indicate that the widget (either bot or agent) was responsible for
+     * saying a specific message.
+     */
+    getWidgetSaidMessage() {
+        const { intl, botName, localMessageItem } = this.props;
+        let messageId;
+        if (localMessageItem.item.agent_message_type) {
+            // For the human agent view, we only want to say "agent said" for messages that are text. The status messages
+            // do not need this announcement.
+            if (localMessageItem.item.response_type === MessageResponseTypes.TEXT) {
+                messageId = 'messages_agentSaid';
+            }
+        }
+        else {
+            messageId = 'messages_botSaid';
+        }
+        return messageId ? intl.formatMessage({ id: messageId }, { 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));
+        }
+    }
+    /**
+     * Indicates if we should render the failed message instead of the actual message.
+     */
+    shouldRenderFailedMessage() {
+        if (this.state.didRenderErrorOccur) {
+            return true;
+        }
+        const { localMessageItem, message, config } = this.props;
+        const { connectToAgentBehavior } = config.public.__ibm__;
+        // If the message is a CTA, has a service desk error, and we're supposed to report service desk errors, then we
+        // need to render the failed message.
+        return (isConnectToAgent(localMessageItem.item) &&
+            message.history?.agent_no_service_desk &&
+            connectToAgentBehavior === ConnectToAgentBehaviorType.ERROR_MISSING);
+    }
+    reAnnounceFocusHandle() {
+        const handle = this.focusHandleRef.current;
+        if (!handle) {
+            return;
+        }
+        this.props.ariaAnnouncer(handle.getAttribute('aria-label'));
+    }
+    /**
+     * Moves focus to this message's focus handle.
+     *
+     * @see renderFocusHandle
+     */
+    requestHandleFocus() {
+        const { languagePack, intl, message, botName } = this.props;
+        // Announce who said it and then the actual message. The "Bot said" text is normally only read once per
+        // MessageResponse instead of once per LocalMessage but since we're moving focus between each LocalMessage, go
+        // ahead and announce the "who" part for each one.
+        const whoAnnouncement = isRequest(message)
+            ? languagePack.messages_youSaid
+            : intl.formatMessage({ id: 'messages_botSaid' }, { botName });
+        const strings = [whoAnnouncement];
+        nodeToText(this.messageRef.current, strings);
+        // Using this aria-label allows us to make sure that this text is read out loud before JAWS reads its "1 of 2"
+        // list item message that it adds after reading the aria-label.
+        this.focusHandleRef.current.setAttribute('aria-label', strings.join(' '));
+        doFocusRef(this.focusHandleRef, true);
+    }
+    /**
+     * Renders the error state version of this message. This code carefully avoids touching the message data as it
+     * could be data that doesn't match what we were expecting.
+     */
+    renderFailedRenderMessage() {
+        const { messagesIndex } = this.props;
+        return (React__default.createElement("div", { className: `WAC__message WAC__message--inlineError WAC__message-${messagesIndex} ${this.props.className || ''}`, ref: this.ref },
+            React__default.createElement("div", { className: "WAC__message--padding" },
+                React__default.createElement("div", { className: "WAC__bot-message" },
+                    React__default.createElement(VisuallyHidden, null, this.getWidgetSaidMessage()),
+                    React__default.createElement("div", { className: "WAC__received WAC__message-vertical-padding WAC__received--text" },
+                        React__default.createElement(InlineError, { text: this.props.languagePack.errors_singleMessage }))))));
+    }
+    /**
+     * This will render the avatar for the bot message. This is normally the little blue bar next to the message but
+     * in the case of a human agent, it can be the agent's avatar image.
+     */
+    renderCustomLeft(eventType) {
+        const { serviceManager } = this.props;
+        const { zIndex } = this.state;
+        if (serviceManager.enableUICustomEvents.has(eventType)) {
+            const { message, localMessageItem } = this.props;
+            const event = {
+                element: null, // This is filled in when the component is mounted.
+                type: eventType,
+                messageItem: localMessageItem.item,
+                message,
+                setItemZIndex: this.setZIndex,
+            };
+            return React__default.createElement(UICustomizationElement, { event: event, zIndex: zIndex });
+        }
+        return null;
+    }
+    /**
+     * Renders the avatar line that appears above each message that has the avatar (for responses) and timestamps.
+     */
+    renderAvatarLine(localMessageItem, message) {
+        let avatar;
+        const { languagePack, botAvatarURL, useAITheme, carbonTheme } = this.props;
+        const timestamp = timestampToTimeString(message.history.timestamp);
+        let label;
+        let actorName;
+        let iconClassName = '';
+        if (isResponse(message)) {
+            // We'll use the first message item for deciding if we should show the agent's avatar.
+            const agentMessageType = localMessageItem.item.agent_message_type;
+            const agentProfile = message.history.agent_profile;
+            if (isAgentStatusMessage(agentMessageType) || agentProfile?.hidden) {
+                // These messages don't show an avatar line.
+                return null;
+            }
+            const fromAgent = agentMessageType === AgentMessageType.FROM_AGENT;
+            if (fromAgent || agentProfile?.profile_picture_url) {
+                avatar = (React__default.createElement(ImageWithFallback, { url: agentProfile?.profile_picture_url, alt: fromAgent ? languagePack.agent_ariaAgentAvatar : languagePack.agent_ariaGenericAvatar, fallback: React__default.createElement(IconHolder, { icon: React__default.createElement(Headset, null) }) }));
+                iconClassName = 'WACMessage__Avatar--agent';
+            }
+            else {
+                const icon = useAITheme ? React__default.createElement(AvatarExport, { theme: carbonTheme }) : React__default.createElement(IconHolder, { icon: React__default.createElement(ChatBot, null) });
+                const imageUrl = useAITheme ? undefined : botAvatarURL;
+                avatar = React__default.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__default.createElement("span", { "data-wac-exclude-node-read": true },
+                React__default.createElement(FormattedMessage, { id: "message_labelBot", values: { timestamp, actorName } })));
+        }
+        else {
+            label = React__default.createElement(FormattedMessage, { id: "message_labelYou", values: { timestamp } });
+        }
+        return (React__default.createElement("div", { className: "WACMessage__AvatarLine", key: `${message.id}-avatar-line` },
+            avatar && React__default.createElement("div", { className: `WACMessage__Avatar ${iconClassName}` }, avatar),
+            React__default.createElement("div", { className: "WACMessage__Label" }, label)));
+    }
+    /**
+     * Renders the state indicator for the message sent by the user. This can appear on the left of message or beneath the
+     * message.
+     */
+    renderMessageState(message) {
+        const { 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__default.createElement(InlineError, { text: languagePack.errors_singleMessage });
+            className = 'WAC__message-error-failed';
+            showBelowMessage = true;
+        }
+        else if (fileStatus === FileStatusValue.UPLOADING) {
+            element = React__default.createElement(Loading, { withOverlay: false, small: true, "aria-label": languagePack.fileSharing_statusUploading });
+            className = 'WAC__message-status-file-uploading';
+        }
+        else if (fileStatus === 'success') {
+            element = React__default.createElement(CheckmarkFilled, { "aria-label": languagePack.fileSharing_statusUploading });
+            className = 'WAC__message-status-file-success';
+        }
+        // We probably should include an aria-label here but since we explicit announce state changes in the message
+        // service and this icon is contained in a live region, that would result in duplicate text being announced. We
+        // can't rely solely on the aria-label here in this live region because the SRs don't seem to reliably announce
+        // what we want to announce, moving to success for example. Our a11y expert says it's okay to leave it out here.
+        return (element && {
+            element: React__default.createElement("div", { className: `WAC__message-status ${className}` }, element),
+            showBelowMessage,
+        });
+    }
+    /**
+     * Renders a focus "handle" for this message. When this message gets focus, we actually move focus to an element
+     * inside it instead of the entire message. This is only done when the user clicks the scroll handle button on the
+     * scroll container that moves focus into the scroll panel or when focus moves from one message to another. We move
+     * focus to the handle which is inside the message instead of the message itself because if we make the whole message
+     * actually focusable then a screen reader will read the entire message whenever any item inside it gets focus which
+     * is not desirable.
+     */
+    renderFocusHandle() {
+        return (
+        // The aria-label is dynamically added when focused.
+        // eslint-disable-next-line jsx-a11y/control-has-associated-label
+        React__default.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()) {
+            // If an error occurred, don't attempt to do anything with the message. Just show an error.
+            return this.renderFailedRenderMessage();
+        }
+        const { serviceManager, config, localMessageItem, message, languagePack, requestInputFocus, toolingType, messagesIndex, disableUserInputs, showAvatarLine, className, doAutoScroll, isMessageForInput, scrollElementIntoView, isFirstMessageItem, hideFeedback, allowNewFeedback, } = this.props;
+        const { isIntermediateStreaming, isWelcomeResponse, 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__default.createElement(MessageTypeComponent, { serviceManager: serviceManager, toolingType: toolingType, 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 isChatStatusMessage = isChatStatusResponseType(localMessageItem);
+        let styleObject;
+        if (this.state.zIndex !== null && this.state.zIndex !== undefined) {
+            styleObject = { zIndex: this.state.zIndex };
+        }
+        // Don't show animation on the welcome node or for messages that explicitly turn it off.
+        const noAnimation = isWelcomeResponse || disableFadeAnimation;
+        // If this is a user_defined response type with silent set, we don't want to render all the extra cruft around it.
+        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__default.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, style: styleObject },
+            this.renderFocusHandle(),
+            showAvatarLine && this.renderAvatarLine(localMessageItem, message),
+            React__default.createElement("div", { className: "WAC__message--padding" },
+                isResponse(message) && (React__default.createElement("div", { className: "WAC__bot-message" },
+                    readWidgetSaid && React__default.createElement(VisuallyHidden, null, this.getWidgetSaidMessage()),
+                    this.renderCustomLeft("customization:message:response:item:left" /* BusEventType.CUSTOMIZATION_RESPONSE_LEFT */),
+                    React__default.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--search': responseType === MessageResponseTypes.SEARCH,
+                            'WAC__received--suggestion': responseType === MessageResponseTypes.SUGGESTION,
+                            'WAC__received--welcome': responseType === 'welcome',
+                            'WAC__received--inlineError': responseType === MessageResponseTypes.INLINE_ERROR,
+                            'WAC__received--streamLoading': responseType === InternalMessageResponseType.STREAM_LOADING,
+                            'WAC__received--channelTransfer': responseType === MessageResponseTypes.CHANNEL_TRANSFER,
+                            '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--chatStatusMessage': isChatStatusMessage,
+                            'WAC__received--fullWidth': localMessageItem.ui_state.fullWidth,
+                            'WAC__message--historical': fromHistory,
+                        }), ref: this.messageRef },
+                        React__default.createElement("div", { className: "WAC__received--inner" }, messageComponent)))),
+                messageIsRequest && (React__default.createElement("div", { className: "WAC__sent-container" },
+                    this.renderCustomLeft("customization:message:request:item:left" /* BusEventType.CUSTOMIZATION_REQUEST_LEFT */),
+                    React__default.createElement("div", { className: cx('WAC__sentAndMessageState-container', 'WAC__message-vertical-padding', {
+                            'WAC__sentAndMessageState--belowMessage': messageState?.showBelowMessage,
+                        }) },
+                        !messageState?.showBelowMessage && messageState?.element,
+                        React__default.createElement("div", { className: "WAC__sent" },
+                            React__default.createElement(VisuallyHidden, null, languagePack.messages_youSaid),
+                            React__default.createElement("div", { className: "WAC__sent--bubble" },
+                                React__default.createElement("div", { ref: this.messageRef }, messageComponent))),
+                        messageState?.showBelowMessage && messageState?.element))))));
+    }
+}
+/**
+ * Returns the class name to add to messages with the given agent message type.
+ */
+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';
+    }
+}
+/**
+ * Indicates if this message is a status message. These are messages that are centered in the view.
+ */
+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;
+    }
+}
+/**
+ * Indicates if an item with the given response type is allowed to be rendered in an intermediate stream state.
+ */
+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.SUGGESTION:
+        case MessageResponseTypes.CONVERSATIONAL_SEARCH:
+        case MessageResponseTypes.USER_DEFINED:
+        case MessageResponseTypes.TEXT:
+            return true;
+        default:
+            return false;
+    }
+}
+var MessageComponent$1 = withAriaAnnouncer(injectIntl(MessageComponent, { forwardRef: true }));
+
+var MoveFocusType;
+(function (MoveFocusType) {
+    /**
+     * Indicates that focus should be moved to the first message.
+     */
+    MoveFocusType[MoveFocusType["FIRST"] = 1] = "FIRST";
+    /**
+     * Indicates that focus should be moved to the last message.
+     */
+    MoveFocusType[MoveFocusType["LAST"] = 2] = "LAST";
+    /**
+     * Indicates that focus should be moved to the next message.
+     */
+    MoveFocusType[MoveFocusType["NEXT"] = 3] = "NEXT";
+    /**
+     * Indicates that focus should be moved to the previous message.
+     */
+    MoveFocusType[MoveFocusType["PREVIOUS"] = 4] = "PREVIOUS";
+    /**
+     * Indicates that focus should be moved back to the input field.
+     */
+    MoveFocusType[MoveFocusType["INPUT"] = 5] = "INPUT";
+})(MoveFocusType || (MoveFocusType = {}));
+class MessagesComponent extends PureComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         * Default state.
+         */
+        this.state = {
+            scrollHandleHasFocus: false,
+        };
+        /**
+         * A registry of references to the child {@link MessageComponent} instances. The keys of the map are the IDs of
+         * each message item and the value is the ref to the component.
+         */
+        this.messageRefs = new Map();
+        /**
+         * A ref to the scrollable container that contains the messages.
+         */
+        this.messagesContainerWithScrollingRef = React__default.createRef();
+        /**
+         * A ref to the element that acts as a handle for scrolling.
+         */
+        this.scrollHandleRef = React__default.createRef();
+        /**
+         * A ref to the element that acts as a handle for scrolling.
+         */
+        this.agentBannerRef = React__default.createRef();
+        /**
+         * This will check to see if the messages list is anchored to the bottom of the panel and if so, ensure that the
+         * list is still scrolled to the bottom.
+         */
+        this.onResize = () => {
+            if (this.props.messageState.isScrollAnchored) {
+                const element = this.messagesContainerWithScrollingRef.current;
+                if (element) {
+                    element.scrollTop = element.scrollHeight;
+                }
+            }
+        };
+        /**
+         * This will execute an auto-scroll operation based on the current state of messages in the component. This should
+         * be called whenever the messages change.
+         *
+         * The scrolling rules are as follows.
+         *
+         * 1. If the last message is a welcome node, auto-scroll to the top of the message without animating. This
+         * means the user has just started a new chat, and we want to just jump to the top.
+         * 2. If the component has just mounted and the last message is not a welcome node, just jump to the bottom
+         * without animating.
+         * 3. If the typing indicator is visible, then scroll that into view.
+         * 4. Scroll to the top of the last user message. This means that the bot messages will auto-scroll until the user's
+         * last message reaches the top of the window, and then they'll stop and not scroll anymore.
+         * 5. If the there is no user message that can be scrolled to, scroll to the last bot message.
+         * 6. If the last bot message has an empty output. Just scroll to bottom.
+         *
+         * @param options The options to control how the scrolling should occur.
+         */
+        this.doAutoScroll = throttle((options = {}) => {
+            try {
+                debugAutoScroll('[doAutoScroll] Running doAutoScroll', options);
+                const { scrollToTop, scrollToBottom } = options;
+                const { localMessageItems, messageState, allMessagesByID } = this.props;
+                const { isTypingCounter, isLoadingCounter } = messageState;
+                const { 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');
+                    // No messages, so set the scroll position to the top. If we don't set this explicitly, the browser may
+                    // decide it remembers the previous scroll position and set it for us.
+                    animate = false;
+                    setScrollTop = 0;
+                }
+                else if (isTypingCounter > 0 || isLoadingCounter > 0 || isAgentTyping) {
+                    // The typing indicator is visible, so scroll to the bottom.
+                    setScrollTop = scrollElement.scrollHeight;
+                    debugAutoScroll('[doAutoScroll] isTyping visible', isTypingCounter);
+                }
+                else {
+                    /**
+                     * Determines if the message should be scrolled to. The last user message should be scrolled to by default.
+                     * However, the last bot message should be scrolled to if there is no user message that can be scrolled to.
+                     */
+                    const shouldScrollToMessage = (localItem, message) => {
+                        if (isResponse(message)) {
+                            const messageRequest = allMessagesByID[message?.request_id];
+                            if (isChatStatusResponseType(localItem)) {
+                                // Scroll to chat status messages.
+                                return true;
+                            }
+                            // If the request for this response was silent, then scroll to it instead of scrolling to where the
+                            // silent user message would be. But don't do this if it's an empty message (which happens with a
+                            // skip_use_input message from an extension).
+                            return messageRequest?.history?.silent && messageRequest.input?.text !== '';
+                        }
+                        return isRequest(message);
+                    };
+                    // Iterate backwards until we find the last message to scroll to. By default, the user's last message should be
+                    // scrolled to. However, if the user's message was silent, the last response should be scrolled to.
+                    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) {
+                        // Scroll to the top of the user's message. Those messages have 28px of padding on the top so let's cut
+                        // that down to just 8 by scrolling a little bit more.
+                        const offsetTop = lastScrollableMessageComponent.ref.current?.offsetTop;
+                        setScrollTop = offsetTop + AUTO_SCROLL_EXTRA;
+                        debugAutoScroll(`[doAutoScroll] Scrolling to message offsetTop=${offsetTop}`);
+                    }
+                    else {
+                        // No message found.
+                        setScrollTop = -1;
+                        debugAutoScroll('[doAutoScroll] No message found');
+                    }
+                }
+                if (setScrollTop !== -1) {
+                    if (setScrollTop >= scrollElement.scrollTop) {
+                        // If this is from history, we don't want to animate.
+                        if (lastMessage?.history?.from_history) {
+                            animate = false;
+                        }
+                        debugAutoScroll(`[doAutoScroll] doScrollElement`, scrollElement, setScrollTop, animate);
+                        doScrollElement(scrollElement, setScrollTop, 0, animate);
+                        // Update the scroll anchor setting based on this new position.
+                        this.checkScrollAnchor(true, setScrollTop);
+                    }
+                }
+            }
+            catch (error) {
+                // Just ignore any errors. It's not the end of the world if scrolling doesn't work for any reason.
+                consoleError('An error occurred while attempting to scroll.', error);
+            }
+        }, AUTO_SCROLL_THROTTLE_TIMEOUT);
+        /**
+         * Returns the current scrollBottom value for the message scroll panel.
+         */
+        this.getContainerScrollBottom = () => {
+            return getScrollBottom(this.messagesContainerWithScrollingRef?.current);
+        };
+        /**
+         * Scrolls the given element into view so that it is fully visible. If the element is already visible, then no
+         * scrolling will be done.
+         *
+         * @param element The element to scroll into view.
+         * @param paddingTop An additional pixel value that will over scroll by this amount to give a little padding between
+         * the element and the top of the scroll area.
+         * @param paddingBottom An additional pixel value that will over scroll by this amount to give a little padding
+         * between the element and the top of the scroll area.
+         */
+        this.scrollElementIntoView = (element, paddingTop = 8, paddingBottom = 8) => {
+            const scrollElement = this.messagesContainerWithScrollingRef.current;
+            const scrollRect = scrollElement.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            // The distance the top and bottom of the element is from the top of the message list.
+            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) {
+                // The top of the element is above the fold or the element doesn't fully fit. Scroll it so its top is at the top
+                // of the scroll panel.
+                doScrollElement(scrollElement, topDistanceFromTop, 0);
+            }
+            else if (bottomDistanceFromTop > scrollElement.scrollTop + scrollElement.offsetHeight) {
+                // The bottom of the element is below the fold. Scroll it so its bottom is at the bottom of the scroll panel.
+                doScrollElement(scrollElement, bottomDistanceFromTop - scrollElement.offsetHeight, 0);
+            }
+        };
+        /**
+         * This is a callback called by a child message component to request that it move focus to a different message.
+         */
+        this.requestMoveFocus = (moveFocusType, currentMessageIndex) => {
+            if (moveFocusType === MoveFocusType.INPUT) {
+                this.props.requestInputFocus();
+            }
+            else {
+                const { 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;
+        // If the number of messages changes (usually because of new messages) or the state of the "is typing" indicator
+        // changes, then we need to check to see if we want to perform some auto-scrolling behavior.
+        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);
+            // If the last message has changed, then do an auto scroll.
+            const lastItemChanged = newLastItem !== oldLastItem;
+            if (lastItemChanged || typingChanged) {
+                this.doAutoScroll();
+            }
+        }
+    }
+    componentWillUnmount() {
+        // Remove the listeners and observer we added previously.
+        this.scrollPanelObserver.unobserve(this.messagesContainerWithScrollingRef.current);
+    }
+    /**
+     * This function is called when the scrollable messages list is scrolled. It will determine if the scroll panel
+     * has been scrolled all the way to the bottom and if so, it will enable the scroll anchor that will keep it there.
+     * Note that this callback is not attached via the normal react method with an `onScroll` prop as that doesn't
+     * work with under a shadow DOM. This callback is attached directly in {@link componentDidMount}.
+     *
+     * This function will also make a somewhat crude attempt to distinguish if a scroll event has occurred because the
+     * user initiated a scroll or if the application initiated a scroll as the result of a changing in size of the
+     * widget. If the user initiates a scroll, then we use that event to anchor or un-anchor the scroll panel. If the
+     * application did the scroll, we want the anchor state to remain unchanged.
+     *
+     * @param fromAutoScroll Indicates if the reason we are checking the anchor is due to an auto-scroll action.
+     * @param assumeScrollTop A value to assume the scroll panel is (or will be) scrolled to. This can be useful when
+     * an animation is occurring and the current scroll position isn't the final scroll position.
+     */
+    checkScrollAnchor(fromAutoScroll, assumeScrollTop) {
+        const scrollElement = this.messagesContainerWithScrollingRef.current;
+        // If we're checking because of auto-scrolling, we want check the scroll position even if the scroll detection
+        // is normally suspended because of something like an animation in progress.
+        if (fromAutoScroll ||
+            (this.previousScrollOffsetHeight === scrollElement.offsetHeight && !this.props.suspendScrollDetection)) {
+            // If the scroll panel has been scrolled all the way to the bottom, turn on the anchor.
+            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;
+    }
+    /**
+     * Moves focus to the button in the agent header.
+     */
+    requestAgentBannerFocus() {
+        if (this.agentBannerRef.current) {
+            return this.agentBannerRef.current.requestFocus();
+        }
+        return false;
+    }
+    /**
+     * Scrolls to the (full) message with the given ID. Since there may be multiple message items in a given
+     * message, this will scroll the first message to the top of the message window.
+     *
+     * @param messageID The (full) message ID to scroll to.
+     * @param animate Whether or not the scroll should be animated. Defaults to true.
+     */
+    doScrollToMessage(messageID, animate = true) {
+        try {
+            // Find the component that has the message we want to scroll to.
+            const { 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;
+                // Scroll to the top of the message.
+                const setScrollTop = panelComponent.ref.current.offsetTop;
+                // Do the scrolling.
+                doScrollElement(scrollElement, setScrollTop, 0, animate);
+                // Update the scroll anchor setting based on this new position.
+                this.checkScrollAnchor(true, setScrollTop);
+            }
+        }
+        catch (error) {
+            // Just ignore any errors. It's not the end of the world if scrolling doesn't work for any reason.
+            consoleError('An error occurred while attempting to scroll.', error);
+        }
+    }
+    /**
+     * Get all the elements inside the lastBotMessageGroupID.
+     */
+    getLastOutputMessageElements() {
+        const { localMessageItems, allMessagesByID } = this.props;
+        const lastMessageItem = arrayLastValue(localMessageItems);
+        const lastMessage = allMessagesByID[lastMessageItem?.fullMessageID];
+        if (isResponse(lastMessage)) {
+            const elements = [];
+            let hasFoundLastBotMessageGroupID = false;
+            // Loop from end of messages array until we find the elements with the lastBotMessageGroupID.
+            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 } = componentRef;
+                    if (getLocalMessage().fullMessageID === lastMessage.id) {
+                        hasFoundLastBotMessageGroupID = true;
+                        const element = componentRef.ref?.current;
+                        if (element) {
+                            elements.push(element);
+                        }
+                        else {
+                            // If there are no refs to the elements yet, there is nothing to do here.
+                            break;
+                        }
+                    }
+                    else if (hasFoundLastBotMessageGroupID) {
+                        break;
+                    }
+                }
+            }
+            // Reverse so the older messages are first.
+            return elements.reverse();
+        }
+        return [];
+    }
+    /**
+     * JSX to show typing indicator.
+     *
+     * @param isTypingMessage The aria label for the typing indicator.
+     * @param index The index of this message.
+     */
+    renderTypingIndicator(isTypingMessage, index) {
+        return (React__default.createElement("div", { className: `WAC__message WAC__message-${index} WAC__message--lastMessage` },
+            React__default.createElement("div", { className: "WAC__message--padding" },
+                isTypingMessage && React__default.createElement(AriaLiveMessageExport, { message: isTypingMessage }),
+                React__default.createElement("div", { className: "WAC__bot-message" },
+                    React__default.createElement("div", { className: "WAC__received WAC__received--loading WAC__message-vertical-padding" },
+                        React__default.createElement("div", { className: "WAC__received--inner" },
+                            React__default.createElement(InlineLoadingComponent, { loop: true, carbonTheme: this.props.carbonTheme })))))));
+    }
+    /**
+     * Renders the given message.
+     *
+     * @param localMessage The localMessage to be processed.
+     * @param fullMessage The full message to be processed.
+     * @param messagesIndex The index of the message.
+     * @param showBeforeWelcomeNodeElement Boolean indicating if this is the first message in the most recent welcome
+     * node.
+     * @param isMessageForInput Indicates if this message is part the most recent message response that allows for input.
+     * @param isFirstMessageItem Indicates if this message item is the first item in a message response.
+     * @param lastMessageID The ID of the last full message shown.
+     */
+    renderMessage(localMessage, fullMessage, messagesIndex, showBeforeWelcomeNodeElement, isMessageForInput, isFirstMessageItem, lastMessageID) {
+        const { serviceManager, config, languagePack, requestInputFocus, toolingType, persistedToBrowserStorage, botName, messageState, alternateSuggestionsState, locale, botAvatarURL, carbonTheme, useAITheme, } = this.props;
+        const inputState = selectInputState(this.props);
+        const { isAgentTyping } = selectAgentDisplayState(this.props);
+        const { isTypingCounter, isLoadingCounter } = messageState;
+        const { chatState } = persistedToBrowserStorage;
+        const { disclaimersAccepted } = chatState;
+        // If there is a disclaimer, messages should only be rendered once it's accepted.
+        if (config.public.disclaimer?.isOn && !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,
+            'WAC__message--suggestionsPadding': isLastMessage &&
+                alternateSuggestionsState.config.is_on &&
+                !persistedToBrowserStorage.chatState.agentState.isConnected,
+        });
+        // The user can only provide feedback on the last message.
+        const allowNewFeedback = localMessage.fullMessageID === lastMessageID;
+        // We hide all feedback messages in the agent app.
+        const hideFeedback = this.props.config.public.agentAppConfig?.is_on;
+        const messageItemID = localMessage.ui_state.id;
+        const message = (React__default.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, toolingType: toolingType, 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: hideFeedback }));
+        if (showBeforeWelcomeNodeElement) {
+            return (React__default.createElement(LatestWelcomeNodes$1, { welcomeNodeBeforeElement: serviceManager.writeableElements[WriteableElementName.WELCOME_NODE_BEFORE_ELEMENT], key: messageItemID }, message));
+        }
+        return React__default.createElement(Fragment, { key: messageItemID }, message);
+    }
+    /**
+     * Renders the agent banner that appears at the top of the messages list when connecting to an agent.
+     */
+    renderAgentBanner() {
+        return React__default.createElement(AgentBannerContainer, { bannerRef: this.agentBannerRef, onButtonClick: this.props.onEndAgentChat });
+    }
+    /**
+     * Renders an element that acts as a "handle" for the scroll panel. This is provided to allow the scroll panel to be
+     * moved using the keyboard. When this element gets focus the keyboard can be used. Normally we would add
+     * tabIndex=0 to the scroll panel itself but that has the unfortunate consequence of causing the scroll panel
+     * to get focus when you click on it which we don't want. When this element gets focus it causes an extra class
+     * name to be added to the scroll panel which displays a focus indicator on the scroll panel even though it
+     * doesn't actually have focus. This element is not actually visible.
+     *
+     * In addition to providing the ability to scroll the panel, this acts as a button that will move focus to one of
+     * the messages inside the scroll panel to provide additional navigation options.
+     *
+     * @param atTop Indicates if we're rendering the scroll handle at the top or bottom of the scroll panel.
+     */
+    renderScrollHandle(atTop) {
+        const { 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__default.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 }) }));
+    }
+    /**
+     * As soon as the user sends a message, we want to disable all the previous message responses to prevent the user
+     * from interacting with them again. However, if the user's message results in an error, we want to re-enable the
+     * last response from the bot to prevent the user from getting stuck in the case where the input bar is disabled.
+     * This function returns the id of the last message that is permitted to be enabled.
+     */
+    getMessageIDForUserInput() {
+        const { localMessageItems, 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) {
+                // If we find a request that was not an error, then we need to disable everything.
+                return null;
+            }
+            if (isResponse(originalMessage)) {
+                // If we didn't find a successful request, then the first response we find can be enabled.
+                return message.fullMessageID;
+            }
+        }
+        // Nothing should be enabled.
+        return null;
+    }
+    /**
+     * Returns an array of React elements created by this.renderMessage starting from a given index and until the end of
+     * the array OR optionally until we hit a new welcome node.
+     *
+     * @param messageIDForInput The ID of the last message response that can receive input.
+     */
+    renderMessages(messageIDForInput) {
+        const { localMessageItems, 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, messageState, intl, botName, serviceManager, notifications, persistedToBrowserStorage } = this.props;
+        const isConnectedToAgent = persistedToBrowserStorage.chatState.agentState.isConnected;
+        const { isTypingCounter, isLoadingCounter } = messageState;
+        const { isAgentTyping } = selectAgentDisplayState(this.props);
+        const { 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 });
+        }
+        else if (isLoadingCounter) {
+            isTypingMessage = intl.formatMessage({ id: 'messages_botIsLoading' }, { botName });
+        }
+        return (React__default.createElement("div", { id: `WACMessages--holder${serviceManager.namespace.suffix}`, className: "WACMessages--holder" },
+            this.renderAgentBanner(),
+            React__default.createElement("div", { className: cx('WACMessages__Wrapper', {
+                    'WACMessages__Wrapper--scrollHandleHasFocus': scrollHandleHasFocus,
+                }) },
+                React__default.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__default.createElement(Notifications, { serviceManager: serviceManager, notifications: notifications }),
+                    this.renderScrollHandle(false))),
+            !isConnectedToAgent && React__default.createElement(AlternateSuggestionsButtonExport, null)));
+    }
+}
+function debugAutoScroll(message, ...args) {
+}
+var MessagesComponent$1 = withServiceManager(connect((state) => state, null, null, {
+    forwardRef: true,
+})(MessagesComponent));
+
+/**
+ * Creates a memoizer that will take an array of keys and a map of those keys to values and return an array of
+ * values that corresponds to those keys.
+ *
+ * This is optimized to only return a new array of values if the array would actually contain different values
+ * (either in a different order or different values). It performs element-wise comparisons of both the requested
+ * array of keys as well as only the specific values from the map. If the map has extra values that are not used,
+ * those will be ignored.
+ *
+ * For example:
+ * ['key1'], {key1: 'value1', key2: 'value2'} => ['value1']
+ */
+function createUnmappingMemoizer() {
+    return memoizeOne((keys, map) => keys.map(key => map[key]), isUnmappingEqual);
+}
+/**
+ * This function will determine if any of the specific messages used by this class have changed. Note: this could
+ * be a little more efficient if it was pushed up higher in the component chain.
+ */
+function isUnmappingEqual(newArgs, oldArgs) {
+    const [keys1, map1] = newArgs;
+    const [keys2, map2] = oldArgs;
+    if (keys1 === keys2 && map1 === map2) {
+        // Both sets of arguments are the same.
+        return true;
+    }
+    if (keys1.length !== keys2.length) {
+        // The array are different sizes, so the values will not be the same.
+        return false;
+    }
+    // Check each value one by one.
+    for (let index = 0; index <= keys1.length; index++) {
+        const key1 = keys1[index];
+        const key2 = keys2[index];
+        if (key1 !== key2) {
+            // If a key is different, the values will be different.
+            return false;
+        }
+        const value1 = map1[key1];
+        const value2 = map2[key2];
+        if (value1 !== value2) {
+            // A value was found to be different.
+            return false;
+        }
+    }
+    // Everything found to be the same.
+    return true;
+}
+
+function AlternateSuggestionsBackground() {
+    const panelState = useSelector(state => state.alternateSuggestionsState.panelState);
+    const serviceManager = useServiceManager();
+    if (panelState === AlternateSuggestionsPanelState.CLOSED) {
+        return null;
+    }
+    // If the user clicks on this background, then auto-close the panel.
+    const onClick = () => serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(AlternateSuggestionsPanelState.CLOSED, 'Event'));
+    // eslint-disable-next-line
+    return React__default.createElement("div", { className: "WACBackgroundCover", onClick: onClick });
+}
+const AlternateSuggestionsBackgroundExport = React__default.memo(AlternateSuggestionsBackground);
+
+function useLayoutEffectDidUpdate(effect, deps) {
+    const hasRunRef = useRef(false);
+    useLayoutEffect(() => {
+        if (hasRunRef.current) {
+            return effect();
+        }
+        hasRunRef.current = true;
+        return undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}
+
+/**
+ * Compares two numbers in a way that is compatible with the sort() method; it will result in an ascending sort order.
+ *
+ * @param {number} number1 First number to be compared.
+ * @param {number} number2 Second number to be compared.
+ * @returns {number} -1 if the first number is smaller than the second one; 1 if the reverse is true;
+ * or 0 if both numbers are equal.
+ */
+function compareNumbers(number1, number2) {
+    if (number1 < number2) {
+        return -1;
+    }
+    if (number1 > number2) {
+        return 1;
+    }
+    return 0;
+}
+
+const PDFViewerContainer = lazyPDFViewer();
+function OpenPDFButton(props) {
+    const { buttonLabel, documentTitle, url, tooltipText } = props;
+    const direction = document.dir;
+    const [showPDFViewer, setShowPDFViewer] = useState(false);
+    const onClose = useCallback(() => setShowPDFViewer(false), []);
+    return (React__default.createElement("div", { className: "WACOpenPDFButton" },
+        React__default.createElement(Button, { className: "WACOpenPDFButton__Button", kind: "tertiary", iconDescription: tooltipText || buttonLabel, hasIconOnly: true, size: "sm", tooltipPosition: direction === 'rtl' ? 'left' : 'right', "aria-label": buttonLabel, onClick: () => setShowPDFViewer(true) },
+            React__default.createElement(DocumentView, null)),
+        React__default.createElement("div", { className: "WACOpenPDFButton__Text WACWidget__textEllipsis" }, buttonLabel),
+        showPDFViewer && (React__default.createElement(Suspense, { fallback: React__default.createElement(LoadingPDFViewer, null) },
+            React__default.createElement(PDFViewerContainer, { key: url, url: url, title: documentTitle, onClose: onClose })))));
+}
+
+const trackProps = {
+    eventName: 'Assistant Message Received from User',
+    type: 'search',
+};
+const suggestionsTrackProps = {
+    eventName: 'Suggestion Selected',
+    eventDescription: 'User clicks on search suggestions bookmark',
+    type: 'Search',
+};
+function SearchResultComponentBody(props) {
+    const { answer, title, titleIsURL, body, shouldTruncateBody, url, innerRef, showBookmarkButton, urlIsValid, disablePDFViewer, } = props;
+    const languagePack = useLanguagePack();
+    const serviceManager = useServiceManager();
+    const intl = useIntl();
+    const windowWidth = useWindowSize().width;
+    const direction = document.dir;
+    const [bodyExpanded, setBodyExpanded] = useState(props.isBookmark);
+    const toggleExpandedState = () => {
+        setBodyExpanded(!bodyExpanded);
+    };
+    function onBookmarkClick() {
+        serviceManager.actions.track(suggestionsTrackProps);
+        if (props.onBookmarkClick) {
+            props.onBookmarkClick();
+        }
+    }
+    function onLinkClick(event) {
+        serviceManager.actions.track(trackProps);
+        if (!props.url) {
+            // If the link doesn't actually have any content, we need to stop the browser's normal open behavior
+            event.preventDefault();
+        }
+    }
+    function renderLink() {
+        if (urlIsValid) {
+            const label = getSearchLinkLabel(title, url, titleIsURL);
+            if (shouldShowAsPDFButton(url, windowWidth, disablePDFViewer)) {
+                const buttonLabel = intl.formatMessage({ id: 'messages_searchResultsOpenDocumentWithLabel' }, { documentName: label });
+                return (React__default.createElement(OpenPDFButton, { buttonLabel: buttonLabel, documentTitle: label, url: url, tooltipText: languagePack.messages_searchResultsOpenDocument }));
+            }
+            return (React__default.createElement("a", { onClick: onLinkClick, className: "WAC__button--link", href: url || '#', target: "_blank", rel: "noopener noreferrer" },
+                React__default.createElement("div", { className: "WACSearchMessage__TitleUrl WACWidget__textEllipsis" }, label)));
+        }
+        return React__default.createElement("div", { className: "WACSearchMessage__TitleUrl WACWidget__textEllipsis" }, title || url);
+    }
+    // If the user interacts with a search result we send an event to the back-end for tracking.
+    // App looks for clicks on this attribute to send that event.
+    const bodyContent = body && (React__default.createElement("div", { className: cx({
+            WAC__searchResponseBody: shouldTruncateBody,
+            'WACSearchMessage__Result--full': bodyExpanded,
+        }) }, body));
+    let icon;
+    if (showBookmarkButton) {
+        icon = (React__default.createElement(Button, { renderIcon: Bookmark, iconDescription: languagePack.suggestions_searchBookmarkButtonDescription, hasIconOnly: true, tooltipPosition: direction === 'rtl' ? 'right' : 'left', onClick: onBookmarkClick, kind: "ghost", size: "sm" }));
+    }
+    else if (body && shouldTruncateBody) {
+        icon = (React__default.createElement(Button, { renderIcon: shouldTruncateBody && !bodyExpanded ? ChevronDown : ChevronUp, iconDescription: shouldTruncateBody && !bodyExpanded
+                ? languagePack.messages_searchResultsExpand
+                : languagePack.messages_searchResultsCollapse, hasIconOnly: true, tooltipPosition: direction === 'rtl' ? 'right' : 'left', onClick: toggleExpandedState, kind: "ghost", size: "sm" }));
+    }
+    // Content is the actual content of the result cards
+    let content;
+    // ResultBottom is the title/url combination to display at the bottom of the card.
+    let resultBottom;
+    if (title || url) {
+        resultBottom = renderLink();
+        content = bodyContent;
+    }
+    else if (body) {
+        content = bodyContent;
+    }
+    return (React__default.createElement("div", { className: cx('WAC__searchResult', {
+            'WACSearchMessage--hasAnswer': answer,
+            'WACSearchMessage--hasContent': content,
+        }), ref: innerRef },
+        content && React__default.createElement("div", { className: "WACSearchMessage__ResultContent" }, content),
+        React__default.createElement("div", { className: "WACSearchMessage__ResultBottom-wrapper" },
+            resultBottom && React__default.createElement("div", { className: "WACSearchMessage__ResultBottom" }, resultBottom),
+            icon && React__default.createElement("div", { className: "WACSearchMessage__ResultIcon" }, icon))));
+}
+
+/**
+ * Displays a single search result from a search response message that can have multiple results.
+ */
+// This is set to how many characters can show BEFORE we include the ellipsis styling. Note that the actual
+// number of characters displayed may be more or less than this number because the position of the ellipsis is
+// decided by the browser.
+const CHARACTERS_FOR_ELLIPSIS = 200;
+function SearchResultComponent(props) {
+    const { searchResult, announceOnMount, onBookmarkClick, showBookmarkButton, isBookmark } = props;
+    const disablePDFViewer = useSelector((state) => state.config.public.disablePDFViewer);
+    const charactersForEllipsis = props.charactersForEllipsis || CHARACTERS_FOR_ELLIPSIS;
+    // If requested, make sure this element gets announced when it is mounted.
+    const ref = useRef();
+    const ariaAnnouncer = useContext(AriaAnnouncerContext);
+    useEffect(() => {
+        if (ref.current && announceOnMount) {
+            ariaAnnouncer(ref.current);
+        }
+    }, [announceOnMount, ariaAnnouncer]);
+    const onBookmarkClickInternal = useCallback(() => {
+        if (onBookmarkClick) {
+            onBookmarkClick(searchResult);
+        }
+    }, [onBookmarkClick, searchResult]);
+    const { title, url, titleIsURL, urlIsValid, answer } = getSearchResultMetaData(searchResult);
+    return ((title || hasSearchResultBody(searchResult)) && (React__default.createElement(SearchResultComponentBody, { answer: answer, title: title, titleIsURL: titleIsURL, body: React__default.createElement(SearchResultBodyExport, { searchResult: searchResult }), shouldTruncateBody: shouldTruncateBody(searchResult, charactersForEllipsis), urlIsValid: urlIsValid, url: url, innerRef: ref, onBookmarkClick: onBookmarkClickInternal, showBookmarkButton: showBookmarkButton, isBookmark: isBookmark, disablePDFViewer: disablePDFViewer })));
+}
+
+/**
+ * The default number of results to show. Any additional results are dropped and not displayed.
+ */
+const DEFAULT_RESULTS_TO_SHOW = 3;
+class SearchMessage extends PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = { showMoreResults: false };
+        /**
+         * A (memoized) sorted list of the results in this component. This is sorted by confidence with the highest score
+         * being first in the array. This is likely unneeded as the search results appear to come back already sorted by
+         * confidence. An issue has been created to re-visit this code and remove if unneeded when not under time crunch.
+         */
+        this.sortedResults = memoizeOne((results) => filterAndSortResults(results));
+        this.toggleShowMore = () => {
+            this.setState(state => ({ showMoreResults: !state.showMoreResults }));
+        };
+    }
+    /**
+     * Creates components for each of the responses that we want to render.
+     */
+    getSearchResultComponents(results, countToShow, areAdditionResults) {
+        const { charactersForEllipsis, onBookmarkClick, showBookmarkButton, isBookmark } = this.props;
+        const responseComponents = [];
+        for (let index = 0; index < countToShow; index++) {
+            const item = results[index];
+            const searchResultComponent = (React__default.createElement(SearchResultComponent, { searchResult: item, announceOnMount: areAdditionResults, charactersForEllipsis: charactersForEllipsis, onBookmarkClick: onBookmarkClick, showBookmarkButton: showBookmarkButton, isBookmark: isBookmark }));
+            responseComponents.push(React__default.createElement("li", { key: index },
+                React__default.createElement("div", null,
+                    React__default.createElement("div", { className: "WACSearchMessage__ResultDivider" }),
+                    searchResultComponent)));
+        }
+        return responseComponents;
+    }
+    /**
+     * Creates components for each of the responses that we want to render.
+     */
+    renderSearchResults() {
+        const { primary_results = [], results = [] } = this.props.searchResultItem;
+        let sortedResults;
+        // Figure out how many results to show.
+        let countToShow;
+        // The API proposal https://github.ibm.com/Watson/developer-cloud--api-proposals/pull/293 introduced a breaking
+        // change to switch to display primary and additional search results instead of results. We need to also support
+        // the old behavior so check to see if we've got any of the new results.
+        if (primary_results.length > 0) {
+            sortedResults = this.sortedResults(primary_results);
+            countToShow = sortedResults.length;
+        }
+        else {
+            // Handle the legacy behavior.
+            sortedResults = this.sortedResults(results);
+            countToShow = Math.min(sortedResults.length, DEFAULT_RESULTS_TO_SHOW);
+        }
+        return this.getSearchResultComponents(sortedResults, countToShow, false);
+    }
+    /**
+     * Creates components for each of the responses for additional_results that we want to render.
+     */
+    renderAdditionalResults() {
+        const sortedAdditionalResults = this.sortedResults(this.props.searchResultItem.additional_results || []);
+        return this.getSearchResultComponents(sortedAdditionalResults, sortedAdditionalResults.length, true);
+    }
+    render() {
+        const { searchResultItem, languagePack, hideHeader } = this.props;
+        const { showMoreResults } = this.state;
+        const { header, title } = searchResultItem;
+        const primaryResults = this.renderSearchResults();
+        return (React__default.createElement("div", { className: "WACSearchMessage" },
+            !hideHeader && (React__default.createElement("div", { className: "WAC__searchMessage--metablock" }, header || title || languagePack.messages_searchResults)),
+            primaryResults.length > 0 && (React__default.createElement(Tile, { className: "WACSearchMessage__ResultsTile" },
+                React__default.createElement("ul", { className: "WACSearchMessage__Results" },
+                    primaryResults,
+                    showMoreResults && this.renderAdditionalResults()))),
+            !showMoreResults && Boolean(searchResultItem.additional_results?.length) && (React__default.createElement("button", { onClick: this.toggleShowMore, className: "WACSearchMessage__ToggleShowMore WAC__button--link", type: "button" },
+                React__default.createElement("span", null, languagePack.showMoreResults),
+                React__default.createElement(ChevronDown, null)))));
+    }
+}
+/**
+ * Filters and sorts a copy of the given search results. This is sorted by confidence from highest to lowest.
+ * first in the array. The original array is not modified.
+ */
+function filterAndSortResults(results) {
+    if (!results) {
+        return [];
+    }
+    const filteredResults = results.filter(isNotEmptyResult);
+    return filteredResults.sort(compareResults);
+}
+/**
+ * Compares two search results by confidence with the highest confidence being first.
+ */
+function compareResults(result1, result2) {
+    const score1 = result1 && result1.result_metadata ? result1.result_metadata.confidence : 0;
+    const score2 = result2 && result2.result_metadata ? result2.result_metadata.confidence : 0;
+    return -compareNumbers(score1, score2);
+}
+/**
+ * Determines if the given search result has any content.
+ */
+function isNotEmptyResult(result) {
+    const isEmpty = !result ||
+        (isEmptyString(result.body) &&
+            isEmptyString(result.url) &&
+            isEmptyString(result.title) &&
+            isEmptyString(result.answers?.[0]?.text) &&
+            isEmptyString(result.highlight?.title?.[0]) &&
+            isEmptyString(result.highlight?.body?.[0]));
+    return !isEmpty;
+}
+const SearchMessageExport = React__default.memo(SearchMessage);
+
+/**
+ * This components renders a tile that looks like a search tile in a skeleton state.
+ */
+function SearchTileSkeleton() {
+    return (React__default.createElement(Tile, { className: "WACSearchTileSkeleton" },
+        React__default.createElement("div", { className: "WACSearchTileSkeleton__Title" },
+            React__default.createElement(SkeletonText, { heading: true })),
+        React__default.createElement("div", { className: "WACSearchTileSkeleton__Text" },
+            React__default.createElement(SkeletonText, { paragraph: true, lineCount: 2 })),
+        React__default.createElement("div", { className: "WACSearchTileSkeleton__ResultDivider" })));
+}
+
+const { CLOSED: CLOSED$1, OPEN_FULL: OPEN_FULL$1, OPEN_STRIKE: OPEN_STRIKE$1 } = AlternateSuggestionsPanelState;
+const { CONTACT_OPTIONS, ALTERNATE_RESPONSES, STARTERS } = AlternateSuggestionsSection;
+function AlternateSuggestionsOptionsPanel(props) {
+    const { requestInputFocus, alternateSuggestionsState, showSearchSkeleton, languagePack } = props;
+    const closeButtonRef = useRef();
+    const serviceManager = useServiceManager();
+    const { panelState, suggestionListItems, sourceResponse, starters, contactItem, searchResults, allowCollapse, showSearchSection, } = alternateSuggestionsState;
+    const { suggestions_sectionTitleAlternateResponses, suggestions_sectionTitleSearch, suggestions_sectionTitleContact, suggestions_sectionTitleStarters, suggestions_ariaPanelButtonToggle, suggestions_ariaButtonToClose, suggestions_title, } = languagePack;
+    const onCloseClick = useCallback(() => {
+        serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(CLOSED$1, 'User'));
+    }, [serviceManager]);
+    const onToggleClick = useCallback(() => {
+        const newState = panelState === OPEN_FULL$1 ? OPEN_STRIKE$1 : OPEN_FULL$1;
+        serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(newState, 'User'));
+    }, [serviceManager, panelState]);
+    const onBookmarkClick = useCallback((searchResult) => {
+        injectSearchResultMessage(searchResult, serviceManager);
+    }, [serviceManager]);
+    const onButtonClick = (selectedItem, index, section) => {
+        serviceManager.actions.sendSuggestionChoice(selectedItem, sourceResponse, index, section);
+        // Move focus back to the input field.
+        setTimeout(requestInputFocus);
+    };
+    useLayoutEffect(() => {
+        doFocus(closeButtonRef.current);
+    }, []);
+    function renderSearchResults() {
+        if (!showSearchSection) {
+            return null;
+        }
+        let content;
+        if (showSearchSkeleton) {
+            content = (React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__SearchSkeleton" },
+                React__default.createElement(SearchTileSkeleton, null),
+                React__default.createElement(SearchTileSkeleton, null),
+                React__default.createElement(SearchTileSkeleton, null)));
+        }
+        else if (!searchResults) {
+            content = (React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__NoSearchResults" },
+                React__default.createElement(SatelliteRadar, { size: 24 }),
+                React__default.createElement("div", null, languagePack.suggestions_noSearchResults)));
+        }
+        else {
+            content = (React__default.createElement(SearchMessageExport, { serviceManager: serviceManager, searchResultItem: searchResults, languagePack: languagePack, charactersForEllipsis: 100, onBookmarkClick: onBookmarkClick, showBookmarkButton: true, hideHeader: true }));
+        }
+        return (React__default.createElement(PanelSection, { label: suggestions_sectionTitleSearch, testId: "Search" }, content));
+    }
+    return (React__default.createElement("div", { className: cx('WACAlternateSuggestionsOptionsPanel', {
+            'WACAlternateSuggestionsOptionsPanel--Full': panelState === OPEN_FULL$1,
+            'WACAlternateSuggestionsOptionsPanel--Strike': panelState === OPEN_STRIKE$1,
+        }) },
+        React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__Header" },
+            React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__Icon" },
+                React__default.createElement(QuestionMarkIcon, null)),
+            React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__Title" }, suggestions_title),
+            allowCollapse && (React__default.createElement(Button, { type: "button", kind: ButtonKindEnum.GHOST, className: "WACAlternateSuggestionsOptionsPanel__HeaderButton", onClick: onToggleClick, "aria-label": suggestions_ariaPanelButtonToggle, "data-test-id": "Toggle" },
+                panelState === OPEN_STRIKE$1 && React__default.createElement(UpToTop, { size: 20 }),
+                panelState === OPEN_FULL$1 && React__default.createElement(DownToBottom, { size: 20 }))),
+            React__default.createElement(Button, { type: "button", kind: ButtonKindEnum.GHOST, className: "WACAlternateSuggestionsOptionsPanel__HeaderButton", onClick: onCloseClick, "aria-label": suggestions_ariaButtonToClose, ref: closeButtonRef, "data-test-id": "Close" },
+                React__default.createElement(Close, { size: 20 }))),
+        React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ScrollPanel" },
+            Boolean(suggestionListItems?.length) && (React__default.createElement(ButtonsPanel, { items: suggestionListItems, label: suggestions_sectionTitleAlternateResponses, onButtonClick: onButtonClick, section: ALTERNATE_RESPONSES, testId: "AlternateResponses" })),
+            panelState === OPEN_FULL$1 && renderSearchResults(),
+            contactItem && (React__default.createElement(ContactOptionButton, { item: contactItem, label: suggestions_sectionTitleContact, onButtonClick: onButtonClick })),
+            Boolean(starters?.length) && (React__default.createElement(ButtonsPanel, { items: starters, label: suggestions_sectionTitleStarters, onButtonClick: onButtonClick, section: STARTERS, testId: "Starters" })))));
+}
+/**
+ * This panel renders a list of buttons.
+ */
+function ButtonsPanel(props) {
+    const { items, label, onButtonClick, section, testId } = props;
+    return (React__default.createElement(PanelSection, { label: label, testId: testId },
+        React__default.createElement("ul", { className: "WAC__button-holder" }, items &&
+            items.map((item, index) => {
+                let clickSection = section;
+                let label;
+                if (isSuggestionListItem(item)) {
+                    label = item.option.label;
+                    // If the user clicks on the contact option (which can appear either in its own section or added to the
+                    // end of the alternate responses section) we need to use a different index and section.
+                    if (item.isContactSuggestion) {
+                        clickSection = AlternateSuggestionsSection.CONTACT_OPTIONS;
+                    }
+                }
+                else {
+                    label = item.label;
+                }
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                React__default.createElement("li", { key: index },
+                    React__default.createElement(unstable__ChatButton, { type: "button", size: ButtonSizeEnum.SMALL, kind: ButtonKindEnum.TERTIARY, isQuickAction: true, disabled: item.isSelected, isSelected: item.isSelected, onClick: () => onButtonClick(item, index, clickSection) }, label)));
+            }))));
+}
+/**
+ * The wrapper for a section of the panel.
+ */
+function PanelSection(props) {
+    return (React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__Section", "data-test-id": props.testId },
+        React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__SectionTitle" },
+            React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__SectionTitleLabel" }, props.label),
+            React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__SectionTitleDivider" })),
+        props.children));
+}
+/**
+ * The contact option button.
+ */
+function ContactOptionButton(props) {
+    const { item, label, onButtonClick } = props;
+    return (React__default.createElement(PanelSection, { label: label, testId: "Contact" },
+        React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ContactOption" },
+            React__default.createElement(Button, { type: "button", kind: ButtonKindEnum.GHOST, disabled: item.isSelected, onClick: () => onButtonClick(item, 0, CONTACT_OPTIONS) },
+                React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ContactOptionInner" },
+                    React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ContactOptionInnerColor" }),
+                    React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ContactOptionInnerText" }, item.option.label),
+                    React__default.createElement("div", { className: "WACAlternateSuggestionsOptionsPanel__ContactOptionInnerIcon" },
+                        React__default.createElement(HelpDesk, { size: 20 })))))));
+}
+/**
+ * This will inject a message for the given search result into the main message list.
+ */
+function injectSearchResultMessage(searchResult, serviceManager) {
+    // Clicking a search result will insert this search result into the main message list (and also send and update
+    // event to the back-end to make sure it gets stored in history).
+    const { suggestions_searchBookmarkHeader, suggestions_searchBookmarkFooter } = serviceManager.store.getState().languagePack;
+    const newMessage = {
+        id: null,
+        thread_id: THREAD_ID_MAIN,
+        output: {
+            generic: [
+                assertType({
+                    response_type: MessageResponseTypes.SEARCH,
+                    primary_results: [searchResult],
+                    header: suggestions_searchBookmarkHeader,
+                }),
+                createTextItem(suggestions_searchBookmarkFooter),
+            ],
+        },
+        history: {
+            is_bookmark: true,
+        },
+    };
+    serviceManager.actions.insertLocalMessageResponse(newMessage, true);
+    // Close the suggestions menu.
+    serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(AlternateSuggestionsPanelState.CLOSED, 'Search'));
+}
+
+const { CLOSED, OPEN_FULL, OPEN_STRIKE } = AlternateSuggestionsPanelState;
+let shouldDisableFocusTrap = false;
+function AlternateSuggestionsContainer(props) {
+    const { requestInputFocus } = props;
+    const alternateSuggestionsState = useSelector((state) => state.alternateSuggestionsState);
+    const languagePack = useSelector((state) => state.languagePack);
+    const isChatOpen = useSelector((state) => state.persistedToBrowserStorage.launcherState.viewState.mainWindow);
+    const isHidden = useContext(HideComponentContext);
+    const { panelState, searchResultsLoading } = alternateSuggestionsState;
+    const serviceManager = useServiceManager();
+    const containerRef = useRef();
+    const previousHeightRef = useRef(0);
+    const prevStateRef = useRef(alternateSuggestionsState);
+    // This is called when the focus trap becomes deactivated (like if the user presses Escape). We'll close the panel
+    // when that happens.
+    const onDeactivate = useCallback(() => {
+        serviceManager.store.dispatch(actions.setAlternateSuggestionsPanelState(CLOSED, 'User'));
+    }, [serviceManager]);
+    const newClassName = getPanelClassName(panelState);
+    useLayoutEffectDidUpdate(() => {
+        // At this point the components have been rendered to the DOM in the desired end state. We need to examine the
+        // previous state to determine what changed and decide if we need to animate a transition from that previous
+        // state to the current state. If so, we'll use the current state to tells us the end goal and then we'll reset
+        // the elements manually to the previous state and execute the animation between them.
+        const { panelState: prevPanelState } = prevStateRef.current;
+        if (panelState !== prevPanelState) {
+            if (panelState !== CLOSED) {
+                // The panel is currently in its end state so we'll grab the current height and then animate from the
+                // previous height to the current height.
+                const startHeight = `${previousHeightRef.current}px`;
+                const endHeight = `${containerRef.current.offsetHeight}px`;
+                if (containerRef.current?.style?.setProperty) {
+                    containerRef.current.style.setProperty('--cds-chat-Animate-Start-Height', startHeight);
+                    containerRef.current.style.setProperty('--cds-chat-Animate-End-Height', endHeight);
+                    animateWithClass(containerRef.current, 'WACAlternateSuggestionsContainer--animate', 333, () => {
+                        if (containerRef.current) {
+                            containerRef.current.style.height = null;
+                            previousHeightRef.current = containerRef.current.offsetHeight;
+                        }
+                    });
+                }
+            }
+            else {
+                previousHeightRef.current = 0;
+            }
+        }
+        prevStateRef.current = alternateSuggestionsState;
+    });
+    return (panelState !== CLOSED && (React__default.createElement("div", { className: `WACAlternateSuggestionsContainer ${newClassName}`, ref: containerRef },
+        React__default.createElement(FocusTrap, { active: isChatOpen && !isHidden && !shouldDisableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, onDeactivate, returnFocusOnDeactivate: !IS_MOBILE } },
+            React__default.createElement("div", { className: "WACAlternateSuggestionsContainer__FocusTrap" },
+                React__default.createElement(AlternateSuggestionsOptionsPanel, { alternateSuggestionsState: alternateSuggestionsState, requestInputFocus: requestInputFocus, panelState: panelState, showSearchSkeleton: searchResultsLoading && panelState === OPEN_FULL, languagePack: languagePack }))))));
+}
+/**
+ * Returns the classname for the container that represents the given panel state.
+ */
+function getPanelClassName(panelState) {
+    switch (panelState) {
+        case OPEN_STRIKE:
+            return 'WACAlternateSuggestionsContainer--Strike';
+        case OPEN_FULL:
+            return 'WACAlternateSuggestionsContainer--Full';
+        default:
+            return 'WACAlternateSuggestionsContainer--Closed';
+    }
+}
+const AlternateSuggestionsContainerExport = React__default.memo(AlternateSuggestionsContainer);
+
+/**
+ * Displays a modal asking if the user wants to end a chat with an agent. This also covers the case where the user
+ * cancels a request for an agent before an agent has joined.
+ */
+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__default.createElement(ConfirmModal, { title: title, message: message, onConfirm: onConfirm, onCancel: onCancel, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, modalAnnounceMessage: message, serviceManager: serviceManager }));
+}
+
+class Chat extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Default state.
+         */
+        this.state = {
+            showEndChatConfirmation: false,
+            hasCaughtError: false,
+        };
+        /**
+         * A React ref to the Input component.
+         */
+        this.inputRef = React__default.createRef();
+        /**
+         * A React ref to the Header component.
+         */
+        this.headerRef = React__default.createRef();
+        /**
+         * A React ref to the Messages component.
+         */
+        this.messagesRef = React__default.createRef();
+        /**
+         * This is the memoized messages used in this component. This is the step that pulls the messages from
+         * the map and puts them in the right order in an array.
+         */
+        this.messagesToArray = createUnmappingMemoizer();
+        /**
+         * The callback that can be called when the end chat confirmation panel should be hidden.
+         */
+        this.hideConfirmEndChat = () => {
+            // Hide the modal and then move focus back to the input field.
+            this.setState({ showEndChatConfirmation: false });
+            setTimeout(() => {
+                // The input field may still be disabled until the state change is re-rendered, so defer the focus move.
+                this.requestInputFocus();
+            });
+        };
+        /**
+         * The callback that can be called when the end chat confirmation panel should be shown.
+         */
+        this.showConfirmEndChat = () => {
+            this.setState({ showEndChatConfirmation: true });
+        };
+        /**
+         * The callback that can be called when the end agent chat confirmation panel should be shown.
+         */
+        this.confirmAgentEndChat = () => {
+            this.hideConfirmEndChat();
+            this.props.serviceManager.humanAgentService.endChat(true);
+        };
+        /**
+         * If we have nothing to focus on correctly in the chat window, we focus on the header. If the header has no buttons
+         * available, we can fall back to focusing on the messages scroll handle.
+         */
+        this.requestDefaultFocus = () => {
+            if (!this.headerRef?.current?.requestFocus()) {
+                doFocusRef(this.messagesRef.current?.scrollHandleRef);
+            }
+        };
+        /**
+         * This is a callback function that will request that focus be moved to the main input field where the user types
+         * in their requests to the assistant. If the input is currently disabled or hidden, then we will try to focus on
+         * a focusable option in the latest responses from the assistant. If that doesn't exist then focus will be moved
+         * to the close button instead.
+         *
+         */
+        this.requestInputFocus = () => {
+            const { agentDisplayState } = this.props;
+            try {
+                // If the agent banner is visible and the input field is disabled, move focus there.
+                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 {
+                        // This will attempt to move focus to the last output message in the message list. This is intended to cover
+                        // the use case where the customer has disabled the input field. When the assistant returns a response and
+                        // there is no input field, the expectation is that something in that response will be focusable and we'll
+                        // try to move focus to it. If the last message is not a response and the input field is disabled, that
+                        // means the assistant is processing a request. In that case, we don't want to move focus to a message but
+                        // rather fallback to something else like the close button.
+                        const htmlElements = this.messagesRef.current.getLastOutputMessageElements();
+                        if (!focusOnFirstFocusableItemInArrayOfElements(htmlElements)) {
+                            this.requestDefaultFocus();
+                        }
+                    }
+                }
+                else {
+                    this.requestDefaultFocus();
+                }
+            }
+            catch (error) {
+                consoleError('An error occurred in Chat.requestInputFocus', error);
+            }
+        };
+        /**
+         * Requests an auto scroll operation to happen on the messages panel. See {@link MessagesComponent#doAutoScroll} for
+         * more information.
+         */
+        this.doAutoScroll = (options) => {
+            this.messagesRef.current?.doAutoScroll(options);
+        };
+        /**
+         * Returns the current scrollBottom value for the message scroll panel.
+         */
+        this.getMessagesScrollBottom = () => {
+            return this.messagesRef?.current?.getContainerScrollBottom();
+        };
+        /**
+         * The callback that is called when the user selects one or more files to be uploaded.
+         */
+        this.onFilesSelectedForUpload = (uploads) => {
+            const isInputToAgent = this.props.agentDisplayState.isConnectingOrConnected;
+            if (isInputToAgent) {
+                this.props.serviceManager.humanAgentService.filesSelectedForUpload(uploads);
+                // If the user chose a file and multiple files are not allowed, the file input will become disabled so we need to
+                // move focus back to the text input.
+                if (!this.props.inputState.allowMultipleFileUploads) {
+                    this.requestInputFocus();
+                }
+            }
+        };
+    }
+    async scrollOnHydrationComplete() {
+        // Once the hydration is complete, we want to scroll to the very bottom.
+        if (this.props.config.public.__ibm__.disableInitialScroll) {
+            // If the initial scrolling is disabled, scroll to the top anyway. This overrides the browser's default
+            // behavior where it will remember the last scroll position.
+            this.doAutoScroll({ scrollToTop: 0 });
+        }
+        else {
+            this.doAutoScroll();
+        }
+    }
+    componentDidMount() {
+        if (this.props.isHydrationAnimationComplete) {
+            setTimeout(() => {
+                // We need to make sure React has finished rendering updates before we scroll.
+                this.scrollOnHydrationComplete();
+            });
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { isHydrationAnimationComplete, agentState } = this.props;
+        // If we don't wait for the animation to complete, the auto scroll can not work correctly.
+        // Thankfully, we have this property already to look at and kick off the autoscroll.
+        if (isHydrationAnimationComplete && !prevProps.isHydrationAnimationComplete) {
+            setTimeout(() => {
+                // We need to make sure React has finished rendering updates before we scroll.
+                this.scrollOnHydrationComplete();
+            });
+        }
+        // This covers the case where an agent joins while the confirmation modal is visible.
+        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 });
+    }
+    /**
+     * Scrolls to the (full) message with the given ID. Since there may be multiple message items in a given
+     * message, this will scroll the first message to the top of the message window.
+     *
+     * @param messageID The (full) message ID to scroll to.
+     * @param animate Whether or not the scroll should be animated. Defaults to true.
+     */
+    doScrollToMessage(messageID, animate = true) {
+        this.messagesRef.current?.doScrollToMessage(messageID, animate);
+    }
+    getMessageInput() {
+        return this.inputRef.current?.getMessageInput();
+    }
+    /**
+     * Determines if the input field should be disabled based on the current props.
+     */
+    shouldDisableInput() {
+        return this.props.inputState.isReadonly || this.props.agentDisplayState.disableInput;
+    }
+    /**
+     * Determines if the send button should be disabled based on the current props. The send button is disabled if the
+     * input field should be disabled or if the messages are not yet hydrated (ready to be shown). We let the user
+     * type into the input field before the messages are ready to avoid messing with moving focus around, but we don't
+     * let them send the message.
+     */
+    shouldDisableSend() {
+        const { isHydrated } = this.props;
+        return this.shouldDisableInput() || !isHydrated;
+    }
+    renderMessagesAndInput() {
+        const { languagePack, toolingType, messageState, intl, allMessageItemsByID, isHydrated, serviceManager, inputState, onUserTyping, agentState, botName, onSendInput, locale, useAITheme, carbonTheme, agentDisplayState, } = this.props;
+        const { fieldVisible, files, allowFileUploads, allowedFileUploadTypes, allowMultipleFileUploads, stopStreamingButtonState, } = inputState;
+        const { fileUploadInProgress } = agentState;
+        const { inputPlaceholderKey } = agentDisplayState;
+        const inputCustomizations = this.props.config.public.messaging.inputs?.mainWindow;
+        // If there are any files currently selected or being uploaded and multiple files are not allowed, then show the
+        // button as disabled.
+        const numFiles = files?.length ?? 0;
+        const anyCurrentFiles = numFiles > 0 || fileUploadInProgress;
+        const showUploadButtonDisabled = anyCurrentFiles && !allowMultipleFileUploads;
+        return (React__default.createElement(React__default.Fragment, null,
+            isHydrated && (React__default.createElement("div", { className: "WACMessagesContainer__NonInputContainer" },
+                React__default.createElement(MessagesComponent$1, { ref: this.messagesRef, messageState: messageState, localMessageItems: this.messagesToArray(messageState.localMessageIDs, allMessageItemsByID), requestInputFocus: this.requestInputFocus, toolingType: toolingType, botName: botName, intl: intl, onEndAgentChat: this.showConfirmEndChat, locale: locale, useAITheme: useAITheme, carbonTheme: carbonTheme }))),
+            React__default.createElement(WriteableElement, { slotName: WriteableElementName.BEFORE_INPUT_ELEMENT, id: `beforeInputElement${serviceManager.namespace.suffix}`, element: serviceManager.writeableElements[WriteableElementName.BEFORE_INPUT_ELEMENT] }),
+            React__default.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], inputCustomizations: inputCustomizations, isStopStreamingButtonVisible: stopStreamingButtonState.isVisible, isStopStreamingButtonDisabled: stopStreamingButtonState.isDisabled }),
+            this.state.showEndChatConfirmation && (React__default.createElement(EndAgentChatModal, { onConfirm: this.confirmAgentEndChat, onCancel: this.hideConfirmEndChat })),
+            this.props.agentState.showScreenShareRequest && React__default.createElement(RequestScreenShareModal, null)));
+    }
+    render() {
+        const { serviceManager, languagePack, onClose, onCloseAndRestart, onRestart, config, onToggleHomeScreen, botName, headerDisplayName, headerAvatarConfig, } = this.props;
+        const { hasCaughtError } = this.state;
+        const className = `WAC ${config.public.agentAppConfig.is_on ? 'WACAgentApp' : ''}`;
+        return (React__default.createElement("div", { className: className },
+            React__default.createElement(BotHeaderExport, { ref: this.headerRef, onClose: onClose, onCloseAndRestart: onCloseAndRestart, onRestart: onRestart, headerDisplayName: headerDisplayName, headerAvatarConfig: headerAvatarConfig, onToggleHomeScreen: onToggleHomeScreen, enableChatHeaderConfig: true, includeWriteableElement: true }),
+            React__default.createElement(NonHeaderBackground, null),
+            React__default.createElement("div", { className: "WACPanelContent WAC__ChatNonHeaderContainer" },
+                hasCaughtError && (React__default.createElement("div", { className: "WAC__MessagesErrorHandler" },
+                    React__default.createElement(CatastrophicErrorExport, { serviceManager: serviceManager, languagePack: languagePack, onRestart: onRestart, showHeader: false, botName: botName, headerDisplayName: headerDisplayName, catastrophicErrorType: CatastrophicErrorType.FAILED }))),
+                !hasCaughtError && React__default.createElement("div", { className: "WAC__messagesAndInputContainer" }, this.renderMessagesAndInput()),
+                React__default.createElement(AlternateSuggestionsContainerExport, { requestInputFocus: this.requestInputFocus })),
+            React__default.createElement(AlternateSuggestionsBackgroundExport, null)));
+    }
+}
+/**
+ * Displays a background that covers the non-header area of the chat.
+ */
+function NonHeaderBackground() {
+    const isVisible = useSelector(state => state.showNonHeaderBackgroundCover);
+    return isVisible ? React__default.createElement("div", { className: "WACBackgroundCover WACBackgroundCover__NonHeader" }) : null;
+}
+var Chat$1 = injectIntl(Chat, { forwardRef: true });
+
+export { Chat as ChatClass, Chat$1 as default };