@botpress/webchat 0.2.3 → 0.3.0

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/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;

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

@@ -0,0 +1,163 @@
+"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 uniqueId_1 = __importDefault(require("lodash/uniqueId"));
+const react_1 = __importStar(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const style = __importStar(require("./style.module.scss"));
+const utils_1 = require("./utils");
+const ToolTip = ({ childId, children, content, position = 'top', hoverOpenDelay }) => {
+    if (!content) {
+        return children;
+    }
+    const id = (0, react_1.useRef)(`botpress-tooltip-${(0, uniqueId_1.default)()}`);
+    const timeout = (0, react_1.useRef)(undefined);
+    const tooltipRef = (0, react_1.useRef)(null);
+    const tipRef = (0, react_1.useRef)(null);
+    const pastShow = (el) => {
+        var _a;
+        const elementRect = el.getBoundingClientRect();
+        const tooltipRect = (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!tooltipRect) {
+            return;
+        }
+        const docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight;
+        const rx = elementRect.x + elementRect.width; // most right x
+        const lx = elementRect.x; // most left x
+        const ty = elementRect.y; // most top y
+        const by = elementRect.y + elementRect.height; // most bottom y
+        const overflowYMiddle = (tooltipRect.height - elementRect.height) / 2;
+        let overflowXMiddle = (tooltipRect.width - elementRect.width) / 2;
+        overflowXMiddle = overflowXMiddle < 0 ? 0 : overflowXMiddle;
+        const canBeXMiddle = rx + overflowXMiddle <= docWidth && lx - overflowXMiddle >= 0;
+        const canBeRight = rx + tooltipRect.width <= docWidth;
+        const canBeLeft = lx - tooltipRect.width >= 0;
+        const canBeYMiddle = ty - overflowYMiddle >= 0 && by + overflowYMiddle <= docHeight;
+        const canBeAbove = ty - tooltipRect.height >= 0;
+        const canBeBellow = by + tooltipRect.height <= docHeight;
+        let xClass = '';
+        let yClass = '';
+        switch (position) {
+            case 'top':
+                yClass = 'top';
+                if (!canBeAbove) {
+                    yClass = 'bottom';
+                }
+                xClass = (0, utils_1.checkXPosition)(canBeXMiddle, canBeLeft);
+                break;
+            case 'bottom':
+                yClass = 'bottom';
+                if (!canBeBellow) {
+                    yClass = 'top';
+                }
+                xClass = (0, utils_1.checkXPosition)(canBeXMiddle, canBeLeft);
+                break;
+            case 'left':
+                xClass = 'left';
+                if (!canBeLeft) {
+                    xClass = 'right';
+                }
+                yClass = (0, utils_1.checkYPosition)(canBeYMiddle, canBeAbove);
+                break;
+            case 'right':
+                xClass = 'right';
+                if (!canBeRight) {
+                    xClass = 'left';
+                }
+                yClass = (0, utils_1.checkYPosition)(canBeYMiddle, canBeAbove);
+                break;
+        }
+        const { left, top } = (0, utils_1.getPositions)({ xClass, yClass }, el, tooltipRef.current);
+        const tipPos = (0, utils_1.tipPosition)({ xClass, yClass }, el);
+        const inlineStyle = {
+            left: `${left}px`,
+            top: `${top}px`
+        };
+        setTimeout(() => {
+            var _a, _b, _c;
+            (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.classList.add(style.visible);
+            if (xClass) {
+                (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(xClass);
+            }
+            if (yClass) {
+                (_c = tooltipRef.current) === null || _c === void 0 ? void 0 : _c.classList.add(yClass);
+            }
+            if (tooltipRef.current) {
+                tooltipRef.current.style.left = inlineStyle.left;
+                tooltipRef.current.style.top = inlineStyle.top;
+            }
+            if (tipRef.current) {
+                tipRef.current.style.left = tipPos.left;
+                tipRef.current.style.right = tipPos.right;
+            }
+        }, hoverOpenDelay || 0);
+    };
+    const show = (event) => {
+        document.addEventListener('mousemove', mouseMove);
+        clearTimeout(timeout.current);
+        handleHtmlRendering();
+        pastShow(event.currentTarget);
+    };
+    const mouseMove = (event) => {
+        var _a;
+        if (!((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest(`#${childId || `${id.current}-trigger`}`))) {
+            hide();
+        }
+    };
+    const handleHtmlRendering = (classNames = '', inlineStyle = {}, tipPos = {}) => {
+        const body = document.getElementsByTagName('body')[0];
+        const toolTip = document.getElementById(id.current);
+        const div = document.createElement('div');
+        div.setAttribute('id', id.current);
+        if (toolTip) {
+            body.replaceChild(div, toolTip);
+        }
+        else {
+            body.appendChild(div);
+        }
+        react_dom_1.default.render(react_1.default.createElement("div", { ref: tooltipRef, className: (0, classnames_1.default)(style.tooltip, classNames), style: inlineStyle },
+            react_1.default.createElement("div", { ref: tipRef, className: "tooltipArrow", style: tipPos }),
+            react_1.default.createElement("div", { className: "tooltipInner" }, content)), div);
+    };
+    const hide = (_event) => {
+        var _a;
+        document.removeEventListener('mousemove', mouseMove);
+        (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove(style.visible);
+        const body = document.getElementsByTagName('body')[0];
+        clearTimeout(timeout.current);
+        timeout.current = window.setTimeout(() => {
+            const div = document.getElementById(id.current);
+            if (div) {
+                body.removeChild(div);
+            }
+        }, 300);
+    };
+    return react_1.default.cloneElement(react_1.default.Children.only(children), {
+        id: childId || `${id.current}-trigger`,
+        onMouseEnter: show,
+        onMouseLeave: hide
+    });
+};
+exports.default = ToolTip;

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

@@ -0,0 +1,15 @@
+interface PositionClasses {
+    xClass: string;
+    yClass: string;
+}
+export declare const getPositions: (positionClasses: PositionClasses, el: EventTarget & Element, tooltip: HTMLDivElement | null) => {
+    left: number;
+    top: number;
+};
+export declare const tipPosition: (positionClasses: PositionClasses, el: Element & EventTarget) => {
+    left: string;
+    right: string;
+};
+export declare const checkXPosition: (canBeXMiddle: boolean, canBeLeft: boolean) => "left" | "right" | "";
+export declare const checkYPosition: (canBeYMiddle: boolean, canBeAbove: boolean) => "bottom" | "top" | "";
+export {};

package/dist/components/common/ToolTip/utils.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkYPosition = exports.checkXPosition = exports.tipPosition = exports.getPositions = void 0;
+const getPositions = (positionClasses, el, tooltip) => {
+    const { xClass, yClass } = positionClasses;
+    const elementRect = el.getBoundingClientRect();
+    const tooltipRect = tooltip === null || tooltip === void 0 ? void 0 : tooltip.getBoundingClientRect();
+    const elLeft = elementRect.left;
+    const elWidth = elementRect.width;
+    const elTop = elementRect.top;
+    const elHeight = elementRect.height;
+    const tooltipWidth = (tooltipRect === null || tooltipRect === void 0 ? void 0 : tooltipRect.width) || 0;
+    const tooltipHeight = (tooltipRect === null || tooltipRect === void 0 ? void 0 : tooltipRect.height) || 0;
+    let left = elLeft + elWidth / 2 - tooltipWidth / 2;
+    if (xClass === 'left') {
+        left = elLeft - tooltipWidth;
+        if (yClass === 'top' || yClass === 'bottom') {
+            left = left + elWidth;
+        }
+    }
+    else if (xClass === 'right') {
+        left = elLeft;
+        if (yClass !== 'top' && yClass !== 'bottom') {
+            left = elLeft + elWidth;
+        }
+    }
+    let top = elTop + elHeight / 2 - tooltipHeight / 2;
+    if (yClass === 'top') {
+        top = elTop - tooltipHeight;
+    }
+    else if (yClass === 'bottom') {
+        top = elTop + elHeight;
+    }
+    return { left, top };
+};
+exports.getPositions = getPositions;
+const tipPosition = (positionClasses, el) => {
+    const { xClass, yClass } = positionClasses;
+    const elementRect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+    const elWidth = (elementRect === null || elementRect === void 0 ? void 0 : elementRect.width) || 0;
+    let left = 'auto';
+    let right = 'auto';
+    if (xClass === 'left' && (yClass === 'top' || yClass === 'bottom')) {
+        right = `${elWidth / 2 - 5}px`;
+    }
+    else if (xClass === 'right' && (yClass === 'top' || yClass === 'bottom')) {
+        left = `${elWidth / 2 - 5}px`;
+    }
+    else if (!xClass) {
+        left = '50%';
+    }
+    return { left, right };
+};
+exports.tipPosition = tipPosition;
+const checkXPosition = (canBeXMiddle, canBeLeft) => {
+    if (!canBeXMiddle) {
+        if (canBeLeft) {
+            return 'left';
+        }
+        else {
+            return 'right';
+        }
+    }
+    return '';
+};
+exports.checkXPosition = checkXPosition;
+const checkYPosition = (canBeYMiddle, canBeAbove) => {
+    if (!canBeYMiddle) {
+        if (canBeAbove) {
+            return 'top';
+        }
+        else {
+            return 'bottom';
+        }
+    }
+    return '';
+};
+exports.checkYPosition = checkYPosition;

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

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

package/dist/components/messages/Message.js

@@ -18,15 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -36,7 +27,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const ContextMenu_1 = require("../ContextMenu");
 class Message extends react_1.Component {
     constructor() {
         super(...arguments);
@@ -44,9 +34,6 @@ class Message extends react_1.Component {
             hasError: false,
             showMore: false
         };
-        this.handleContextMenu = (e) => {
-            (0, ContextMenu_1.showContextMenu)(e, this.props);
-        };
     }
     static getDerivedStateFromError(_error) {
         return { hasError: true };
@@ -54,11 +41,6 @@ class Message extends react_1.Component {
     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' })));
     }
-    onMessageClicked() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.props.store.loadEventInDebugger(this.props.messageId, true);
-        });
-    }
     render() {
         var _a, _b;
         if (this.state.hasError) {
@@ -67,7 +49,6 @@ 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 wrappedClass = `bpw-bubble-${wrappedType}`;
-        const isEmulator = this.props.store.config.isEmulator;
         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,
@@ -82,7 +63,6 @@ class Message extends react_1.Component {
                 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) {
@@ -92,11 +72,8 @@ class Message extends react_1.Component {
         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: (0, classnames_1.default)(this.props.className, wrappedClass), style: additionalStyle }, rendered));
         }
-        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`, {
-                'bpw-bubble-highlight': this.props.isHighlighted,
-                'bpw-msg-hovering': isEmulator
-            }), "data-from": this.props.fromLabel, onClick: () => this.onMessageClicked(), tabIndex: -1, style: additionalStyle },
-            react_1.default.createElement("div", { tabIndex: -1, className: "bpw-chat-bubble-content", onContextMenu: type !== 'session_reset' ? this.handleContextMenu : () => { } },
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`), "data-from": this.props.fromLabel, tabIndex: -1, style: additionalStyle },
+            react_1.default.createElement("div", { tabIndex: -1, className: "bpw-chat-bubble-content" },
                 react_1.default.createElement("span", { className: "sr-only" }, this.props.store.intl.formatMessage({
                     id: this.props.isBotMessage ? 'message.botSaid' : 'message.iSaid',
                     defaultMessage: this.props.isBotMessage ? 'Virtual assistant said : ' : 'I said : '

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

@@ -9,13 +9,6 @@ declare class MessageGroup extends React.Component<Props> {
     static getDerivedStateFromError(_error: Error): {
         hasError: boolean;
     };
-    /**
-     * @deprecated 12.0
-     * Here, we convert old format to the new format Botpress uses internally.
-     * - payload: all the data (raw, whatever) that is necessary to display the element
-     * - type: extracted from payload for easy sorting
-     */
-    convertPayloadFromOldFormat: (data: any) => any;
     onAudioEnded: () => void;
     render(): JSX.Element | "* Cannot display message *";
 }
@@ -24,12 +17,7 @@ export default _default;
 declare type Props = {
     isBot: boolean;
     avatar: JSX.Element;
-    userName: string;
     messages: MessageDetails[];
     isLastGroup: boolean;
-    onFileUpload?: any;
-    onSendData?: any;
-    onFeedback?: any;
     store?: RootStore;
-    highlightedMessages?: string[];
-} & Pick<StoreDef, 'showUserName' | 'messageWrapper'>;
+} & Pick<StoreDef, 'sendFeedback' | 'sendData'>;

package/dist/components/messages/MessageGroup.js

@@ -16,35 +16,6 @@ class MessageGroup extends react_1.default.Component {
             hasError: false,
             audioPlayingIndex: 0
         };
-        /**
-         * @deprecated 12.0
-         * Here, we convert old format to the new format Botpress uses internally.
-         * - payload: all the data (raw, whatever) that is necessary to display the element
-         * - type: extracted from payload for easy sorting
-         */
-        this.convertPayloadFromOldFormat = (data) => {
-            var _a, _b, _c;
-            let payload = data.payload || data.message_data || data.message_raw || { text: data.message_text };
-            if (!payload.type) {
-                payload.type = data.message_type || ((_a = data.message_data) === null || _a === void 0 ? void 0 : _a.type) || 'text';
-            }
-            // Keeping compatibility with old schema for the quick reply
-            if (data.message_type === 'quick_reply' && !payload.text) {
-                payload.text = data.message_text;
-            }
-            if (data.message_type === 'file' && !payload.url) {
-                payload.url = ((_b = data.message_data) === null || _b === void 0 ? void 0 : _b.url) || ((_c = data.message_raw) === null || _c === void 0 ? void 0 : _c.url);
-            }
-            if (this.props.messageWrapper && payload.type !== 'session_reset') {
-                payload = {
-                    type: 'custom',
-                    module: this.props.messageWrapper.module,
-                    component: this.props.messageWrapper.component,
-                    wrapped: payload
-                };
-            }
-            return payload;
-        };
         this.onAudioEnded = () => {
             if (this.state.audioPlayingIndex >= this.props.messages.length - 1) {
                 this.state.audioPlayingIndex = -1;
@@ -58,7 +29,7 @@ class MessageGroup extends react_1.default.Component {
         return { hasError: true };
     }
     render() {
-        const { messages, avatar, isBot, showUserName, userName } = this.props;
+        const { messages, avatar, isBot } = this.props;
         const fromLabel = this.props.store.intl.formatMessage({
             id: this.props.isBot ? 'message.fromBotLabel' : 'message.fromMeLabel',
             defaultMessage: 'Me'
@@ -72,23 +43,18 @@ class MessageGroup extends react_1.default.Component {
             }) },
             avatar,
             react_1.default.createElement("div", { role: "region", className: 'bpw-message-container' },
-                showUserName && react_1.default.createElement("div", { className: 'bpw-message-username' }, userName),
                 react_1.default.createElement("div", { "aria-live": "assertive", role: "log", className: 'bpw-message-group' },
                     react_1.default.createElement("span", { "data-from": fromLabel, className: "from hidden", "aria-hidden": "true" }, fromLabel),
                     (0, sortBy_1.default)(messages, ['sent_on', 'eventId']).map((message, i, messages) => {
                         const isLastMsg = i === messages.length - 1;
-                        const payload = this.convertPayloadFromOldFormat(message);
-                        const showInlineFeedback = isBot && isLastMsg && (payload.wrapped ? payload.wrapped.collectFeedback : payload.collectFeedback);
-                        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 }));
+                        const payload = message.payload;
+                        const showInlineFeedback = isBot && isLastMsg && payload.collectFeedback;
+                        return (react_1.default.createElement(Message_1.default, { key: `${message.id}-${message.payload.type}`, inlineFeedback: showInlineFeedback && (react_1.default.createElement(InlineFeedback_1.InlineFeedback, { intl: this.props.store.intl, messageId: message.id, onFeedback: this.props.sendFeedback, messageFeedbacks: this.props.store.messageFeedbacks })), messageId: message.id, noBubble: !!payload.noBubble, fromLabel: fromLabel, isLastOfGroup: i >= this.props.messages.length - 1, isLastGroup: this.props.isLastGroup, isBotMessage: !message.authorId, payload: payload, sentOn: message.sentOn, onSendData: this.props.sendData, store: this.props.store, onAudioEnded: this.onAudioEnded, shouldPlay: this.state.audioPlayingIndex === i }));
                     })))));
     }
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     store,
-    onFeedback: store.sendFeedback,
-    onSendData: store.sendData,
-    onFileUpload: store.uploadFile,
-    messageWrapper: store.messageWrapper,
-    showUserName: store.config.showUserName,
-    highlightedMessages: store.view.highlightedMessages
+    sendFeedback: store.sendFeedback,
+    sendData: store.sendData
 }))(MessageGroup);

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

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