@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/webchat/webchat.js

@@ -0,0 +1,729 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BotonicAction, INPUT, params2queryString } from "@botonic/core";
+import lodash_merge from "lodash.merge";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { StyleSheetManager, ThemeProvider } from "styled-components";
+import { v7 } from "uuid";
+import { Audio, Document, Handoff, Image, Text, Video, normalizeWebchatSettings } from "../components/index.js";
+import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from "../constants.js";
+import { SENDERS } from "../index-types.js";
+import { getMediaType, isAllowedSize, isAudio, isDocument, isImage, isMedia, isText, isVideo, readDataURL } from "../message-utils.js";
+import { msgToBotonic } from "../msg-to-botonic.js";
+import { isDev } from "../util/environment.js";
+import { deserializeRegex, stringifyWithRegexs } from "../util/regexs.js";
+import { _getThemeProperty, getServerErrorMessage, initSession, shouldKeepSessionOnReload, updateUserLocaleAndCountry } from "../util/webchat.js";
+import { ChatArea } from "./chat-area/index.js";
+import { OpenedPersistentMenu } from "./components/opened-persistent-menu.js";
+import { BotonicContainerId } from "./constants.js";
+import { WebchatContext, useWebchat } from "./context/index.js";
+import { CoverComponent } from "./cover-component/index.js";
+import { WebchatHeader } from "./header/index.js";
+import { useComponentWillMount, usePrevious, useScrollToBottom, useTyping } from "./hooks/index.js";
+import { InputPanel } from "./input-panel/index.js";
+import { DarkBackgroundMenu, ErrorMessage, ErrorMessageContainer, StyledWebchat } from "./styles.js";
+import { TriggerButton } from "./trigger-button/index.js";
+import { useStorageState } from "./use-storage-state-hook.js";
+import { getParsedAction } from "./utils.js";
+import { WebviewContainer } from "./webview/index.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* eslint-disable @typescript-eslint/no-use-before-define */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Webchat = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { addMessage, addMessageComponent, clearMessages, doRenderCustomComponent, resetUnreadMessages, setCurrentAttachment, setError, setIsInputFocused, setLastMessageVisible, setOnline, toggleCoverComponent, toggleEmojiPicker, togglePersistentMenu, toggleWebchat, updateCustomMessageProps, updateDevSettings, updateHandoff, updateLastMessageDate, updateLastRoutePath, updateLatestInput, updateMessage, updateReplies, updateSession, updateTheme, updateTyping, updateWebview, removeWebview, removeReplies, webchatState, webchatContainerRef, chatAreaRef, inputPanelRef, headerRef, repliesRef, scrollableMessagesListRef } = props.webchatHooks || useWebchat(props.theme);
+    const contentsByLocale = props.contentsByLocale;
+    const firstUpdate = useRef(true);
+    const isOnline = ()=>webchatState.online;
+    const currentDateString = ()=>new Date().toISOString();
+    const theme = lodash_merge(webchatState.theme, props.theme);
+    const { initialSession, initialDevSettings, onStateChange } = props;
+    const getThemeProperty = _getThemeProperty(theme);
+    const [customComponent, setCustomComponent] = useState(null);
+    const storage = props.storage;
+    const storageKey = typeof props.storageKey === 'function' ? props.storageKey() : props.storageKey;
+    const [botonicState, saveState] = useStorageState(storage, storageKey);
+    const host = props.host || document.body;
+    const { scrollToBottom } = useScrollToBottom({
+        host
+    });
+    const saveWebchatState = (webchatState)=>{
+        storage && saveState(JSON.parse(stringifyWithRegexs({
+            messages: webchatState.messagesJSON,
+            session: webchatState.session,
+            lastRoutePath: webchatState.lastRoutePath,
+            devSettings: webchatState.devSettings,
+            lastMessageUpdate: webchatState.lastMessageUpdate,
+            themeUpdates: webchatState.themeUpdates
+        })));
+    };
+    const handleAttachment = (event)=>{
+        if (!isAllowedSize(event.target.files[0].size)) {
+            throw new Error(`The file is too large. A maximum of ${MAX_ALLOWED_SIZE_MB}MB is allowed.`);
+        }
+        // TODO: Attach more files?
+        setCurrentAttachment(event.target.files[0]);
+    };
+    useEffect(()=>{
+        if (webchatState.currentAttachment) {
+            sendAttachment(webchatState.currentAttachment);
+        }
+    }, [
+        webchatState.currentAttachment
+    ]);
+    const sendUserInput = async (input)=>{
+        if (props.onUserInput) {
+            resetUnreadMessages();
+            scrollToBottom();
+            props.onUserInput({
+                user: webchatState.session.user,
+                // TODO: Review if this input.sentBy exists in the frontend
+                input: input,
+                //@ts-expect-error
+                session: webchatState.session,
+                // TODO: Review why we were passing lastRoutePath, is only for devMode?
+                lastRoutePath: webchatState.lastRoutePath
+            });
+        }
+    };
+    // Load styles stored in window._botonicInsertStyles by Webpack
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: this is a complex useEffect that needs to be refactored, but it's not a problem for now
+    useComponentWillMount(()=>{
+        if (window._botonicInsertStyles?.length) {
+            for (const botonicStyle of window._botonicInsertStyles){
+                // Injecting styles at head is needed even if we use shadowDOM
+                // as some dependencies like simplebar rely on creating ephemeral elements
+                // on document.body and assume styles will be available globally
+                document.head.appendChild(botonicStyle);
+                // injecting styles in host node too so that shadowDOM works
+                if (props.shadowDOM) {
+                    host.appendChild(botonicStyle.cloneNode(true));
+                }
+            }
+            delete window._botonicInsertStyles;
+        }
+        if (props.shadowDOM) {
+            // emoji-picker-react injects styles in head, so we need to
+            // re-inject them in our host node to make it work with shadowDOM
+            for (const style of document.querySelectorAll('style')){
+                if (style.textContent?.includes('emoji-picker-react')) {
+                    host.appendChild(style.cloneNode(true));
+                }
+            }
+        }
+    });
+    // Load initial state from storage
+    useEffect(()=>{
+        let { messages, session, lastRoutePath, devSettings, lastMessageUpdate, themeUpdates } = botonicState || {};
+        session = initSession(session);
+        updateSession(session);
+        if (shouldKeepSessionOnReload({
+            initialDevSettings,
+            devSettings
+        })) {
+            if (messages) {
+                messages.forEach((message)=>{
+                    addMessage(message);
+                    const newMessageComponent = msgToBotonic({
+                        ...message,
+                        delay: 0,
+                        typing: 0
+                    }, props.theme?.message?.customTypes);
+                    if (newMessageComponent) {
+                        addMessageComponent(newMessageComponent);
+                    }
+                });
+            }
+            if (initialSession) {
+                updateSession(lodash_merge(initialSession, session));
+            }
+            if (lastRoutePath) {
+                updateLastRoutePath(lastRoutePath);
+            }
+        } else {
+            updateSession(lodash_merge(initialSession, session));
+        }
+        if (devSettings) {
+            updateDevSettings(devSettings);
+        } else if (initialDevSettings) {
+            updateDevSettings(initialDevSettings);
+        }
+        if (lastMessageUpdate) {
+            updateLastMessageDate(lastMessageUpdate);
+        }
+        if (themeUpdates !== undefined) {
+            updateTheme(lodash_merge(props.theme, themeUpdates), themeUpdates);
+        }
+        if (props.onInit) {
+            setTimeout(()=>{
+                if (typeof props.onInit === 'function') {
+                    props.onInit();
+                    session.user = updateUserLocaleAndCountry(session.user);
+                }
+            }, 100);
+        }
+    }, []);
+    useEffect(()=>{
+        if (!webchatState.isWebchatOpen) {
+            if (webchatState.isLastMessageVisible) {
+                resetUnreadMessages();
+            }
+            return;
+        }
+    }, [
+        webchatState.isWebchatOpen
+    ]);
+    useEffect(()=>{
+        const { messagesJSON, session } = webchatState;
+        if (onStateChange && typeof onStateChange === 'function' && session.user) {
+            onStateChange({
+                messagesJSON,
+                user: session.user
+            });
+        }
+        saveWebchatState(webchatState);
+    }, [
+        webchatState.messagesJSON,
+        webchatState.session,
+        webchatState.lastRoutePath,
+        webchatState.devSettings,
+        webchatState.lastMessageUpdate
+    ]);
+    useEffect(()=>{
+        if (!webchatState.online) {
+            setError({
+                message: getServerErrorMessage(props.server)
+            });
+        } else {
+            if (!firstUpdate.current) {
+                setError(undefined);
+            }
+        }
+    }, [
+        webchatState.online
+    ]);
+    useTyping({
+        webchatState,
+        updateTyping,
+        updateMessage,
+        host
+    });
+    useEffect(()=>{
+        updateTheme(lodash_merge(props.theme, theme, webchatState.themeUpdates));
+    }, [
+        props.theme,
+        webchatState.themeUpdates
+    ]);
+    const openWebview = (webviewComponent, params)=>{
+        updateWebview(webviewComponent, params);
+    };
+    const textareaRef = useRef();
+    const closeWebview = async (options)=>{
+        removeWebview();
+        if (userInputEnabled) {
+            textareaRef.current?.focus();
+        }
+        if (options?.payload) {
+            await sendPayload(options.payload);
+        } else if (options?.path) {
+            const params = options.params ? params2queryString(options.params) : '';
+            await sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
+        }
+    };
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu);
+    const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu);
+    const getBlockInputs = (rule, inputData)=>{
+        const processedInput = rule.preprocess ? rule.preprocess(inputData) : inputData;
+        return rule.match.some((regex)=>{
+            if (typeof regex === 'string') {
+                regex = deserializeRegex(regex);
+            }
+            return regex.test(processedInput);
+        });
+    };
+    const checkBlockInput = (input)=>{
+        // if is a text we check if it is a serialized RE
+        const blockInputs = webchatState.theme.userInput?.blockInputs;
+        if (!Array.isArray(blockInputs)) {
+            return false;
+        }
+        for (const rule of blockInputs){
+            if (getBlockInputs(rule, input.data)) {
+                addMessageComponent(/*#__PURE__*/ jsx(Text, {
+                    // Is necessary to add the id of the input
+                    // to keep the input.id generated in the frontend as id of the message
+                    // @ts-expect-error input.id is not typed
+                    id: input.id,
+                    sentBy: SENDERS.user,
+                    blob: false,
+                    style: {
+                        backgroundColor: COLORS.SCORPION_GRAY,
+                        borderColor: COLORS.SCORPION_GRAY,
+                        padding: '8px 12px'
+                    },
+                    children: rule.message
+                }));
+                removeReplies();
+                return true;
+            }
+        }
+        return false;
+    };
+    const closeMenu = ()=>{
+        togglePersistentMenu(false);
+    };
+    const persistentMenu = ()=>{
+        return /*#__PURE__*/ jsx(OpenedPersistentMenu, {
+            onClick: closeMenu,
+            options: persistentMenuOptions,
+            borderRadius: webchatState.theme.style.borderRadius || '10px'
+        });
+    };
+    const coverComponent = webchatState.theme.coverComponent;
+    const coverComponentProps = webchatState.theme.coverComponent?.props;
+    useEffect(()=>{
+        if (!coverComponent) {
+            return;
+        }
+        if (!botonicState || botonicState.messages && botonicState.messages.length === 0) {
+            toggleCoverComponent(true);
+        }
+    }, []);
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: messageComponentFromInput is a complex
+    const messageComponentFromInput = (input)=>{
+        let messageComponent = null;
+        if (isText(input)) {
+            messageComponent = /*#__PURE__*/ jsx(Text, {
+                // Is necessary to add the id of the input
+                // to keep the input.id generated in the frontend as id of the message
+                // @ts-expect-error input.id is not typed
+                id: input.id,
+                // Is necessary to add the payload of the input when user clicks a button
+                payload: input.payload,
+                sentBy: SENDERS.user,
+                children: input.data
+            });
+        } else if (isMedia(input)) {
+            const temporaryDisplayUrl = URL.createObjectURL(input.data);
+            // TODO: We should use URL.revokeObjectURL(temporaryDisplayUrl) when the component is unmounted
+            // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static#memory_management
+            const mediaProps = {
+                id: input.id,
+                sentBy: SENDERS.user,
+                src: temporaryDisplayUrl
+            };
+            if (isImage(input)) {
+                mediaProps.input = input;
+                messageComponent = /*#__PURE__*/ jsx(Image, {
+                    ...mediaProps
+                });
+            } else if (isAudio(input)) {
+                messageComponent = /*#__PURE__*/ jsx(Audio, {
+                    ...mediaProps
+                });
+            } else if (isVideo(input)) {
+                messageComponent = /*#__PURE__*/ jsx(Video, {
+                    ...mediaProps
+                });
+            } else if (isDocument(input)) {
+                messageComponent = /*#__PURE__*/ jsx(Document, {
+                    ...mediaProps
+                });
+            }
+        }
+        return messageComponent;
+    };
+    const sendInput = async (input)=>{
+        if (!input || Object.keys(input).length === 0) {
+            return;
+        }
+        if (isText(input) && (!input.data || !input.data.trim())) {
+            return; // in case trim() doesn't work in a browser we can use !/\S/.test(input.data)
+        }
+        if (isText(input) && checkBlockInput(input)) {
+            return;
+        }
+        if (!input.id) {
+            input.id = v7();
+        }
+        const messageComponent = messageComponentFromInput(input);
+        if (messageComponent) {
+            addMessageComponent(messageComponent);
+        }
+        if (isMedia(input)) {
+            input.data = await readDataURL(input.data);
+        }
+        sendUserInput(input);
+        updateLatestInput(input);
+        isOnline() && updateLastMessageDate(currentDateString());
+        removeReplies();
+        togglePersistentMenu(false);
+        toggleEmojiPicker(false);
+    };
+    /* This is the public API this component exposes to its parents
+  https://stackoverflow.com/questions/37949981/call-child-method-from-parent
+  */ const updateSessionWithUser = (userToUpdate)=>{
+        if (contentsByLocale && userToUpdate.system_locale) {
+            const placeholder = contentsByLocale[userToUpdate.system_locale]?.inputPlaceholder ?? WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER;
+            const themeUpdates = {
+                userInput: {
+                    box: {
+                        placeholder
+                    }
+                }
+            };
+            updateTheme(lodash_merge(props.theme, themeUpdates), themeUpdates);
+        }
+        updateSession(lodash_merge(webchatState.session, {
+            user: userToUpdate
+        }));
+    };
+    useImperativeHandle(ref, ()=>({
+            addBotResponse: ({ response, session, lastRoutePath })=>{
+                updateTyping(false);
+                const isUnread = !webchatState.isLastMessageVisible || webchatState.numUnreadMessages > 0;
+                if (Array.isArray(response)) {
+                    response.forEach((r)=>{
+                        addMessageComponent({
+                            ...r,
+                            props: {
+                                ...r.props,
+                                isUnread
+                            }
+                        });
+                    });
+                } else if (response) {
+                    addMessageComponent({
+                        ...response,
+                        props: {
+                            ...response.props,
+                            isUnread
+                        }
+                    });
+                }
+                if (session) {
+                    updateSession(lodash_merge(session, {
+                        user: webchatState.session.user
+                    }));
+                    const action = session._botonic_action || '';
+                    const handoff = action.startsWith(BotonicAction.CreateCase);
+                    if (handoff && isDev) {
+                        addMessageComponent(/*#__PURE__*/ jsx(Handoff, {}));
+                    }
+                    updateHandoff(handoff);
+                }
+                if (lastRoutePath) {
+                    updateLastRoutePath(lastRoutePath);
+                }
+                updateLastMessageDate(currentDateString());
+            },
+            addSystemResponse: ({ response })=>{
+                if (Array.isArray(response)) {
+                    response.forEach((r)=>{
+                        addMessageComponent({
+                            ...r,
+                            props: {
+                                ...r.props,
+                                isUnread: false
+                            }
+                        });
+                    });
+                } else if (response) {
+                    addMessageComponent({
+                        ...response,
+                        props: {
+                            ...response.props,
+                            isUnread: false
+                        }
+                    });
+                }
+                updateLastMessageDate(currentDateString());
+            },
+            setTyping: (typing)=>updateTyping(typing),
+            addUserMessage: (message)=>sendInput(message),
+            updateUser: updateSessionWithUser,
+            openWebchat: ()=>toggleWebchat(true),
+            closeWebchat: ()=>toggleWebchat(false),
+            toggleWebchat: ()=>toggleWebchat(!webchatState.isWebchatOpen),
+            openCoverComponent: ()=>toggleCoverComponent(true),
+            closeCoverComponent: ()=>toggleCoverComponent(false),
+            renderCustomComponent: (_customComponent)=>{
+                setCustomComponent(_customComponent);
+                doRenderCustomComponent(true);
+            },
+            unmountCustomComponent: ()=>doRenderCustomComponent(false),
+            toggleCoverComponent: ()=>toggleCoverComponent(!webchatState.isCoverComponentOpen),
+            setOnline,
+            getMessages: ()=>webchatState.messagesJSON,
+            isOnline,
+            clearMessages: ()=>{
+                clearMessages();
+                removeReplies();
+            },
+            getLastMessageUpdate: ()=>webchatState.lastMessageUpdate,
+            updateMessageInfo: (msgId, messageInfo)=>{
+                const messageToUpdate = webchatState.messagesJSON.filter((m)=>m.id === msgId)[0];
+                const updatedMsg = lodash_merge(messageToUpdate, messageInfo);
+                if (updatedMsg.ack === 1) {
+                    delete updatedMsg.unsentInput;
+                }
+                updateMessage(updatedMsg);
+            },
+            updateWebchatSettings: (settings)=>{
+                if (settings.user) {
+                    updateSessionWithUser(settings.user);
+                }
+                const themeUpdates = normalizeWebchatSettings(settings);
+                updateTheme(lodash_merge(webchatState.theme, themeUpdates), themeUpdates);
+                updateTyping(false);
+            },
+            closeWebview: async (options)=>closeWebview(options)
+        }));
+    const resolveCase = ()=>{
+        updateHandoff(false);
+        updateSession({
+            ...webchatState.session,
+            _botonic_action: undefined
+        });
+    };
+    const prevSession = usePrevious(webchatState.session);
+    useEffect(()=>{
+        // Resume conversation after handoff
+        if (prevSession?._botonic_action && !webchatState.session._botonic_action) {
+            const action = getParsedAction(prevSession._botonic_action);
+            if (action?.on_finish) {
+                sendPayload(action.on_finish);
+            }
+        }
+    }, [
+        webchatState.session._botonic_action
+    ]);
+    const sendText = async (text, payload)=>{
+        if (!text) {
+            return;
+        }
+        const input = {
+            type: INPUT.TEXT,
+            data: text,
+            payload
+        };
+        await sendInput(input);
+    };
+    const sendPayload = async (payload)=>{
+        if (!payload) {
+            return;
+        }
+        const input = {
+            type: INPUT.POSTBACK,
+            payload
+        };
+        await sendInput(input);
+    };
+    const sendAttachment = async (attachment)=>{
+        if (attachment) {
+            const attachmentType = getMediaType(attachment.type);
+            if (!attachmentType) {
+                return;
+            }
+            const input = {
+                type: attachmentType,
+                data: attachment
+            };
+            await sendInput(input);
+            setCurrentAttachment();
+        }
+    };
+    useEffect(()=>{
+        if (firstUpdate.current) {
+            firstUpdate.current = false;
+            return;
+        }
+        if (webchatState.isWebchatOpen && props.onOpen) {
+            props.onOpen();
+        }
+        if (!webchatState.isWebchatOpen && props.onClose && !firstUpdate.current) {
+            props.onClose();
+            toggleEmojiPicker(false);
+            togglePersistentMenu(false);
+        }
+    }, [
+        webchatState.isWebchatOpen
+    ]);
+    const isUserInputEnabled = ()=>{
+        const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput);
+        return isUserInputEnabled && !webchatState.isCoverComponentOpen;
+    };
+    const userInputEnabled = isUserInputEnabled();
+    useEffect(()=>{
+        // Prod mode
+        saveWebchatState(webchatState);
+    }, [
+        webchatState.themeUpdates
+    ]);
+    // Only needed for dev/serve mode
+    const updateWebchatDevSettings = (settings)=>{
+        useEffect(()=>{
+            const themeUpdates = normalizeWebchatSettings(settings);
+            updateTheme(lodash_merge(webchatState.theme, themeUpdates), themeUpdates);
+        }, [
+            webchatState.messagesJSON
+        ]);
+    };
+    const DarkenBackground = ({ component })=>{
+        return /*#__PURE__*/ jsxs("div", {
+            children: [
+                darkBackgroundMenu && /*#__PURE__*/ jsx(DarkBackgroundMenu, {
+                    style: {
+                        borderRadius: webchatState.theme.style.borderRadius
+                    }
+                }),
+                component
+            ]
+        });
+    };
+    const _renderCustomComponent = ()=>{
+        if (!customComponent) {
+            return /*#__PURE__*/ jsx(Fragment, {});
+        } else {
+            return customComponent;
+        }
+    };
+    const WebchatComponent = /*#__PURE__*/ jsx(WebchatContext.Provider, {
+        value: {
+            addMessage,
+            getThemeProperty,
+            closeWebview,
+            openWebview,
+            resolveCase,
+            resetUnreadMessages,
+            setIsInputFocused,
+            setLastMessageVisible,
+            sendAttachment,
+            sendInput,
+            sendPayload,
+            sendText,
+            toggleWebchat,
+            toggleEmojiPicker,
+            togglePersistentMenu,
+            toggleCoverComponent,
+            updateCustomMessageProps,
+            updateLatestInput,
+            updateMessage,
+            updateReplies,
+            updateUser: updateSessionWithUser,
+            updateWebchatDevSettings: updateWebchatDevSettings,
+            trackEvent: props.onTrackEvent,
+            previewUtils: props.previewUtils,
+            webchatState,
+            webchatContainerRef,
+            chatAreaRef,
+            inputPanelRef,
+            headerRef,
+            repliesRef,
+            scrollableMessagesListRef
+        },
+        children: /*#__PURE__*/ jsxs(ThemeProvider, {
+            theme: webchatState.theme,
+            children: [
+                !webchatState.isWebchatOpen && /*#__PURE__*/ jsx(TriggerButton, {}),
+                webchatState.isWebchatOpen && /*#__PURE__*/ jsxs(StyledWebchat, {
+                    id: BotonicContainerId.Webchat,
+                    ref: webchatContainerRef,
+                    // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+                    role: ROLES.WEBCHAT,
+                    children: [
+                        /*#__PURE__*/ jsx(WebchatHeader, {
+                            ref: headerRef
+                        }),
+                        webchatState.isCoverComponentOpen ? /*#__PURE__*/ jsx(CoverComponent, {
+                            component: coverComponent,
+                            componentProps: coverComponentProps
+                        }) : /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                webchatState.error.message && /*#__PURE__*/ jsx(ErrorMessageContainer, {
+                                    children: /*#__PURE__*/ jsx(ErrorMessage, {
+                                        children: webchatState.error.message
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(ChatArea, {}),
+                                webchatState.isPersistentMenuOpen && /*#__PURE__*/ jsx(DarkenBackground, {
+                                    component: persistentMenu()
+                                }),
+                                !webchatState.handoff && userInputEnabled && /*#__PURE__*/ jsx(InputPanel, {
+                                    handleAttachment: handleAttachment,
+                                    textareaRef: textareaRef,
+                                    host: host,
+                                    onUserInput: props.onUserInput
+                                }),
+                                webchatState.webview && /*#__PURE__*/ jsx(WebviewContainer, {
+                                    localWebviews: props.localWebviews
+                                }),
+                                webchatState.isCustomComponentRendered && customComponent && _renderCustomComponent()
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+    return props.shadowDOM ? /*#__PURE__*/ jsx(StyleSheetManager, {
+        target: host,
+        children: WebchatComponent
+    }) : WebchatComponent;
+});
+Webchat.displayName = 'Webchat';
+
+
+export { Webchat };
+
+//# sourceMappingURL=webchat.js.map