@botonic/react 0.25.0-alpha.1 → 0.25.0-alpha.3

package/lib/esm/webchat/webchat.js

@@ -1,60 +1,56 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Webchat = exports.getParsedAction = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@botonic/core");
-const lodash_merge_1 = tslib_1.__importDefault(require("lodash.merge"));
-const react_1 = tslib_1.__importStar(require("react"));
-const react_textarea_autosize_1 = tslib_1.__importDefault(require("react-textarea-autosize"));
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const use_async_effect_1 = require("use-async-effect");
-const uuid_1 = require("uuid");
-const components_1 = require("../components");
-const handoff_1 = require("../components/handoff");
-const webchat_settings_1 = require("../components/webchat-settings");
-const constants_1 = require("../constants");
-const contexts_1 = require("../contexts");
-const index_types_1 = require("../index-types");
-const message_utils_1 = require("../message-utils");
-const msg_to_botonic_1 = require("../msg-to-botonic");
-const dom_1 = require("../util/dom");
-const environment_1 = require("../util/environment");
-const regexs_1 = require("../util/regexs");
-const webchat_1 = require("../util/webchat");
-const attachment_1 = require("./components/attachment");
-const emoji_picker_1 = require("./components/emoji-picker");
-const persistent_menu_1 = require("./components/persistent-menu");
-const send_button_1 = require("./components/send-button");
-const device_adapter_1 = require("./devices/device-adapter");
-const header_1 = require("./header");
-const hooks_1 = require("./hooks");
-const message_list_1 = require("./message-list");
-const replies_1 = require("./replies");
-const trigger_button_1 = require("./trigger-button");
-const use_storage_state_hook_1 = require("./use-storage-state-hook");
-const webview_1 = require("./webview");
-const getParsedAction = botonicAction => {
+import { __awaiter } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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]);
 };
-exports.getParsedAction = getParsedAction;
-const StyledWebchat = styled_components_1.default.div `
+const StyledWebchat = styled.div `
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: ${props => props.width}px;
   height: ${props => props.height}px;
   margin: auto;
-  background-color: ${constants_1.COLORS.SOLID_WHITE};
+  background-color: ${COLORS.SOLID_WHITE};
   border-radius: 10px;
-  box-shadow: ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
+  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
   display: flex;
   flex-direction: column;
 `;
-const UserInputContainer = styled_components_1.default.div `
+const UserInputContainer = styled.div `
   min-height: 52px;
   position: relative;
   display: flex;
@@ -63,36 +59,36 @@ const UserInputContainer = styled_components_1.default.div `
   gap: 16px;
   padding: 0px 16px;
   z-index: 1;
-  border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_5};
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_5};
 `;
-const TextAreaContainer = styled_components_1.default.div `
+const TextAreaContainer = styled.div `
   display: flex;
   flex: 1 1 auto;
   align-items: center;
 `;
-const ErrorMessageContainer = styled_components_1.default.div `
+const ErrorMessageContainer = styled.div `
   position: relative;
   display: flex;
   z-index: 1;
   justify-content: center;
   width: 100%;
 `;
-const ErrorMessage = styled_components_1.default.div `
+const ErrorMessage = styled.div `
   position: absolute;
   top: 10px;
   font-size: 14px;
   line-height: 20px;
   padding: 4px 11px;
   display: flex;
-  background-color: ${constants_1.COLORS.ERROR_RED};
-  color: ${constants_1.COLORS.CONCRETE_WHITE};
+  background-color: ${COLORS.ERROR_RED};
+  color: ${COLORS.CONCRETE_WHITE};
   border-radius: 5px;
   align-items: center;
   justify-content: center;
-  font-family: ${constants_1.WEBCHAT.DEFAULTS.FONT_FAMILY};
+  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
 `;
-const DarkBackgroundMenu = styled_components_1.default.div `
-  background: ${constants_1.COLORS.SOLID_BLACK};
+const DarkBackgroundMenu = styled.div `
+  background: ${COLORS.SOLID_BLACK};
   opacity: 0.3;
   z-index: 1;
   right: 0;
