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

package/dist/es/chat.TourContainer.js

@@ -0,0 +1,524 @@
+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, { useRef, useImperativeHandle, useEffect, useState } from "react";
+
+import { useIntl } from "react-intl";
+
+import { useSelector } from "react-redux";
+
+import { V as ViewChangeReason, T as TourEndReason, B as BusEventType, b as MainWindowOpenReason } from "./chat.customElement.js";
+
+import { u as useAriaAnnouncer, I as InlineError, M as MountChildrenOnDelay } from "./chat.MountChildrenOnDelay.js";
+
+import { u as useLanguagePack } from "./chat.AppState.js";
+
+import { d as doFocusRef, u as useServiceManager } from "./chat.usePrevious.js";
+
+import { a as VideoComponentExport, I as ImageExport, S as SkeletonPlaceholder, f as formatMessage, A as AnnounceOnMountComponentExport } from "./chat.VideoComponent.js";
+
+import { H as HideComponent } from "./chat.HideComponent.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 cx from "classnames";
+
+import { g as getMediaDimensions } from "./chat.messageUtils.js";
+
+import { b as consoleError } from "./chat.miscUtils.js";
+
+import { R as RichTextExport } from "./chat.RichText.js";
+
+import { b as MessageResponseTypes } from "./chat.Messages.js";
+
+import { V as ViewType } from "./chat.dynamic-imports.js";
+
+import "compute-scroll-into-view";
+
+import "memoize-one";
+
+import "tabbable";
+
+import "dayjs";
+
+import "dayjs/locale/en.js";
+
+import "intl-messageformat";
+
+import "./chat.browserUtils.js";
+
+import "detect-browser";
+
+import "./chat.constants.js";
+
+import "@carbon/icons-react/es/Music.js";
+
+import "lodash-es/cloneDeep.js";
+
+import "./chat.uuid.js";
+
+import "uuid";
+
+import "@lit/react";
+
+import "tslib";
+
+import "lit";
+
+import "lit/decorators.js";
+
+import "lodash-es/throttle.js";
+
+import "dompurify";
+
+import "lit/directives/repeat.js";
+
+import "lit/directives/unsafe-html.js";
+
+import "./chat.htmlUtils.js";
+
+import "./chat.stringUtils.js";
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TourCloseMinimizeComponent(props) {
+  const {hideMinimizeButton: hideMinimizeButton, onMinimizeClick: onMinimizeClick, onCloseClick: onCloseClick} = props;
+  const {tour_ariaMinimizeButton: tour_ariaMinimizeButton, tour_ariaCloseButton: tour_ariaCloseButton} = useLanguagePack();
+  return React.createElement("div", {
+    className: "WACTour__CloseMinimizeWrapper"
+  }, !hideMinimizeButton && React.createElement(React.Fragment, null, React.createElement(Button, {
+    className: "WACTour__CloseMinimizeButton WACTour__MinimizeButton",
+    kind: "ghost",
+    hasIconOnly: true,
+    renderIcon: Subtract,
+    iconDescription: tour_ariaMinimizeButton,
+    onClick: onMinimizeClick,
+    "aria-label": tour_ariaMinimizeButton
+  }), React.createElement("div", {
+    className: "WACTour__CloseMinimizeDivider"
+  })), React.createElement(Button, {
+    className: "WACTour__CloseMinimizeButton WACTour__CloseButton",
+    kind: "ghost",
+    hasIconOnly: true,
+    renderIcon: Close,
+    iconDescription: tour_ariaCloseButton,
+    onClick: onCloseClick,
+    "aria-label": tour_ariaCloseButton
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TourControlsComponent(props, ref) {
+  const {reservePreviousButtonSpace: reservePreviousButtonSpace, hidePreviousButton: hidePreviousButton, renderDoneButton: renderDoneButton, disableNextButton: disableNextButton, hideButtons: hideButtons, hideChatButton: hideChatButton, onOpenMainWindowClick: onOpenMainWindowClick, onNextClick: onNextClick, onPreviousClick: onPreviousClick, onDoneClick: onDoneClick} = props;
+  const {tour_ariaChatButton: tour_ariaChatButton, tour_ariaNextButton: tour_ariaNextButton, tour_ariaPreviousButton: tour_ariaPreviousButton, tour_doneButton: tour_doneButton} = useLanguagePack();
+  const nextButtonRef = useRef();
+  const doneButtonRef = useRef();
+  useImperativeHandle(ref, () => ({
+    requestFocus: () => {
+      setTimeout(() => {
+        if (doneButtonRef.current) {
+          doFocusRef(doneButtonRef);
+        } else {
+          doFocusRef(nextButtonRef);
+        }
+      });
+    }
+  }));
+  return React.createElement("div", {
+    className: cx("WACTour__Controls", {
+      "WACTour__Controls--empty": hideButtons
+    })
+  }, !hideChatButton && React.createElement("div", {
+    className: "WACTour__ControlsButton"
+  }, React.createElement(Button, {
+    className: "WACTour__MainWindowButton",
+    kind: "ghost",
+    size: "md",
+    hasIconOnly: true,
+    renderIcon: props => React.createElement(Chat, {
+      ...props
+    }),
+    iconDescription: tour_ariaChatButton,
+    onClick: onOpenMainWindowClick,
+    "aria-label": tour_ariaChatButton
+  })), reservePreviousButtonSpace && React.createElement("div", {
+    className: "WACTour__ControlsButton"
+  }, React.createElement(Button, {
+    className: cx("WACTour__PreviousButton", {
+      "WACTour__ControlsButton--hidden": hidePreviousButton
+    }),
+    kind: "ghost",
+    size: "md",
+    hasIconOnly: true,
+    renderIcon: props => React.createElement(ArrowLeft, {
+      ...props
+    }),
+    iconDescription: tour_ariaPreviousButton,
+    onClick: onPreviousClick,
+    "aria-label": tour_ariaPreviousButton
+  })), renderDoneButton && React.createElement("div", {
+    className: "WACTour__ControlsButton"
+  }, React.createElement(Button, {
+    ref: doneButtonRef,
+    className: "WACTour__DoneButton",
+    size: "md",
+    onClick: onDoneClick
+  }, tour_doneButton)), !renderDoneButton && React.createElement("div", {
+    className: "WACTour__ControlsButton"
+  }, React.createElement(Button, {
+    ref: nextButtonRef,
+    className: "WACTour__NextButton",
+    size: "md",
+    hasIconOnly: true,
+    renderIcon: props => React.createElement(ArrowRight, {
+      ...props
+    }),
+    iconDescription: tour_ariaNextButton,
+    onClick: onNextClick,
+    disabled: disableNextButton,
+    "aria-label": tour_ariaNextButton
+  })));
+}
+
+const TourControlsComponentExport = React.forwardRef(TourControlsComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TourStepContentComponent(props) {
+  const {stepGenericItem: stepGenericItem, isCurrentStep: isCurrentStep} = props;
+  const ariaAnnouncer = useAriaAnnouncer();
+  const rootRef = useRef();
+  function showBottomBorder() {
+    const responseType = stepGenericItem.response_type;
+    switch (responseType) {
+     case MessageResponseTypes.TEXT:
+      return true;
+
+     case MessageResponseTypes.IMAGE:
+      return stepGenericItem?.description;
+
+     case MessageResponseTypes.VIDEO:
+      return stepGenericItem?.description;
+
+     default:
+      return true;
+    }
+  }
+  function renderStepContent() {
+    const responseType = stepGenericItem.response_type;
+    switch (responseType) {
+     case MessageResponseTypes.TEXT:
+      return React.createElement(StepContentText, {
+        messageItem: stepGenericItem
+      });
+
+     case MessageResponseTypes.IMAGE:
+      return React.createElement(StepContentImage, {
+        messageItem: stepGenericItem
+      });
+
+     case MessageResponseTypes.VIDEO:
+      return React.createElement(StepContentVideo, {
+        messageItem: stepGenericItem,
+        isCurrentStep: isCurrentStep
+      });
+
+     default:
+      return React.createElement(StepContentUnsupportedError, {
+        messageItem: stepGenericItem,
+        isCurrentStep: isCurrentStep
+      });
+    }
+  }
+  useEffect(() => {
+    if (isCurrentStep) {
+      setTimeout(() => ariaAnnouncer(rootRef.current));
+    }
+  }, [ isCurrentStep, stepGenericItem.response_type, ariaAnnouncer ]);
+  return React.createElement("div", {
+    className: "WACTourStep__Wrapper",
+    ref: rootRef
+  }, React.createElement("div", {
+    className: cx("WACTourStep", "WAC__message", {
+      "WACTourStep--hidden": !isCurrentStep,
+      WACTourStep__BottomBorder: showBottomBorder()
+    })
+  }, renderStepContent()));
+}
+
+function StepContentText(props) {
+  const {messageItem: messageItem} = props;
+  const {text: text} = messageItem;
+  return React.createElement("div", {
+    className: "WACTourStep__Text"
+  }, React.createElement(RichTextExport, {
+    text: text
+  }));
+}
+
+function StepContentImage(props) {
+  const {messageItem: messageItem} = props;
+  const {source: source, description: description, alt_text: alt_text} = messageItem;
+  const languagePack = useLanguagePack();
+  return React.createElement(ImageExport, {
+    imageError: languagePack.errors_imageSource,
+    source: source,
+    description: description,
+    altText: alt_text,
+    hideIconAndTitle: true
+  });
+}
+
+function StepContentVideo(props) {
+  const {messageItem: messageItem, isCurrentStep: isCurrentStep} = props;
+  const {source: source, description: description, alt_text: alt_text} = messageItem;
+  const {viewState: viewState} = useSelector(state => state.persistedToBrowserStorage.launcherState);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+  useEffect(() => {
+    if (!isCurrentStep || !viewState.tour) {
+      setIsVideoPlaying(false);
+    }
+  }, [ isCurrentStep, viewState.tour ]);
+  return React.createElement(VideoComponentExport, {
+    source: source,
+    description: description,
+    baseHeight: getMediaDimensions(messageItem)?.base_height,
+    ariaLabel: alt_text,
+    playing: isVideoPlaying,
+    onPlay: () => setIsVideoPlaying(true),
+    onPause: () => setIsVideoPlaying(false),
+    hideIconAndTitle: true
+  });
+}
+
+function StepContentUnsupportedError(props) {
+  const {messageItem: messageItem, isCurrentStep: isCurrentStep} = props;
+  const languagePack = useLanguagePack();
+  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.createElement("div", {
+    className: "WACTourStep__UnsupportedResponse"
+  }, React.createElement(InlineError, {
+    text: languagePack.errors_generalContent
+  }));
+}
+
+const TourStepContentComponentExport = React.memo(TourStepContentComponent);
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function TourStepSkeletonComponent() {
+  return React.createElement("div", {
+    className: "WACTourStep WACTourStep__Skeleton"
+  }, React.createElement(SkeletonPlaceholder, {
+    className: "WACTourStep__SkeletonPlaceholder"
+  }));
+}
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */ function 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: isHydrated} = useSelector(state => state);
+  const {viewState: viewState} = useSelector(state => state.persistedToBrowserStorage.launcherState);
+  const {activeTourCurrentStepIndex: activeTourCurrentStepIndex} = useSelector(state => state.persistedToBrowserStorage.chatState.persistedTourState);
+  const {activeTourStepItems: activeTourStepItems} = useSelector(state => state.tourState);
+  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: namespace
+  });
+  const hideTour = !viewState.tour;
+  let reservePreviousButtonSpace = true;
+  let hidePreviousButton = false;
+  let renderDoneButton = false;
+  let stepContentComponentsArray = [];
+  if (isHydrated && activeTourStepItems) {
+    reservePreviousButtonSpace = activeTourStepItems.length > 1;
+    hidePreviousButton = activeTourCurrentStepIndex <= 0;
+    renderDoneButton = activeTourCurrentStepIndex >= activeTourStepItems.length - 1;
+    stepContentComponentsArray = activeTourStepItems.map((step, index) => React.createElement(TourStepContentComponentExport, {
+      key: index,
+      stepGenericItem: step,
+      isCurrentStep: index === activeTourCurrentStepIndex
+    }));
+  } else if (!isHydrated) {
+    stepContentComponentsArray = [ React.createElement(TourStepSkeletonComponent, {
+      key: 0
+    }) ];
+  }
+  async function onOpenMainWindowClick() {
+    await serviceManager.actions.changeView(ViewType.MAIN_WINDOW, {
+      mainWindowOpenReason: MainWindowOpenReason.TOUR_OPENED_OTHER_VIEW
+    });
+  }
+  async function onDoneClick() {
+    await serviceManager.eventBus.fire({
+      type: BusEventType.TOUR_END,
+      reason: TourEndReason.DONE_CLICKED
+    }, serviceManager.instance);
+    await serviceManager.actions.endTour({
+      viewChangeReason: ViewChangeReason.TOUR_DONE
+    });
+  }
+  async function onCloseClick() {
+    await serviceManager.actions.endTour({
+      viewChangeReason: ViewChangeReason.TOUR_CLOSED
+    });
+  }
+  async function onMinimizeClick() {
+    await serviceManager.actions.changeView(ViewType.LAUNCHER, {
+      viewChangeReason: ViewChangeReason.TOUR_MINIMIZED
+    });
+  }
+  function renderTourControlsComponent() {
+    return React.createElement(TourControlsComponentExport, {
+      ref: tourControlsRef,
+      hideChatButton: tourConfig?.hideChatButton,
+      reservePreviousButtonSpace: reservePreviousButtonSpace,
+      hidePreviousButton: hidePreviousButton,
+      disableNextButton: renderLoadingBar,
+      hideButtons: !isHydrated,
+      renderDoneButton: renderDoneButton,
+      onNextClick: () => {
+        serviceManager.actions.changeStepInTour({
+          nextStep: true
+        });
+        if (activeTourCurrentStepIndex + 1 === activeTourStepItems.length - 1) {
+          tourControlsRef.current?.requestFocus();
+        }
+      },
+      onPreviousClick: () => {
+        serviceManager.actions.changeStepInTour({
+          previousStep: true
+        });
+        if (activeTourCurrentStepIndex - 1 === 0) {
+          tourControlsRef.current?.requestFocus();
+        }
+      },
+      onOpenMainWindowClick: onOpenMainWindowClick,
+      onDoneClick: onDoneClick
+    });
+  }
+  function renderTourCloseMinimizeComponent() {
+    return React.createElement(TourCloseMinimizeComponent, {
+      hideMinimizeButton: tourConfig?.hideMinimizeButton,
+      onCloseClick: onCloseClick,
+      onMinimizeClick: onMinimizeClick
+    });
+  }
+  function renderTourStepStatusContainer() {
+    return React.createElement("div", {
+      className: "WACTour__StatusContainer"
+    }, renderErrorBanner && React.createElement(AnnounceOnMountComponentExport, null, React.createElement(InlineNotification, {
+      kind: "error",
+      title: languagePack.tour_errorFetchingStep,
+      lowContrast: true,
+      hideCloseButton: true,
+      onClick: () => setRenderErrorBanner(false)
+    })), renderLoadingBar && React.createElement(MountChildrenOnDelay, {
+      delay: 500
+    }, React.createElement("div", {
+      className: "WACLoadingBar__ConnectingAnimation"
+    })));
+  }
+  function renderTourErrorScreen() {
+    return React.createElement(AnnounceOnMountComponentExport, null, React.createElement("div", {
+      className: "WACTour__ErrorScreen"
+    }, React.createElement("div", {
+      className: "WACTour__ErrorHeader"
+    }, React.createElement(ErrorFilled, {
+      size: 20,
+      className: "WACTour__ErrorIcon"
+    }), languagePack.tour_errorTitle), React.createElement("div", {
+      className: "WACTour__ErrorBody"
+    }, React.createElement("div", {
+      className: "WACTour__ErrorText"
+    }, languagePack.tour_errorBody), React.createElement(Button, {
+      className: "WACTour__ErrorButton",
+      size: "sm",
+      kind: "tertiary",
+      renderIcon: props => React.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 ]);
+  useEffect(() => {
+    if (isHydrated || !hideTour) {
+      tourControlsRef.current?.requestFocus();
+    }
+  }, [ hideTour, isHydrated ]);
+  return React.createElement(HideComponent, {
+    hidden: hideTour
+  }, React.createElement("div", {
+    ref: rootRef,
+    className: "WACTour",
+    role: "region",
+    "aria-label": regionLabel
+  }, renderTourCloseMinimizeComponent(), renderErrorScreen && renderTourErrorScreen(), !renderErrorScreen && React.createElement(React.Fragment, null, stepContentComponentsArray, renderTourStepStatusContainer(), renderTourControlsComponent())));
+}
+
+const TourContainerExport = React.memo(React.forwardRef(TourContainer));
+
+export { TourContainerExport as default };