@botpress/webchat 0.0.1 → 0.2.3

package/dist/components/Composer.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { StoreDef } from '../store';
-declare const _default: React.ComponentClass<Pick<{
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ComposerProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<ComposerProps>;
+} & import("mobx-react").IWrappedComponent<unknown>;
+export default _default;
+declare type ComposerProps = {
     focused: boolean;
     composerPlaceholder: string;
     composerLocked: boolean;
     composerHidden: boolean;
-} & Pick<StoreDef, "intl" | "message" | "composerPlaceholder" | "updateMessage" | "recallHistory" | "focusedArea" | "setFocus" | "focusPrevious" | "focusNext" | "currentConversation" | "preferredLanguage" | "botName" | "isEmulator" | "sendMessage" | "resetSession" | "sendVoiceMessage" | "enableArrowNavigation" | "enableResetSessionShortcut" | "enableVoiceComposer">, "message" | "composerPlaceholder" | "updateMessage" | "recallHistory" | "focusedArea" | "setFocus" | "focusPrevious" | "focusNext" | "currentConversation" | "preferredLanguage" | "botName" | "isEmulator" | "sendMessage" | "resetSession" | "sendVoiceMessage" | "enableArrowNavigation" | "enableResetSessionShortcut" | "enableVoiceComposer" | "focused" | "composerLocked" | "composerHidden">, any> & {
-    WrappedComponent: React.ComponentType<{
-        focused: boolean;
-        composerPlaceholder: string;
-        composerLocked: boolean;
-        composerHidden: boolean;
-    } & Pick<StoreDef, "intl" | "message" | "composerPlaceholder" | "updateMessage" | "recallHistory" | "focusedArea" | "setFocus" | "focusPrevious" | "focusNext" | "currentConversation" | "preferredLanguage" | "botName" | "isEmulator" | "sendMessage" | "resetSession" | "sendVoiceMessage" | "enableArrowNavigation" | "enableResetSessionShortcut" | "enableVoiceComposer"> & InjectedIntlProps>;
-} & import("mobx-react").IWrappedComponent<unknown>;
-export default _default;
+} & WrappedComponentProps & Pick<StoreDef, 'botName' | 'composerPlaceholder' | 'intl' | 'focusedArea' | 'sendMessage' | 'sendVoiceMessage' | 'focusPrevious' | 'focusNext' | 'recallHistory' | 'setFocus' | 'updateMessage' | 'message' | 'enableArrowNavigation' | 'resetSession' | 'isEmulator' | 'enableResetSessionShortcut' | 'enableVoiceComposer' | 'currentConversation' | 'preferredLanguage'>;

package/dist/components/Composer.js

@@ -70,7 +70,7 @@ class Composer extends react_1.default.Component {
         setTimeout(() => {
             this.textInput.current.focus();
         }, 50);
-        mobx_1.observe(this.props.focusedArea, (focus) => {
+        (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
             focus.newValue === 'input' && this.textInput.current.focus();
         });
     }
@@ -92,7 +92,7 @@ class Composer extends react_1.default.Component {
                 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 }))))));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     enableVoiceComposer: store.config.enableVoiceComposer,
     message: store.composer.message,
     composerLocked: store.composer.locked,
@@ -114,4 +114,4 @@ exports.default = mobx_react_1.inject(({ store }) => ({
     currentConversation: store.currentConversation,
     isEmulator: store.isEmulator,
     preferredLanguage: store.preferredLanguage
-}))(react_intl_1.injectIntl(mobx_react_1.observer(Composer)));
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Composer)));

