@botonic/react 0.31.0-alpha.4 → 0.31.0-alpha.6

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

@@ -0,0 +1,167 @@
+/// <reference types="react" />
+import { BlockInputOption, ButtonProps, CustomMessageType } from '../../components/index-types';
+interface ImagePreviewerProps {
+    src: string;
+    isPreviewerOpened: boolean;
+    closePreviewer: () => void;
+}
+export interface CoverComponentProps {
+    closeComponent: () => void;
+}
+export interface CoverComponentOptions {
+    component: React.ComponentType<CoverComponentProps>;
+    props?: any;
+}
+export type PersistentMenuCloseOption = {
+    closeLabel: string;
+};
+export type PersistentMenuOption = {
+    label: string;
+} & ButtonProps;
+export type PersistentMenuOptionsTheme = (PersistentMenuCloseOption | PersistentMenuOption)[];
+export interface PersistentMenuOptionsProps {
+    onClick: () => void;
+    options: any;
+}
+export interface BlobProps {
+    blobTick?: boolean;
+    blobTickStyle?: any;
+    blobWidth?: string;
+    imageStyle?: any;
+}
+export interface ThemeProps {
+    style?: any;
+    coverComponent?: CoverComponentOptions;
+    mobileBreakpoint?: number;
+    mobileStyle?: any;
+    webview?: {
+        style?: any;
+        header?: {
+            style?: any;
+        };
+    };
+    animations?: {
+        enable?: boolean;
+    };
+    intro?: {
+        style?: any;
+        image?: string;
+        custom?: React.ComponentType;
+    };
+    brand?: {
+        color?: string;
+        image?: string;
+    };
+    header?: {
+        title?: string;
+        subtitle?: string;
+        image?: string;
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    customMessageTypes?: CustomMessageType[];
+    message?: {
+        bot?: BlobProps & {
+            image?: string;
+            style?: any;
+        };
+        agent?: {
+            image?: string;
+        };
+        user?: BlobProps & {
+            style?: any;
+        };
+        customTypes?: CustomMessageType[];
+        style?: any;
+        timestamps?: {
+            withImage?: boolean;
+            format: () => string;
+            style?: any;
+            enable?: boolean;
+        };
+    };
+    button?: {
+        autodisable?: boolean;
+        disabledstyle?: any;
+        hoverBackground?: string;
+        hoverTextColor?: string;
+        messageType?: 'text' | 'payload';
+        urlIcon?: {
+            image?: string;
+            enable?: boolean;
+        };
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    replies?: {
+        align?: 'left' | 'center' | 'right';
+        wrap?: 'wrap' | 'nowrap';
+    };
+    carousel?: {
+        arrow?: {
+            left: {
+                custom?: React.ComponentType;
+            };
+            right: {
+                custom?: React.ComponentType;
+            };
+        };
+        enableArrows?: boolean;
+    };
+    reply?: {
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    triggerButton?: {
+        image?: string;
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    notifications?: {
+        enable?: boolean;
+        banner?: {
+            custom?: React.ComponentType;
+            enable?: boolean;
+            text?: string;
+        };
+        triggerButton?: {
+            enable?: boolean;
+        };
+    };
+    scrollButton?: {
+        enable?: boolean;
+        custom?: React.ComponentType;
+    };
+    markdownStyle?: string;
+    userInput?: {
+        attachments?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        blockInputs?: BlockInputOption[];
+        box?: {
+            placeholder: string;
+            style?: any;
+        };
+        emojiPicker?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        menu?: {
+            darkBackground?: boolean;
+            custom?: React.ComponentType<PersistentMenuOptionsProps>;
+        };
+        menuButton?: {
+            custom?: React.ComponentType;
+        };
+        persistentMenu?: PersistentMenuOptionsTheme;
+        sendButton?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        enable?: boolean;
+        style?: any;
+    };
+    imagePreviewer?: React.ComponentType<ImagePreviewerProps>;
+}
+export {};

package/lib/esm/webchat/theme/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/esm/webchat/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/webchat/theme/types.ts"],"names":[],"mappings":""}

package/lib/esm/webchat/trigger-button/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { ROLES, WEBCHAT } from '../../constants';
-import { WebchatContext } from '../../contexts';
 import { resolveImage } from '../../util/environment';
+import { WebchatContext } from '../../webchat/context';
 import { StyledTriggerButton, TriggerImage, UnreadMessagesCounter, } from './styles';
 export const TriggerButton = () => {
     const { webchatState, getThemeProperty, toggleWebchat } = useContext(WebchatContext);

package/lib/esm/webchat/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/trigger-button/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,GACtB,MAAM,UAAU,CAAA;AAEjB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAgB,EAAE;IAC7C,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,GACrD,UAAU,CAAC,cAAc,CAAC,CAAA;IAE5B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,KAAK,GAAG,gBAAgB,CAC5B,OAAO,CAAC,iBAAiB,CAAC,kBAAkB,EAC5C,SAAS,CACV,CAAA;QAED,IAAI,CAAC,KAAK,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAA;YAC7D,OAAO,IAAI,CAAA;SACZ;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,eAAe,EAAE,CAAA;IAE5C,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,OAAO,CAAC,iBAAiB,CAAC,kBAAkB,CAC7C,CAAA;IAED,MAAM,iCAAiC,GAAG,gBAAgB,CACxD,OAAO,CAAC,iBAAiB,CAAC,iCAAiC,EAC3D,KAAK,CACN,CAAA;IAED,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,OAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,iCAAiC,CAClC,CAAA;IAED,MAAM,mBAAmB,GAAG,gBAAgB,CAC1C,OAAO,CAAC,iBAAiB,CAAC,aAAa,EACvC,SAAS,CACV,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;QACjC,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,OAAO,CACL,6BAAK,OAAO,EAAE,WAAW,iBACtB,YAAY,CAAC,iBAAiB,KAAK,CAAC,IAAI,oBAAoB,IAAI,CAC/D,KAAC,qBAAqB,kBAAC,SAAS,EAAC,uBAAuB,gBACrD,YAAY,CAAC,iBAAiB,IACT,CACzB,EACA,mBAAmB,CAAC,CAAC,CAAC,CACrB,KAAC,mBAAmB,KAAG,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,kBAClB,IAAI,EAAE,KAAK,CAAC,cAAc,EAC1B,KAAK,EAAE,kBAAkB,gBAExB,kBAAkB,IAAI,CACrB,KAAC,YAAY,IAAC,GAAG,EAAE,YAAY,CAAC,kBAAkB,CAAC,GAAI,CACxD,IACmB,CACvB,KACG,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/trigger-button/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,GACtB,MAAM,UAAU,CAAA;AAEjB,MAAM,CAAC,MAAM,aAAa,GAAG,GAAgB,EAAE;IAC7C,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,GACrD,UAAU,CAAC,cAAc,CAAC,CAAA;IAE5B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,KAAK,GAAG,gBAAgB,CAC5B,OAAO,CAAC,iBAAiB,CAAC,kBAAkB,EAC5C,SAAS,CACV,CAAA;QAED,IAAI,CAAC,KAAK,EAAE;YACV,YAAY,CAAC,KAAK,CAAC,kBAAkB,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAA;YAC7D,OAAO,IAAI,CAAA;SACZ;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,eAAe,EAAE,CAAA;IAE5C,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,OAAO,CAAC,iBAAiB,CAAC,kBAAkB,CAC7C,CAAA;IAED,MAAM,iCAAiC,GAAG,gBAAgB,CACxD,OAAO,CAAC,iBAAiB,CAAC,iCAAiC,EAC3D,KAAK,CACN,CAAA;IAED,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,OAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,iCAAiC,CAClC,CAAA;IAED,MAAM,mBAAmB,GAAG,gBAAgB,CAC1C,OAAO,CAAC,iBAAiB,CAAC,aAAa,EACvC,SAAS,CACV,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,KAAU,EAAE,EAAE;QACjC,aAAa,CAAC,IAAI,CAAC,CAAA;QACnB,KAAK,CAAC,cAAc,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,OAAO,CACL,6BAAK,OAAO,EAAE,WAAW,iBACtB,YAAY,CAAC,iBAAiB,KAAK,CAAC,IAAI,oBAAoB,IAAI,CAC/D,KAAC,qBAAqB,kBAAC,SAAS,EAAC,uBAAuB,gBACrD,YAAY,CAAC,iBAAiB,IACT,CACzB,EACA,mBAAmB,CAAC,CAAC,CAAC,CACrB,KAAC,mBAAmB,KAAG,CACxB,CAAC,CAAC,CAAC,CACF,KAAC,mBAAmB,kBAClB,IAAI,EAAE,KAAK,CAAC,cAAc,EAC1B,KAAK,EAAE,kBAAkB,gBAExB,kBAAkB,IAAI,CACrB,KAAC,YAAY,IAAC,GAAG,EAAE,YAAY,CAAC,kBAAkB,CAAC,GAAI,CACxD,IACmB,CACvB,KACG,CACP,CAAA;AACH,CAAC,CAAA"}

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

@@ -2,14 +2,12 @@ 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 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 } 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 { 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';
@@ -19,65 +17,20 @@ import { _getThemeProperty, getServerErrorMessage, initSession, shouldKeepSessio
 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%;
-`;
 // eslint-disable-next-line complexity, react/display-name
-export const Webchat = forwardRef((props, ref) => {
+const Webchat = forwardRef((props, ref) => {
     var _a;
-    const { addMessage, addMessageComponent, clearMessages, doRenderCustomComponent, openWebviewT, resetUnreadMessages, setCurrentAttachment, setError, setIsInputFocused, setLastMessageVisible, setOnline, toggleCoverComponent, toggleEmojiPicker, togglePersistentMenu, toggleWebchat, updateDevSettings, updateHandoff, updateLastMessageDate, updateLastRoutePath, updateLatestInput, updateMessage, updateReplies, updateSession, updateTheme, updateTyping, updateWebview, webchatState, webchatRef, chatAreaRef, inputPanelRef, headerRef, scrollableMessagesListRef,
+    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, webchatRef, chatAreaRef, inputPanelRef, headerRef, repliesRef, scrollableMessagesListRef,
     // eslint-disable-next-line react-hooks/rules-of-hooks
      } = props.webchatHooks || useWebchat();
     const firstUpdate = useRef(true);
@@ -94,7 +47,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,
@@ -105,19 +58,17 @@ 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) {
@@ -125,8 +76,11 @@ export const Webchat = forwardRef((props, ref) => {
             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,
             });
         }
@@ -163,9 +117,10 @@ export const Webchat = forwardRef((props, ref) => {
         if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
             if (messages) {
                 messages.forEach(message => {
+                    var _a, _b, _c;
                     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) || ((_c = props.theme) === null || _c === void 0 ? void 0 : _c.customMessageTypes));
+                    //@ts-ignore
                     if (newMessageComponent)
                         addMessageComponent(newMessageComponent);
                 });
@@ -181,12 +136,15 @@ 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(() => props.onInit && props.onInit(), 100);
+        }
     }, []);
     useEffect(() => {
         if (!webchatState.isWebchatOpen) {
@@ -197,8 +155,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);
     }, [
@@ -227,11 +186,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);
@@ -260,12 +220,20 @@ export const Webchat = forwardRef((props, ref) => {
             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;
             }
         }
@@ -293,12 +261,23 @@ export const Webchat = forwardRef((props, ref) => {
     const messageComponentFromInput = input => {
         let messageComponent = null;
         if (isText(input)) {
-            messageComponent = (
-            //TODO: Remove id and payload from Text component
-            _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 sould 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,
@@ -334,14 +313,14 @@ 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) => updateSession(merge(webchatState.session, { user: userToUpdate }));
     useImperativeHandle(ref, () => ({
         addBotResponse: ({ response, session, lastRoutePath }) => {
             updateTyping(false);
@@ -366,7 +345,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),
@@ -380,24 +359,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);
             }
@@ -405,20 +382,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]);
@@ -435,21 +410,20 @@ 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),
+        closeWebview: (options) => __awaiter(void 0, void 0, void 0, function* () { return yield closeWebview(options); }),
         params: webchatState.webviewParams || {},
         session: webchatState.session || {},
     };
@@ -526,20 +500,23 @@ export const Webchat = forwardRef((props, ref) => {
             updateReplies,
             updateUser: updateSessionWithUser,
             updateWebchatDevSettings: updateWebchatDevSettings,
-            webchatState,
             trackEvent: props.onTrackEvent,
+            webchatState,
+            // TODO: Review if need theme inside Context, already exist innside webchatState
+            theme,
             webchatRef,
             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.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, { persistentMenu: props.persistentMenu, enableEmojiPicker: props.enableEmojiPicker, enableAttachments: props.enableAttachments, handleAttachment: handleAttachment, textareaRef: textareaRef, host: host, onUserInput: props.onUserInput })), webchatState.webview && webchatWebview(), webchatState.isCustomComponentRendered &&
+                role: ROLES.WEBCHAT, width: webchatState.width, height: webchatState.height, style: Object.assign(Object.assign({}, webchatState.theme.style), mobileStyle) }, { 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, { persistentMenu: props.persistentMenu, enableEmojiPicker: props.enableEmojiPicker, enableAttachments: props.enableAttachments, handleAttachment: handleAttachment, textareaRef: textareaRef, host: host, onUserInput: props.onUserInput })), webchatState.webview && webchatWebview(), 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