@botpress/webchat 0.2.4 → 0.3.1

package/README.md

@@ -0,0 +1,31 @@
+# Webchat
+
+### Sending
+
+| Channels | Webchat | Details |
+| -------- | :-----: | :------ |
+| Text     |   ✅    |         |
+| Image    |   ✅    |         |
+| Choice   |   ✅    |         |
+| Dropdown |   ✅    |         |
+| Card     |   ✅    |         |
+| Carousel |   ✅    |         |
+| File     |   ✅    |         |
+| Audio    |   ✅    |         |
+| Video    |   ✅    |         |
+| Location |   ❌    |         |
+
+### Receiving
+
+| Channels      | Webchat | Details |
+| ------------- | :-----: | :------ |
+| Text          |   ✅    |         |
+| Quick Reply   |   ✅    |         |
+| Postback      |   ✅    |         |
+| Say Something |   ✅    |         |
+| Voice         |   ❌    |         |
+| Image         |   ❌    |         |
+| File          |   ❌    |         |
+| Audio         |   ❌    |         |
+| Video         |   ❌    |         |
+| Location      |   ❌    |         |

package/dist/components/Composer.d.ts

@@ -8,8 +8,7 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
 declare type ComposerProps = {
-    focused: boolean;
-    composerPlaceholder: string;
-    composerLocked: boolean;
-    composerHidden: boolean;
-} & WrappedComponentProps & Pick<StoreDef, 'botName' | 'composerPlaceholder' | 'intl' | 'focusedArea' | 'sendMessage' | 'sendVoiceMessage' | 'focusPrevious' | 'focusNext' | 'recallHistory' | 'setFocus' | 'updateMessage' | 'message' | 'enableArrowNavigation' | 'resetSession' | 'enableResetSessionShortcut' | 'enableVoiceComposer' | 'currentConversation' | 'preferredLanguage'>;
+    composerPlaceholder?: string;
+    composerLocked?: boolean;
+    composerHidden?: boolean;
+} & WrappedComponentProps & Pick<StoreDef, 'botName' | 'composerPlaceholder' | 'intl' | 'focusedArea' | 'sendMessage' | 'sendVoiceMessage' | 'focusPrevious' | 'focusNext' | 'recallHistory' | 'setFocus' | 'updateMessage' | 'message' | 'enableVoiceComposer' | 'currentConversation' | 'preferredLanguage'>;

package/dist/components/Composer.js

