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

package/dist/es/chat/shared/components/responseTypes/options/OptionComponent.js

@@ -1,83 +0,0 @@
-import { unstable__ChatButton } from "@carbon/react";
-
-import React, { Component } from "react";
-
-import { createMessageRequestForChoice, getOptionType } from "../../../utils/messageUtils.js";
-
-import Metablock from "../util/Metablock.js";
-
-import SelectComponent from "./SelectComponent.js";
-
-import { MessageSendSource } from "../../../../../types/events/eventBusTypes.js";
-
-import { ButtonSizeEnum, ButtonKindEnum } from "../../../../../types/utilities/carbonTypes.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
- */ class OptionComponent extends Component {
-  constructor() {
-    super(...arguments);
-    this.onOptionSelected = (selectedOption, type) => {
-      const {localMessage: localMessage, serviceManager: serviceManager, originalMessage: originalMessage} = this.props;
-      const {id: responseID} = originalMessage;
-      const messageRequest = createMessageRequestForChoice(selectedOption, responseID);
-      const localMessageID = localMessage.ui_state.id;
-      const source = type === "button" ? MessageSendSource.OPTION_BUTTON : MessageSendSource.OPTION_DROP_DOWN;
-      serviceManager.actions.sendWithCatch(messageRequest, source, {
-        setValueSelectedForMessageID: localMessageID
-      });
-      this.props.requestInputFocus();
-    };
-    this.onButtonClick = (event, item) => {
-      this.onOptionSelected(item, "button");
-    };
-    this.onSelectChange = data => {
-      this.onOptionSelected(data.selectedItem, "dropdown");
-    };
-  }
-  render() {
-    const {localMessage: localMessage, languagePack: languagePack, disableUserInputs: disableUserInputs, serviceManager: serviceManager, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion} = this.props;
-    const {options: options, title: title, description: description, preference: preference} = localMessage.item;
-    const {optionSelected: optionSelected} = localMessage.ui_state;
-    const type = getOptionType(preference, options.length);
-    return type === "button" ? React.createElement(React.Fragment, null, React.createElement(Metablock, {
-      title: title,
-      description: description,
-      shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
-    }), React.createElement("div", {
-      className: "WAC__button-holder"
-    }, React.createElement("ul", null, options.map((item, index) => {
-      const isSelected = optionSelected ? item.value.input.text === optionSelected.input.text : false;
-      return React.createElement("li", {
-        key: item.label
-      }, React.createElement(unstable__ChatButton, {
-        kind: ButtonKindEnum.TERTIARY,
-        isQuickAction: true,
-        size: ButtonSizeEnum.SMALL,
-        className: `WAC__button-${index}`,
-        disabled: disableUserInputs,
-        isSelected: isSelected,
-        onClick: event => {
-          this.onButtonClick(event, item);
-        }
-      }, item.label));
-    })))) : React.createElement(SelectComponent, {
-      serviceManager: serviceManager,
-      languagePack: languagePack,
-      title: title,
-      description: description,
-      options: options,
-      disableUserInputs: disableUserInputs,
-      onChange: this.onSelectChange,
-      value: optionSelected,
-      shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
-    });
-  }
-}
-
-export { OptionComponent };

package/dist/es/chat/shared/components/responseTypes/options/SelectComponent.js

