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

package/lib/cjs/webchat/webview/index.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebviewContainer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const contexts_1 = require("../../contexts");
+const context_1 = require("../context");
+const header_1 = require("./header");
+const styles_1 = require("./styles");
+const WebviewContainer = () => {
+    const { closeWebview, getThemeProperty, webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
+    const webviewRequestContext = {
+        closeWebview: (options) => tslib_1.__awaiter(void 0, void 0, void 0, function* () { return yield closeWebview(options); }),
+        params: webchatState.webviewParams || {},
+        session: webchatState.session || {},
+    };
+    const Webview = webchatState.webview;
+    const close = (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        if (e.data === 'botonicCloseWebview') {
+            console.log('Received close message from webview');
+            yield closeWebview();
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('message', close, false);
+        return () => window.removeEventListener('message', close, false);
+    }, []);
+    // TODO: Review how to split the logic of rendering a webview in local development and production
+    // In local development, Webview is a component. In production it is the URL of the webview
+    const isUrlToWebview = typeof Webview === 'string';
+    return ((0, jsx_runtime_1.jsx)(contexts_1.WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWebview, Object.assign({ role: constants_1.ROLES.WEBVIEW, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)) }, { children: [(0, jsx_runtime_1.jsx)(header_1.WebviewHeader, {}), (0, jsx_runtime_1.jsx)(styles_1.StyledWebviewContent, { children: isUrlToWebview ? ((0, jsx_runtime_1.jsx)(styles_1.StyledFrame, { src: Webview })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledFrameAsDiv, { children: (0, jsx_runtime_1.jsx)(Webview, {}) })) })] })) })));
+};
+exports.WebviewContainer = WebviewContainer;
+//# sourceMappingURL=index.js.map

package/lib/cjs/webchat/webview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/webview/index.tsx"],"names":[],"mappings":";;;;;AACA,iCAAoD;AAEpD,+CAAgD;AAChD,6CAA2E;AAC3E,wCAA2C;AAC3C,qCAAwC;AACxC,qCAKiB;AAEV,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,GACpD,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAE5B,MAAM,qBAAqB,GAAG;QAC5B,YAAY,EAAE,CAAO,OAA6B,EAAE,EAAE,0DACpD,OAAA,MAAM,YAAY,CAAC,OAAO,CAAC,CAAA,GAAA;QAC7B,MAAM,EAAE,YAAY,CAAC,aAAa,IAAK,EAA0B;QACjE,OAAO,EAAE,YAAY,CAAC,OAAO,IAAK,EAA2B;KAC9D,CAAA;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,OAAuC,CAAA;IAEpE,MAAM,KAAK,GAAG,CAAO,CAAM,EAAE,EAAE;QAC7B,IAAI,CAAC,CAAC,IAAI,KAAK,qBAAqB,EAAE;YACpC,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAA;YAClD,MAAM,YAAY,EAAE,CAAA;SACrB;IACH,CAAC,CAAA,CAAA;IAED,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;QAEhD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAA;IAClE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,iGAAiG;IACjG,2FAA2F;IAC3F,MAAM,cAAc,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAA;IAElD,OAAO,CACL,uBAAC,gCAAqB,CAAC,QAAQ,kBAAC,KAAK,EAAE,qBAAqB,gBAC1D,wBAAC,sBAAa,kBACZ,IAAI,EAAE,iBAAK,CAAC,OAAO,EACnB,KAAK,oBACA,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,kBAG7D,uBAAC,sBAAa,KAAG,EACjB,uBAAC,6BAAoB,cAClB,cAAc,CAAC,CAAC,CAAC,CAChB,uBAAC,oBAAW,IAAC,GAAG,EAAE,OAAO,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,uBAAC,yBAAgB,cACf,uBAAC,OAAO,KAAG,GACM,CACpB,GACoB,KACT,IACe,CAClC,CAAA;AACH,CAAC,CAAA;AAnDY,QAAA,gBAAgB,oBAmD5B"}

