@botpress/webchat 0.2.3 → 0.3.0

package/dist/icons/Microphone.js

@@ -0,0 +1,12 @@
+"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 = ({ fill = 'black' }) => (react_1.default.createElement("i", null,
+    react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 475.085 475.085", fill: `${fill}` },
+        react_1.default.createElement("g", null,
+            react_1.default.createElement("g", null,
+                react_1.default.createElement("path", { d: "M237.541,328.897c25.128,0,46.632-8.946,64.523-26.83c17.888-17.884,26.833-39.399,26.833-64.525V91.365\n            c0-25.126-8.938-46.632-26.833-64.525C284.173,8.951,262.669,0,237.541,0c-25.125,0-46.632,8.951-64.524,26.84\n            c-17.893,17.89-26.838,39.399-26.838,64.525v146.177c0,25.125,8.949,46.641,26.838,64.525\n            C190.906,319.951,212.416,328.897,237.541,328.897z" }),
+                react_1.default.createElement("path", { d: "M396.563,188.15c-3.606-3.617-7.898-5.426-12.847-5.426c-4.944,0-9.226,1.809-12.847,5.426\n            c-3.613,3.616-5.421,7.898-5.421,12.845v36.547c0,35.214-12.518,65.333-37.548,90.362c-25.022,25.03-55.145,37.545-90.36,37.545\n            c-35.214,0-65.334-12.515-90.365-37.545c-25.028-25.022-37.541-55.147-37.541-90.362v-36.547c0-4.947-1.809-9.229-5.424-12.845\n            c-3.617-3.617-7.895-5.426-12.847-5.426c-4.952,0-9.235,1.809-12.85,5.426c-3.618,3.616-5.426,7.898-5.426,12.845v36.547\n            c0,42.065,14.04,78.659,42.112,109.776c28.073,31.118,62.762,48.961,104.068,53.526v37.691h-73.089\n            c-4.949,0-9.231,1.811-12.847,5.428c-3.617,3.614-5.426,7.898-5.426,12.847c0,4.941,1.809,9.233,5.426,12.847\n            c3.616,3.614,7.898,5.428,12.847,5.428h182.719c4.948,0,9.236-1.813,12.847-5.428c3.621-3.613,5.431-7.905,5.431-12.847\n            c0-4.948-1.81-9.232-5.431-12.847c-3.61-3.617-7.898-5.428-12.847-5.428h-73.08v-37.691\n            c41.299-4.565,75.985-22.408,104.061-53.526c28.076-31.117,42.12-67.711,42.12-109.776v-36.547\n            C401.998,196.049,400.185,191.77,396.563,188.15z" }))))));

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { RootStore } from './store';
 import { Config } from './typings';
-export declare const Embedded: (props: any) => ExposedWebChat;
-export declare const Fullscreen: (props: any) => ExposedWebChat;
 interface State {
     store: RootStore;
 }
@@ -14,10 +12,6 @@ export declare class ExposedWebChat extends React.Component<Props, State> {
     constructor(props: Props);
     render(): JSX.Element;
 }
-/**
- * @deprecated Since the way views are handled has changed, we're also exporting views in lowercase.
- * https://botpress.com/docs/developers/migrate/
- */
-export { Embedded as embedded } from '.';
-export { Fullscreen as fullscreen } from '.';
+export declare const Embedded: (props: Props) => ExposedWebChat;
+export declare const Fullscreen: (props: Props) => ExposedWebChat;
 export * from './typings';

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fullscreen = exports.embedded = exports.ExposedWebChat = exports.Fullscreen = exports.Embedded = void 0;
+exports.Fullscreen = exports.Embedded = exports.ExposedWebChat = void 0;
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
@@ -21,14 +21,12 @@ const react_intl_1 = require("react-intl");
 const main_1 = __importDefault(require("./main"));
 const store_1 = require("./store");
 const translations_1 = require("./translations");
+const storage_1 = __importDefault(require("./utils/storage"));
 (0, mobx_1.configure)({ enforceActions: 'observed' });
