@botpress/webchat 0.2.5 → 0.3.2

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' | 'botName' | 'enableArrowNavigation' | 'showUserAvatar' | 'currentMessages' | 'preferredLanguage'>;
+declare type MessageListProps = WrappedComponentProps & Pick<StoreDef, 'intl' | 'isBotTyping' | 'focusedArea' | 'focusPrevious' | 'focusNext' | 'botAvatarUrl' | 'botName' | 'currentMessages' | 'preferredLanguage'>;

package/dist/components/messages/MessageList.js

@@ -17,22 +17,6 @@ class MessageList extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = { showNewMessageIndicator: false, manualScroll: false };
-        this.handleKeyDown = (e) => {
-            if (!this.props.enableArrowNavigation) {
-                return;
-            }
-            const maxScroll = this.messagesDiv.scrollHeight - this.messagesDiv.clientHeight;
-            const shouldFocusNext = e.key === 'ArrowRight' || (e.key === 'ArrowDown' && this.messagesDiv.scrollTop === maxScroll);
-            const shouldFocusPrevious = e.key === 'ArrowLeft' || (e.key === 'ArrowUp' && this.messagesDiv.scrollTop === 0);
-            if (shouldFocusNext) {
-                this.messagesDiv.blur();
-                this.props.focusNext();
-            }
-            if (shouldFocusPrevious) {
-                this.messagesDiv.blur();
-                this.props.focusPrevious();
-            }
-        };
         this.shouldDisplayMessage = (m) => {
             return m.payload.type !== 'postback';
         };
@@ -60,7 +44,7 @@ class MessageList extends react_1.default.Component {
             });
         }
         // this should account for keyboard rendering as it triggers a resize of the messagesDiv
