@botpress/webchat 0.5.0 → 0.5.2

package/dist/components/messages/MessageList.js

@@ -1,90 +1,89 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const resize_observer_1 = require("@juggle/resize-observer");
 const difference_in_minutes_1 = __importDefault(require("date-fns/difference_in_minutes"));
-const debounce_1 = __importDefault(require("lodash/debounce"));
+const last_1 = __importDefault(require("lodash/last"));
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_intl_1 = require("react-intl");
+const react_scroll_to_bottom_1 = __importStar(require("react-scroll-to-bottom"));
 const constants_1 = __importDefault(require("../../core/constants"));
 const Avatar_1 = __importDefault(require("../common/Avatar"));
 const MessageGroup_1 = __importDefault(require("./MessageGroup"));
 class MessageList extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { showNewMessageIndicator: false, manualScroll: false };
-        this.shouldDisplayMessage = (m) => {
-            return m.payload.type !== 'postback';
-        };
-        this.handleScroll = (0, debounce_1.default)((e) => {
-            const scroll = this.messagesDiv.scrollHeight - this.messagesDiv.scrollTop - this.messagesDiv.clientHeight;
-            const manualScroll = scroll >= 150;
-            const showNewMessageIndicator = this.state.showNewMessageIndicator && manualScroll;
-            this.setState({ manualScroll, showNewMessageIndicator });
-        }, 50);
-    }
     componentDidMount() {
-        this.tryScrollToBottom(true);
         (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
-            focus.newValue === 'convo' && this.messagesDiv.focus();
+            var _a;
+            focus.newValue === 'convo' && ((_a = this.messagesDiv) === null || _a === void 0 ? void 0 : _a.focus());
         });
-        if (this.props.currentMessages) {
-            (0, mobx_1.observe)(this.props.currentMessages, (messages) => {
-                if (this.state.manualScroll) {
-                    if (!this.state.showNewMessageIndicator) {
-                        this.setState({ showNewMessageIndicator: true });
-                    }
-                    return;
-                }
-                this.tryScrollToBottom();
-            });
-        }
-        // this should account for keyboard rendering as it triggers a resize of the messagesDiv
-        this.divSizeObserver = new resize_observer_1.ResizeObserver((0, debounce_1.default)((_divResizeEntry) => {
-            // we don't need to do anything with the resize entry
-            this.tryScrollToBottom();
-        }, 200, { trailing: true }));
-        this.divSizeObserver.observe(this.messagesDiv);
     }
