@botonic/react 0.43.1 → 0.44.0-alpha.0

package/lib/esm/webchat/webchat.js

@@ -1,54 +1,56 @@
-import { __awaiter } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { BotonicAction, INPUT, params2queryString } from '@botonic/core';
-import merge from 'lodash.merge';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-import { StyleSheetManager, ThemeProvider } from 'styled-components';
-import { v7 as uuidv7 } from 'uuid';
-import { Audio, Document, Handoff, Image, normalizeWebchatSettings, Text, Video, } from '../components';
-import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants';
-import { SENDERS } from '../index-types';
-import { getMediaType, isAllowedSize, isAudio, isDocument, isImage, isMedia, isText, isVideo, readDataURL, } from '../message-utils';
-import { msgToBotonic } from '../msg-to-botonic';
-import { isDev } from '../util/environment';
-import { deserializeRegex, stringifyWithRegexs } from '../util/regexs';
-import { _getThemeProperty, getServerErrorMessage, initSession, shouldKeepSessionOnReload, updateUserLocaleAndCountry, } from '../util/webchat';
-import { ChatArea } from './chat-area';
-import { OpenedPersistentMenu } from './components/opened-persistent-menu';
-import { BotonicContainerId } from './constants';
-import { useWebchat, WebchatContext } from './context';
-import { CoverComponent } from './cover-component';
-import { WebchatHeader } from './header';
-import { useComponentWillMount, usePrevious, useScrollToBottom, useTyping, } from './hooks';
-import { InputPanel } from './input-panel';
-import { DarkBackgroundMenu, ErrorMessage, ErrorMessageContainer, StyledWebchat, } from './styles';
-import { TriggerButton } from './trigger-button';
-import { useStorageState } from './use-storage-state-hook';
-import { getParsedAction } from './utils';
-import { WebviewContainer } from './webview/index';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Webchat = 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 = require("react");
+const styled_components_1 = require("styled-components");
+const uuid_1 = require("uuid");
+const components_1 = require("../components");
+const constants_1 = require("../constants");
+const index_types_1 = require("../index-types");
+const message_utils_1 = require("../message-utils");
+const msg_to_botonic_1 = require("../msg-to-botonic");
+const environment_1 = require("../util/environment");
+const regexs_1 = require("../util/regexs");
+const webchat_1 = require("../util/webchat");
+const chat_area_1 = require("./chat-area");
+const opened_persistent_menu_1 = require("./components/opened-persistent-menu");
+const constants_2 = require("./constants");
+const context_1 = require("./context");
+const cover_component_1 = require("./cover-component");
+const header_1 = require("./header");
+const hooks_1 = require("./hooks");
+const input_panel_1 = require("./input-panel");
+const styles_1 = require("./styles");
+const trigger_button_1 = require("./trigger-button");
+const use_storage_state_hook_1 = require("./use-storage-state-hook");
+const utils_1 = require("./utils");
+const index_1 = require("./webview/index");
 // eslint-disable-next-line complexity, react/display-name