-const Embedded = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: false }));
-exports.Embedded = Embedded;
-const Fullscreen = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: true }));
-exports.Fullscreen = Fullscreen;
 class ExposedWebChat extends react_1.default.Component {
     constructor(props) {
         super(props);
+        window.BP_STORAGE = new storage_1.default(props.config);
         this.state = {
             store: new store_1.RootStore({ fullscreen: props.fullscreen }, props.config)
         };
@@ -37,32 +35,14 @@ class ExposedWebChat extends react_1.default.Component {
         const store = this.state.store;
         const { botUILanguage: locale } = store;
         return (react_1.default.createElement(mobx_react_1.Provider, { store: store },
-            react_1.default.createElement(react_intl_1.IntlProvider, { locale: locale, messages: translations_1.translations[locale], defaultLocale: translations_1.defaultLocale },
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(main_1.default, Object.assign({ store: store }, this.props))))));
+            react_1.default.createElement(react_intl_1.IntlProvider, { locale: locale, messages: translations_1.translations[locale || translations_1.defaultLocale], defaultLocale: translations_1.defaultLocale },
+                react_1.default.createElement(main_1.default, Object.assign({}, this.props)))));
     }
 }
 exports.ExposedWebChat = ExposedWebChat;
-// TODO: what does this observer do?
 const Wrapper = (0, mobx_react_1.observer)(ExposedWebChat);
-/**
- * @deprecated Since the way views are handled has changed, we're also exporting views in lowercase.
- * https://botpress.com/docs/developers/migrate/
- */
-var _1 = require(".");
-Object.defineProperty(exports, "embedded", { enumerable: true, get: function () { return _1.Embedded; } });
-var _2 = require(".");
-Object.defineProperty(exports, "fullscreen", { enumerable: true, get: function () { return _2.Fullscreen; } });
+const Embedded = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: false }));
+exports.Embedded = Embedded;
+const Fullscreen = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: true }));
+exports.Fullscreen = Fullscreen;
 __exportStar(require("./typings"), exports);
-// TODO: export this
-/*
-export {
-  Carousel,
-  QuickReplies,
-  LoginPrompt,
-  Text,
-  FileMessage,
-  FileInput,
-  Button
-} from './components/messages/renderer'
-*/

package/dist/main.d.ts

@@ -9,5 +9,5 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
 declare type MainProps = {
-    store: RootStore;
-} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'isEmulator' | 'updateTyping' | 'setReference' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;
+    store?: RootStore;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage' | 'fetchConversation' | 'setIntlProvider' | 'setSocket' | 'currentConversationId'>;

package/dist/main.js

@@ -41,161 +41,128 @@ const query_string_1 = __importDefault(require("query-string"));
 const react_1 = __importDefault(require("react"));
 const react_intl_1 = require("react-intl");
 const Container_1 = __importDefault(require("./components/Container"));
-const Stylesheet_1 = __importDefault(require("./components/Stylesheet"));
 const constants_1 = __importDefault(require("./core/constants"));
 const socket_1 = __importDefault(require("./core/socket"));
 const Chat_1 = __importDefault(require("./icons/Chat"));
 const utils_1 = require("./utils");
+const analytics_1 = require("./utils/analytics");
 exports.DEFAULT_TYPING_DELAY = 1000;
 class Web extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.hasBeenInitialized = false;
         this.isCurrentConversation = (event) => {
-            var _a;
-            return !((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.conversationId) || this.props.config.conversationId === event.conversationId;
+            return this.props.currentConversationId === event.conversationId;
         };
-        this.handleIframeApi = ({ data: { action, payload } }) => __awaiter(this, void 0, void 0, function* () {
-            if (action === 'configure') {
-                this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, payload));
-            }
-            else if (action === 'mergeConfig') {
-                this.props.mergeConfig(payload);
-            }
-            else if (action === 'sendPayload') {
-                yield this.props.sendData(payload);
+        this.handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.closeOnEscape)) {
+                return;
             }
