@botpress/webchat 0.2.0 → 0.2.4

package/dist/core/api.js

@@ -12,30 +12,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const get_1 = __importDefault(require("lodash/get"));
+const axios_1 = __importDefault(require("axios"));
 const uuid_1 = require("uuid");
 class WebchatApi {
     constructor(socket) {
         this.socket = socket;
-        this.handleApiError = (error) => __awaiter(this, void 0, void 0, function* () {
-            // @deprecated 11.9 (replace with proper error management)
-            const data = (0, get_1.default)(error, 'response.data', {});
-            if (data && typeof data === 'string' && data.includes('BP_CONV_NOT_FOUND')) {
-                console.error('Conversation not found, starting a new one...');
-                yield this.createConversation();
-                yield this.startConversation();
-            }
-        });
     }
-    get baseUserPayload() {
-        return {
-            webSessionId: window.__BP_VISITOR_SOCKET_ID
-        };
-    }
-    fetchBotInfo() {
+    fetchBotInfo(mediaFileServiceUrl) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const { data } = yield this.axios.get('/botInfo', this.axiosConfig);
+                const { data } = yield axios_1.default.get(mediaFileServiceUrl);
                 return data;
             }
             catch (err) {
@@ -43,35 +29,24 @@ class WebchatApi {
             }
         });
     }
-    fetchPreferences() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { data } = yield this.axios.post('/preferences/get', this.baseUserPayload, this.axiosConfig);
-                return data;
-            }
-            catch (err) {
-                console.error('Error while fetching preferences', err);
-            }
-        });
-    }
-    updateUserPreferredLanguage(language) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                yield this.axios.post('/preferences', Object.assign(Object.assign({}, this.baseUserPayload), { language }), this.axiosConfig);
-            }
-            catch (err) {
-                console.error('Error in updating user preferred language', err);
-            }
-        });
-    }
     fetchConversations() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const convos = yield this.socket.socket.listConversations();
-                return convos;
+                const conversations = (yield this.socket.socket.listConversations());
+                // Add the last message of each conversation
+                for (const conversation of conversations) {
+                    const limit = 1;
+                    yield this.socket.socket.switchConversation(conversation.id);
+                    const lastMessages = yield this.socket.socket.listMessages(limit);
+                    if (lastMessages.length >= limit) {
+                        conversation.lastMessage = lastMessages[0];
+                    }
+                }
+                return conversations;
             }
             catch (err) {
-                console.error('Error while fetching convos', err);
+                console.error('Error while fetching users conversations', err);
+                return [];
             }
         });
     }
@@ -84,14 +59,14 @@ class WebchatApi {
                 return Object.assign(Object.assign({}, conversation), { messages });
             }
             catch (err) {
-                yield this.handleApiError(err);
+                console.error('Error fetching a conversation', err);
             }
         });
     }
+    // TODO: Fis this
     resetSession(conversationId) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                yield this.axios.post('/conversations/reset', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
             }
             catch (err) {
                 console.error('Error while resetting conversation', err);
@@ -105,7 +80,7 @@ class WebchatApi {
                 return conversation.id;
             }
             catch (err) {
-                console.error('Error in create conversation', err);
+                console.error('Error creating conversation', err);
             }
         });
     }
@@ -115,118 +90,51 @@ class WebchatApi {
                 yield this.socket.socket.startConversation();
             }
             catch (err) {
-                console.error('Error in start conversation', err);
-            }
-        });
-    }
-    downloadConversation(conversationId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { data } = yield this.axios.post('/conversations/download/txt', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
-                return { name: data.name, txt: data.txt };
-            }
-            catch (err) {
-                console.error('Error in download conversation', err);
+                console.error('Error starting conversation', err);
             }
         });
     }
-    // TODO: we don't have a /events route available for this
-    /*
-    async sendEvent(payload: any, conversationId: uuid): Promise<void> {
-      try {
-        return this.axios.post('/events', { ...this.baseUserPayload, conversationId, payload }, this.axiosConfig)
-      } catch (err) {
-        await this.handleApiError(err)
-      }
-    }
-    */
     sendMessage(payload, conversationId) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 return this.socket.sendPayload(payload);
             }
             catch (err) {
-                yield this.handleApiError(err);
+                console.error('Error sending message', err);
             }
         });
     }
-    deleteMessages(conversationId) {
+    deleteConversation(conversationId) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                yield this.axios.post('/conversations/messages/delete', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId }), this.axiosConfig);
+                yield this.socket.socket.deleteConversation(conversationId);
             }
             catch (err) {
-                yield this.handleApiError(err);
+                console.error('Error deleting conversation', err);
             }
         });
     }
     sendFeedback(feedback, messageId) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                return this.socket.socket.sendFeedback(messageId, feedback);
