@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

package/lib/esm/webchat/typing-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEtD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CACnC,MAAC,sBAAsB,kBACrB,IAAI,EAAE,KAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,MAAM,CAAC,cAAc,iBAEtC,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,KACgB,CAC1B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEjE,MAAM,eAAe,GAAG,UAAU,CAChC,CAAC,MAAM,EAAE,GAAiC,EAAE,EAAE,CAAC,CAC7C,KAAC,eAAe,kBAAC,GAAG,EAAE,GAAG,gBACvB,MAAC,gBAAgB,kBACf,IAAI,EAAE,KAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,MAAM,CAAC,cAAc,iBAEtC,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,KACU,IACH,CACnB,CACF,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,eAAe,eAAe,CAAA"}

package/lib/esm/webchat/typing-indicator/styles.d.ts

@@ -1,6 +1,7 @@
-interface TypingIndicatorWrapperProps {
+export declare const TypingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface TypingMsgWrapperProps {
     backgroundColor: string;
 }
-export declare const TypingIndicatorWrapper: import("styled-components").StyledComponent<"div", any, TypingIndicatorWrapperProps, never>;
-export declare const Dot: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TypingMsgWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TypingMsgWrapperProps, never>;
+export declare const Dot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export {};

package/lib/esm/webchat/typing-indicator/styles.js

@@ -9,12 +9,15 @@ const bulge = keyframes `
     transform: scale(1.05);
   }
 `;
-export const TypingIndicatorWrapper = styled.div `
+export const TypingContainer = styled.div `
+  padding: 0px 8px 8px 8px;
+`;
+export const TypingMsgWrapper = styled.div `
   will-change: transform;
   width: 44px;
   line-height: 0px;
   border-radius: 20px;
-  padding: 8px 2px 8px;
+  padding: 8px 2px;
   text-align: center;
   display: block;
   margin: 8px;

package/lib/esm/webchat/typing-indicator/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAErD,MAAM,KAAK,GAAG,SAAS,CAAA;;;;CAItB,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;;;;CAItB,CAAA;AAMD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAA6B;;;;;;;;;;kBAU3D,KAAK;sBACD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe;CACnD,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;oBASV,KAAK;;;oBAGL,KAAK;;;oBAGL,KAAK;;CAExB,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAErD,MAAM,KAAK,GAAG,SAAS,CAAA;;;;CAItB,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;;;;CAItB,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAA;AAMD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAuB;;;;;;;;;;kBAU/C,KAAK;sBACD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe;CACnD,CAAA;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;;;oBASV,KAAK;;;oBAGL,KAAK;;;oBAGL,KAAK;;CAExB,CAAA"}

package/lib/esm/webchat/webchat-dev.d.ts

@@ -1,7 +1,7 @@
-export const DebugTab: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const DebugTab: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export function DebugTabPortal({ webchatHooks, ...props }: {
     [x: string]: any;
     webchatHooks: any;
-}): import("react").ReactPortal;
+}): React.ReactPortal;
 export const WebchatDev: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React_1 from "react";
+import React from "react";

package/lib/esm/webchat/webchat-dev.js

