@botpress/webchat 0.2.3 → 0.3.0

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.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');
@@ -25,19 +25,43 @@ const ru_json_1 = __importDefault(require("./ru.json"));
 const uk_json_1 = __importDefault(require("./uk.json"));
 const DEFAULT_LOCALE = 'en';
 exports.defaultLocale = DEFAULT_LOCALE;
-const STORAGE_KEY = 'bp/channel-web/user-lang';
+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 = () => { var _a; return cleanLanguageCode(((_a = window.BP_STORAGE) === null || _a === void 0 ? void 0 : _a.get(STORAGE_KEY)) || ''); };
+const getStorageLanguage = () => cleanLanguageCode(window.BP_STORAGE.get(USER_LANG_STORAGE_KEY) || '');
+const setStorageLanguage = (locale) => window.BP_STORAGE.set(USER_LANG_STORAGE_KEY, locale);
 // Desired precedence
 // 1- manual locale = 'browser' : browser lang
 // 2- manual locale is supported : manual lang
 // 3- storage lang is supported : storage lang
 // 4- browser lang is supported : browser lang
 // 5- default lang
-const getUserLocale = (manualLocale = 'browser') => {
+const getUserLocale = (manualLocale = '') => {
     const browserLocale = getNavigatorLanguage();
     if (manualLocale === 'browser' && translations[browserLocale]) {
         return browserLocale;
@@ -53,3 +77,19 @@ const getUserLocale = (manualLocale = 'browser') => {
     return translations[browserLocale] ? browserLocale : DEFAULT_LOCALE;
 };
 exports.getUserLocale = getUserLocale;
+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

@@ -1,22 +1,16 @@
 /// <reference types="react" />
 import { RootStore } from './store';
+import { BPStorage } from './utils/storage';
 declare global {
     interface Window {
         __BP_VISITOR_SOCKET_ID: string;
         __BP_VISITOR_ID: string;
         botpressWebChat: any;
         store: RootStore;
-        BOT_API_PATH: string;
-        API_PATH: string;
-        BOTPRESS_VERSION: string;
-        BOT_NAME: string;
-        ROOT_PATH: string;
         BOT_ID: string;
-        BP_BASE_PATH: string;
         SEND_USAGE_STATS: boolean;
-        SHOW_POWERED_BY: boolean;
         USE_SESSION_STORAGE: boolean;
-        BP_STORAGE: any;
+        BP_STORAGE: BPStorage;
         botpress: {
             [moduleName: string]: any;
         };
@@ -35,7 +29,6 @@ export declare namespace Renderer {
         noBubble?: boolean;
         keyboard?: any;
         eventId?: string;
-        isHighlighted?: boolean;
         isLastGroup?: boolean;
         isLastOfGroup?: boolean;
         isBotMessage?: boolean;
@@ -147,76 +140,137 @@ export interface Config {
     messagingUrl: 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;
-    isEmulator?: boolean;
-    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;
-    /** Reference ensures that a specific value and its signature are valid */
-    reference?: string;
-    /** 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;
-        }
-    ];
 }
 export interface BotDetails {
     website?: string;
@@ -225,6 +279,7 @@ export interface BotDetails {
     privacyPolicy?: string;
     emailAddress?: string;
     avatarUrl?: string;
+    coverPictureUrl?: string;
 }
 export interface BotInfo {
     name: string;
@@ -236,6 +291,8 @@ export interface BotInfo {
         escapeHTML: boolean;
     };
     lazySocket: boolean;
+    extraStylesheet?: string;
+    disableNotificationSound?: boolean;
 }
 export declare type uuid = string;
 export interface Conversation {
@@ -298,13 +355,6 @@ export interface CustomAction {
     /** The event triggered when the action is clicked */
     onClick: (actionId: string, messageProps: any, event: React.MouseEvent) => void;
 }
-/** When set, this will wrap every messages displayed in the webchat */
-export interface MessageWrapper {
-    /** The name of the module hosting the component */
-    module: string;
-    /** Name of the component exposed by the module */
-    component: string;
-}
 export interface EventFeedback {
     messageId: uuid;
     feedback?: number;

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/dist/utils/storage.d.ts

@@ -0,0 +1,16 @@
+import { Config } from '../typings';
+export declare class BPStorage {
+    private _config?;
+    private _storage;
+    constructor(config?: Config);
+    get config(): Config | undefined;
+    set config(config: Config | undefined);
+    private serialize;
+    private deserialize;
+    private getStorageKey;
+    private getDriver;
+    set<T>(key: string, value: T): void;
+    get<T = string>(key: string): T | undefined;
+    del(key: string): void;
+}
+export default BPStorage;

package/dist/utils/storage.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BPStorage = void 0;
+const aes_1 = __importDefault(require("crypto-js/aes"));
+const enc_utf8_1 = __importDefault(require("crypto-js/enc-utf8"));
+const sha256_1 = __importDefault(require("crypto-js/sha256"));
+const js_cookie_1 = __importDefault(require("js-cookie"));
+class BPStorage {
+    constructor(config) {
+        this.serialize = (value) => {
+            var _a, _b;
+            if (value === null || value === undefined) {
+                throw new Error('[Storage] Cannot store null or undefined values');
+            }
+            try {
+                let str = '';
+                if (typeof value === 'string') {
+                    str = value;
+                }
+                else {
+                    str = JSON.stringify(value);
+                }
+                if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.encryptionKey) === null || _b === void 0 ? void 0 : _b.length) {
+                    str = aes_1.default.encrypt(str, this.config.encryptionKey).toString();
+                }
+                return str;
+            }
+            catch (_c) {
+                console.error('[Storage] Error parsing value', value);
+                return '';
+            }
+        };
+        this.deserialize = (strValue) => {
+            var _a, _b;
+            if (strValue === null || strValue === undefined) {
+                return undefined;
+            }
+            try {
+                if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.encryptionKey) === null || _b === void 0 ? void 0 : _b.length) {
+                    strValue = aes_1.default.decrypt(strValue, this.config.encryptionKey).toString(enc_utf8_1.default);
+                }
+                return JSON.parse(strValue);
+            }
+            catch (_c) {
+                return undefined;
+            }
+        };
+        this.getStorageKey = (key) => {
+            var _a, _b, _c;
+            const rawKey = `bp-chat-${key}`;
+            if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.encryptionKey) === null || _b === void 0 ? void 0 : _b.length) {
+                return `${rawKey}-${(0, sha256_1.default)(`${this.config.clientId}-${this.config.encryptionKey}`).toString()}`;
+            }
+            else {
+                return `${rawKey}-${(_c = this.config) === null || _c === void 0 ? void 0 : _c.clientId}`;
+            }
+        };
+        this.getDriver = () => {
+            var _a;
+            if (this._storage) {
+                return this._storage;
+            }
+            try {
+                const storage = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.useSessionStorage) === true && typeof sessionStorage !== 'undefined' ? sessionStorage : localStorage;
+                const tempKey = '__storage_test__';
+                storage.setItem(tempKey, tempKey);
+                storage.removeItem(tempKey);
+                return (this._storage = storage);
+            }
+            catch (e) {
+                return (this._storage = 'cookie');
+            }
+        };
+        if (config) {
+            this._config = config;
+        }
+    }
+    get config() {
+        return this._config;
+    }
+    set config(config) {
+        this._config = config;
+    }
+    set(key, value) {
+        if (!this.config) {
+            return;
+        }
+        try {
+            const driver = this.getDriver();
+            driver !== 'cookie'
+                ? driver.setItem(this.getStorageKey(key), this.serialize(value))
+                : js_cookie_1.default.set(this.getStorageKey(key), this.serialize(value));
+        }
+        catch (err) {
+            console.error('Error while setting data into storage.', err.message);
+        }
+    }
+    get(key) {
+        if (!this.config) {
+            return;
+        }
+        try {
+            const driver = this.getDriver();
+            return driver !== 'cookie'
+                ? this.deserialize(driver.getItem(this.getStorageKey(key)))
+                : this.deserialize(js_cookie_1.default.get(this.getStorageKey(key)));
+        }
+        catch (err) {
+            console.error('Error while getting data from storage.', err.message);
+        }
+    }
+    del(key) {
+        if (!this.config) {
+            return;
+        }
+        try {
+            const driver = this.getDriver();
+            driver !== 'cookie' ? driver.removeItem(this.getStorageKey(key)) : js_cookie_1.default.remove(this.getStorageKey(key));
+        }
+        catch (err) {
+            console.error('Error while deleting data from storage.', err.message);
+        }
+    }
+}
+exports.BPStorage = BPStorage;
+exports.default = BPStorage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -15,6 +15,7 @@
   ],
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
+    "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.178",
     "@types/mime": "^2.0.3",
     "@types/node": "^16.11.13",
@@ -25,7 +26,7 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.2.0",
+    "@botpress/messaging-components": "0.3.0",
     "@botpress/messaging-socket": "1.1.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
@@ -34,11 +35,11 @@
     "classnames": "^2.3.1",
     "crypto-js": "^4.1.1",
     "date-fns": "^1.30.1",
+    "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "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,33 +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 (props.store.config.isEmulator) {
-        customActions.push({
-            id: 'actionDebug',
-            label: 'Inspect in Debugger',
-            onClick: (_actionId, props) => {
-                props.store.loadEventInDebugger(props.incomingEventId, true);
-            }
-        });
-    }
-    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;
-}