-            else if (action === 'change-user-id') {
-                this.props.store.setUserId(payload);
-            }
-            else if (action === 'event') {
-                const { type, text } = payload;
-                if (type === 'show') {
-                    this.props.showChat();
-                    (0, utils_1.trackWebchatState)('show');
-                }
-                else if (type === 'hide') {
-                    this.props.hideChat();
-                    (0, utils_1.trackWebchatState)('hide');
-                }
-                else if (type === 'toggle') {
-                    this.props.displayWidgetView ? this.props.showChat() : this.props.hideChat();
-                    (0, utils_1.trackWebchatState)('toggle');
-                }
-                else if (type === 'message') {
-                    (0, utils_1.trackMessage)('sent');
-                    yield this.props.sendMessage(text);
-                }
-                else if (type === 'loadConversation') {
-                    yield this.props.store.fetchConversation(payload.conversationId);
-                }
-                else if (type === 'toggleBotInfo') {
-                    this.props.toggleBotInfo();
-                }
-                else {
-                    yield this.props.sendData({ type, payload });
-                }
+            if (e.key === 'Escape') {
+                this.props.hideChat();
             }
         });
-        this.handleClearMessages = (event) => {
-            if (this.isCurrentConversation(event)) {
-                this.props.clearMessages();
+        this.handleIframeApi = ({ data }) => __awaiter(this, void 0, void 0, function* () {
+            switch (data.action) {
+                case 'configure':
+                    return this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, data.payload));
+                case 'mergeConfig':
+                    return this.props.mergeConfig(data.payload);
+                case 'sendPayload':
+                    return this.props.sendData(data.payload);
+                case 'event':
+                    const { type, text, conversationId } = data.payload;
+                    if (type === 'show') {
+                        this.props.showChat();
+                        (0, analytics_1.trackWebchatState)('show');
+                    }
+                    else if (type === 'hide') {
+                        this.props.hideChat();
+                        (0, analytics_1.trackWebchatState)('hide');
+                    }
+                    else if (type === 'toggle') {
+                        this.props.displayWidgetView ? this.props.showChat() : this.props.hideChat();
+                        (0, analytics_1.trackWebchatState)('toggle');
+                    }
+                    else if (type === 'message') {
+                        (0, analytics_1.trackMessage)('sent');
+                        yield this.props.sendMessage(text);
+                    }
+                    else if (type === 'loadConversation') {
+                        yield this.props.fetchConversation(conversationId);
+                    }
+                    else if (type === 'toggleBotInfo') {
+                        this.props.toggleBotInfo();
+                    }
+                    else {
+                        yield this.props.sendData({ type, payload: data.payload });
+                    }
+                default:
+                    break;
             }
-        };
+        });
         this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+            var _b;
+            if (!this.isCurrentConversation(event)) {
+                // don't do anything, it's a message from another conversation
+                return;
+            }
             if (event.authorId === undefined) {
                 const value = (event.payload.type === 'typing' ? event.payload.value : undefined) || exports.DEFAULT_TYPING_DELAY;
                 yield this.handleTyping(Object.assign(Object.assign({}, event), { timeInMs: value }));
             }
