@botpress/webchat 0.2.0 → 0.2.4

package/dist/typings.d.ts

@@ -1,22 +1,17 @@
 /// <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 +30,6 @@ export declare namespace Renderer {
         noBubble?: boolean;
         keyboard?: any;
         eventId?: string;
-        isHighlighted?: boolean;
         isLastGroup?: boolean;
         isLastOfGroup?: boolean;
         isBotMessage?: boolean;
@@ -145,6 +139,8 @@ 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;
@@ -155,7 +151,6 @@ export interface Config {
     userIdScope?: string;
     enableReset: boolean;
     stylesheet?: string;
-    isEmulator?: boolean;
     extraStylesheet?: string;
     showConversationsButton: boolean;
     showUserName: boolean;
@@ -196,8 +191,6 @@ export interface Config {
     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. */
     lazySocket?: boolean;
     /** If true, chat will no longer play the notification sound for new messages. */
@@ -206,6 +199,8 @@ export interface Config {
     chatId?: string;
     /** CSS class to be applied to iframe */
     className?: string;
+    /** Key used to encrypt data in the localStorage */
+    encryptionKey?: string;
 }
 export declare type OverridableComponents = 'below_conversation' | 'before_container' | 'composer';
 export interface Overrides {
@@ -234,6 +229,8 @@ export interface BotInfo {
         escapeHTML: boolean;
     };
     lazySocket: boolean;
+    extraStylesheet?: string;
+    disableNotificationSound?: boolean;
 }
 export declare type uuid = string;
 export interface Conversation {
@@ -260,7 +257,7 @@ export interface Message {
     authorId: uuid | undefined;
     sentOn: Date;
     payload: any;
-    timeInMs: number;
+    timeInMs?: number;
 }
 export interface QueuedMessage {
     message: Message;
@@ -296,13 +293,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/storage.d.ts

@@ -0,0 +1,17 @@
+import { Config } from '../typings';
+export declare type StorageConfig = Pick<Config, 'clientId' | 'encryptionKey' | 'useSessionStorage'>;
+export declare class BPStorage {
+    private _config;
+    private _storage;
+    constructor(config: StorageConfig);
+    get config(): Partial<StorageConfig>;
+    set config(config: Partial<StorageConfig>);
+    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,117 @@
+"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;
+            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 ((_a = this.config.encryptionKey) === null || _a === void 0 ? void 0 : _a.length) {
+                    str = aes_1.default.encrypt(str, this.config.encryptionKey).toString();
+                }
+                return str;
+            }
+            catch (_b) {
+                console.error('[Storage] Error parsing value', value);
+                return '';
+            }
+        };
+        this.deserialize = (strValue) => {
+            var _a;
+            if (strValue === null || strValue === undefined) {
+                return undefined;
+            }
+            try {
+                if ((_a = this.config.encryptionKey) === null || _a === void 0 ? void 0 : _a.length) {
+                    strValue = aes_1.default.decrypt(strValue, this.config.encryptionKey).toString(enc_utf8_1.default);
+                }
+                return JSON.parse(strValue);
+            }
+            catch (_b) {
+                return undefined;
+            }
+        };
+        this.getStorageKey = (key) => {
+            var _a, _b;
+            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}-${this.config.clientId}`;
+            }
+        };
+        this.getDriver = () => {
+            if (this._storage) {
+                return this._storage;
+            }
+            try {
+                const storage = this.config.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');
+            }
+        };
+        this._config = config;
+    }
+    get config() {
+        return this._config;
+    }
+    set config(config) {
+        this._config = Object.assign(Object.assign({}, this._config), config);
+    }
+    set(key, value) {
+        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) {
+        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) {
+        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/dist/utils.js

@@ -26,7 +26,7 @@ const checkLocationOrigin = () => {
     }
 };
 exports.checkLocationOrigin = checkLocationOrigin;
-// TODO: does analytics stil work?
+// TODO: does analytics still work?
 const initializeAnalytics = () => {
     if (window.SEND_USAGE_STATS) {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -14,6 +14,8 @@
     "dist"
   ],
   "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",
@@ -24,14 +26,16 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.2.0",
+    "@botpress/messaging-components": "0.2.1",
     "@botpress/messaging-socket": "1.1.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",
     "axios": "^0.25.0",
     "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",

package/dist/components/Keyboard.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-export declare class Prepend extends React.Component<Partial<KeyboardElementsProps>> {
-    render(): JSX.Element;
-}
-export declare class Append extends React.Component<Partial<KeyboardElementsProps>> {
-    render(): JSX.Element;
-}
-export declare class Default extends React.Component<Partial<KeyboardElementsProps>> {
-    static prependRef: React.RefObject<HTMLDivElement>;
-    static appendRef: React.RefObject<HTMLDivElement>;
-    static isReady: () => boolean;
-    render(): JSX.Element;
-}
-interface KeyboardElementsProps {
-    /** When true, the keyboard is appended at the end. Otherwise, it is prepended */
-    append?: boolean;
-    index?: number;
-    visible?: boolean;
-    /** A keyboard can be any kind of element */
-    keyboard?: any;
-}
-export {};

package/dist/components/Keyboard.js

@@ -1,86 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = exports.Append = exports.Prepend = void 0;
-const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
-class KeyboardElements extends React.Component {
-    constructor(props) {
-        super(props);
-        this.container = document.createElement('div');
-    }
-    insertChildAt(child, index = 0, parent) {
-        if (index >= parent.children.length) {
-            parent.appendChild(child);
-        }
-        else {
-            parent.insertBefore(child, parent.children[index]);
-        }
-    }
-    componentDidMount() {
-        if (this.props.append) {
-            this.insertChildAt(this.container, this.props.index, Default.appendRef.current);
-        }
-        else {
-            this.insertChildAt(this.container, this.props.index, Default.prependRef.current);
-        }
-    }
-    componentWillUnmount() {
-        var _a, _b;
-        if (this.props.append) {
-            (_a = Default.appendRef.current) === null || _a === void 0 ? void 0 : _a.removeChild(this.container);
-        }
-        else {
-            (_b = Default.prependRef.current) === null || _b === void 0 ? void 0 : _b.removeChild(this.container);
-        }
-    }
-    render() {
-        return ReactDOM.createPortal(this.props.children, this.container);
-    }
-}
-class Prepend extends React.Component {
-    render() {
-        return (React.createElement("div", null,
-            this.props.visible && React.createElement(KeyboardElements, { index: this.props.index }, this.props.keyboard),
-            this.props.children));
-    }
-}
-exports.Prepend = Prepend;
-class Append extends React.Component {
-    render() {
-        return (React.createElement("div", null,
-            this.props.visible && React.createElement(KeyboardElements, { append: true }, this.props.keyboard),
-            this.props.children));
-    }
-}
-exports.Append = Append;
-class Default extends React.Component {
-    render() {
-        return (React.createElement("div", { className: 'bpw-keyboard' },
-            React.createElement("div", { ref: Default.prependRef }),
-            this.props.children,
-            React.createElement("div", { ref: Default.appendRef })));
-    }
-}
-exports.Default = Default;
-Default.prependRef = React.createRef();
-Default.appendRef = React.createRef();
-Default.isReady = () => Default.appendRef.current !== null;

package/dist/components/common/BotInfo.js

@@ -1,110 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const classnames_1 = __importDefault(require("classnames"));
-const mobx_react_1 = require("mobx-react");
-const React = __importStar(require("react"));
-const react_intl_1 = require("react-intl");
-const Email_1 = __importDefault(require("../../icons/Email"));
-const Phone_1 = __importDefault(require("../../icons/Phone"));
-const Website_1 = __importDefault(require("../../icons/Website"));
-const utils_1 = require("../../utils");
-const Avatar_1 = __importDefault(require("./Avatar"));
-const CoverPicture = ({ botInfo }) => (React.createElement("div", { className: 'bpw-botinfo-cover-picture-wrapper' },
-    React.createElement("img", { className: 'bpw-botinfo-cover-picture', src: (botInfo.details && botInfo.details.coverPictureUrl) ||
-            `https://via.placeholder.com/400x175?text=${botInfo.name}` })));
-class BotInfoPage extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.changeLanguage = (e) => __awaiter(this, void 0, void 0, function* () {
-            const lang = e.target.value;
-            yield this.props.updatePreferredLanguage(lang);
-        });
-    }
-    componentDidMount() {
-        var _a;
-        (_a = this.btnEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    renderDescription(text) {
-        const html = (0, utils_1.renderUnsafeHTML)(text, this.props.escapeHTML);
-        return React.createElement("div", { className: 'bpw-botinfo-description', dangerouslySetInnerHTML: { __html: html } });
-    }
-    render() {
-        const { botInfo, botName, avatarUrl } = this.props;
-        const onDismiss = this.props.isConversationStarted ? this.props.toggleBotInfo : this.props.startConversation;
-        return (React.createElement("div", { className: (0, classnames_1.default)('bpw-botinfo-container', {
-                'bpw-rtl': this.props.rtl
-            }) },
-            React.createElement(CoverPicture, { botInfo: botInfo }),
-            React.createElement("div", { className: 'bpw-botinfo-summary' },
-                React.createElement(Avatar_1.default, { name: botName, avatarUrl: avatarUrl, height: 64, width: 64 }),
-                React.createElement("h3", null, botName),
-                this.renderDescription(botInfo.description)),
-            botInfo.details && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: 'bpw-botinfo-links' },
-                    botInfo.details.phoneNumber && (React.createElement("div", { className: 'bpw-botinfo-link' },
-                        React.createElement("i", null,
-                            React.createElement(Phone_1.default, null)),
-                        React.createElement("a", { target: '_blank', href: `tel:${botInfo.details.phoneNumber}` }, botInfo.details.phoneNumber))),
-                    botInfo.details.website && (React.createElement("div", { className: 'bpw-botinfo-link' },
-                        React.createElement("i", null,
-                            React.createElement(Website_1.default, null)),
-                        React.createElement("a", { target: '_blank', href: botInfo.details.website }, botInfo.details.website))),
-                    botInfo.details.emailAddress && (React.createElement("div", { className: 'bpw-botinfo-link' },
-                        React.createElement("i", null,
-                            React.createElement(Email_1.default, null)),
-                        React.createElement("a", { target: '_blank', href: `mailto:${botInfo.details.emailAddress}` }, botInfo.details.emailAddress)))),
-                botInfo.details.termsConditions && (React.createElement("div", { className: 'bpw-botinfo-terms' },
-                    React.createElement("a", { target: '_blank', href: botInfo.details.termsConditions },
-                        React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.termsAndConditions' })))),
-                botInfo.details.privacyPolicy && (React.createElement("div", { className: 'bpw-botinfo-terms' },
-                    React.createElement("a", { target: '_blank', href: botInfo.details.privacyPolicy },
-                        React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.privacyPolicy' })))))),
-            botInfo.languages.length > 1 && (React.createElement("div", { className: 'bpw-botinfo-preferred-language' },
-                React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.preferredLanguage' }),
-                React.createElement("select", { value: this.props.preferredLanguage, onChange: this.changeLanguage }, botInfo.languages.map((lang) => (React.createElement("option", { key: lang, value: lang }, lang.toUpperCase())))))),
-            React.createElement("button", { tabIndex: 1, ref: (el) => (this.btnEl = el), className: 'bpw-botinfo-start-button', onClick: onDismiss.bind(this, undefined) }, this.props.isConversationStarted ? (React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.backToConversation' })) : (React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.startConversation' })))));
-    }
-}
-exports.default = (0, mobx_react_1.inject)(({ store }) => ({
-    botName: store.botName,
-    botInfo: store.botInfo,
-    avatarUrl: store.botAvatarUrl,
-    startConversation: store.startConversation,
-    toggleBotInfo: store.view.toggleBotInfo,
-    isConversationStarted: store.isConversationStarted,
-    updatePreferredLanguage: store.updatePreferredLanguage,
-    preferredLanguage: store.preferredLanguage,
-    escapeHTML: store.escapeHTML,
-    rtl: store.rtl
-}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(BotInfoPage)));