@botpress/webchat 0.2.3 → 0.2.4

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/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 };
 };
@@ -54,11 +45,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 +53,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 +67,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,10 +76,7 @@ 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 },
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)(this.props.className, wrappedClass, 'bpw-chat-bubble', `bpw-bubble-${type}`), "data-from": this.props.fromLabel, tabIndex: -1, style: additionalStyle },
             react_1.default.createElement("div", { tabIndex: -1, className: "bpw-chat-bubble-content", onContextMenu: type !== 'session_reset' ? this.handleContextMenu : () => { } },
                 react_1.default.createElement("span", { className: "sr-only" }, this.props.store.intl.formatMessage({
                     id: this.props.isBotMessage ? 'message.botSaid' : 'message.iSaid',

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 *";
 }
@@ -31,5 +24,4 @@ declare type Props = {
     onSendData?: any;
     onFeedback?: any;
     store?: RootStore;
-    highlightedMessages?: string[];
-} & Pick<StoreDef, 'showUserName' | 'messageWrapper'>;
+} & Pick<StoreDef, 'showUserName'>;

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;
@@ -77,9 +48,9 @@ class MessageGroup extends react_1.default.Component {
                     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.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 }));
                     })))));
     }
 }
@@ -88,7 +59,5 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     onFeedback: store.sendFeedback,
     onSendData: store.sendData,
     onFileUpload: store.uploadFile,
-    messageWrapper: store.messageWrapper,
-    showUserName: store.config.showUserName,
-    highlightedMessages: store.view.highlightedMessages
+    showUserName: store.config.showUserName
 }))(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' | 'enableArrowNavigation' | 'showUserAvatar' | 'currentMessages' | 'preferredLanguage'>;

package/dist/components/messages/MessageList.js

@@ -96,7 +96,7 @@ class MessageList extends react_1.default.Component {
             react_1.default.createElement("div", { className: 'bpw-small-line' })));
     }
     renderAvatar(name, url) {
-        const avatarSize = this.props.isEmulator ? 20 : 40; // quick fix
+        const avatarSize = 40;
         return react_1.default.createElement(Avatar_1.default, { name: name, avatarUrl: url, height: avatarSize, width: avatarSize });
     }
     renderMessageGroups() {
@@ -163,7 +163,6 @@ class MessageList extends react_1.default.Component {
 }
 exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     intl: store.intl,
-    isEmulator: store.isEmulator,
     botName: store.botName,
     isBotTyping: store.isBotTyping,
     botAvatarUrl: store.botAvatarUrl,

package/dist/core/api.d.ts

@@ -1,19 +1,15 @@
 /// <reference types="node" />
 import { Message } from '@botpress/messaging-socket';
 import { RecentConversation } from '..';
-import { EventFeedback, uuid } from '../typings';
+import { BotInfo, uuid } from '../typings';
 import BpSocket from './socket';
 export default class WebchatApi {
     private socket;
     private axios;
     private axiosConfig;
-    private userId;
     constructor(socket: BpSocket);
-    private get baseUserPayload();
-    fetchBotInfo(): Promise<any>;
-    fetchPreferences(): Promise<any>;
-    updateUserPreferredLanguage(language: string): Promise<void>;
-    fetchConversations(): Promise<RecentConversation[] | undefined>;
+    fetchBotInfo(mediaFileServiceUrl: string): Promise<BotInfo | undefined>;
+    fetchConversations(): Promise<RecentConversation[]>;
     fetchConversation(conversationId: uuid): Promise<{
         messages: Message[];
         id?: string | undefined;
@@ -24,14 +20,9 @@ export default class WebchatApi {
     resetSession(conversationId: uuid): Promise<void>;
     createConversation(): Promise<uuid | undefined>;
     startConversation(): Promise<void>;
-    downloadConversation(conversationId: uuid): Promise<any>;
     sendMessage(payload: any, conversationId: uuid): Promise<Message | undefined>;
-    deleteMessages(conversationId: uuid): Promise<void>;
+    deleteConversation(conversationId: uuid): Promise<void>;
     sendFeedback(feedback: number, messageId: uuid): Promise<void>;
-    getMessageIdsFeedbackInfo(messageIds: uuid[]): Promise<EventFeedback[] | undefined>;
     uploadFile(file: File, payload: string, conversationId: uuid): Promise<void>;
     sendVoiceMessage(voice: Buffer, ext: string, conversationId: uuid): Promise<void>;
-    setReference(reference: string, conversationId: uuid): Promise<void>;
-    listByIncomingEvent(messageId: uuid): Promise<any>;
-    handleApiError: (error: any) => Promise<void>;
 }