-            if (((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'visit') {
+            if (((_b = event.payload) === null || _b === void 0 ? void 0 : _b.type) === 'visit') {
                 // don't do anything, it's the system message
                 return;
             }
-            if (!this.isCurrentConversation(event)) {
-                // don't do anything, it's a message from another conversation
-                return;
-            }
-            (0, utils_1.trackMessage)('received');
+            (0, analytics_1.trackMessage)('received');
             this.props.updateLastMessage(event.conversationId, event);
             yield this.props.addEventToConversation(event);
             // there's no focus on the actual conversation
-            if ((document.hasFocus && !document.hasFocus()) || this.props.activeView !== 'side') {
+            if (!document.hasFocus() || this.props.activeView !== 'side') {
                 yield this.playSound();
                 this.props.incrementUnread();
             }
             this.handleResetUnreadCount();
-            if (!['session_reset'].includes(event.payload.type) && event.id !== this.lastMessageId) {
-                this.lastMessageId = event.id;
-                yield this.props.store.loadEventInDebugger(event.id);
-            }
         });
         this.handleTyping = (event) => __awaiter(this, void 0, void 0, function* () {
-            if (!this.isCurrentConversation(event)) {
-                // don't do anything, it's a message from another conversation
-                return;
-            }
             yield this.props.updateTyping(event);
         });
-        this.handleDataMessage = (event) => {
-            if (!event || !event.payload) {
-                return;
-            }
-            const { language } = event.payload;
-            if (!language) {
-                return;
-            }
-            this.props.updateBotUILanguage(language);
-        };
         this.playSound = (0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {
-            // Preference for config object
-            const disableNotificationSound = this.config.disableNotificationSound === undefined
-                ? this.props.config.disableNotificationSound
-                : this.config.disableNotificationSound;
+            var _c;
+            const disableNotificationSound = this.config.disableNotificationSound || ((_c = this.props.config) === null || _c === void 0 ? void 0 : _c.disableNotificationSound);
             if (disableNotificationSound || this.audio.readyState < 2) {
                 return;
             }
             yield this.audio.play();
         }), constants_1.default.MIN_TIME_BETWEEN_SOUNDS);
         this.handleResetUnreadCount = () => {
-            var _a;
-            if (((_a = document.hasFocus) === null || _a === void 0 ? void 0 : _a.call(document)) && this.props.activeView === 'side') {
+            if (document.hasFocus() && this.props.activeView === 'side') {
                 this.props.resetUnread();
             }
         };
-        (0, utils_1.checkLocationOrigin)();
-        (0, utils_1.initializeAnalytics)();
+        (0, analytics_1.initializeAnalytics)();
     }
     componentDidMount() {
         return __awaiter(this, void 0, void 0, function* () {
             this.audio = new Audio(require('url:../assets/notification.mp3'));
-            this.props.store.setIntlProvider(this.props.intl);
+            this.props.setIntlProvider(this.props.intl);
             window.store = this.props.store;
             window.addEventListener('message', this.handleIframeApi);
-            window.addEventListener('keydown', (e) => {
-                if (!this.props.config.closeOnEscape) {
-                    return;
-                }
-                if (e.key === 'Escape') {
-                    this.props.hideChat();
-                    // TODO: what to do with emulator mode?
-                    if (this.props.config.isEmulator) {
-                        window.parent.document.getElementById('mainLayout').focus();
-                    }
-                }
-            });
-            yield this.load();
+            window.addEventListener('keydown', this.handleKeyDown);
+            yield this.loadConfig();
             yield this.initializeIfChatDisplayed();
             this.props.setLoadingCompleted();
         });
     }
     componentWillUnmount() {
         window.removeEventListener('message', this.handleIframeApi);
+        window.removeEventListener('keydown', this.handleKeyDown);
     }
     componentDidUpdate() {
         if (this.config) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            this.initializeIfChatDisplayed();
+            void this.initializeIfChatDisplayed();
         }
     }
     initializeIfChatDisplayed() {
@@ -208,30 +175,24 @@ class Web extends react_1.default.Component {
                 if (this.isLazySocket() || !this.socket) {
                     yield this.initializeSocket();
                 }
-                yield this.socket.waitForUserId();
-                this.props.store.setSocket(this.socket);
+                yield this.socket.connect();
+                this.props.setSocket(this.socket);
                 yield this.props.initializeChat();
             }
         });
     }