@@ -1,84 +0,0 @@
-import { Layer, Dropdown } from "@carbon/react";
-
-import cx from "classnames";
-
-import React, { useState, useRef } from "react";
-
-import { useCounter } from "../../../hooks/useCounter.js";
-
-import { doScrollElementIntoView } from "../../../utils/domUtils.js";
-
-import Metablock from "../util/Metablock.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 createProxyEnvironment(shadowRoot) {
-  const properties = {
-    document: shadowRoot.ownerDocument,
-    addEventListener: shadowRoot.ownerDocument.addEventListener.bind(shadowRoot),
-    removeEventListener: shadowRoot.ownerDocument.removeEventListener.bind(shadowRoot),
-    Node: Node
-  };
-  return new Proxy(shadowRoot, {
-    get: (_, prop) => properties[prop]
-  });
-}
-
-function SelectComponent(props) {
-  const {title: title, description: description, options: options, onChange: onChange, languagePack: languagePack, disableUserInputs: disableUserInputs, serviceManager: serviceManager, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion} = props;
-  const [isBeingOpened, setIsBeingOpened] = useState(false);
-  const rootRef = useRef();
-  const counter = useCounter();
-  const id = `${counter}${serviceManager.namespace.suffix}`;
-  const environment = rootRef.current?.getRootNode ? createProxyEnvironment(rootRef.current.getRootNode()) : undefined;
-  function findOptionForValue() {
-    const {value: value, options: options} = props;
-    const selectedItem = options.find(item => item.value === value);
-    return selectedItem;
-  }
-  function onIsOpenChange(changes) {
-    if (changes.isOpen && rootRef.current) {
-      setTimeout(() => {
-        if (rootRef?.current) {
-          setIsBeingOpened(true);
-          doScrollElementIntoView(rootRef.current, true);
-          setIsBeingOpened(false);
-        }
-      }, 70 * 2);
-    }
-  }
-  return React.createElement("div", {
-    ref: rootRef
-  }, React.createElement(Metablock, {
-    title: title,
-    description: description,
-    id: `WAC__selectUUID_${id}-label`,
-    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
-  }), React.createElement("div", {
-    className: cx("WAC__selectHolder", {
-      WAC__customSelectTemporaryPadding: isBeingOpened
-    })
-  }, React.createElement(Layer, null, React.createElement(Dropdown, {
-    id: `WAC__selectUUID_${id}`,
-    items: options,
-    label: languagePack.options_select,
-    titleText: languagePack.options_select,
-    hideLabel: true,
-    "aria-label": disableUserInputs ? languagePack.options_ariaOptionsDisabled : title,
-    disabled: disableUserInputs,
-    onChange: onChange,
-    selectedItem: findOptionForValue(),
-    downshiftProps: {
-      environment: environment,
-      onIsOpenChange: onIsOpenChange,
-      id: `WACSelectComponent__Downshift-${id}`
-    }
-  }))));
-}
-
-export { SelectComponent as default };

package/dist/es/chat/shared/components/responseTypes/table/TableContainer.js

@@ -1,96 +0,0 @@
-import { Theme } from "@carbon/react";
-
-import React, { useRef, useState, useLayoutEffect, useMemo, Suspense } from "react";
-
-import { useIntl } from "react-intl";
-
-import { useSelector } from "react-redux";
-
-import { Table } from "../../../../react/components/table/Table.js";
-
-import { useLanguagePack } from "../../../hooks/useLanguagePack.js";
-
-import { LIGHT_THEMES } from "../../../utils/constants.js";
-
-import { consoleError } from "../../../utils/miscUtils.js";
-
-import { InlineError } from "../error/InlineError.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 TableContainer(props) {
-  const {tableItem: tableItem} = props;
-  const {title: title, description: description, headers: headers, rows: rows} = tableItem;
-  const carbonTheme = useSelector(state => state.theme.carbonTheme);
-  const chatHeight = useSelector(state => state.chatHeight);
-  const locale = useSelector(state => state.locale);
-  const languagePack = useLanguagePack();
-  const intl = useIntl();
-  const tableContainerRef = useRef(null);
-  const [tableContainerWidth, setTableContainerWidth] = useState();
-  function onResize() {
-    setTableContainerWidth(tableContainerRef.current?.clientWidth);
-  }
-  useLayoutEffect(() => {
-    const tableResizeObserver = new ResizeObserver(onResize);
-    tableResizeObserver.observe(tableContainerRef.current);
-  });
-  const isValidTable = useMemo(() => {
-    const columnCount = headers.length;
-    const isValid = !rows.some(row => row.cells.length !== columnCount);
-    if (!isValid) {
-      consoleError(`Number of cells in the table header does not match the number of cells in one or more of the table rows. In order to render a table there needs to be the same number of columns in the table header and all of the table rows.`);
-    }
-    return isValid;
-  }, [ rows, headers ]);
-  function getTablePaginationSupplementalText({count: count}) {
-    return intl.formatMessage({
-      id: "table_paginationSupplementalText"
-    }, {
-      pagesCount: count
-    });
-  }
-  function getTablePaginationStatusText({start: start, end: end, count: count}) {
-    return intl.formatMessage({
-      id: "table_paginationStatus"
-    }, {
-      start: start,
-      end: end,
-      count: count
-    });
-  }
-  if (isValidTable) {
-    return React.createElement(Theme, {
-      theme: LIGHT_THEMES.includes(carbonTheme) ? "white" : "g90"
-    }, React.createElement("div", {
-      className: "WACTableContainer",
-      ref: tableContainerRef
-    }, React.createElement(Suspense, {
-      fallback: null
-    }, React.createElement(Table, {
-      tableTitle: title,
-      tableDescription: description,
-      headers: headers,
-      rows: rows,
-      containerWidth: tableContainerWidth,
-      chatHeight: chatHeight,
-      filterPlaceholderText: languagePack.table_filterPlaceholder,
-      previousPageText: languagePack.table_previousPage,
-      nextPageText: languagePack.table_nextPage,
-      itemsPerPageText: languagePack.table_itemsPerPage,
-      getPaginationSupplementalText: getTablePaginationSupplementalText,
-      getPaginationStatusText: getTablePaginationStatusText,
-      locale: locale
-    }))));
-  }
-  return React.createElement(InlineError, null);
-}
-
-const TableContainerExport = React.memo(TableContainer);
-
-export { TableContainerExport as default };