-    componentWillUnmount() {
-        this.divSizeObserver.disconnect();
+    render() {
+        return (react_1.default.createElement(react_scroll_to_bottom_1.default, { mode: 'bottom', initialScrollBehavior: 'auto', tabIndex: 0, className: 'bpw-msg-list-scroll-container', scrollViewClassName: 'bpw-msg-list', ref: (m) => {
+                this.messagesDiv = m;
+            }, followButtonClassName: 'bpw-msg-list-follow' },
+            react_1.default.createElement(Content, Object.assign({}, this.props))));
     }
-    componentDidUpdate() {
-        if (this.state.manualScroll) {
-            return;
+}
+const Content = (0, mobx_react_1.observer)((props) => {
+    var _a, _b;
+    const [state, setState] = (0, react_1.useState)({
+        showNewMessageIndicator: false,
+        messagesLength: undefined
+    });
+    const scrollToBottom = (0, react_scroll_to_bottom_1.useScrollToBottom)();
+    const [sticky] = (0, react_scroll_to_bottom_1.useSticky)();
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const stateUpdate = Object.assign(Object.assign({}, state), { messagesLength: (_a = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _a === void 0 ? void 0 : _a.length });
+        if (!sticky && state.messagesLength !== ((_b = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _b === void 0 ? void 0 : _b.length)) {
+            setState(Object.assign(Object.assign({}, stateUpdate), { showNewMessageIndicator: true }));
         }
-        this.tryScrollToBottom();
-    }
-    tryScrollToBottom(delayed) {
-        setTimeout(() => {
-            try {
-                this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight;
-            }
-            catch (err) {
-                // Discard the error
-            }
-        }, delayed ? 250 : 0);
-    }
-    renderDate(date) {
+        else {
+            setState(Object.assign(Object.assign({}, stateUpdate), { showNewMessageIndicator: false }));
+        }
+    }, [(_a = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _a === void 0 ? void 0 : _a.length, sticky]);
+    const shouldDisplayMessage = (m) => {
+        return m.payload.type !== 'postback';
+    };
+    const renderDate = (date) => {
         return (react_1.default.createElement("div", { className: 'bpw-date-container' },
-            new Intl.DateTimeFormat(this.props.intl.locale || 'en', {
+            new Intl.DateTimeFormat(props.intl.locale || 'en', {
                 month: 'short',
                 day: 'numeric',
                 hour: 'numeric',
                 minute: 'numeric'
             }).format(new Date(date)),
             react_1.default.createElement("div", { className: 'bpw-small-line' })));
-    }
-    renderAvatar(name, url) {
+    };
+    const renderAvatar = (name, url) => {
         const avatarSize = 40;
         return react_1.default.createElement(Avatar_1.default, { name: name, avatarUrl: url, height: avatarSize, width: avatarSize });
-    }
-    renderMessageGroups() {
-        const messages = (this.props.currentMessages || []).filter((m) => this.shouldDisplayMessage(m));
+    };
+    const renderMessageGroups = () => {
+        var _a;
+        const messages = (props.currentMessages || []).filter((m) => shouldDisplayMessage(m));
         const groups = [];
         let lastSpeaker = undefined;
         let lastDate = undefined;
@@ -106,7 +105,7 @@ class MessageList extends react_1.default.Component {
             lastSpeaker = speaker;
             lastDate = date;
         });
-        if (this.props.isBotTyping.get()) {
+        if ((_a = props === null || props === void 0 ? void 0 : props.isBotTyping) === null || _a === void 0 ? void 0 : _a.get()) {
             if (lastSpeaker !== 'bot') {
                 currentGroup = [];
                 groups.push(currentGroup);
@@ -123,24 +122,20 @@ class MessageList extends react_1.default.Component {
             const groupDate = group === null || group === void 0 ? void 0 : group[0].sentOn;
             const isDateNeeded = !groups[i - 1] ||
                 (0, difference_in_minutes_1.default)(new Date(groupDate), new Date(lastDate)) > constants_1.default.TIME_BETWEEN_DATES;
-            const [{ authorId }] = group;
-            const avatar = !authorId && this.renderAvatar(this.props.botName, this.props.botAvatarUrl);
+            const { authorId } = (0, last_1.default)(group);
+            const avatar = !authorId && renderAvatar(props.botName, props.botAvatarUrl);
             return (react_1.default.createElement("div", { key: i },
-                isDateNeeded && this.renderDate(group[0].sentOn),
+                isDateNeeded && renderDate(group[0].sentOn),
                 react_1.default.createElement(MessageGroup_1.default, { isBot: !authorId, avatar: avatar, key: `msg-group-${i}`, isLastGroup: i >= groups.length - 1, messages: group })));
         })));
-    }
-    render() {
-        return (react_1.default.createElement("div", { tabIndex: 0, className: 'bpw-msg-list', ref: (m) => {
-                this.messagesDiv = m;
-            }, onScroll: this.handleScroll },
-            this.state.showNewMessageIndicator && (react_1.default.createElement("div", { className: "bpw-new-messages-indicator", onClick: (e) => this.tryScrollToBottom() },
-                react_1.default.createElement("span", null, this.props.intl.formatMessage({
-                    id: `messages.newMessage${this.props.currentMessages.length === 1 ? '' : 's'}`
-                })))),
-            this.renderMessageGroups()));
-    }
-}
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        state.showNewMessageIndicator && (react_1.default.createElement("div", { className: "bpw-new-messages-indicator", onClick: (e) => scrollToBottom() },
+            react_1.default.createElement("span", null, props.intl.formatMessage({
+                id: `messages.newMessage${((_b = props === null || props === void 0 ? void 0 : props.currentMessages) === null || _b === void 0 ? void 0 : _b.length) === 1 ? '' : 's'}`
+            })))),
+        renderMessageGroups()));
+});
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     intl: store.intl,
     botName: store.botName,

package/dist/core/api.js

@@ -50,7 +50,7 @@ class WebchatApi {
             try {
                 const conversation = yield this.socket.socket.getConversation(conversationId);
                 this.socket.socket.switchConversation(conversation.id);
-                const messages = (yield this.socket.socket.listMessages()).filter((x) => x.payload.type !== 'visit');
+                const messages = (yield this.socket.socket.listMessages(500)).filter((x) => x.payload.type !== 'visit');
                 return Object.assign(Object.assign({}, conversation), { messages });
             }
             catch (err) {

package/dist/core/socket.d.ts

@@ -11,4 +11,5 @@ export default class BpSocket {
     connect(): Promise<void>;
     reload(config: Config): Promise<void>;
     private getCreds;
+    private getUserData;
 }

package/dist/core/socket.js

@@ -31,7 +31,8 @@ class BpSocket {
     connect() {
         return __awaiter(this, void 0, void 0, function* () {
             const creds = this.getCreds();
-            yield this.socket.connect(creds);
+            const userData = this.getUserData();
+            yield this.socket.connect(creds, userData);
             if (this.socket.userId) {
                 const userId = this.socket.userId;
                 window.BP_STORAGE.set('creds', this.socket.creds);
@@ -53,5 +54,8 @@ class BpSocket {
     getCreds() {
         return this.config.customUser || window.BP_STORAGE.get('creds');
     }
+    getUserData() {
+        return this.config.userData;
+    }
 }
 exports.default = BpSocket;

package/dist/declaration.d.ts

@@ -1 +1,2 @@
 declare module '*.scss';
+declare module 'react-scroll-to-bottom';

package/dist/main.js

@@ -80,6 +80,7 @@ class Web extends react_1.default.Component {
                     return this.props.sendData(data.payload);
                 case 'event':
                     const { type, text, conversationId } = data.payload;
+                    yield this.initialize();
                     if (type === 'show') {
                         this.props.showChat();
                         (0, analytics_1.trackWebchatState)('show');
@@ -112,7 +113,7 @@ class Web extends react_1.default.Component {
             }
         });
         this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _b, _c, _d;
+            var _b, _c, _d, _e, _f;
             if (!this.isCurrentConversation(event)) {
                 // don't do anything, it's a message from another conversation
                 return;
@@ -125,34 +126,70 @@ class Web extends react_1.default.Component {
                 // don't do anything, it's the system message
                 return;
             }
-            if (((_c = this.props.currentConversation) === null || _c === void 0 ? void 0 : _c.userId) !== event.authorId) {
+            if (((_c = event.payload) === null || _c === void 0 ? void 0 : _c.type) === 'trigger') {
+                //
+                const { trigger } = event.payload;
+                if (typeof (trigger === null || trigger === void 0 ? void 0 : trigger.type) === 'string') {
+                    yield this.handleTrigger(trigger);
+                    return;
+                }
+            }
+            if (((_d = this.props.currentConversation) === null || _d === void 0 ? void 0 : _d.userId) !== event.authorId) {
                 (0, analytics_1.trackMessage)('received');
-                (0, webchatEvents_1.postMessageToParent)('MESSAGE.RECEIVED', event, this.props.config.chatId);
+                (0, webchatEvents_1.postMessageToParent)('MESSAGE.RECEIVED', event, this.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);
+                    (_e = this.props.store) === null || _e === void 0 ? void 0 : _e.setSelectedMessage(event.id);
                 }
             }
             this.props.updateLastMessage(event.conversationId, event);
             yield this.props.addEventToConversation(event);
             // there's no focus on the actual conversation
             if (!document.hasFocus() || this.props.activeView !== 'side') {
-                yield this.playSound();
-                this.props.incrementUnread();
+                if (((_f = this.props.currentConversation) === null || _f === void 0 ? void 0 : _f.userId) !== event.authorId) {
+                    // only increment unread if the message comes from the bot
+                    yield this.playSound();
+                    this.props.incrementUnread();
+                }
             }
             this.handleResetUnreadCount();
         });
         this.handleTyping = (event) => __awaiter(this, void 0, void 0, function* () {
             yield this.props.updateTyping(event);
         });
+        this.handleTrigger = (trigger) => __awaiter(this, void 0, void 0, function* () {
+            var _g;
+            if (trigger.type === 'webchat-visibility') {
+                if (trigger.visibility === 'hide') {
+                    this.props.hideChat();
+                }
+                else if (trigger.visibility === 'show') {
+                    this.props.showChat();
+                }
+                else if (trigger.visibility === 'toggle') {
+                    this.props.displayWidgetView ? this.props.showChat() : this.props.hideChat();
+                }
+            }
+            if (trigger.type === 'webchat-config') {
+                yield this.handleIframeApi({
+                    data: { action: 'mergeConfig', payload: Object.assign(Object.assign({}, this.config), ((_g = trigger.config) !== null && _g !== void 0 ? _g : {})) }
+                });
+            }
+            if (trigger.type === 'custom-event') {
+                (0, webchatEvents_1.postMessageToParent)('TRIGGER', trigger.event, this.props.config.chatId);
+            }
+        });
         this.playSound = (0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {
-            var _e;
-            const disableNotificationSound = this.config.disableNotificationSound || ((_e = this.props.config) === null || _e === void 0 ? void 0 : _e.disableNotificationSound);
+            var _h;
+            const disableNotificationSound = this.config.disableNotificationSound || ((_h = this.props.config) === null || _h === void 0 ? void 0 : _h.disableNotificationSound);
             if (disableNotificationSound || this.audio.readyState < 2) {
                 return;
             }
-            yield this.audio.play();
+            try {
+                yield this.audio.play();
+            }
+            catch (_j) { }
         }), constants_1.default.MIN_TIME_BETWEEN_SOUNDS);
         this.handleResetUnreadCount = () => {
             if (document.hasFocus() && this.props.activeView === 'side') {
@@ -182,19 +219,24 @@ class Web extends react_1.default.Component {
             void this.initializeIfChatDisplayed();
         }
     }
-    initializeIfChatDisplayed() {
+    initialize() {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.hasBeenInitialized) {
                 return;
             }
+            this.hasBeenInitialized = true;
+            if (this.isLazySocket() || !this.socket) {
+                yield this.initializeSocket();
+            }
+            yield this.socket.connect();
+            this.props.setSocket(this.socket);
+            yield this.props.initializeChat();
+        });
+    }
+    initializeIfChatDisplayed() {
+        return __awaiter(this, void 0, void 0, function* () {
             if (this.props.activeView === 'side' || this.props.isFullscreen) {
-                this.hasBeenInitialized = true;
-                if (this.isLazySocket() || !this.socket) {
-                    yield this.initializeSocket();
-                }
-                yield this.socket.connect();
-                this.props.setSocket(this.socket);
-                yield this.props.initializeChat();
+                this.initialize();
             }
         });
     }
@@ -252,7 +294,7 @@ class Web extends react_1.default.Component {
         if (this.config.lazySocket !== undefined) {
             return this.config.lazySocket;
         }
-        return (_a = this.props.botInfo) === null || _a === void 0 ? void 0 : _a.lazySocket;
+        return ((_a = this.props.botInfo) === null || _a === void 0 ? void 0 : _a.lazySocket) !== false;
     }
     renderWidget() {
         if (!this.props.showWidgetButton) {

package/dist/store/index.d.ts

@@ -33,6 +33,13 @@ declare class RootStore {
     get botName(): string;
     get hasBotInfoDescription(): boolean;
     get botAvatarUrl(): string | undefined;
+    get coverPictureUrl(): string | undefined;
+    get description(): string | undefined;
+    get website(): string | undefined;
+    get phoneNumber(): string | undefined;
+    get termsConditions(): string | undefined;
+    get privacyPolicy(): string | undefined;
+    get emailAddress(): string | undefined;
     get rtl(): boolean;
     get escapeHTML(): boolean;
     get currentMessages(): Message[];
@@ -62,7 +69,9 @@ 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<Message | void>;
+    sendData(data: any, options?: {
+        showBotTyping?: boolean;
+    }): 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 */

package/dist/store/index.js

@@ -70,6 +70,34 @@ class RootStore {
         var _a, _b, _c;
         return ((_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.avatarUrl) || ((_c = this.config) === null || _c === void 0 ? void 0 : _c.avatarUrl) || undefined;
     }
+    get coverPictureUrl() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.coverPictureUrl) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.coverPictureUrl;
+    }
+    get description() {
+        var _a;
+        return (_a = this.config) === null || _a === void 0 ? void 0 : _a.botConversationDescription;
+    }
+    get website() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.website) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.website;
+    }
+    get phoneNumber() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.phoneNumber) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.phoneNumber;
+    }
+    get termsConditions() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.termsConditions) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.termsConditions;
+    }
+    get privacyPolicy() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.privacyPolicy) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.privacyPolicy;
+    }
+    get emailAddress() {
+        var _a, _b, _c, _d;
+        return (_c = (_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.emailAddress) !== null && _c !== void 0 ? _c : (_d = this.config) === null || _d === void 0 ? void 0 : _d.emailAddress;
+    }
     get rtl() {
         return (0, translations_1.isRTLLocale)(this.preferredLanguage);
     }
@@ -79,7 +107,7 @@ class RootStore {
     }
     get currentMessages() {
         var _a;
-        return ((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages) || [];
+        return (((_a = this.currentConversation) === null || _a === void 0 ? void 0 : _a.messages) || []).filter((x) => { var _a; return ((_a = x.payload) === null || _a === void 0 ? void 0 : _a.type) !== 'trigger'; });
     }
     get currentConversationId() {
         var _a;
@@ -237,7 +265,7 @@ class RootStore {
             }
             this.composer.updateMessage('');
             try {
-                const message = yield this.sendData({ type: 'text', text: textMessage });
+                const message = yield this.sendData({ type: 'text', text: textMessage }, { showBotTyping: true });
                 (0, analytics_1.trackMessage)('sent');
                 if (message) {
                     (0, webchatEvents_1.postMessageToParent)('MESSAGE.SENT', message, this.config.chatId);
@@ -321,12 +349,15 @@ class RootStore {
         });
     }
     /** Sends an event or a message, depending on how the backend manages those types */
-    sendData(data) {
+    sendData(data, options) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.isInitialized || !this.currentConversationId) {
                 console.warn('[webchat] Cannot send data until the webchat is ready');
                 return;
             }
+            if (options === null || options === void 0 ? void 0 : options.showBotTyping) {
+                this.isBotTyping.set(true);
+            }
             const message = yield this.api.sendMessage(data, this.currentConversationId);
             this.updateLastMessage(this.currentConversationId, message);
             return message;

package/dist/store/view.js

@@ -40,7 +40,9 @@ class ViewStore {
         return (_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.showConversationsButton;
     }
     get showBotInfoButton() {
-        return !this.isConversationsDisplayed && this.rootStore.botInfo && this.rootStore.botInfo.showBotInfoPage;
+        var _a;
+        return (!this.isConversationsDisplayed &&
+            (((_a = this.rootStore.botInfo) === null || _a === void 0 ? void 0 : _a.showBotInfoPage) || !!this.rootStore.config.showBotInfoPage));
     }
     get showDownloadButton() {
         return !this.isConversationsDisplayed && !this.isBotInfoDisplayed && this.rootStore.config.enableTranscriptDownload;
@@ -49,7 +51,8 @@ class ViewStore {
         return (!this.isConversationsDisplayed && !this.isBotInfoDisplayed && this.rootStore.config.enableConversationDeletion);
     }
     get showCloseButton() {
-        return !this.isFullscreen;
+        var _a, _b;
+        return (_b = (!this.isFullscreen && ((_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.showCloseButton))) !== null && _b !== void 0 ? _b : true;
     }
     get showWidgetButton() {
         var _a;
@@ -62,7 +65,8 @@ class ViewStore {
         return !this._isLoading && this.activeView;
     }
     get isBotInfoDisplayed() {
-        return this._showBotInfo && this.rootStore.botInfo && this.rootStore.botInfo.showBotInfoPage;
+        var _a;
+        return this._showBotInfo && (((_a = this.rootStore.botInfo) === null || _a === void 0 ? void 0 : _a.showBotInfoPage) || !!this.rootStore.config.showBotInfoPage);
     }
     /** Returns the active transition for the side panel, like fade in or out */
     get sideTransition() {

package/dist/typings.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { UserCredentials } from '@botpress/messaging-socket';
+import { UserCredentials, UserData } from '@botpress/messaging-socket';
 import { RootStore } from './store';
 import { BPStorage } from './utils/storage';
 declare global {
@@ -17,6 +17,20 @@ declare global {
         };
     }
 }
+export declare namespace Trigger {
+    interface WebchatVisibility {
+        type: 'webchat-visibility';
+        visibility: 'show' | 'hide' | 'toggle';
+    }
+    interface WebchatConfig {
+        type: 'webchat-config';
+        config: Partial<Config>;
+    }
+    interface CustomEvent {
+        type: 'custom-event';
+        event: any;
+    }
+}
 export declare namespace Renderer {
     interface Message {
         type?: string;
@@ -36,7 +50,9 @@ export declare namespace Renderer {
         isLastMessage?: boolean;
         sentOn?: Date;
         inlineFeedback?: any;
-        onSendData?: (data: any) => Promise<Message | void>;
+        onSendData?: (data: any, options?: {
+            showBotTyping?: boolean;
+        }) => Promise<Message | void>;
         onFileUpload?: (label: string, payload: any, file: File) => Promise<void>;
         /** Allows to autoplay voice messages coming from the bot */
         onAudioEnded?: () => void;
@@ -136,7 +152,7 @@ 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 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' | 'TRIGGER';
 export interface WebchatEvent {
     type: WebchatEventType;
     value: any;
@@ -288,6 +304,48 @@ export interface Config {
      * Allows setting a custom user id
      */
     customUser?: UserCredentials;
+    /**
+     * Allows setting custom data to the user
+     */
+    userData?: UserData;
+    /**
+     * Displays the bot's website in the conversation page
+     */
+    website?: string;
+    /**
+     * Displays the bot's contact phone number in the conversation page
+     */
+    phoneNumber?: string;
+    /**
+     * Displays the bot's terms of service in the conversation page
+     */
+    termsConditions?: string;
+    /**
+     * Displays the bot's privacy policy in the conversation page
+     */
+    privacyPolicy?: string;
+    /**
+     * Displays the bot's email address in the conversation page
+     */
+    emailAddress?: string;
+    /**
+     * Displays the bot's cover picture in the conversation page
+     */
+    coverPictureUrl?: string;
+    /**
+     * Enables the bot's information page in the webchat
+     */
+    showBotInfoPage?: boolean;
+    /**
+     * Display's the webchat close button when the webchat is opened
+     */
+    showCloseButton?: boolean;
+    /**
+     * Replaces < and > with their HTML entities &lt; and &gt;.
+     * Setting it to false will let the markdown parser handle html itself
+     * @default true
+     */
+    escapeHtml?: boolean;
 }
 export interface BotDetails {
     website?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -20,6 +20,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.178",
+    "@types/markdown-it": "^12.2.3",
     "@types/mime": "^2.0.3",
     "@types/node": "^16.11.13",
     "@types/react": "^17.0.38",
@@ -29,8 +30,8 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.4.2",
-    "@botpress/messaging-socket": "1.2.0",
+    "@botpress/messaging-components": "0.4.3",
+    "@botpress/messaging-socket": "1.3.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
     "@juggle/resize-observer": "^3.0.2",
@@ -40,6 +41,7 @@
     "date-fns": "^1.30.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
     "mime": "^3.0.0",
     "mobx": "5.15.7",
     "mobx-react": "^6.2.1",
@@ -48,7 +50,8 @@
     "react-dom": "^17.0.2",
     "react-ga": "^2.7.0",
     "react-intl": "^3.12.1",
+    "react-scroll-to-bottom": "^4.2.0",
     "snarkdown": "^2.0.0",
     "uuid": "^8.3.2"
   }
-}
+}