-            }
-            catch (err) {
-                yield this.handleApiError(err);
-            }
-        });
-    }
-    getMessageIdsFeedbackInfo(messageIds) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const { data } = yield this.axios.post('/feedbackInfo', { messageIds, target: this.userId }, this.axiosConfig);
-                return data;
-            }
-            catch (err) {
-                yield this.handleApiError(err);
-            }
+            return this.socket.socket.sendFeedback(messageId, feedback);
         });
     }
     uploadFile(file, payload, conversationId) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const data = new FormData();
-                data.append('file', file);
-                data.append('webSessionId', this.baseUserPayload.webSessionId);
-                data.append('conversationId', conversationId);
-                data.append('payload', payload);
-                return this.axios.post('/messages/files', data, this.axiosConfig);
-            }
-            catch (err) {
-                yield this.handleApiError(err);
-            }
+            const data = new FormData();
+            data.append('file', file);
+            data.append('conversationId', conversationId);
+            data.append('payload', payload);
+            return this.axios.post('/messages/files', data, this.axiosConfig);
         });
     }
+    // TODO: Fix this
     sendVoiceMessage(voice, ext, conversationId) {
         return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const audio = {
-                    buffer: voice.toString('base64'),
-                    title: `${(0, uuid_1.v4)()}.${ext}`
-                };
-                return this.axios.post('/messages/voice', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId, audio }), this.axiosConfig);
-            }
-            catch (err) {
-                yield this.handleApiError(err);
-            }
-        });
-    }
-    setReference(reference, conversationId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // TODO: this can't work. We don't have a reference route
-            try {
-                return this.axios.post('/conversations/reference', Object.assign(Object.assign({}, this.baseUserPayload), { conversationId, reference }), this.axiosConfig);
-            }
-            catch (err) {
-                yield this.handleApiError(err);
-            }
-        });
-    }
-    listByIncomingEvent(messageId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { data: messages } = yield this.axios.get(`/messaging/list-by-incoming-event/${messageId}`, {
-                baseURL: window['BOT_API_PATH']
-            });
-            return messages;
+            const audio = {
+                buffer: voice.toString('base64'),
+                title: `${(0, uuid_1.v4)()}.${ext}`
+            };
         });
     }
 }

package/dist/core/socket.d.ts

@@ -15,7 +15,4 @@ export default class BpSocket {
     postToParent: (_type: string, payload: any) => void;
     /** Waits until the VISITOR ID and VISITOR SOCKET ID is set  */
     waitForUserId(): Promise<void>;
-    getStorage<T>(key: string): T | undefined;
-    setStorage<T>(key: string, object: T): void;
-    private getStorageKey;
 }

package/dist/core/socket.js

@@ -46,11 +46,11 @@ class BpSocket {
                 return this.waitingForUser;
             }
             this.waitingForUser = new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
-                const creds = this.getStorage('creds');
+                const creds = window.BP_STORAGE.get('creds');
                 yield this.socket.connect(creds);
                 if (this.socket.userId) {
                     const userId = this.socket.userId;
-                    this.setStorage('creds', this.socket.creds);
+                    window.BP_STORAGE.set('creds', this.socket.creds);
                     this.onUserIdChanged(userId);
                     this.postToParent('', { userId });
                     resolve();
@@ -63,24 +63,5 @@ class BpSocket {
             return this.waitingForUser;
         });
     }
-    getStorage(key) {
-        const stored = localStorage.getItem(this.getStorageKey(key));
-        if (!stored) {
-            return undefined;
-        }
-        try {
-            const val = JSON.parse(stored);
-            return val;
-        }
-        catch (_a) {
-            return undefined;
-        }
-    }
-    setStorage(key, object) {
-        localStorage.setItem(this.getStorageKey(key), JSON.stringify(object));
-    }
-    getStorageKey(key) {
-        return `bp-chat-${key}`;
-    }
 }
 exports.default = BpSocket;

package/dist/fonts/roboto.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import '../../assets/fonts/roboto.css';
+declare const Font: () => JSX.Element;
+export default Font;

package/dist/fonts/roboto.js

@@ -0,0 +1,9 @@
+"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"));
+require("../../assets/fonts/roboto.css");
+const Font = () => react_1.default.createElement(react_1.default.Fragment, null);
+exports.default = Font;

package/dist/icons/Cancel.d.ts

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

package/dist/icons/Cancel.js

@@ -0,0 +1,10 @@
+"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", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", width: "16px", height: "16px", viewBox: "0 0 492 492", fill: `${fill}` },
+        react_1.default.createElement("g", null,
+            react_1.default.createElement("path", { d: "M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872    c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872    c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052    L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116    c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952    c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116    c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z" })))));

package/dist/icons/Microphone.d.ts

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

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