package/lib/cjs/webchat/webview/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledWebview: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWebviewHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCloseHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWebviewContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FrameStyles = "\n  border-style: none;\n  width: 100%;\n  height: 100%;\n";
+export declare const StyledFrame: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFrameAsDiv: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/cjs/webchat/webview/styles.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFrameAsDiv = exports.StyledFrame = exports.FrameStyles = exports.StyledWebviewContent = exports.StyledCloseHeader = exports.StyledWebviewHeader = exports.StyledWebview = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const constants_1 = require("../../constants");
+exports.StyledWebview = styled_components_1.default.div `
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${constants_1.COLORS.SOLID_WHITE};
+  z-index: 2;
+  border-radius: ${props => props.theme.style.borderRadius};
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    position: ${props => props.theme.mobileStyle.position};
+    right: ${props => props.theme.mobileStyle.right};
+    bottom: ${props => props.theme.mobileStyle.bottom};
+    width: ${props => props.theme.mobileStyle.width};
+    height: ${props => props.theme.mobileStyle.height};
+    border-radius: ${props => props.theme.mobileStyle.borderRadius};
+    font-size: ${props => props.theme.mobileStyle.fontSize};
+  }
+`;
+exports.StyledWebviewHeader = styled_components_1.default.div `
+  flex: none;
+  text-align: right;
+  background-color: ${constants_1.COLORS.WILD_SAND_WHITE};
+  border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-bottom: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-radius: ${props => { var _a, _b; return (_b = (_a = props.theme.header) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.borderRadius; }};
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    border-radius: 0px;
+  }
+`;
+exports.StyledCloseHeader = styled_components_1.default.div `
+  display: inline-block;
+  padding: 8px 12px;
+  cursor: pointer;
+`;
+exports.StyledWebviewContent = styled_components_1.default.div `
+  flex: 1;
+  overflow: auto;
+`;
+exports.FrameStyles = `
+  border-style: none;
+  width: 100%;
+  height: 100%;
+`;
+exports.StyledFrame = styled_components_1.default.iframe `
+  ${exports.FrameStyles}
+`;
+exports.StyledFrameAsDiv = styled_components_1.default.div `
+  ${exports.FrameStyles}
+`;
+//# sourceMappingURL=styles.js.map

package/lib/cjs/webchat/webview/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/webview/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEtC,+CAAiD;AAEpC,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;sBAOjB,kBAAM,CAAC,WAAW;;mBAErB,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;uBAEnC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB;gBAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ;aAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK;cACrC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM;aACxC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK;cACrC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM;qBAChC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY;iBACjD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ;;CAEzD,CAAA;AAEY,QAAA,mBAAmB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;sBAGvB,kBAAM,CAAC,eAAe;0BAClB,kBAAM,CAAC,qBAAqB;6BACzB,kBAAM,CAAC,qBAAqB;mBACtC,KAAK,CAAC,EAAE,eAAC,OAAA,MAAA,MAAA,KAAK,CAAC,KAAK,CAAC,MAAM,0CAAE,KAAK,0CAAE,YAAY,CAAA,EAAA;;uBAE5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB;;;CAG3D,CAAA;AACY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAA;AAEY,QAAA,oBAAoB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAA;AAEY,QAAA,WAAW,GAAG;;;;CAI1B,CAAA;AAEY,QAAA,WAAW,GAAG,2BAAM,CAAC,MAAM,CAAA;IACpC,mBAAW;CACd,CAAA;AAEY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;IACtC,mBAAW;CACd,CAAA"}

package/lib/cjs/webchat-app.d.ts

