@botpress/webchat 0.4.0 → 0.5.1

package/README.md

@@ -13,7 +13,7 @@
 | File     |   ✅    |         |
 | Audio    |   ✅    |         |
 | Video    |   ✅    |         |
-| Location |   ❌    |         |
+| Location |   ✅    |         |
 
 ### Receiving
 
@@ -23,9 +23,19 @@
 | Quick Reply   |   ✅    |         |
 | Postback      |   ✅    |         |
 | Say Something |   ✅    |         |
-| Voice         |   ❌    |         |
+| Voice         |   ✅    |         |
 | Image         |   ❌    |         |
 | File          |   ❌    |         |
 | Audio         |   ❌    |         |
 | Video         |   ❌    |         |
 | Location      |   ❌    |         |
+
+## Development
+
+When working on the webchat, to see changes made to the codebase, you will need to follow the steps detailed [here](../inject/README.md). The inject script is the part that links any web page to a webchat. This is the easiest way to manually test the webchat.
+
+## Tests
+
+To run automated E2E tests, simply run the command `yarn test:chat [--browser <chromium | firefox | edge | electron>]` (for the list of supported browsers see: https://docs.cypress.io/guides/guides/launching-browsers#Browsers).
+
+Tests can be found in `tests/e2e` and uses Cypress as the test framework. Configurations for Cypress can be found in the `cypress.json` file at the root of the repository.

package/dist/components/common/Avatar/index.d.ts

@@ -2,8 +2,8 @@
 declare const Avatar: ({ name, avatarUrl, height, width }: AvatarProps) => JSX.Element;
 export default Avatar;
 export interface AvatarProps {
-    name: string;
-    avatarUrl: string;
+    name?: string;
+    avatarUrl?: string;
     height: number;
     width: number;
 }

package/dist/components/common/BotInfo/index.d.ts

@@ -7,4 +7,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
     WrappedComponent: React.ComponentType<BotInfoProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
-declare type BotInfoProps = WrappedComponentProps & Pick<StoreDef, 'botInfo' | 'botName' | 'avatarUrl' | 'toggleBotInfo' | 'startConversation' | 'isConversationStarted' | 'updatePreferredLanguage' | 'preferredLanguage' | 'escapeHTML' | 'rtl'>;
+declare type BotInfoProps = WrappedComponentProps & Pick<StoreDef, 'coverPictureUrl' | 'description' | 'phoneNumber' | 'website' | 'emailAddress' | 'termsConditions' | 'privacyPolicy' | 'botInfo' | 'botName' | 'avatarUrl' | 'toggleBotInfo' | 'updatePreferredLanguage' | 'preferredLanguage' | 'escapeHTML' | 'rtl'>;

package/dist/components/common/BotInfo/index.js

@@ -31,8 +31,8 @@ const Phone_1 = __importDefault(require("../../../icons/Phone"));
 const Website_1 = __importDefault(require("../../../icons/Website"));
 const utils_1 = require("../../../utils");
 const Avatar_1 = __importDefault(require("../Avatar"));
-const CoverPicture = ({ botInfo }) => (react_1.default.createElement("div", { className: 'bpw-botinfo-cover-picture-wrapper' },
-    react_1.default.createElement("img", { className: 'bpw-botinfo-cover-picture', src: (botInfo === null || botInfo === void 0 ? void 0 : botInfo.details.coverPictureUrl) || `https://via.placeholder.com/400x175?text=${(botInfo === null || botInfo === void 0 ? void 0 : botInfo.name) || ''}` })));
+const CoverPicture = ({ coverPictureUrl }) => (react_1.default.createElement("div", { className: 'bpw-botinfo-cover-picture-wrapper' },
+    react_1.default.createElement("img", { className: 'bpw-botinfo-cover-picture', src: coverPictureUrl })));
 class BotInfoPage extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -50,51 +50,56 @@ class BotInfoPage extends react_1.default.Component {
         return react_1.default.createElement("div", { className: 'bpw-botinfo-description', dangerouslySetInnerHTML: { __html: html } });
     }
     render() {
-        const { botInfo, botName, avatarUrl } = this.props;
-        const onDismiss = this.props.isConversationStarted ? this.props.toggleBotInfo : this.props.startConversation;
+        const { botName, avatarUrl, coverPictureUrl, description, phoneNumber, website, emailAddress, termsConditions, privacyPolicy, botInfo } = this.props;
         return (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement("link", { rel: "stylesheet", href: "style.scss" }),
             react_1.default.createElement("div", { className: (0, classnames_1.default)('bpw-botinfo-container', {
                     'bpw-rtl': this.props.rtl
                 }) },
-                react_1.default.createElement(CoverPicture, { botInfo: botInfo }),
+                coverPictureUrl ? react_1.default.createElement(CoverPicture, { coverPictureUrl: coverPictureUrl }) : react_1.default.createElement("div", { style: { height: '42px' } }),
                 react_1.default.createElement("div", { className: 'bpw-botinfo-summary' },
                     react_1.default.createElement(Avatar_1.default, { name: botName, avatarUrl: avatarUrl, height: 64, width: 64 }),
-                    react_1.default.createElement("h3", null, botName),
-                    this.renderDescription(botInfo.description)),
-                botInfo.details && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("h3", { style: { marginBottom: '10px' } }, botName),
+                    description && this.renderDescription(description)),
+                react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: 'bpw-botinfo-links' },
-                        botInfo.details.phoneNumber && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
+                        phoneNumber && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
                             react_1.default.createElement("i", null,
                                 react_1.default.createElement(Phone_1.default, null)),
-                            react_1.default.createElement("a", { target: '_blank', href: `tel:${botInfo.details.phoneNumber}` }, botInfo.details.phoneNumber))),
-                        botInfo.details.website && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
+                            react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: `tel:${phoneNumber}` }, phoneNumber))),
+                        website && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
                             react_1.default.createElement("i", null,
                                 react_1.default.createElement(Website_1.default, null)),