@@ -21,31 +21,20 @@ const VoiceRecorder_1 = __importDefault(require("./VoiceRecorder"));
 class Composer extends react_1.default.Component {
     constructor(props) {
         super(props);
+        this.focus = () => {
+            setTimeout(() => {
+                var _a;
+                (_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 50);
+        };
         this.handleKeyPress = (e) => __awaiter(this, void 0, void 0, function* () {
-            if (this.props.enableResetSessionShortcut && e.ctrlKey && e.key === 'Enter') {
-                e.preventDefault();
-                yield this.props.resetSession();
-                yield this.props.sendMessage();
-                return;
-            }
             if (e.key === 'Enter') {
                 e.preventDefault();
                 yield this.props.sendMessage();
             }
         });
         this.handleKeyDown = (e) => {
-            if (this.props.enableArrowNavigation) {
-                const shouldFocusPrevious = e.target.selectionStart === 0 && (e.key === 'ArrowUp' || e.key === 'ArrowLeft');
-                if (shouldFocusPrevious) {
-                    this.props.focusPrevious();
-                }
-                const shouldFocusNext = e.target.selectionStart === this.textInput.current.value.length &&
-                    (e.key === 'ArrowDown' || e.key === 'ArrowRight');
-                if (shouldFocusNext) {
-                    this.props.focusNext();
-                }
-            }
-            else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                 this.props.recallHistory(e.key);
             }
         };
@@ -68,13 +57,18 @@ class Composer extends react_1.default.Component {
         this.state = { isRecording: false };
     }
     componentDidMount() {
-        setTimeout(() => {
-            this.textInput.current.focus();
-        }, 50);
+        this.focus();
         (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
-            focus.newValue === 'input' && this.textInput.current.focus();
+            var _a;
+            focus.newValue === 'input' && ((_a = this.textInput.current) === null || _a === void 0 ? void 0 : _a.focus());
         });
     }
+    componentWillReceiveProps(newProps) {
+        // Focus on the composer when it's unlocked
+        if (this.props.composerLocked === true && newProps.composerLocked === false) {
+            this.focus();
+        }
+    }
     render() {
         if (this.props.composerHidden) {
             return null;
@@ -119,9 +113,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     focusedArea: store.view.focusedArea,
     focusPrevious: store.view.focusPrevious,
     focusNext: store.view.focusNext,
-    enableArrowNavigation: store.config.enableArrowNavigation,
-    enableResetSessionShortcut: store.config.enableResetSessionShortcut,
-    resetSession: store.resetSession,
     currentConversation: store.currentConversation,
     preferredLanguage: store.preferredLanguage
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Composer)));

package/dist/components/Container.js

@@ -14,7 +14,6 @@ const ConversationList_1 = __importDefault(require("./ConversationList"));
 const Footer_1 = __importDefault(require("./Footer"));
 const Header_1 = __importDefault(require("./Header"));
 const MessageList_1 = __importDefault(require("./messages/MessageList"));
-const OverridableComponent_1 = __importDefault(require("./OverridableComponent"));
 class Container extends react_1.default.Component {
     renderBody() {
         if (!this.props.isInitialized) {
@@ -33,7 +32,7 @@ class Container extends react_1.default.Component {
                 }) },
                 react_1.default.createElement(MessageList_1.default, null),
                 react_1.default.createElement(messaging_components_1.Keyboard, null,
-                    react_1.default.createElement(OverridableComponent_1.default, { name: 'composer', original: Composer_1.default }))));
+                    react_1.default.createElement(Composer_1.default, null))));
         }
     }
     render() {
@@ -42,11 +41,9 @@ class Container extends react_1.default.Component {
             [`bpw-anim-${this.props.sideTransition}`]: true
         });
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(OverridableComponent_1.default, { name: 'before_container', original: null }),
             react_1.default.createElement("div", { className: classNames, style: { width: this.props.dimensions.layout } },
                 react_1.default.createElement(Header_1.default, null),
                 this.renderBody(),
-                react_1.default.createElement(OverridableComponent_1.default, { name: 'below_conversation', original: null }),
                 this.props.isPoweredByDisplayed && react_1.default.createElement(Footer_1.default, null))));
     }
 }

package/dist/components/ConversationList.d.ts

@@ -7,4 +7,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
     WrappedComponent: React.ComponentType<ConversationListProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
-declare type ConversationListProps = WrappedComponentProps & Pick<StoreDef, 'conversations' | 'fetchConversation' | 'createConversation' | 'enableArrowNavigation'>;
+declare type ConversationListProps = WrappedComponentProps & Pick<StoreDef, 'conversations' | 'fetchConversation' | 'createConversation'>;

package/dist/components/ConversationList.js

@@ -8,7 +8,7 @@ const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
 const react_intl_1 = require("react-intl");
 const Add_1 = __importDefault(require("../icons/Add"));
-const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onClick, hasFocus, intl }) => {
+const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onClick, intl }) => {
     var _a, _b, _c;
     const title = intl.formatMessage({ id: 'conversationList.title' }, { id: conversation.id });
     const { value, unit } = (0, intl_utils_1.selectUnit)(new Date(((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.sentOn) || conversation.createdOn));
@@ -23,60 +23,19 @@ const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onCli
             react_1.default.createElement("div", { className: 'bpw-convo-preview' }, message))));
 });
 class ConversationList extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            focusIdx: undefined
