@carbon/ai-chat 0.3.3 → 0.4.0-alpha.2

package/README.md

@@ -30,10 +30,8 @@ yarn add @carbon/ai-chat
 
 This will install the package that contains both the web component and React versions of the chat application.
 
-
 ## Documentation
 
 - [See our documentation site](https://web-chat.global.assistant.watson.cloud.ibm.com/carbon-chat.html).
 - [See examples in React](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/examples/react).
 - [See examples as a web component](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/examples/web-components).
-

package/dist/es/aiChatEntry.js

@@ -1,197 +1,27 @@
-/**
-* @license
-* 
-* (C) Copyright IBM Corp. 2017, 2025. All Rights Reserved.
-* 
-* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
-* in compliance with the License. You may obtain a copy of the License at
-* 
-* http://www.apache.org/licenses/LICENSE-2.0
-* 
-* Unless required by applicable law or agreed to in writing, software distributed under the License
-* is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
-* or implied. See the License for the specific language governing permissions and limitations under
-* the License.
-* 
-* @carbon/ai-chat 0.3.3
-* 
-* Built: Jul 11 2025 1:09 pm -04:00
-* 
-* 
-*/
+export { OverlayPanelName } from "./chat/shared/components/OverlayPanel.js";
 
-import { _ as __decorate, o, c as carbonElement, u as useOnMount } from './customElement.js';
-export { A as AgentMessageType, a as AgentsOnlineStatus, B as BusEventType, d as ButtonItemKind, b as ButtonItemType, C as CarbonTheme, e as CatastrophicErrorType, f as ChainOfThoughtStepStatus, q as ChatHeaderObjectType, g as CornersType, h as CustomEventType, E as ErrorType, F as FeedbackInteractionType, i as FileStatusValue, H as HomeScreenBackgroundType, I as IFrameItemDisplayOption, L as LauncherType, M as MessageInputType, j as MessageResponseTypes, k as MessageSendSource, l as MinimizeButtonIconType, O as OnErrorType, m as OptionItemPreference, S as ScreenShareState, T as TourEndReason, n as TourStartReason, V as ViewChangeReason, p as ViewType, r as WidthOptions, W as WriteableElementName } from './customElement.js';
-import { LitElement, css } from 'lit';
-import React__default, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { createPortal } from 'react-dom';
+export { FileStatusValue, LauncherType, ViewType } from "./types/instance/apiTypes.js";
 
-/**
- * This component creates a custom element protected by a ShadowRoot to render the React application into. It creates
- * slotted elements for user_defined responses and for writable elements.
- *
- * The corresponding slots are defined within the React application and are rendered in place.
- */
-/**
- * Create a web component to host the React application. We do this so we can provide custom elements and user_defined responses as
- * slotted content so they maintain their own styling in a safe way.
- */
-let ChatContainerReact = class ChatContainerReact extends LitElement {
-    static { this.styles = css `
-    :host {
-      width: 100%;
-      height: 100%;
-    }
-  `; }
-};
-ChatContainerReact = __decorate([
-    carbonElement('cds-aichat-react')
-], ChatContainerReact);
-// Wrap the custom element as a React component
-const ReactChatContainer = React__default.memo(o({
-    tagName: 'cds-aichat-react',
-    elementClass: ChatContainerReact,
-    react: React__default,
-}));
-/**
- * The ChatContainer controls rendering the React application into the ShadowRoot of the cds-aichat-react web component.
- * It also injects the writeable element and user_defined response slots into said web component.
- */
-function ChatContainer({ onBeforeRender, onAfterRender, config, renderUserDefinedResponse, renderWriteableElements, }) {
-    const wrapperRef = useRef(null); // Ref for the React wrapper component
-    const [wrapper, setWrapper] = useState(null);
-    const [container, setContainer] = useState(null); // Actual element we render the React Portal to in the Shadowroot.
-    const [AppContainerComponent, setAppContainerComponent] = useState(null);
-    const [userDefinedElements, setUserDefinedElements] = useState([]);
-    const [writeableElementSlots, setWriteableElementSlots] = useState([]);
-    const [currentInstance, setCurrentInstance] = useState(null);
-    /**
-     * If window is not defined, we don't load in the chat since it isn't SSR friendly.
-     */
-    useOnMount(() => {
-        if (typeof window === 'undefined' || typeof document === 'undefined') {
-            return;
-        }
-        import('./AppContainer.js').then(function (n) { return n.ao; }).then(appContainer => {
-            setAppContainerComponent(() => appContainer.AppContainer);
-        });
-    });
-    /**
-     * Setup the DOM nodes of both the web component to be able to inject slotted content into it, and the element inside the
-     * ShadowRoot we will inject our React application into.
-     */
-    useEffect(() => {
-        if (wrapperRef.current) {
-            const wrapperElement = wrapperRef.current;
-            // We need to check if the element in the ShadowRoot we are render the React application to exists.
-            // If it doesn't, we need to create and append it.
-            // When the web chat is destroyed (either via a config change or by calling instance.destroy), this element is
-            // removed again. When the chat is destroyed the instance is set to null. The useEffect watches the instance
-            // value and runs if it changes, re-creating the container element if needed.
-            let reactElement = wrapperElement.shadowRoot?.querySelector('.cds--aichat-react-app');
-            if (!reactElement) {
-                reactElement = document.createElement('div');
-                reactElement.classList.add('cds--aichat-react-app');
-                wrapperElement.shadowRoot.appendChild(reactElement);
-            }
-            if (wrapperElement !== wrapper) {
-                setWrapper(wrapperElement);
-            }
-            if (reactElement !== container) {
-                setContainer(reactElement);
-            }
-        }
-    }, [container, wrapper, currentInstance]);
-    /**
-     * Here we write the slotted elements into the wrapper so they are passed into the application to be rendered in their slot.
-     */
-    useEffect(() => {
-        if (wrapper) {
-            const combinedNodes = [...userDefinedElements, ...writeableElementSlots];
-            const currentNodes = Array.from(wrapper.childNodes);
-            const newNodesSet = new Set(combinedNodes);
-            // Remove nodes no longer present
-            currentNodes.forEach(node => {
-                if (!newNodesSet.has(node)) {
-                    wrapper.removeChild(node);
-                }
-            });
-            // Append new nodes that aren't already in the container
-            combinedNodes.forEach(node => {
-                if (!currentNodes.includes(node)) {
-                    wrapper.appendChild(node);
-                }
-            });
-        }
-    }, [userDefinedElements, writeableElementSlots, wrapper]);
-    const userDefinedHandler = useCallback((event) => {
-        const { element } = event.data;
-        setUserDefinedElements(previousUserDefinedElements => [...previousUserDefinedElements, element]);
-    }, []);
-    const onBeforeRenderOverride = useCallback((instance) => {
-        if (instance) {
-            const addWriteableElementSlots = () => {
-                const slots = Object.entries(instance.writeableElements).map(writeableElement => {
-                    const [key, element] = writeableElement;
-                    element.setAttribute('slot', key); // Assign slot attributes dynamically
-                    return element;
-                });
-                setWriteableElementSlots(slots);
-            };
-            instance.on({ type: "userDefinedResponse" /* BusEventType.USER_DEFINED_RESPONSE */, handler: userDefinedHandler });
-            instance.on({ type: "chunk:userDefinedResponse" /* BusEventType.CHUNK_USER_DEFINED_RESPONSE */, handler: userDefinedHandler });
-            addWriteableElementSlots();
-            onBeforeRender?.(instance);
-        }
-    }, [onBeforeRender, userDefinedHandler]);
-    // If we are in SSR mode, just short circuit here. This prevents all of our window.* and document.* stuff from trying
-    // to run and erroring out.
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return React__default.createElement(React__default.Fragment, null);
-    }
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(ReactChatContainer, { ref: wrapperRef }),
-        container &&
-            AppContainerComponent &&
-            createPortal(React__default.createElement(AppContainerComponent, { config: config, renderUserDefinedResponse: renderUserDefinedResponse, renderWriteableElements: renderWriteableElements, onBeforeRender: onBeforeRenderOverride, onAfterRender: onAfterRender, container: container, setParentInstance: setCurrentInstance }), container)));
-}
-const ChatContainerExport = React__default.memo(ChatContainer);
+export { ChatHeaderObjectType } from "./types/config/ChatHeaderConfig.js";
 
