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

package/dist/es/chat/shared/components/Avatar.js

@@ -1,286 +0,0 @@
-import React from "react";
-
-import { uuid } from "../utils/lang/uuid.js";
-
-import "../../../types/utilities/carbonTypes.js";
-
-import { CarbonTheme } from "../../../types/config/PublicConfig.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 Avatar({theme: theme}) {
-  const a = `a-${uuid()}`;
-  const b = `b-${uuid()}`;
-  const c = `c-${uuid()}`;
-  const d = `d-${uuid()}`;
-  const e = `e-${uuid()}`;
-  if (theme === CarbonTheme.WHITE || theme === CarbonTheme.G10) {
-    return React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 32 32",
-      className: "cds--watsonx-avatar",
-      "aria-hidden": "true"
-    }, React.createElement("defs", null, React.createElement("linearGradient", {
-      id: a,
-      x1: "1186.526",
-      y1: "2863.168",
-      x2: "1199.825",
-      y2: "2845.109",
-      gradientTransform: "matrix(.8312 .55596 -.27409 .40979 -198.894 -1827.398)",
-      gradientUnits: "userSpaceOnUse"
-    }, React.createElement("stop", {
-      offset: ".3"
-    }), React.createElement("stop", {
-      offset: "1",
-      stopOpacity: "0"
-    })), React.createElement("linearGradient", {
-      id: b,
-      x1: "1189.388",
-      y1: "2911.794",
-      x2: "1200.478",
-      y2: "2896.735",
-      gradientTransform: "rotate(146.223 380.87 -882.286) scale(1 -.493)",
-      gradientUnits: "userSpaceOnUse"
-    }, React.createElement("stop", {
-      offset: ".3"
-    }), React.createElement("stop", {
-      offset: ".9",
-      stopOpacity: "0"
-    })), React.createElement("linearGradient", {
-      id: c,
-      x1: "-4995.033",
-      y1: "-20162.835",
-      x2: "-4981.733",
-      y2: "-20180.895",
-      gradientTransform: "rotate(-146.223 -971.422 -5714.55) scale(1 .493)",
-      gradientUnits: "userSpaceOnUse"
-    }, React.createElement("stop", {
-      offset: ".32"
-    }), React.createElement("stop", {
-      offset: ".354",
-      stopOpacity: ".798"
-    }), React.createElement("stop", {
-      offset: ".7",
-      stopOpacity: "0"
-    })), React.createElement("linearGradient", {
-      id: d,
-      x1: "0",
-      y1: "32",
-      x2: "32",
-      y2: "0",
-      gradientUnits: "userSpaceOnUse"
-    }, React.createElement("stop", {
-      offset: ".1",
-      stopColor: "#a56eff"
-    }), React.createElement("stop", {
-      offset: ".9",
-      stopColor: "#0f62fe"
-    })), React.createElement("mask", {
-      id: e,
-      x: "0",
-      y: "0",
-      width: "32",
-      height: "32",
-      maskUnits: "userSpaceOnUse"
-    }, React.createElement("path", {
-      d: "M16 1A14.915 14.915 0 0 0 5.502 5.286l1.4 1.429A12.922 12.922 0 0 1 16 3.001c.977 0 1.929.109 2.845.315-3.402.921-5.916 4.026-5.916 7.715 0 .782.118 1.537.328 2.252a7.978 7.978 0 0 0-2.188-.312c-3.704 0-6.819 2.534-7.726 5.957a12.954 12.954 0 0 1-.345-2.927c0-2.117.492-4.134 1.462-5.996l-1.773-.924A15.037 15.037 0 0 0 .999 16c0 8.271 6.729 15 15 15 3.949 0 7.678-1.522 10.498-4.286l-1.4-1.428A12.926 12.926 0 0 1 15.999 29c-3.648 0-6.945-1.516-9.309-3.945a5.959 5.959 0 0 1-1.621-4.086c0-3.309 2.691-6 6-6a6.006 6.006 0 0 1 5.897 7.107l1.967.367a7.971 7.971 0 0 0-.192-3.726 7.976 7.976 0 0 0 2.187.312c3.71 0 6.829-2.542 7.73-5.974.22.947.34 1.931.34 2.944 0 2.117-.492 4.134-1.462 5.995l1.773.924a15.034 15.034 0 0 0 1.688-6.919C31 7.729 24.272 1 16 1zm4.93 16.03c-3.309 0-6-2.692-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6z",
-      style: {
-        fill: "#fff",
-        strokeWidth: 0
-      }
-    }), React.createElement("path", {
-      style: {
-        fill: `url(#${a})`,
-        strokeWidth: 0
-      },
-      d: "M8 9 0 0h16l2.305 3.304L8 9z"
-    }), React.createElement("path", {
-      style: {
-        fill: `url(#${b})`,
-        strokeWidth: 0
-      },
-      d: "m12 31 4.386-9L6 21 2 31h10z"
-    }), React.createElement("path", {
-      style: {
-        fill: `url(#${c})`,
-        strokeWidth: 0
-      },
-      d: "m24 23 8 9H16l-2.304-3.305L24 23z"
-    }), React.createElement("path", {
-      style: {
-        strokeWidth: 0
-      },
-      d: "M16 31h-4.283L15 22h2l-1 9z"
-    }))), React.createElement("g", {
-      style: {
-        mask: `url(#${e})`
-      }
-    }, React.createElement("path", {
-      style: {
-        fill: `url(#${d})`,
-        strokeWidth: 0
-      },
-      d: "M0 0h32v32H0z"
-    })), React.createElement("circle", {
-      cx: "6",
-      cy: "6",
-      r: "2",
-      style: {
-        fill: "#001d6c",
-        strokeWidth: 0
-      }
-    }), React.createElement("circle", {
-      cx: "26",
-      cy: "26",
-      r: "2",
-      style: {
-        fill: "#001d6c",
-        strokeWidth: 0
-      }
-    }), React.createElement("path", {
-      d: "M16 31c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zm0-8c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z",
-      style: {
-        fill: "#001d6c",
-        strokeWidth: 0
-      }
-    }));
-  }
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 32 32",
-    className: "cds--watsonx-avatar",
-    "aria-hidden": "true"
-  }, React.createElement("defs", null, React.createElement("linearGradient", {
-    id: a,
-    x1: "1196.653",
-    y1: "2930.892",
-    x2: "1209.953",
-    y2: "2912.832",
-    gradientTransform: "matrix(.8312 .55596 -.27409 .40979 -188.767 -1860.755)",
-    gradientUnits: "userSpaceOnUse"
-  }, React.createElement("stop", {
-    offset: ".3"
-  }), React.createElement("stop", {
-    offset: "1",
-    stopOpacity: "0"
-  })), React.createElement("linearGradient", {
-    id: b,
-    x1: "1299.261",
-    y1: "2844.072",
-    x2: "1310.351",
-    y2: "2829.012",
-    gradientTransform: "rotate(146.223 440.869 -882.286) scale(1 -.493)",
-    gradientUnits: "userSpaceOnUse"
-  }, React.createElement("stop", {
-    offset: ".3"
-  }), React.createElement("stop", {
-    offset: ".9",
-    stopOpacity: "0"
-  })), React.createElement("linearGradient", {
-    id: c,
-    x1: "-4885.16",
-    y1: "-20230.559",
-    x2: "-4871.86",
-    y2: "-20248.618",
-    gradientTransform: "rotate(-146.223 -911.421 -5714.55) scale(1 .493)",
-    gradientUnits: "userSpaceOnUse"
-  }, React.createElement("stop", {
-    offset: ".32"
-  }), React.createElement("stop", {
-    offset: ".354",
-    stopOpacity: ".798"
-  }), React.createElement("stop", {
-    offset: ".7",
-    stopOpacity: "0"
-  })), React.createElement("linearGradient", {
-    id: d,
-    x1: "0",
-    y1: "32",
-    x2: "32",
-    y2: "0",
-    gradientUnits: "userSpaceOnUse"
-  }, React.createElement("stop", {
-    offset: ".1",
-    stopColor: "#be95ff"
-  }), React.createElement("stop", {
-    offset: ".9",
-    stopColor: "#4589ff"
-  })), React.createElement("mask", {
-    id: e,
-    x: "0",
-    y: "0",
-    width: "32",
-    height: "32",
-    maskUnits: "userSpaceOnUse"
-  }, React.createElement("path", {
-    d: "M16 1A14.915 14.915 0 0 0 5.502 5.286l1.4 1.429A12.922 12.922 0 0 1 16 3.001c.977 0 1.929.109 2.845.315-3.402.921-5.916 4.026-5.916 7.715 0 .782.118 1.537.328 2.252a7.978 7.978 0 0 0-2.188-.312c-3.704 0-6.819 2.534-7.726 5.957a12.954 12.954 0 0 1-.345-2.927c0-2.117.492-4.134 1.462-5.996l-1.773-.924A15.037 15.037 0 0 0 .999 16c0 8.271 6.729 15 15 15 3.949 0 7.678-1.522 10.498-4.286l-1.4-1.428A12.926 12.926 0 0 1 15.999 29c-3.648 0-6.945-1.516-9.309-3.945a5.959 5.959 0 0 1-1.621-4.086c0-3.309 2.691-6 6-6a6.006 6.006 0 0 1 5.897 7.107l1.967.367a7.971 7.971 0 0 0-.192-3.726 7.976 7.976 0 0 0 2.187.312c3.71 0 6.829-2.542 7.73-5.974.22.947.34 1.931.34 2.944 0 2.117-.492 4.134-1.462 5.995l1.773.924a15.034 15.034 0 0 0 1.688-6.919c0-8.271-6.729-15-15-15zm4.93 16.03c-3.309 0-6-2.692-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6z",
-    style: {
-      fill: "#fff",
-      strokeWidth: 0
-    }
-  }), React.createElement("path", {
-    style: {
-      fill: `url(#${a})`,
-      strokeWidth: 0
-    },
-    d: "M8 9 0 0h16l2.305 3.305L8 9z"
-  }), React.createElement("path", {
-    style: {
-      fill: `url(#${b})`,
-      strokeWidth: 0
-    },
-    d: "m12 31 4.386-9L6 21 2 31h10z"
-  }), React.createElement("path", {
-    style: {
-      fill: `url(#${c})`,
-      strokeWidth: 0
-    },
-    d: "m24 23 8 9H16l-2.305-3.305L24 23z"
-  }), React.createElement("path", {
-    style: {
-      strokeWidth: 0
-    },
-    d: "M16 31h-4.283L15 22h2l-1 9z"
-  }))), React.createElement("g", {
-    style: {
-      mask: `url(#${e})`
-    }
-  }, React.createElement("path", {
-    style: {
-      fill: `url(#${d})`,
-      strokeWidth: 0
-    },
-    d: "M0 0h32v32H0z"
-  })), React.createElement("circle", {
-    cx: "6",
-    cy: "6",
-    r: "2",
-    style: {
-      fill: "#f4f4f4",
-      strokeWidth: 0
-    }
-  }), React.createElement("circle", {
-    cx: "26",
-    cy: "26",
-    r: "2",
-    style: {
-      fill: "#f4f4f4",
-      strokeWidth: 0
-    }
-  }), React.createElement("path", {
-    d: "M16 31c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zm0-8c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3z",
-    style: {
-      fill: "#f4f4f4",
-      strokeWidth: 0
-    }
-  }));
-}
-
-const AvatarExport = React.memo(Avatar);
-
-export { AvatarExport as Avatar };

