@botpress/webchat 0.2.5 → 0.3.2

package/dist/store/view.js

@@ -35,8 +35,8 @@ class ViewStore {
         };
     }
     get showConversationsButton() {
-        var _a, _b;
-        return !((_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.conversationId) && ((_b = this.rootStore.config) === null || _b === void 0 ? void 0 : _b.showConversationsButton);
+        var _a;
+        return (_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.showConversationsButton;
     }
     get showBotInfoButton() {
         return !this.isConversationsDisplayed && this.rootStore.botInfo && this.rootStore.botInfo.showBotInfoPage;
@@ -47,10 +47,6 @@ class ViewStore {
     get showDeleteConversationButton() {
         return (!this.isConversationsDisplayed && !this.isBotInfoDisplayed && this.rootStore.config.enableConversationDeletion);
     }
-    get showResetButton() {
-        var _a;
-        return !this.isConversationsDisplayed && !this.isBotInfoDisplayed && ((_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.enableReset);
-    }
     get showCloseButton() {
         return !this.isFullscreen;
     }
@@ -167,7 +163,7 @@ class ViewStore {
         this._updateTransitions({ widgetTransition: 'fadeOut' });
         setTimeout(() => {
             this._updateTransitions({ sideTransition: 'fadeIn' });
-        }, constants_1.default.ANIM_DURATION + 10);
+        }, constants_1.default.ANIMATION_DURATION + 10);
         this._endAnimation('side');
         this.rootStore.postMessage('webchatOpened');
     }
@@ -184,7 +180,7 @@ class ViewStore {
         if (!this.activeView || this.activeView === 'side') {
             setTimeout(() => {
                 this._updateTransitions({ widgetTransition: 'fadeIn' });
-            }, constants_1.default.ANIM_DURATION + 10);
+            }, constants_1.default.ANIMATION_DURATION + 10);
         }
         this._endAnimation('widget');
         this.rootStore.postMessage('webchatClosed');
@@ -194,13 +190,13 @@ class ViewStore {
             (0, mobx_1.runInAction)(() => {
                 this.activeView = finalView;
             });
-        }, constants_1.default.ANIM_DURATION);
+        }, constants_1.default.ANIMATION_DURATION);
         setTimeout(() => {
             this._updateTransitions({
                 widgetTransition: undefined,
                 sideTransition: this.transitions.sideTransition === 'fadeIn' ? 'fadeIn' : undefined
             });
-        }, constants_1.default.ANIM_DURATION * 2.1);
+        }, constants_1.default.ANIMATION_DURATION * 2.1);
     }
     _updateTransitions({ widgetTransition, sideTransition }) {
         this.transitions = { widgetTransition, sideTransition };
@@ -268,9 +264,6 @@ __decorate([
 __decorate([
     mobx_1.computed
 ], ViewStore.prototype, "showDeleteConversationButton", null);
-__decorate([
-    mobx_1.computed
-], ViewStore.prototype, "showResetButton", null);
 __decorate([
     mobx_1.computed
 ], ViewStore.prototype, "showCloseButton", null);

package/dist/translations/index.d.ts

@@ -5,4 +5,5 @@ declare const translations: {
 };
 declare const getUserLocale: (manualLocale?: Locale) => string;
 declare const setUserLocale: (locale: Locale) => void;
-export { translations, DEFAULT_LOCALE as defaultLocale, getUserLocale, setUserLocale };
+declare const isRTLLocale: (locale?: string | undefined) => boolean;
+export { translations, DEFAULT_LOCALE as defaultLocale, getUserLocale, setUserLocale, isRTLLocale };

package/dist/translations/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setUserLocale = exports.getUserLocale = exports.defaultLocale = exports.translations = void 0;
+exports.isRTLLocale = exports.setUserLocale = exports.getUserLocale = exports.defaultLocale = exports.translations = void 0;
 require('@formatjs/intl-pluralrules/polyfill');
 require('@formatjs/intl-pluralrules/locale-data/ar');
 require('@formatjs/intl-pluralrules/locale-data/de');
@@ -28,6 +28,29 @@ exports.defaultLocale = DEFAULT_LOCALE;
 const USER_LANG_STORAGE_KEY = 'user-lang';
 const translations = { en: en_json_1.default, fr: fr_json_1.default, pt: pt_json_1.default, es: es_json_1.default, ar: ar_json_1.default, ru: ru_json_1.default, uk: uk_json_1.default, de: de_json_1.default, it: it_json_1.default };
 exports.translations = translations;
+const rtlLocales = [
+    'ae' /* Avestan */,
+    'ar' /* 'العربية', Arabic */,
+    'arc' /* Aramaic */,
+    'bcc' /* 'بلوچی مکرانی', Southern Balochi */,
+    'bqi' /* 'بختياري', Bakthiari */,
+    'ckb' /* 'Soranî / کوردی', Sorani */,
+    'dv' /* Dhivehi */,
+    'fa' /* 'فارسی', Persian */,
+    'glk' /* 'گیلکی', Gilaki */,
+    'he' /* 'עברית', Hebrew */,
+    'ku' /* 'Kurdî / كوردی', Kurdish */,
+    'mzn' /* 'مازِرونی', Mazanderani */,
+    'nqo' /* N'Ko */,
+    'pnb' /* 'پنجابی', Western Punjabi */,
+    'ps' /* 'پښتو', Pashto, */,
+    'sd' /* 'سنڌي', Sindhi */,
+    'ug' /* 'Uyghurche / ئۇيغۇرچە', Uyghur */,
+    'ur' /* 'اردو', Urdu */,
+    'yi' /* 'ייִדיש', Yiddish */
+];
+// 'en-US' becomes ['en', '-us'] 'en' becomes ['en']
+const localeRegex = /^([a-zA-Z]{2,3})([_\-a-zA-Z]{3,5})$/;
 const cleanLanguageCode = (str) => str.split('-')[0];
 const getNavigatorLanguage = () => cleanLanguageCode(navigator.language || navigator['userLanguage'] || '');
 const getStorageLanguage = () => cleanLanguageCode(window.BP_STORAGE.get(USER_LANG_STORAGE_KEY) || '');
@@ -58,3 +81,15 @@ const setUserLocale = (locale) => {
     setStorageLanguage(locale);
 };
 exports.setUserLocale = setUserLocale;
+const isRTLLocale = (locale) => {
+    if (!locale) {
+        return false;
+    }
+    locale = locale.toLowerCase();
+    const matches = localeRegex.exec(locale);
+    if (!matches || matches.length < 2) {
+        return false;
+    }
+    return rtlLocales.includes(matches[1]);
+};
+exports.isRTLLocale = isRTLLocale;

package/dist/typings.d.ts

@@ -9,7 +9,6 @@ declare global {
         store: RootStore;
         BOT_ID: string;
         SEND_USAGE_STATS: boolean;
-        SHOW_POWERED_BY: boolean;
         USE_SESSION_STORAGE: boolean;
         BP_STORAGE: BPStorage;
         botpress: {
@@ -139,77 +138,145 @@ export interface StudioConnector {
 export interface Config {
     /** Url of the messaging server */
     messagingUrl: string;
-    /** Url of the Media File Service where we fetch the bot info */
-    mediaFileServiceUrl?: string;
     /** Id of your messaging client */
     clientId: string;
-    botId?: string;
-    externalAuthToken?: string;
-    userId?: string;
-    conversationId?: uuid;
-    /** Allows to set a different user id for different windows (eg: studio, specific bot, etc) */
-    userIdScope?: string;
-    enableReset: boolean;
+    /**
+     * Url of the Media File Service where we fetch the bot info
+     * @default ''
+     */
+    mediaFileServiceUrl?: string;
+    /**
+     * Key used to encrypt data in the localStorage
+     * @default '''
+     */
+    encryptionKey?: string;
+    /**
+     * Provide a path to a stylesheet to customize the webchat
+     * @default '''
+     */
     stylesheet?: string;
-    extraStylesheet?: string;
-    showConversationsButton: boolean;
-    showUserName: boolean;
-    showUserAvatar: boolean;
-    showTimestamp: boolean;
-    enableTranscriptDownload: boolean;
-    enableConversationDeletion: boolean;
-    enableArrowNavigation: boolean;
-    closeOnEscape: boolean;
+    /**
+     * If false, will hide the conversation list pane
+     * @default true
+     */
+    showConversationsButton?: boolean;
+    /**
+     * If true, will display a timestamp under each messages
+     * @default false
+     */
+    showTimestamp?: boolean;
+    /**
+     * Allows the user to download the conversation history
+     * @default true
+     */
+    enableTranscriptDownload?: boolean;
+    /**
+     * Allows the user to delete its conversation history
+     * @default false
+     */
+    enableConversationDeletion?: boolean;
+    /**
+     * Close the webchat when pressing the Esc key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Displays the bot name to the right of its avatar
+     * @default ''
+     */
     botName?: string;
+    /**
+     * Allows to set a custom composer placeholder
+     * @default 'Reply to {name}'
+     */
     composerPlaceholder?: string;
+    /**
+     * Allow to specify a custom URL for the bot's avatar
+     * @default '''
+     */
     avatarUrl?: string;
     /** Force the display language of the webchat (en, fr, ar, ru, etc..)
      * Defaults to the user's browser language if not set
      * Set to 'browser' to force use the browser's language
+     * @default 'browser'
      */
     locale?: 'browser' | string;
-    /** Small description written under the bot's name */
-    botConvoDescription?: string;
-    /** Replace or insert components at specific locations */
-    overrides?: Overrides;
-    /** When true, the widget button is hidden */
-    hideWidget: boolean;
-    /** Disable the slide in / out animations of the webchat */
-    disableAnimations: boolean;
-    /** When true, sets ctrl+Enter as shortcut for reset session then send */
-    enableResetSessionShortcut: boolean;
-    /** When true, webchat tries to use native webspeech api (uses hosted mozilla and google voice services) */
-    enableVoiceComposer: boolean;
-    recentConversationLifetime: string;
-    startNewConvoOnTimeout: boolean;
-    /** Use sessionStorage instead of localStorage, which means the session expires when tab is closed */
-    useSessionStorage: boolean;
+    /**
+     * Small description written under the bot's name
+     * @default ''
+     */
+    botConversationDescription?: string;
+    /**
+     * When true, the widget button to open the chat is hidden
+     * @default false
+     */
+    hideWidget?: boolean;
+    /**
+     * Disable the slide in / out animations of the webchat
+     * @default false
+     */
+    disableAnimations?: boolean;
+    /**
+     * When true, webchat displays a voice icon in the composer to send voice messages (must use Google Speech integration)
+     * @default false
+     */
+    enableVoiceComposer?: boolean;
+    /**
+     * Use sessionStorage instead of localStorage, which means the session expires when tab is closed
+     * @default false
+     */
+    useSessionStorage?: boolean;
+    /**
+     * Sends an event to the parent container with the width provided
+     * @default 360
+     */
     containerWidth?: string | number;
+    /**
+     * Sets the width of the webchat
+     * @default 360
+     */
     layoutWidth?: string | number;
-    showPoweredBy: boolean;
-    /** When enabled, sent messages are persisted to local storage (recall previous messages)  */
-    enablePersistHistory: boolean;
-    /** Experimental: expose the store to the parent frame for more control on the webchat's behavior */
-    exposeStore: boolean;
-    /** If true, Websocket is created when the Webchat is opened. Bot cannot be proactive. */
+    /**
+     * Show Powered By Botpress in the footer
+     * @default false
+     */
+    showPoweredBy?: boolean;
+    /**
+     * When enabled, sent messages are persisted to local storage (recall previous messages)
+     * @default true
+     */
+    enablePersistHistory?: boolean;
+    /**
+     * Experimental: expose the store to the parent frame for more control on the webchat's behavior
+     * @default false
+     */
+    exposeStore?: boolean;
+    /**
+     * If true, Websocket is created when the Webchat is opened. Bot cannot be proactive.
+     * @default false
+     */
     lazySocket?: boolean;
-    /** If true, chat will no longer play the notification sound for new messages. */
+    /**
+     * If true, chat will no longer play the notification sound for new messages.
+     * @default false
+     */
     disableNotificationSound?: boolean;
-    /** Refers to a specific webchat reference in parent window. Useful when using multiple chat window */
+    /**
+     * Refers to a specific webchat reference in parent window. Useful when using multiple chat window
+     * @default ''
+     */
     chatId?: string;
-    /** CSS class to be applied to iframe */
+    /**
+     * CSS class to be applied to iframe
+     * @default ''
+     */
     className?: string;
-    /** Key used to encrypt data in the localStorage */
-    encryptionKey?: string;
-}
-export declare type OverridableComponents = 'below_conversation' | 'before_container' | 'composer';
-export interface Overrides {
-    [componentToOverride: string]: [
-        {
-            module: string;
-            component: string;
-        }
-    ];
+    /**
+     * Google Maps API Key required to display the map.
+     * Will display a link to Google Maps otherwise
+     * @default ''
+     */
+    googleMapsAPIKey?: string;
 }
 export interface BotDetails {
     website?: string;
@@ -218,6 +285,7 @@ export interface BotDetails {
     privacyPolicy?: string;
     emailAddress?: string;
     avatarUrl?: string;
+    coverPictureUrl?: string;
 }
 export interface BotInfo {
     name: string;

package/dist/utils/analytics.d.ts

@@ -0,0 +1,5 @@
+export declare const initializeAnalytics: () => void;
+export declare type MessageDirection = 'sent' | 'received';
+export declare const trackMessage: (direction: MessageDirection) => void;
+export declare type WebchatState = 'show' | 'hide' | 'toggle';
+export declare const trackWebchatState: (state: WebchatState) => void;

package/dist/utils/analytics.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trackWebchatState = exports.trackMessage = exports.initializeAnalytics = void 0;
+const react_ga_1 = __importDefault(require("react-ga"));
+const initializeAnalytics = () => {
+    if (window.SEND_USAGE_STATS) {
+        try {
+            react_ga_1.default.initialize('UA-90044826-2');
+            react_ga_1.default.pageview(`${window.location.pathname}${window.location.search}`);
+        }
+        catch (err) {
+            console.error('Error initializing analytics', err);
+        }
+    }
+};
+exports.initializeAnalytics = initializeAnalytics;
+const trackMessage = (direction) => {
+    if (window.SEND_USAGE_STATS) {
+        try {
+            react_ga_1.default.event({ category: 'Interactions', action: `message ${direction}` });
+        }
+        catch (_a) { }
+    }
+};
+exports.trackMessage = trackMessage;
+const trackWebchatState = (state) => {
+    if (window.SEND_USAGE_STATS) {
+        try {
+            react_ga_1.default.event({ category: 'Display', action: state });
+        }
+        catch (_a) { }
+    }
+};
+exports.trackWebchatState = trackWebchatState;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export declare const isIE: boolean;
+export declare const downloadFile: (name: string, blob: Blob) => void;
+export declare const renderUnsafeHTML: (message: string | undefined, escaped: boolean) => string;

package/dist/utils/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderUnsafeHTML = exports.downloadFile = exports.isIE = void 0;
+const snarkdown_1 = __importDefault(require("snarkdown"));
+exports.isIE = window.navigator.userAgent.match(/MSIE|Trident/) !== null;
+const downloadFile = (name, blob) => {
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', name);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+};
+exports.downloadFile = downloadFile;
+const renderUnsafeHTML = (message = '', escaped) => {
+    if (escaped) {
+        message = message.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+    const html = (0, snarkdown_1.default)(message);
+    return html.replace(/<a href/gi, '<a target="_blank" href');
+};
+exports.renderUnsafeHTML = renderUnsafeHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.2.5",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -8,10 +8,12 @@
   "scripts": {
     "build": "yarn && yarn run -T tsc --build",
     "watch": "yarn && yarn run -T tsc --build --watch",
+    "dev": "yarn run -T parcel test/index.html",
     "prepublish": "yarn run -T rimraf dist && yarn --immutable && yarn run -T tsc --build && yarn run -T rimraf dist/.tsbuildinfo"
   },
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
@@ -26,8 +28,8 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.2.1",
-    "@botpress/messaging-socket": "1.1.0",
+    "@botpress/messaging-components": "0.3.0",
+    "@botpress/messaging-socket": "1.1.1",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",
@@ -40,7 +42,6 @@
     "mime": "^3.0.0",
     "mobx": "5.15.7",
     "mobx-react": "^6.2.1",
-    "mobx-react-lite": "2.0.0",
     "query-string": "^7.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

package/dist/components/ContextMenu.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const showContextMenu: (e: React.MouseEvent<HTMLDivElement>, props: any) => void;

package/dist/components/ContextMenu.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.showContextMenu = void 0;
-const core_1 = require("@blueprintjs/core");
-const react_1 = __importDefault(require("react"));
-function MessageMenu(props) {
-    return (react_1.default.createElement(core_1.Menu, null, props.customActions.map((action) => {
-        return (react_1.default.createElement(core_1.MenuItem, { key: action.id, text: action.label, 
-            // TODO: undefined is supposed to be "this". Does that make sense??
-            onClick: action.onClick.bind(undefined, action.id, props.element) }));
-    })));
-}
-const showContextMenu = (e, props) => {
-    const customActions = props.store.view.customActions;
-    if (customActions && props.incomingEventId) {
-        e.preventDefault();
-        const menu = react_1.default.createElement(MessageMenu, { element: props, customActions: customActions });
-        core_1.ContextMenu.show(menu, { left: e.clientX, top: e.clientY });
-    }
-};
-exports.showContextMenu = showContextMenu;

package/dist/components/OverridableComponent.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Overrides } from '../typings';
-declare class OverridableComponent extends React.Component<Props, State> {
-    state: State;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props): void;
-    componentDidCatch(error: any, info: any): void;
-    loadComponents(): void;
-    resolveComponents: () => {
-        key: string;
-        element: any;
-    }[] | undefined;
-    render(): any;
-}
-declare const _default: typeof OverridableComponent & import("mobx-react").IWrappedComponent<unknown>;
-export default _default;
-interface Props {
-    name: string;
-    overrides?: Overrides;
-    original?: any;
-}
-interface State {
-    components: any;
-}

package/dist/components/OverridableComponent.js

@@ -1,50 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_1 = require("mobx-react");
-const react_1 = __importDefault(require("react"));
-class OverridableComponent extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            components: undefined
-        };
-        this.resolveComponents = () => {
-            var _a, _b;
-            return (_b = (_a = this.props.overrides) === null || _a === void 0 ? void 0 : _a[this.props.name]) === null || _b === void 0 ? void 0 : _b.map(({ module, component }) => {
-                var _a;
-                return ({
-                    key: `${module}:${component}`,
-                    element: (_a = window.botpress[module]) === null || _a === void 0 ? void 0 : _a[component]
-                });
-            }).filter((x) => x.element);
-        };
-    }
-    componentDidMount() {
-        this.loadComponents();
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.overrides !== this.props.overrides) {
-            this.loadComponents();
-        }
-    }
-    componentDidCatch(error, info) {
-        console.error(`Error in overridable component ${this.props.name}. Loading original component.`, error, info);
-        this.setState({ components: [{ key: 'original', element: this.props.original }] });
-    }
-    loadComponents() {
-        this.setState({ components: this.resolveComponents() || [{ key: 'original', element: this.props.original }] });
-    }
-    render() {
-        const { components } = this.state;
-        return components
-            ? components.map(({ element: Element, key }) => Element && react_1.default.createElement(Element, Object.assign({ key: key }, this.props)))
-            : null;
-    }
-}
-exports.default = (0, mobx_react_1.inject)(({ store }) => ({
-    store,
-    overrides: store.config.overrides
-}))(OverridableComponent);

package/dist/components/Stylesheet.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ href }: {
-    href: string;
-}) => JSX.Element;
-export default _default;

package/dist/components/Stylesheet.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-exports.default = ({ href }) => react_1.default.createElement("link", { rel: "stylesheet", type: "text/css", href: href });

package/dist/components/common/MoreOptions/index.d.ts

@@ -1,21 +0,0 @@
-import { IconName } from '@blueprintjs/core';
-import { FC } from 'react';
-interface MoreOptionsProps {
-    show: boolean;
-    onToggle: (value: boolean) => void;
-    children?: any;
-    className?: string;
-    element?: JSX.Element;
-    items: MoreOptionsItems[];
-}
-export interface MoreOptionsItems {
-    icon?: IconName;
-    label: string;
-    className?: string;
-    selected?: boolean;
-    content?: JSX.Element;
-    action?: () => void;
-    type?: 'delete';
-}
-declare const MoreOptions: FC<MoreOptionsProps>;
-export default MoreOptions;