@botpress/webchat 0.2.1 → 0.2.5

package/dist/store/index.js

@@ -22,6 +22,7 @@ exports.RootStore = void 0;
 const is_before_1 = __importDefault(require("date-fns/is_before"));
 const is_valid_1 = __importDefault(require("date-fns/is_valid"));
 const merge_1 = __importDefault(require("lodash/merge"));
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const mobx_1 = require("mobx");
 const api_1 = __importDefault(require("../core/api"));
 const main_1 = require("../main");
@@ -29,18 +30,17 @@ const translations_1 = require("../translations");
 const utils_1 = require("../utils");
 const composer_1 = __importDefault(require("./composer"));
 const view_1 = __importDefault(require("./view"));
-const chosenLocale = (0, translations_1.getUserLocale)();
 class RootStore {
     constructor(options, config) {
         this.conversations = [];
         this.isBotTyping = mobx_1.observable.box(false);
-        this.botUILanguage = chosenLocale;
         this.delayedMessages = [];
         this.composer = new composer_1.default(this);
         this.view = new view_1.default(this, options.fullscreen);
         if (config) {
             this.updateConfig(config);
         }
+        this.botUILanguage = (0, translations_1.getUserLocale)();
     }
     setIntlProvider(provider) {
         this.intl = provider;
@@ -56,10 +56,6 @@ class RootStore {
         var _a, _b;
         return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.botName) || ((_b = this.botInfo) === null || _b === void 0 ? void 0 : _b.name) || 'Bot';
     }
-    get isEmulator() {
-        var _a;
-        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.isEmulator) || false;
-    }
     get hasBotInfoDescription() {
         var _a;
         return !!((_a = this.config.botConvoDescription) === null || _a === void 0 ? void 0 : _a.length);
@@ -77,7 +73,7 @@ class RootStore {
     }
     get currentMessages() {
         var _a;
-        return (_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages;
+        return ((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages) || [];
     }
     get currentConversationId() {
         var _a;
@@ -88,7 +84,9 @@ class RootStore {
         window.parent.postMessage({ name, chatId, payload }, '*');
     }
     updateMessages(messages) {
-        this.currentConversation.messages = messages;
+        if (this.currentConversation) {
+            this.currentConversation.messages = messages;
+        }
     }
     updateLastMessage(conversationId, message) {
         for (const conversation of this.conversations) {
@@ -99,30 +97,27 @@ class RootStore {
         }
     }
     clearMessages() {
-        this.currentConversation.messages = [];
+        if (this.currentConversation) {
+            this.currentConversation.messages = [];
+        }
     }
     deleteConversation() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.currentConversation !== undefined && this.currentConversation.messages.length > 0) {
-                yield this.api.deleteMessages(this.currentConversationId);
-                this.clearMessages();
-            }
-        });
-    }
-    loadEventInDebugger(messageId, isManual) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.config.isEmulator || !messageId) {
-                return;
+            if (this.currentConversationId) {
+                yield this.api.deleteConversation(this.currentConversationId);
+                const index = this.conversations.findIndex((c) => c.id === this.currentConversationId);
+                if (index > -1) {
+                    this.conversations.splice(index, 1);
+                }
+                this.resetConversation();
+                yield this.fetchConversation();
             }
-            const messages = yield this.api.listByIncomingEvent(messageId);
-            this.view.setHighlightedMessages(messages);
-            window.parent.postMessage({ action: 'load-event', payload: { messageId, isManual } }, '*');
         });
     }
     addEventToConversation(event) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.isInitialized && this.currentConversationId !== event.conversationId) {
+            if (!this.currentConversation || (this.isInitialized && this.currentConversationId !== event.conversationId)) {
                 yield this.fetchConversations();
                 yield this.fetchConversation(event.conversationId);
                 return;
@@ -142,7 +137,7 @@ class RootStore {
     }
     updateTyping(event) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.isInitialized && this.currentConversationId !== event.conversationId) {
+            if (!this.currentConversation || (this.isInitialized && this.currentConversationId !== event.conversationId)) {
                 yield this.fetchConversations();
                 yield this.fetchConversation(event.conversationId);
                 return;
@@ -167,15 +162,21 @@ class RootStore {
                 });
             }
             catch (err) {
-                console.error('Error while fetching data, creating new convo...', err);
+                console.error('Error while fetching data, creating new conversation...', err);
                 yield this.createConversation();
             }
-            yield this.fetchPreferences();
+            this.fetchLanguage();
         });
     }
     fetchBotInfo() {
         return __awaiter(this, void 0, void 0, function* () {
-            const botInfo = yield this.api.fetchBotInfo();
+            if (!this.config.mediaFileServiceUrl) {
+                return;
+            }
+            const botInfo = yield this.api.fetchBotInfo(this.config.mediaFileServiceUrl);
+            if (!botInfo) {
+                return;
+            }
             (0, mobx_1.runInAction)('-> setBotInfo', () => {
                 this.botInfo = botInfo;
             });
@@ -185,16 +186,10 @@ class RootStore {
             });
         });
     }