@@ -5,7 +5,7 @@ import merge from 'lodash.merge';
 import React, { forwardRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { useWebchat } from './hooks';
+import { useWebchat } from './context/use-webchat';
 import { SessionView } from './session-view';
 import { Webchat } from './webchat';
 export const DebugTab = styled.div `

package/lib/esm/webchat/webchat-dev.js.map

@@ -1 +1 @@
-{"version":3,"file":"webchat-dev.js","sourceRoot":"","sources":["../../../src/webchat/webchat-dev.jsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIvB,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YACvC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CAClD,CAAA;AAED,iEAAiE;AACjE,wEAAwE;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAA0B,EAAE,EAAE;QAA9B,EAAE,YAAY,OAAY,EAAP,KAAK,cAAxB,gBAA0B,CAAF;IACrD,OAAA,YAAY,CACV,KAAC,QAAQ,oBAAK,KAAK,cACjB,KAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,IAClC,EACX,QAAQ,CAAC,IAAI,CACd,CAAA;CAAA,CAAA;AAEH,MAAM,cAAc,GAAG;IACrB,oBAAoB,EAAE,IAAI;IAC1B,YAAY,EAAE,EAAE;IAChB,IAAI,EAAE;QACJ,EAAE,EAAE,QAAQ;QACZ,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,QAAQ,CAAC,GAAG;QACtB,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,EAAE;KACf;IACD,YAAY,EAAE,EAAE;IAChB,GAAG,EAAE;QACH,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClD,MAAM,YAAY,GAAG,UAAU,EAAE,CAAA;IACjC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,YAAY,CAAA;IAElD;;6CAEyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,8BACE,KAAC,OAAO,kBACN,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IACpC,KAAK,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE;oBAClB,mBAAmB,EAAE,YAAY,CAAC,WAAW,CAAC,mBAAmB;oBACjE,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe;iBAC1D,IACD,EACF,KAAC,cAAc,IACb,IAAI,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,EAC9C,YAAY,EAAE,YAAY,GAC1B,IACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"webchat-dev.js","sourceRoot":"","sources":["../../../src/webchat/webchat-dev.jsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIvB,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YACvC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;CAClD,CAAA;AAED,iEAAiE;AACjE,wEAAwE;AACxE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAA0B,EAAE,EAAE;QAA9B,EAAE,YAAY,OAAY,EAAP,KAAK,cAAxB,gBAA0B,CAAF;IACrD,OAAA,YAAY,CACV,KAAC,QAAQ,oBAAK,KAAK,cACjB,KAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,IAClC,EACX,QAAQ,CAAC,IAAI,CACd,CAAA;CAAA,CAAA;AAEH,MAAM,cAAc,GAAG;IACrB,oBAAoB,EAAE,IAAI;IAC1B,YAAY,EAAE,EAAE;IAChB,IAAI,EAAE;QACJ,EAAE,EAAE,QAAQ;QACZ,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,QAAQ,CAAC,GAAG;QACtB,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,EAAE;KACf;IACD,YAAY,EAAE,EAAE;IAChB,GAAG,EAAE;QACH,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAClD,MAAM,YAAY,GAAG,UAAU,EAAE,CAAA;IACjC,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,YAAY,CAAA;IAElD;;6CAEyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IACrD,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;IAEjB,OAAO,CACL,8BACE,KAAC,OAAO,kBACN,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IACpC,KAAK,IACT,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE;oBAClB,mBAAmB,EAAE,YAAY,CAAC,WAAW,CAAC,mBAAmB;oBACjE,eAAe,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe;iBAC1D,IACD,EACF,KAAC,cAAc,IACb,IAAI,EAAE,YAAY,CAAC,WAAW,CAAC,eAAe,EAC9C,YAAY,EAAE,YAAY,GAC1B,IACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA"}

package/lib/esm/webchat/webchat.d.ts

@@ -1,2 +1,4 @@
-export const Webchat: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+import React from 'react';
+import { WebchatProps, WebchatRef } from '../index-types';
+declare const Webchat: React.ForwardRefExoticComponent<WebchatProps & React.RefAttributes<WebchatRef | null>>;
+export { Webchat };

package/lib/esm/webchat/webchat.js

@@ -1,83 +1,37 @@
 import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { BotonicAction, INPUT, isMobile, params2queryString, } from '@botonic/core';
+import { BotonicAction, INPUT, params2queryString } from '@botonic/core';
 import merge from 'lodash.merge';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
-import styled, { StyleSheetManager } from 'styled-components';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { StyleSheetManager, ThemeProvider } from 'styled-components';
 import { v7 as uuidv7 } from 'uuid';
-import { Audio, Document, Image, Text, Video } from '../components';
-import { Handoff } from '../components/handoff';
-import { normalizeWebchatSettings } from '../components/webchat-settings';
+import { Audio, Document, Handoff, Image, normalizeWebchatSettings, Text, Video, } from '../components';
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants';
-import { WebchatContext, WebviewRequestContext } from '../contexts';
 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, } from '../util/webchat';
+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, useWebchat, } from './hooks';
+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';
-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;
-  justify-content: space-between;
-  overflow: hidden;
-`;
-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%;
-`;
+import { WebviewContainer } from './webview/index';
 // 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, webchatRef, chatAreaRef, inputPanelRef, headerRef, scrollableMessagesListRef,
+const Webchat = forwardRef((props, ref) => {
+    var _a;
+    const { addMessage, addMessageComponent, clearMessages, doRenderCustomComponent, resetUnreadMessages, setCurrentAttachment, setError, setIsInputFocused, setLastMessageVisible, setOnline, toggleCoverComponent, toggleEmojiPicker, togglePersistentMenu, toggleWebchat, 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.webchatHooks || useWebchat(props.theme);
     const firstUpdate = useRef(true);
     const isOnline = () => webchatState.online;
     const currentDateString = () => new Date().toISOString();
@@ -92,7 +46,7 @@ export const Webchat = forwardRef((props, ref) => {
     const [botonicState, saveState] = useStorageState(storage, storageKey);
     const host = props.host || document.body;
     const { scrollToBottom } = useScrollToBottom({ host });
-    const saveWebchatState = webchatState => {
+    const saveWebchatState = (webchatState) => {
         storage &&
             saveState(JSON.parse(stringifyWithRegexs({
                 messages: webchatState.messagesJSON,
@@ -103,28 +57,29 @@ export const Webchat = forwardRef((props, ref) => {
                 themeUpdates: webchatState.themeUpdates,
             })));
     };
-    const handleAttachment = event => {
+    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),
-        });
+        // TODO: Attach more files?
+        setCurrentAttachment(event.target.files[0]);
     };
     useEffect(() => {
-        if (webchatState.currentAttachment)
+        if (webchatState.currentAttachment) {
             sendAttachment(webchatState.currentAttachment);
+        }
     }, [webchatState.currentAttachment]);
     const sendUserInput = (input) => __awaiter(void 0, void 0, void 0, function* () {
         if (props.onUserInput) {
             resetUnreadMessages();
-            scrollToBottom({ host });
+            scrollToBottom();
             props.onUserInput({
                 user: webchatState.session.user,
+                // TODO: Review if this input.sentBy exists in the frontend
                 input: input,
+                //@ts-ignore
                 session: webchatState.session,
+                // TODO: Review why we were passing lastRoutePath, is only for devMode?
                 lastRoutePath: webchatState.lastRoutePath,
             });
         }
@@ -161,9 +116,10 @@ export const Webchat = forwardRef((props, ref) => {
         if (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 }), (props.theme.message && props.theme.message.customTypes) ||
-                        props.theme.customMessageTypes);
+                    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);
+                    //@ts-ignore
                     if (newMessageComponent)
                         addMessageComponent(newMessageComponent);
                 });
@@ -179,12 +135,20 @@ export const Webchat = forwardRef((props, ref) => {
             updateDevSettings(devSettings);
         else if (initialDevSettings)
             updateDevSettings(initialDevSettings);
-        if (lastMessageUpdate)
+        if (lastMessageUpdate) {
             updateLastMessageDate(lastMessageUpdate);
-        if (themeUpdates !== undefined)
+        }
+        if (themeUpdates !== undefined) {
             updateTheme(merge(props.theme, themeUpdates), themeUpdates);
-        if (props.onInit)
-            setTimeout(() => props.onInit(), 100);
+        }
+        if (props.onInit) {
+            setTimeout(() => {
+                if (typeof props.onInit === 'function') {
+                    props.onInit();
+                    session.user = updateUserLocaleAndCountry(session.user);
+                }
+            }, 100);
+        }
     }, []);
     useEffect(() => {
         if (!webchatState.isWebchatOpen) {
@@ -195,8 +159,9 @@ export const Webchat = forwardRef((props, ref) => {
         }
     }, [webchatState.isWebchatOpen]);
     useEffect(() => {
-        if (onStateChange && typeof onStateChange === 'function') {
-            onStateChange(webchatState);
+        const { messagesJSON, session } = webchatState;
+        if (onStateChange && typeof onStateChange === 'function' && session.user) {
+            onStateChange({ messagesJSON, user: session.user });
         }
         saveWebchatState(webchatState);
     }, [
@@ -225,11 +190,12 @@ export const Webchat = forwardRef((props, ref) => {
     const openWebview = (webviewComponent, params) => {
         updateWebview(webviewComponent, params);
     };
-    const textareaRef = useRef(null);
+    const textareaRef = useRef();
     const closeWebview = (options) => __awaiter(void 0, void 0, void 0, function* () {
-        updateWebview();
+        var _b;
+        removeWebview();
         if (userInputEnabled) {
-            textareaRef.current.focus();
+            (_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
         if (options === null || options === void 0 ? void 0 : options.payload) {
             yield sendPayload(options.payload);
@@ -239,8 +205,8 @@ export const Webchat = forwardRef((props, ref) => {
             yield sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`);
         }
     });