-        this.divSizeObserver = new resize_observer_1.ResizeObserver((0, debounce_1.default)(([divResizeEntry]) => {
+        this.divSizeObserver = new resize_observer_1.ResizeObserver((0, debounce_1.default)((_divResizeEntry) => {
             // we don't need to do anything with the resize entry
             this.tryScrollToBottom();
         }, 200, { trailing: true }));
@@ -106,8 +90,7 @@ class MessageList extends react_1.default.Component {
         let lastDate = undefined;
         let currentGroup = undefined;
         messages.forEach((m) => {
-            var _a, _b;
-            const speaker = ((_b = (_a = m.payload.channel) === null || _a === void 0 ? void 0 : _a.web) === null || _b === void 0 ? void 0 : _b.userName) || m.authorId;
+            const speaker = m.authorId;
             const date = m.sentOn;
             // Create a new group if messages are separated by more than X minutes or if different speaker
             if (speaker !== lastSpeaker ||
@@ -134,24 +117,21 @@ class MessageList extends react_1.default.Component {
             });
         }
         return (react_1.default.createElement("div", null, groups.map((group, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a;
             const lastGroup = groups[i - 1];
             const lastDate = (_a = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup[lastGroup.length - 1]) === null || _a === void 0 ? void 0 : _a.sentOn;
             const groupDate = group === null || group === void 0 ? void 0 : group[0].sentOn;
             const isDateNeeded = !groups[i - 1] ||
                 (0, difference_in_minutes_1.default)(new Date(groupDate), new Date(lastDate)) > constants_1.default.TIME_BETWEEN_DATES;
-            const [{ authorId, payload }] = group;
-            const avatar = authorId
-                ? this.props.showUserAvatar &&
-                    this.renderAvatar((_c = (_b = payload.channel) === null || _b === void 0 ? void 0 : _b.web) === null || _c === void 0 ? void 0 : _c.userName, (_e = (_d = payload.channel) === null || _d === void 0 ? void 0 : _d.web) === null || _e === void 0 ? void 0 : _e.avatarUrl)
-                : this.renderAvatar(this.props.botName, ((_g = (_f = payload.channel) === null || _f === void 0 ? void 0 : _f.web) === null || _g === void 0 ? void 0 : _g.avatarUrl) || this.props.botAvatarUrl);
+            const [{ authorId }] = group;
+            const avatar = !authorId && this.renderAvatar(this.props.botName, this.props.botAvatarUrl);
             return (react_1.default.createElement("div", { key: i },
                 isDateNeeded && this.renderDate(group[0].sentOn),
-                react_1.default.createElement(MessageGroup_1.default, { isBot: !authorId, avatar: avatar, userName: (_j = (_h = payload.channel) === null || _h === void 0 ? void 0 : _h.web) === null || _j === void 0 ? void 0 : _j.userName, key: `msg-group-${i}`, isLastGroup: i >= groups.length - 1, messages: group })));
+                react_1.default.createElement(MessageGroup_1.default, { isBot: !authorId, avatar: avatar, key: `msg-group-${i}`, isLastGroup: i >= groups.length - 1, messages: group })));
         })));
     }
     render() {
-        return (react_1.default.createElement("div", { tabIndex: 0, onKeyDown: this.handleKeyDown, className: 'bpw-msg-list', ref: (m) => {
+        return (react_1.default.createElement("div", { tabIndex: 0, className: 'bpw-msg-list', ref: (m) => {
                 this.messagesDiv = m;
             }, onScroll: this.handleScroll },
             this.state.showNewMessageIndicator && (react_1.default.createElement("div", { className: "bpw-new-messages-indicator", onClick: (e) => this.tryScrollToBottom() },
@@ -170,7 +150,5 @@ exports.default = (0, mobx_react_1.inject)(({ store }) => ({
     focusPrevious: store.view.focusPrevious,
     focusNext: store.view.focusNext,
     focusedArea: store.view.focusedArea,
-    showUserAvatar: store.config.showUserAvatar,
-    enableArrowNavigation: store.config.enableArrowNavigation,
     preferredLanguage: store.preferredLanguage
 }))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(MessageList)));

package/dist/core/api.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="node" />
 import { Message } from '@botpress/messaging-socket';
-import { RecentConversation } from '..';
-import { BotInfo, uuid } from '../typings';
+import { uuid, RecentConversation } from '../typings';
 import BpSocket from './socket';
 export default class WebchatApi {
     private socket;
     constructor(socket: BpSocket);
-    fetchBotInfo(mediaFileServiceUrl: string): Promise<BotInfo | undefined>;
-    listCurrentConversationMessages(limit?: number): Promise<Message[]>;
+    listCurrentConversationMessages(limit?: number): Promise<Message[] | undefined>;
     fetchConversations(): Promise<RecentConversation[]>;
     fetchConversation(conversationId: uuid): Promise<{
         messages: Message[];
@@ -16,12 +14,10 @@ export default class WebchatApi {
         userId?: string | undefined;
         createdOn?: Date | undefined;
     } | undefined>;
-    resetSession(conversationId: uuid): Promise<void>;
     createConversation(): Promise<uuid | undefined>;
     startConversation(): Promise<void>;
     sendMessage(payload: any, conversationId: uuid): Promise<Message | undefined>;
     deleteConversation(conversationId: uuid): Promise<void>;
     sendFeedback(feedback: number, messageId: uuid): Promise<void>;
-    uploadFile(file: File, payload: string, conversationId: uuid): Promise<void>;
     sendVoiceMessage(voice: Buffer, ext: string, conversationId: uuid): Promise<void>;
 }

package/dist/core/api.js

@@ -8,32 +8,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const axios_1 = __importDefault(require("axios"));
 const uuid_1 = require("uuid");
 class WebchatApi {
     constructor(socket) {
         this.socket = socket;
     }
-    fetchBotInfo(mediaFileServiceUrl) {
+    listCurrentConversationMessages(limit) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                const { data } = yield axios_1.default.get(mediaFileServiceUrl);
-                return data;
+                return this.socket.socket.listMessages(limit);
             }
             catch (err) {
-                console.error('Error while loading bot info', err);
+                console.error('An error occurred while listing the messages of the current conversation', err);
             }
         });
     }
-    listCurrentConversationMessages(limit) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.socket.socket.listMessages(limit);
-        });
-    }
     fetchConversations() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -43,7 +33,7 @@ class WebchatApi {
                     const limit = 1;
                     yield this.socket.socket.switchConversation(conversation.id);
                     const lastMessages = yield this.listCurrentConversationMessages(limit);
-                    if (lastMessages.length >= limit) {
+                    if (lastMessages && lastMessages.length >= limit) {
                         conversation.lastMessage = lastMessages[0];
                     }
                 }
@@ -68,16 +58,6 @@ class WebchatApi {
             }
         });
     }
-    // TODO: Fis this
-    resetSession(conversationId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-            }
-            catch (err) {
-                console.error('Error while resetting conversation', err);
-            }
-        });
-    }
     createConversation() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -124,14 +104,6 @@ class WebchatApi {
             return this.socket.socket.sendFeedback(messageId, feedback);
         });
     }
