@botpress/webchat 0.2.0 → 0.2.1

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 {
@@ -52,7 +33,7 @@ class Container extends react_1.default.Component {
                     '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 }))));
         }
     }

package/dist/components/ConversationList.js

@@ -11,7 +11,7 @@ const Add_1 = __importDefault(require("../icons/Add"));
 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 { value, unit } = (0, intl_utils_1.selectUnit)(((_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 },

package/dist/components/messages/MessageGroup.js

@@ -77,13 +77,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;
-                        let payload = this.convertPayloadFromOldFormat(message);
-                        // TODO: remove this. quick_reply should be single-choice
-                        if (payload.type === 'single-choice') {
-                            payload = Object.assign(Object.assign({}, payload), { type: 'quick_reply' });
-                        }
+                        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, 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 }));
                     })))));
     }
 }

package/dist/core/api.js

@@ -67,7 +67,16 @@ class WebchatApi {
     fetchConversations() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const convos = yield this.socket.socket.listConversations();
+                const convos = (yield this.socket.socket.listConversations());
+                // Add the last message of each conversation
+                for (const convo of convos) {
+                    const limit = 1;
+                    yield this.socket.socket.switchConversation(convo.id);
+                    const lastMessages = yield this.socket.socket.listMessages(limit);
+                    if (lastMessages.length >= limit) {
+                        convo.lastMessage = lastMessages[0];
+                    }
+                }
                 return convos;
             }
             catch (err) {

package/dist/fonts/roboto.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import '../../assets/fonts/roboto.css';
+declare const Font: () => JSX.Element;
+export default Font;

package/dist/fonts/roboto.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("../../assets/fonts/roboto.css");
+const Font = () => react_1.default.createElement(react_1.default.Fragment, null);
+exports.default = Font;

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WrappedComponentProps } from 'react-intl';
 import { RootStore, StoreDef } from './store';