@@ -7,7 +7,7 @@ interface State {
     store: RootStore;
 }
 interface Props {
-    config?: Config;
+    config: Config;
     fullscreen?: boolean;
 }
 export declare class ExposedWebChat extends React.Component<Props, State> {

package/dist/index.js

@@ -21,6 +21,7 @@ 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;
@@ -29,6 +30,12 @@ exports.Fullscreen = Fullscreen;
 class ExposedWebChat extends react_1.default.Component {
     constructor(props) {
         super(props);
+        const { clientId, encryptionKey, useSessionStorage } = props.config;
+        window.BP_STORAGE = new storage_1.default({
+            clientId,
+            encryptionKey,
+            useSessionStorage
+        });
         this.state = {
             store: new store_1.RootStore({ fullscreen: props.fullscreen }, props.config)
         };

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl';
 import { RootStore, StoreDef } from './store';
+export declare const DEFAULT_TYPING_DELAY = 1000;
 declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<MainProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
 } & React.RefAttributes<any>> & {
@@ -9,4 +10,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 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'>;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;

package/dist/main.js

@@ -1,4 +1,23 @@
 "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) {
@@ -12,6 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TYPING_DELAY = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const debounce_1 = __importDefault(require("lodash/debounce"));
 const set_1 = __importDefault(require("lodash/set"));
@@ -26,16 +46,24 @@ 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 _values = (obj) => Object.keys(obj).map((x) => obj[x]);
-const DEFAULT_TYPING_DELAY = 1000;
+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;
+            var _a, _b;
+            return !((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.conversationId) || ((_b = this.props.config) === null || _b === void 0 ? void 0 : _b.conversationId) === event.conversationId;
         };
+        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;
+            }
+            if (e.key === 'Escape') {
+                this.props.hideChat();
+            }
+        });
         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));
@@ -46,9 +74,6 @@ class Web extends react_1.default.Component {
             else if (action === 'sendPayload') {
                 yield this.props.sendData(payload);
             }
-            else if (action === 'change-user-id') {
-                this.props.store.setUserId(payload);
-            }
             else if (action === 'event') {
                 const { type, text } = payload;
                 if (type === 'show') {
@@ -84,12 +109,12 @@ class Web extends react_1.default.Component {
             }
         };
         this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+            var _b;
             if (event.authorId === undefined) {
-                const value = (event.payload.type === 'typing' ? event.payload.value : undefined) || DEFAULT_TYPING_DELAY;
+                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;
             }
@@ -98,17 +123,14 @@ class Web extends react_1.default.Component {
                 return;
             }
             (0, utils_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)) {
@@ -138,8 +160,7 @@ class Web extends react_1.default.Component {
             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();
             }
         };
@@ -148,23 +169,11 @@ class Web extends react_1.default.Component {
     }
     componentDidMount() {
         return __awaiter(this, void 0, void 0, function* () {
-            // TODO: serve this from cdn
-            this.audio = new Audio(`${window.ROOT_PATH}/assets/modules/channel-web/notification.mp3`);
+            this.audio = new Audio(require('url:../assets/notification.mp3'));
             this.props.store.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();
-                    }
-                }
-            });
+            window.addEventListener('keydown', this.handleKeyDown);
             yield this.load();
             yield this.initializeIfChatDisplayed();
             this.props.setLoadingCompleted();
@@ -172,11 +181,11 @@ class Web extends react_1.default.Component {
     }
     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,9 +217,6 @@ class Web extends react_1.default.Component {
             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!()
             if (!this.isLazySocket()) {
@@ -232,10 +238,9 @@ class Web extends react_1.default.Component {
                 return options;
             }
         };
-        const { options, ref } = query_string_1.default.parse(location.search);
+        const { options } = 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;
     }
@@ -256,7 +261,7 @@ class Web extends react_1.default.Component {
     }
     loadOverrides(overrides) {
         try {
-            for (const override of _values(overrides)) {
+            for (const override of Object.values(overrides)) {
                 // TODO: load module view this can't work
                 // override.map(({ module }) => this.props.bp!.loadModuleView(module, true))
             }
@@ -305,8 +310,7 @@ 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}`, {
+        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
         });
@@ -314,11 +318,11 @@ class Web extends react_1.default.Component {
             this.postMessageToParent('setClass', parentClass);
             this.parentClass = parentClass;
         }
-        const { isEmulator, stylesheet, extraStylesheet } = this.props.config;
+        const { stylesheet, extraStylesheet } = this.props.config;
+        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 && react_1.default.createElement(Stylesheet_1.default, { href: `assets/modules/channel-web/default${isEmulator ? '-emulator' : ''}.css` }),
-            !utils_1.isIE && react_1.default.createElement(Stylesheet_1.default, { href: 'assets/modules/channel-web/font.css' }),
+            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 })));
     }
     render() {
@@ -348,8 +352,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     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,
@@ -366,5 +368,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     widgetTransition: store.view.widgetTransition,
     displayWidgetView: store.view.displayWidgetView,
     setLoadingCompleted: store.view.setLoadingCompleted,
-    sendFeedback: store.sendFeedback
+    sendFeedback: store.sendFeedback,
+    updateLastMessage: store.updateLastMessage
 }))((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));
             }
         }
     }