package/dist/es/chat/shared/components/BodyWithFooterComponent.js

@@ -1,56 +0,0 @@
-import React from "react";
-
-import { useSelector } from "react-redux";
-
-import { useLanguagePack } from "../hooks/useLanguagePack.js";
-
-import { useServiceManager } from "../hooks/useServiceManager.js";
-
-import { selectInputState } from "../store/selectors.js";
-
-import { THROW_ERROR } from "../utils/constants.js";
-
-import { BodyMessageComponents as BodyMessageTypeComponentsExport } from "./responseTypes/util/BodyMessageComponents.js";
-
-import { FooterButtonComponents } from "./responseTypes/util/FooterButtonComponents.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 BodyWithFooterComponent({localMessageItem: localMessageItem, fullMessage: fullMessage, isMessageForInput: isMessageForInput, requestFocus: requestFocus}) {
-  const serviceManager = useServiceManager();
-  const languagePack = useLanguagePack();
-  const appConfig = useSelector(state => state.config);
-  const inputState = useSelector(selectInputState);
-  return React.createElement(React.Fragment, null, React.createElement(BodyMessageTypeComponentsExport, {
-    message: localMessageItem,
-    originalMessage: fullMessage,
-    languagePack: languagePack,
-    requestInputFocus: requestFocus,
-    disableUserInputs: inputState.isReadonly,
-    config: appConfig,
-    isMessageForInput: isMessageForInput,
-    scrollElementIntoView: THROW_ERROR,
-    serviceManager: serviceManager,
-    hideFeedback: true,
-    allowNewFeedback: false
-  }), React.createElement(FooterButtonComponents, {
-    message: localMessageItem,
-    originalMessage: fullMessage,
-    languagePack: languagePack,
-    requestInputFocus: requestFocus,
-    disableUserInputs: inputState.isReadonly,
-    config: appConfig,
-    isMessageForInput: isMessageForInput,
-    scrollElementIntoView: THROW_ERROR,
-    serviceManager: serviceManager,
-    hideFeedback: true,
-    allowNewFeedback: false
-  }));
-}
-
-export { BodyWithFooterComponent };

