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

package/dist/es/chat/shared/containers/MessageTypeComponent.js

@@ -1,496 +0,0 @@
-import Attachment from "@carbon/icons-react/es/Attachment.js";
-
-import React, { useRef, useMemo, useState } from "react";
-
-import { useIntl } from "react-intl";
-
-import { useSelector, shallowEqual } from "react-redux";
-
-import { FeedbackInteractionType, BusEventType } from "../../../types/events/eventBusTypes.js";
-
-import { FeedbackButtonsComponent } from "../../react/components/feedback/FeedbackButtonsComponent.js";
-
-import { FeedbackComponent } from "../../react/components/feedback/FeedbackComponent.js";
-
-import { CSS_CLASS_PREFIX } from "../../web-components/settings.js";
-
-import { ResponseStopped } from "../components/ResponseStopped.js";
-
-import { ConnectToAgent } from "../components/responseTypes/agent/ConnectToAgent.js";
-
-import { AudioComponent as AudioComponentExport } from "../components/responseTypes/audio/AudioComponent.js";
-
-import { ButtonItemComponent } from "../components/responseTypes/buttonItem/ButtonItemComponent.js";
-
-import { CardItemComponent as CardComponentExport } from "../components/responseTypes/card/CardItemComponent.js";
-
-import { CarouselItemComponent } from "../components/responseTypes/carousel/CarouselItemComponent.js";
-
-import { ConversationalSearch } from "../components/responseTypes/conversationalSearch/ConversationalSearch.js";
-
-import UserDefinedResponse from "../components/responseTypes/custom/UserDefinedResponse.js";
-
-import { DatePickerComponent as DatePickerComponentExport } from "../components/responseTypes/datePicker/DatePickerComponent.js";
-
-import { InlineError } from "../components/responseTypes/error/InlineError.js";
-
-import { GridItemComponent as GridItemComponentExport } from "../components/responseTypes/grid/GridItemComponent.js";
-
-import { IFrameMessage } from "../components/responseTypes/iframe/IFrameMessage.js";
-
-import { Image as ImageExport } from "../components/responseTypes/image/Image.js";
-
-import { OptionComponent } from "../components/responseTypes/options/OptionComponent.js";
-
-import TableContainerExport from "../components/responseTypes/table/TableContainer.js";
-
-import { TourCard as TourCardExport } from "../components/responseTypes/tour/TourCard.js";
-
-import { StreamingRichText } from "../components/responseTypes/util/StreamingRichText.js";
-
-import { VideoComponent as VideoComponentExport } from "../components/responseTypes/video/VideoComponent.js";
-
-import { useLanguagePack } from "../hooks/useLanguagePack.js";
-
-import { useUUID } from "../hooks/useUUID.js";
-
-import actions from "../store/actions.js";
-
-import { selectAgentDisplayState } from "../store/selectors.js";
-
-import { isRequest, isResponse, isTextItem, renderAsTour, renderAsUserDefinedMessage, getMediaDimensions } from "../utils/messageUtils.js";
-
-import { ChainOfThought } from "../../react/components/chainOfThought/ChainOfThought.js";
-
-import { InternalMessageRequestType, MessageResponseTypes, IFrameItemDisplayOption } 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 MessageTypeComponent(props) {
-  const {allowNewFeedback: allowNewFeedback, hideFeedback: hideFeedback, serviceManager: serviceManager, originalMessage: originalMessage, message: message} = props;
-  const intl = useIntl();
-  const languagePack = useLanguagePack();
-  const feedbackDetailsRef = useRef();
-  const agentDisplayState = useSelector(selectAgentDisplayState, shallowEqual);
-  const agentState = useSelector(state => state.agentState);
-  const persistedAgentState = useSelector(state => state.persistedToBrowserStorage.chatState.agentState);
-  const feedbackID = message.item.message_options?.feedback?.id;
-  const feedbackPanelID = useUUID();
-  const feedbackHistory = originalMessage.history?.feedback?.[feedbackID];
-  const feedbackInitialValues = useMemo(() => {
-    if (!feedbackHistory) {
-      return null;
-    }
-    return {
-      text: feedbackHistory.text,
-      selectedCategories: feedbackHistory.categories
-    };
-  }, [ feedbackHistory ]);
-  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
-  const [isPositiveFeedbackSelected, setIsPositiveFeedbackSelected] = useState(feedbackHistory && feedbackHistory.is_positive);
-  const [isNegativeFeedbackSelected, setIsNegativeFeedbackSelected] = useState(feedbackHistory && !feedbackHistory.is_positive);
-  const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(Boolean(feedbackHistory));
-  function renderSpecificMessage(localMessageItem, message) {
-    if (isRequest(message)) {
-      return renderRequest(localMessageItem, message);
-    }
-    if (isResponse(message)) {
-      const response = renderResponse(localMessageItem, message);
-      const isResponseStopped = localMessageItem.item.streaming_metadata?.stream_stopped;
-      return React.createElement(React.Fragment, null, response, isResponseStopped && React.createElement(ResponseStopped, null), renderChainOfThought(localMessageItem), renderFeedback(localMessageItem, message));
-    }
-    return false;
-  }
-  function renderRequest(localMessageItem, originalMessage) {
-    const messageItem = localMessageItem.item;
-    if (isTextItem(messageItem)) {
-      const text = originalMessage.history?.label || messageItem.text;
-      const userText = localMessageItem.ui_state.originalUserText || text;
-      return React.createElement("div", {
-        className: "WAC__sent--text"
-      }, originalMessage.input.message_type === InternalMessageRequestType.FILE && React.createElement(Attachment, {
-        className: "WAC__sent-fileIcon",
-        "aria-label": props.languagePack.fileSharing_fileIcon
-      }), React.createElement("span", {
-        role: "heading",
-        "aria-level": 2
-      }, userText));
-    }
-    return null;
-  }
-  function renderResponse(localMessageItem, message) {
-    if (renderAsTour(localMessageItem.item)) {
-      return renderTour(localMessageItem);
-    }
-    if (renderAsUserDefinedMessage(localMessageItem.item)) {
-      return renderUserDefinedResponse(localMessageItem, message);
-    }
-    const responseType = localMessageItem.item.response_type;
-    const withHumanAgent = Boolean(localMessageItem.item.agent_message_type);
-    switch (responseType) {
-     case MessageResponseTypes.TEXT:
-      return renderText(localMessageItem, message, withHumanAgent);
-
-     case MessageResponseTypes.IMAGE:
-      return renderImage(localMessageItem);
-
-     case MessageResponseTypes.OPTION:
-      return renderOption(localMessageItem, message);
-
-     case MessageResponseTypes.CONNECT_TO_AGENT:
-      return renderConnectToAgent(localMessageItem, message);
-
-     case MessageResponseTypes.INLINE_ERROR:
-      return renderInlineError(localMessageItem);
-
-     case MessageResponseTypes.IFRAME:
-      return renderIFrameMessage(localMessageItem);
-
-     case MessageResponseTypes.VIDEO:
-      return renderVideoMessage(localMessageItem);
-
-     case MessageResponseTypes.AUDIO:
-      return renderAudioMessage(localMessageItem);
-
-     case MessageResponseTypes.DATE:
-      return renderDateMessage(localMessageItem);
-
-     case MessageResponseTypes.CONVERSATIONAL_SEARCH:
-      return renderConversationalSearchMessage(localMessageItem, message);
-
-     case MessageResponseTypes.TABLE:
-      return renderTable(localMessageItem);
-
-     case MessageResponseTypes.CARD:
-      return renderCard(localMessageItem, message);
-
-     case MessageResponseTypes.CAROUSEL:
-      return renderCarouselMessage(localMessageItem, message);
-
-     case MessageResponseTypes.BUTTON:
-      return renderButtonItem(localMessageItem, message);
-
-     case MessageResponseTypes.GRID:
-      return renderGrid(localMessageItem, message);
-
-     default:
-      return renderUserDefinedResponse(localMessageItem, message);
-    }
-  }
-  function renderText(message, originalMessage, removeHTML) {
-    if (props.isNestedMessageItem) {
-      return renderRichText(message, removeHTML, originalMessage);
-    }
-    return React.createElement("div", {
-      className: "WAC__received--textContent"
-    }, renderRichText(message, removeHTML, originalMessage));
-  }
-  function renderRichText(localMessageItem, removeHTML, originalMessage) {
-    return React.createElement(StreamingRichText, {
-      text: localMessageItem.item.text,
-      streamingState: localMessageItem.ui_state.streamingState,
-      isStreamingError: originalMessage?.history?.is_streaming_error,
-      removeHTML: removeHTML,
-      doAutoScroll: props.doAutoScroll
-    });
-  }
-  function renderOption(message, originalMessage) {
-    const {languagePack: languagePack, requestInputFocus: requestInputFocus, serviceManager: serviceManager, disableUserInputs: disableUserInputs, isMessageForInput: isMessageForInput} = props;
-    const withHumanAgent = Boolean(message.item.agent_message_type);
-    return React.createElement(OptionComponent, {
-      localMessage: message,
-      originalMessage: originalMessage,
-      languagePack: languagePack,
-      disableUserInputs: disableUserInputs || !isMessageForInput,
-      requestInputFocus: requestInputFocus,
-      serviceManager: serviceManager,
-      shouldRemoveHTMLBeforeMarkdownConversion: withHumanAgent
-    });
-  }
-  function renderImage(message) {
-    const {languagePack: languagePack, serviceManager: serviceManager} = props;
-    const {useAITheme: useAITheme} = serviceManager.store.getState().theme;
-    return React.createElement(ImageExport, {
-      imageError: languagePack.errors_imageSource,
-      source: message.item.source,
-      title: message.item.title,
-      description: message.item.description,
-      altText: message.item.alt_text,
-      needsAnnouncement: message.ui_state.needsAnnouncement,
-      useAITheme: useAITheme
-    });
-  }
-  function renderInlineError(message) {
-    return React.createElement(InlineError, {
-      text: message.item.text
-    });
-  }
-  function renderIFrameMessage(message) {
-    const {doAutoScroll: doAutoScroll, isNestedMessageItem: isNestedMessageItem} = props;
-    const display = isNestedMessageItem ? IFrameItemDisplayOption.INLINE : undefined;
-    return React.createElement(IFrameMessage, {
-      localMessage: message,
-      doAutoScroll: doAutoScroll,
-      displayOverride: display
-    });
-  }
-  function renderVideoMessage(message) {
-    const {doAutoScroll: doAutoScroll} = props;
-    const {item: item} = message;
-    const {source: source, title: title, description: description, alt_text: alt_text} = item;
-    return React.createElement(VideoComponentExport, {
-      source: source,
-      title: title,
-      description: description,
-      baseHeight: getMediaDimensions(item)?.base_height,
-      ariaLabel: alt_text,
-      doAutoScroll: doAutoScroll,
-      needsAnnouncement: message.ui_state.needsAnnouncement
-    });
-  }
-  function renderAudioMessage(message) {
-    const {doAutoScroll: doAutoScroll} = props;
-    const {source: source, title: title, description: description, alt_text: alt_text} = message.item;
-    return React.createElement(AudioComponentExport, {
-      source: source,
-      title: title,
-      description: description,
-      ariaLabel: alt_text,
-      doAutoScroll: doAutoScroll,
-      needsAnnouncement: message.ui_state.needsAnnouncement
-    });
-  }
-  function renderDateMessage(message) {
-    return React.createElement(DatePickerComponentExport, {
-      localMessage: message,
-      disabled: !props.isMessageForInput,
-      scrollElementIntoView: props.scrollElementIntoView
-    });
-  }
-  function renderUserDefinedResponse(message, originalMessage) {
-    const {serviceManager: serviceManager} = props;
-    return React.createElement(UserDefinedResponse, {
-      streamingState: message.ui_state.streamingState,
-      isStreamingError: originalMessage?.history?.is_streaming_error,
-      doAutoScroll: props.doAutoScroll,
-      localMessageID: message.ui_state.id,
-      serviceManager: serviceManager
-    });
-  }
-  function renderTour(message) {
-    const {serviceManager: serviceManager} = props;
-    return React.createElement(TourCardExport, {
-      message: message,
-      serviceManager: serviceManager
-    });
-  }
-  function renderConnectToAgent(message, originalMessage) {
-    const {languagePack: languagePack, config: config, serviceManager: serviceManager, disableUserInputs: disableUserInputs, isMessageForInput: isMessageForInput} = props;
-    return React.createElement(ConnectToAgent, {
-      localMessage: message,
-      originalMessage: originalMessage,
-      languagePack: languagePack,
-      config: config,
-      serviceManager: serviceManager,
-      agentState: agentState,
-      agentDisplayState: agentDisplayState,
-      persistedAgentState: persistedAgentState,
-      disableUserInputs: disableUserInputs || !isMessageForInput,
-      requestFocus: props.requestInputFocus
-    });
-  }
-  function renderCard(message, originalMessage) {
-    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
-    return React.createElement(CardComponentExport, {
-      localMessageItem: message,
-      fullMessage: originalMessage,
-      isMessageForInput: isMessageForInput,
-      requestFocus: requestInputFocus
-    });
-  }
-  function renderConversationalSearchMessage(localMessageItem, fullMessage) {
-    const {scrollElementIntoView: scrollElementIntoView, doAutoScroll: doAutoScroll} = props;
-    return React.createElement(ConversationalSearch, {
-      localMessageItem: localMessageItem,
-      scrollElementIntoView: scrollElementIntoView,
-      isStreamingError: fullMessage.history?.is_streaming_error,
-      doAutoScroll: doAutoScroll
-    });
-  }
-  function renderButtonItem(message, originalMessage) {
-    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
-    return React.createElement(ButtonItemComponent, {
-      localMessageItem: message,
-      fullMessage: originalMessage,
-      isMessageForInput: isMessageForInput,
-      requestFocus: requestInputFocus
-    });
-  }
-  function renderCarouselMessage(message, originalMessage) {
-    const {isMessageForInput: isMessageForInput, requestInputFocus: requestInputFocus} = props;
-    return React.createElement(CarouselItemComponent, {
-      localMessageItem: message,
-      fullMessage: originalMessage,
-      isMessageForInput: isMessageForInput,
-      requestFocus: requestInputFocus
-    });
-  }
-  function renderGrid(message, originalMessage) {
-    return React.createElement(GridItemComponentExport, {
-      localMessageItem: message,
-      originalMessage: originalMessage
-    });
-  }
-  function renderTable(message) {
-    return React.createElement(TableContainerExport, {
-      tableItem: message.item
-    });
-  }
-  function scrollChainOfThought(open, element) {
-    if (open) {
-      setTimeout(() => {
-        props.scrollElementIntoView(element, 64, 64);
-      });
-    }
-  }
-  function formatStepLabelText({stepNumber: stepNumber, stepTitle: stepTitle}) {
-    return intl.formatMessage({
-      id: "chainOfThought_stepTitle"
-    }, {
-      stepNumber: stepNumber,
-      stepTitle: stepTitle
-    });
-  }
-  function renderChainOfThought(localMessageItem) {
-    const chainOfThought = localMessageItem.item.message_options?.chain_of_thought;
-    if (!chainOfThought || props.isNestedMessageItem) {
-      return false;
-    }
-    return React.createElement(ChainOfThought, {
-      steps: chainOfThought,
-      onToggle: scrollChainOfThought,
-      onStepToggle: scrollChainOfThought,
-      formatStepLabelText: formatStepLabelText,
-      explainabilityText: languagePack.chainOfThought_explainabilityLabel,
-      inputLabelText: languagePack.chainOfThought_inputLabel,
-      outputLabelText: languagePack.chainOfThought_outputLabel,
-      toolLabelText: languagePack.chainOfThought_toolLabel
-    });
-  }
-  function renderFeedback(localMessageItem, message) {
-    const feedbackOptions = localMessageItem.item.message_options?.feedback || {};
-    const {id: feedbackID, is_on: is_on, show_positive_details: show_positive_details = true, show_negative_details: show_negative_details = true, show_text_area: show_text_area = true, show_prompt: show_prompt = true, title: title, prompt: prompt, categories: categories, placeholder: placeholder, disclaimer: disclaimer} = feedbackOptions;
-    if (props.isNestedMessageItem || hideFeedback || !allowNewFeedback && !feedbackHistory || !is_on) {
-      return false;
-    }
-    function updateHistory(data) {
-      if (feedbackID) {
-        const history = {
-          feedback: {
-            [feedbackID]: data
-          }
-        };
-        serviceManager.store.dispatch(actions.mergeMessageHistory(localMessageItem.fullMessageID, history));
-      }
-    }
-    function onFeedbackClicked(isPositive) {
-      const toggleToSelected = isPositive ? !isPositiveFeedbackSelected : !isNegativeFeedbackSelected;
-      const openDetails = (isPositive ? show_positive_details : show_negative_details) && toggleToSelected;
-      if (toggleToSelected && !openDetails) {
-        updateHistory({
-          is_positive: isPositive
-        });
-        setIsFeedbackSubmitted(true);
-        serviceManager.fire({
-          type: BusEventType.FEEDBACK,
-          messageItem: localMessageItem.item,
-          message: message,
-          interactionType: FeedbackInteractionType.SUBMITTED,
-          isPositive: isPositive
-        });
-      } else {
-        setIsFeedbackOpen(openDetails);
-        if (openDetails) {
-          setTimeout(() => {
-            props.scrollElementIntoView(feedbackDetailsRef.current, 48, 56);
-          });
-        }
-        serviceManager.fire({
-          type: BusEventType.FEEDBACK,
-          messageItem: localMessageItem.item,
-          message: message,
-          interactionType: openDetails ? FeedbackInteractionType.DETAILS_OPENED : FeedbackInteractionType.DETAILS_CLOSED,
-          isPositive: isPositive
-        });
-      }
-      setIsPositiveFeedbackSelected(isPositive ? toggleToSelected : false);
-      setIsNegativeFeedbackSelected(isPositive ? false : toggleToSelected);
-    }
-    function onSubmit(isPositive, details) {
-      setIsFeedbackSubmitted(true);
-      setIsFeedbackOpen(false);
-      const event = {
-        type: BusEventType.FEEDBACK,
-        messageItem: localMessageItem.item,
-        message: message,
-        interactionType: FeedbackInteractionType.SUBMITTED,
-        isPositive: isPositive,
-        text: details.text,
-        categories: details.selectedCategories
-      };
-      serviceManager.fire(event);
-      updateHistory({
-        is_positive: event.isPositive,
-        text: event.text,
-        categories: event.categories
-      });
-    }
-    function renderFeedbackPopup(isPositive) {
-      const isOpen = isFeedbackOpen && (isPositive ? isPositiveFeedbackSelected : isNegativeFeedbackSelected);
-      return React.createElement(FeedbackComponent, {
-        class: `${CSS_CLASS_PREFIX}-feedbackDetails-${isPositive ? "positive" : "negative"}`,
-        id: `${feedbackPanelID}-feedback-${isPositive ? "positive" : "negative"}`,
-        isOpen: isOpen,
-        isReadonly: isFeedbackSubmitted,
-        onClose: () => onFeedbackClicked(isPositive),
-        onSubmit: details => onSubmit(isPositive, details),
-        initialValues: feedbackHistory && feedbackHistory?.is_positive === isPositive ? feedbackInitialValues : null,
-        showTextArea: show_text_area,
-        showPrompt: show_prompt,
-        title: title || languagePack.feedback_defaultTitle,
-        prompt: prompt || languagePack.feedback_defaultPrompt,
-        categories: categories,
-        placeholder: placeholder || languagePack.feedback_defaultPlaceholder,
-        disclaimer: disclaimer,
-        submitLabel: languagePack.feedback_submitLabel,
-        cancelLabel: languagePack.feedback_cancelLabel
-      });
-    }
-    return React.createElement("div", {
-      className: "WAC__received--feedback"
-    }, React.createElement(FeedbackButtonsComponent, {
-      isPositiveOpen: isFeedbackOpen && isPositiveFeedbackSelected,
-      isNegativeOpen: isFeedbackOpen && isNegativeFeedbackSelected,
-      isPositiveSelected: isPositiveFeedbackSelected,
-      isNegativeSelected: isNegativeFeedbackSelected,
-      hasPositiveDetails: show_positive_details,
-      hasNegativeDetails: show_negative_details,
-      isPositiveDisabled: isNegativeFeedbackSelected || isFeedbackSubmitted,
-      isNegativeDisabled: isPositiveFeedbackSelected || isFeedbackSubmitted,
-      positiveLabel: languagePack.feedback_positiveLabel,
-      negativeLabel: languagePack.feedback_negativeLabel,
-      panelID: feedbackPanelID,
-      onClick: onFeedbackClicked
-    }), React.createElement("div", {
-      ref: feedbackDetailsRef
-    }, renderFeedbackPopup(true), renderFeedbackPopup(false)));
-  }
-  return renderSpecificMessage(props.message, props.originalMessage);
-}
-
-export { MessageTypeComponent };