package/dist/es/chat/shared/components/responseTypes/text/TextArea.js

@@ -1,68 +0,0 @@
-import cx from "classnames";
-
-import React, { PureComponent } from "react";
-
-import { doFocusRef } from "../../../utils/domUtils.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
- */ class TextArea extends PureComponent {
-  constructor() {
-    super(...arguments);
-    this.textAreaRef = React.createRef();
-  }
-  getHTMLElement() {
-    return this.textAreaRef.current;
-  }
-  takeFocus() {
-    doFocusRef(this.textAreaRef, false, true);
-  }
-  doBlur() {
-    this.textAreaRef.current.blur();
-  }
-  render() {
-    const {isRequired: isRequired, name: name, id: id, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, rows: rows, value: value, autoSize: autoSize, maxLength: maxLength, disabled: disabled, placeholder: placeholder, ariaLabel: ariaLabel, testId: testId, onSelect: onSelect} = this.props;
-    return React.createElement("div", {
-      className: cx("WAC__TextArea", {
-        "WAC__TextArea--autoSize": autoSize,
-        "WAC__TextArea--disabled": disabled
-      })
-    }, React.createElement("textarea", {
-      ref: this.textAreaRef,
-      "aria-label": ariaLabel,
-      "aria-required": isRequired,
-      className: "WAC__TextArea-textarea",
-      disabled: disabled,
-      id: id || testId,
-      maxLength: maxLength,
-      name: name,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onClick: onClick,
-      onChange: onChange,
-      onKeyDown: onKeyDown,
-      onSelect: onSelect,
-      placeholder: placeholder,
-      rows: rows,
-      value: value || "",
-      "data-gramm": "false",
-      "data-gramm_editor": "false",
-      "data-enable-grammarly": "false",
-      "data-testid": testId
-    }), autoSize && React.createElement("div", {
-      className: "WAC__TextArea-sizer"
-    }, value || placeholder || " "));
-  }
-}
-
-TextArea.defaultProps = {
-  isRequired: false,
-  maxLength: 1e4
-};
-
-export { TextArea as default };

package/dist/es/chat/shared/components/responseTypes/tour/TourCard.js