package/dist/es/chat/shared/components/CatastrophicError.js

@@ -1,77 +0,0 @@
-import Restart from "@carbon/icons-react/es/Restart.js";
-
-import { unstable__ChatButton } from "@carbon/react";
-
-import cx from "classnames";
-
-import React from "react";
-
-import { useIntl } from "react-intl";
-
-import { useSelector } from "react-redux";
-
-import { ErrorMessageDark } from "./ErrorMessageDark.js";
-
-import { ErrorMessageLight } from "./ErrorMessageLight.js";
-
-import { BotHeader as BotHeaderExport } from "./header/BotHeader.js";
-
-import { RichText as RichTextExport } from "./responseTypes/util/RichText.js";
-
-import { ButtonSizeEnum, ButtonKindEnum } from "../../../types/utilities/carbonTypes.js";
-
-import { OverlayPanelName } from "./OverlayPanel.js";
-
-import { CarbonTheme } from "../../../types/config/PublicConfig.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 CatastrophicError({onClose: onClose, languagePack: languagePack, onRestart: onRestart, showHeader: showHeader, botName: botName, headerDisplayName: headerDisplayName}) {
-  const intl = useIntl();
-  const carbonTheme = useSelector(state => state.theme.carbonTheme);
-  const isDarkTheme = carbonTheme === CarbonTheme.G90 || carbonTheme === CarbonTheme.G100;
-  const errorKey = "errors_communicating";
-  const errorBodyText = intl.formatMessage({
-    id: errorKey
-  }, {
-    botName: botName
-  });
-  return React.createElement("div", {
-    className: "WAC"
-  }, showHeader && React.createElement(BotHeaderExport, {
-    headerDisplayName: headerDisplayName,
-    onClose: onClose,
-    onToggleHomeScreen: null,
-    includeWriteableElement: false,
-    testIdPrefix: OverlayPanelName.CATASTROPHIC
-  }), React.createElement("div", {
-    className: cx("WACCatastrophicError", "WACPanelContent", {
-      "WACCatastrophicError--withHeader": showHeader
-    })
-  }, React.createElement("div", {
-    className: "WACCatastrophicError__ErrorTextContainer"
-  }, isDarkTheme && React.createElement(ErrorMessageDark, null), !isDarkTheme && React.createElement(ErrorMessageLight, null), React.createElement("div", {
-    className: "WACCatastrophicError__ErrorHeading"
-  }, languagePack.errors_somethingWrong), React.createElement("div", {
-    className: "WACCatastrophicError__ErrorBody"
-  }, React.createElement(RichTextExport, {
-    text: errorBodyText
-  })), onRestart && React.createElement(unstable__ChatButton, {
-    className: "WACCatastrophicError__RestartButton",
-    kind: ButtonKindEnum.TERTIARY,
-    size: ButtonSizeEnum.SMALL,
-    "aria-label": languagePack.buttons_restart,
-    onClick: onRestart,
-    renderIcon: Restart,
-    type: "button"
-  }, languagePack.buttons_retry))));
-}
-
-const CatastrophicErrorExport = React.memo(CatastrophicError);
-
-export { CatastrophicErrorExport as CatastrophicError };