package/dist/components/Container.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { RootStore, StoreDef } from '../store';
-declare const _default: React.ComponentClass<Pick<{
-    store?: RootStore | undefined;
-} & Pick<StoreDef, "rtl" | "isFullscreen" | "dimensions" | "isConversationsDisplayed" | "isPoweredByDisplayed" | "isBotInfoDisplayed" | "sideTransition" | "config" | "isInitialized" | "botName" | "isEmulator">, "rtl" | "store" | "isFullscreen" | "dimensions" | "isConversationsDisplayed" | "isPoweredByDisplayed" | "isBotInfoDisplayed" | "sideTransition" | "config" | "isInitialized" | "botName" | "isEmulator">, any> & {
-    WrappedComponent: React.ComponentType<{
-        store?: RootStore | undefined;
-    } & Pick<StoreDef, "rtl" | "isFullscreen" | "dimensions" | "isConversationsDisplayed" | "isPoweredByDisplayed" | "isBotInfoDisplayed" | "sideTransition" | "config" | "isInitialized" | "botName" | "isEmulator"> & InjectedIntlProps>;
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ContainerProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<ContainerProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
+declare type ContainerProps = {
+    store?: RootStore;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'botName' | 'isFullscreen' | 'isConversationsDisplayed' | 'isBotInfoDisplayed' | 'sideTransition' | 'isInitialized' | 'dimensions' | 'isEmulator' | 'isPoweredByDisplayed' | 'rtl'>;

package/dist/components/Container.js

@@ -1,27 +1,9 @@
 "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 messaging_components_1 = require("@botpress/messaging-components");
 const classnames_1 = __importDefault(require("classnames"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
@@ -31,7 +13,6 @@ const Composer_1 = __importDefault(require("./Composer"));
 const ConversationList_1 = __importDefault(require("./ConversationList"));
 const Footer_1 = __importDefault(require("./Footer"));
 const Header_1 = __importDefault(require("./Header"));
-const Keyboard = __importStar(require("./Keyboard"));
 const MessageList_1 = __importDefault(require("./messages/MessageList"));
 const OverridableComponent_1 = __importDefault(require("./OverridableComponent"));
 class Container extends react_1.default.Component {
@@ -47,17 +28,17 @@ class Container extends react_1.default.Component {
             return react_1.default.createElement(BotInfo_1.default, null);
         }
         else {
-            return (react_1.default.createElement("div", { className: classnames_1.default('bpw-msg-list-container', {
+            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(Keyboard.Default, null,
+                react_1.default.createElement(messaging_components_1.Keyboard, null,
                     react_1.default.createElement(OverridableComponent_1.default, { name: 'composer', original: Composer_1.default }))));
         }
     }
     render() {
-        const classNames = classnames_1.default('bpw-layout', 'bpw-chat-container', {
+        const classNames = (0, classnames_1.default)('bpw-layout', 'bpw-chat-container', {
             'bpw-layout-fullscreen': this.props.isFullscreen && 'fullscreen',
             [`bpw-anim-${this.props.sideTransition}`]: true
         });
@@ -70,7 +51,7 @@ class Container extends react_1.default.Component {
                 this.props.isPoweredByDisplayed && react_1.default.createElement(Footer_1.default, null))));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
     isConversationsDisplayed: store.view.isConversationsDisplayed,
     isBotInfoDisplayed: store.view.isBotInfoDisplayed,
@@ -83,4 +64,4 @@ exports.default = mobx_react_1.inject(({ store }) => ({
     config: store.config,
     botName: store.botName,
     rtl: store.rtl
-}))(react_intl_1.injectIntl(mobx_react_1.observer(Container)));
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Container)));

package/dist/components/ConversationList.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { StoreDef } from '../store';
-declare const _default: React.ComponentClass<Pick<Pick<StoreDef, "conversations" | "fetchConversation" | "createConversation" | "enableArrowNavigation">, "conversations" | "fetchConversation" | "createConversation" | "enableArrowNavigation">, any> & {
-    WrappedComponent: React.ComponentType<Pick<StoreDef, "conversations" | "fetchConversation" | "createConversation" | "enableArrowNavigation"> & InjectedIntlProps>;
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<ConversationListProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<ConversationListProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
+declare type ConversationListProps = WrappedComponentProps & Pick<StoreDef, 'conversations' | 'fetchConversation' | 'createConversation' | 'enableArrowNavigation'>;

package/dist/components/ConversationList.js

@@ -3,14 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const intl_utils_1 = require("@formatjs/intl-utils");
 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 = react_intl_1.injectIntl(({ conversation, onClick, hasFocus, intl }) => {
+const ConversationListItem = (0, react_intl_1.injectIntl)(({ conversation, onClick, hasFocus, intl }) => {
     var _a, _b, _c;
     const title = intl.formatMessage({ id: 'conversationList.title' }, { id: conversation.id });
-    const date = intl.formatRelative(((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.sentOn) || conversation.createdOn);
+    const { value, unit } = (0, intl_utils_1.selectUnit)(new Date(((_a = conversation.lastMessage) === null || _a === void 0 ? void 0 : _a.sentOn) || conversation.createdOn));
+    const date = intl.formatRelativeTime(value, unit);
     const message = ((_c = (_b = conversation.lastMessage) === null || _b === void 0 ? void 0 : _b.payload) === null || _c === void 0 ? void 0 : _c.text) || '...';
     return (react_1.default.createElement("div", { className: 'bpw-convo-item', onClick: onClick },
         react_1.default.createElement("div", { className: 'bpw-align-right' },
@@ -72,9 +74,9 @@ class ConversationList extends react_1.default.Component {
                 react_1.default.createElement(Add_1.default, { width: 15, height: 15 }))));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     conversations: store.conversations,
     createConversation: store.createConversation,
     fetchConversation: store.fetchConversation,
     enableArrowNavigation: store.config.enableArrowNavigation
-}))(react_intl_1.injectIntl(mobx_react_1.observer(ConversationList)));
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(ConversationList)));

package/dist/components/Header.js

@@ -115,7 +115,7 @@ class Header extends react_1.default.Component {
         };
     }
     componentDidMount() {
-        mobx_1.observe(this.props.focusedArea, (focus) => {
+        (0, mobx_1.observe)(this.props.focusedArea, (focus) => {
             focus.newValue === 'header' && this.changeButtonFocus(1);
         });
     }
@@ -198,7 +198,7 @@ class Header extends react_1.default.Component {
             this.props.showCloseButton && this.renderCloseButton()));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     intl: store.intl,
     isConversationsDisplayed: store.view.isConversationsDisplayed,
     showDeleteConversationButton: store.view.showDeleteConversationButton,
@@ -225,4 +225,4 @@ exports.default = mobx_react_1.inject(({ store }) => ({
     isEmulator: store.isEmulator,
     botConvoDescription: store.config.botConvoDescription,
     enableArrowNavigation: store.config.enableArrowNavigation
-}))(mobx_react_1.observer(Header));
+}))((0, mobx_react_1.observer)(Header));

package/dist/components/OverridableComponent.js

@@ -44,7 +44,7 @@ class OverridableComponent extends react_1.default.Component {
             : null;
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
     overrides: store.config.overrides
 }))(OverridableComponent);

package/dist/components/VoiceRecorder.js

@@ -36,12 +36,12 @@ const lite_1 = __importDefault(require("mime/lite"));
 const react_1 = __importStar(require("react"));
 const VoiceRecorder = (props) => {
     var _a;
-    const [isRecording, setIsRecording] = react_1.useState(false);
-    const mediaRecorder = react_1.useRef(null);
-    const mediaChunks = react_1.useRef([]);
-    const mediaStream = react_1.useRef(null);
-    const isCancelled = react_1.useRef(false);
-    const getMediaStream = react_1.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    const [isRecording, setIsRecording] = (0, react_1.useState)(false);
+    const mediaRecorder = (0, react_1.useRef)(null);
+    const mediaChunks = (0, react_1.useRef)([]);
+    const mediaStream = (0, react_1.useRef)(null);
+    const isCancelled = (0, react_1.useRef)(false);
+    const getMediaStream = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         var _b;
         try {
             const stream = yield window.navigator.mediaDevices.getUserMedia({ audio: true, video: false });
@@ -52,7 +52,7 @@ const VoiceRecorder = (props) => {
             (_b = props.onNotAvailable) === null || _b === void 0 ? void 0 : _b.call(props);
         }
     }), []);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         return () => {
             var _a, _b, _c, _d;
             (_a = mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('dataavailable', onResult);
@@ -127,7 +127,7 @@ const VoiceRecorder = (props) => {
         return null;
     }
     return (react_1.default.createElement(react_1.Fragment, null,
-        isRecording && (react_1.default.createElement("button", { className: classnames_1.default('bpw-send-button', props.className), onClick: cancelRecording })),
-        react_1.default.createElement("button", { className: 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("button", { className: (0, classnames_1.default)('bpw-send-button', props.className), onClick: isRecording ? stopRecording : startRecording })));
 };
 exports.default = VoiceRecorder;

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { StoreDef } from '../../store';
-declare const _default: React.ComponentClass<Pick<Pick<StoreDef, "rtl" | "toggleBotInfo" | "botInfo" | "preferredLanguage" | "isConversationStarted" | "botName" | "escapeHTML" | "startConversation" | "updatePreferredLanguage" | "enableArrowNavigation" | "avatarUrl">, "rtl" | "toggleBotInfo" | "botInfo" | "preferredLanguage" | "isConversationStarted" | "botName" | "escapeHTML" | "startConversation" | "updatePreferredLanguage" | "enableArrowNavigation" | "avatarUrl">, any> & {
-    WrappedComponent: React.ComponentType<Pick<StoreDef, "rtl" | "toggleBotInfo" | "botInfo" | "preferredLanguage" | "isConversationStarted" | "botName" | "escapeHTML" | "startConversation" | "updatePreferredLanguage" | "enableArrowNavigation" | "avatarUrl"> & InjectedIntlProps>;
+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'>;

package/dist/components/common/BotInfo.js

@@ -56,13 +56,13 @@ class BotInfoPage extends React.Component {
         (_a = this.btnEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     renderDescription(text) {
-        const html = utils_1.renderUnsafeHTML(text, this.props.escapeHTML);
+        const html = (0, utils_1.renderUnsafeHTML)(text, this.props.escapeHTML);
         return React.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.createElement("div", { className: classnames_1.default('bpw-botinfo-container', {
+        return (React.createElement("div", { className: (0, classnames_1.default)('bpw-botinfo-container', {
                 'bpw-rtl': this.props.rtl
             }) },
             React.createElement(CoverPicture, { botInfo: botInfo }),
@@ -96,7 +96,7 @@ class BotInfoPage extends React.Component {
             React.createElement("button", { tabIndex: 1, ref: (el) => (this.btnEl = el), className: 'bpw-botinfo-start-button', onClick: onDismiss.bind(this, undefined) }, this.props.isConversationStarted ? (React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.backToConversation' })) : (React.createElement(react_intl_1.FormattedMessage, { id: 'botInfo.startConversation' })))));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     botName: store.botName,
     botInfo: store.botInfo,
     avatarUrl: store.botAvatarUrl,
@@ -107,4 +107,4 @@ exports.default = mobx_react_1.inject(({ store }) => ({
     preferredLanguage: store.preferredLanguage,
     escapeHTML: store.escapeHTML,
     rtl: store.rtl
-}))(react_intl_1.injectIntl(mobx_react_1.observer(BotInfoPage)));
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(BotInfoPage)));

package/dist/components/messages/InlineFeedback.js

@@ -27,8 +27,8 @@ const react_1 = __importStar(require("react"));
 const ThumbsDown_1 = __importDefault(require("../../icons/ThumbsDown"));
 const ThumbsUp_1 = __importDefault(require("../../icons/ThumbsUp"));
 const InlineFeedback = ({ messageFeedbacks, messageId, onFeedback, intl }) => {
-    const [feedbackSent, setFeedbackSent] = react_1.useState(false);
-    react_1.useEffect(() => {
+    const [feedbackSent, setFeedbackSent] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         if (messageFeedbacks && messageFeedbacks.find((x) => x.messageId === messageId && x.feedback != null)) {
             setFeedbackSent(true);
         }

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

@@ -1,8 +1,11 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { StoreDef } from '../../store';
 import { Renderer } from '../../typings';
-declare const _default: React.ComponentClass<Pick<Renderer.Message & Pick<StoreDef, "intl">, keyof Renderer.Message>, any> & {
-    WrappedComponent: React.ComponentType<Renderer.Message & Pick<StoreDef, "intl"> & InjectedIntlProps>;
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<MessageProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<MessageProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
+declare type MessageProps = Renderer.Message & WrappedComponentProps & Pick<StoreDef, 'intl'>;

package/dist/components/messages/Message.js

@@ -31,13 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const messaging_components_1 = __importDefault(require("@botpress/messaging-components"));
 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");
-const renderer_1 = require("./renderer");
-const Dropdown_1 = require("./renderer/Dropdown");
 class Message extends react_1.Component {
     constructor() {
         super(...arguments);
@@ -46,101 +45,12 @@ class Message extends react_1.Component {
             showMore: false
         };
         this.handleContextMenu = (e) => {
-            ContextMenu_1.showContextMenu(e, this.props);
+            (0, ContextMenu_1.showContextMenu)(e, this.props);
         };
     }
     static getDerivedStateFromError(_error) {
         return { hasError: true };
     }
-    render_text(textMessage) {
-        const { text, markdown } = this.props.payload;
-        const message = textMessage || text;
-        return (react_1.default.createElement(renderer_1.Text, { markdown: markdown, text: message, intl: this.props.intl, maxLength: this.props.payload.trimLength, escapeHTML: this.props.store.escapeHTML }));
-    }
-    render_quick_reply() {
-        return this.render_text();
-    }
-    render_login_prompt() {
-        return (react_1.default.createElement(renderer_1.LoginPrompt, { isLastMessage: this.props.isLastGroup && this.props.isLastOfGroup, isBotMessage: this.props.isBotMessage, onSendData: this.props.onSendData }));
-    }
-    render_carousel() {
-        return react_1.default.createElement(renderer_1.Carousel, { onSendData: this.props.onSendData, carousel: this.props.payload });
-    }
-    render_typing() {
-        return (react_1.default.createElement("div", { className: 'bpw-typing-group' },
-            react_1.default.createElement("div", { className: 'bpw-typing-bubble' }),
-            react_1.default.createElement("div", { className: 'bpw-typing-bubble' }),
-            react_1.default.createElement("div", { className: 'bpw-typing-bubble' })));
-    }
-    render_audio() {
-        return react_1.default.createElement(renderer_1.FileMessage, { file: this.props.payload, escapeTextHTML: this.props.store.escapeHTML });
-    }
-    render_video() {
-        return react_1.default.createElement(renderer_1.FileMessage, { file: this.props.payload, escapeTextHTML: this.props.store.escapeHTML });
-    }
-    render_image() {
-        return react_1.default.createElement(renderer_1.FileMessage, { file: this.props.payload, escapeTextHTML: this.props.store.escapeHTML });
-    }
-    render_file() {
-        return react_1.default.createElement(renderer_1.FileMessage, { file: this.props.payload, escapeTextHTML: this.props.store.escapeHTML });
-    }
-    render_voice() {
-        return (react_1.default.createElement(renderer_1.VoiceMessage, { file: this.props.payload, shouldPlay: this.props.shouldPlay, onAudioEnded: this.props.onAudioEnded }));
-    }
-    render_custom() {
-        // This doesn't work at the moment. We can't get the InjectedModuleView
-        /*
-        const { module = undefined, component = undefined, wrapped = undefined } = this.props.payload || {}
-        if (!module || !component) {
-          return this.render_unsupported()
-        }
-    
-        // TODO: Remove eventually, it's for backward compatibility
-        if (module === 'extensions' && component === 'Dropdown') {
-          return this.render_dropdown()
-        }
-    
-        const InjectedModuleView = this.props.store!.bp.getModuleInjector()
-    
-        const messageDataProps = { ...this.props.payload }
-        delete messageDataProps.module
-        delete messageDataProps.component
-    
-        const sanitizedProps = pick(this.props, [
-          'messageId',
-          'isLastGroup',
-          'isLastOfGroup',
-          'isBotMessage',
-          'onSendData',
-          'onFileUpload',
-          'sentOn',
-          'store',
-          'className',
-          'intl'
-        ])
-    
-        const props = {
-          ...sanitizedProps,
-          ...messageDataProps,
-          keyboard: Keyboard,
-          children: wrapped && <Message {...sanitizedProps} keyboard={Keyboard} noBubble payload={wrapped} />
-        }
-    
-        return <InjectedModuleView moduleName={module} componentName={component} lite extraProps={props} />
-        */
-    }
-    render_session_reset() {
-        return this.render_text(this.props.store.intl.formatMessage({ id: 'store.resetSessionMessage' }));
-    }
-    render_visit() {
-        return null;
-    }
-    render_unsupported() {
-        return '*Unsupported message type*';
-    }
-    render_dropdown() {
-        return react_1.default.createElement(Dropdown_1.Dropdown, Object.assign({}, this.props, this.props.payload, { escapeHTML: this.props.store.escapeHTML }));
-    }
     renderTimestamp() {
         return (react_1.default.createElement("span", { className: "bpw-message-timestamp" }, this.props.store.intl.formatTime(new Date(this.props.sentOn), { hour: 'numeric', minute: 'numeric' })));
     }
@@ -156,18 +66,33 @@ class Message extends react_1.Component {
         }
         const type = this.props.type || (this.props.payload && this.props.payload.type);
         const wrappedType = this.props.payload && this.props.payload.wrapped && this.props.payload.wrapped.type;
-        const renderer = (this[`render_${type}`] || this.render_unsupported).bind(this);
         const wrappedClass = `bpw-bubble-${wrappedType}`;
         const isEmulator = this.props.store.config.isEmulator;
-        const rendered = renderer();
+        const rendered = (react_1.default.createElement(messaging_components_1.default, { key: this.props.messageId, content: this.props.payload, config: {
+                messageId: this.props.messageId,
+                noMessageBubble: this.props.noBubble,
+                isLastOfGroup: this.props.isLastOfGroup,
+                isLastGroup: this.props.isLastGroup,
+                isBotMessage: this.props.isBotMessage,
+                sentOn: this.props.sentOn,
+                onSendData: this.props.onSendData,
+                onFileUpload: this.props.onFileUpload,
+                store: this.props.store,
+                onAudioEnded: this.props.onAudioEnded,
+                shouldPlay: this.props.shouldPlay,
+                intl: this.props.store.intl,
+                escapeHTML: true,
+                isInEmulator: this.props.store.config.isEmulator,
+                showTimestamp: this.props.store.config.showTimestamp
+            } }));
         if (rendered === null) {
             return null;
         }
         const additionalStyle = (this.props.payload && this.props.payload['web-style']) || {};
         if (this.props.noBubble || ((_b = (_a = this.props.payload) === null || _a === void 0 ? void 0 : _a.wrapped) === null || _b === void 0 ? void 0 : _b.noBubble)) {
-            return (react_1.default.createElement("div", { className: 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), style: additionalStyle }, rendered));
         }
-        return (react_1.default.createElement("div", { className: classnames_1.default(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`, {
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`, {
                 'bpw-bubble-highlight': this.props.isHighlighted,
                 'bpw-msg-hovering': isEmulator
             }), "data-from": this.props.fromLabel, onClick: () => this.onMessageClicked(), tabIndex: -1, style: additionalStyle },
@@ -181,6 +106,6 @@ class Message extends react_1.Component {
             this.props.inlineFeedback));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     intl: store.intl
-}))(react_intl_1.injectIntl(mobx_react_1.observer(Message)));
+}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Message)));

package/dist/components/messages/MessageGroup.js

@@ -66,7 +66,7 @@ class MessageGroup extends react_1.default.Component {
         if (this.state.hasError) {
             return '* Cannot display message *';
         }
-        return (react_1.default.createElement("div", { role: "main", className: classnames_1.default('bpw-message-big-container', {
+        return (react_1.default.createElement("div", { role: "main", className: (0, classnames_1.default)('bpw-message-big-container', {
                 'bpw-from-user': !isBot,
                 'bpw-from-bot': isBot
             }) },
@@ -75,23 +75,15 @@ class MessageGroup extends react_1.default.Component {
                 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),
-                    sortBy_1.default(messages, ['sent_on', 'eventId']).map((message, i, messages) => {
+                    (0, sortBy_1.default)(messages, ['sent_on', 'eventId']).map((message, i, messages) => {
                         const isLastMsg = i === messages.length - 1;
                         const payload = this.convertPayloadFromOldFormat(message);
-                        /*
-                        // TODO: use the components package
-                        if (payload?.wrapped) {
-                          payload = { ...payload, wrapped: renderPayload(payload.wrapped) }
-                        } else {
-                          payload = renderPayload(payload)
-                        }
-                        */
                         const showInlineFeedback = isBot && isLastMsg && (payload.wrapped ? payload.wrapped.collectFeedback : payload.collectFeedback);
-                        return (react_1.default.createElement(Message_1.default, { key: message.id, isHighlighted: this.props.highlightedMessages && this.props.highlightedMessages.includes(message.id), 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}`, isHighlighted: this.props.highlightedMessages && this.props.highlightedMessages.includes(message.id), 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 }));
                     })))));
     }
 }
-exports.default = mobx_react_1.inject(({ store }) => ({
+exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
     onFeedback: store.sendFeedback,
     onSendData: store.sendData,

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

@@ -1,7 +1,10 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl';
 import { StoreDef } from '../../store';
-declare const _default: React.ComponentClass<Pick<Pick<StoreDef, "intl" | "focusedArea" | "focusPrevious" | "focusNext" | "preferredLanguage" | "isBotTyping" | "botName" | "isEmulator" | "botAvatarUrl" | "currentMessages" | "showUserAvatar" | "enableArrowNavigation">, "focusedArea" | "focusPrevious" | "focusNext" | "preferredLanguage" | "isBotTyping" | "botName" | "isEmulator" | "botAvatarUrl" | "currentMessages" | "showUserAvatar" | "enableArrowNavigation">, any> & {
-    WrappedComponent: React.ComponentType<Pick<StoreDef, "intl" | "focusedArea" | "focusPrevious" | "focusNext" | "preferredLanguage" | "isBotTyping" | "botName" | "isEmulator" | "botAvatarUrl" | "currentMessages" | "showUserAvatar" | "enableArrowNavigation"> & InjectedIntlProps>;
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<MessageListProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<MessageListProps>;
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
+declare type MessageListProps = WrappedComponentProps & Pick<StoreDef, 'intl' | 'isBotTyping' | 'focusedArea' | 'focusPrevious' | 'focusNext' | 'botAvatarUrl' | 'isEmulator' | 'botName' | 'enableArrowNavigation' | 'showUserAvatar' | 'currentMessages' | 'preferredLanguage'>;