@botpress/webchat 0.5.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/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/declaration.d.ts

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

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[];

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);
     }

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

@@ -288,6 +288,38 @@ export interface Config {
      * Allows setting a custom user id
      */
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.5.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.2",
+    "@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"
   }