@@ -1,73 +0,0 @@
-import ArrowRight from "@carbon/icons-react/es/ArrowRight.js";
-
-import Restart from "@carbon/icons-react/es/Restart.js";
-
-import { Tile, Button } from "@carbon/react";
-
-import React from "react";
-
-import { useSelector } from "react-redux";
-
-import { useLanguagePack } from "../../../hooks/useLanguagePack.js";
-
-import "../../../../../types/state/AppState.js";
-
-import { TourStartReason, MainWindowCloseReason } from "../../../../../types/events/eventBusTypes.js";
-
-import { ViewType } from "../../../../../types/instance/apiTypes.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 TourCard({message: message, serviceManager: serviceManager}) {
-  const {tour_resumeButton: tour_resumeButton, tour_restartButton: tour_restartButton, tour_startButton: tour_startButton} = useLanguagePack();
-  const {activeTourID: activeTourID} = useSelector(state => state.persistedToBrowserStorage.chatState.persistedTourState);
-  const isCurrentTour = message.fullMessageID === activeTourID;
-  const tourTitle = message.item.user_defined?.card_title || "Guided journey";
-  const tourDescription = message.item.user_defined?.card_description || "Follow along as the assistant guides you to where you want to be.";
-  async function onResumeClick() {
-    await serviceManager.actions.changeView(ViewType.TOUR, {
-      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_RESUMED_TOUR
-    });
-  }
-  async function onRestartClick() {
-    const newViewState = await serviceManager.actions.changeView(ViewType.TOUR, {
-      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_RESTARTED_TOUR
-    });
-    if (newViewState.tour) {
-      serviceManager.actions.changeStepInTour({
-        newStepIndex: 0
-      });
-    }
-  }
-  return React.createElement(Tile, {
-    className: "WACTourCard"
-  }, React.createElement("div", {
-    className: "WACTourCard__Title"
-  }, tourTitle), React.createElement("div", {
-    className: "WACTourCard__Description"
-  }, tourDescription), isCurrentTour && React.createElement("div", null, React.createElement(Button, {
-    className: "WACTourCard__ResumeButton",
-    renderIcon: ArrowRight,
-    onClick: onResumeClick
-  }, tour_resumeButton), React.createElement(Button, {
-    className: "WACTourCard__RestartButton",
-    kind: "ghost",
-    renderIcon: Restart,
-    onClick: onRestartClick
-  }, tour_restartButton)), !isCurrentTour && React.createElement(Button, {
-    className: "WACTourCard__StartButton",
-    renderIcon: ArrowRight,
-    onClick: () => serviceManager.actions.startTour(message, TourStartReason.START_TOUR_CLICKED, {
-      mainWindowCloseReason: MainWindowCloseReason.TOUR_CARD_STARTED_TOUR
-    })
-  }, tour_startButton));
-}
-
-const TourCardExport = React.memo(TourCard);
-
-export { TourCardExport as TourCard };

package/dist/es/chat/shared/components/responseTypes/util/BodyMessageComponents.js

@@ -1,65 +0,0 @@
-import cx from "classnames";
-
-import React from "react";
-
-import { useSelector } from "react-redux";
-
-import { MessageTypeComponent } from "../../../containers/MessageTypeComponent.js";
-
-import { MessageResponseTypes } from "../../../../../types/messaging/Messages.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 BodyMessageComponents(props) {
-  const {bodyLocalMessageItemIDs: bodyLocalMessageItemIDs} = props.message.ui_state;
-  const allMessageItemsByID = useSelector(state => state.allMessageItemsByID);
-  const messageComponents = bodyLocalMessageItemIDs?.map((nestedMessageID, index) => {
-    const nestedLocalMessage = allMessageItemsByID[nestedMessageID];
-    const isFullWidthMessage = isFullWidthResponseType(nestedLocalMessage.item.response_type);
-    const nextLocalMessageID = bodyLocalMessageItemIDs[index + 1];
-    const nextLocalMessage = allMessageItemsByID[nextLocalMessageID];
-    const isNextMessageFullWidth = isFullWidthResponseType(nextLocalMessage?.item.response_type);
-    const isLastElement = index === bodyLocalMessageItemIDs.length - 1;
-    const withShortBottomPadding = !isLastElement && !isFullWidthMessage && !isNextMessageFullWidth;
-    return React.createElement("div", {
-      key: nestedMessageID,
-      className: cx("WACBodyMessageComponents__MessageWrapper", {
-        "WACBodyMessageComponents__MessageWrapper--fullWidth": isFullWidthMessage,
-        "WACBodyMessageComponents__MessageWrapper--shortBottomPadding": withShortBottomPadding
-      })
-    }, React.createElement(MessageTypeComponent, {
-      ...props,
-      message: nestedLocalMessage,
-      isNestedMessageItem: true
-    }));
-  });
-  if (!messageComponents?.length) {
-    return null;
-  }
-  return React.createElement("div", {
-    className: "WACBodyMessageComponents"
-  }, messageComponents);
-}
-
-function isFullWidthResponseType(responseType) {
-  switch (responseType) {
-   case MessageResponseTypes.IMAGE:
-   case MessageResponseTypes.IFRAME:
-   case MessageResponseTypes.VIDEO:
-   case MessageResponseTypes.AUDIO:
-   case MessageResponseTypes.USER_DEFINED:
-    return true;
-
-   default:
-    return false;
-  }
-}
-
-const BodyMessageTypeComponentsExport = React.memo(BodyMessageComponents);
-
-export { BodyMessageTypeComponentsExport as BodyMessageComponents };