-const Webchat = forwardRef((props, ref) => {
-    var _a;
+const Webchat = (0, react_1.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,
     // eslint-disable-next-line react-hooks/rules-of-hooks
-     } = props.webchatHooks || useWebchat(props.theme);
-    const firstUpdate = useRef(true);
+     } = props.webchatHooks || (0, context_1.useWebchat)(props.theme);
+    const firstUpdate = (0, react_1.useRef)(true);
     const isOnline = () => webchatState.online;
     const currentDateString = () => new Date().toISOString();
-    const theme = merge(webchatState.theme, props.theme);
+    const theme = (0, lodash_merge_1.default)(webchatState.theme, props.theme);
     const { initialSession, initialDevSettings, onStateChange } = props;
-    const getThemeProperty = _getThemeProperty(theme);
-    const [customComponent, setCustomComponent] = useState(null);
+    const getThemeProperty = (0, webchat_1._getThemeProperty)(theme);
+    const [customComponent, setCustomComponent] = (0, react_1.useState)(null);
     const storage = props.storage;
     const storageKey = typeof props.storageKey === 'function'
         ? props.storageKey()
         : props.storageKey;
-    const [botonicState, saveState] = useStorageState(storage, storageKey);
+    const [botonicState, saveState] = (0, use_storage_state_hook_1.useStorageState)(storage, storageKey);
     const host = props.host || document.body;
-    const { scrollToBottom } = useScrollToBottom({ host });
+    const { scrollToBottom } = (0, hooks_1.useScrollToBottom)({ host });
     const saveWebchatState = (webchatState) => {
         storage &&
-            saveState(JSON.parse(stringifyWithRegexs({
+            saveState(JSON.parse((0, regexs_1.stringifyWithRegexs)({
                 messages: webchatState.messagesJSON,
                 session: webchatState.session,
                 lastRoutePath: webchatState.lastRoutePath,
@@ -58,18 +60,18 @@ const Webchat = forwardRef((props, ref) => {
             })));
     };
     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.`);
+        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.`);
         }
         // TODO: Attach more files?
         setCurrentAttachment(event.target.files[0]);
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (webchatState.currentAttachment) {
             sendAttachment(webchatState.currentAttachment);
         }
     }, [webchatState.currentAttachment]);
-    const sendUserInput = (input) => __awaiter(void 0, void 0, void 0, function* () {
+    const sendUserInput = async (input) => {
         if (props.onUserInput) {
             resetUnreadMessages();
             scrollToBottom();
@@ -83,9 +85,9 @@ const Webchat = forwardRef((props, ref) => {
                 lastRoutePath: webchatState.lastRoutePath,
             });
         }
-    });
+    };
     // Load styles stored in window._botonicInsertStyles by Webpack
-    useComponentWillMount(() => {
+    (0, hooks_1.useComponentWillMount)(() => {
         if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
             for (const botonicStyle of window._botonicInsertStyles) {
                 // Injecting styles at head is needed even if we use shadowDOM
@@ -109,28 +111,27 @@ const Webchat = forwardRef((props, ref) => {
         }
     });
     // Load initial state from storage
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let { messages, session, lastRoutePath, devSettings, lastMessageUpdate, themeUpdates, } = botonicState || {};
-        session = initSession(session);
+        session = (0, webchat_1.initSession)(session);
         updateSession(session);
-        if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
+        if ((0, webchat_1.shouldKeepSessionOnReload)({ initialDevSettings, devSettings })) {
             if (messages) {
                 messages.forEach(message => {
-                    var _a, _b;
                     addMessage(message);
-                    const newMessageComponent = msgToBotonic(Object.assign(Object.assign({}, message), { delay: 0, typing: 0 }), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.customTypes);
+                    const newMessageComponent = (0, msg_to_botonic_1.msgToBotonic)({ ...message, delay: 0, typing: 0 }, props.theme?.message?.customTypes);
                     //@ts-ignore
                     if (newMessageComponent)
                         addMessageComponent(newMessageComponent);
                 });
             }
             if (initialSession)
-                updateSession(merge(initialSession, session));
+                updateSession((0, lodash_merge_1.default)(initialSession, session));
             if (lastRoutePath)
                 updateLastRoutePath(lastRoutePath);
         }
         else
-            updateSession(merge(initialSession, session));
+            updateSession((0, lodash_merge_1.default)(initialSession, session));
         if (devSettings)
             updateDevSettings(devSettings);
         else if (initialDevSettings)
@@ -139,18 +140,18 @@ const Webchat = forwardRef((props, ref) => {
             updateLastMessageDate(lastMessageUpdate);
         }
         if (themeUpdates !== undefined) {
-            updateTheme(merge(props.theme, themeUpdates), themeUpdates);
+            updateTheme((0, lodash_merge_1.default)(props.theme, themeUpdates), themeUpdates);
         }
         if (props.onInit) {
             setTimeout(() => {
                 if (typeof props.onInit === 'function') {
                     props.onInit();
-                    session.user = updateUserLocaleAndCountry(session.user);
+                    session.user = (0, webchat_1.updateUserLocaleAndCountry)(session.user);
                 }
             }, 100);
         }
     }, []);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!webchatState.isWebchatOpen) {
             if (webchatState.isLastMessageVisible) {
                 resetUnreadMessages();
@@ -158,7 +159,7 @@ const Webchat = forwardRef((props, ref) => {
             return;
         }
     }, [webchatState.isWebchatOpen]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const { messagesJSON, session } = webchatState;
         if (onStateChange && typeof onStateChange === 'function' && session.user) {
             onStateChange({ messagesJSON, user: session.user });
@@ -171,10 +172,10 @@ const Webchat = forwardRef((props, ref) => {
         webchatState.devSettings,
         webchatState.lastMessageUpdate,
     ]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!webchatState.online) {
             setError({
-                message: getServerErrorMessage(props.server),
+                message: (0, webchat_1.getServerErrorMessage)(props.server),
             });
         }
         else {
@@ -183,61 +184,59 @@ const Webchat = forwardRef((props, ref) => {
             }
         }
     }, [webchatState.online]);
-    useTyping({ webchatState, updateTyping, updateMessage, host });
-    useEffect(() => {
-        updateTheme(merge(props.theme, theme, webchatState.themeUpdates));
+    (0, hooks_1.useTyping)({ webchatState, updateTyping, updateMessage, host });
+    (0, react_1.useEffect)(() => {
+        updateTheme((0, lodash_merge_1.default)(props.theme, theme, webchatState.themeUpdates));
     }, [props.theme, webchatState.themeUpdates]);
     const openWebview = (webviewComponent, params) => {
         updateWebview(webviewComponent, params);
     };
-    const textareaRef = useRef();
-    const closeWebview = (options) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+    const textareaRef = (0, react_1.useRef)();
+    const closeWebview = async (options) => {
         removeWebview();
         if (userInputEnabled) {
-            (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            textareaRef.current?.focus();
         }
-        if (options === null || options === void 0 ? void 0 : options.payload) {
-            yield sendPayload(options.payload);
+        if (options?.payload) {
+            await sendPayload(options.payload);
         }
-        else if (options === null || options === void 0 ? void 0 : options.path) {
-            const params = options.params ? params2queryString(options.params) : '';
-            yield sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
+        else if (options?.path) {
+            const params = options.params ? (0, core_1.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 persistentMenuOptions = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu);
+    const darkBackgroundMenu = getThemeProperty(constants_1.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);
+                regex = (0, regexs_1.deserializeRegex)(regex);
             return regex.test(processedInput);
         });
     };
     const checkBlockInput = input => {
-        var _a;
         // if is a text we check if it is a serialized RE
-        const blockInputs = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.blockInputs;
+        const blockInputs = webchatState.theme.userInput?.blockInputs;
         if (!Array.isArray(blockInputs))
             return false;
         for (const rule of blockInputs) {
             if (getBlockInputs(rule, input.data)) {
-                addMessageComponent(_jsx(Text
+                addMessageComponent((0, jsx_runtime_1.jsx)(components_1.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-ignore
-                , Object.assign({ 
+                , { 
                     // Is necessary to add the id of the input
                     // to keep the input.id generated in the frontend as id of the message
                     // @ts-ignore
-                    id: input.id, sentBy: SENDERS.user, blob: false, style: {
-                        backgroundColor: COLORS.SCORPION_GRAY,
-                        borderColor: COLORS.SCORPION_GRAY,
+                    id: input.id, sentBy: index_types_1.SENDERS.user, blob: false, style: {
+                        backgroundColor: constants_1.COLORS.SCORPION_GRAY,
+                        borderColor: constants_1.COLORS.SCORPION_GRAY,
                         padding: '8px 12px',
-                    } }, { children: rule.message })));
+                    }, children: rule.message }));
                 removeReplies();
                 return true;
             }
@@ -248,11 +247,11 @@ const Webchat = forwardRef((props, ref) => {
         togglePersistentMenu(false);
     };
     const persistentMenu = () => {
-        return (_jsx(OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
+        return ((0, jsx_runtime_1.jsx)(opened_persistent_menu_1.OpenedPersistentMenu, { onClick: closeMenu, options: persistentMenuOptions, borderRadius: webchatState.theme.style.borderRadius || '10px' }));
     };
     const coverComponent = webchatState.theme.coverComponent;
-    const coverComponentProps = (_a = webchatState.theme.coverComponent) === null || _a === void 0 ? void 0 : _a.props;
-    useEffect(() => {
+    const coverComponentProps = webchatState.theme.coverComponent?.props;
+    (0, react_1.useEffect)(() => {
         if (!coverComponent)
             return;
         if (!botonicState ||
@@ -261,87 +260,90 @@ const Webchat = forwardRef((props, ref) => {
     }, []);
     const messageComponentFromInput = input => {
         let messageComponent = null;
-        if (isText(input)) {
-            messageComponent = (_jsx(Text
+        if ((0, message_utils_1.isText)(input)) {
+            messageComponent = ((0, jsx_runtime_1.jsx)(components_1.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-ignore
-            , Object.assign({ 
+            , { 
                 // Is necessary to add the id of the input
                 // to keep the input.id generated in the frontend as id of the message
                 // @ts-ignore
                 id: input.id, 
                 // Is necessary to add the payload of the input when user clicks a button
                 // @ts-ignore
-                payload: input.payload, sentBy: SENDERS.user }, { children: input.data })));
+                payload: input.payload, sentBy: index_types_1.SENDERS.user, children: input.data }));
         }
-        else if (isMedia(input)) {
+        else if ((0, message_utils_1.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,
+                sentBy: index_types_1.SENDERS.user,
                 src: temporaryDisplayUrl,
             };
-            if (isImage(input)) {
+            if ((0, message_utils_1.isImage)(input)) {
                 mediaProps.input = input;
-                messageComponent = _jsx(Image, Object.assign({}, mediaProps));
+                messageComponent = (0, jsx_runtime_1.jsx)(components_1.Image, { ...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));
+            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 });
         }
         return messageComponent;
     };
-    const sendInput = (input) => __awaiter(void 0, void 0, void 0, function* () {
+    const sendInput = async (input) => {
         if (!input || Object.keys(input).length == 0)
             return;
-        if (isText(input) && (!input.data || !input.data.trim()))
+        if ((0, message_utils_1.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))
+        if ((0, message_utils_1.isText)(input) && checkBlockInput(input))
             return;
         if (!input.id)
-            input.id = uuidv7();
+            input.id = (0, uuid_1.v7)();
         const messageComponent = messageComponentFromInput(input);
         if (messageComponent)
             addMessageComponent(messageComponent);
-        if (isMedia(input))
-            input.data = yield readDataURL(input.data);
+        if ((0, message_utils_1.isMedia)(input))
+            input.data = await (0, message_utils_1.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) => {
-        updateSession(merge(webchatState.session, { user: userToUpdate }));
+        updateSession((0, lodash_merge_1.default)(webchatState.session, { user: userToUpdate }));
     };
-    useImperativeHandle(ref, () => ({
+    (0, react_1.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 }) }));
+                    addMessageComponent({ ...r, props: { ...r.props, isUnread } });
                 });
             }
             else if (response) {
-                addMessageComponent(Object.assign(Object.assign({}, response), { props: Object.assign(Object.assign({}, response.props), { isUnread }) }));
+                addMessageComponent({
+                    ...response,
+                    props: { ...response.props, isUnread },
+                });
             }
             if (session) {
-                updateSession(merge(session, { user: webchatState.session.user }));
+                updateSession((0, lodash_merge_1.default)(session, { user: webchatState.session.user }));
                 const action = session._botonic_action || '';
-                const handoff = action.startsWith(BotonicAction.CreateCase);
-                if (handoff && isDev)
-                    addMessageComponent(_jsx(Handoff, {}));
+                const handoff = action.startsWith(core_1.BotonicAction.CreateCase);
+                if (handoff && environment_1.isDev)
+                    addMessageComponent((0, jsx_runtime_1.jsx)(components_1.Handoff, {}));
                 updateHandoff(handoff);
             }
             if (lastRoutePath)
@@ -351,11 +353,14 @@ const Webchat = forwardRef((props, ref) => {
         addSystemResponse: ({ response }) => {
             if (Array.isArray(response)) {
                 response.forEach(r => {
-                    addMessageComponent(Object.assign(Object.assign({}, r), { props: Object.assign(Object.assign({}, r.props), { isUnread: false }) }));
+                    addMessageComponent({ ...r, props: { ...r.props, isUnread: false } });
                 });
             }
             else if (response) {
-                addMessageComponent(Object.assign(Object.assign({}, response), { props: Object.assign(Object.assign({}, response.props), { isUnread: false }) }));
+                addMessageComponent({
+                    ...response,
+                    props: { ...response.props, isUnread: false },
+                });
             }
             updateLastMessageDate(currentDateString());
         },
@@ -383,7 +388,7 @@ const Webchat = forwardRef((props, ref) => {
         getLastMessageUpdate: () => webchatState.lastMessageUpdate,
         updateMessageInfo: (msgId, messageInfo) => {
             const messageToUpdate = webchatState.messagesJSON.filter(m => m.id === msgId)[0];
-            const updatedMsg = merge(messageToUpdate, messageInfo);
+            const updatedMsg = (0, lodash_merge_1.default)(messageToUpdate, messageInfo);
             if (updatedMsg.ack === 1)
                 delete updatedMsg.unsentInput;
             updateMessage(updatedMsg);
@@ -392,51 +397,51 @@ const Webchat = forwardRef((props, ref) => {
             if (settings.user) {
                 updateSessionWithUser(settings.user);
             }
-            const themeUpdates = normalizeWebchatSettings(settings);
-            updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates);
+            const themeUpdates = (0, components_1.normalizeWebchatSettings)(settings);
+            updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
             updateTyping(false);
         },
-        closeWebview: (options) => __awaiter(void 0, void 0, void 0, function* () { return closeWebview(options); }),
+        closeWebview: async (options) => closeWebview(options),
     }));
     const resolveCase = () => {
         updateHandoff(false);
-        updateSession(Object.assign(Object.assign({}, webchatState.session), { _botonic_action: undefined }));
+        updateSession({ ...webchatState.session, _botonic_action: undefined });
     };
-    const prevSession = usePrevious(webchatState.session);
-    useEffect(() => {
+    const prevSession = (0, hooks_1.usePrevious)(webchatState.session);
+    (0, react_1.useEffect)(() => {
         // Resume conversation after handoff
-        if ((prevSession === null || prevSession === void 0 ? void 0 : prevSession._botonic_action) && !webchatState.session._botonic_action) {
-            const action = getParsedAction(prevSession._botonic_action);
-            if (action === null || action === void 0 ? void 0 : action.on_finish)
+        if (prevSession?._botonic_action && !webchatState.session._botonic_action) {
+            const action = (0, utils_1.getParsedAction)(prevSession._botonic_action);
+            if (action?.on_finish)
                 sendPayload(action.on_finish);
         }
     }, [webchatState.session._botonic_action]);
-    const sendText = (text, payload) => __awaiter(void 0, void 0, void 0, function* () {
+    const sendText = async (text, payload) => {
         if (!text)
             return;
-        const input = { type: INPUT.TEXT, data: text, payload };
-        yield sendInput(input);
-    });
-    const sendPayload = (payload) => __awaiter(void 0, void 0, void 0, function* () {
+        const input = { type: core_1.INPUT.TEXT, data: text, payload };
+        await sendInput(input);
+    };
+    const sendPayload = async (payload) => {
         if (!payload)
             return;
-        const input = { type: INPUT.POSTBACK, payload };
-        yield sendInput(input);
-    });
-    const sendAttachment = (attachment) => __awaiter(void 0, void 0, void 0, function* () {
+        const input = { type: core_1.INPUT.POSTBACK, payload };
+        await sendInput(input);
+    };
+    const sendAttachment = async (attachment) => {
         if (attachment) {
-            const attachmentType = getMediaType(attachment.type);
+            const attachmentType = (0, message_utils_1.getMediaType)(attachment.type);
             if (!attachmentType)
                 return;
             const input = {
                 type: attachmentType,
                 data: attachment,
             };
-            yield sendInput(input);
+            await sendInput(input);
             setCurrentAttachment();
         }
-    });
-    useEffect(() => {
+    };
+    (0, react_1.useEffect)(() => {
         if (firstUpdate.current) {
             firstUpdate.current = false;
             return;
@@ -450,34 +455,34 @@ const Webchat = forwardRef((props, ref) => {
         }
     }, [webchatState.isWebchatOpen]);
     const isUserInputEnabled = () => {
-        const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput);
+        const isUserInputEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableUserInput);
         return isUserInputEnabled && !webchatState.isCoverComponentOpen;
     };
     const userInputEnabled = isUserInputEnabled();
-    useEffect(() => {
+    (0, react_1.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);
+        (0, react_1.useEffect)(() => {
+            const themeUpdates = (0, components_1.normalizeWebchatSettings)(settings);
+            updateTheme((0, lodash_merge_1.default)(webchatState.theme, themeUpdates), themeUpdates);
         }, [webchatState.messagesJSON]);
     };
     const DarkenBackground = ({ component }) => {
-        return (_jsxs("div", { children: [darkBackgroundMenu && (_jsx(DarkBackgroundMenu, { style: {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [darkBackgroundMenu && ((0, jsx_runtime_1.jsx)(styles_1.DarkBackgroundMenu, { style: {
                         borderRadius: webchatState.theme.style.borderRadius,
                     } })), component] }));
     };
     const _renderCustomComponent = () => {
         if (!customComponent)
-            return _jsx(_Fragment, {});
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
         else
             return customComponent;
     };
-    const WebchatComponent = (_jsx(WebchatContext.Provider, Object.assign({ value: {
+    const WebchatComponent = ((0, jsx_runtime_1.jsx)(context_1.WebchatContext.Provider, { value: {
             addMessage,
             getThemeProperty,
             closeWebview,
@@ -509,13 +514,13 @@ const Webchat = forwardRef((props, ref) => {
             headerRef,
             repliesRef,
             scrollableMessagesListRef,
-        } }, { children: _jsxs(ThemeProvider, Object.assign({ theme: webchatState.theme }, { children: [!webchatState.isWebchatOpen && _jsx(TriggerButton, {}), webchatState.isWebchatOpen && (_jsxs(StyledWebchat, Object.assign({ id: BotonicContainerId.Webchat, ref: webchatContainerRef, 
+        }, children: (0, jsx_runtime_1.jsxs)(styled_components_1.ThemeProvider, { theme: webchatState.theme, children: [!webchatState.isWebchatOpen && (0, jsx_runtime_1.jsx)(trigger_button_1.TriggerButton, {}), webchatState.isWebchatOpen && ((0, jsx_runtime_1.jsxs)(styles_1.StyledWebchat, { id: constants_2.BotonicContainerId.Webchat, ref: webchatContainerRef, 
                     // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-                    role: ROLES.WEBCHAT }, { children: [_jsx(WebchatHeader, { ref: headerRef }), webchatState.isCoverComponentOpen ? (_jsx(CoverComponent, { component: coverComponent, componentProps: coverComponentProps })) : (_jsxs(_Fragment, { children: [webchatState.error.message && (_jsx(ErrorMessageContainer, { children: _jsx(ErrorMessage, { children: webchatState.error.message }) })), _jsx(ChatArea, {}), webchatState.isPersistentMenuOpen && (_jsx(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputEnabled && (_jsx(InputPanel, { handleAttachment: handleAttachment, textareaRef: textareaRef, host: host, onUserInput: props.onUserInput })), webchatState.webview && (_jsx(WebviewContainer, { localWebviews: props.localWebviews })), webchatState.isCustomComponentRendered &&
+                    role: constants_1.ROLES.WEBCHAT, children: [(0, jsx_runtime_1.jsx)(header_1.WebchatHeader, { ref: headerRef }), webchatState.isCoverComponentOpen ? ((0, jsx_runtime_1.jsx)(cover_component_1.CoverComponent, { component: coverComponent, componentProps: coverComponentProps })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [webchatState.error.message && ((0, jsx_runtime_1.jsx)(styles_1.ErrorMessageContainer, { children: (0, jsx_runtime_1.jsx)(styles_1.ErrorMessage, { children: webchatState.error.message }) })), (0, jsx_runtime_1.jsx)(chat_area_1.ChatArea, {}), webchatState.isPersistentMenuOpen && ((0, jsx_runtime_1.jsx)(DarkenBackground, { component: persistentMenu() })), !webchatState.handoff && userInputEnabled && ((0, jsx_runtime_1.jsx)(input_panel_1.InputPanel, { handleAttachment: handleAttachment, textareaRef: textareaRef, host: host, onUserInput: props.onUserInput })), webchatState.webview && ((0, jsx_runtime_1.jsx)(index_1.WebviewContainer, { localWebviews: props.localWebviews })), webchatState.isCustomComponentRendered &&
                                     customComponent &&
-                                    _renderCustomComponent()] }))] })))] })) })));
-    return props.shadowDOM ? (_jsx(StyleSheetManager, Object.assign({ target: host }, { children: WebchatComponent }))) : (WebchatComponent);
+                                    _renderCustomComponent()] }))] }))] }) }));
+    return props.shadowDOM ? ((0, jsx_runtime_1.jsx)(styled_components_1.StyleSheetManager, { target: host, children: WebchatComponent })) : (WebchatComponent);
 });
+exports.Webchat = Webchat;
 Webchat.displayName = 'Webchat';
-export { Webchat };
 //# sourceMappingURL=webchat.js.map