@@ -103,27 +99,27 @@ const DarkBackgroundMenu = styled_components_1.default.div `
   height: 100%;
 `;
 // eslint-disable-next-line complexity, react/display-name
-exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
+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 || (0, hooks_1.useWebchat)();
-    const firstUpdate = (0, react_1.useRef)(true);
+     } = props.webchatHooks || useWebchat();
+    const firstUpdate = useRef(true);
     const isOnline = () => webchatState.online;
     const currentDateString = () => new Date().toISOString();
-    const theme = (0, lodash_merge_1.default)(webchatState.theme, props.theme);
+    const theme = merge(webchatState.theme, props.theme);
     const { initialSession, initialDevSettings, onStateChange } = props;
-    const getThemeProperty = (0, webchat_1._getThemeProperty)(theme);
-    const [customComponent, setCustomComponent] = (0, react_1.useState)(null);
+    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] = (0, use_storage_state_hook_1.useStorageState)(storage, storageKey);
+    const [botonicState, saveState] = useStorageState(storage, storageKey);
     const host = props.host || document.body;
-    const deviceAdapter = new device_adapter_1.DeviceAdapter();
+    const deviceAdapter = new DeviceAdapter();
     const saveWebchatState = webchatState => {
         storage &&
-            saveState(JSON.parse((0, regexs_1.stringifyWithRegexs)({
+            saveState(JSON.parse(stringifyWithRegexs({
                 messages: webchatState.messagesJSON,
                 session: webchatState.session,
                 lastRoutePath: webchatState.lastRoutePath,
@@ -133,23 +129,23 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
             })));
     };
     const handleAttachment = event => {
-        if (!(0, message_utils_1.isAllowedSize)(event.target.files[0].size)) {
-            throw new Error(`The file is too large. A maximum of ${constants_1.MAX_ALLOWED_SIZE_MB}MB is allowed.`);
+        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: (0, message_utils_1.getMediaType)(event.target.files[0].type),
+            attachmentType: getMediaType(event.target.files[0].type),
         });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (webchatState.currentAttachment)
             sendAttachment(webchatState.currentAttachment);
     }, [webchatState.currentAttachment]);
-    const sendUserInput = async (input) => {
+    const sendUserInput = (input) => __awaiter(void 0, void 0, void 0, function* () {
         if (props.onUserInput) {
             resetUnreadMessages();
-            (0, dom_1.scrollToBottom)({ host });
+            scrollToBottom({ host });
             props.onUserInput({
                 user: webchatState.session.user,
                 input: input,
@@ -157,11 +153,11 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
                 lastRoutePath: webchatState.lastRoutePath,
             });
         }
-    };
-    const sendChatEvent = async (chatEvent) => {
+    });
+    const sendChatEvent = (chatEvent) => __awaiter(void 0, void 0, void 0, function* () {
         const chatEventInput = {
-            id: (0, uuid_1.v4)(),
-            type: core_1.INPUT.CHAT_EVENT,
+            id: uuidv4(),
+            type: INPUT.CHAT_EVENT,
             data: chatEvent,
         };
         props.onUserInput &&
@@ -171,9 +167,9 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
                 session: webchatState.session,
                 lastRoutePath: webchatState.lastRoutePath,
             });
-    };
+    });
     // Load styles stored in window._botonicInsertStyles by Webpack