-    load() {
+    loadConfig() {
         return __awaiter(this, void 0, void 0, function* () {
             this.config = this.extractConfig();
+            this.props.updateConfig(this.config);
             if (this.config.exposeStore) {
                 const storePath = this.config.chatId ? `${this.config.chatId}.webchat_store` : 'webchat_store';
                 (0, set_1.default)(window.parent, storePath, this.props.store);
             }
-            if (this.config.overrides) {
-                this.loadOverrides(this.config.overrides);
-            }
             if (this.config.containerWidth) {
                 this.postMessageToParent('setWidth', this.config.containerWidth);
             }
-            if (this.config.reference) {
-                yield this.props.setReference();
-            }
-            // TODO: replace this by frontend configuration
-            // await this.props.fetchBotInfo!()
+            yield this.props.fetchBotInfo();
             if (!this.isLazySocket()) {
                 yield this.initializeSocket();
             }
@@ -239,69 +200,38 @@ class Web extends react_1.default.Component {
         });
     }
     postMessageToParent(type, value) {
-        var _a, _b;
-        (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type, value, chatId: (_b = this.config) === null || _b === void 0 ? void 0 : _b.chatId }, '*');
+        var _a;
+        (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type, value, chatId: this.config.chatId }, '*');
     }
     extractConfig() {
-        const decodeIfRequired = (options) => {
-            try {
-                return decodeURIComponent(options);
-            }
-            catch (_a) {
-                return options;
-            }
-        };
-        const { options, ref } = query_string_1.default.parse(location.search);
-        const { config } = JSON.parse(decodeIfRequired(options || '{}'));
-        const userConfig = Object.assign({}, constants_1.default.DEFAULT_CONFIG, this.props.config, config);
-        userConfig.reference = (config === null || config === void 0 ? void 0 : config.ref) || ref;
-        this.props.updateConfig(userConfig);
-        return userConfig;
+        let userConfig = Object.assign({}, constants_1.default.DEFAULT_CONFIG, this.props.config);
+        const { options } = query_string_1.default.parse(location.search);
+        if (!options || typeof options !== 'string') {
+            console.warn(`Cannot decode option. Invalid format: ${typeof options}, expecting 'string'.`);
+            return userConfig;
+        }
+        try {
+            const parsedOptions = JSON.parse(decodeURIComponent(options));
+            userConfig = Object.assign(userConfig, parsedOptions.config);
+            return userConfig;
+        }
+        catch (err) {
+            // TODO: Handle those errors so they don't directly bubble up to the users
+            throw new Error(`An error occurred while extracting the configurations ${err}`);
+        }
     }
     initializeSocket() {
         return __awaiter(this, void 0, void 0, function* () {
             this.socket = new socket_1.default(this.config);
-            this.socket.onClear = this.handleClearMessages;
             this.socket.onMessage = this.handleNewMessage;
-            this.socket.onTyping = this.handleTyping;
-            this.socket.onData = this.handleDataMessage;
-            this.socket.onUserIdChanged = this.props.setUserId;
-            // TODO: Can't do that
-            // this.config.userId && this.socket.changeUserId(this.config.userId)
             this.socket.setup();
-            yield this.socket.waitForUserId();
-            this.props.store.setSocket(this.socket);
+            yield this.socket.connect();
+            this.props.setSocket(this.socket);
         });
     }
-    loadOverrides(overrides) {
-        try {
-            for (const override of Object.values(overrides)) {
-                // TODO: load module view this can't work
-                // override.map(({ module }) => this.props.bp!.loadModuleView(module, true))
-            }
-        }
-        catch (err) {
-            console.error('Error while loading overrides', err.message);
-        }
-    }
     setupObserver() {
-        (0, mobx_1.observe)(this.props.config, 'userId', (data) => __awaiter(this, void 0, void 0, function* () {
-            if (!data.oldValue || data.oldValue === data.newValue) {
-                return;
-            }
-            // TODO: Can't work right now
-            // this.socket.changeUserId(data.newValue)
-            this.socket.setup();
-            yield this.socket.waitForUserId();
-            yield this.props.initializeChat();
-        }));
-        (0, mobx_1.observe)(this.props.config, 'overrides', (data) => {
-            if (data.newValue && window.parent) {
-                this.loadOverrides(data.newValue);
-            }
-        });
         (0, mobx_1.observe)(this.props.dimensions, 'container', (data) => {
-            if (data.newValue && window.parent) {
+            if (data.newValue) {
                 this.postMessageToParent('setWidth', data.newValue);
             }
         });
@@ -324,21 +254,22 @@ class Web extends react_1.default.Component {
             this.props.hasUnreadMessages && react_1.default.createElement("span", { className: 'bpw-floating-button-unread' }, this.props.unreadCount)));
     }
     applyAndRenderStyle() {
-        const emulatorClass = this.props.isEmulator ? ' emulator' : '';
-        const parentClass = (0, classnames_1.default)(`bp-widget-web bp-widget-${this.props.activeView}${emulatorClass}`, {
+        var _a, _b, _c;
+        const parentClass = (0, classnames_1.default)(`bp-widget-web bp-widget-${this.props.activeView}`, {
             'bp-widget-hidden': !this.props.showWidgetButton && this.props.displayWidgetView,
-            [this.props.config.className]: !!this.props.config.className
+            [(_a = this.props.config) === null || _a === void 0 ? void 0 : _a.className]: !!((_b = this.props.config) === null || _b === void 0 ? void 0 : _b.className)
         });
         if (this.parentClass !== parentClass) {
             this.postMessageToParent('setClass', parentClass);
             this.parentClass = parentClass;
         }
-        const { stylesheet, extraStylesheet } = this.props.config;
+        const stylesheet = this.props.config.stylesheet;
+        const extraStylesheet = (_c = this.props.botInfo) === null || _c === void 0 ? void 0 : _c.extraStylesheet;
         const RobotoFont = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./fonts/roboto'))));
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            !!(stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.length) && react_1.default.createElement(Stylesheet_1.default, { href: stylesheet }),
+            !!(stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.length) && react_1.default.createElement("link", { rel: "stylesheet", type: "text/css", href: stylesheet }),
             react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) }, !utils_1.isIE && react_1.default.createElement(RobotoFont, null)),