-function ChatCustomElement({ config, onBeforeRender, onAfterRender, renderUserDefinedResponse, renderWriteableElements, className, id, onViewChange, }) {
-    const [customElement, setCustomElement] = useState();
-    const originalStyles = useRef({ width: undefined, height: undefined });
-    // Make sure to memoize the config object. If we pass a new object to WebChatContainer (even if all the properties
-    // inside of it are the same), the container will just continually destroy and recreate the web chat instance
-    // because it thinks the config keeps changing.
-    const useConfig = useMemo(() => {
-        return {
-            ...config,
-            element: customElement,
-        };
-    }, [config, customElement]);
-    const onBeforeRenderOverride = useCallback(async (instance) => {
-        /**
-         * A default handler for the "view:change" event. This will be used to show or hide the web chat main window
-         * using a simple classname.
-         */
-        function defaultViewChangeHandler(event, instance) {
-            if (event.newViewState.mainWindow) {
-                customElement.style.width = originalStyles.current.width;
-                customElement.style.height = originalStyles.current.height;
-                instance.elements.getMainWindow().removeClassName('HideWebChat');
-            }
-            else {
-                originalStyles.current = { width: customElement.style.width, height: customElement.style.height };
-                customElement.style.width = '0px';
-                customElement.style.height = '0px';
-                instance.elements.getMainWindow().addClassName('HideWebChat');
-            }
-        }
-        instance.on({ type: "view:change" /* BusEventType.VIEW_CHANGE */, handler: onViewChange || defaultViewChangeHandler });
-        return onBeforeRender?.(instance);
-    }, [onBeforeRender, onViewChange, customElement]);
-    return (React__default.createElement("div", { className: className, id: id, ref: setCustomElement }, customElement && (React__default.createElement(ChatContainerExport, { config: useConfig, onBeforeRender: onBeforeRenderOverride, onAfterRender: onAfterRender, renderUserDefinedResponse: renderUserDefinedResponse, renderWriteableElements: renderWriteableElements }))));
-}
-const ChatCustomElementExport = React__default.memo(ChatCustomElement);
+export { CSSVariable, WriteableElementName } from "./types/instance/ChatInstance.js";
 
