@botpress/webchat 0.3.3 → 0.5.0

package/dist/components/messages/Message.d.ts

@@ -8,4 +8,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
     WrappedComponent: React.ComponentType<MessageProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
-declare type MessageProps = Renderer.Message & WrappedComponentProps & Pick<StoreDef, 'intl'>;
+declare type MessageProps = Renderer.Message & WrappedComponentProps & Pick<StoreDef, 'intl' | 'selectedMessageId' | 'config'>;

package/dist/components/messages/Message.js

@@ -27,6 +27,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const react_intl_1 = require("react-intl");
+const webchatEvents_1 = require("../../utils/webchatEvents");
 class Message extends react_1.Component {
     constructor() {
         super(...arguments);
@@ -34,6 +35,17 @@ class Message extends react_1.Component {
             hasError: false,
             showMore: false
         };
+        this.onMessageClick = () => {
+            var _a, _b;
+            (_a = this.props.store) === null || _a === void 0 ? void 0 : _a.setSelectedMessage(this.props.messageId);
+            (0, webchatEvents_1.postMessageToParent)('MESSAGE.SELECTED', {
+                id: this.props.messageId,
+                conversationId: (_b = this.props.store) === null || _b === void 0 ? void 0 : _b.currentConversationId,
+                sentOn: this.props.sentOn,
+                payload: this.props.payload,
+                from: this.props.isBotMessage ? 'bot' : 'user'
+            }, this.props.config.chatId);
+        };
     }
     static getDerivedStateFromError(_error) {
         return { hasError: true };
@@ -70,11 +82,14 @@ class Message extends react_1.Component {
             return null;
         }
         const additionalStyle = (this.props.payload && this.props.payload['web-style']) || {};
+        const messageSelectedClass = {
+            'bpw-message-selected': this.props.selectedMessageId === this.props.messageId
+        };
         if (this.props.noBubble || ((_b = (_a = this.props.payload) === null || _a === void 0 ? void 0 : _a.wrapped) === null || _b === void 0 ? void 0 : _b.noBubble)) {
-            return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass), style: additionalStyle }, rendered));
+            return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, messageSelectedClass), style: additionalStyle, onClick: this.onMessageClick }, rendered));
         }
         return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`), "data-from": this.props.fromLabel, tabIndex: -1, style: additionalStyle },
-            react_1.default.createElement("div", { tabIndex: -1, className: "bpw-chat-bubble-content" },
+            react_1.default.createElement("div", { tabIndex: -1, className: (0, classnames_1.default)('bpw-chat-bubble-content', messageSelectedClass), onClick: this.onMessageClick },
                 react_1.default.createElement("span", { className: "sr-only" }, this.props.store.intl.formatMessage({
                     id: this.props.isBotMessage ? 'message.botSaid' : 'message.iSaid',
                     defaultMessage: this.props.isBotMessage ? 'Virtual assistant said : ' : 'I said : '
@@ -85,5 +100,7 @@ class Message extends react_1.Component {
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
-    intl: store.intl
+    intl: store.intl,
+    config: store.config,
+    selectedMessageId: store.selectedMessageId
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Message)));

package/dist/components/messages/MessageGroup.d.ts

@@ -20,4 +20,4 @@ declare type Props = {
     messages: MessageDetails[];
     isLastGroup: boolean;
     store?: RootStore;
-} & Pick<StoreDef, 'sendFeedback' | 'sendData'>;
+} & Pick<StoreDef, 'sendFeedback' | 'sendData' | 'selectedMessageId'>;

package/dist/components/messages/MessageGroup.js

@@ -43,7 +43,9 @@ class MessageGroup extends react_1.default.Component {
             }) },
             avatar,
             react_1.default.createElement("div", { role: "region", className: 'bpw-message-container' },
-                react_1.default.createElement("div", { "aria-live": "assertive", role: "log", className: 'bpw-message-group' },
+                react_1.default.createElement("div", { "aria-live": "assertive", role: "log", className: (0, classnames_1.default)('bpw-message-group', {
+                        'bpw-message-group-selected': !!this.props.messages.find((m) => m.id === this.props.selectedMessageId)
+                    }) },
                     react_1.default.createElement("span", { "data-from": fromLabel, className: "from hidden", "aria-hidden": "true" }, fromLabel),
                     (0, sortBy_1.default)(messages, ['sent_on', 'eventId']).map((message, i, messages) => {
                         const isLastMsg = i === messages.length - 1;
@@ -56,5 +58,6 @@ class MessageGroup extends react_1.default.Component {
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
     sendFeedback: store.sendFeedback,
-    sendData: store.sendData
+    sendData: store.sendData,
+    selectedMessageId: store.selectedMessageId
 }))(MessageGroup);

package/dist/core/socket.d.ts

@@ -1,12 +1,14 @@
 import { Message, MessagingSocket } from '@botpress/messaging-socket';
 import { Config } from '../typings';
 export default class BpSocket {
+    private config;
     socket: MessagingSocket;
     private chatId;
     onMessage: (event: any) => void;
     constructor(config: Config);
     setup(): void;
     sendPayload(payload: any): Promise<Message>;
-    postToParent: (_type: string, payload: any) => void;
     connect(): Promise<void>;
+    reload(config: Config): Promise<void>;
+    private getCreds;
 }

package/dist/core/socket.js

@@ -10,12 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const messaging_socket_1 = require("@botpress/messaging-socket");
+const webchatEvents_1 = require("../utils/webchatEvents");
 class BpSocket {
     constructor(config) {
-        this.postToParent = (_type, payload) => {
-            var _a;
-            (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign(Object.assign({}, payload), { chatId: this.chatId }), '*');
-        };
+        this.config = config;
         this.chatId = config.chatId;
         this.socket = new messaging_socket_1.MessagingSocket({ url: config.messagingUrl, clientId: config.clientId });
         window.websocket = this.socket;
@@ -32,14 +30,28 @@ class BpSocket {
     }
     connect() {
         return __awaiter(this, void 0, void 0, function* () {
-            const creds = window.BP_STORAGE.get('creds');
+            const creds = this.getCreds();
             yield this.socket.connect(creds);
             if (this.socket.userId) {
                 const userId = this.socket.userId;
                 window.BP_STORAGE.set('creds', this.socket.creds);
-                this.postToParent('', { userId });
+                (0, webchatEvents_1.postMessageToParent)('USER.CONNECTED', { userId }, this.chatId);
             }
         });
     }
+    reload(config) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.config = config;
+            const creds = this.getCreds();
+            if ((creds === null || creds === void 0 ? void 0 : creds.userId) !== this.socket.userId || (creds === null || creds === void 0 ? void 0 : creds.userToken) !== ((_a = this.socket.creds) === null || _a === void 0 ? void 0 : _a.userToken)) {
+                yield this.socket.disconnect();
+                yield this.connect();
+            }
+        });
+    }
+    getCreds() {
+        return this.config.customUser || window.BP_STORAGE.get('creds');
+    }
 }
 exports.default = BpSocket;

package/dist/main.d.ts

@@ -10,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' | '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'>;
+} & 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' | 'createConversation' | 'setIntlProvider' | 'setSocket' | 'currentConversationId' | 'currentConversation' | 'resetConversation'>;

package/dist/main.js

@@ -34,7 +34,6 @@ 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"));
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const query_string_1 = __importDefault(require("query-string"));
@@ -46,6 +45,7 @@ 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");
+const webchatEvents_1 = require("./utils/webchatEvents");
 exports.DEFAULT_TYPING_DELAY = 1000;
 class Web extends react_1.default.Component {
     constructor(props) {
@@ -68,7 +68,14 @@ class Web extends react_1.default.Component {
                 case 'configure':
                     return this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, data.payload));
                 case 'mergeConfig':
-                    return this.props.mergeConfig(data.payload);
+                    this.props.mergeConfig(data.payload);
+                    const oldUserId = this.socket.socket.userId;
+                    yield this.socket.reload(data.payload);
+                    if (this.socket.socket.userId !== oldUserId) {
+                        this.props.resetConversation();
+                        yield this.props.initializeChat();
+                    }
+                    return;
                 case 'sendPayload':
                     return this.props.sendData(data.payload);
                 case 'event':
@@ -86,12 +93,14 @@ class Web extends react_1.default.Component {
                         (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 === 'createConversation') {
+                        yield this.props.createConversation();
+                    }
                     else if (type === 'toggleBotInfo') {
                         this.props.toggleBotInfo();
                     }
@@ -103,7 +112,7 @@ class Web extends react_1.default.Component {
             }
         });
         this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
+            var _b, _c, _d;
             if (!this.isCurrentConversation(event)) {
                 // don't do anything, it's a message from another conversation
                 return;
@@ -116,7 +125,15 @@ class Web extends react_1.default.Component {
                 // don't do anything, it's the system message
                 return;
             }
-            (0, analytics_1.trackMessage)('received');
+            if (((_c = this.props.currentConversation) === null || _c === void 0 ? void 0 : _c.userId) !== event.authorId) {
+                (0, analytics_1.trackMessage)('received');
+                (0, webchatEvents_1.postMessageToParent)('MESSAGE.RECEIVED', event, this.props.config.chatId);
+                // This is to handle a special case for the emulator, setting the selected css class to the last message group
+                // This needs a rethinking
+                if (event.id) {
+                    (_d = this.props.store) === null || _d === void 0 ? void 0 : _d.setSelectedMessage(event.id);
+                }
+            }
             this.props.updateLastMessage(event.conversationId, event);
             yield this.props.addEventToConversation(event);
             // there's no focus on the actual conversation
@@ -130,8 +147,8 @@ class Web extends react_1.default.Component {
             yield this.props.updateTyping(event);
         });
         this.playSound = (0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {
-            var _c;
-            const disableNotificationSound = this.config.disableNotificationSound || ((_c = this.props.config) === null || _c === void 0 ? void 0 : _c.disableNotificationSound);
+            var _e;
+            const disableNotificationSound = this.config.disableNotificationSound || ((_e = this.props.config) === null || _e === void 0 ? void 0 : _e.disableNotificationSound);
             if (disableNotificationSound || this.audio.readyState < 2) {
                 return;
             }
@@ -185,12 +202,9 @@ class Web extends react_1.default.Component {
         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);
-            }
+            // is this necessary ?
             if (this.config.containerWidth) {
-                this.postMessageToParent('setWidth', this.config.containerWidth);
+                (0, webchatEvents_1.postMessageToParent)('UI.RESIZE', this.config.containerWidth, this.config.chatId);
             }
             yield this.props.fetchBotInfo();
             if (!this.isLazySocket()) {
@@ -199,10 +213,6 @@ class Web extends react_1.default.Component {
             this.setupObserver();
         });
     }
-    postMessageToParent(type, value) {
-        var _a;
-        (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type, value, chatId: this.config.chatId }, '*');
-    }
     extractConfig() {
         let userConfig = Object.assign({}, constants_1.default.DEFAULT_CONFIG, this.props.config);
         const { options } = query_string_1.default.parse(location.search);
@@ -232,7 +242,8 @@ class Web extends react_1.default.Component {
     setupObserver() {
         (0, mobx_1.observe)(this.props.dimensions, 'container', (data) => {
             if (data.newValue) {
-                this.postMessageToParent('setWidth', data.newValue);
+                // is this necessary ?
+                (0, webchatEvents_1.postMessageToParent)('UI.RESIZE', data.newValue, this.config.chatId);
             }
         });
     }
@@ -260,8 +271,8 @@ class Web extends react_1.default.Component {
             [(_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;
+            (0, webchatEvents_1.postMessageToParent)('UI.SET-CLASS', parentClass, this.config.chatId);
         }
         const stylesheet = this.props.config.stylesheet;
         const extraStylesheet = (_c = this.props.botInfo) === null || _c === void 0 ? void 0 : _c.extraStylesheet;
@@ -316,7 +327,10 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     sendFeedback: store.sendFeedback,
     updateLastMessage: store.updateLastMessage,
     fetchConversation: store.fetchConversation,
+    createConversation: store.createConversation,
     setIntlProvider: store.setIntlProvider,
     setSocket: store.setSocket,
-    currentConversationId: store.currentConversationId
+    currentConversation: store.currentConversation,
+    currentConversationId: store.currentConversationId,
+    resetConversation: store.resetConversation
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Web)));

package/dist/store/index.d.ts

@@ -13,6 +13,7 @@ declare class RootStore {
     private api;
     conversations: RecentConversation[];
     currentConversation?: CurrentConversation;
+    selectedMessageId?: string;
     botInfo: BotInfo;
     config: Config;
     preferredLanguage: string;
@@ -27,6 +28,7 @@ declare class RootStore {
     }, config?: Config);
     setIntlProvider(provider: IntlShape): void;
     setSocket(socket: BpSocket): void;
+    setSelectedMessage(messageId: string): void;
     get isConversationStarted(): boolean;
     get botName(): string;
     get hasBotInfoDescription(): boolean;
@@ -35,7 +37,6 @@ declare class RootStore {
     get escapeHTML(): boolean;
     get currentMessages(): Message[];
     get currentConversationId(): uuid | undefined;
-    postMessage(name: string, payload?: any): void;
     updateMessages(messages: Message[]): void;
     updateLastMessage(conversationId: string, message?: Message): void;
     clearMessages(): void;
@@ -51,7 +52,7 @@ declare class RootStore {
     /** Fetch the specified conversation ID, or try to fetch a valid one from the list */
     fetchConversation(convoId?: uuid): Promise<uuid | undefined>;
     /** Sends the specified message, or fetch the message in the composer */
-    sendMessage(message?: string): Promise<void>;
+    sendMessage(textMessage?: string): Promise<void>;
     /** Sends an event to start conversation & hide the bot info page */
     startConversation(): Promise<void>;
     /** Creates a new conversation and switches to it */
@@ -61,7 +62,7 @@ declare class RootStore {
     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>;
+    sendData(data: any): Promise<Message | 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 */
@@ -69,7 +70,6 @@ declare class RootStore {
     /** This replaces all the configurations by this object */
     updateConfig(config: Config): void;
     private _applyConfig;
-    publishConfigChanged(): void;
     updatePreferredLanguage(lang: string): void;
     /** Starts a timer to remove the typing animation when it's completed */
     private _startTypingTimer;

package/dist/store/index.js

@@ -30,6 +30,7 @@ const main_1 = require("../main");
 const translations_1 = require("../translations");
 const utils_1 = require("../utils");
 const analytics_1 = require("../utils/analytics");
+const webchatEvents_1 = require("../utils/webchatEvents");
 const composer_1 = __importDefault(require("./composer"));
 const view_1 = __importDefault(require("./view"));
 class RootStore {
@@ -50,6 +51,9 @@ class RootStore {
     setSocket(socket) {
         this.api = new api_1.default(socket);
     }
+    setSelectedMessage(messageId) {
+        this.selectedMessageId = messageId;
+    }
     get isConversationStarted() {
         var _a;
         return !!((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages.length);
@@ -81,10 +85,6 @@ class RootStore {
         var _a;
         return (_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.id;
     }
-    postMessage(name, payload) {
-        const chatId = this.config.chatId;
-        window.parent.postMessage({ name, chatId, payload }, '*');
-    }
     updateMessages(messages) {
         if (this.currentConversation) {
             this.currentConversation.messages = messages;
@@ -160,7 +160,7 @@ class RootStore {
                 yield this.fetchConversation();
                 (0, mobx_1.runInAction)('-> setInitialized', () => {
                     this.isInitialized = true;
-                    this.postMessage('webchatReady');
+                    (0, webchatEvents_1.postMessageToParent)('LIFECYCLE.READY', undefined, this.config.chatId);
                 });
             }
             catch (err) {
@@ -229,23 +229,24 @@ class RootStore {
         });
     }
     /** Sends the specified message, or fetch the message in the composer */
-    sendMessage(message) {
+    sendMessage(textMessage) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (message) {
-                return this.sendData({ type: 'text', text: message });
-            }
-            const userMessage = this.composer.message;
-            if (!userMessage || !userMessage.length) {
+            textMessage = textMessage || this.composer.message;
+            if (!textMessage) {
                 return;
             }
             this.composer.updateMessage('');
             try {
-                yield this.sendData({ type: 'text', text: userMessage });
+                const message = yield this.sendData({ type: 'text', text: textMessage });
                 (0, analytics_1.trackMessage)('sent');
-                this.composer.addMessageToHistory(userMessage);
+                if (message) {
+                    (0, webchatEvents_1.postMessageToParent)('MESSAGE.SENT', message, this.config.chatId);
+                }
+                this.composer.addMessageToHistory(textMessage);
             }
             catch (e) {
-                this.composer.updateMessage(userMessage);
+                this.composer.updateMessage(textMessage);
+                console.error('Webchat cloud not send message');
                 throw e;
             }
         });
@@ -328,6 +329,7 @@ class RootStore {
             }
             const message = yield this.api.sendMessage(data, this.currentConversationId);
             this.updateLastMessage(this.currentConversationId, message);
+            return message;
         });
     }
     /** Sends a message of type voice */
@@ -364,10 +366,7 @@ class RootStore {
         const locale = (0, translations_1.getUserLocale)(this.config.locale);
         this.updateBotUILanguage(locale);
         document.documentElement.setAttribute('lang', locale);
-        this.publishConfigChanged();
-    }
-    publishConfigChanged() {
-        this.postMessage('configChanged', JSON.stringify(this.config, undefined, 2));
+        (0, webchatEvents_1.postMessageToParent)('CONFIG.SET', Object.assign({}, this.config), this.config.chatId);
     }
     updatePreferredLanguage(lang) {
         this.preferredLanguage = lang;
@@ -439,6 +438,9 @@ __decorate([
 __decorate([
     mobx_1.observable
 ], RootStore.prototype, "currentConversation", void 0);
+__decorate([
+    mobx_1.observable
+], RootStore.prototype, "selectedMessageId", void 0);
 __decorate([
     mobx_1.observable
 ], RootStore.prototype, "botInfo", void 0);
@@ -463,6 +465,9 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "setSocket", null);
+__decorate([
+    mobx_1.action.bound
+], RootStore.prototype, "setSelectedMessage", null);
 __decorate([
     mobx_1.computed
 ], RootStore.prototype, "isConversationStarted", null);
@@ -487,9 +492,6 @@ __decorate([
 __decorate([
     mobx_1.computed
 ], RootStore.prototype, "currentConversationId", null);
-__decorate([
-    mobx_1.action.bound
-], RootStore.prototype, "postMessage", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "updateMessages", null);
@@ -556,9 +558,6 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "updateConfig", null);
-__decorate([
-    mobx_1.action.bound
-], RootStore.prototype, "publishConfigChanged", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "updatePreferredLanguage", null);

package/dist/store/view.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const merge_1 = __importDefault(require("lodash/merge"));
 const mobx_1 = require("mobx");
 const constants_1 = __importDefault(require("../core/constants"));
+const webchatEvents_1 = require("../utils/webchatEvents");
 class ViewStore {
     constructor(rootStore, fullscreen) {
         /** If false, probably embedded on a website or on the studio */
@@ -111,7 +112,7 @@ class ViewStore {
     }
     setLoadingCompleted() {
         this._isLoading = false;
-        this.rootStore.postMessage('webchatLoaded');
+        (0, webchatEvents_1.postMessageToParent)('LIFECYCLE.LOADED', undefined, this.rootStore.config.chatId);
     }
     showPoweredBy() {
         this.isPoweredByDisplayed = true;
@@ -157,7 +158,7 @@ class ViewStore {
     showChat() {
         if (this.disableAnimations) {
             this.activeView = 'side';
-            this.rootStore.postMessage('webchatOpened');
+            (0, webchatEvents_1.postMessageToParent)('UI.OPENED', undefined, this.rootStore.config.chatId);
             return this._updateTransitions({ widgetTransition: undefined, sideTransition: 'none' });
         }
         this._updateTransitions({ widgetTransition: 'fadeOut' });
@@ -165,7 +166,7 @@ class ViewStore {
             this._updateTransitions({ sideTransition: 'fadeIn' });
         }, constants_1.default.ANIMATION_DURATION + 10);
         this._endAnimation('side');
-        this.rootStore.postMessage('webchatOpened');
+        (0, webchatEvents_1.postMessageToParent)('UI.OPENED', undefined, this.rootStore.config.chatId);
     }
     hideChat() {
         if (this.isFullscreen) {
@@ -173,7 +174,7 @@ class ViewStore {
         }
         if (this.disableAnimations) {
             this.activeView = 'widget';
-            this.rootStore.postMessage('webchatClosed');
+            (0, webchatEvents_1.postMessageToParent)('UI.CLOSED', undefined, this.rootStore.config.chatId);
             return this._updateTransitions({ widgetTransition: undefined, sideTransition: undefined });
         }
         this._updateTransitions({ sideTransition: 'fadeOut' });
@@ -183,7 +184,7 @@ class ViewStore {
             }, constants_1.default.ANIMATION_DURATION + 10);
         }
         this._endAnimation('widget');
-        this.rootStore.postMessage('webchatClosed');
+        (0, webchatEvents_1.postMessageToParent)('UI.CLOSED', undefined, this.rootStore.config.chatId);
     }
     _endAnimation(finalView) {
         setTimeout(() => {

package/dist/typings.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { UserCredentials } from '@botpress/messaging-socket';
 import { RootStore } from './store';
 import { BPStorage } from './utils/storage';
 declare global {
@@ -35,7 +36,7 @@ export declare namespace Renderer {
         isLastMessage?: boolean;
         sentOn?: Date;
         inlineFeedback?: any;
-        onSendData?: (data: any) => Promise<void>;
+        onSendData?: (data: any) => Promise<Message | void>;
         onFileUpload?: (label: string, payload: any, file: File) => Promise<void>;
         /** Allows to autoplay voice messages coming from the bot */
         onAudioEnded?: () => void;
@@ -135,11 +136,27 @@ export interface StudioConnector {
     getModuleInjector: any;
     loadModuleView: any;
 }
+export declare type WebchatEventType = 'LIFECYCLE.LOADED' | 'LIFECYCLE.READY' | 'UI.OPENED' | 'UI.CLOSED' | 'UI.RESIZE' | 'UI.SET-CLASS' | 'CONFIG.SET' | 'MESSAGE.SENT' | 'MESSAGE.RECEIVED' | 'MESSAGE.SELECTED' | 'USER.CONNECTED';
+export interface WebchatEvent {
+    type: WebchatEventType;
+    value: any;
+    chatId: string;
+}
 export interface Config {
     /** Url of the messaging server */
     messagingUrl: string;
     /** Id of your messaging client */
     clientId: string;
+    /**
+     * Refers to a specific webchat reference in parent window. Useful when using multiple chat window
+     * @default 'bp-web-widget'
+     */
+    chatId: string;
+    /**
+     * Url where the webchat bundle is hosted
+     * @default: '/'
+     */
+    hostUrl?: string;
     /**
      * Url of the Media File Service where we fetch the bot info
      * @default ''
@@ -250,22 +267,12 @@ export interface Config {
      * Experimental: expose the store to the parent frame for more control on the webchat's behavior
      * @default false
      */
-    exposeStore?: boolean;
-    /**
-     * If true, Websocket is created when the Webchat is opened. Bot cannot be proactive.
-     * @default false
-     */
     lazySocket?: boolean;
     /**
      * If true, chat will no longer play the notification sound for new messages.
      * @default false
      */
     disableNotificationSound?: boolean;
-    /**
-     * Refers to a specific webchat reference in parent window. Useful when using multiple chat window
-     * @default ''
-     */
-    chatId?: string;
     /**
      * CSS class to be applied to iframe
      * @default ''
@@ -277,6 +284,10 @@ export interface Config {
      * @default ''
      */
     googleMapsAPIKey?: string;
+    /**
+     * Allows setting a custom user id
+     */
+    customUser?: UserCredentials;
 }
 export interface BotDetails {
     website?: string;

package/dist/utils/webchatEvents.d.ts

@@ -0,0 +1,2 @@
+import { WebchatEventType } from '../typings';
+export declare const postMessageToParent: (type: WebchatEventType, value: any, chatId: string) => void;

package/dist/utils/webchatEvents.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postMessageToParent = void 0;
+const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
+const postMessageToParent = (type, value, chatId) => {
+    var _a;
+    //cloneDeep necessary because of potentially nested mobx proxy object isn't serializable
+    const evt = { type, value: (0, cloneDeep_1.default)(value), chatId };
+    (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(evt, '*');
+};
+exports.postMessageToParent = postMessageToParent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.3.0",
-    "@botpress/messaging-socket": "1.1.1",
+    "@botpress/messaging-components": "0.4.2",
+    "@botpress/messaging-socket": "1.2.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",