-    uploadFile(file, payload, conversationId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const data = new FormData();
-            data.append('file', file);
-            data.append('conversationId', conversationId);
-            data.append('payload', payload);
-        });
-    }
     // TODO: Fix this
     sendVoiceMessage(voice, ext, conversationId) {
         return __awaiter(this, void 0, void 0, function* () {

package/dist/core/constants.d.ts

@@ -1,42 +1,14 @@
+import { Config } from '../typings';
 declare const _default: {
-    /** These types are sent using the /message/ endpoint */
-    MESSAGE_TYPES: string[];
     /** The duration of the hide / show chat */
-    ANIM_DURATION: number;
+    ANIMATION_DURATION: number;
     MIN_TIME_BETWEEN_SOUNDS: number;
-    HISTORY_STARTING_POINT: number;
-    HISTORY_MAX_MESSAGES: number;
+    SENT_HISTORY_SIZE: number;
     /** The number of minutes before a new timestamp is displayed */
     TIME_BETWEEN_DATES: number;
     DEFAULT_LAYOUT_WIDTH: number;
     DEFAULT_CONTAINER_WIDTH: number;
-    SENT_HISTORY_SIZE: number;
     /** The default configuration when starting the chat */
-    DEFAULT_CONFIG: {
-        userId: undefined;
-        extraStylesheet: string;
-        botName: undefined;
-        botConvoDescription: undefined;
-        overrides: undefined;
-        enableReset: boolean;
-        enableTranscriptDownload: boolean;
-        enableArrowNavigation: boolean;
-        showConversationsButton: boolean;
-        useSessionStorage: boolean;
-        showUserName: boolean;
-        showUserAvatar: boolean;
-        showTimestamp: boolean;
-        disableAnimations: boolean;
-        hideWidget: boolean;
-        externalAuthToken: undefined;
-        showPoweredBy: boolean;
-        enablePersistHistory: boolean;
-        enableResetSessionShortcut: boolean;
-        enableVoiceComposer: boolean;
-        enableConversationDeletion: boolean;
-        closeOnEscape: boolean;
-        recentConversationLifetime: string;
-        startNewConvoOnTimeout: boolean;
-    };
+    DEFAULT_CONFIG: Partial<Config>;
 };
 export default _default;

package/dist/core/constants.js

@@ -1,43 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const DEFAULT_CONFIG = {
+    botName: undefined,
+    botConversationDescription: undefined,
+    enableTranscriptDownload: true,
+    showConversationsButton: true,
+    useSessionStorage: false,
+    showTimestamp: false,
+    disableAnimations: false,
+    hideWidget: false,
+    showPoweredBy: false,
+    enablePersistHistory: true,
+    enableVoiceComposer: false,
+    enableConversationDeletion: false,
+    closeOnEscape: true
+};
 exports.default = {
-    /** These types are sent using the /message/ endpoint */
-    MESSAGE_TYPES: ['text', 'quick_reply', 'form', 'login_prompt', 'visit', 'postback'],
     /** The duration of the hide / show chat */
-    ANIM_DURATION: 300,
+    ANIMATION_DURATION: 300,
     MIN_TIME_BETWEEN_SOUNDS: 1000,
-    HISTORY_STARTING_POINT: -1,
-    HISTORY_MAX_MESSAGES: 10,
+    SENT_HISTORY_SIZE: 20,
     /** The number of minutes before a new timestamp is displayed */
     TIME_BETWEEN_DATES: 10,
     DEFAULT_LAYOUT_WIDTH: 360,
     DEFAULT_CONTAINER_WIDTH: 360,
-    SENT_HISTORY_SIZE: 20,
     /** The default configuration when starting the chat */
-    DEFAULT_CONFIG: {
-        userId: undefined,
-        extraStylesheet: '',
-        botName: undefined,
-        botConvoDescription: undefined,
-        overrides: undefined,
-        enableReset: true,
-        enableTranscriptDownload: true,
-        enableArrowNavigation: false,
-        showConversationsButton: true,
-        useSessionStorage: false,
-        showUserName: false,
-        showUserAvatar: false,
-        showTimestamp: false,
-        disableAnimations: false,
-        hideWidget: false,
-        externalAuthToken: undefined,
-        showPoweredBy: window.SHOW_POWERED_BY,
-        enablePersistHistory: true,
-        enableResetSessionShortcut: false,
-        enableVoiceComposer: false,
-        enableConversationDeletion: false,
-        closeOnEscape: true,
-        recentConversationLifetime: '5h',
-        startNewConvoOnTimeout: false
-    }
+    DEFAULT_CONFIG
 };

package/dist/core/socket.d.ts

@@ -3,16 +3,10 @@ import { Config } from '../typings';
 export default class BpSocket {
     socket: MessagingSocket;
     private chatId;
-    private waitingForUser?;
-    onClear: (event: any) => void;
     onMessage: (event: any) => void;
-    onTyping: (event: any) => void;
-    onData: (event: any) => void;
-    onUserIdChanged: (userId: string) => void;
     constructor(config: Config);
     setup(): void;
     sendPayload(payload: any): Promise<Message>;
     postToParent: (_type: string, payload: any) => void;
-    /** Waits until the VISITOR ID and VISITOR SOCKET ID is set  */
-    waitForUserId(): Promise<void>;
+    connect(): Promise<void>;
 }

package/dist/core/socket.js

@@ -14,23 +14,14 @@ class BpSocket {
     constructor(config) {
         this.postToParent = (_type, payload) => {
             var _a;
-            // we could filter on event type if necessary
             (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage(Object.assign(Object.assign({}, payload), { chatId: this.chatId }), '*');
         };
         this.chatId = config.chatId;
         this.socket = new messaging_socket_1.MessagingSocket({ url: config.messagingUrl, clientId: config.clientId });
+        window.websocket = this.socket;
     }
     setup() {
         this.socket.on('message', this.onMessage);
-        /*
-        this.events.on('guest.webchat.clear', this.onClear)
-        this.events.on('guest.webchat.message', this.onMessage)
-        this.events.on('guest.webchat.typing', this.onTyping)
-        this.events.on('guest.webchat.data', this.onData)
-        */
-        // firehose events to parent page
-        // TODO: why do we need this
-        // this.events.onAny(this.postToParent)
     }
     sendPayload(payload) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -39,28 +30,15 @@ class BpSocket {
             return message;
         });
     }
-    /** Waits until the VISITOR ID and VISITOR SOCKET ID is set  */
-    waitForUserId() {
+    connect() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.waitingForUser) {
-                return this.waitingForUser;
+            const creds = window.BP_STORAGE.get('creds');
+            yield this.socket.connect(creds);
+            if (this.socket.userId) {
+                const userId = this.socket.userId;
+                window.BP_STORAGE.set('creds', this.socket.creds);
+                this.postToParent('', { userId });
             }
-            this.waitingForUser = new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
-                const creds = window.BP_STORAGE.get('creds');
-                yield this.socket.connect(creds);
-                if (this.socket.userId) {
-                    const userId = this.socket.userId;
-                    window.BP_STORAGE.set('creds', this.socket.creds);
-                    this.onUserIdChanged(userId);
-                    this.postToParent('', { userId });
-                    resolve();
-                }
-                else {
-                    this.waitingForUser = undefined;
-                    reject();
-                }
-            }));
-            return this.waitingForUser;
         });
     }
 }

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import { RootStore } from './store';
 import { Config } from './typings';
