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

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

@@ -1,469 +0,0 @@
-import cx from "classnames";
-
-import throttle from "lodash-es/throttle.js";
-
-import React, { PureComponent, Fragment } from "react";
-
-import { connect } from "react-redux";
-
-import { InlineLoadingComponent } from "../../react/components/inlineLoading/InlineLoadingComponent.js";
-
-import { AgentBannerContainer } from "../components/agent/AgentBannerContainer.js";
-
-import { AriaLiveMessage as AriaLiveMessageExport } from "../components/aria/AriaLiveMessage.js";
-
-import LatestWelcomeNodes from "../components/LatestWelcomeNodes.js";
-
-import { Notifications } from "../components/notifications/Notifications.js";
-
-import { withServiceManager } from "../hocs/withServiceManager.js";
-
-import actions from "../store/actions.js";
-
-import { selectAgentDisplayState, selectInputState } from "../store/selectors.js";
-
-import { MessageErrorState } from "../../../types/messaging/LocalMessageItem.js";
-
-import { IS_MOBILE } from "../utils/browserUtils.js";
-
-import { AUTO_SCROLL_EXTRA, AUTO_SCROLL_THROTTLE_TIMEOUT } from "../utils/constants.js";
-
-import { doScrollElement, getScrollBottom } from "../utils/domUtils.js";
-
-import { arrayLastValue } from "../utils/lang/arrayUtils.js";
-
-import { isResponse, isRequest } from "../utils/messageUtils.js";
-
-import { consoleError } from "../utils/miscUtils.js";
-
-import MessageComponent, { MoveFocusType } from "./MessageComponent.js";
-
-import { WriteableElementName } from "../../../types/instance/ChatInstance.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 MessagesComponent extends PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      scrollHandleHasFocus: false
-    };
-    this.messageRefs = new Map;
-    this.messagesContainerWithScrollingRef = React.createRef();
-    this.scrollHandleRef = React.createRef();
-    this.agentBannerRef = React.createRef();
-    this.onResize = () => {
-      if (this.props.messageState.isScrollAnchored) {
-        const element = this.messagesContainerWithScrollingRef.current;
-        if (element) {
-          element.scrollTop = element.scrollHeight;
-        }
-      }
-    };
-    this.doAutoScroll = throttle((options = {}) => {
-      try {
-        debugAutoScroll("[doAutoScroll] Running doAutoScroll", options);
-        const {scrollToTop: scrollToTop, scrollToBottom: scrollToBottom} = options;
-        const {localMessageItems: localMessageItems, messageState: messageState, allMessagesByID: allMessagesByID} = this.props;
-        const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
-        const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
-        const scrollElement = this.messagesContainerWithScrollingRef.current;
-        if (scrollToTop !== undefined) {
-          doScrollElement(scrollElement, scrollToTop, 0, false);
-          return;
-        }
-        if (scrollToBottom !== undefined) {
-          const scrollTop = scrollElement.scrollHeight - scrollElement.offsetHeight - scrollToBottom;
-          doScrollElement(scrollElement, scrollTop, 0, false);
-          return;
-        }
-        let animate = true;
-        let setScrollTop;
-        const lastLocalItemIndex = localMessageItems.length - 1;
-        const lastLocalItem = localMessageItems.length ? localMessageItems[lastLocalItemIndex] : null;
-        const lastMessage = allMessagesByID[lastLocalItem?.fullMessageID];
-        if (!lastLocalItem) {
-          debugAutoScroll("[doAutoScroll] No last time");
-          animate = false;
-          setScrollTop = 0;
-        } else if (isTypingCounter > 0 || isLoadingCounter > 0 || isAgentTyping) {
-          setScrollTop = scrollElement.scrollHeight;
-          debugAutoScroll("[doAutoScroll] isTyping visible", isTypingCounter);
-        } else {
-          const shouldScrollToMessage = (localItem, message) => {
-            if (isResponse(message)) {
-              const messageRequest = allMessagesByID[message?.request_id];
-              return messageRequest?.history?.silent && messageRequest.input?.text !== "";
-            }
-            return isRequest(message);
-          };
-          let messageIndex = localMessageItems.length - 1;
-          let localItem = localMessageItems[messageIndex];
-          let lastScrollableMessageComponent = this.messageRefs.get(localItem?.ui_state.id);
-          while (messageIndex >= 1) {
-            localItem = localMessageItems[messageIndex];
-            const message = allMessagesByID[localItem?.fullMessageID];
-            if (shouldScrollToMessage(localItem, message)) {
-              lastScrollableMessageComponent = this.messageRefs.get(localItem?.ui_state.id);
-              debugAutoScroll(`[doAutoScroll] lastScrollableMessageComponent=${messageIndex}`, localMessageItems[messageIndex], message);
-              break;
-            }
-            messageIndex--;
-          }
-          if (lastScrollableMessageComponent) {
-            const offsetTop = lastScrollableMessageComponent.ref.current?.offsetTop;
-            setScrollTop = offsetTop + AUTO_SCROLL_EXTRA;
-            debugAutoScroll(`[doAutoScroll] Scrolling to message offsetTop=${offsetTop}`);
-          } else {
-            setScrollTop = -1;
-            debugAutoScroll("[doAutoScroll] No message found");
-          }
-        }
-        if (setScrollTop !== -1) {
-          if (setScrollTop >= scrollElement.scrollTop) {
-            if (lastMessage?.history?.from_history) {
-              animate = false;
-            }
-            debugAutoScroll(`[doAutoScroll] doScrollElement`, scrollElement, setScrollTop, animate);
-            doScrollElement(scrollElement, setScrollTop, 0, animate);
-            this.checkScrollAnchor(true, setScrollTop);
-          }
-        }
-      } catch (error) {
-        consoleError("An error occurred while attempting to scroll.", error);
-      }
-    }, AUTO_SCROLL_THROTTLE_TIMEOUT);
-    this.getContainerScrollBottom = () => getScrollBottom(this.messagesContainerWithScrollingRef?.current);
-    this.scrollElementIntoView = (element, paddingTop = 8, paddingBottom = 8) => {
-      const scrollElement = this.messagesContainerWithScrollingRef.current;
-      const scrollRect = scrollElement.getBoundingClientRect();
-      const elementRect = element.getBoundingClientRect();
-      const topDistanceFromTop = elementRect.top - scrollRect.top + scrollElement.scrollTop - paddingTop;
-      const bottomDistanceFromTop = elementRect.bottom - scrollRect.top + scrollElement.scrollTop + paddingBottom;
-      const elementHeight = element.offsetHeight + paddingTop + paddingBottom;
-      if (topDistanceFromTop < scrollElement.scrollTop || elementHeight > scrollElement.offsetHeight) {
-        doScrollElement(scrollElement, topDistanceFromTop, 0);
-      } else if (bottomDistanceFromTop > scrollElement.scrollTop + scrollElement.offsetHeight) {
-        doScrollElement(scrollElement, bottomDistanceFromTop - scrollElement.offsetHeight, 0);
-      }
-    };
-    this.requestMoveFocus = (moveFocusType, currentMessageIndex) => {
-      if (moveFocusType === MoveFocusType.INPUT) {
-        this.props.requestInputFocus();
-      } else {
-        const {localMessageItems: localMessageItems} = this.props;
-        let index;
-        switch (moveFocusType) {
-         case MoveFocusType.LAST:
-          index = localMessageItems.length - 1;
-          break;
-
-         case MoveFocusType.NEXT:
-          index = currentMessageIndex + 1;
-          if (index >= localMessageItems.length) {
-            index = 0;
-          }
-          break;
-
-         case MoveFocusType.PREVIOUS:
-          index = currentMessageIndex - 1;
-          if (index < 0) {
-            index = localMessageItems.length - 1;
-          }
-          break;
-
-         default:
-          index = 0;
-          break;
-        }
-        const messageItem = localMessageItems[index];
-        const ref = this.messageRefs.get(messageItem?.ui_state.id);
-        if (ref) {
-          ref.requestHandleFocus();
-        }
-      }
-    };
-  }
-  componentDidMount() {
-    this.scrollPanelObserver = new ResizeObserver(this.onResize);
-    this.scrollPanelObserver.observe(this.messagesContainerWithScrollingRef.current);
-    this.previousScrollOffsetHeight = this.messagesContainerWithScrollingRef.current.offsetHeight;
-  }
-  componentDidUpdate(oldProps) {
-    const newProps = this.props;
-    const numMessagesChanged = oldProps.localMessageItems.length !== newProps.localMessageItems.length;
-    const oldAgentDisplayState = selectAgentDisplayState(oldProps);
-    const newAgentDisplayState = selectAgentDisplayState(newProps);
-    const typingChanged = oldProps.messageState.isTypingCounter !== newProps.messageState.isTypingCounter || oldProps.messageState.isLoadingCounter !== newProps.messageState.isLoadingCounter || oldAgentDisplayState.isAgentTyping !== newAgentDisplayState.isAgentTyping;
-    if (numMessagesChanged || typingChanged) {
-      const newLastItem = arrayLastValue(newProps.localMessageItems);
-      const oldLastItem = arrayLastValue(oldProps.localMessageItems);
-      const lastItemChanged = newLastItem !== oldLastItem;
-      if (lastItemChanged || typingChanged) {
-        this.doAutoScroll();
-      }
-    }
-  }
-  componentWillUnmount() {
-    this.scrollPanelObserver.unobserve(this.messagesContainerWithScrollingRef.current);
-  }
-  checkScrollAnchor(fromAutoScroll, assumeScrollTop) {
-    const scrollElement = this.messagesContainerWithScrollingRef.current;
-    if (fromAutoScroll || this.previousScrollOffsetHeight === scrollElement.offsetHeight && !this.props.suspendScrollDetection) {
-      const assumedScrollTop = assumeScrollTop !== undefined ? assumeScrollTop : scrollElement.scrollTop;
-      const isScrollAnchored = assumedScrollTop >= scrollElement.scrollHeight - scrollElement.offsetHeight;
-      if (isScrollAnchored !== this.props.messageState.isScrollAnchored) {
-        this.props.serviceManager.store.dispatch(actions.setChatMessagesStateProperty("isScrollAnchored", isScrollAnchored));
-      }
-    }
-    this.previousScrollOffsetHeight = scrollElement.offsetHeight;
-  }
-  requestAgentBannerFocus() {
-    if (this.agentBannerRef.current) {
-      return this.agentBannerRef.current.requestFocus();
-    }
-    return false;
-  }
-  doScrollToMessage(messageID, animate = true) {
-    try {
-      const {localMessageItems: localMessageItems} = this.props;
-      let panelComponent;
-      for (let index = 0; index <= localMessageItems.length; index++) {
-        const messageItem = localMessageItems[index];
-        if (messageItem.fullMessageID === messageID) {
-          panelComponent = this.messageRefs.get(messageItem.ui_state.id);
-          break;
-        }
-      }
-      if (panelComponent) {
-        const scrollElement = this.messagesContainerWithScrollingRef.current;
-        const setScrollTop = panelComponent.ref.current.offsetTop;
-        doScrollElement(scrollElement, setScrollTop, 0, animate);
-        this.checkScrollAnchor(true, setScrollTop);
-      }
-    } catch (error) {
-      consoleError("An error occurred while attempting to scroll.", error);
-    }
-  }
-  getLastOutputMessageElements() {
-    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
-    const lastMessageItem = arrayLastValue(localMessageItems);
-    const lastMessage = allMessagesByID[lastMessageItem?.fullMessageID];
-    if (isResponse(lastMessage)) {
-      const elements = [];
-      let hasFoundLastBotMessageGroupID = false;
-      for (let index = localMessageItems.length - 1; index >= 0; index--) {
-        const messageItem = localMessageItems[index];
-        const componentRef = this.messageRefs.get(messageItem?.ui_state.id);
-        if (componentRef) {
-          const {getLocalMessage: getLocalMessage} = componentRef;
-          if (getLocalMessage().fullMessageID === lastMessage.id) {
-            hasFoundLastBotMessageGroupID = true;
-            const element = componentRef.ref?.current;
-            if (element) {
-              elements.push(element);
-            } else {
-              break;
-            }
-          } else if (hasFoundLastBotMessageGroupID) {
-            break;
-          }
-        }
-      }
-      return elements.reverse();
-    }
-    return [];
-  }
-  renderTypingIndicator(isTypingMessage, index) {
-    return React.createElement("div", {
-      className: `WAC__message WAC__message-${index} WAC__message--lastMessage`
-    }, React.createElement("div", {
-      className: "WAC__message--padding"
-    }, isTypingMessage && React.createElement(AriaLiveMessageExport, {
-      message: isTypingMessage
-    }), React.createElement("div", {
-      className: "WAC__bot-message"
-    }, React.createElement("div", {
-      className: "WAC__received WAC__received--loading WAC__message-vertical-padding"
-    }, React.createElement("div", {
-      className: "WAC__received--inner"
-    }, React.createElement(InlineLoadingComponent, {
-      loop: true,
-      carbonTheme: this.props.carbonTheme
-    }))))));
-  }
-  renderMessage(localMessage, fullMessage, messagesIndex, showBeforeWelcomeNodeElement, isMessageForInput, isFirstMessageItem, lastMessageID) {
-    const {serviceManager: serviceManager, config: config, languagePack: languagePack, requestInputFocus: requestInputFocus, persistedToBrowserStorage: persistedToBrowserStorage, botName: botName, messageState: messageState, locale: locale, botAvatarURL: botAvatarURL, carbonTheme: carbonTheme, useAITheme: useAITheme} = this.props;
-    const inputState = selectInputState(this.props);
-    const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
-    const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
-    const {chatState: chatState} = persistedToBrowserStorage;
-    const {disclaimersAccepted: disclaimersAccepted} = chatState;
-    if (config.public.disclaimer?.is_on && !disclaimersAccepted[window.location.hostname]) {
-      return null;
-    }
-    const totalMessagesWithTyping = this.props.localMessageItems.length + (isTypingCounter > 0 || isLoadingCounter > 0 || isAgentTyping ? 1 : 0);
-    const isLastMessage = messagesIndex === totalMessagesWithTyping - 1;
-    const className = cx({
-      "WAC__message--firstMessage": messagesIndex === 0,
-      "WAC__message--lastMessage": isLastMessage
-    });
-    const allowNewFeedback = localMessage.fullMessageID === lastMessageID;
-    const messageItemID = localMessage.ui_state.id;
-    const message = React.createElement(MessageComponent, {
-      ref: component => {
-        if (component) {
-          this.messageRefs.set(messageItemID, component);
-        } else {
-          this.messageRefs.delete(messageItemID);
-        }
-      },
-      className: className,
-      config: config,
-      localMessageItem: localMessage,
-      message: fullMessage,
-      languagePack: languagePack,
-      requestInputFocus: requestInputFocus,
-      serviceManager: serviceManager,
-      messagesIndex: messagesIndex,
-      botName: botName,
-      disableUserInputs: inputState.isReadonly,
-      isMessageForInput: isMessageForInput,
-      showAvatarLine: isFirstMessageItem,
-      botAvatarURL: botAvatarURL,
-      requestMoveFocus: this.requestMoveFocus,
-      doAutoScroll: this.doAutoScroll,
-      scrollElementIntoView: this.scrollElementIntoView,
-      isFirstMessageItem: isFirstMessageItem,
-      locale: locale,
-      carbonTheme: carbonTheme,
-      useAITheme: useAITheme,
-      allowNewFeedback: allowNewFeedback,
-      hideFeedback: false
-    });
-    if (showBeforeWelcomeNodeElement) {
-      return React.createElement(LatestWelcomeNodes, {
-        welcomeNodeBeforeElement: serviceManager.writeableElements[WriteableElementName.WELCOME_NODE_BEFORE_ELEMENT],
-        key: messageItemID
-      }, message);
-    }
-    return React.createElement(Fragment, {
-      key: messageItemID
-    }, message);
-  }
-  renderAgentBanner() {
-    return React.createElement(AgentBannerContainer, {
-      bannerRef: this.agentBannerRef,
-      onButtonClick: this.props.onEndAgentChat
-    });
-  }
-  renderScrollHandle(atTop) {
-    const {languagePack: languagePack} = this.props;
-    let labelKey;
-    if (IS_MOBILE) {
-      labelKey = atTop ? "messages_scrollHandle" : "messages_scrollHandleEnd";
-    } else {
-      labelKey = atTop ? "messages_scrollHandleDetailed" : "messages_scrollHandleEndDetailed";
-    }
-    const onClick = IS_MOBILE ? undefined : () => this.requestMoveFocus(atTop ? MoveFocusType.FIRST : MoveFocusType.LAST, 0);
-    return React.createElement("button", {
-      type: "button",
-      className: "WACMessages--scrollHandle",
-      ref: this.scrollHandleRef,
-      tabIndex: 0,
-      "aria-label": languagePack[labelKey] || languagePack.messages_scrollHandle,
-      onClick: onClick,
-      onFocus: () => this.setState({
-        scrollHandleHasFocus: true
-      }),
-      onBlur: () => this.setState({
-        scrollHandleHasFocus: false
-      })
-    });
-  }
-  getMessageIDForUserInput() {
-    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
-    for (let index = localMessageItems.length - 1; index >= 0; index--) {
-      const message = localMessageItems[index];
-      const originalMessage = allMessagesByID[message.fullMessageID];
-      if (isRequest(originalMessage) && originalMessage?.history?.error_state !== MessageErrorState.FAILED) {
-        return null;
-      }
-      if (isResponse(originalMessage)) {
-        return message.fullMessageID;
-      }
-    }
-    return null;
-  }
-  renderMessages(messageIDForInput) {
-    const {localMessageItems: localMessageItems, allMessagesByID: allMessagesByID} = this.props;
-    const renderMessageArray = [];
-    const lastMessageID = arrayLastValue(localMessageItems)?.fullMessageID;
-    let previousMessageID = null;
-    for (let currentIndex = 0; currentIndex < localMessageItems.length; currentIndex++) {
-      const localMessageItem = localMessageItems[currentIndex];
-      const fullMessage = allMessagesByID[localMessageItem.fullMessageID];
-      const isMessageForInput = messageIDForInput === localMessageItem.fullMessageID;
-      const isFirstMessageItem = previousMessageID !== localMessageItem.fullMessageID;
-      const showBeforeWelcomeNodeElement = localMessageItem.ui_state.isWelcomeResponse && isFirstMessageItem;
-      previousMessageID = localMessageItem.fullMessageID;
-      renderMessageArray.push(this.renderMessage(localMessageItem, fullMessage, currentIndex, showBeforeWelcomeNodeElement, isMessageForInput, isFirstMessageItem, lastMessageID));
-    }
-    return renderMessageArray;
-  }
-  render() {
-    const {localMessageItems: localMessageItems, messageState: messageState, intl: intl, botName: botName, serviceManager: serviceManager, notifications: notifications} = this.props;
-    const {isTypingCounter: isTypingCounter, isLoadingCounter: isLoadingCounter} = messageState;
-    const {isAgentTyping: isAgentTyping} = selectAgentDisplayState(this.props);
-    const {scrollHandleHasFocus: scrollHandleHasFocus} = this.state;
-    const messageIDForInput = this.getMessageIDForUserInput();
-    const regularMessages = this.renderMessages(messageIDForInput);
-    let isTypingMessage;
-    if (isAgentTyping) {
-      isTypingMessage = intl.formatMessage({
-        id: "messages_agentIsTyping"
-      });
-    } else if (isTypingCounter) {
-      isTypingMessage = intl.formatMessage({
-        id: "messages_botIsTyping"
-      }, {
-        botName: botName
-      });
-    } else if (isLoadingCounter) {
-      isTypingMessage = intl.formatMessage({
-        id: "messages_botIsLoading"
-      }, {
-        botName: botName
-      });
-    }
-    return React.createElement("div", {
-      id: `WACMessages--holder${serviceManager.namespace.suffix}`,
-      className: "WACMessages--holder"
-    }, this.renderAgentBanner(), React.createElement("div", {
-      className: cx("WACMessages__Wrapper", {
-        "WACMessages__Wrapper--scrollHandleHasFocus": scrollHandleHasFocus
-      })
-    }, React.createElement("div", {
-      id: `WAC__messages${serviceManager.namespace.suffix}`,
-      className: "WAC__messages",
-      ref: this.messagesContainerWithScrollingRef,
-      onScroll: () => this.checkScrollAnchor()
-    }, this.renderScrollHandle(true), regularMessages, (Boolean(isTypingCounter) || Boolean(isLoadingCounter) || isAgentTyping) && this.renderTypingIndicator(isTypingMessage, localMessageItems.length), React.createElement(Notifications, {
-      serviceManager: serviceManager,
-      notifications: notifications
-    }), this.renderScrollHandle(false))));
-  }
-}
-
-function debugAutoScroll(message, ...args) {}
-
-var MessagesComponent$1 = withServiceManager(connect(state => state, null, null, {
-  forwardRef: true
-})(MessagesComponent));
-
-export { MessagesComponent as MessagesComponentClass, MessagesComponent$1 as default };

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

@@ -1,53 +0,0 @@
-import { Component } from "react";
-
-import ReactDOM from "react-dom";
-
-import { ModalPortalRootContext } from "../contexts/ModalPortalRootContext.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 ModalPortal extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      attachedToHost: null
-    };
-    this.modalElement = document.createElement("div");
-  }
-  componentDidMount() {
-    this.attachIfNeeded();
-  }
-  componentDidUpdate() {
-    this.attachIfNeeded();
-  }
-  componentWillUnmount() {
-    if (this.state.attachedToHost) {
-      this.state.attachedToHost.removeChild(this.modalElement);
-    }
-  }
-  attachIfNeeded() {
-    const hostElement = this.context;
-    if (hostElement && !this.state.attachedToHost) {
-      this.setState({
-        attachedToHost: hostElement
-      });
-      hostElement.appendChild(this.modalElement);
-    }
-  }
-  render() {
-    if (!this.state.attachedToHost) {
-      return null;
-    }
-    return ReactDOM.createPortal(this.props.children, this.modalElement);
-  }
-}
-
-ModalPortal.contextType = ModalPortalRootContext;
-
-export { ModalPortal };