-        };
-        this.changeFocus = (step) => {
-            let focusIdx = this.state.focusIdx || 0;
-            focusIdx += step;
-            if (focusIdx > this.props.conversations.length) {
-                focusIdx = 0;
-            }
-            else if (focusIdx < 0) {
-                focusIdx = this.props.conversations.length;
-            }
-            this.setState({ focusIdx });
-        };
-        this.handleKeyDown = (e) => {
-            if (!this.props.enableArrowNavigation) {
-                return;
-            }
-            if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-                this.changeFocus(1);
-            }
-            else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-                this.changeFocus(-1);
-            }
-            else if (e.key === 'Enter' && this.state.focusIdx && this.state.focusIdx < this.props.conversations.length) {
-                const convoId = this.props.conversations[this.state.focusIdx].id;
-                this.props.fetchConversation.bind(this, convoId);
-            }
-        };
-    }
     componentDidMount() {
         this.main.focus();
     }
-    componentDidUpdate(_, prevState) {
-        if (this.state.focusIdx === this.props.conversations.length) {
-            this.btn.focus();
-        }
-        else if (prevState.focusIdx === this.props.conversations.length) {
-            this.main.focus();
-        }
-    }
     render() {
         const { conversations, createConversation, fetchConversation } = this.props;
-        return (react_1.default.createElement("div", { tabIndex: 0, ref: (el) => (this.main = el), className: 'bpw-convo-list', onKeyDown: this.handleKeyDown },
-            conversations.map((convo, idx) => (react_1.default.createElement(ConversationListItem, { key: convo.id, hasFocus: this.state.focusIdx === idx, conversation: convo, onClick: fetchConversation.bind(this, convo.id) }))),
-            react_1.default.createElement("button", { ref: (el) => (this.btn = el), id: "btn-convo-add", className: 'bpw-convo-add-btn', onClick: createConversation.bind(this, undefined) },
+        return (react_1.default.createElement("div", { tabIndex: 0, ref: (el) => (this.main = el), className: 'bpw-convo-list' },
+            conversations.map((conversation, idx) => (react_1.default.createElement(ConversationListItem, { key: conversation.id, conversation: conversation, onClick: fetchConversation.bind(this, conversation.id) }))),
+            react_1.default.createElement("button", { id: "btn-convo-add", className: 'bpw-convo-add-btn', onClick: createConversation.bind(this, undefined) },
                 react_1.default.createElement(Add_1.default, { width: 15, height: 15 }))));
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     conversations: store.conversations,
     createConversation: store.createConversation,
-    fetchConversation: store.fetchConversation,
-    enableArrowNavigation: store.config.enableArrowNavigation
+    fetchConversation: store.fetchConversation
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(ConversationList)));

package/dist/components/Header.d.ts

@@ -13,16 +13,14 @@ declare class Header extends React.Component<HeaderProps> {
     renderTitle: () => JSX.Element;
     handleDeleteConversation: () => Promise<void>;
     renderDeleteConversationButton(): JSX.Element;
-    renderResetButton(): JSX.Element;
     renderDownloadButton(): JSX.Element;
     renderConvoButton(): JSX.Element;
     renderBotInfoButton(): JSX.Element;
     renderCloseButton(): JSX.Element;
     renderCustomButtons(): JSX.Element[];
-    handleKeyDown: (action: any, e: any) => void;
     setShowingOption: (val: any) => void;
     render(): JSX.Element;
 }
 declare const _default: typeof Header & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
-declare type HeaderProps = Pick<StoreDef, 'intl' | 'sendMessage' | 'focusPrevious' | 'focusNext' | 'focusedArea' | 'isConversationsDisplayed' | 'botName' | 'hasUnreadMessages' | 'unreadCount' | 'hasBotInfoDescription' | 'deleteConversation' | 'resetSession' | 'downloadConversation' | 'toggleConversations' | 'hideChat' | 'toggleBotInfo' | 'botAvatarUrl' | 'showResetButton' | 'showDeleteConversationButton' | 'showDownloadButton' | 'showConversationsButton' | 'showBotInfoButton' | 'showCloseButton' | 'enableArrowNavigation' | 'botConvoDescription' | 'customButtons'>;
+declare type HeaderProps = Pick<StoreDef, 'intl' | 'sendMessage' | 'focusPrevious' | 'focusNext' | 'focusedArea' | 'isConversationsDisplayed' | 'botName' | 'hasUnreadMessages' | 'unreadCount' | 'hasBotInfoDescription' | 'deleteConversation' | 'downloadConversation' | 'toggleConversations' | 'hideChat' | 'toggleBotInfo' | 'botAvatarUrl' | 'showDeleteConversationButton' | 'showDownloadButton' | 'showConversationsButton' | 'showBotInfoButton' | 'showCloseButton' | 'botConversationDescription' | 'customButtons'>;

package/dist/components/Header.js

@@ -20,7 +20,6 @@ const Delete_1 = __importDefault(require("../icons/Delete"));
 const Download_1 = __importDefault(require("../icons/Download"));
 const Information_1 = __importDefault(require("../icons/Information"));
 const List_1 = __importDefault(require("../icons/List"));
-const Reload_1 = __importDefault(require("../icons/Reload"));
 const Avatar_1 = __importDefault(require("./common/Avatar"));
 const ConfirmDialog_1 = __importDefault(require("./common/ConfirmDialog"));
 class Header extends react_1.default.Component {
@@ -63,7 +62,7 @@ class Header extends react_1.default.Component {
                 react_1.default.createElement("div", { className: 'bpw-header-name' },
                     title,
                     this.props.hasUnreadMessages && react_1.default.createElement("span", { className: 'bpw-header-unread' }, this.props.unreadCount)),
-                this.props.hasBotInfoDescription && (react_1.default.createElement("div", { className: 'bpw-header-subtitle' }, this.props.botConvoDescription))));
+                this.props.hasBotInfoDescription && (react_1.default.createElement("div", { className: 'bpw-header-subtitle' }, this.props.botConversationDescription))));
         };
         this.handleDeleteConversation = () => __awaiter(this, void 0, void 0, function* () {
             if (yield (0, ConfirmDialog_1.default)(this.props.intl.formatMessage({
@@ -79,27 +78,6 @@ class Header extends react_1.default.Component {
                 yield this.props.deleteConversation();
             }
         });
-        this.handleKeyDown = (action, e) => {
-            if (!this.props.enableArrowNavigation) {
-                return;
-            }
-            if (e.key === 'ArrowUp') {
-                this.props.focusPrevious();
-            }
-            else if (e.key === 'ArrowDown') {
-                this.props.focusNext();
-            }
-            else if (e.key === 'ArrowLeft') {
-                this.changeButtonFocus(-1);
-            }
-            else if (e.key === 'ArrowRight') {
-                this.changeButtonFocus(1);
-            }
-            else if (e.key === 'Enter') {
-                e.preventDefault();
-                action();
-            }
-        };
         this.setShowingOption = (val) => {
             this.setState({ showingOption: val });
         };
@@ -110,30 +88,26 @@ class Header extends react_1.default.Component {
         });
     }
     renderDeleteConversationButton() {
-        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-delete", ref: (el) => (this.btnEls[0] = el), className: 'bpw-header-icon bpw-header-icon-delete', onClick: this.handleDeleteConversation, onKeyDown: this.handleKeyDown.bind(this, this.handleDeleteConversation), onBlur: this.onBlur },
+        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-delete", ref: (el) => (this.btnEls[0] = el), className: 'bpw-header-icon bpw-header-icon-delete', onClick: this.handleDeleteConversation, onBlur: this.onBlur },
             react_1.default.createElement(Delete_1.default, null)));
     }
