@botpress/webchat 0.2.3 → 0.3.0

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' | 'isEmulator' | '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

@@ -16,35 +16,19 @@ const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
 const react_intl_1 = require("react-intl");
+const ToolTip_1 = __importDefault(require("./common/ToolTip"));
 const VoiceRecorder_1 = __importDefault(require("./VoiceRecorder"));
 class Composer extends react_1.default.Component {
     constructor(props) {
         super(props);
         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);
             }
         };
@@ -89,7 +73,17 @@ class Composer extends react_1.default.Component {
                         defaultMessage: 'Message to send'
                     }), disabled: this.props.composerLocked }),
                 react_1.default.createElement("label", { htmlFor: "input-message", style: { display: 'none' } }, placeholder),
-                react_1.default.createElement("div", { className: 'bpw-send-buttons' }, this.props.enableVoiceComposer && (react_1.default.createElement(VoiceRecorder_1.default, { onStart: this.onVoiceStart, onDone: this.onVoiceEnd, onNotAvailable: this.onVoiceNotAvailable }))))));
+                react_1.default.createElement("div", { className: 'bpw-send-buttons' },
+                    this.props.enableVoiceComposer && (react_1.default.createElement(VoiceRecorder_1.default, { onStart: this.onVoiceStart, onDone: this.onVoiceEnd, onNotAvailable: this.onVoiceNotAvailable })),
+                    react_1.default.createElement(ToolTip_1.default, { childId: "btn-send", content: this.props.intl.formatMessage({
+                            id: 'composer.sendMessage',
+                            defaultMessage: 'Send Message'
+                        }) },
+                        react_1.default.createElement("button", { className: 'bpw-send-button', disabled: !this.props.message.length || this.props.composerLocked || this.state.isRecording, onClick: this.props.sendMessage.bind(this, undefined), "aria-label": this.props.intl.formatMessage({
+                                id: 'composer.send',
+                                defaultMessage: 'Send'
+                            }), id: "btn-send" },
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'composer.send' })))))));
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
@@ -108,10 +102,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,
-    isEmulator: store.isEmulator,
     preferredLanguage: store.preferredLanguage
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Composer)));

package/dist/components/Container.d.ts

@@ -9,4 +9,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 export default _default;
 declare type ContainerProps = {
     store?: RootStore;
-} & WrappedComponentProps & Pick<StoreDef, 'config' | 'botName' | 'isFullscreen' | 'isConversationsDisplayed' | 'isBotInfoDisplayed' | 'sideTransition' | 'isInitialized' | 'dimensions' | 'isEmulator' | 'isPoweredByDisplayed' | 'rtl'>;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'botName' | 'isFullscreen' | 'isConversationsDisplayed' | 'isBotInfoDisplayed' | 'sideTransition' | 'isInitialized' | 'dimensions' | 'isPoweredByDisplayed' | 'rtl'>;

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) {
@@ -29,12 +28,11 @@ class Container extends react_1.default.Component {
         }
         else {
             return (react_1.default.createElement("div", { className: (0, classnames_1.default)('bpw-msg-list-container', {
-                    'bpw-emulator': this.props.isEmulator,
                     'bpw-rtl': this.props.rtl
                 }) },
                 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() {
@@ -43,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))));
     }
 }
@@ -58,7 +54,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     isFullscreen: store.view.isFullscreen,
     sideTransition: store.view.sideTransition,
     dimensions: store.view.dimensions,
-    isEmulator: store.isEmulator,
     isInitialized: store.isInitialized,
     isPoweredByDisplayed: store.view.isPoweredByDisplayed,
     config: store.config,

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' | 'isEmulator' | '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