-    fetchPreferences() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // TODO: where to fetch this from? Can this just be set in the frontend?
-            const preferences = { language: 'en' }; // await this.api.fetchPreferences()
-            if (!preferences.language) {
-                return;
-            }
-            (0, mobx_1.runInAction)('-> setPreferredLanguage', () => {
-                this.updateBotUILanguage(preferences.language);
-            });
+    fetchLanguage() {
+        const language = (0, translations_1.getUserLocale)(this.config.locale);
+        (0, mobx_1.runInAction)('-> setPreferredLanguage', () => {
+            this.updateBotUILanguage(language);
         });
     }
     /** Fetches the list of conversation, and update the corresponding config values */
@@ -266,18 +261,15 @@ class RootStore {
             return newId;
         });
     }
-    setReference() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.api.setReference(this.config.reference, this.currentConversationId);
-        });
-    }
     resetConversation() {
         this.currentConversation = undefined;
     }
     resetSession() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.composer.setLocked(false);
-            return this.api.resetSession(this.currentConversationId);
+            if (this.currentConversationId) {
+                this.composer.setLocked(false);
+                return this.api.resetSession(this.currentConversationId);
+            }
         });
     }
     extractFeedback(messages) {
@@ -298,41 +290,62 @@ class RootStore {
     downloadConversation() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const { txt, name } = yield this.api.downloadConversation(this.currentConversationId);
-                const blobFile = new Blob([txt]);
-                (0, utils_1.downloadFile)(name, blobFile);
+                const formatDate = (date) => {
+                    return new Date(date).toLocaleString();
+                };
+                const conversation = this.currentConversation;
+                if (!conversation) {
+                    console.warn('Cannot download the current conversation as it is undefined.');
+                    return;
+                }
+                let info = `Conversation Id: ${conversation.id}\nCreated on: ${formatDate(conversation.createdOn)}\nUser: ${conversation.userId}\n-----------------`;
+                const messages = yield this.api.listCurrentConversationMessages(500);
+                for (const message of (0, orderBy_1.default)(messages, 'sentOn', 'desc')) {
+                    const payload = message.payload;
+                    if (payload.type === 'session_reset') {
+                        continue;
+                    }
+                    info += `\n[${formatDate(message.sentOn)}] ${message.authorId ? 'User' : this.config.botId || 'Bot'}: Event (${payload.type}): ${payload.text ||
+                        payload.audio ||
+                        payload.image ||
+                        payload.video ||
+                        payload.file ||
+                        payload.message ||
+                        payload.title ||
+                        ''}`;
+                }
+                const blobFile = new Blob([info]);
+                (0, utils_1.downloadFile)(`conversation-${conversation.id}`, blobFile);
             }
             catch (err) {
-                console.error('Error trying to download conversation');
+                console.error('Error trying to download conversation', err);
             }
         });
     }
     /** Sends an event or a message, depending on how the backend manages those types */
     sendData(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.isInitialized) {
+            if (!this.isInitialized || !this.currentConversationId) {
                 console.warn('[webchat] Cannot send data until the webchat is ready');
                 return;
             }
-            // TODO: this can't work. We can't create events directly
-            /*
-            if (!constants.MESSAGE_TYPES.includes(data.type)) {
-              return this.api.sendEvent(data, this.currentConversationId)
-            }
-            */
             const message = yield this.api.sendMessage(data, this.currentConversationId);
             this.updateLastMessage(this.currentConversationId, message);
         });
     }
     uploadFile(title, payload, file) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.api.uploadFile(file, payload, this.currentConversationId);