-            !!(extraStylesheet === null || extraStylesheet === void 0 ? void 0 : extraStylesheet.length) && react_1.default.createElement(Stylesheet_1.default, { href: extraStylesheet })));
+            !!(extraStylesheet === null || extraStylesheet === void 0 ? void 0 : extraStylesheet.length) && react_1.default.createElement("link", { rel: "stylesheet", type: "text/css", href: extraStylesheet })));
     }
     render() {
         if (!this.props.isWebchatReady) {
@@ -364,11 +295,8 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     mergeConfig: store.mergeConfig,
     addEventToConversation: store.addEventToConversation,
     clearMessages: store.clearMessages,
-    setUserId: store.setUserId,
     updateTyping: store.updateTyping,
     sendMessage: store.sendMessage,
-    setReference: store.setReference,
-    isEmulator: store.isEmulator,
     updateBotUILanguage: store.updateBotUILanguage,
     isWebchatReady: store.view.isWebchatReady,
     showWidgetButton: store.view.showWidgetButton,
@@ -386,5 +314,9 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     displayWidgetView: store.view.displayWidgetView,
     setLoadingCompleted: store.view.setLoadingCompleted,
     sendFeedback: store.sendFeedback,
-    updateLastMessage: store.updateLastMessage
+    updateLastMessage: store.updateLastMessage,
+    fetchConversation: store.fetchConversation,
+    setIntlProvider: store.setIntlProvider,
+    setSocket: store.setSocket,
+    currentConversationId: store.currentConversationId
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Web)));

package/dist/store/composer.js

@@ -14,7 +14,7 @@ const takeRight_1 = __importDefault(require("lodash/takeRight"));
 const mobx_1 = require("mobx");
 const constants_1 = __importDefault(require("../core/constants"));
 const HISTORY_UP = 'ArrowUp';