-    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
-    const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
+    const persistentMenuOptions = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.persistentMenu);
+    const darkBackgroundMenu = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu);
     const getBlockInputs = (rule, inputData) => {
         const processedInput = rule.preprocess
             ? rule.preprocess(inputData)
@@ -252,18 +218,27 @@ export const Webchat = forwardRef((props, ref) => {
         });
     };
     const checkBlockInput = input => {
+        var _a;
         // if is a text we check if it is a serialized RE
-        const blockInputs = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
+        const blockInputs = (_a = webchatState.theme.userInput) === null || _a === void 0 ? void 0 : _a.blockInputs;
         if (!Array.isArray(blockInputs))
             return false;
         for (const rule of blockInputs) {
             if (getBlockInputs(rule, input.data)) {
-                addMessageComponent(_jsx(Text, Object.assign({ id: input.id, sentBy: SENDERS.user, blob: false, style: {
+                addMessageComponent(_jsx(Text
+                // Is necessary to add the id of the input
+                // to keep the input.id generated in the frontend as id of the message
+                // @ts-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,
                         padding: '8px 12px',
                     } }, { children: rule.message })));
-                updateReplies(false);
+                removeReplies();
                 return true;
             }
         }
@@ -275,34 +250,35 @@ export const Webchat = forwardRef((props, ref) => {
     const persistentMenu = () => {
         return (_jsx(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);
-    };
+    const coverComponent = webchatState.theme.coverComponent;
+    const coverComponentProps = (_a = webchatState.theme.coverComponent) === null || _a === void 0 ? void 0 : _a.props;
     useEffect(() => {
-        if (!CoverComponent)
+        if (!coverComponent)
             return;
         if (!botonicState ||
-            (botonicState.messages && botonicState.messages.length == 0))
+            (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 (_jsx(CoverComponent, Object.assign({ closeComponent: closeCoverComponent }, coverComponentProps)));
-        return null;
-    };
     const messageComponentFromInput = input => {
         let messageComponent = null;
         if (isText(input)) {
-            messageComponent = (_jsx(Text, Object.assign({ id: input.id, payload: input.payload, sentBy: SENDERS.user }, { children: input.data })));
+            messageComponent = (_jsx(Text
+            // Is necessary to add the id of the input
+            // to keep the input.id generated in the frontend as id of the message
+            // @ts-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 })));
         }
         else if (isMedia(input)) {
             const temporaryDisplayUrl = URL.createObjectURL(input.data);
+            // TODO: We should use URL.revokeObjectURL(temporaryDisplayUrl) when the component is unmounted
+            // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static#memory_management
             const mediaProps = {
                 id: input.id,
                 sentBy: SENDERS.user,
@@ -338,14 +314,17 @@ export const Webchat = forwardRef((props, ref) => {
         sendUserInput(input);
         updateLatestInput(input);
         isOnline() && updateLastMessageDate(currentDateString());
-        updateReplies(false);
+        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 }));
+    const updateSessionWithUser = (userToUpdate) => {
+        console.log('userToUpdate', userToUpdate);
+        updateSession(merge(webchatState.session, { user: userToUpdate }));
+    };
     useImperativeHandle(ref, () => ({
         addBotResponse: ({ response, session, lastRoutePath }) => {
             updateTyping(false);
@@ -370,7 +349,7 @@ export const Webchat = forwardRef((props, ref) => {
                 updateLastRoutePath(lastRoutePath);
             updateLastMessageDate(currentDateString());
         },
-        setTyping: typing => updateTyping(typing),
+        setTyping: (typing) => updateTyping(typing),
         addUserMessage: message => sendInput(message),
         updateUser: updateSessionWithUser,
         openWebchat: () => toggleWebchat(true),
@@ -384,24 +363,22 @@ export const Webchat = forwardRef((props, ref) => {
         },
         unmountCustomComponent: () => doRenderCustomComponent(false),
         toggleCoverComponent: () => toggleCoverComponent(!webchatState.isCoverComponentOpen),
-        openWebviewApi: component => openWebviewT(component),
-        setError,
         setOnline,
         getMessages: () => webchatState.messagesJSON,
         isOnline,
         clearMessages: () => {
             clearMessages();
-            updateReplies(false);
+            removeReplies();
         },
         getLastMessageUpdate: () => webchatState.lastMessageUpdate,
         updateMessageInfo: (msgId, messageInfo) => {
-            const messageToUpdate = webchatState.messagesJSON.filter(m => m.id == msgId)[0];
+            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 => {
+        updateWebchatSettings: (settings) => {
             if (settings.user) {
                 updateSessionWithUser(settings.user);
             }
@@ -409,20 +386,18 @@ export const Webchat = forwardRef((props, ref) => {
             updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates);
             updateTyping(false);
         },
-        closeWebview: closeWebview,
+        closeWebview: (options) => __awaiter(void 0, void 0, void 0, function* () { return closeWebview(options); }),
     }));
     const resolveCase = () => {
         updateHandoff(false);
-        updateSession(Object.assign(Object.assign({}, webchatState.session), { _botonic_action: null }));
+        updateSession(Object.assign(Object.assign({}, webchatState.session), { _botonic_action: undefined }));
     };
     const prevSession = usePrevious(webchatState.session);
     useEffect(() => {
         // Resume conversation after handoff
-        if (prevSession &&
-            prevSession._botonic_action &&
-            !webchatState.session._botonic_action) {
+        if ((prevSession === null || prevSession === void 0 ? void 0 : prevSession._botonic_action) && !webchatState.session._botonic_action) {
             const action = getParsedAction(prevSession._botonic_action);
-            if (action && action.on_finish)
+            if (action === null || action === void 0 ? void 0 : action.on_finish)
                 sendPayload(action.on_finish);
         }
     }, [webchatState.session._botonic_action]);
@@ -439,24 +414,18 @@ export const Webchat = forwardRef((props, ref) => {
         yield sendInput(input);
     });
     const sendAttachment = (attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        if (attachment.file) {
-            const attachmentType = getMediaType(attachment.file.type);
+        if (attachment) {
+            const attachmentType = getMediaType(attachment.type);
             if (!attachmentType)
                 return;
             const input = {
                 type: attachmentType,
-                data: attachment.file,
+                data: attachment,
             };
             yield sendInput(input);
-            setCurrentAttachment(undefined);
+            setCurrentAttachment();
         }
     });
-    const webviewRequestContext = {
-        closeWebview: closeWebview,
-        getString: stringId => props.getString(stringId, webchatState.session),
-        params: webchatState.webviewParams || {},
-        session: webchatState.session || {},
-    };
     useEffect(() => {
         if (firstUpdate.current) {
             firstUpdate.current = false;
@@ -471,21 +440,10 @@ export const Webchat = forwardRef((props, ref) => {
         }
     }, [webchatState.isWebchatOpen]);
     const isUserInputEnabled = () => {
-        const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
+        const isUserInputEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableUserInput);
         return isUserInputEnabled && !webchatState.isCoverComponentOpen;
     };
     const userInputEnabled = isUserInputEnabled();
-    const webchatWebview = () => (_jsx(WebviewRequestContext.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 (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);
@@ -509,12 +467,14 @@ export const Webchat = forwardRef((props, ref) => {
         else
             return customComponent;
     };
-    const WebchatComponent = (_jsxs(WebchatContext.Provider, Object.assign({ value: {
+    const WebchatComponent = (_jsx(WebchatContext.Provider, Object.assign({ value: {
             addMessage,
             getThemeProperty,
+            closeWebview,
             openWebview,
             resolveCase,
             resetUnreadMessages,
+            setIsInputFocused,
             setLastMessageVisible,
             sendAttachment,
             sendInput,
@@ -523,25 +483,27 @@ export const Webchat = forwardRef((props, ref) => {
             toggleWebchat,
             toggleEmojiPicker,
             togglePersistentMenu,
+            toggleCoverComponent,
             updateLatestInput,
             updateMessage,
             updateReplies,
             updateUser: updateSessionWithUser,
             updateWebchatDevSettings: updateWebchatDevSettings,
-            webchatState,
             trackEvent: props.onTrackEvent,
-            webchatRef,
+            webchatState,
+            webchatContainerRef,
             chatAreaRef,
             inputPanelRef,
             headerRef,
+            repliesRef,
             scrollableMessagesListRef,
-        } }, { children: [!webchatState.isWebchatOpen && _jsx(TriggerButton, {}), webchatState.isWebchatOpen && (_jsxs(StyledWebchat, Object.assign({ id: BotonicContainerId.Webchat, ref: webchatRef, 
-                // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-                role: ROLES.WEBCHAT, width: webchatState.width, height: webchatState.height, style: Object.assign(Object.assign({}, webchatState.theme.style), mobileStyle) }, { children: [_jsx(WebchatHeader, { id: BotonicContainerId.Header, ref: headerRef, onCloseClick: () => {
-                            toggleWebchat(false);
-                        } }), 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, { persistentMenu: props.persistentMenu, enableEmojiPicker: props.enableEmojiPicker, enableAttachments: props.enableAttachments, handleAttachment: handleAttachment, textareaRef: textareaRef, host: host, onUserInput: props.onUserInput })), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered &&
-                        customComponent &&
-                        _renderCustomComponent()] })))] })));
+        } }, { children: _jsxs(ThemeProvider, Object.assign({ theme: webchatState.theme }, { children: [!webchatState.isWebchatOpen && _jsx(TriggerButton, {}), webchatState.isWebchatOpen && (_jsxs(StyledWebchat, Object.assign({ id: 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, {}), webchatState.isCustomComponentRendered &&
+                                    customComponent &&
+                                    _renderCustomComponent()] }))] })))] })) })));
     return props.shadowDOM ? (_jsx(StyleSheetManager, Object.assign({ target: host }, { children: WebchatComponent }))) : (WebchatComponent);
 });
+Webchat.displayName = 'Webchat';
+export { Webchat };
 //# sourceMappingURL=webchat.js.map