+export declare const DEFAULT_TYPING_DELAY = 1000;
 declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<MainProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
 } & React.RefAttributes<any>> & {
@@ -9,4 +10,4 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 export default _default;
 declare type MainProps = {
     store: RootStore;
-} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'isEmulator' | 'updateTyping' | 'setReference' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions'>;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'isEmulator' | 'updateTyping' | 'setReference' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;

package/dist/main.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,6 +31,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TYPING_DELAY = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const debounce_1 = __importDefault(require("lodash/debounce"));
 const set_1 = __importDefault(require("lodash/set"));
@@ -26,8 +46,7 @@ const constants_1 = __importDefault(require("./core/constants"));
 const socket_1 = __importDefault(require("./core/socket"));
 const Chat_1 = __importDefault(require("./icons/Chat"));
 const utils_1 = require("./utils");
-const _values = (obj) => Object.keys(obj).map((x) => obj[x]);
-const DEFAULT_TYPING_DELAY = 1000;
+exports.DEFAULT_TYPING_DELAY = 1000;
 class Web extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -86,7 +105,7 @@ class Web extends react_1.default.Component {
         this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
             var _a;
             if (event.authorId === undefined) {
-                const value = (event.payload.type === 'typing' ? event.payload.value : undefined) || DEFAULT_TYPING_DELAY;
+                const value = (event.payload.type === 'typing' ? event.payload.value : undefined) || exports.DEFAULT_TYPING_DELAY;
                 yield this.handleTyping(Object.assign(Object.assign({}, event), { timeInMs: value }));
             }
             if (((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'visit') {
@@ -98,6 +117,7 @@ class Web extends react_1.default.Component {
                 return;
             }
             (0, utils_1.trackMessage)('received');
+            this.props.updateLastMessage(event.conversationId, event);
             yield this.props.addEventToConversation(event);
             // there's no focus on the actual conversation
             if ((document.hasFocus && !document.hasFocus()) || this.props.activeView !== 'side') {
@@ -148,8 +168,7 @@ class Web extends react_1.default.Component {
     }
     componentDidMount() {
         return __awaiter(this, void 0, void 0, function* () {
-            // TODO: serve this from cdn
-            this.audio = new Audio(`${window.ROOT_PATH}/assets/modules/channel-web/notification.mp3`);
+            this.audio = new Audio(require('url:../assets/notification.mp3'));
             this.props.store.setIntlProvider(this.props.intl);
             window.store = this.props.store;
             window.addEventListener('message', this.handleIframeApi);
@@ -256,7 +275,7 @@ class Web extends react_1.default.Component {
     }
     loadOverrides(overrides) {
         try {
-            for (const override of _values(overrides)) {
+            for (const override of Object.values(overrides)) {
                 // TODO: load module view this can't work
                 // override.map(({ module }) => this.props.bp!.loadModuleView(module, true))
             }
@@ -314,11 +333,11 @@ class Web extends react_1.default.Component {
             this.postMessageToParent('setClass', parentClass);
             this.parentClass = parentClass;
         }
-        const { isEmulator, stylesheet, extraStylesheet } = this.props.config;
+        const { stylesheet, extraStylesheet } = this.props.config;
+        const RobotoFont = react_1.default.lazy(() => Promise.resolve().then(() => __importStar(require('./fonts/roboto'))));
         return (react_1.default.createElement(react_1.default.Fragment, null,
             !!(stylesheet === null || stylesheet === void 0 ? void 0 : stylesheet.length) && react_1.default.createElement(Stylesheet_1.default, { href: stylesheet }),
-            !stylesheet && react_1.default.createElement(Stylesheet_1.default, { href: `assets/modules/channel-web/default${isEmulator ? '-emulator' : ''}.css` }),
-            !utils_1.isIE && react_1.default.createElement(Stylesheet_1.default, { href: 'assets/modules/channel-web/font.css' }),
+            react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) }, !utils_1.isIE && react_1.default.createElement(RobotoFont, null)),
             !!(extraStylesheet === null || extraStylesheet === void 0 ? void 0 : extraStylesheet.length) && react_1.default.createElement(Stylesheet_1.default, { href: extraStylesheet })));
     }
     render() {
@@ -366,5 +385,6 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     widgetTransition: store.view.widgetTransition,
     displayWidgetView: store.view.displayWidgetView,
     setLoadingCompleted: store.view.setLoadingCompleted,
-    sendFeedback: store.sendFeedback
+    sendFeedback: store.sendFeedback,
+    updateLastMessage: store.updateLastMessage
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Web)));

package/dist/store/index.d.ts

@@ -40,6 +40,7 @@ declare class RootStore {
     get currentConversationId(): uuid;
     postMessage(name: string, payload?: any): void;
     updateMessages(messages: Message[]): void;
+    updateLastMessage(conversationId: string, message?: Message): void;
     clearMessages(): void;
     deleteConversation(): Promise<void>;
     loadEventInDebugger(messageId: uuid, isManual?: boolean): Promise<void>;

package/dist/store/index.js

@@ -24,6 +24,7 @@ const is_valid_1 = __importDefault(require("date-fns/is_valid"));
 const merge_1 = __importDefault(require("lodash/merge"));
 const mobx_1 = require("mobx");
 const api_1 = __importDefault(require("../core/api"));
+const main_1 = require("../main");
 const translations_1 = require("../translations");
 const utils_1 = require("../utils");
 const composer_1 = __importDefault(require("./composer"));
@@ -65,11 +66,7 @@ class RootStore {
     }
     get botAvatarUrl() {
         var _a, _b, _c;
-        return (((_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.avatarUrl) ||
-            ((_c = this.config) === null || _c === void 0 ? void 0 : _c.avatarUrl) ||
-            (this.config.isEmulator
-                ? `${window.ROOT_PATH}/assets/modules/channel-web/images/emulator-default.svg`
-                : undefined));
+        return ((_b = (_a = this.botInfo) === null || _a === void 0 ? void 0 : _a.details) === null || _b === void 0 ? void 0 : _b.avatarUrl) || ((_c = this.config) === null || _c === void 0 ? void 0 : _c.avatarUrl) || undefined;
     }
     get rtl() {
         return (0, utils_1.isRTLLocale)(this.preferredLanguage);
@@ -93,6 +90,14 @@ class RootStore {
     updateMessages(messages) {
         this.currentConversation.messages = messages;
     }
+    updateLastMessage(conversationId, message) {
+        for (const conversation of this.conversations) {
+            if (conversation.id === conversationId) {
+                conversation.lastMessage = message;
+                return;
+            }
+        }
+    }
     clearMessages() {
         this.currentConversation.messages = [];
     }
@@ -146,7 +151,7 @@ class RootStore {
             if ((0, is_before_1.default)(start, this.currentConversation.typingUntil)) {
                 start = this.currentConversation.typingUntil;
             }
-            this.currentConversation.typingUntil = new Date(+start + event.timeInMs);
+            this.currentConversation.typingUntil = new Date(+start + (event.timeInMs || main_1.DEFAULT_TYPING_DELAY));
             this._startTypingTimer();
         });
     }
@@ -278,7 +283,8 @@ class RootStore {
     extractFeedback(messages) {
         return __awaiter(this, void 0, void 0, function* () {
             const feedbackMessageIds = messages.filter((x) => x.payload && x.payload.collectFeedback).map((x) => x.id);
-            const feedbackInfo = yield this.api.getMessageIdsFeedbackInfo(feedbackMessageIds);
+            // TODO: store feedback somewhere
+            const feedbackInfo = feedbackMessageIds.map((x) => ({ messageId: x, feedback: 1 }));
             (0, mobx_1.runInAction)('-> setFeedbackInfo', () => {
                 this.messageFeedbacks = feedbackInfo;
             });
@@ -314,7 +320,8 @@ class RootStore {
               return this.api.sendEvent(data, this.currentConversationId)
             }
             */
-            yield this.api.sendMessage(data, this.currentConversationId);
+            const message = yield this.api.sendMessage(data, this.currentConversationId);
+            this.updateLastMessage(this.currentConversationId, message);
         });
     }
     uploadFile(title, payload, file) {
@@ -506,6 +513,9 @@ __decorate([
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "updateMessages", null);
+__decorate([
+    mobx_1.action.bound
+], RootStore.prototype, "updateLastMessage", null);
 __decorate([
     mobx_1.action.bound
 ], RootStore.prototype, "clearMessages", null);

package/dist/typings.d.ts

@@ -260,7 +260,7 @@ export interface Message {
     authorId: uuid | undefined;
     sentOn: Date;
     payload: any;
-    timeInMs: number;
+    timeInMs?: number;
 }
 export interface QueuedMessage {
     message: Message;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botpress/webchat",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",

package/dist/components/Keyboard.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-export declare class Prepend extends React.Component<Partial<KeyboardElementsProps>> {
-    render(): JSX.Element;
-}
-export declare class Append extends React.Component<Partial<KeyboardElementsProps>> {
-    render(): JSX.Element;
-}
-export declare class Default extends React.Component<Partial<KeyboardElementsProps>> {
-    static prependRef: React.RefObject<HTMLDivElement>;
-    static appendRef: React.RefObject<HTMLDivElement>;
-    static isReady: () => boolean;
-    render(): JSX.Element;
-}
-interface KeyboardElementsProps {
-    /** When true, the keyboard is appended at the end. Otherwise, it is prepended */
-    append?: boolean;
-    index?: number;
-    visible?: boolean;
-    /** A keyboard can be any kind of element */
-    keyboard?: any;
-}
-export {};

package/dist/components/Keyboard.js

@@ -1,86 +0,0 @@
-"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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = exports.Append = exports.Prepend = void 0;
-const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
-class KeyboardElements extends React.Component {
-    constructor(props) {
-        super(props);
-        this.container = document.createElement('div');
-    }
-    insertChildAt(child, index = 0, parent) {
-        if (index >= parent.children.length) {
-            parent.appendChild(child);
-        }
-        else {
-            parent.insertBefore(child, parent.children[index]);
-        }
-    }
-    componentDidMount() {
-        if (this.props.append) {
-            this.insertChildAt(this.container, this.props.index, Default.appendRef.current);
-        }
-        else {
-            this.insertChildAt(this.container, this.props.index, Default.prependRef.current);
-        }
-    }
-    componentWillUnmount() {
-        var _a, _b;
-        if (this.props.append) {
-            (_a = Default.appendRef.current) === null || _a === void 0 ? void 0 : _a.removeChild(this.container);
-        }
-        else {
-            (_b = Default.prependRef.current) === null || _b === void 0 ? void 0 : _b.removeChild(this.container);
-        }
-    }
-    render() {
-        return ReactDOM.createPortal(this.props.children, this.container);
-    }
-}
-class Prepend extends React.Component {
-    render() {
-        return (React.createElement("div", null,
-            this.props.visible && React.createElement(KeyboardElements, { index: this.props.index }, this.props.keyboard),
-            this.props.children));
-    }
-}
-exports.Prepend = Prepend;
-class Append extends React.Component {
-    render() {
-        return (React.createElement("div", null,
-            this.props.visible && React.createElement(KeyboardElements, { append: true }, this.props.keyboard),
-            this.props.children));
-    }
-}
-exports.Append = Append;
-class Default extends React.Component {
-    render() {
-        return (React.createElement("div", { className: 'bpw-keyboard' },
-            React.createElement("div", { ref: Default.prependRef }),
-            this.props.children,
-            React.createElement("div", { ref: Default.appendRef })));
-    }
-}
-exports.Default = Default;
-Default.prependRef = React.createRef();
-Default.appendRef = React.createRef();
-Default.isReady = () => Default.appendRef.current !== null;