UNPKG

@botonic/react

Version:

Build Chatbots using React

78 lines 4.7 kB
import { __awaiter, __rest } from "tslib"; import { jsx as _jsx } from "react/jsx-runtime"; import merge from 'lodash.merge'; import React from 'react'; import { render } from 'react-dom'; import { SENDERS } from './index-types'; import { ReactBot } from './react-bot'; import { onDOMLoaded } from './util/dom'; import { WebchatDev } from './webchat/webchat-dev'; import { WebchatApp } from './webchat-app'; export class DevApp extends WebchatApp { constructor(_a) { var { theme = {}, persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, shadowDOM, hostId, storage, storageKey, onInit, onOpen, onClose, onMessage, onTrackEvent } = _a, botOptions = __rest(_a, ["theme", "persistentMenu", "coverComponent", "blockInputs", "enableEmojiPicker", "enableAttachments", "enableUserInput", "enableAnimations", "shadowDOM", "hostId", "storage", "storageKey", "onInit", "onOpen", "onClose", "onMessage", "onTrackEvent"]); super({ theme, persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, shadowDOM, hostId, storage, storageKey, onInit, onOpen, onClose, onMessage, onTrackEvent, }); this.bot = new ReactBot(Object.assign({}, botOptions)); } getComponent(host, optionsAtRuntime = {}) { let { theme = {}, persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, storage, storageKey, onInit, onOpen, onClose, onMessage, onTrackEvent, hostId } = optionsAtRuntime, webchatOptions = __rest(optionsAtRuntime, ["theme", "persistentMenu", "coverComponent", "blockInputs", "enableEmojiPicker", "enableAttachments", "enableUserInput", "enableAnimations", "storage", "storageKey", "onInit", "onOpen", "onClose", "onMessage", "onTrackEvent", "hostId"]); theme = merge(this.theme, theme); persistentMenu = persistentMenu || this.persistentMenu; coverComponent = coverComponent || this.coverComponent; blockInputs = blockInputs || this.blockInputs; enableEmojiPicker = enableEmojiPicker || this.enableEmojiPicker; enableAttachments = enableAttachments || this.enableAttachments; enableUserInput = enableUserInput || this.enableUserInput; enableAnimations = enableAnimations || this.enableAnimations; storage = storage || this.storage; storageKey = storageKey || this.storageKey; this.onInit = onInit || this.onInit; this.onOpen = onOpen || this.onOpen; this.onClose = onClose || this.onClose; this.onMessage = onMessage || this.onMessage; this.onTrackEvent = onTrackEvent || this.onTrackEvent; this.hostId = hostId || this.hostId; this.createRootElement(host); return (_jsx(WebchatDev, Object.assign({}, webchatOptions, { ref: this.webchatRef, host: this.host, shadowDOM: this.shadowDOM, theme: theme, persistentMenu: persistentMenu, coverComponent: coverComponent, blockInputs: blockInputs, enableEmojiPicker: enableEmojiPicker, enableAttachments: enableAttachments, enableUserInput: enableUserInput, enableAnimations: enableAnimations, storage: storage, storageKey: storageKey, getString: (stringId, session) => this.bot.getString(stringId, session), setLocale: (locale, session) => this.bot.setLocale(locale, session), onInit: (...args) => this.onInitWebchat(...args), onOpen: (...args) => this.onOpenWebchat(...args), onClose: (...args) => this.onCloseWebchat(...args), onUserInput: (...args) => this.onUserInput(...args), onTrackEvent: (...args) => this.onTrackEvent(...args) }))); } render(dest, optionsAtRuntime = {}) { onDOMLoaded(() => { render(this.getComponent(dest, optionsAtRuntime), this.getReactMountNode(dest)); }); } onUserInput({ input, session, lastRoutePath }) { return __awaiter(this, void 0, void 0, function* () { this.onMessage && this.onMessage(this, { sentBy: SENDERS.user, message: input, }); const resp = yield this.bot.input({ input, session, lastRoutePath }); this.onMessage && resp.response.map(r => this.onMessage(this, { sentBy: SENDERS.bot, message: r, })); this.webchatRef.current.addBotResponse(resp); }); } } //# sourceMappingURL=dev-app.js.map