-export { ChatContainerExport as ChatContainer, ChatCustomElementExport as ChatCustomElement };
+export { CornersType } from "./types/config/CornersType.js";
+
+export { BusEventType, FeedbackInteractionType, MessageSendSource, TourEndReason, TourStartReason, ViewChangeReason } from "./types/events/eventBusTypes.js";
+
+export { HomeScreenBackgroundType } from "./types/config/HomeScreenConfig.js";
+
+export { CarbonTheme, MinimizeButtonIconType, OnErrorType } from "./types/config/PublicConfig.js";
+
+export { AgentsOnlineStatus, ErrorType, ScreenShareState } from "./types/config/ServiceDeskConfig.js";
+
+export { AgentMessageType, ButtonItemKind, ButtonItemType, ChainOfThoughtStepStatus, IFrameItemDisplayOption, MessageInputType, MessageResponseTypes, OptionItemPreference, WidthOptions } from "./types/messaging/Messages.js";
+
+export { MessageErrorState } from "./types/messaging/LocalMessageItem.js";
+
+export { ChatContainer } from "./react/ChatContainer.js";
+
+export { ChatCustomElement } from "./react/ChatCustomElement.js";
+
+export { PageObjectId, makeTestId } from "./chat/shared/utils/PageObjectId.js";

package/dist/es/chat/dynamic-imports/dynamic-imports.js

@@ -0,0 +1,84 @@
+import React from "react";
+
+/*
+ *  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
+ */ async function loadHAA() {
+  const {createService: createService} = await DYNAMIC_IMPORTS.HumanAgentService();
+  return createService;
+}
+
+function lazyWithPreload(factory) {
+  const Component = React.lazy(factory);
+  Component.preload = factory;
+  return Component;
+}
+
+const DYNAMIC_IMPORTS = {
+  Chat: () => import("../shared/components/Chat.js"),
+  CatastrophicError: () => import("../shared/components/CatastrophicError.js"),
+  Disclaimer: () => import("../shared/components/Disclaimer.js"),
+  HomeScreenContainer: () => import("../shared/components/homeScreen/HomeScreenContainer.js"),
+  IFramePanel: () => import("../shared/components/responseTypes/iframe/IFramePanel.js"),
+  ViewSourcePanel: () => import("../shared/components/responseTypes/util/citations/ViewSourcePanel.js"),
+  BodyAndFooterPanelComponent: () => import("../shared/components/panels/BodyAndFooterPanelComponent.js"),
+  TourContainer: () => import("../shared/components/tour/TourContainer.js"),
+  Carousel: () => import("../shared/components/responseTypes/carousel/Carousel.js"),
+  MediaPlayer: () => import("react-player/lazy/index.js").then(mod => {
+    let exported = mod.default ?? mod;
+    if (exported && typeof exported === "object" && "default" in exported) {
+      exported = exported.default;
+    }
+    return {
+      default: exported
+    };
+  }),
+  AppContainer: () => import("../react/components/AppContainer.js"),
+  HumanAgentService: () => import("../shared/services/haa/HumanAgentServiceImpl.js")
+};
+
+function lazyChat() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.Chat);
+}
+
+function lazyCatastrophicError() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.CatastrophicError);
+}
+
+function lazyDisclaimer() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.Disclaimer);
+}
+
+function lazyHomeScreenContainer() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.HomeScreenContainer);
+}
+
+function lazyIFramePanel() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.IFramePanel);
+}
+
+function lazyViewSourcePanel() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.ViewSourcePanel);
+}
+
+function lazyBodyAndFooterPanelComponent() {
+  return lazyWithPreload(DYNAMIC_IMPORTS.BodyAndFooterPanelComponent);
+}
+
+function lazyTourComponent() {
+  return React.lazy(DYNAMIC_IMPORTS.TourContainer);
+}
+
+function lazyMediaPlayer() {
+  return React.lazy(DYNAMIC_IMPORTS.MediaPlayer);
+}
+
+function lazyCarousel() {
+  return React.lazy(DYNAMIC_IMPORTS.Carousel);
+}
+
+export { DYNAMIC_IMPORTS, lazyBodyAndFooterPanelComponent, lazyCarousel, lazyCatastrophicError, lazyChat, lazyDisclaimer, lazyHomeScreenContainer, lazyIFramePanel, lazyMediaPlayer, lazyTourComponent, lazyViewSourcePanel, loadHAA };