-export declare const Embedded: (props: any) => ExposedWebChat;
-export declare const Fullscreen: (props: any) => ExposedWebChat;
 interface State {
     store: RootStore;
 }
@@ -14,10 +12,6 @@ export declare class ExposedWebChat extends React.Component<Props, State> {
     constructor(props: Props);
     render(): JSX.Element;
 }
-/**
- * @deprecated Since the way views are handled has changed, we're also exporting views in lowercase.
- * https://botpress.com/docs/developers/migrate/
- */
-export { Embedded as embedded } from '.';
-export { Fullscreen as fullscreen } from '.';
+export declare const Embedded: (props: Props) => ExposedWebChat;
+export declare const Fullscreen: (props: Props) => ExposedWebChat;
 export * from './typings';

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fullscreen = exports.embedded = exports.ExposedWebChat = exports.Fullscreen = exports.Embedded = void 0;
+exports.Fullscreen = exports.Embedded = exports.ExposedWebChat = void 0;
 const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
@@ -23,10 +23,6 @@ const store_1 = require("./store");
 const translations_1 = require("./translations");
 const storage_1 = __importDefault(require("./utils/storage"));
 (0, mobx_1.configure)({ enforceActions: 'observed' });
-const Embedded = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: false }));
-exports.Embedded = Embedded;
-const Fullscreen = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: true }));
-exports.Fullscreen = Fullscreen;
 class ExposedWebChat extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -40,30 +36,13 @@ class ExposedWebChat extends react_1.default.Component {
         const { botUILanguage: locale } = store;
         return (react_1.default.createElement(mobx_react_1.Provider, { store: store },
             react_1.default.createElement(react_intl_1.IntlProvider, { locale: locale, messages: translations_1.translations[locale || translations_1.defaultLocale], defaultLocale: translations_1.defaultLocale },
-                react_1.default.createElement(main_1.default, Object.assign({ store: store }, this.props)))));
+                react_1.default.createElement(main_1.default, Object.assign({}, this.props)))));
     }
 }
 exports.ExposedWebChat = ExposedWebChat;