-    (0, hooks_1.useComponentWillMount)(() => {
+    useComponentWillMount(() => {
         if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
             for (const botonicStyle of window._botonicInsertStyles) {
                 // Injecting styles at head is needed even if we use shadowDOM
@@ -197,27 +193,27 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         }
     });
     // Load initial state from storage
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let { messages, session, lastRoutePath, devSettings, lastMessageUpdate, themeUpdates, } = botonicState || {};
-        session = (0, webchat_1.initSession)(session);
+        session = initSession(session);
         updateSession(session);
-        if ((0, webchat_1.shouldKeepSessionOnReload)({ initialDevSettings, devSettings })) {
+        if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
             if (messages) {
                 messages.forEach(message => {
                     addMessage(message);
-                    const newMessageComponent = (0, msg_to_botonic_1.msgToBotonic)({ ...message, delay: 0, typing: 0 }, (props.theme.message && props.theme.message.customTypes) ||
+                    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((0, lodash_merge_1.default)(initialSession, session));
+                updateSession(merge(initialSession, session));
             if (lastRoutePath)
                 updateLastRoutePath(lastRoutePath);
         }
         else
-            updateSession((0, lodash_merge_1.default)(initialSession, session));
+            updateSession(merge(initialSession, session));
         if (devSettings)
             updateDevSettings(devSettings);
         else if (initialDevSettings)
@@ -225,11 +221,11 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         if (lastMessageUpdate)
             updateLastMessageDate(lastMessageUpdate);
         if (themeUpdates !== undefined)
-            updateTheme((0, lodash_merge_1.default)(props.theme, themeUpdates), themeUpdates);
+            updateTheme(merge(props.theme, themeUpdates), themeUpdates);
         if (props.onInit)
             setTimeout(() => props.onInit(), 100);
     }, []);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!webchatState.isWebchatOpen) {
             if (webchatState.isLastMessageVisible) {
                 resetUnreadMessages();
@@ -238,7 +234,7 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         }
         deviceAdapter.init(host);
     }, [webchatState.isWebchatOpen]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (onStateChange && typeof onStateChange === 'function') {
             onStateChange(webchatState);
         }
@@ -250,10 +246,10 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         webchatState.devSettings,
         webchatState.lastMessageUpdate,
     ]);
-    (0, use_async_effect_1.useAsyncEffect)(async () => {
+    useAsyncEffect(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!webchatState.online) {
             setError({
-                message: (0, webchat_1.getServerErrorMessage)(props.server),
+                message: getServerErrorMessage(props.server),
             });
         }
         else {
@@ -261,10 +257,10 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
                 setError(undefined);
             }
         }
-    }, [webchatState.online]);
-    (0, hooks_1.useTyping)({ webchatState, updateTyping, updateMessage, host });
-    (0, react_1.useEffect)(() => {
-        updateTheme((0, lodash_merge_1.default)(props.theme, theme, webchatState.themeUpdates));
+    }), [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 => {
@@ -282,7 +278,7 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         else if (options && options.path) {
             let params = '';
             if (options.params)
-                params = (0, core_1.params2queryString)(options.params);
+                params = params2queryString(options.params);
             sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
         }
     };
@@ -292,30 +288,30 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
     const handleEmojiClick = () => {
         toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
     };
-    const persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
-    const darkBackgroundMenu = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
+    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 = (0, regexs_1.deserializeRegex)(regex);
+                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(constants_1.WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
+        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((0, jsx_runtime_1.jsx)(components_1.Text, { id: input.id, sentBy: index_types_1.SENDERS.user, blob: false, style: {
-                        backgroundColor: constants_1.COLORS.SCORPION_GRAY,
-                        borderColor: constants_1.COLORS.SCORPION_GRAY,
+                addMessageComponent(_jsx(Text, Object.assign({ id: input.id, sentBy: SENDERS.user, blob: false, style: {
+                        backgroundColor: COLORS.SCORPION_GRAY,
+                        borderColor: COLORS.SCORPION_GRAY,
                         padding: '8px 12px',
-                    }, children: rule.message }));
+                    } }, { children: rule.message })));
                 updateReplies(false);
                 return true;
             }
@@ -326,17 +322,17 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         togglePersistentMenu(false);
     };
     const persistentMenu = () => {
-        return ((0, jsx_runtime_1.jsx)(persistent_menu_1.OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
+        return (_jsx(OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
     };
     const getCoverComponent = () => {
-        return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent &&
+        return getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent &&
             (props.coverComponent.component || props.coverComponent));
     };
     const CoverComponent = getCoverComponent();
     const closeCoverComponent = () => {
         toggleCoverComponent(false);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!CoverComponent)
             return;
         if (!botonicState ||
@@ -344,82 +340,79 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
             toggleCoverComponent(true);
     }, []);
     const coverComponent = () => {
-        const coverComponentProps = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
+        const coverComponentProps = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
         if (CoverComponent && webchatState.isCoverComponentOpen)
-            return ((0, jsx_runtime_1.jsx)(CoverComponent, { closeComponent: closeCoverComponent, ...coverComponentProps }));
+            return (_jsx(CoverComponent, Object.assign({ closeComponent: closeCoverComponent }, coverComponentProps)));
         return null;
     };
     const messageComponentFromInput = input => {
         let messageComponent = null;
-        if ((0, message_utils_1.isText)(input)) {
-            messageComponent = ((0, jsx_runtime_1.jsx)(components_1.Text, { id: input.id, payload: input.payload, sentBy: index_types_1.SENDERS.user, children: input.data }));
+        if (isText(input)) {
+            messageComponent = (_jsx(Text, Object.assign({ id: input.id, payload: input.payload, sentBy: SENDERS.user }, { children: input.data })));
         }
-        else if ((0, message_utils_1.isMedia)(input)) {
+        else if (isMedia(input)) {
             const temporaryDisplayUrl = URL.createObjectURL(input.data);
             const mediaProps = {
                 id: input.id,
-                sentBy: index_types_1.SENDERS.user,
+                sentBy: SENDERS.user,
                 src: temporaryDisplayUrl,
             };
-            if ((0, message_utils_1.isImage)(input)) {
+            if (isImage(input)) {
                 mediaProps.input = input;
-                messageComponent = (0, jsx_runtime_1.jsx)(components_1.Image, { ...mediaProps });
+                messageComponent = _jsx(Image, Object.assign({}, mediaProps));
             }
-            else if ((0, message_utils_1.isAudio)(input))
-                messageComponent = (0, jsx_runtime_1.jsx)(components_1.Audio, { ...mediaProps });
-            else if ((0, message_utils_1.isVideo)(input))
-                messageComponent = (0, jsx_runtime_1.jsx)(components_1.Video, { ...mediaProps });
-            else if ((0, message_utils_1.isDocument)(input))
-                messageComponent = (0, jsx_runtime_1.jsx)(components_1.Document, { ...mediaProps });
+            else if (isAudio(input))
+                messageComponent = _jsx(Audio, Object.assign({}, mediaProps));
+            else if (isVideo(input))
+                messageComponent = _jsx(Video, Object.assign({}, mediaProps));
+            else if (isDocument(input))
+                messageComponent = _jsx(Document, Object.assign({}, mediaProps));
         }
         return messageComponent;
     };
-    const sendInput = async (input) => {
+    const sendInput = (input) => __awaiter(void 0, void 0, void 0, function* () {
         if (!input || Object.keys(input).length == 0)
             return;
-        if ((0, message_utils_1.isText)(input) && (!input.data || !input.data.trim()))
+        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 ((0, message_utils_1.isText)(input) && checkBlockInput(input))
+        if (isText(input) && checkBlockInput(input))
             return;
         if (!input.id)
-            input.id = (0, uuid_1.v4)();
+            input.id = uuidv4();
         const messageComponent = messageComponentFromInput(input);
         if (messageComponent)
             addMessageComponent(messageComponent);
-        if ((0, message_utils_1.isMedia)(input))
-            input.data = await (0, message_utils_1.readDataURL)(input.data);
+        if (isMedia(input))
+            input.data = yield 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((0, lodash_merge_1.default)(webchatState.session, { user: userToUpdate }));
-    (0, react_1.useImperativeHandle)(ref, () => ({
+    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({ ...r, props: { ...r.props, isUnread } });
+                    addMessageComponent(Object.assign(Object.assign({}, r), { props: Object.assign(Object.assign({}, r.props), { isUnread }) }));
                 });
             }
             else if (response) {
-                addMessageComponent({
-                    ...response,
-                    props: { ...response.props, isUnread },
-                });
+                addMessageComponent(Object.assign(Object.assign({}, response), { props: Object.assign(Object.assign({}, response.props), { isUnread }) }));
             }
             if (session) {
-                updateSession((0, lodash_merge_1.default)(session, { user: webchatState.session.user }));
+                updateSession(merge(session, { user: webchatState.session.user }));
                 const action = session._botonic_action || '';
                 const handoff = action.startsWith('create_case');
-                if (handoff && environment_1.isDev)
-                    addMessageComponent((0, jsx_runtime_1.jsx)(handoff_1.Handoff, {}));
+                if (handoff && isDev)
+                    addMessageComponent(_jsx(Handoff, {}));
                 updateHandoff(handoff);
             }
             if (lastRoutePath)
@@ -452,7 +445,7 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         getLastMessageUpdate: () => webchatState.lastMessageUpdate,
         updateMessageInfo: (msgId, messageInfo) => {
             const messageToUpdate = webchatState.messagesJSON.filter(m => m.id == msgId)[0];
-            const updatedMsg = (0, lodash_merge_1.default)(messageToUpdate, messageInfo);
+            const updatedMsg = merge(messageToUpdate, messageInfo);
             if (updatedMsg.ack === 1)
                 delete updatedMsg.unsentInput;
             updateMessage(updatedMsg);
@@ -461,51 +454,51 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
             if (settings.user) {
                 updateSessionWithUser(settings.user);
             }
-            const themeUpdates = (0, webchat_settings_1.normalizeWebchatSettings)(settings);
-            updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
+            const themeUpdates = normalizeWebchatSettings(settings);
+            updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates);
             updateTyping(false);
         },
     }));
     const resolveCase = () => {
         updateHandoff(false);
-        updateSession({ ...webchatState.session, _botonic_action: null });
+        updateSession(Object.assign(Object.assign({}, webchatState.session), { _botonic_action: null }));
     };
-    const prevSession = (0, hooks_1.usePrevious)(webchatState.session);
-    (0, react_1.useEffect)(() => {
+    const prevSession = usePrevious(webchatState.session);
+    useEffect(() => {
         // Resume conversation after handoff
         if (prevSession &&
             prevSession._botonic_action &&
             !webchatState.session._botonic_action) {
-            const action = (0, exports.getParsedAction)(prevSession._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) => {
+    const sendText = (text, payload) => __awaiter(void 0, void 0, void 0, function* () {
         if (!text)
             return;
-        const input = { type: core_1.INPUT.TEXT, data: text, payload };
-        await sendInput(input);
-    };
-    const sendPayload = async (payload) => {
+        const input = { type: INPUT.TEXT, data: text, payload };
+        yield sendInput(input);
+    });
+    const sendPayload = (payload) => __awaiter(void 0, void 0, void 0, function* () {
         if (!payload)
             return;
-        const input = { type: core_1.INPUT.POSTBACK, payload };
-        await sendInput(input);
-    };
-    const sendAttachment = async (attachment) => {
+        const input = { type: INPUT.POSTBACK, payload };
+        yield sendInput(input);
+    });
+    const sendAttachment = (attachment) => __awaiter(void 0, void 0, void 0, function* () {
         if (attachment.file) {
-            const attachmentType = (0, message_utils_1.getMediaType)(attachment.file.type);
+            const attachmentType = getMediaType(attachment.file.type);
             if (!attachmentType)
                 return;
             const input = {
                 type: attachmentType,
                 data: attachment.file,
             };
-            await sendInput(input);
+            yield sendInput(input);
             setCurrentAttachment(undefined);
         }
-    };
+    });
     const sendTextAreaText = () => {
         sendText(textArea.current.value);
         textArea.current.value = '';
@@ -554,7 +547,7 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         defaultDelay: props.defaultDelay || 0,
         defaultTyping: props.defaultTyping || 0,
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (firstUpdate.current) {
             firstUpdate.current = false;
             return;
@@ -568,40 +561,22 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
         }
     }, [webchatState.isWebchatOpen]);
     const isUserInputEnabled = () => {
-        const isUserInputEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
+        const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
         return isUserInputEnabled && !webchatState.isCoverComponentOpen;
     };
     const userInputEnabled = isUserInputEnabled();
-    const textArea = (0, react_1.useRef)(null);
+    const textArea = useRef(null);
     const userInputArea = () => {
-        return (userInputEnabled && ((0, jsx_runtime_1.jsxs)(UserInputContainer, { style: {
-                ...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputStyle),
-            }, className: 'user-input-container', children: [webchatState.isEmojiPickerOpen && ((0, jsx_runtime_1.jsx)(emoji_picker_1.OpenedEmojiPicker, { height: webchatState.theme.style.height, onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), (0, jsx_runtime_1.jsx)(persistent_menu_1.PersistentMenu, { onClick: handleMenu, persistentMenu: props.persistentMenu }), (0, jsx_runtime_1.jsx)(TextAreaContainer, { children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { inputRef: textArea, name: 'text', onFocus: () => {
+        return (userInputEnabled && (_jsxs(UserInputContainer, Object.assign({ style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)), className: 'user-input-container' }, { children: [webchatState.isEmojiPickerOpen && (_jsx(OpenedEmojiPicker, { height: webchatState.theme.style.height, onEmojiClick: handleSelectedEmoji, onClick: handleEmojiClick })), _jsx(PersistentMenu, { onClick: handleMenu, persistentMenu: props.persistentMenu }), _jsx(TextAreaContainer, { children: _jsx(Textarea, { inputRef: textArea, name: 'text', onFocus: () => {
                             deviceAdapter.onFocus(host);
                         }, onBlur: () => {
                             deviceAdapter.onBlur();
-                        }, maxRows: 4, wrap: 'soft', maxLength: '1000', placeholder: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, constants_1.WEBCHAT.DEFAULTS.PLACEHOLDER), autoFocus: false, onKeyDown: e => onKeyDown(e), onKeyUp: onKeyUp, style: {
-                            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(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle),
-                        } }) }), (0, jsx_runtime_1.jsx)(emoji_picker_1.EmojiPicker, { enableEmojiPicker: props.enableEmojiPicker, onClick: handleEmojiClick }), (0, jsx_runtime_1.jsx)(attachment_1.Attachment, { enableAttachments: props.enableAttachments, onChange: handleAttachment, accept: (0, message_utils_1.getFullMimeWhitelist)().join(',') }), (0, jsx_runtime_1.jsx)(send_button_1.SendButton, { onClick: sendTextAreaText })] })));
+                        }, 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)) }) }), _jsx(EmojiPicker, { enableEmojiPicker: props.enableEmojiPicker, onClick: handleEmojiClick }), _jsx(Attachment, { enableAttachments: props.enableAttachments, onChange: handleAttachment, accept: getFullMimeWhitelist().join(',') }), _jsx(SendButton, { onClick: sendTextAreaText })] }))));
     };
-    const webchatWebview = () => ((0, jsx_runtime_1.jsx)(contexts_1.RequestContext.Provider, { value: webviewRequestContext, children: (0, jsx_runtime_1.jsx)(webview_1.WebviewContainer, { style: {
-                ...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
-                ...mobileStyle,
-            }, webview: webchatState.webview }) }));
+    const webchatWebview = () => (_jsx(RequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: _jsx(WebviewContainer, { style: Object.assign(Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)), mobileStyle), webview: webchatState.webview }) })));
     let mobileStyle = {};
