@botpress/webchat 0.5.1 → 1.0.1

package/dist/main.js

@@ -1,336 +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;
-};
-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 };
-};
-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 mobx_1 = require("mobx");
-const mobx_react_1 = require("mobx-react");
-const query_string_1 = __importDefault(require("query-string"));
-const react_1 = __importDefault(require("react"));
-const react_intl_1 = require("react-intl");
-const Container_1 = __importDefault(require("./components/Container"));
-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 analytics_1 = require("./utils/analytics");
-const webchatEvents_1 = require("./utils/webchatEvents");
-exports.DEFAULT_TYPING_DELAY = 1000;
-class Web extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.hasBeenInitialized = false;
-        this.isCurrentConversation = (event) => {
-            return this.props.currentConversationId === event.conversationId;
-        };
-        this.handleKeyDown = (e) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (!((_a = this.props.config) === null || _a === void 0 ? void 0 : _a.closeOnEscape)) {
-                return;
-            }
-            if (e.key === 'Escape') {
-                this.props.hideChat();
-            }
-        });
-        this.handleIframeApi = ({ data }) => __awaiter(this, void 0, void 0, function* () {
-            switch (data.action) {
-                case 'configure':
-                    return this.props.updateConfig(Object.assign({}, constants_1.default.DEFAULT_CONFIG, data.payload));
-                case 'mergeConfig':
-                    this.props.mergeConfig(data.payload);
-                    const oldUserId = this.socket.socket.userId;
-                    yield this.socket.reload(data.payload);
-                    if (this.socket.socket.userId !== oldUserId) {
-                        this.props.resetConversation();
-                        yield this.props.initializeChat();
-                    }
-                    return;
-                case 'sendPayload':
-                    return this.props.sendData(data.payload);
-                case 'event':
-                    const { type, text, conversationId } = data.payload;
-                    if (type === 'show') {
-                        this.props.showChat();
-                        (0, analytics_1.trackWebchatState)('show');
-                    }
-                    else if (type === 'hide') {
-                        this.props.hideChat();
-                        (0, analytics_1.trackWebchatState)('hide');
-                    }
-                    else if (type === 'toggle') {
-                        this.props.displayWidgetView ? this.props.showChat() : this.props.hideChat();
-                        (0, analytics_1.trackWebchatState)('toggle');
-                    }
-                    else if (type === 'message') {
-                        yield this.props.sendMessage(text);
-                    }
-                    else if (type === 'loadConversation') {
-                        yield this.props.fetchConversation(conversationId);
-                    }
-                    else if (type === 'createConversation') {
-                        yield this.props.createConversation();
-                    }
-                    else if (type === 'toggleBotInfo') {
-                        this.props.toggleBotInfo();
-                    }
-                    else {
-                        yield this.props.sendData({ type, payload: data.payload });
-                    }
-                default:
-                    break;
-            }
-        });
-        this.handleNewMessage = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _b, _c, _d;
-            if (!this.isCurrentConversation(event)) {
-                // don't do anything, it's a message from another conversation
-                return;
-            }
-            if (event.authorId === undefined) {
-                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 (((_b = event.payload) === null || _b === void 0 ? void 0 : _b.type) === 'visit') {
-                // don't do anything, it's the system message
-                return;
-            }
-            if (((_c = this.props.currentConversation) === null || _c === void 0 ? void 0 : _c.userId) !== event.authorId) {
-                (0, analytics_1.trackMessage)('received');
-                (0, webchatEvents_1.postMessageToParent)('MESSAGE.RECEIVED', event, this.props.config.chatId);
-                // This is to handle a special case for the emulator, setting the selected css class to the last message group
-                // This needs a rethinking
-                if (event.id) {
-                    (_d = this.props.store) === null || _d === void 0 ? void 0 : _d.setSelectedMessage(event.id);
-                }
-            }
-            this.props.updateLastMessage(event.conversationId, event);
-            yield this.props.addEventToConversation(event);
-            // there's no focus on the actual conversation
-            if (!document.hasFocus() || this.props.activeView !== 'side') {
-                yield this.playSound();
-                this.props.incrementUnread();
-            }
-            this.handleResetUnreadCount();
-        });
-        this.handleTyping = (event) => __awaiter(this, void 0, void 0, function* () {
-            yield this.props.updateTyping(event);
-        });
-        this.playSound = (0, debounce_1.default)(() => __awaiter(this, void 0, void 0, function* () {
-            var _e;
-            const disableNotificationSound = this.config.disableNotificationSound || ((_e = this.props.config) === null || _e === void 0 ? void 0 : _e.disableNotificationSound);
-            if (disableNotificationSound || this.audio.readyState < 2) {
-                return;
-            }
-            yield this.audio.play();
-        }), constants_1.default.MIN_TIME_BETWEEN_SOUNDS);
-        this.handleResetUnreadCount = () => {
-            if (document.hasFocus() && this.props.activeView === 'side') {
-                this.props.resetUnread();
-            }
-        };
-        (0, analytics_1.initializeAnalytics)();
-    }
-    componentDidMount() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.audio = new Audio(require('url:../assets/notification.mp3'));
-            this.props.setIntlProvider(this.props.intl);
-            window.store = this.props.store;
-            window.addEventListener('message', this.handleIframeApi);
-            window.addEventListener('keydown', this.handleKeyDown);
-            yield this.loadConfig();
-            yield this.initializeIfChatDisplayed();
-            this.props.setLoadingCompleted();
-        });
-    }
-    componentWillUnmount() {
-        window.removeEventListener('message', this.handleIframeApi);
-        window.removeEventListener('keydown', this.handleKeyDown);
-    }
-    componentDidUpdate() {
-        if (this.config) {
-            void this.initializeIfChatDisplayed();
-        }
-    }
-    initializeIfChatDisplayed() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.hasBeenInitialized) {
-                return;
-            }
-            if (this.props.activeView === 'side' || this.props.isFullscreen) {
-                this.hasBeenInitialized = true;
-                if (this.isLazySocket() || !this.socket) {
-                    yield this.initializeSocket();
-                }
-                yield this.socket.connect();
-                this.props.setSocket(this.socket);
-                yield this.props.initializeChat();
-            }
-        });
-    }
-    loadConfig() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.config = this.extractConfig();
-            this.props.updateConfig(this.config);
-            // is this necessary ?
-            if (this.config.containerWidth) {
-                (0, webchatEvents_1.postMessageToParent)('UI.RESIZE', this.config.containerWidth, this.config.chatId);
-            }
-            yield this.props.fetchBotInfo();
-            if (!this.isLazySocket()) {
-                yield this.initializeSocket();
-            }
-            this.setupObserver();
-        });
-    }
-    extractConfig() {
-        let userConfig = Object.assign({}, constants_1.default.DEFAULT_CONFIG, this.props.config);
-        const { options } = query_string_1.default.parse(location.search);
-        if (!options || typeof options !== 'string') {
-            console.warn(`Cannot decode option. Invalid format: ${typeof options}, expecting 'string'.`);
-            return userConfig;
-        }
-        try {
-            const parsedOptions = JSON.parse(decodeURIComponent(options));
-            userConfig = Object.assign(userConfig, parsedOptions.config);
-            return userConfig;
-        }
-        catch (err) {
-            // TODO: Handle those errors so they don't directly bubble up to the users
-            throw new Error(`An error occurred while extracting the configurations ${err}`);
-        }
-    }
-    initializeSocket() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.socket = new socket_1.default(this.config);
-            this.socket.onMessage = this.handleNewMessage;
-            this.socket.setup();
-            yield this.socket.connect();
-            this.props.setSocket(this.socket);
-        });
-    }
-    setupObserver() {
-        (0, mobx_1.observe)(this.props.dimensions, 'container', (data) => {
-            if (data.newValue) {
-                // is this necessary ?
-                (0, webchatEvents_1.postMessageToParent)('UI.RESIZE', data.newValue, this.config.chatId);
-            }
-        });
-    }
-    isLazySocket() {
-        var _a;
-        if (this.config.lazySocket !== undefined) {
-            return this.config.lazySocket;
-        }
-        return (_a = this.props.botInfo) === null || _a === void 0 ? void 0 : _a.lazySocket;
-    }
-    renderWidget() {
-        if (!this.props.showWidgetButton) {
-            return null;
-        }
-        return (react_1.default.createElement("button", { className: (0, classnames_1.default)('bpw-widget-btn', 'bpw-floating-button', {
-                [`bpw-anim-${this.props.widgetTransition}` || 'none']: true
-            }), "aria-label": this.props.intl.formatMessage({ id: 'widget.toggle' }), onClick: this.props.showChat.bind(this) },
-            react_1.default.createElement(Chat_1.default, null),
-            this.props.hasUnreadMessages && react_1.default.createElement("span", { className: 'bpw-floating-button-unread' }, this.props.unreadCount)));
-    }
-    applyAndRenderStyle() {
-        var _a, _b, _c;
-        const parentClass = (0, classnames_1.default)(`bp-widget-web bp-widget-${this.props.activeView}`, {
-            'bp-widget-hidden': !this.props.showWidgetButton && this.props.displayWidgetView,
-            [(_a = this.props.config) === null || _a === void 0 ? void 0 : _a.className]: !!((_b = this.props.config) === null || _b === void 0 ? void 0 : _b.className)
-        });
-        if (this.parentClass !== parentClass) {
-            this.parentClass = parentClass;
-            (0, webchatEvents_1.postMessageToParent)('UI.SET-CLASS', parentClass, this.config.chatId);
-        }
-        const stylesheet = this.props.config.stylesheet;
-        const extraStylesheet = (_c = this.props.botInfo) === null || _c === void 0 ? void 0 : _c.extraStylesheet;
-        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("link", { rel: "stylesheet", type: "text/css", href: stylesheet }),
-            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("link", { rel: "stylesheet", type: "text/css", href: extraStylesheet })));
-    }
-    render() {
-        if (!this.props.isWebchatReady) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { onFocus: this.handleResetUnreadCount },
-            this.applyAndRenderStyle(),
-            react_1.default.createElement("h1", { id: "tchat-label", className: "sr-only", tabIndex: -1 }, this.props.intl.formatMessage({
-                id: 'widget.title',
-                defaultMessage: 'Chat window'
-            })),
-            this.props.displayWidgetView ? this.renderWidget() : react_1.default.createElement(Container_1.default, null)));
-    }
-}
-exports.default = (0, mobx_react_1.inject)(({ store }) => ({
-    store,
-    config: store.config,
-    sendData: store.sendData,
-    initializeChat: store.initializeChat,
-    botInfo: store.botInfo,
-    fetchBotInfo: store.fetchBotInfo,
-    updateConfig: store.updateConfig,
-    mergeConfig: store.mergeConfig,
-    addEventToConversation: store.addEventToConversation,
-    clearMessages: store.clearMessages,
-    updateTyping: store.updateTyping,
-    sendMessage: store.sendMessage,
-    updateBotUILanguage: store.updateBotUILanguage,
-    isWebchatReady: store.view.isWebchatReady,
-    showWidgetButton: store.view.showWidgetButton,
-    hasUnreadMessages: store.view.hasUnreadMessages,
-    unreadCount: store.view.unreadCount,
-    resetUnread: store.view.resetUnread,
-    incrementUnread: store.view.incrementUnread,
-    activeView: store.view.activeView,
-    isFullscreen: store.view.isFullscreen,
-    showChat: store.view.showChat,
-    hideChat: store.view.hideChat,
-    toggleBotInfo: store.view.toggleBotInfo,
-    dimensions: store.view.dimensions,
-    widgetTransition: store.view.widgetTransition,
-    displayWidgetView: store.view.displayWidgetView,
-    setLoadingCompleted: store.view.setLoadingCompleted,
-    sendFeedback: store.sendFeedback,
-    updateLastMessage: store.updateLastMessage,
-    fetchConversation: store.fetchConversation,
-    createConversation: store.createConversation,
-    setIntlProvider: store.setIntlProvider,
-    setSocket: store.setSocket,
-    currentConversation: store.currentConversation,
-    currentConversationId: store.currentConversationId,
-    resetConversation: store.resetConversation
-}))((0, react_intl_1.injectIntl)((0, mobx_react_1.observer)(Web)));