-// TODO: what does this observer do?
 const Wrapper = (0, mobx_react_1.observer)(ExposedWebChat);
-/**
- * @deprecated Since the way views are handled has changed, we're also exporting views in lowercase.
- * https://botpress.com/docs/developers/migrate/
- */
-var _1 = require(".");
-Object.defineProperty(exports, "embedded", { enumerable: true, get: function () { return _1.Embedded; } });
-var _2 = require(".");
-Object.defineProperty(exports, "fullscreen", { enumerable: true, get: function () { return _2.Fullscreen; } });
+const Embedded = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: false }));
+exports.Embedded = Embedded;
+const Fullscreen = (props) => new Wrapper(Object.assign(Object.assign({}, props), { fullscreen: true }));
+exports.Fullscreen = Fullscreen;
 __exportStar(require("./typings"), exports);
-// TODO: export this
-/*
-export {
-  Carousel,
-  QuickReplies,
-  LoginPrompt,
-  Text,
-  FileMessage,
-  FileInput,
-  Button
-} from './components/messages/renderer'
-*/

package/dist/main.d.ts

@@ -9,5 +9,5 @@ declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omi
 } & import("mobx-react").IWrappedComponent<unknown>;
 export default _default;
 declare type MainProps = {
-    store: RootStore;
-} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'setUserId' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage'>;
+    store?: RootStore;
+} & WrappedComponentProps & Pick<StoreDef, 'config' | 'initializeChat' | 'botInfo' | 'fetchBotInfo' | 'sendMessage' | 'sendData' | 'intl' | 'updateTyping' | 'updateBotUILanguage' | 'hideChat' | 'showChat' | 'toggleBotInfo' | 'widgetTransition' | 'activeView' | 'isFullscreen' | 'unreadCount' | 'hasUnreadMessages' | 'showWidgetButton' | 'addEventToConversation' | 'clearMessages' | 'updateConfig' | 'mergeConfig' | 'isWebchatReady' | 'incrementUnread' | 'displayWidgetView' | 'resetUnread' | 'setLoadingCompleted' | 'dimensions' | 'updateLastMessage' | 'fetchConversation' | 'setIntlProvider' | 'setSocket' | 'currentConversationId'>;