-    renderResetButton() {
-        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-reset", ref: (el) => (this.btnEls[1] = el), className: 'bpw-header-icon bpw-header-icon-reset', onClick: this.props.resetSession, onKeyDown: this.handleKeyDown.bind(this, this.props.resetSession), onBlur: this.onBlur },
-            react_1.default.createElement(Reload_1.default, null)));
-    }
     renderDownloadButton() {
-        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-download", ref: (el) => (this.btnEls[2] = el), className: 'bpw-header-icon bpw-header-icon-download', onClick: this.props.downloadConversation, onKeyDown: this.handleKeyDown.bind(this, this.props.downloadConversation), onBlur: this.onBlur },
+        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-download", ref: (el) => (this.btnEls[2] = el), className: 'bpw-header-icon bpw-header-icon-download', onClick: this.props.downloadConversation, onBlur: this.onBlur },
             react_1.default.createElement(Download_1.default, null)));
     }
     renderConvoButton() {
-        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-conversations", ref: (el) => (this.btnEls[3] = el), className: 'bpw-header-icon bpw-header-icon-convo', onClick: this.props.toggleConversations, onKeyDown: this.handleKeyDown.bind(this, this.props.toggleConversations), onBlur: this.onBlur },
+        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-conversations", ref: (el) => (this.btnEls[3] = el), className: 'bpw-header-icon bpw-header-icon-convo', onClick: this.props.toggleConversations, onBlur: this.onBlur },
             react_1.default.createElement(List_1.default, null)));
     }
     renderBotInfoButton() {
-        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-botinfo", ref: (el) => (this.btnEls[4] = el), className: 'bpw-header-icon bpw-header-icon-botinfo', onClick: this.props.toggleBotInfo, onKeyDown: this.handleKeyDown.bind(this, this.props.toggleBotInfo), onBlur: this.onBlur },
+        return (react_1.default.createElement("button", { type: "button", tabIndex: -1, id: "btn-botinfo", ref: (el) => (this.btnEls[4] = el), className: 'bpw-header-icon bpw-header-icon-botinfo', onClick: this.props.toggleBotInfo, onBlur: this.onBlur },
             react_1.default.createElement(Information_1.default, null)));
     }
     renderCloseButton() {
         return (react_1.default.createElement("button", { type: "button", id: "btn-close", "aria-label": this.props.intl.formatMessage({
                 id: 'header.hideChatWindow',
                 defaultMessage: 'Hide the chat window'
-            }), ref: (el) => (this.btnEls[5] = el), className: 'bpw-header-icon bpw-header-icon-close', onClick: this.props.hideChat, onKeyDown: this.handleKeyDown.bind(this, this.props.hideChat), onBlur: this.onBlur },
+            }), ref: (el) => (this.btnEls[5] = el), className: 'bpw-header-icon bpw-header-icon-close', onClick: this.props.hideChat, onBlur: this.onBlur },
             react_1.default.createElement(Close_1.default, null)));
     }
     renderCustomButtons() {
@@ -175,7 +149,6 @@ class Header extends react_1.default.Component {
                     this.renderTitle())),
             !!this.props.customButtons.length && this.renderCustomButtons(),
             this.props.showDeleteConversationButton && this.renderDeleteConversationButton(),
