@carbon/ai-chat 0.3.2 → 0.3.3

package/dist/es/SFServiceDesk.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/SearchResultBody.js

@@ -0,0 +1,142 @@
+/**
+* @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 from 'react';
+import { ba as convertToEmptyStringIfStringifiedNull, bI as convertPossibleStringifiedArrayToFirstString } from './AppContainer.js';
+
+/**
+ * Miscellaneous JavaScript utilities.
+ */
+/**
+ * Determines if the given value is null or undefined.
+ */
+function isNil(value) {
+    return value === undefined || value === null;
+}
+/**
+ * Determines if a given number is odd.
+ */
+function isOdd(value) {
+    if (value % 2 !== 1) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * Returns a {@link ReactNode} that represents the given text with `<em>` tags in the string replaced with actual
+ * JSX elements to form highlighted portions.
+ */
+function formatHighlightFields(str) {
+    const strArray = str.split(new RegExp('<em>|</em>', 'g'));
+    // If there is an odd number of '<em>' separators, then just return the whole string, minus the '<em>' elements.
+    if (isOdd(strArray.length)) {
+        return [strArray.join('')];
+    }
+    return strArray.map((strSegment, index) => {
+        if (isOdd(index)) {
+            return strSegment;
+        }
+        return (
+        // eslint-disable-next-line react/no-array-index-key
+        React__default.createElement("em", { key: index, className: "WAC__highlight" }, strSegment));
+    });
+}
+function shouldTruncateBody(searchResult, charactersForEllipsis) {
+    return searchResult.highlight.body[0].length > charactersForEllipsis;
+}
+function hasSearchResultBody(searchResult) {
+    if (searchResult.highlight?.body?.[0]) {
+        return Boolean(formatHighlightFields(convertToEmptyStringIfStringifiedNull(searchResult.highlight?.body[0])));
+    }
+    return false;
+}
+/**
+ * Determine which element to render as the body and the amount of text that will be displayed in it.
+ * Always use highlight.body, Use body as a fallback based on certain conditions
+ * This was driven by https://github.ibm.com/Watson-Discovery/customer-care/issues/660
+ * We check the searchResults.highlight.body which should be an array. If that is not set, we fall back to
+ * searchResult.body which is either a string OR a stringified array. If it is the latter, we only want the first
+ * item in the stringified array. https://github.ibm.com/watson-engagement-advisor/wea-backlog/issues/31262 has an
+ * explanation.
+ */
+function SearchResultBody({ searchResult }) {
+    if (searchResult && 'highlight' in searchResult) {
+        if (searchResult.highlight?.body?.[0]) {
+            return formatHighlightFields(convertToEmptyStringIfStringifiedNull(searchResult.highlight.body[0]));
+        }
+    }
+    if (searchResult && 'body' in searchResult && searchResult.body) {
+        return convertPossibleStringifiedArrayToFirstString(convertToEmptyStringIfStringifiedNull(searchResult.body));
+    }
+    return null;
+}
+const SearchResultBodyExport = React__default.memo(SearchResultBody);
+/**
+ * In conversational search citation panels we show the search result body instead of the citation text or highlight
+ * body because it will contain the most context for the user. This will only be used if there is no url or
+ * pdf attached to the source, so the assumption is that the data will be nicely formatted from document ingestion
+ * instead of a web crawler. We also make sure to highlight the citation text within the search result body to help the
+ * user find the citation.
+ */
+function SearchResultBodyWithCitationHighlighted({ relatedSearchResult, citationItem, }) {
+    const elementsArray = [];
+    let searchString;
+    let citationString;
+    if (relatedSearchResult?.body) {
+        const searchStringFromBody = convertPossibleStringifiedArrayToFirstString(convertToEmptyStringIfStringifiedNull(relatedSearchResult.body));
+        // Search result body's can contain <em> and </em> tags which need to be removed. After remove the em tags, it
+        // should be safe to assume that the citation text is a direct substring of either the search_result body or title.
+        searchString = searchStringFromBody.replace('<em>', '').replace('</em>', '');
+    }
+    if (citationItem?.text) {
+        citationString = convertPossibleStringifiedArrayToFirstString(convertToEmptyStringIfStringifiedNull(citationItem.text));
+    }
+    if (searchString && citationString) {
+        const startOfCitation = searchString.indexOf(citationString);
+        // If the citation string is not within the search string from the search_result body than the citation was from the
+        // search_result title which doesn't get this highlight treatment.
+        if (startOfCitation !== -1) {
+            // Add the text prior to the citation to the array.
+            elementsArray.push(React__default.createElement("span", { key: 1 }, searchString.substring(0, startOfCitation)));
+            // Add the highlighted citation text to the array.
+            elementsArray.push(React__default.createElement("em", { key: 2, className: "WAC__highlight" }, searchString.substring(startOfCitation, startOfCitation + citationString.length)));
+            // Add the text after the citation to the array.
+            elementsArray.push(React__default.createElement("span", { key: 3 }, searchString.substring(startOfCitation + citationString.length)));
+        }
+    }
+    if (elementsArray.length) {
+        // If we had a search string and a citation string then we were able to form a highlighted search body which should
+        // be used.
+        return elementsArray;
+    }
+    if (searchString.length) {
+        // If we couldn't form a highlighted search body then just use the search string. This could happen if the citation
+        // string was in the title of the search_result instead of in the body.
+        return [React__default.createElement("span", null, searchString)];
+    }
+    // If for some reason we couldn't create a search string then use the citation string.
+    return [React__default.createElement("span", null, citationString)];
+}
+const SearchResultBodyWithCitationHighlightedExport = React__default.memo(SearchResultBodyWithCitationHighlighted);
+
+export { SearchResultBodyExport as S, SearchResultBodyWithCitationHighlightedExport as a, hasSearchResultBody as h, isNil as i, shouldTruncateBody as s };

package/dist/es/ServiceDeskImpl.js

@@ -13,9 +13,9 @@
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 * 
-* @carbon/ai-chat 0.3.2
+* @carbon/ai-chat 0.3.3
 * 
-* Built: Jun 11 2025 1:30 pm -04:00
+* Built: Jul 11 2025 1:09 pm -04:00
 * 
 * 
 */

package/dist/es/TourContainer.js

@@ -0,0 +1,429 @@
+/**
+* @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 ErrorFilled from '@carbon/icons-react/es/ErrorFilled.js';
+import Restart from '@carbon/icons-react/es/Restart.js';
+import { Button, InlineNotification } from '@carbon/react';
+import React__default, { useRef, useImperativeHandle, useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { _ as useLanguagePack, aa as doFocusRef, Z as cx, a0 as useServiceManager, bl as useAriaAnnouncer, bm as getMediaDimensions, j as consoleError, bU as formatMessage, bV as HideComponent, a9 as AnnounceOnMountComponentExport, bK as MountChildrenOnDelay, bW as MainWindowOpenReason } from './AppContainer.js';
+import Close from '@carbon/icons-react/es/Close.js';
+import Subtract from '@carbon/icons-react/es/Subtract.js';
+import ArrowLeft from '@carbon/icons-react/es/ArrowLeft.js';
+import ArrowRight from '@carbon/icons-react/es/ArrowRight.js';
+import Chat from '@carbon/icons-react/es/Chat.js';
+import { I as InlineError } from './InlineError.js';
+import { I as ImageExport, V as VideoComponentExport, a as SkeletonPlaceholder } from './VideoComponent.js';
+import { R as RichTextExport } from './RichText.js';
+import { j as MessageResponseTypes, p as ViewType, T as TourEndReason, V as ViewChangeReason } from './customElement.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/DownToBottom.js';
+import '@carbon/icons-react/es/Menu.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 'lit';
+import 'lit/decorators.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/overflow-menu/index.js';
+import '@carbon/icons-react/es/ChevronDown.js';
+import '@carbon/icons-react/es/ChevronUp.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/Music.js';
+import 'lit/directives/unsafe-html.js';
+
+/**
+ * This renders the close and minimize buttons for the tour feature.
+ */
+function TourCloseMinimizeComponent(props) {
+    const { hideMinimizeButton, onMinimizeClick, onCloseClick } = props;
+    const { tour_ariaMinimizeButton, tour_ariaCloseButton } = useLanguagePack();
+    return (React__default.createElement("div", { className: "WACTour__CloseMinimizeWrapper" },
+        !hideMinimizeButton && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Button, { className: "WACTour__CloseMinimizeButton WACTour__MinimizeButton", kind: "ghost", hasIconOnly: true, renderIcon: Subtract, iconDescription: tour_ariaMinimizeButton, onClick: onMinimizeClick, "aria-label": tour_ariaMinimizeButton }),
+            React__default.createElement("div", { className: "WACTour__CloseMinimizeDivider" }))),
+        React__default.createElement(Button, { className: "WACTour__CloseMinimizeButton WACTour__CloseButton", kind: "ghost", hasIconOnly: true, renderIcon: Close, iconDescription: tour_ariaCloseButton, onClick: onCloseClick, "aria-label": tour_ariaCloseButton })));
+}
+
+/**
+ * This renders the buttons to open the main window, progress forward and back through the steps, and end the tour once
+ * on the last step.
+ */
+function TourControlsComponent(props, ref) {
+    const { reservePreviousButtonSpace, hidePreviousButton, renderDoneButton, disableNextButton, hideButtons, hideChatButton, onOpenMainWindowClick, onNextClick, onPreviousClick, onDoneClick, } = props;
+    const { tour_ariaChatButton, tour_ariaNextButton, tour_ariaPreviousButton, tour_doneButton } = useLanguagePack();
+    const nextButtonRef = useRef();
+    const doneButtonRef = useRef();
+    useImperativeHandle(ref, () => ({
+        requestFocus: () => {
+            setTimeout(() => {
+                if (doneButtonRef.current) {
+                    doFocusRef(doneButtonRef);
+                }
+                else {
+                    doFocusRef(nextButtonRef);
+                }
+            });
+        },
+    }));
+    return (React__default.createElement("div", { className: cx('WACTour__Controls', { 'WACTour__Controls--empty': hideButtons }) },
+        !hideChatButton && (React__default.createElement("div", { className: "WACTour__ControlsButton" },
+            React__default.createElement(Button, { className: "WACTour__MainWindowButton", kind: "ghost", size: "md", hasIconOnly: true, renderIcon: props => React__default.createElement(Chat, { ...props }), iconDescription: tour_ariaChatButton, onClick: onOpenMainWindowClick, "aria-label": tour_ariaChatButton }))),
+        reservePreviousButtonSpace && (React__default.createElement("div", { className: "WACTour__ControlsButton" },
+            React__default.createElement(Button, { className: cx('WACTour__PreviousButton', {
+                    'WACTour__ControlsButton--hidden': hidePreviousButton,
+                }), kind: "ghost", size: "md", hasIconOnly: true, renderIcon: props => React__default.createElement(ArrowLeft, { ...props }), iconDescription: tour_ariaPreviousButton, onClick: onPreviousClick, "aria-label": tour_ariaPreviousButton }))),
+        renderDoneButton && (React__default.createElement("div", { className: "WACTour__ControlsButton" },
+            React__default.createElement(Button, { ref: doneButtonRef, className: "WACTour__DoneButton", size: "md", onClick: onDoneClick }, tour_doneButton))),
+        !renderDoneButton && (React__default.createElement("div", { className: "WACTour__ControlsButton" },
+            React__default.createElement(Button, { ref: nextButtonRef, className: "WACTour__NextButton", size: "md", hasIconOnly: true, renderIcon: props => React__default.createElement(ArrowRight, { ...props }), iconDescription: tour_ariaNextButton, onClick: onNextClick, disabled: disableNextButton, "aria-label": tour_ariaNextButton })))));
+}
+const TourControlsComponentExport = React__default.forwardRef(TourControlsComponent);
+
+/**
+ * This renders the content for a particular step within the tour.
+ */
+function TourStepContentComponent(props) {
+    const { stepGenericItem, isCurrentStep } = props;
+    const serviceManager = useServiceManager();
+    const ariaAnnouncer = useAriaAnnouncer();
+    const rootRef = useRef();
+    /**
+     * Determine if a border should be shown between the step content and the tour controls.
+     */
+    function showBottomBorder() {
+        const responseType = stepGenericItem.response_type;
+        switch (responseType) {
+            case MessageResponseTypes.TEXT:
+                // For a text step we want to show a border between the text and the tour controls.
+                return true;
+            case MessageResponseTypes.IMAGE:
+                // If the Image is going to have a description then we want to show a border between the description and the
+                // tour controls.
+                return stepGenericItem?.description;
+            case MessageResponseTypes.VIDEO:
+                // If the Video is going to have a description then we want to show a border between the description and the
+                // tour controls.
+                return stepGenericItem?.description;
+            default:
+                // For an unsupported step we want to show a border between the error and the tour controls.
+                return true;
+        }
+    }
+    /**
+     * Render the appropriate component for the given message responseType.
+     */
+    function renderStepContent() {
+        const responseType = stepGenericItem.response_type;
+        switch (responseType) {
+            case MessageResponseTypes.TEXT:
+                return React__default.createElement(StepContentText, { messageItem: stepGenericItem });
+            case MessageResponseTypes.IMAGE:
+                return React__default.createElement(StepContentImage, { messageItem: stepGenericItem });
+            case MessageResponseTypes.VIDEO:
+                return React__default.createElement(StepContentVideo, { messageItem: stepGenericItem, isCurrentStep: isCurrentStep });
+            default:
+                // If the responseType is not one of the three supported types for tours then render an inline error.
+                return React__default.createElement(StepContentUnsupportedError, { messageItem: stepGenericItem, isCurrentStep: isCurrentStep });
+        }
+    }
+    // If this is the current step then send an event and track the type of response being shown.
+    useEffect(() => {
+        if (isCurrentStep) {
+            serviceManager.trackService.track({
+                eventName: 'Tour interaction',
+                eventDescription: 'Tour step shown.',
+                type: stepGenericItem.response_type,
+            });
+            // Announce the content of the current step. The announcement is handled in setTimeout so that it doesn't prevent
+            // the initial announcement from being heard when the tour is open.
+            setTimeout(() => ariaAnnouncer(rootRef.current));
+        }
+    }, [isCurrentStep, serviceManager.trackService, stepGenericItem.response_type, ariaAnnouncer]);
+    return (React__default.createElement("div", { className: "WACTourStep__Wrapper", ref: rootRef },
+        React__default.createElement("div", { className: cx('WACTourStep', 'WAC__message', {
+                'WACTourStep--hidden': !isCurrentStep,
+                WACTourStep__BottomBorder: showBottomBorder(),
+            }) }, renderStepContent())));
+}
+/**
+ * Given a TextItem return a RichText component containing the text from the message.
+ */
+function StepContentText(props) {
+    const { messageItem } = props;
+    const { text } = messageItem;
+    // For text provided by the assistant, pass it through some HTML formatting before displaying it.
+    return (React__default.createElement("div", { className: "WACTourStep__Text" },
+        React__default.createElement(RichTextExport, { text: text })));
+}
+/**
+ * Given an ImageItem return an Image component containing the image from the message.
+ */
+function StepContentImage(props) {
+    const { messageItem } = props;
+    const { source, description, alt_text } = messageItem;
+    const languagePack = useLanguagePack();
+    return (
+    // Don't pass the title to the Image component since tours only support descriptions.
+    React__default.createElement(ImageExport, { imageError: languagePack.errors_imageSource, source: source, description: description, altText: alt_text, hideIconAndTitle: true }));
+}
+/**
+ * Given a VideoItem return a VideoComponent containing the video from the message.
+ */
+function StepContentVideo(props) {
+    const { messageItem, isCurrentStep } = props;
+    const { source, description, alt_text } = messageItem;
+    const { viewState } = useSelector((state) => state.persistedToBrowserStorage.launcherState);
+    const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+    // If this isn't the current step or the tour isn't visible then the video needs to be paused.
+    useEffect(() => {
+        if (!isCurrentStep || !viewState.tour) {
+            setIsVideoPlaying(false);
+        }
+    }, [isCurrentStep, viewState.tour]);
+    return (
+    // Don't pass the title to the VideoComponent since tours only support descriptions.
+    React__default.createElement(VideoComponentExport, { source: source, description: description, baseHeight: getMediaDimensions(messageItem)?.base_height, ariaLabel: alt_text, playing: isVideoPlaying, onPlay: () => setIsVideoPlaying(true), onPause: () => setIsVideoPlaying(false), hideIconAndTitle: true }));
+}
+/**
+ * If the responseType is not one of the three supported types for tours then render an inline error.
+ */
+function StepContentUnsupportedError(props) {
+    const { messageItem, isCurrentStep } = props;
+    const languagePack = useLanguagePack();
+    // If the current response type isn't a supported response type then log an error.
+    useEffect(() => {
+        if (isCurrentStep) {
+            consoleError(`The response type you tried to use "${messageItem.response_type}" is not valid within a tour step. The supported response types in tour steps are text, video, and image.`);
+        }
+    }, [isCurrentStep, messageItem.response_type]);
+    return (React__default.createElement("div", { className: "WACTourStep__UnsupportedResponse" },
+        React__default.createElement(InlineError, { text: languagePack.errors_generalContent })));
+}
+const TourStepContentComponentExport = React__default.memo(TourStepContentComponent);
+
+/**
+ * This renders the skeleton of a step within the tour.
+ */
+function TourStepSkeletonComponent() {
+    return (React__default.createElement("div", { className: "WACTourStep WACTourStep__Skeleton" },
+        React__default.createElement(SkeletonPlaceholder, { className: "WACTourStep__SkeletonPlaceholder" })));
+}
+
+/**
+ * This manages the tour feature controls and renders the tour content before passing both to either a mobile or desktop
+ * container depending.
+ */
+function TourContainer(props, ref) {
+    const languagePack = useLanguagePack();
+    const serviceManager = useServiceManager();
+    const ariaAnnouncer = useAriaAnnouncer();
+    const intl = useIntl();
+    const tourConfig = useSelector((state) => state.config.public.tourConfig);
+    const { isHydrated } = useSelector((state) => state);
+    const { viewState } = useSelector((state) => state.persistedToBrowserStorage.launcherState);
+    const { activeTourCurrentStepIndex } = useSelector((state) => state.persistedToBrowserStorage.chatState.persistedTourState);
+    const { activeTourStepItems } = useSelector((state) => state.tourState);
+    // These three state variables are for future use when dynamic steps are introduced.
+    const [renderLoadingBar, setRenderLoadingBar] = useState(false);
+    const [renderErrorBanner, setRenderErrorBanner] = useState(false);
+    const [renderErrorScreen, setRenderErrorScreen] = useState(false);
+    const rootRef = useRef();
+    const tourControlsRef = useRef();
+    const namespace = serviceManager.namespace.originalName;
+    const languageKey = namespace ? 'window_ariaTourRegionNamespace' : 'window_ariaTourRegion';
+    const regionLabel = formatMessage(intl, languageKey, { namespace });
+    // If we're showing the launcher or main window then hide the tour. We do this instead of unmounting so that we don't
+    // lose scroll position, video playback position, etc.
+    const hideTour = !viewState.tour;
+    // Set default values for the tour controls that match what we want to show during the loading state. These values
+    // will be updated when the web chat is hydrated and the activeTourStepItems become available.
+    let reservePreviousButtonSpace = true;
+    let hidePreviousButton = false;
+    let renderDoneButton = false;
+    let stepContentComponentsArray = [];
+    // Once the web chat is hydrated, and we have the activeTourStepItems, create TourStepContentComponent's for each step
+    // and set the correct values for the tour controls properties.
+    if (isHydrated && activeTourStepItems) {
+        // If there is more than one step in the tour then save space in the tour controls for a previous button.
+        // This doesn't guarantee that the previous button will be visible, just that there will be room for it in the
+        // controls.
+        reservePreviousButtonSpace = activeTourStepItems.length > 1;
+        // If there has been space reserved for the previous button then hide it if this is the first step of the tour.
+        // Any other step will show the previous button in the space reserved.
+        hidePreviousButton = activeTourCurrentStepIndex <= 0;
+        // If this is the last step of the tour then show a done button instead of a next button.
+        renderDoneButton = activeTourCurrentStepIndex >= activeTourStepItems.length - 1;
+        // For each step (GenericItem) in the array of steps, create a TourStepContentComponent, and return it. Assign this
+        // new array of TourStepContentComponents to our local array.
+        stepContentComponentsArray = activeTourStepItems.map((step, index) => (React__default.createElement(TourStepContentComponentExport
+        // eslint-disable-next-line react/no-array-index-key
+        , { 
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, stepGenericItem: step, isCurrentStep: index === activeTourCurrentStepIndex })));
+    }
+    else if (!isHydrated) {
+        // If the web chat is not hydrated then show a skeleton component.
+        stepContentComponentsArray = [React__default.createElement(TourStepSkeletonComponent, { key: 0 })];
+    }
+    /**
+     * When the user clicks on the main window icon then fire the window open events and switch to the main window.
+     */
+    async function onOpenMainWindowClick() {
+        // Try to open the main window.
+        await serviceManager.actions.changeView(ViewType.MAIN_WINDOW, {
+            mainWindowOpenReason: MainWindowOpenReason.TOUR_OPENED_OTHER_VIEW,
+        });
+        // Fire a track event for clicking the open main window button.
+        serviceManager.trackService.track({
+            eventName: 'Tour interaction',
+            eventDescription: 'Tour opened main window.',
+        });
+    }
+    /**
+     * When the tour is finished switch to the launcher and clear the tour data. When the launcher is clicked the main
+     * window will open.
+     */
+    async function onDoneClick() {
+        // Fire the tour end event before switching to the launcher.
+        await serviceManager.eventBus.fire({ type: "tour:end" /* BusEventType.TOUR_END */, reason: TourEndReason.DONE_CLICKED }, serviceManager.instance);
+        // Try to open the launcher and clear the tour data from store.
+        await serviceManager.actions.endTour({ viewChangeReason: ViewChangeReason.TOUR_DONE });
+        // Fire a track event for clicking the done button.
+        serviceManager.trackService.track({
+            eventName: 'Tour interaction',
+            eventDescription: 'Tour completed.',
+        });
+    }
+    /**
+     * When the tour is closed switch to the launcher and clear the tour data. When the launcher is clicked the main
+     * window will open.
+     */
+    async function onCloseClick() {
+        // Try to open the launcher and clear the tour data from store.
+        await serviceManager.actions.endTour({
+            viewChangeReason: ViewChangeReason.TOUR_CLOSED,
+        });
+        // Fire a track event for clicking the close button.
+        serviceManager.trackService.track({
+            eventName: 'Tour interaction',
+            eventDescription: 'Tour closed.',
+        });
+    }
+    /**
+     * When the tour is minimized switch to the launcher. When the launcher is clicked the tour will open.
+     */
+    async function onMinimizeClick() {
+        // Try to open the launcher.
+        await serviceManager.actions.changeView(ViewType.LAUNCHER, {
+            viewChangeReason: ViewChangeReason.TOUR_MINIMIZED,
+        });
+        // Fire a track event for clicking the minimize button.
+        serviceManager.trackService.track({
+            eventName: 'Tour interaction',
+            eventDescription: 'Tour minimized.',
+        });
+    }
+    /**
+     * Now that we have the necessary pieces render the controls for the tour feature.
+     */
+    function renderTourControlsComponent() {
+        return (React__default.createElement(TourControlsComponentExport, { ref: tourControlsRef, hideChatButton: tourConfig?.hideChatButton, reservePreviousButtonSpace: reservePreviousButtonSpace, hidePreviousButton: hidePreviousButton, disableNextButton: renderLoadingBar, hideButtons: !isHydrated, renderDoneButton: renderDoneButton, onNextClick: () => {
+                serviceManager.actions.changeStepInTour({ nextStep: true });
+                // If the next step is the final step, request focus so that the "done" button has focus.
+                if (activeTourCurrentStepIndex + 1 === activeTourStepItems.length - 1) {
+                    tourControlsRef.current?.requestFocus();
+                }
+            }, onPreviousClick: () => {
+                serviceManager.actions.changeStepInTour({ previousStep: true });
+                // If the previous step is the first step, request focus so that the "next" button has focus.
+                if (activeTourCurrentStepIndex - 1 === 0) {
+                    tourControlsRef.current?.requestFocus();
+                }
+            }, onOpenMainWindowClick: onOpenMainWindowClick, onDoneClick: onDoneClick }));
+    }
+    function renderTourCloseMinimizeComponent() {
+        return (React__default.createElement(TourCloseMinimizeComponent, { hideMinimizeButton: tourConfig?.hideMinimizeButton, onCloseClick: onCloseClick, onMinimizeClick: onMinimizeClick }));
+    }
+    /**
+     * Handles rendering a loading bar or error notification based on the state of the active tour.
+     */
+    function renderTourStepStatusContainer() {
+        return (React__default.createElement("div", { className: "WACTour__StatusContainer" },
+            renderErrorBanner && (React__default.createElement(AnnounceOnMountComponentExport, null,
+                React__default.createElement(InlineNotification, { kind: "error", title: languagePack.tour_errorFetchingStep, lowContrast: true, hideCloseButton: true, onClick: () => setRenderErrorBanner(false) }))),
+            renderLoadingBar && (React__default.createElement(MountChildrenOnDelay, { delay: 500 },
+                React__default.createElement("div", { className: "WACLoadingBar__ConnectingAnimation" })))));
+    }
+    /**
+     * The error screen when a tour fails to load.
+     */
+    function renderTourErrorScreen() {
+        return (React__default.createElement(AnnounceOnMountComponentExport, null,
+            React__default.createElement("div", { className: "WACTour__ErrorScreen" },
+                React__default.createElement("div", { className: "WACTour__ErrorHeader" },
+                    React__default.createElement(ErrorFilled, { size: 20, className: "WACTour__ErrorIcon" }),
+                    languagePack.tour_errorTitle),
+                React__default.createElement("div", { className: "WACTour__ErrorBody" },
+                    React__default.createElement("div", { className: "WACTour__ErrorText" }, languagePack.tour_errorBody),
+                    React__default.createElement(Button, { className: "WACTour__ErrorButton", size: "sm", kind: "tertiary", renderIcon: props => React__default.createElement(Restart, { size: 32, ...props }) }, languagePack.buttons_retry)))));
+    }
+    useImperativeHandle(ref, () => tourControlsRef.current);
+    useEffect(() => {
+        if (isHydrated && !hideTour && !renderErrorScreen) {
+            const tourInstructionsText = intl.formatMessage({ id: 'tour_instructions' }, { chatButtonText: languagePack.tour_ariaChatButton });
+            ariaAnnouncer(tourInstructionsText);
+        }
+    }, [hideTour, ariaAnnouncer, languagePack, intl, isHydrated, renderErrorScreen]);
+    // This effect automatically applies focus to the tour when it hydrates or is opened. Checking for hydration will
+    // allow the "done" button do get focus when it renders after hydration.
+    useEffect(() => {
+        if (isHydrated || !hideTour) {
+            tourControlsRef.current?.requestFocus();
+        }
+    }, [hideTour, isHydrated]);
+    return (
+    // In the future this hiding may have to be done with visibility: hidden so that dynamic height animations can be
+    // preformed.
+    React__default.createElement(HideComponent, { hidden: hideTour },
+        React__default.createElement("div", { ref: rootRef, className: "WACTour", role: "region", "aria-label": regionLabel },
+            renderTourCloseMinimizeComponent(),
+            renderErrorScreen && renderTourErrorScreen(),
+            !renderErrorScreen && (React__default.createElement(React__default.Fragment, null,
+                stepContentComponentsArray,
+                renderTourStepStatusContainer(),
+                renderTourControlsComponent())))));
+}
+const TourContainerExport = React__default.memo(React__default.forwardRef(TourContainer));
+
+export { TourContainerExport as default };