package/dist/store/composer.d.ts

@@ -1,17 +0,0 @@
-import { RootStore } from '.';
-declare class ComposerStore {
-    private rootStore;
-    message: string;
-    locked: boolean;
-    hidden: boolean;
-    private _sentHistory;
-    private _sentHistoryIndex;
-    constructor(rootStore: RootStore);
-    get composerPlaceholder(): string | undefined;
-    updateMessage(msg: string): void;
-    addMessageToHistory(text: string): void;
-    recallHistory(direction: string): void;
-    setLocked(locked: boolean): void;
-    setHidden(hidden: boolean): void;
-}
-export default ComposerStore;

package/dist/store/composer.js

@@ -1,98 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const last_1 = __importDefault(require("lodash/last"));
-const takeRight_1 = __importDefault(require("lodash/takeRight"));
-const mobx_1 = require("mobx");
-const constants_1 = __importDefault(require("../core/constants"));
-const HISTORY_UP = 'ArrowUp';
-const SENT_HISTORY_KEY = 'sent-history';
-class ComposerStore {
-    constructor(rootStore) {
-        this.message = '';
-        this.locked = false;
-        this.hidden = false;
-        this._sentHistory = [];
-        this._sentHistoryIndex = 0;
-        this.rootStore = rootStore;
-        this._sentHistory = window.BP_STORAGE.get(SENT_HISTORY_KEY) || [];
-    }
-    get composerPlaceholder() {
-        var _a;
-        return (_a = this.rootStore.config) === null || _a === void 0 ? void 0 : _a.composerPlaceholder;
-    }
-    updateMessage(msg) {
-        this.message = msg;
-    }
-    addMessageToHistory(text) {
-        if ((0, last_1.default)(this._sentHistory) !== text) {
-            this._sentHistory.push(text);
-            this._sentHistoryIndex = 0;
-            if (this.rootStore.config.enablePersistHistory) {
-                window.BP_STORAGE.set(SENT_HISTORY_KEY, (0, takeRight_1.default)(this._sentHistory, constants_1.default.SENT_HISTORY_SIZE));
-            }
-        }
-    }
-    recallHistory(direction) {
-        if (!this._sentHistory.length) {
-            return;
-        }
-        let newIndex = direction === HISTORY_UP ? this._sentHistoryIndex - 1 : this._sentHistoryIndex + 1;
-        if (newIndex < 0) {
-            newIndex = this._sentHistory.length - 1;
-        }
-        else if (newIndex >= this._sentHistory.length) {
-            newIndex = 0;
-        }
-        this.updateMessage(this._sentHistory[newIndex]);
-        this._sentHistoryIndex = newIndex;
-    }
-    setLocked(locked) {
-        this.locked = !!locked;
-    }
-    setHidden(hidden) {
-        this.hidden = hidden;
-    }
-}
-__decorate([
-    mobx_1.observable
-], ComposerStore.prototype, "message", void 0);
-__decorate([
-    mobx_1.observable
-], ComposerStore.prototype, "locked", void 0);
-__decorate([
-    mobx_1.observable
-], ComposerStore.prototype, "hidden", void 0);
-__decorate([
-    mobx_1.observable
-], ComposerStore.prototype, "_sentHistory", void 0);
-__decorate([
-    mobx_1.observable
-], ComposerStore.prototype, "_sentHistoryIndex", void 0);
-__decorate([
-    mobx_1.computed
-], ComposerStore.prototype, "composerPlaceholder", null);
-__decorate([
-    mobx_1.action.bound
-], ComposerStore.prototype, "updateMessage", null);
-__decorate([
-    mobx_1.action.bound
-], ComposerStore.prototype, "addMessageToHistory", null);
-__decorate([
-    mobx_1.action.bound
-], ComposerStore.prototype, "recallHistory", null);
-__decorate([
-    mobx_1.action.bound
-], ComposerStore.prototype, "setLocked", null);
-__decorate([
-    mobx_1.action.bound
-], ComposerStore.prototype, "setHidden", null);
-exports.default = ComposerStore;

