@botonic/react 0.24.2 → 0.25.0-alpha.0

package/lib/esm/src/webchat/webchat.js

@@ -0,0 +1,660 @@
+import { INPUT, isMobile, params2queryString } from '@botonic/core';
+import merge from 'lodash.merge';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import Textarea from 'react-textarea-autosize';
+import styled, { StyleSheetManager } from 'styled-components';
+import { useAsyncEffect } from 'use-async-effect';
+import { v4 as uuidv4 } from 'uuid';
+import { Audio, Document, Image, Text, Video } from '../components';
+import { Handoff } from '../components/handoff';
+import { normalizeWebchatSettings } from '../components/webchat-settings';
+import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants';
+import { RequestContext, WebchatContext } from '../contexts';
+import { SENDERS } from '../index-types';
+import { getFullMimeWhitelist, getMediaType, isAllowedSize, isAudio, isDocument, isImage, isMedia, isText, isVideo, readDataURL, } from '../message-utils';
+import { msgToBotonic } from '../msg-to-botonic';
+import { scrollToBottom } from '../util/dom';
+import { isDev } from '../util/environment';
+import { deserializeRegex, stringifyWithRegexs } from '../util/regexs';
+import { _getThemeProperty, getServerErrorMessage, initSession, shouldKeepSessionOnReload, } from '../util/webchat';
+import { Attachment } from './components/attachment';
+import { EmojiPicker, OpenedEmojiPicker } from './components/emoji-picker';
+import { OpenedPersistentMenu, PersistentMenu, } from './components/persistent-menu';
+import { SendButton } from './components/send-button';
+import { DeviceAdapter } from './devices/device-adapter';
+import { StyledWebchatHeader } from './header';
+import { useComponentWillMount, usePrevious, useTyping, useWebchat, } from './hooks';
+import { WebchatMessageList } from './message-list';
+import { WebchatReplies } from './replies';
+import { TriggerButton } from './trigger-button';
+import { useStorageState } from './use-storage-state-hook';
+import { WebviewContainer } from './webview';
+export const getParsedAction = botonicAction => {
+    const splittedAction = botonicAction.split('create_case:');
+    if (splittedAction.length <= 1)
+        return undefined;
+    return JSON.parse(splittedAction[1]);
+};
+const StyledWebchat = styled.div `
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  margin: auto;
+  background-color: ${COLORS.SOLID_WHITE};
+  border-radius: 10px;
+  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
+  display: flex;
+  flex-direction: column;
+`;
+const UserInputContainer = styled.div `
+  min-height: 52px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 0px 16px;
+  z-index: 1;
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
+`;
+const TextAreaContainer = styled.div `
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+`;
+const ErrorMessageContainer = styled.div `
+  position: relative;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+`;
+const ErrorMessage = styled.div `
+  position: absolute;
+  top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 11px;
+  display: flex;
+  background-color: ${COLORS.ERROR_RED};
+  color: ${COLORS.CONCRETE_WHITE};
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
+`;
+const DarkBackgroundMenu = styled.div `
+  background: ${COLORS.SOLID_BLACK};
+  opacity: 0.3;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  border-radius: 10px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+// eslint-disable-next-line complexity, react/display-name
+export const Webchat = forwardRef((props, ref) => {
+    const { addMessage, addMessageComponent, clearMessages, doRenderCustomComponent, openWebviewT, resetUnreadMessages, setCurrentAttachment, setError, setLastMessageVisible, setOnline, toggleCoverComponent, toggleEmojiPicker, togglePersistentMenu, toggleWebchat, updateDevSettings, updateHandoff, updateLastMessageDate, updateLastRoutePath, updateLatestInput, updateMessage, updateReplies, updateSession, updateTheme, updateTyping, updateWebview, webchatState,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+     } = props.webchatHooks || useWebchat();
+    const firstUpdate = useRef(true);
+    const isOnline = () => webchatState.online;
+    const currentDateString = () => new Date().toISOString();
+    const theme = 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 deviceAdapter = new DeviceAdapter();
+    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.`);
+        }
+        setCurrentAttachment({
+            fileName: event.target.files[0].name,
+            file: event.target.files[0],
+            attachmentType: getMediaType(event.target.files[0].type),
+        });
+    };
+    useEffect(() => {
+        if (webchatState.currentAttachment)
+            sendAttachment(webchatState.currentAttachment);
+    }, [webchatState.currentAttachment]);
+    const sendUserInput = async (input) => {
+        if (props.onUserInput) {
+            resetUnreadMessages();
+            scrollToBottom({ host });
+            props.onUserInput({
+                user: webchatState.session.user,
+                input: input,
+                session: webchatState.session,
+                lastRoutePath: webchatState.lastRoutePath,
+            });
+        }
+    };
+    const sendChatEvent = async (chatEvent) => {
+        const chatEventInput = {
+            id: uuidv4(),
+            type: INPUT.CHAT_EVENT,
+            data: chatEvent,
+        };
+        props.onUserInput &&
+            props.onUserInput({
+                user: webchatState.session.user,
+                input: chatEventInput,
+                session: webchatState.session,
+                lastRoutePath: webchatState.lastRoutePath,
+            });
+    };
+    // Load styles stored in window._botonicInsertStyles by Webpack
+    useComponentWillMount(() => {
+        if (window._botonicInsertStyles && 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 &&
+                    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(Object.assign(Object.assign({}, message), { delay: 0, typing: 0 }), (props.theme.message && props.theme.message.customTypes) ||
+                        props.theme.customMessageTypes);
+                    if (newMessageComponent)
+                        addMessageComponent(newMessageComponent);
+                });
+            }
+            if (initialSession)
+                updateSession(merge(initialSession, session));
+            if (lastRoutePath)
+                updateLastRoutePath(lastRoutePath);
+        }
+        else
+            updateSession(merge(initialSession, session));
+        if (devSettings)
+            updateDevSettings(devSettings);
+        else if (initialDevSettings)
+            updateDevSettings(initialDevSettings);
+        if (lastMessageUpdate)
+            updateLastMessageDate(lastMessageUpdate);
+        if (themeUpdates !== undefined)
+            updateTheme(merge(props.theme, themeUpdates), themeUpdates);
+        if (props.onInit)
+            setTimeout(() => props.onInit(), 100);
+    }, []);
+    useEffect(() => {
+        if (!webchatState.isWebchatOpen) {
+            if (webchatState.isLastMessageVisible) {
+                resetUnreadMessages();
+            }
+            return;
+        }
+        deviceAdapter.init(host);
+    }, [webchatState.isWebchatOpen]);
+    useEffect(() => {
+        if (onStateChange && typeof onStateChange === 'function') {
+            onStateChange(webchatState);
+        }
+        saveWebchatState(webchatState);
+    }, [
+        webchatState.messagesJSON,
+        webchatState.session,
+        webchatState.lastRoutePath,
+        webchatState.devSettings,
+        webchatState.lastMessageUpdate,
+    ]);
+    useAsyncEffect(async () => {
+        if (!webchatState.online) {
+            setError({
+                message: getServerErrorMessage(props.server),
+            });
+        }
+        else {
+            if (!firstUpdate.current) {
+                setError(undefined);
+            }
+        }
+    }, [webchatState.online]);
+    useTyping({ webchatState, updateTyping, updateMessage, host });
+    useEffect(() => {
+        updateTheme(merge(props.theme, theme, webchatState.themeUpdates));
+    }, [props.theme, webchatState.themeUpdates]);
+    const openWebview = (webviewComponent, params) => updateWebview(webviewComponent, params);
+    const handleSelectedEmoji = event => {
+        textArea.current.value += event.emoji;
+        textArea.current.focus();
+    };
+    const closeWebview = options => {
+        updateWebview();
+        if (userInputEnabled) {
+            textArea.current.focus();
+        }
+        if (options && options.payload) {
+            sendPayload(options.payload);
+        }
+        else if (options && options.path) {
+            let params = '';
+            if (options.params)
+                params = params2queryString(options.params);
+            sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
+        }
+    };
+    const handleMenu = () => {
+        togglePersistentMenu(!webchatState.isPersistentMenuOpen);
+    };
+    const handleEmojiClick = () => {
+        toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
+    };
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
+    const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
+    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 = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
+        if (!Array.isArray(blockInputs))
+            return false;
+        for (const rule of blockInputs) {
+            if (getBlockInputs(rule, input.data)) {
+                addMessageComponent(React.createElement(Text, { id: input.id, sentBy: SENDERS.user, blob: false, style: {
+                        backgroundColor: COLORS.SCORPION_GRAY,
+                        borderColor: COLORS.SCORPION_GRAY,
+                        padding: '8px 12px',
+                    } }, rule.message));
+                updateReplies(false);
+                return true;
+            }
+        }
+        return false;
+    };
+    const closeMenu = () => {
+        togglePersistentMenu(false);
+    };
+    const persistentMenu = () => {
+        return (React.createElement(OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
+    };
+    const getCoverComponent = () => {
+        return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent &&
+            (props.coverComponent.component || props.coverComponent));
+    };
+    const CoverComponent = getCoverComponent();
+    const closeCoverComponent = () => {
+        toggleCoverComponent(false);
+    };
+    useEffect(() => {
+        if (!CoverComponent)
+            return;
+        if (!botonicState ||
+            (botonicState.messages && botonicState.messages.length == 0))
+            toggleCoverComponent(true);
+    }, []);
+    const coverComponent = () => {
+        const coverComponentProps = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
+        if (CoverComponent && webchatState.isCoverComponentOpen)
+            return (React.createElement(CoverComponent, Object.assign({ closeComponent: closeCoverComponent }, coverComponentProps)));
+        return null;
+    };
+    const messageComponentFromInput = input => {
+        let messageComponent = null;
+        if (isText(input)) {
+            messageComponent = (React.createElement(Text, { id: input.id, payload: input.payload, sentBy: SENDERS.user }, input.data));
+        }
+        else if (isMedia(input)) {
+            const temporaryDisplayUrl = URL.createObjectURL(input.data);
+            const mediaProps = {
+                id: input.id,
+                sentBy: SENDERS.user,
+                src: temporaryDisplayUrl,
+            };
+            if (isImage(input)) {
+                mediaProps.input = input;
+                messageComponent = React.createElement(Image, Object.assign({}, mediaProps));
+            }
+            else if (isAudio(input))
+                messageComponent = React.createElement(Audio, Object.assign({}, mediaProps));
+            else if (isVideo(input))
+                messageComponent = React.createElement(Video, Object.assign({}, mediaProps));
+            else if (isDocument(input))
+                messageComponent = React.createElement(Document, Object.assign({}, 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 = uuidv4();
+        const messageComponent = messageComponentFromInput(input);
+        if (messageComponent)
+            addMessageComponent(messageComponent);
+        if (isMedia(input))
+            input.data = await readDataURL(input.data);
+        sendUserInput(input);
+        updateLatestInput(input);
+        isOnline() && updateLastMessageDate(currentDateString());
+        updateReplies(false);
+        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 => updateSession(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(Object.assign(Object.assign({}, r), { props: Object.assign(Object.assign({}, r.props), { isUnread }) }));
+                });
+            }
+            else if (response) {
+                addMessageComponent(Object.assign(Object.assign({}, response), { props: Object.assign(Object.assign({}, response.props), { isUnread }) }));
+            }
+            if (session) {
+                updateSession(merge(session, { user: webchatState.session.user }));
+                const action = session._botonic_action || '';
+                const handoff = action.startsWith('create_case');
+                if (handoff && isDev)
+                    addMessageComponent(React.createElement(Handoff, null));
+                updateHandoff(handoff);
+            }
+            if (lastRoutePath)
+                updateLastRoutePath(lastRoutePath);
+            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),
+        openWebviewApi: component => openWebviewT(component),
+        setError,
+        setOnline,
+        getMessages: () => webchatState.messagesJSON,
+        isOnline,
+        clearMessages: () => {
+            clearMessages();
+            updateReplies(false);
+        },
+        getLastMessageUpdate: () => webchatState.lastMessageUpdate,
+        updateMessageInfo: (msgId, messageInfo) => {
+            const messageToUpdate = webchatState.messagesJSON.filter(m => m.id == msgId)[0];
+            const updatedMsg = 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(merge(webchatState.theme, themeUpdates), themeUpdates);
+            updateTyping(false);
+        },
+    }));
+    const resolveCase = () => {
+        updateHandoff(false);
+        updateSession(Object.assign(Object.assign({}, webchatState.session), { _botonic_action: null }));
+    };
+    const prevSession = usePrevious(webchatState.session);
+    useEffect(() => {
+        // Resume conversation after handoff
+        if (prevSession &&
+            prevSession._botonic_action &&
+            !webchatState.session._botonic_action) {
+            const action = getParsedAction(prevSession._botonic_action);
+            if (action && 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.file) {
+            const attachmentType = getMediaType(attachment.file.type);
+            if (!attachmentType)
+                return;
+            const input = {
+                type: attachmentType,
+                data: attachment.file,
+            };
+            await sendInput(input);
+            setCurrentAttachment(undefined);
+        }
+    };
+    const sendTextAreaText = () => {
+        sendText(textArea.current.value);
+        textArea.current.value = '';
+    };
+    let isTyping = false;
+    let typingTimeout = null;
+    function clearTimeoutWithReset(reset) {
+        const waitTime = 20 * 1000;
+        if (typingTimeout)
+            clearTimeout(typingTimeout);
+        if (reset)
+            typingTimeout = setTimeout(stopTyping, waitTime);
+    }
+    function startTyping() {
+        isTyping = true;
+        sendChatEvent('typing_on');
+    }
+    function stopTyping() {
+        clearTimeoutWithReset(false);
+        isTyping = false;
+        sendChatEvent('typing_off');
+    }
+    const onKeyDown = event => {
+        if (event.keyCode === 13 && event.shiftKey === false) {
+            event.preventDefault();
+            sendTextAreaText();
+            stopTyping();
+        }
+    };
+    const onKeyUp = () => {
+        if (textArea.current.value === '') {
+            stopTyping();
+            return;
+        }
+        if (!isTyping) {
+            startTyping();
+        }
+        clearTimeoutWithReset(true);
+    };
+    const webviewRequestContext = {
+        getString: stringId => props.getString(stringId, webchatState.session),
+        setLocale: locale => props.getString(locale, webchatState.session),
+        session: webchatState.session || {},
+        params: webchatState.webviewParams || {},
+        closeWebview: closeWebview,
+        defaultDelay: props.defaultDelay || 0,
+        defaultTyping: props.defaultTyping || 0,
+    };
+    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, props.enableUserInput !== undefined ? props.enableUserInput : true);
+        return isUserInputEnabled && !webchatState.isCoverComponentOpen;
+    };
+    const userInputEnabled = isUserInputEnabled();
+    const textArea = useRef(null);
+    const userInputArea = () => {
+        return (userInputEnabled && (React.createElement(UserInputContainer, { style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' },
+            webchatState.isEmojiPickerOpen && (React.createElement(OpenedEmojiPicker, { height: webchatState.theme.style.height, onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })),
+            React.createElement(PersistentMenu, { onClick: handleMenu, persistentMenu: props.persistentMenu }),
+            React.createElement(TextAreaContainer, null,
+                React.createElement(Textarea, { inputRef: textArea, name: 'text', onFocus: () => {
+                        deviceAdapter.onFocus(host);
+                    }, onBlur: () => {
+                        deviceAdapter.onBlur();
+                    }, maxRows: 4, wrap: 'soft', maxLength: '1000', placeholder: getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: Object.assign({ display: 'flex', fontSize: deviceAdapter.fontSize(14), width: '100%', border: 'none', resize: 'none', overflow: 'auto', outline: 'none', flex: '1 1 auto', padding: 10, paddingLeft: persistentMenuOptions ? 0 : 10, fontFamily: 'inherit' }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle)) })),
+            React.createElement(EmojiPicker, { enableEmojiPicker: props.enableEmojiPicker, onClick: handleEmojiClick }),
+            React.createElement(Attachment, { enableAttachments: props.enableAttachments, onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }),
+            React.createElement(SendButton, { onClick: sendTextAreaText }))));
+    };
+    const webchatWebview = () => (React.createElement(RequestContext.Provider, { value: webviewRequestContext },
+        React.createElement(WebviewContainer, { style: Object.assign(Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)), mobileStyle), webview: webchatState.webview })));
+    let mobileStyle = {};
+    if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
+        mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
+            width: '100%',
+            height: '100%',
+            right: 0,
+            bottom: 0,
+            borderRadius: 0,
+        };
+    }
+    useEffect(() => {
+        // Prod mode
+        saveWebchatState(webchatState);
+    }, [webchatState.themeUpdates]);
+    // Only needed for dev/serve mode
+    const updateWebchatDevSettings = settings => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            const themeUpdates = normalizeWebchatSettings(settings);
+            updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates);
+        }, [webchatState.messagesJSON]);
+    };
+    const DarkenBackground = ({ component }) => {
+        return (React.createElement("div", null,
+            darkBackgroundMenu && (React.createElement(DarkBackgroundMenu, { style: {
+                    borderRadius: webchatState.theme.style.borderRadius,
+                } })),
+            component));
+    };
+    const _renderCustomComponent = () => {
+        if (!customComponent)
+            return React.createElement(React.Fragment, null);
+        else
+            return customComponent;
+    };
+    const WebchatComponent = (React.createElement(WebchatContext.Provider, { value: {
+            addMessage,
+            getThemeProperty,
+            openWebview,
+            resolveCase,
+            resetUnreadMessages,
+            setLastMessageVisible,
+            sendAttachment,
+            sendInput,
+            sendPayload,
+            sendText,
+            toggleWebchat,
+            updateLatestInput,
+            updateMessage,
+            updateReplies,
+            updateUser: updateSessionWithUser,
+            updateWebchatDevSettings: updateWebchatDevSettings,
+            webchatState,
+        } },
+        !webchatState.isWebchatOpen && React.createElement(TriggerButton, null),
+        webchatState.isWebchatOpen && (React.createElement(StyledWebchat
+        // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+        , { 
+            // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
+            role: ROLES.WEBCHAT, id: WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style: Object.assign(Object.assign({}, webchatState.theme.style), mobileStyle) },
+            React.createElement(StyledWebchatHeader, { onCloseClick: () => {
+                    toggleWebchat(false);
+                } }),
+            webchatState.error.message && (React.createElement(ErrorMessageContainer, null,
+                React.createElement(ErrorMessage, null, webchatState.error.message))),
+            React.createElement(WebchatMessageList, { style: { flex: 1 }, host: host }),
+            webchatState.replies &&
+                Object.keys(webchatState.replies).length > 0 && (React.createElement(WebchatReplies, { replies: webchatState.replies })),
+            webchatState.isPersistentMenuOpen && (React.createElement(DarkenBackground, { component: persistentMenu() })),
+            !webchatState.handoff && userInputArea(),
+            webchatState.webview && webchatWebview(),
+            webchatState.isCoverComponentOpen && coverComponent(),
+            webchatState.isCustomComponentRendered &&
+                customComponent &&
+                _renderCustomComponent()))));
+    return props.shadowDOM ? (React.createElement(StyleSheetManager, { target: host }, WebchatComponent)) : (WebchatComponent);
+});
+//# sourceMappingURL=webchat.js.map