-            this.props.showResetButton && this.renderResetButton(),
             this.props.showDownloadButton && this.renderDownloadButton(),
             this.props.showConversationsButton && this.renderConvoButton(),
             this.props.showBotInfoButton && this.renderBotInfoButton(),
@@ -189,7 +162,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     showDownloadButton: store.view.showDownloadButton,
     showBotInfoButton: store.view.showBotInfoButton,
     showConversationsButton: store.view.showConversationsButton,
-    showResetButton: store.view.showResetButton,
     showCloseButton: store.view.showCloseButton,
     hasUnreadMessages: store.view.hasUnreadMessages,
     unreadCount: store.view.unreadCount,
@@ -201,11 +173,9 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     toggleBotInfo: store.view.toggleBotInfo,
     customButtons: store.view.customButtons,
     deleteConversation: store.deleteConversation,
-    resetSession: store.resetSession,
     downloadConversation: store.downloadConversation,
     botName: store.botName,
     botAvatarUrl: store.botAvatarUrl,
     hasBotInfoDescription: store.hasBotInfoDescription,
-    botConvoDescription: store.config.botConvoDescription,
-    enableArrowNavigation: store.config.enableArrowNavigation
+    botConversationDescription: store.config.botConversationDescription
 }))((0, mobx_react_1.observer)(Header));

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' | 'enableArrowNavigation' | 'updatePreferredLanguage' | 'preferredLanguage' | 'escapeHTML' | 'rtl'>;
+declare type BotInfoProps = WrappedComponentProps & Pick<StoreDef, 'botInfo' | 'botName' | 'avatarUrl' | 'toggleBotInfo' | 'startConversation' | 'isConversationStarted' | 'updatePreferredLanguage' | 'preferredLanguage' | 'escapeHTML' | 'rtl'>;

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

