@botpress/webchat 0.2.3 → 0.2.4

package/dist/components/Composer.d.ts

@@ -12,4 +12,4 @@ declare type ComposerProps = {
     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'>;
+} & WrappedComponentProps & Pick<StoreDef, 'botName' | 'composerPlaceholder' | 'intl' | 'focusedArea' | 'sendMessage' | 'sendVoiceMessage' | 'focusPrevious' | 'focusNext' | 'recallHistory' | 'setFocus' | 'updateMessage' | 'message' | 'enableArrowNavigation' | 'resetSession' | 'enableResetSessionShortcut' | 'enableVoiceComposer' | 'currentConversation' | 'preferredLanguage'>;

package/dist/components/Composer.js

@@ -16,6 +16,7 @@ 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) {
@@ -89,7 +90,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 }) => ({
@@ -112,6 +123,5 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     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

@@ -29,7 +29,6 @@ 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),
@@ -58,7 +57,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/ContextMenu.js

@@ -15,15 +15,6 @@ function MessageMenu(props) {
 }
 const showContextMenu = (e, props) => {
     const customActions = props.store.view.customActions;
-    if (props.store.config.isEmulator) {
-        customActions.push({
-            id: 'actionDebug',
-            label: 'Inspect in Debugger',
-            onClick: (_actionId, props) => {
-                props.store.loadEventInDebugger(props.incomingEventId, true);
-            }
-        });
-    }
     if (customActions && props.incomingEventId) {
         e.preventDefault();
         const menu = react_1.default.createElement(MessageMenu, { element: props, customActions: customActions });

package/dist/components/Header.d.ts

@@ -25,4 +25,4 @@ declare class Header extends React.Component<HeaderProps> {
 }
 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' | 'resetSession' | 'downloadConversation' | 'toggleConversations' | 'hideChat' | 'toggleBotInfo' | 'botAvatarUrl' | 'showResetButton' | 'showDeleteConversationButton' | 'showDownloadButton' | 'showConversationsButton' | 'showBotInfoButton' | 'showCloseButton' | 'enableArrowNavigation' | 'botConvoDescription' | 'customButtons'>;

package/dist/components/Header.js

@@ -15,9 +15,6 @@ 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"));
@@ -25,6 +22,7 @@ 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);
@@ -68,26 +66,18 @@ class Header extends react_1.default.Component {
                 this.props.hasBotInfoDescription && (react_1.default.createElement("div", { className: 'bpw-header-subtitle' }, this.props.botConvoDescription))));
         };
         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) {
@@ -178,12 +168,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' },
@@ -222,7 +206,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     botName: store.botName,
     botAvatarUrl: store.botAvatarUrl,
     hasBotInfoDescription: store.hasBotInfoDescription,
-    isEmulator: store.isEmulator,
     botConvoDescription: store.config.botConvoDescription,
     enableArrowNavigation: store.config.enableArrowNavigation
 }))((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,6 +1,6 @@
-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>> & {

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

@@ -0,0 +1,112 @@
+"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 __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 };
+};
+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.details && botInfo.details.coverPictureUrl) ||
+            `https://via.placeholder.com/400x175?text=${botInfo.name}` })));
+class BotInfoPage extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.changeLanguage = (e) => __awaiter(this, void 0, void 0, function* () {
+            const lang = e.target.value;
+            yield 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;

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

@@ -0,0 +1,78 @@
+"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 core_1 = require("@blueprintjs/core");
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const Dialog_1 = require("../Dialog");
+const styles = __importStar(require("./style.module.scss"));
+const ConfirmDialogComponent = (props) => {
+    const onAccept = () => {
+        var _a;
+        removeDialog();
+        (_a = props.accept) === null || _a === void 0 ? void 0 : _a.call(props);
+        props.resolve(true);
+    };
+    const onDecline = () => {
+        var _a;
+        removeDialog();
+        (_a = props.decline) === null || _a === void 0 ? void 0 : _a.call(props);
+        props.resolve(false);
+    };
+    return (react_1.default.createElement(Dialog_1.Wrapper, { icon: "warning-sign", usePortal: false, isOpen: true, onClose: onDecline, size: "sm" },
+        react_1.default.createElement(Dialog_1.Body, null,
+            react_1.default.createElement(core_1.Icon, { icon: "warning-sign", iconSize: 32, className: styles.icon }),
+            react_1.default.createElement("div", null,
+                props.message,
+                props.body)),
+        react_1.default.createElement(Dialog_1.Footer, null,
+            react_1.default.createElement(core_1.Button, { id: "confirm-dialog-decline", className: core_1.Classes.BUTTON, type: "button", onClick: onDecline, text: props.declineLabel, tabIndex: 2, intent: core_1.Intent.NONE }),
+            react_1.default.createElement(core_1.Button, { id: "confirm-dialog-accept", className: core_1.Classes.BUTTON, type: "button", autoFocus: true, onClick: onAccept, text: props.acceptLabel, tabIndex: 3, intent: core_1.Intent.WARNING }))));
+};
+const defaultConfirmOptions = {
+    title: '',
+    accept: () => { },
+    acceptLabel: 'Confirm',
+    decline: () => { },
+    declineLabel: 'Decline'
+};
+const confirmDialog = (message, options) => {
+    return new Promise((resolve, _reject) => {
+        addDialog(Object.assign(Object.assign(Object.assign({ message }, defaultConfirmOptions), options), { isOpen: false, resolve }));
+    });
+};
+function addDialog(props) {
+    const body = document.getElementsByTagName('body')[0];
+    const div = document.createElement('div');
+    div.setAttribute('id', 'confirmDialog-container');
+    div.setAttribute('class', styles.ConfirmDialogContainer);
+    body.appendChild(div);
+    react_dom_1.default.render(react_1.default.createElement(ConfirmDialogComponent, Object.assign({}, props)), div);
+}
+function removeDialog() {
+    const div = document.getElementById('confirmDialog-container');
+    const body = document.getElementsByTagName('body')[0];
+    body.removeChild(div);
+}
+exports.default = confirmDialog;

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

@@ -0,0 +1,17 @@
+import { IDialogProps } from '@blueprintjs/core';
+import { FC } from 'react';
+export interface DialogProps extends IDialogProps {
+    onSubmit?: () => void;
+    children: JSX.Element | JSX.Element[];
+    isOpen: boolean;
+    height?: number;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Wrapper: FC<DialogProps>;
+export declare const Body: ({ children, className }: {
+    children: JSX.Element | JSX.Element[];
+    className?: string | undefined;
+}) => JSX.Element;
+export declare const Footer: ({ children }: {
+    children: JSX.Element | JSX.Element[];
+}) => JSX.Element;

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

@@ -0,0 +1,57 @@
+"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 });
+exports.Footer = exports.Body = exports.Wrapper = void 0;
+const core_1 = require("@blueprintjs/core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const style = __importStar(require("./style.module.scss"));
+const Wrapper = (props) => {
+    let width = 500;
+    if (props.size === 'sm') {
+        width = 360;
+    }
+    else if (props.size === 'md') {
+        width = 700;
+    }
+    else if (props.size === 'lg') {
+        width = 900;
+    }
+    const onSubmit = (e) => {
+        var _a;
+        e.preventDefault();
+        (_a = props.onSubmit) === null || _a === void 0 ? void 0 : _a.call(props);
+    };
+    return (react_1.default.createElement(core_1.Dialog, Object.assign({ className: style.dialog, transitionDuration: 0, canOutsideClickClose: false, enforceFocus: false, style: { width, height: props.height } }, props), props.onSubmit ? (react_1.default.createElement("form", { className: style.form, onSubmit: onSubmit }, props.children)) : (props.children)));
+};
+exports.Wrapper = Wrapper;
+const Body = ({ children, className }) => {
+    return react_1.default.createElement("div", { className: (0, classnames_1.default)(core_1.Classes.DIALOG_BODY, core_1.Classes.UI_TEXT, style.dialogBody, className) }, children);
+};
+exports.Body = Body;
+const Footer = ({ children }) => {
+    return (react_1.default.createElement("div", { className: core_1.Classes.DIALOG_FOOTER },
+        react_1.default.createElement("div", { className: core_1.Classes.DIALOG_FOOTER_ACTIONS }, children)));
+};
+exports.Footer = Footer;

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

@@ -0,0 +1,21 @@
+import { IconName } from '@blueprintjs/core';
+import { FC } from 'react';
+interface MoreOptionsProps {
+    show: boolean;
+    onToggle: (value: boolean) => void;
+    children?: any;
+    className?: string;
+    element?: JSX.Element;
+    items: MoreOptionsItems[];
+}
+export interface MoreOptionsItems {
+    icon?: IconName;
+    label: string;
+    className?: string;
+    selected?: boolean;
+    content?: JSX.Element;
+    action?: () => void;
+    type?: 'delete';
+}
+declare const MoreOptions: FC<MoreOptionsProps>;
+export default MoreOptions;

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

@@ -0,0 +1,60 @@
+"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 core_1 = require("@blueprintjs/core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Overlay_1 = __importDefault(require("../Overlay"));
+const style = __importStar(require("./style.module.scss"));
+const MoreOptions = (props) => {
+    const { show, onToggle, className, items, element } = props;
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggle(!show);
+    };
+    const onAction = (e, action) => {
+        e.stopPropagation();
+        onToggle(false);
+        action();
+    };
+    return (react_1.default.createElement(react_1.Fragment, null,
+        !element && (react_1.default.createElement("button", { onClick: handleToggle, type: "button", className: (0, classnames_1.default)(style.moreBtn, 'more-options-btn', { [style.active]: show }) },
+            react_1.default.createElement("span", { className: style.moreBtnDots }))),
+        element,
+        show && (react_1.default.createElement("ul", { className: (0, classnames_1.default)(style.moreMenu, 'more-options-more-menu', className) }, items.map((item, index) => {
+            const { action, className, content, icon, label, type, selected } = item;
+            return (react_1.default.createElement("li", { key: index, className: className }, content ? (content) : (react_1.default.createElement(react_1.Fragment, null,
+                action && (react_1.default.createElement(core_1.Button, { icon: icon, minimal: true, className: (0, classnames_1.default)(style.moreMenuItem, {
+                        [style.delete]: type === 'delete',
+                        ['more-options-selected-option']: selected
+                    }), onClick: (e) => onAction(e, action) },
+                    label,
+                    selected && react_1.default.createElement(core_1.Icon, { icon: "tick", iconSize: 12 }))),
+                !action && (react_1.default.createElement("span", { className: (0, classnames_1.default)(style.moreMenuItem, style.noHover, { [style.delete]: type === 'delete' }) },
+                    react_1.default.createElement(core_1.Icon, { icon: icon, iconSize: 16 }),
+                    label))))));
+        }))),
+        show && react_1.default.createElement(Overlay_1.default, { onClick: handleToggle })));
+};
+exports.default = MoreOptions;

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

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+export interface OverlayProps {
+    onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onContextMenu?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+declare const Overlay: FC<OverlayProps>;
+export default Overlay;

package/dist/components/common/{Avatar.js → Overlay/index.js}

@@ -18,12 +18,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Avatar = ({ name, avatarUrl, height, width }) => {
-    return (React.createElement("div", { className: 'bpw-bot-avatar' },
-        avatarUrl && React.createElement("img", { height: height, width: width, src: avatarUrl }),
-        !avatarUrl && (React.createElement("svg", { width: width, height: width },
-            React.createElement("text", { textAnchor: 'middle', x: '50%', y: '50%', dy: '0.35em', fill: '#ffffff', fontSize: 15 }, name && name[0])))));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.default = Avatar;
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const style = __importStar(require("./style.module.scss"));
+const Overlay = ({ onClick, onContextMenu }) => (react_1.default.createElement("div", { onContextMenu: (e) => {
+        e.preventDefault();
+        e.persist();
+        if (!onContextMenu) {
+            onClick(e);
+            return;
+        }
+        onContextMenu(e);
+    }, className: style.overlay, onClick: onClick }));
+exports.default = Overlay;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface ToolTipProps {
+    hoverOpenDelay?: number;
+    children: JSX.Element;
+    content?: string | JSX.Element;
+    position?: string;
+    childId?: string;
+}
+declare const ToolTip: FC<ToolTipProps>;
+export default ToolTip;