-    if ((0, core_1.isMobile)(getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
-        mobileStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
+    if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
+        mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
             width: '100%',
             height: '100%',
             right: 0,
@@ -609,30 +584,30 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
             borderRadius: 0,
         };
     }
-    (0, react_1.useEffect)(() => {
+    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
-        (0, react_1.useEffect)(() => {
-            const themeUpdates = (0, webchat_settings_1.normalizeWebchatSettings)(settings);
-            updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
+        useEffect(() => {
+            const themeUpdates = normalizeWebchatSettings(settings);
+            updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates);
         }, [webchatState.messagesJSON]);
     };
     const DarkenBackground = ({ component }) => {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [darkBackgroundMenu && ((0, jsx_runtime_1.jsx)(DarkBackgroundMenu, { style: {
+        return (_jsxs("div", { children: [darkBackgroundMenu && (_jsx(DarkBackgroundMenu, { style: {
                         borderRadius: webchatState.theme.style.borderRadius,
                     } })), component] }));
     };
     const _renderCustomComponent = () => {
         if (!customComponent)
-            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            return _jsx(_Fragment, {});
         else
             return customComponent;
     };
-    const WebchatComponent = ((0, jsx_runtime_1.jsxs)(contexts_1.WebchatContext.Provider, { value: {
+    const WebchatComponent = (_jsxs(WebchatContext.Provider, Object.assign({ value: {
             addMessage,
             getThemeProperty,
             openWebview,
@@ -650,19 +625,16 @@ exports.Webchat = (0, react_1.forwardRef)((props, ref) => {
             updateUser: updateSessionWithUser,
             updateWebchatDevSettings: updateWebchatDevSettings,
             webchatState,
-        }, children: [!webchatState.isWebchatOpen && (0, jsx_runtime_1.jsx)(trigger_button_1.TriggerButton, {}), webchatState.isWebchatOpen && ((0, jsx_runtime_1.jsxs)(StyledWebchat
+        } }, { children: [!webchatState.isWebchatOpen && _jsx(TriggerButton, {}), webchatState.isWebchatOpen && (_jsxs(StyledWebchat
             // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-            , { 
+            , Object.assign({ 
                 // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-                role: constants_1.ROLES.WEBCHAT, id: constants_1.WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style: {
-                    ...webchatState.theme.style,
-                    ...mobileStyle,
-                }, children: [(0, jsx_runtime_1.jsx)(header_1.StyledWebchatHeader, { onCloseClick: () => {
+                role: ROLES.WEBCHAT, id: WEBCHAT.DEFAULTS.ID, width: webchatState.width, height: webchatState.height, style: Object.assign(Object.assign({}, webchatState.theme.style), mobileStyle) }, { children: [_jsx(StyledWebchatHeader, { onCloseClick: () => {
                             toggleWebchat(false);
-                        } }), webchatState.error.message && ((0, jsx_runtime_1.jsx)(ErrorMessageContainer, { children: (0, jsx_runtime_1.jsx)(ErrorMessage, { children: webchatState.error.message }) })), (0, jsx_runtime_1.jsx)(message_list_1.WebchatMessageList, { style: { flex: 1 }, host: host }), webchatState.replies &&
-                        Object.keys(webchatState.replies).length > 0 && ((0, jsx_runtime_1.jsx)(replies_1.WebchatReplies, { replies: webchatState.replies })), webchatState.isPersistentMenuOpen && ((0, jsx_runtime_1.jsx)(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputArea(), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
+                        } }), webchatState.error.message && (_jsx(ErrorMessageContainer, { children: _jsx(ErrorMessage, { children: webchatState.error.message }) })), _jsx(WebchatMessageList, { style: { flex: 1 }, host: host }), webchatState.replies &&
+                        Object.keys(webchatState.replies).length > 0 && (_jsx(WebchatReplies, { replies: webchatState.replies })), webchatState.isPersistentMenuOpen && (_jsx(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputArea(), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
                         customComponent &&
-                        _renderCustomComponent()] }))] }));
-    return props.shadowDOM ? ((0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { target: host, children: WebchatComponent })) : (WebchatComponent);
+                        _renderCustomComponent()] })))] })));
+    return props.shadowDOM ? (_jsx(StyleSheetManager, Object.assign({ target: host }, { children: WebchatComponent }))) : (WebchatComponent);
 });
 //# sourceMappingURL=webchat.js.map