+            if (this.currentConversationId) {
+                yield this.api.uploadFile(file, payload, this.currentConversationId);
+            }
         });
     }
     /** Sends a message of type voice */
     sendVoiceMessage(voice, ext) {
         return __awaiter(this, void 0, void 0, function* () {
-            return this.api.sendVoiceMessage(voice, ext, this.currentConversationId);
+            if (this.currentConversationId) {
+                return this.api.sendVoiceMessage(voice, ext, this.currentConversationId);
+            }
         });
     }
     /** Use this method to replace a value or add a new config */
@@ -346,6 +359,7 @@ class RootStore {
         this._applyConfig();
     }
     _applyConfig() {
+        window.BP_STORAGE.config = this.config;
         this.config.layoutWidth && this.view.setLayoutWidth(this.config.layoutWidth);
         this.config.containerWidth && this.view.setContainerWidth(this.config.containerWidth);
         this.view.disableAnimations = this.config.disableAnimations;
@@ -359,7 +373,7 @@ class RootStore {
         else if (window.USE_SESSION_STORAGE !== this.config.useSessionStorage) {
             console.warn('[WebChat] "useSessionStorage" value cannot be altered once the webchat is initialized');
         }
-        const locale = this.config.locale ? (0, translations_1.getUserLocale)(this.config.locale) : chosenLocale;
+        const locale = (0, translations_1.getUserLocale)(this.config.locale);
         this.updateBotUILanguage(locale);
         document.documentElement.setAttribute('lang', locale);
         this.publishConfigChanged();
@@ -374,14 +388,9 @@ class RootStore {
     publishConfigChanged() {
         this.postMessage('configChanged', JSON.stringify(this.config, undefined, 2));
     }
-    setMessageWrapper(messageWrapper) {
-        this.messageWrapper = messageWrapper;
-    }
     updatePreferredLanguage(lang) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.preferredLanguage = lang;
-            yield this.api.updateUserPreferredLanguage(lang);
-        });
+        this.preferredLanguage = lang;
+        (0, translations_1.setUserLocale)(lang);
     }
     /** Starts a timer to remove the typing animation when it's completed */
     _startTypingTimer() {
@@ -390,7 +399,8 @@ class RootStore {
         }
         this.isBotTyping.set(true);
         this._typingInterval = setInterval(() => {
-            const typeUntil = new Date(this.currentConversation && this.currentConversation.typingUntil);
+            var _a;
+            const typeUntil = new Date((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.typingUntil);
             if (!typeUntil || !(0, is_valid_1.default)(typeUntil) || (0, is_before_1.default)(typeUntil, new Date())) {
                 this._expireTyping();
             }
@@ -402,20 +412,24 @@ class RootStore {
     _expireTyping() {
         this.emptyDelayedMessagesQueue(true);
         this.isBotTyping.set(false);
-        this.currentConversation.typingUntil = undefined;
+        if (this.currentConversation) {
+            this.currentConversation.typingUntil = undefined;
+        }
         clearInterval(this._typingInterval);
         this._typingInterval = undefined;
     }
     updateBotUILanguage(lang) {
         lang = (0, translations_1.getUserLocale)(lang); // Ensure language is supported
         (0, mobx_1.runInAction)('-> setBotUILanguage', () => {
-            var _a;
             this.botUILanguage = lang;
             this.preferredLanguage = lang;
-            (_a = window.BP_STORAGE) === null || _a === void 0 ? void 0 : _a.set('bp/channel-web/user-lang', lang);
+            (0, translations_1.setUserLocale)(lang);
         });
     }
     emptyDelayedMessagesQueue(removeAll) {
+        if (!this.currentConversation) {
+            return;
+        }
         while (this.delayedMessages.length) {
             const message = this.delayedMessages[0];
             if (removeAll || (0, is_before_1.default)(message.showAt, new Date())) {
@@ -468,9 +482,6 @@ __decorate([
 __decorate([
     mobx_1.observable
 ], RootStore.prototype, "messageFeedbacks", void 0);
-__decorate([
-    mobx_1.observable
-], RootStore.prototype, "messageWrapper", void 0);
 __decorate([
     mobx_1.observable
 ], RootStore.prototype, "botUILanguage", void 0);
@@ -486,9 +497,6 @@ __decorate([
 __decorate([
     mobx_1.computed
 ], RootStore.prototype, "botName", null);
-__decorate([
-    mobx_1.computed
-], RootStore.prototype, "isEmulator", null);
 __decorate([
     mobx_1.computed
 ], RootStore.prototype, "hasBotInfoDescription", null);
@@ -522,9 +530,6 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "deleteConversation", null);
-__decorate([
-    mobx_1.action.bound
-], RootStore.prototype, "loadEventInDebugger", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "addEventToConversation", null);
@@ -539,7 +544,7 @@ __decorate([
 ], RootStore.prototype, "fetchBotInfo", null);
 __decorate([
     mobx_1.action.bound
-], RootStore.prototype, "fetchPreferences", null);
+], RootStore.prototype, "fetchLanguage", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "fetchConversations", null);
@@ -555,9 +560,6 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "createConversation", null);
-__decorate([
-    mobx_1.action.bound
-], RootStore.prototype, "setReference", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "resetConversation", null);
@@ -594,9 +596,6 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "publishConfigChanged", null);
-__decorate([
-    mobx_1.action.bound
-], RootStore.prototype, "setMessageWrapper", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "updatePreferredLanguage", null);

package/dist/store/view.d.ts

@@ -17,7 +17,6 @@ declare class ViewStore {
     customButtons: CustomButton[];
     customActions: CustomAction[];
     disableAnimations: boolean;
-    highlightedMessages: string[];
     constructor(rootStore: RootStore, fullscreen: boolean);
     get showConversationsButton(): boolean;
     get showBotInfoButton(): boolean;
@@ -51,7 +50,6 @@ declare class ViewStore {
     addCustomAction(newAction: CustomAction): void;
     removeCustomAction(actionId: string): void;
     addHeaderButton(newButton: CustomButton): void;
-    setHighlightedMessages(ids: string[]): void;
     /** Updates one or multiple properties of a specific button */
     updateHeaderButton(buttonId: string, newProps: Partial<CustomButton>): void;
     removeHeaderButton(buttonId: string): void;

package/dist/store/view.js

@@ -26,7 +26,6 @@ class ViewStore {
         this.customButtons = [];
         this.customActions = [];
         this.disableAnimations = false;
-        this.highlightedMessages = [];
         this.rootStore = rootStore;
         this.isFullscreen = fullscreen;
         this.activeView = fullscreen ? 'side' : 'widget';
@@ -151,9 +150,6 @@ class ViewStore {
         }
         this.customButtons.push(newButton);
     }
-    setHighlightedMessages(ids) {
-        this.highlightedMessages = ids;
-    }
     /** Updates one or multiple properties of a specific button */
     updateHeaderButton(buttonId, newProps) {
         const button = this.customButtons.find((btn) => btn.id === buttonId);
@@ -260,9 +256,6 @@ __decorate([
 __decorate([
     mobx_1.observable
 ], ViewStore.prototype, "disableAnimations", void 0);
-__decorate([
-    mobx_1.observable
-], ViewStore.prototype, "highlightedMessages", void 0);
 __decorate([
     mobx_1.computed
 ], ViewStore.prototype, "showConversationsButton", null);
@@ -353,9 +346,6 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], ViewStore.prototype, "addHeaderButton", null);
-__decorate([
-    mobx_1.action.bound
-], ViewStore.prototype, "setHighlightedMessages", null);
 __decorate([
     mobx_1.action.bound
 ], ViewStore.prototype, "updateHeaderButton", null);

package/dist/translations/index.d.ts

@@ -4,4 +4,5 @@ declare const translations: {
     [lang: string]: any;
 };
 declare const getUserLocale: (manualLocale?: Locale) => string;
-export { translations, DEFAULT_LOCALE as defaultLocale, getUserLocale };
+declare const setUserLocale: (locale: Locale) => void;
+export { translations, DEFAULT_LOCALE as defaultLocale, getUserLocale, setUserLocale };

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.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,20 @@ 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 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 +54,7 @@ const getUserLocale = (manualLocale = 'browser') => {
     return translations[browserLocale] ? browserLocale : DEFAULT_LOCALE;
 };
 exports.getUserLocale = getUserLocale;
+const setUserLocale = (locale) => {
+    setStorageLanguage(locale);
+};
+exports.setUserLocale = setUserLocale;

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 {
@@ -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,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;