package/dist/es/chat/shared/components/Chat.js

@@ -1,244 +0,0 @@
-import React, { Component } from "react";
-
-import { injectIntl } from "react-intl";
-
-import { useSelector } from "react-redux";
-
-import MessagesComponent from "../containers/MessagesComponent.js";
-
-import "../utils/constants.js";
-
-import { doFocusRef, focusOnFirstFocusableItemInArrayOfElements } from "../utils/domUtils.js";
-
-import { createUnmappingMemoizer } from "../utils/memoizerUtils.js";
-
-import { consoleError, createDidCatchErrorData } from "../utils/miscUtils.js";
-
-import { CatastrophicError as CatastrophicErrorExport } from "./CatastrophicError.js";
-
-import { BotHeader as BotHeaderExport } from "./header/BotHeader.js";
-
-import { Input as InputExport } from "./input/Input.js";
-
-import { EndAgentChatModal } from "./modals/EndAgentChatModal.js";
-
-import { RequestScreenShareModal } from "./modals/RequestScreenShareModal.js";
-
-import WriteableElement from "./WriteableElement.js";
-
-import { OverlayPanelName } from "./OverlayPanel.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 Chat extends Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      showEndChatConfirmation: false,
-      hasCaughtError: false
-    };
-    this.inputRef = React.createRef();
-    this.headerRef = React.createRef();
-    this.messagesRef = React.createRef();
-    this.messagesToArray = createUnmappingMemoizer();
-    this.hideConfirmEndChat = () => {
-      this.setState({
-        showEndChatConfirmation: false
-      });
-      setTimeout(() => {
-        this.requestInputFocus();
-      });
-    };
-    this.showConfirmEndChat = () => {
-      this.setState({
-        showEndChatConfirmation: true
-      });
-    };
-    this.confirmAgentEndChat = () => {
-      this.hideConfirmEndChat();
-      this.props.serviceManager.humanAgentService.endChat(true);
-    };
-    this.requestDefaultFocus = () => {
-      if (!this.headerRef?.current?.requestFocus()) {
-        doFocusRef(this.messagesRef.current?.scrollHandleRef);
-      }
-    };
-    this.requestInputFocus = () => {
-      const {agentDisplayState: agentDisplayState} = this.props;
-      try {
-        if (agentDisplayState.isConnectingOrConnected && agentDisplayState.disableInput) {
-          if (this.messagesRef.current.requestAgentBannerFocus()) {
-            return;
-          }
-        }
-        if (this.inputRef.current) {
-          if (this.props.inputState.fieldVisible && !this.shouldDisableInput()) {
-            this.inputRef.current.takeFocus();
-          } else {
-            const htmlElements = this.messagesRef.current.getLastOutputMessageElements();
-            if (!focusOnFirstFocusableItemInArrayOfElements(htmlElements)) {
-              this.requestDefaultFocus();
-            }
-          }
-        } else {
-          this.requestDefaultFocus();
-        }
-      } catch (error) {
-        consoleError("An error occurred in Chat.requestInputFocus", error);
-      }
-    };
-    this.doAutoScroll = options => {
-      this.messagesRef.current?.doAutoScroll(options);
-    };
-    this.getMessagesScrollBottom = () => this.messagesRef?.current?.getContainerScrollBottom();
-    this.onFilesSelectedForUpload = uploads => {
-      const isInputToAgent = this.props.agentDisplayState.isConnectingOrConnected;
-      if (isInputToAgent) {
-        this.props.serviceManager.humanAgentService.filesSelectedForUpload(uploads);
-        if (!this.props.inputState.allowMultipleFileUploads) {
-          this.requestInputFocus();
-        }
-      }
-    };
-  }
-  async scrollOnHydrationComplete() {
-    this.doAutoScroll();
-  }
-  componentDidMount() {
-    if (this.props.isHydrationAnimationComplete) {
-      setTimeout(() => {
-        this.scrollOnHydrationComplete();
-      });
-    }
-  }
-  componentDidUpdate(prevProps) {
-    const {isHydrationAnimationComplete: isHydrationAnimationComplete, agentState: agentState} = this.props;
-    if (isHydrationAnimationComplete && !prevProps.isHydrationAnimationComplete) {
-      setTimeout(() => {
-        this.scrollOnHydrationComplete();
-      });
-    }
-    const connectingChanged = agentState.isConnecting !== prevProps.agentState.isConnecting;
-    if (this.state.showEndChatConfirmation && connectingChanged) {
-      this.hideConfirmEndChat();
-    }
-  }
-  componentDidCatch(error, errorInfo) {
-    this.props.serviceManager.actions.errorOccurred(createDidCatchErrorData("Chat", error, errorInfo));
-    this.setState({
-      hasCaughtError: true
-    });
-  }
-  doScrollToMessage(messageID, animate = true) {
-    this.messagesRef.current?.doScrollToMessage(messageID, animate);
-  }
-  getMessageInput() {
-    return this.inputRef.current?.getMessageInput();
-  }
-  shouldDisableInput() {
-    return this.props.inputState.isReadonly || this.props.agentDisplayState.disableInput;
-  }
-  shouldDisableSend() {
-    const {isHydrated: isHydrated} = this.props;
-    return this.shouldDisableInput() || !isHydrated;
-  }
-  renderMessagesAndInput() {
-    const {languagePack: languagePack, messageState: messageState, intl: intl, allMessageItemsByID: allMessageItemsByID, isHydrated: isHydrated, serviceManager: serviceManager, inputState: inputState, onUserTyping: onUserTyping, agentState: agentState, botName: botName, onSendInput: onSendInput, locale: locale, useAITheme: useAITheme, carbonTheme: carbonTheme, agentDisplayState: agentDisplayState} = this.props;
-    const {fieldVisible: fieldVisible, files: files, allowFileUploads: allowFileUploads, allowedFileUploadTypes: allowedFileUploadTypes, allowMultipleFileUploads: allowMultipleFileUploads, stopStreamingButtonState: stopStreamingButtonState} = inputState;
-    const {fileUploadInProgress: fileUploadInProgress} = agentState;
-    const {inputPlaceholderKey: inputPlaceholderKey} = agentDisplayState;
-    const numFiles = files?.length ?? 0;
-    const anyCurrentFiles = numFiles > 0 || fileUploadInProgress;
-    const showUploadButtonDisabled = anyCurrentFiles && !allowMultipleFileUploads;
-    return React.createElement(React.Fragment, null, isHydrated && React.createElement("div", {
-      className: "WACMessagesContainer__NonInputContainer"
-    }, React.createElement(MessagesComponent, {
-      ref: this.messagesRef,
-      messageState: messageState,
-      localMessageItems: this.messagesToArray(messageState.localMessageIDs, allMessageItemsByID),
-      requestInputFocus: this.requestInputFocus,
-      botName: botName,
-      intl: intl,
-      onEndAgentChat: this.showConfirmEndChat,
-      locale: locale,
-      useAITheme: useAITheme,
-      carbonTheme: carbonTheme
-    })), React.createElement(WriteableElement, {
-      slotName: WriteableElementName.BEFORE_INPUT_ELEMENT,
-      id: `beforeInputElement${serviceManager.namespace.suffix}`
-    }), React.createElement(InputExport, {
-      ref: this.inputRef,
-      languagePack: languagePack,
-      serviceManager: serviceManager,
-      disableInput: this.shouldDisableInput(),
-      disableSend: this.shouldDisableSend(),
-      isInputVisible: fieldVisible,
-      onSendInput: onSendInput,
-      onUserTyping: onUserTyping,
-      showUploadButton: allowFileUploads,
-      disableUploadButton: showUploadButtonDisabled,
-      allowedFileUploadTypes: allowedFileUploadTypes,
-      allowMultipleFileUploads: allowMultipleFileUploads,
-      pendingUploads: files,
-      onFilesSelectedForUpload: this.onFilesSelectedForUpload,
-      placeholder: languagePack[inputPlaceholderKey],
-      isStopStreamingButtonVisible: stopStreamingButtonState.isVisible,
-      isStopStreamingButtonDisabled: stopStreamingButtonState.isDisabled,
-      testIdPrefix: OverlayPanelName.MAIN
-    }), this.state.showEndChatConfirmation && React.createElement(EndAgentChatModal, {
-      onConfirm: this.confirmAgentEndChat,
-      onCancel: this.hideConfirmEndChat
-    }), this.props.agentState.showScreenShareRequest && React.createElement(RequestScreenShareModal, null));
-  }
-  render() {
-    const {languagePack: languagePack, onClose: onClose, onCloseAndRestart: onCloseAndRestart, onRestart: onRestart, onToggleHomeScreen: onToggleHomeScreen, botName: botName, headerDisplayName: headerDisplayName, headerAvatarConfig: headerAvatarConfig} = this.props;
-    const {hasCaughtError: hasCaughtError} = this.state;
-    const className = "WAC";
-    return React.createElement("div", {
-      className: className
-    }, React.createElement(BotHeaderExport, {
-      ref: this.headerRef,
-      onClose: onClose,
-      onCloseAndRestart: onCloseAndRestart,
-      onRestart: onRestart,
-      headerDisplayName: headerDisplayName,
-      headerAvatarConfig: headerAvatarConfig,
-      onToggleHomeScreen: onToggleHomeScreen,
-      enableChatHeaderConfig: true,
-      includeWriteableElement: true,
-      testIdPrefix: OverlayPanelName.MAIN
-    }), React.createElement(NonHeaderBackground, null), React.createElement("div", {
-      className: "WACPanelContent WAC__ChatNonHeaderContainer"
-    }, hasCaughtError && React.createElement("div", {
-      className: "WAC__MessagesErrorHandler"
-    }, React.createElement(CatastrophicErrorExport, {
-      languagePack: languagePack,
-      onRestart: onRestart,
-      showHeader: false,
-      botName: botName,
-      headerDisplayName: headerDisplayName
-    })), !hasCaughtError && React.createElement("div", {
-      className: "WAC__messagesAndInputContainer"
-    }, this.renderMessagesAndInput())));
-  }
-}
-
-function NonHeaderBackground() {
-  const isVisible = useSelector(state => state.showNonHeaderBackgroundCover);
-  return isVisible ? React.createElement("div", {
-    className: "WACBackgroundCover WACBackgroundCover__NonHeader"
-  }) : null;
-}
-
-var Chat$1 = injectIntl(Chat, {
-  forwardRef: true
-});
-
-export { Chat as ChatClass, Chat$1 as default };