package/dist/store/index.d.ts

@@ -1,89 +0,0 @@
-/// <reference types="node" />
-import { IntlShape } from 'react-intl';
-import BpSocket from '../core/socket';
-import { BotInfo, Config, CurrentConversation, EventFeedback, Message, QueuedMessage, RecentConversation, uuid } from '../typings';
-import ComposerStore from './composer';
-import ViewStore from './view';
-/** Includes the definitions of all store classes */
-export declare type StoreDef = Partial<RootStore> & Partial<ViewStore> & Partial<ComposerStore> & Partial<Config>;
-declare class RootStore {
-    composer: ComposerStore;
-    view: ViewStore;
-    private _typingInterval;
-    private api;
-    conversations: RecentConversation[];
-    currentConversation?: CurrentConversation;
-    selectedMessageId?: string;
-    botInfo: BotInfo;
-    config: Config;
-    preferredLanguage: string;
-    isInitialized: boolean;
-    messageFeedbacks: EventFeedback[];
-    intl: IntlShape;
-    isBotTyping: import("mobx").IObservableValue<boolean>;
-    botUILanguage: string;
-    delayedMessages: QueuedMessage[];
-    constructor(options: {
-        fullscreen: boolean;
-    }, config?: Config);
-    setIntlProvider(provider: IntlShape): void;
-    setSocket(socket: BpSocket): void;
-    setSelectedMessage(messageId: string): void;
-    get isConversationStarted(): boolean;
-    get botName(): string;
-    get hasBotInfoDescription(): boolean;
-    get botAvatarUrl(): string | undefined;
-    get coverPictureUrl(): string | undefined;
-    get description(): string | undefined;
-    get website(): string | undefined;
-    get phoneNumber(): string | undefined;
-    get termsConditions(): string | undefined;
-    get privacyPolicy(): string | undefined;
-    get emailAddress(): string | undefined;
-    get rtl(): boolean;
-    get escapeHTML(): boolean;
-    get currentMessages(): Message[];
-    get currentConversationId(): uuid | undefined;
-    updateMessages(messages: Message[]): void;
-    updateLastMessage(conversationId: string, message?: Message): void;
-    clearMessages(): void;
-    deleteConversation(): Promise<void>;
-    addEventToConversation(event: Message): Promise<void>;
-    updateTyping(event: Message): Promise<void>;
-    /** Loads the initial state, for the first time or when the user ID is changed. */
-    initializeChat(): Promise<void>;
-    fetchBotInfo(): Promise<void>;
-    fetchLanguage(): void;
-    /** Fetches the list of conversation, and update the corresponding config values */
-    fetchConversations(): Promise<void>;
-    /** Fetch the specified conversation ID, or try to fetch a valid one from the list */
-    fetchConversation(convoId?: uuid): Promise<uuid | undefined>;
-    /** Sends the specified message, or fetch the message in the composer */
-    sendMessage(textMessage?: string): Promise<void>;
-    /** Sends an event to start conversation & hide the bot info page */
-    startConversation(): Promise<void>;
-    /** Creates a new conversation and switches to it */
-    createConversation(): Promise<uuid>;
-    resetConversation(): void;
-    extractFeedback(messages: Message[]): Promise<void>;
-    sendFeedback(feedback: number, messageId: string): Promise<void>;
-    downloadConversation(): Promise<void>;
-    /** Sends an event or a message, depending on how the backend manages those types */
-    sendData(data: any): Promise<Message | void>;
-    /** Sends a message of type voice */
-    sendVoiceMessage(voice: Buffer, ext: string): Promise<void>;
-    /** Use this method to replace a value or add a new config */
-    mergeConfig(config: Partial<Config>): void;
-    /** This replaces all the configurations by this object */
-    updateConfig(config: Config): void;
-    private _applyConfig;
-    updatePreferredLanguage(lang: string): void;
-    /** Starts a timer to remove the typing animation when it's completed */
-    private _startTypingTimer;
-    private _expireTyping;
-    updateBotUILanguage(lang: string): void;
-    private emptyDelayedMessagesQueue;
-    /** Returns the current conversation ID, or the last one. */
-    private _getCurrentConvoId;
-}
-export { RootStore };