@@ -15,16 +15,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
-// TODO: put this back
-// import confirmDialog from '../../../../../../packages/ui-shared-lite/ConfirmDialog'
-// import MoreOptions from '../../../../../../packages/ui-shared-lite/MoreOptions'
 const Close_1 = __importDefault(require("../icons/Close"));
 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 {
     constructor() {
         super(...arguments);
@@ -65,51 +62,22 @@ 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* () {
-            // TODO: put this back
-            /*
-            if (
-              await confirmDialog(
-                this.props.intl!.formatMessage({
-                  id: 'header.deleteConversation'
-                }),
-                {
-                  acceptLabel: this.props.intl!.formatMessage({
+            if (yield (0, ConfirmDialog_1.default)(this.props.intl.formatMessage({
+                id: 'header.deleteConversation'
+            }), {
+                acceptLabel: this.props.intl.formatMessage({
                     id: 'header.deleteConversationYes'
-                  }),
-                  declineLabel: this.props.intl!.formatMessage({
+                }),
+                declineLabel: this.props.intl.formatMessage({
                     id: 'header.deleteConversationNo'
-                  })
-                }
-              )
-            ) {
-              await this.props.deleteConversation!()
+                })
+            })) {
+                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 });
         };
@@ -120,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() {
@@ -178,12 +142,6 @@ class Header extends react_1.default.Component {
                 action: this.props.deleteConversation
             });
         }
-        if (this.props.isEmulator) {
-            return (react_1.default.createElement("div", { className: "bpw-emulator-header" },
-                react_1.default.createElement("span", { className: "bpw-emulator-header-tab" }, "Emulator"),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("span", { className: "bpw-emulator-buttons" }, this.props.showResetButton && this.renderResetButton()))));
-        }
         return (react_1.default.createElement("div", { className: 'bpw-header-container' },
             react_1.default.createElement("div", { className: 'bpw-header-title-flexbox' },
                 react_1.default.createElement("div", { className: 'bpw-header-title-container' },
@@ -191,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(),
@@ -205,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,
@@ -217,12 +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,
-    isEmulator: store.isEmulator,
-    botConvoDescription: store.config.botConvoDescription,
-    enableArrowNavigation: store.config.enableArrowNavigation
+    botConversationDescription: store.config.botConversationDescription
 }))((0, mobx_react_1.observer)(Header));

package/dist/components/VoiceRecorder.js

@@ -34,6 +34,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const classnames_1 = __importDefault(require("classnames"));
 const lite_1 = __importDefault(require("mime/lite"));
 const react_1 = __importStar(require("react"));
+const Cancel_1 = __importDefault(require("../icons/Cancel"));
+const Microphone_1 = __importDefault(require("../icons/Microphone"));
 const VoiceRecorder = (props) => {
     var _a;
     const [isRecording, setIsRecording] = (0, react_1.useState)(false);
@@ -127,7 +129,9 @@ const VoiceRecorder = (props) => {
         return null;
     }
     return (react_1.default.createElement(react_1.Fragment, null,
-        isRecording && (react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: cancelRecording })),
-        react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: isRecording ? stopRecording : startRecording })));
+        isRecording && (react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: cancelRecording },
+            react_1.default.createElement(Cancel_1.default, { fill: "#ff0000" }))),
+        react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: isRecording ? stopRecording : startRecording },
+            react_1.default.createElement(Microphone_1.default, { fill: isRecording ? '#f1f1f1' : 'black' }))));
 };
 exports.default = VoiceRecorder;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Avatar = ({ name, avatarUrl, height, width }) => {
+    return (react_1.default.createElement("div", { className: 'bpw-bot-avatar' },
+        avatarUrl && react_1.default.createElement("img", { height: height, width: width, src: avatarUrl }),
+        !avatarUrl && (react_1.default.createElement("svg", { width: width, height: width },
+            react_1.default.createElement("text", { textAnchor: 'middle', x: '50%', y: '50%', dy: '0.35em', fill: '#ffffff', fontSize: 15 }, name && name[0])))));
+};
+exports.default = Avatar;

package/dist/components/common/{BotInfo.d.ts → BotInfo/index.d.ts}

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import { WrappedComponentProps } from 'react-intl';
-import { StoreDef } from '../../store';
+import { StoreDef } from '../../../store';
 declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<BotInfoProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
 } & React.RefAttributes<any>> & {
     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

@@ -0,0 +1,102 @@
+"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 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 Email_1 = __importDefault(require("../../../icons/Email"));
+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) || ''}` })));
+class BotInfoPage extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.changeLanguage = (e) => {
+            const lang = e.target.value;
+            this.props.updatePreferredLanguage(lang);
+        };
+    }
+    componentDidMount() {
+        var _a;
+        (_a = this.btnEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    renderDescription(text) {
+        const html = (0, utils_1.renderUnsafeHTML)(text, this.props.escapeHTML);
+        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;
+        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 }),
+                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("div", { className: 'bpw-botinfo-links' },
+                        botInfo.details.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("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("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(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' },
+                    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' }))))));
+    }
+}
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
+    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,
+    rtl: store.rtl
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(BotInfoPage)));

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ConfirmDialogOptions {
+    title?: string;
+    accept?: () => void;
+    decline?: () => void;
+    acceptLabel: string;
+    declineLabel: string;
+    body?: JSX.Element;
+}
+declare const confirmDialog: (message: string, options: ConfirmDialogOptions) => Promise<boolean>;
+export default confirmDialog;