-const SENT_HISTORY_KEY = `bp::${window.BOT_ID}::sentHistory`;
+const SENT_HISTORY_KEY = 'sent-history';
 class ComposerStore {
     constructor(rootStore) {
         this.message = '';
@@ -23,9 +23,7 @@ class ComposerStore {
         this._sentHistory = [];
         this._sentHistoryIndex = 0;
         this.rootStore = rootStore;
-        if (window.BP_STORAGE) {
-            this._sentHistory = window.BP_STORAGE.get(SENT_HISTORY_KEY) || [];
-        }
+        this._sentHistory = window.BP_STORAGE.get(SENT_HISTORY_KEY) || [];
     }
     get composerPlaceholder() {
         var _a;
@@ -35,12 +33,11 @@ class ComposerStore {
         this.message = msg;
     }
     addMessageToHistory(text) {
-        var _a;
         if ((0, last_1.default)(this._sentHistory) !== text) {
             this._sentHistory.push(text);
             this._sentHistoryIndex = 0;
             if (this.rootStore.config.enablePersistHistory) {
-                (_a = window.BP_STORAGE) === null || _a === void 0 ? void 0 : _a.set(SENT_HISTORY_KEY, (0, takeRight_1.default)(this._sentHistory, constants_1.default.SENT_HISTORY_SIZE));
+                window.BP_STORAGE.set(SENT_HISTORY_KEY, (0, takeRight_1.default)(this._sentHistory, constants_1.default.SENT_HISTORY_SIZE));
             }
         }
     }

package/dist/store/index.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="node" />
 import { IntlShape } from 'react-intl';
 import BpSocket from '../core/socket';
-import { BotInfo, Config, CurrentConversation, EventFeedback, Message, MessageWrapper, QueuedMessage, RecentConversation, StudioConnector, uuid } from '../typings';
+import { BotInfo, Config, CurrentConversation, EventFeedback, Message, QueuedMessage, RecentConversation, uuid } from '../typings';
 import ComposerStore from './composer';
 import ViewStore from './view';
-/** Includes the partial definitions of all classes */
+/** Includes the definitions of all store classes */
 export declare type StoreDef = Partial<RootStore> & Partial<ViewStore> & Partial<ComposerStore> & Partial<Config>;
 declare class RootStore {
     composer: ComposerStore;
@@ -12,7 +12,7 @@ declare class RootStore {
     private _typingInterval;
     private api;
     conversations: RecentConversation[];
-    currentConversation: CurrentConversation;
+    currentConversation?: CurrentConversation;
     botInfo: BotInfo;
     config: Config;
     preferredLanguage: string;
@@ -20,8 +20,6 @@ declare class RootStore {
     messageFeedbacks: EventFeedback[];
     intl: IntlShape;
     isBotTyping: import("mobx").IObservableValue<boolean>;
-    /** When a wrapper is defined, every messages are wrapped by the specified component */
-    messageWrapper: MessageWrapper | undefined;
     botUILanguage: string;
     delayedMessages: QueuedMessage[];
     constructor(options: {
@@ -31,25 +29,23 @@ declare class RootStore {
     setSocket(socket: BpSocket): void;
     get isConversationStarted(): boolean;
     get botName(): string;
-    get isEmulator(): boolean;
     get hasBotInfoDescription(): boolean;
     get botAvatarUrl(): string | undefined;
     get rtl(): boolean;
     get escapeHTML(): boolean;
     get currentMessages(): Message[];
-    get currentConversationId(): uuid;
+    get currentConversationId(): uuid | undefined;
     postMessage(name: string, payload?: any): void;
     updateMessages(messages: Message[]): void;
     updateLastMessage(conversationId: string, message?: Message): void;
     clearMessages(): void;
     deleteConversation(): Promise<void>;
-    loadEventInDebugger(messageId: uuid, isManual?: boolean): Promise<void>;
     addEventToConversation(event: Message): Promise<void>;
     updateTyping(event: Message): Promise<void>;
     /** Loads the initial state, for the first time or when the user ID is changed. */
     initializeChat(): Promise<void>;
     fetchBotInfo(): Promise<void>;
-    fetchPreferences(): Promise<void>;
+    fetchLanguage(): void;
     /** Fetches the list of conversation, and update the corresponding config values */
     fetchConversations(): Promise<void>;
     /** Fetch the specified conversation ID, or try to fetch a valid one from the list */
@@ -60,33 +56,27 @@ declare class RootStore {
     startConversation(): Promise<void>;
     /** Creates a new conversation and switches to it */
     createConversation(): Promise<uuid>;
-    setReference(): Promise<void>;
     resetConversation(): void;
-    resetSession(): Promise<void>;
     extractFeedback(messages: Message[]): Promise<void>;
     sendFeedback(feedback: number, messageId: string): Promise<void>;
     downloadConversation(): Promise<void>;
     /** Sends an event or a message, depending on how the backend manages those types */
     sendData(data: any): Promise<void>;
-    uploadFile(title: string, payload: string, file: File): Promise<void>;
     /** Sends a message of type voice */
     sendVoiceMessage(voice: Buffer, ext: string): Promise<void>;
     /** Use this method to replace a value or add a new config */
     mergeConfig(config: Partial<Config>): void;
     /** This replaces all the configurations by this object */
-    updateConfig(config: Config, bp?: StudioConnector): void;
+    updateConfig(config: Config): void;
     private _applyConfig;
-    /** When this method is used, the user ID is changed in the configuration, then the socket is updated */
-    setUserId(userId: string): void;
     publishConfigChanged(): void;
-    setMessageWrapper(messageWrapper: MessageWrapper): void;
-    updatePreferredLanguage(lang: string): Promise<void>;
+    updatePreferredLanguage(lang: string): void;
     /** Starts a timer to remove the typing animation when it's completed */
     private _startTypingTimer;
     private _expireTyping;
     updateBotUILanguage(lang: string): void;
     private emptyDelayedMessagesQueue;
-    /** Returns the current conversation ID, or the last one if it didn't expired. Otherwise, returns nothing. */
+    /** Returns the current conversation ID, or the last one. */
     private _getCurrentConvoId;
 }
 export { RootStore };