@@ -18,15 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -41,15 +32,14 @@ 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.details && botInfo.details.coverPictureUrl) ||
-            `https://via.placeholder.com/400x175?text=${botInfo.name}` })));
+    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) || ''}` })));
 class BotInfoPage extends react_1.default.Component {
     constructor() {
         super(...arguments);
-        this.changeLanguage = (e) => __awaiter(this, void 0, void 0, function* () {
+        this.changeLanguage = (e) => {
             const lang = e.target.value;
-            yield this.props.updatePreferredLanguage(lang);
-        });
+            this.props.updatePreferredLanguage(lang);
+        };
     }
     componentDidMount() {
         var _a;

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

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { IntlShape } from 'react-intl';
 import { EventFeedback as MessageFeedback } from '../../typings';
 interface Props {
     onFeedback: (feedback: number, eventId: string) => void;
     messageId: string;
     messageFeedbacks: MessageFeedback[];
-    intl: any;
+    intl: IntlShape;
 }
 export declare const InlineFeedback: FC<Props>;
 export {};

package/dist/components/messages/Message.js

@@ -27,7 +27,6 @@ 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 ContextMenu_1 = require("../ContextMenu");
 class Message extends react_1.Component {
     constructor() {
         super(...arguments);
@@ -35,9 +34,6 @@ class Message extends react_1.Component {
             hasError: false,
             showMore: false
         };
-        this.handleContextMenu = (e) => {
-            (0, ContextMenu_1.showContextMenu)(e, this.props);
-        };
     }
     static getDerivedStateFromError(_error) {
         return { hasError: true };
@@ -67,7 +63,8 @@ class Message extends react_1.Component {
                 shouldPlay: this.props.shouldPlay,
                 intl: this.props.store.intl,
                 escapeHTML: true,
-                showTimestamp: this.props.store.config.showTimestamp
+                showTimestamp: this.props.store.config.showTimestamp,
+                googleMapsAPIKey: this.props.store.config.googleMapsAPIKey
             } }));
         if (rendered === null) {
             return null;
@@ -77,7 +74,7 @@ class Message extends react_1.Component {
             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, '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", onContextMenu: type !== 'session_reset' ? this.handleContextMenu : () => { } },
+            react_1.default.createElement("div", { tabIndex: -1, className: "bpw-chat-bubble-content" },
                 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 : '

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

@@ -17,11 +17,7 @@ export default _default;
 declare type Props = {
     isBot: boolean;
     avatar: JSX.Element;
-    userName: string;
     messages: MessageDetails[];
     isLastGroup: boolean;
-    onFileUpload?: any;
-    onSendData?: any;
-    onFeedback?: any;
     store?: RootStore;
-} & Pick<StoreDef, 'showUserName'>;
+} & Pick<StoreDef, 'sendFeedback' | 'sendData'>;

package/dist/components/messages/MessageGroup.js

@@ -29,7 +29,7 @@ class MessageGroup extends react_1.default.Component {
         return { hasError: true };
     }
     render() {
-        const { messages, avatar, isBot, showUserName, userName } = this.props;
+        const { messages, avatar, isBot } = this.props;
         const fromLabel = this.props.store.intl.formatMessage({
             id: this.props.isBot ? 'message.fromBotLabel' : 'message.fromMeLabel',
             defaultMessage: 'Me'
@@ -43,21 +43,18 @@ class MessageGroup extends react_1.default.Component {
             }) },
             avatar,
             react_1.default.createElement("div", { role: "region", className: 'bpw-message-container' },
-                showUserName && react_1.default.createElement("div", { className: 'bpw-message-username' }, userName),
                 react_1.default.createElement("div", { "aria-live": "assertive", role: "log", className: 'bpw-message-group' },
                     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;
                         const payload = message.payload;
                         const showInlineFeedback = isBot && isLastMsg && payload.collectFeedback;
-                        return (react_1.default.createElement(Message_1.default, { key: `${message.id}-${message.payload.type}`, inlineFeedback: showInlineFeedback && (react_1.default.createElement(InlineFeedback_1.InlineFeedback, { intl: this.props.store.intl, messageId: message.id, onFeedback: this.props.onFeedback, messageFeedbacks: this.props.store.messageFeedbacks })), messageId: message.id, noBubble: !!payload.noBubble, fromLabel: fromLabel, isLastOfGroup: i >= this.props.messages.length - 1, isLastGroup: this.props.isLastGroup, isBotMessage: !message.authorId, payload: payload, sentOn: message.sentOn, onSendData: this.props.onSendData, onFileUpload: this.props.onFileUpload, store: this.props.store, onAudioEnded: this.onAudioEnded, shouldPlay: this.state.audioPlayingIndex === i }));
+                        return (react_1.default.createElement(Message_1.default, { key: `${message.id}-${message.payload.type}`, inlineFeedback: showInlineFeedback && (react_1.default.createElement(InlineFeedback_1.InlineFeedback, { intl: this.props.store.intl, messageId: message.id, onFeedback: this.props.sendFeedback, messageFeedbacks: this.props.store.messageFeedbacks })), messageId: message.id, noBubble: !!payload.noBubble, fromLabel: fromLabel, isLastOfGroup: i >= this.props.messages.length - 1, isLastGroup: this.props.isLastGroup, isBotMessage: !message.authorId, payload: payload, sentOn: message.sentOn, onSendData: this.props.sendData, store: this.props.store, onAudioEnded: this.onAudioEnded, shouldPlay: this.state.audioPlayingIndex === i }));
                     })))));
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
-    onFeedback: store.sendFeedback,
-    onSendData: store.sendData,
-    onFileUpload: store.uploadFile,
-    showUserName: store.config.showUserName
+    sendFeedback: store.sendFeedback,
+    sendData: store.sendData
 }))(MessageGroup);

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

@@ -7,4 +7,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
     WrappedComponent: React.ComponentType<MessageListProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
-declare type MessageListProps = WrappedComponentProps & Pick<StoreDef, 'intl' | 'isBotTyping' | 'focusedArea' | 'focusPrevious' | 'focusNext' | 'botAvatarUrl' | 'botName' | 'enableArrowNavigation' | 'showUserAvatar' | 'currentMessages' | 'preferredLanguage'>;
+declare type MessageListProps = WrappedComponentProps & Pick<StoreDef, 'intl' | 'isBotTyping' | 'focusedArea' | 'focusPrevious' | 'focusNext' | 'botAvatarUrl' | 'botName' | 'currentMessages' | 'preferredLanguage'>;

package/dist/components/messages/MessageList.js

@@ -17,22 +17,6 @@ class MessageList extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = { showNewMessageIndicator: false, manualScroll: false };
-        this.handleKeyDown = (e) => {
-            if (!this.props.enableArrowNavigation) {
-                return;
-            }
-            const maxScroll = this.messagesDiv.scrollHeight - this.messagesDiv.clientHeight;
-            const shouldFocusNext = e.key === 'ArrowRight' || (e.key === 'ArrowDown' && this.messagesDiv.scrollTop === maxScroll);
-            const shouldFocusPrevious = e.key === 'ArrowLeft' || (e.key === 'ArrowUp' && this.messagesDiv.scrollTop === 0);
-            if (shouldFocusNext) {
-                this.messagesDiv.blur();
-                this.props.focusNext();
-            }
-            if (shouldFocusPrevious) {
-                this.messagesDiv.blur();
-                this.props.focusPrevious();
-            }
-        };
         this.shouldDisplayMessage = (m) => {
             return m.payload.type !== 'postback';
         };
@@ -60,7 +44,7 @@ class MessageList extends react_1.default.Component {
             });
         }
         // 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]) => {
+        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 }));
@@ -106,8 +90,7 @@ class MessageList extends react_1.default.Component {
         let lastDate = undefined;
         let currentGroup = undefined;
         messages.forEach((m) => {
-            var _a, _b;
-            const speaker = ((_b = (_a = m.payload.channel) === null || _a === void 0 ? void 0 : _a.web) === null || _b === void 0 ? void 0 : _b.userName) || m.authorId;
+            const speaker = m.authorId;
             const date = m.sentOn;
             // Create a new group if messages are separated by more than X minutes or if different speaker
             if (speaker !== lastSpeaker ||
@@ -134,24 +117,21 @@ class MessageList extends react_1.default.Component {
             });
         }
         return (react_1.default.createElement("div", null, groups.map((group, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a;
             const lastGroup = groups[i - 1];
             const lastDate = (_a = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup[lastGroup.length - 1]) === null || _a === void 0 ? void 0 : _a.sentOn;
             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, payload }] = group;
-            const avatar = authorId
-                ? this.props.showUserAvatar &&
-                    this.renderAvatar((_c = (_b = payload.channel) === null || _b === void 0 ? void 0 : _b.web) === null || _c === void 0 ? void 0 : _c.userName, (_e = (_d = payload.channel) === null || _d === void 0 ? void 0 : _d.web) === null || _e === void 0 ? void 0 : _e.avatarUrl)
-                : this.renderAvatar(this.props.botName, ((_g = (_f = payload.channel) === null || _f === void 0 ? void 0 : _f.web) === null || _g === void 0 ? void 0 : _g.avatarUrl) || this.props.botAvatarUrl);
+            const [{ authorId }] = group;
+            const avatar = !authorId && this.renderAvatar(this.props.botName, this.props.botAvatarUrl);
             return (react_1.default.createElement("div", { key: i },
                 isDateNeeded && this.renderDate(group[0].sentOn),
-                react_1.default.createElement(MessageGroup_1.default, { isBot: !authorId, avatar: avatar, userName: (_j = (_h = payload.channel) === null || _h === void 0 ? void 0 : _h.web) === null || _j === void 0 ? void 0 : _j.userName, key: `msg-group-${i}`, isLastGroup: i >= groups.length - 1, messages: group })));
+                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, onKeyDown: this.handleKeyDown, className: 'bpw-msg-list', ref: (m) => {
+        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() },
@@ -170,7 +150,5 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     focusPrevious: store.view.focusPrevious,
     focusNext: store.view.focusNext,
     focusedArea: store.view.focusedArea,
-    showUserAvatar: store.config.showUserAvatar,
-    enableArrowNavigation: store.config.enableArrowNavigation,
     preferredLanguage: store.preferredLanguage
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(MessageList)));

package/dist/core/api.d.ts

@@ -1,14 +1,11 @@
 /// <reference types="node" />
 import { Message } from '@botpress/messaging-socket';
-import { RecentConversation } from '..';
-import { BotInfo, uuid } from '../typings';
+import { uuid, RecentConversation } from '../typings';
 import BpSocket from './socket';
 export default class WebchatApi {
     private socket;
-    private axios;
-    private axiosConfig;
     constructor(socket: BpSocket);
-    fetchBotInfo(mediaFileServiceUrl: string): Promise<BotInfo | undefined>;
+    listCurrentConversationMessages(limit?: number): Promise<Message[] | undefined>;
     fetchConversations(): Promise<RecentConversation[]>;
     fetchConversation(conversationId: uuid): Promise<{
         messages: Message[];
@@ -17,12 +14,10 @@ export default class WebchatApi {
         userId?: string | undefined;
         createdOn?: Date | undefined;
     } | undefined>;
-    resetSession(conversationId: uuid): Promise<void>;
     createConversation(): Promise<uuid | undefined>;
     startConversation(): Promise<void>;
     sendMessage(payload: any, conversationId: uuid): Promise<Message | undefined>;
     deleteConversation(conversationId: uuid): Promise<void>;
     sendFeedback(feedback: number, messageId: uuid): Promise<void>;
-    uploadFile(file: File, payload: string, conversationId: uuid): Promise<void>;
     sendVoiceMessage(voice: Buffer, ext: string, conversationId: uuid): Promise<void>;
 }