-                            react_1.default.createElement("a", { target: '_blank', href: botInfo.details.website }, botInfo.details.website))),
-                        botInfo.details.emailAddress && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
+                            react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: website }, website))),
+                        emailAddress && (react_1.default.createElement("div", { className: 'bpw-botinfo-link' },
                             react_1.default.createElement("i", null,
                                 react_1.default.createElement(Email_1.default, null)),
-                            react_1.default.createElement("a", { target: '_blank', href: `mailto:${botInfo.details.emailAddress}` }, botInfo.details.emailAddress)))),
-                    botInfo.details.termsConditions && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
-                        react_1.default.createElement("a", { target: '_blank', href: botInfo.details.termsConditions },
+                            react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: `mailto:${emailAddress}` }, emailAddress)))),
+                    termsConditions && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
+                        react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: termsConditions },
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.termsAndConditions' })))),
-                    botInfo.details.privacyPolicy && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
-                        react_1.default.createElement("a", { target: '_blank', href: botInfo.details.privacyPolicy },
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.privacyPolicy' })))))),
-                botInfo.languages.length > 1 && (react_1.default.createElement("div", { className: 'bpw-botinfo-preferred-language' },
+                    privacyPolicy && (react_1.default.createElement("div", { className: 'bpw-botinfo-terms' },
+                        react_1.default.createElement("a", { target: '_blank', rel: "noopener noreferrer", href: privacyPolicy },
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.privacyPolicy' }))))),
+                (botInfo === null || botInfo === void 0 ? void 0 : botInfo.languages) && botInfo.languages.length > 1 && (react_1.default.createElement("div", { className: 'bpw-botinfo-preferred-language' },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.preferredLanguage' }),
                     react_1.default.createElement("select", { value: this.props.preferredLanguage, onChange: this.changeLanguage }, botInfo.languages.map((lang) => (react_1.default.createElement("option", { key: lang, value: lang }, lang.toUpperCase())))))),
-                react_1.default.createElement("button", { tabIndex: 1, ref: (el) => (this.btnEl = el), className: 'bpw-botinfo-start-button', onClick: onDismiss.bind(this, undefined) }, this.props.isConversationStarted ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.backToConversation' })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.startConversation' }))))));
+                react_1.default.createElement("button", { tabIndex: 1, ref: (el) => (this.btnEl = el), className: 'bpw-botinfo-start-button', onClick: this.props.toggleBotInfo.bind(this, undefined) },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.backToConversation' })))));
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
+    coverPictureUrl: store.coverPictureUrl,
+    description: store.description,
+    phoneNumber: store.phoneNumber,
+    website: store.website,
+    emailAddress: store.emailAddress,
+    termsConditions: store.termsConditions,
+    privacyPolicy: store.privacyPolicy,
     botName: store.botName,
     botInfo: store.botInfo,
     avatarUrl: store.botAvatarUrl,
-    startConversation: store.startConversation,
     toggleBotInfo: store.view.toggleBotInfo,
-    isConversationStarted: store.isConversationStarted,
     updatePreferredLanguage: store.updatePreferredLanguage,
     preferredLanguage: store.preferredLanguage,
     escapeHTML: store.escapeHTML,

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/components/messages/MessageList.js

@@ -1,90 +1,88 @@
 "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();
         });
-        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 +104,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 +121,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/socket.d.ts

@@ -8,7 +8,6 @@ export default class BpSocket {
     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,13 +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.config = 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.chatId = config.chatId;
         this.socket = new messaging_socket_1.MessagingSocket({ url: config.messagingUrl, clientId: config.clientId });
         window.websocket = this.socket;
@@ -38,7 +35,7 @@ class BpSocket {
             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);
             }
         });
     }

package/dist/declaration.d.ts

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

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' | 'resetConversation'>;
+} & 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) {
@@ -93,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();
                     }
@@ -110,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;
@@ -123,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
@@ -137,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;
             }
@@ -192,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()) {
@@ -206,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);
@@ -239,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);
             }
         });
     }
@@ -267,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;
@@ -323,8 +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,
+    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,15 +28,22 @@ 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;
     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[];
     get currentConversationId(): uuid | undefined;
-    postMessage(name: string, payload?: any): void;
     updateMessages(messages: Message[]): void;
     updateLastMessage(conversationId: string, message?: Message): void;
     clearMessages(): void;
@@ -51,7 +59,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 +69,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 +77,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);
@@ -66,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);
     }
@@ -81,10 +113,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 +188,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 +257,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 +357,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 +394,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 +466,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 +493,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 +520,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 +586,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 */
@@ -39,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;
@@ -48,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;
@@ -61,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() {
@@ -111,7 +116,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 +162,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 +170,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 +178,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 +188,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 ''
@@ -280,10 +287,39 @@ export interface Config {
     /**
      * Allows setting a custom user id
      */
-    customUser?: {
-        userId: string;
-        userToken: string;
-    };
+    customUser?: UserCredentials;
+    /**
+     * 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;
 }
 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.4.0",
+  "version": "0.5.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.23.1",
-    "@botpress/messaging-components": "0.4.0",
+    "@botpress/messaging-components": "0.4.3",
     "@botpress/messaging-socket": "1.2.0",
     "@formatjs/intl-pluralrules": "^4.1.6",
     "@formatjs/intl-utils": "^3.8.4",
@@ -48,6 +48,7 @@
     "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"
   }