@@ -1,102 +1,111 @@
-export class WebchatApp {
-    constructor({ theme, persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, hostId, shadowDOM, defaultDelay, defaultTyping, storage, storageKey, onInit, onOpen, onClose, onMessage, onTrackEvent, onConnectionChange, appId, visibility, server, }: {
-        theme?: {} | undefined;
-        persistentMenu: any;
-        coverComponent: any;
-        blockInputs: any;
-        enableEmojiPicker: any;
-        enableAttachments: any;
-        enableUserInput: any;
-        enableAnimations: any;
-        hostId: any;
-        shadowDOM: any;
-        defaultDelay: any;
-        defaultTyping: any;
-        storage: any;
-        storageKey: any;
-        onInit: any;
-        onOpen: any;
-        onClose: any;
-        onMessage: any;
-        onTrackEvent: any;
-        onConnectionChange: any;
-        appId: any;
-        visibility: any;
-        server: any;
-    });
-    theme: {};
-    persistentMenu: any;
-    coverComponent: any;
-    blockInputs: any;
-    enableEmojiPicker: any;
-    enableAttachments: any;
-    enableUserInput: any;
-    enableAnimations: any;
-    shadowDOM: boolean;
-    hostId: any;
-    defaultDelay: any;
-    defaultTyping: any;
-    storage: any;
-    storageKey: any;
-    onInit: any;
-    onOpen: any;
-    onClose: any;
-    onMessage: any;
-    onTrackEvent: any;
-    onConnectionChange: any;
-    visibility: any;
-    server: any;
-    webchatRef: React.RefObject<any>;
-    appId: any;
-    createRootElement(host: any): void;
-    host: any;
-    getReactMountNode(node: any): any;
-    onInitWebchat(...args: any[]): void;
-    onOpenWebchat(...args: any[]): void;
-    onCloseWebchat(...args: any[]): void;
-    onUserInput({ user, input }: {
-        user: any;
-        input: any;
-    }): Promise<void>;
+import { ServerConfig } from '@botonic/core';
+import React from 'react';
+import { BlockInputOption, WebchatSettingsProps } from './components';
+import { CloseWebviewOptions } from './contexts';
+import { ActionRequest, Event, EventArgs, OnStateChangeArgs, OnUserInputArgs, WebchatArgs, WebchatMessage, WebchatRef } from './index-types';
+import { CoverComponentOptions, PersistentMenuOptionsTheme, WebchatTheme } from './webchat/theme/types';
+export declare class WebchatApp {
+    theme?: Partial<WebchatTheme>;
+    persistentMenu?: PersistentMenuOptionsTheme;
+    coverComponent?: CoverComponentOptions;
+    blockInputs?: BlockInputOption[];
+    enableEmojiPicker?: boolean;
+    enableAttachments?: boolean;
+    enableUserInput?: boolean;
+    enableAnimations?: boolean;
+    hostId?: string;
+    shadowDOM?: boolean | (() => boolean);
+    defaultDelay?: number;
+    defaultTyping?: number;
+    storage?: Storage | null;
+    storageKey: string;
+    onInit?: (app: WebchatApp, args: any) => void;
+    onOpen?: (app: WebchatApp, args: any) => void;
+    onClose?: (app: WebchatApp, args: any) => void;
+    onMessage?: (app: WebchatApp, message: WebchatMessage) => void;
+    onTrackEvent?: (request: ActionRequest, eventName: string, args?: EventArgs) => Promise<void>;
+    onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void;
+    appId?: string;
+    visibility?: boolean | (() => boolean) | 'dynamic';
+    server?: ServerConfig;
+    webchatRef: React.RefObject<WebchatRef | null>;
+    private reactRoot;
+    private host;
+    private hubtypeService;
+    constructor({ theme, persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, hostId, shadowDOM, defaultDelay, defaultTyping, storage, storageKey, onInit, onOpen, onClose, onMessage, onTrackEvent, onConnectionChange, appId, visibility, server, }: WebchatArgs);
+    createRootElement(host: HTMLElement | null): void;
+    getReactMountNode(node?: (HTMLElement | null) | ShadowRoot): Element | DocumentFragment;
+    onInitWebchat(...args: [any]): void;
+    onOpenWebchat(...args: [any]): void;
+    onCloseWebchat(...args: [any]): void;
+    onUserInput({ user, input }: OnUserInputArgs): Promise<void>;
+    onTrackEventWebchat(request: ActionRequest, eventName: string, args?: EventArgs): Promise<void>;
     onConnectionRegained(): Promise<void>;
-    onStateChange({ session: { user }, messagesJSON }: {
-        session: {
-            user: any;
-        };
-        messagesJSON: any;
-    }): void;
-    hubtypeService: HubtypeService | undefined;
-    onServiceEvent(event: any): void;
+    onStateChange(args: OnStateChangeArgs): void;
+    onServiceEvent(event: Event): void;
     updateUser(user: any): void;
+    setSystemLocale(locale: string): void;
+    setUserLocale(locale: string): void;
+    setUserCountry(country: string): void;
     addBotMessage(message: any): void;
-    addBotText(text: any): void;
+    addBotText(text: string): void;
     addUserMessage(message: any): void;
-    addUserText(text: any): void;
-    addUserPayload(payload: any): void;
-    setTyping(typing: any): void;
+    addUserText(text: string): void;
+    addUserPayload(payload: string): void;
+    setTyping(typing: boolean): void;
     open(): void;
     close(): void;
-    closeWebview(): Promise<void>;
+    closeWebview(options?: CloseWebviewOptions): Promise<void>;
     toggle(): void;
     openCoverComponent(): void;
     closeCoverComponent(): void;
     renderCustomComponent(_customComponent: any): void;
     unmountCustomComponent(): void;
     toggleCoverComponent(): void;
-    getMessages(): any;
+    getMessages(): {
+        id: string;
+        ack: number;
+        unsentInput: import("@botonic/core").Input;
+    }[] | undefined;
     clearMessages(): void;
     getVisibility(): Promise<boolean>;
-    getLastMessageUpdate(): any;
-    updateMessageInfo(msgId: any, messageInfo: any): any;
-    updateWebchatSettings(settings: any): any;
-    getComponent(host: any, optionsAtRuntime?: {}): JSX.Element;
-    isWebchatVisible({ appId }: {
-        appId: any;
-    }): Promise<boolean>;
-    isOnline(): any;
-    resolveWebchatVisibility(optionsAtRuntime: any): Promise<boolean>;
+    getLastMessageUpdate(): string | undefined;
+    updateMessageInfo(msgId: string, messageInfo: any): void | undefined;
+    updateWebchatSettings(settings: WebchatSettingsProps): void | undefined;
+    createInitialTheme(optionsAtRuntime?: WebchatArgs): WebchatTheme & Partial<WebchatTheme>;
+    createInitialThemeUserInput(theme: WebchatTheme, optionsAtRuntime?: WebchatArgs): {
+        attachments?: {
+            enable?: boolean | undefined;
+            custom?: React.ComponentType<{}> | undefined;
+        } | undefined;
+        blockInputs?: BlockInputOption[] | undefined;
+        box?: {
+            placeholder: string;
+            style?: any;
+        } | undefined;
+        emojiPicker?: {
+            enable?: boolean | undefined;
+            custom?: React.ComponentType<{}> | undefined;
+        } | undefined;
+        menu?: {
+            darkBackground?: boolean | undefined;
+            custom?: React.ComponentType<import("./webchat/theme/types").PersistentMenuOptionsProps> | undefined;
+        } | undefined;
+        menuButton?: {
+            custom?: React.ComponentType<{}> | undefined;
+        } | undefined;
+        persistentMenu?: PersistentMenuOptionsTheme | undefined;
+        sendButton?: {
+            enable?: boolean | undefined;
+            custom?: React.ComponentType<{}> | undefined;
+        } | undefined;
+        enable?: boolean | undefined;
+        style?: any;
+    };
+    getComponent(host: HTMLDivElement, optionsAtRuntime?: WebchatArgs): import("react/jsx-runtime").JSX.Element;
+    isWebchatVisible(appId: string): Promise<boolean>;
+    isOnline(): boolean | undefined;
+    resolveWebchatVisibility(optionsAtRuntime?: WebchatArgs): Promise<boolean>;
     destroy(): void;
-    render(dest: any, optionsAtRuntime?: {}): Promise<void>;
+    render(dest: HTMLDivElement, optionsAtRuntime?: WebchatArgs): Promise<void>;
 }
-import React from "react";
-import { HubtypeService } from "@botonic/core/lib/cjs/hubtype-service";