package/dist/es/chat/shared/components/responseTypes/util/ClickableImage.js

@@ -1,36 +0,0 @@
-import React from "react";
-
-import VisuallyHidden from "../../util/VisuallyHidden.js";
-
-import { Image as ImageExport } from "../image/Image.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 ClickableImage({buttonAltText: buttonAltText, isLink: isLink, target: target, disabled: disabled, onClick: onClick, ...imageProps}) {
-  if (isLink) {
-    return React.createElement("a", {
-      className: "WACClickableImage",
-      href: imageProps.displayURL,
-      rel: "noopener noreferrer",
-      target: target,
-      onClick: onClick
-    }, React.createElement(ImageExport, {
-      ...imageProps
-    }), buttonAltText && React.createElement(VisuallyHidden, null, buttonAltText));
-  }
-  return React.createElement("button", {
-    className: "WACClickableImage",
-    type: "button",
-    onClick: onClick,
-    disabled: disabled
-  }, React.createElement(ImageExport, {
-    ...imageProps
-  }), buttonAltText && React.createElement(VisuallyHidden, null, buttonAltText));
-}
-
-export { ClickableImage };

package/dist/es/chat/shared/components/responseTypes/util/Description.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-import { RichText as RichTextExport } from "./RichText.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 Description({className: className, text: text, shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion = false}) {
-  return React.createElement("div", {
-    className: `WAC__description ${className}`
-  }, React.createElement(RichTextExport, {
-    text: text,
-    shouldRemoveHTMLBeforeMarkdownConversion: shouldRemoveHTMLBeforeMarkdownConversion
-  }));
-}
-
-export { Description as default };

package/dist/es/chat/shared/components/responseTypes/util/FooterButtonComponents.js

@@ -1,36 +0,0 @@
-import cx from "classnames";
-
-import React from "react";
-
-import { useSelector } from "react-redux";
-
-import { MessageTypeComponent } from "../../../containers/MessageTypeComponent.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 FooterButtonComponents(props) {
-  const allMessageItemsByID = useSelector(state => state.allMessageItemsByID);
-  const buttonComponents = props.message.ui_state.footerLocalMessageItemIDs?.map(nestedMessageID => {
-    const nestedLocalMessage = allMessageItemsByID[nestedMessageID];
-    return React.createElement(MessageTypeComponent, {
-      key: nestedMessageID,
-      ...props,
-      message: nestedLocalMessage,
-      isNestedMessageItem: true
-    });
-  });
-  const totalButtons = buttonComponents?.length ?? 0;
-  const isColumnList = totalButtons > 2;
-  return totalButtons ? React.createElement("div", {
-    className: cx("WACFooterButtonComponents", {
-      "WACFooterButtonComponents--column": isColumnList
-    })
-  }, buttonComponents) : null;
-}
-
-export { FooterButtonComponents };