@botonic/react 0.20.1 → 0.20.4

package/src/components/index.d.ts

@@ -102,13 +102,17 @@ export interface PersistentMenuProps {
   options: any
 }
 
-export type BlockInputOption = { match: RegExp[]; message: string }
+export type BlockInputOption = {
+  preprocess?: (message: string) => string
+  match: RegExp[]
+  message: string
+}
 
 export interface BlobProps {
   blobTick?: boolean
   blobTickStyle?: any
   blobWidth?: string
-  imagestyle?: any
+  imageStyle?: any
 }
 
 export interface ScrollbarProps {
@@ -185,7 +189,7 @@ export interface ThemeProps extends StyleProp {
 }
 
 export interface CoverComponentOptions {
-  component: React.Component<CoverComponentProps>
+  component: React.ComponentType<CoverComponentProps>
   props?: any
 }
 

package/src/constants.js

@@ -65,6 +65,7 @@ export const WEBCHAT = {
     enableAnimations: 'animations.enable',
     markdownStyle: 'markdownStyle',
     scrollbar: 'scrollbar',
+    imagePreviewer: 'imagePreviewer',
     // Mobile
     mobileBreakpoint: 'mobileBreakpoint',
     mobileStyle: 'mobileStyle',

package/src/index.d.ts

@@ -25,10 +25,6 @@ export interface Route extends core.Route {
 }
 type Routes = core.Routes<Route>
 
-export interface BotOptions extends core.BotOptions {
-  routes: Routes
-}
-
 export class ReactBot extends core.CoreBot {
   renderReactActions({
     actions,
@@ -37,7 +33,7 @@ export class ReactBot extends core.CoreBot {
 }
 
 export class NodeApp {
-  constructor(options: Omit<BotOptions, 'renderer'>)
+  constructor(options: Omit<core.CoreBotConfig, 'renderer'>)
   bot: ReactBot
   input(request: core.BotRequest): Promise<BotResponse>
   renderNode(args): string
@@ -116,7 +112,7 @@ export interface WebchatArgs {
   onOpen?: (app: WebchatApp, args: any) => void
   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
   persistentMenu?: PersistentMenuTheme
-  storage?: Storage
+  storage?: Storage | null
   storageKey?: any
   theme?: ThemeProps
 }
@@ -175,6 +171,7 @@ export class WebchatApp {
   clearMessages(): void
   close(): void
   closeCoverComponent(): void
+  destroy(): void
   getComponent(
     host: HTMLElement,
     optionsAtRuntime?: WebchatAppArgs
@@ -191,7 +188,7 @@ export class WebchatApp {
   onUserInput(args: OnUserInputArgs): Promise<void>
   open(): void
   openCoverComponent(): void
-  render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
+  render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
   resendUnsentInputs(): Promise<void>
   resolveWebchatVisibility(optionsAtRuntime: {
     appId: string
@@ -202,12 +199,14 @@ export class WebchatApp {
   toggleCoverComponent(): void
   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
   updateLastMessageDate(date: string): void
-  updateUser(user: core.SessionUser): void
+  updateUser(user: Partial<core.SessionUser>): void
   updateWebchatSettings(settings: WebchatSettingsProps): void
+  renderCustomComponent(customComponent: React.ReactNode): void
+  unmountCustomComponent(): void
 }
 
 export interface WebchatContextProps {
-  sendText: (text: string) => void
+  sendText: (text: string, payload?: string) => void
   sendAttachment: (attachment: File) => void
   sendPayload: (payload: string) => void
   sendInput: (input: core.Input) => void
@@ -223,7 +222,7 @@ export interface WebchatContextProps {
   theme: ThemeProps
   webchatState: WebchatState
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  updateUser: (user: core.SessionUser) => void
+  updateUser: (user: Partial<core.SessionUser>) => void
 }
 export const WebchatContext: React.Context<WebchatContextProps>
 export type WebchatContext = React.Context<WebchatContextProps>

package/src/webchat/actions.jsx

@@ -14,6 +14,7 @@ export const TOGGLE_WEBCHAT = 'toggleWebchat'
 export const TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker'
 export const TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu'
 export const TOGGLE_COVER_COMPONENT = 'toggleCoverComponent'
+export const DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent'
 export const SET_ERROR = 'setError'
 export const CLEAR_MESSAGES = 'clearMessages'
 export const UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate'

package/src/webchat/hooks.js

@@ -6,6 +6,7 @@ import {
   ADD_MESSAGE,
   ADD_MESSAGE_COMPONENT,
   CLEAR_MESSAGES,
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
@@ -59,6 +60,7 @@ export const webchatInitialState = {
   isEmojiPickerOpen: false,
   isPersistentMenuOpen: false,
   isCoverComponentOpen: false,
+  isCustomComponentRendered: false,
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
   jwt: null,
@@ -137,6 +139,11 @@ export function useWebchat() {
       type: TOGGLE_COVER_COMPONENT,
       payload: toggle,
     })
+  const doRenderCustomComponent = toggle =>
+    webchatDispatch({
+      type: DO_RENDER_CUSTOM_COMPONENT,
+      payload: toggle,
+    })
   const setError = error =>
     webchatDispatch({
       type: SET_ERROR,
@@ -192,6 +199,7 @@ export function useWebchat() {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,

package/src/webchat/webchat-reducer.js

@@ -1,4 +1,5 @@
 import {
+  DO_RENDER_CUSTOM_COMPONENT,
   SET_CURRENT_ATTACHMENT,
   SET_ERROR,
   SET_ONLINE,
@@ -18,6 +19,7 @@ import {
 } from './actions'
 import { messagesReducer } from './messages-reducer'
 
+// eslint-disable-next-line complexity
 export function webchatReducer(state, action) {
   switch (action.type) {
     case UPDATE_WEBVIEW:
@@ -41,6 +43,8 @@ export function webchatReducer(state, action) {
       return { ...state, isPersistentMenuOpen: action.payload }
     case TOGGLE_COVER_COMPONENT:
       return { ...state, isCoverComponentOpen: action.payload }
+    case DO_RENDER_CUSTOM_COMPONENT:
+      return { ...state, isCustomComponentRendered: action.payload }
     case SET_ERROR:
       return { ...state, error: action.payload || {} }
     case SET_ONLINE:

package/src/webchat/webchat.jsx

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 import Textarea from 'react-textarea-autosize'
 import styled, { StyleSheetManager } from 'styled-components'
@@ -183,6 +184,7 @@ export const Webchat = forwardRef((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleCoverComponent,
+    doRenderCustomComponent,
     setError,
     setOnline,
     clearMessages,
@@ -199,16 +201,14 @@ export const Webchat = forwardRef((props, ref) => {
   const { initialSession, initialDevSettings, onStateChange } = props
   const getThemeProperty = _getThemeProperty(theme)
 
-  const storage = props.storage === undefined ? localStorage : props.storage
+  const [customComponent, setCustomComponent] = useState(null)
+  const storage = props.storage
   const storageKey =
     typeof props.storageKey === 'function'
       ? props.storageKey()
       : props.storageKey
 
-  const [botonicState, saveState] = useStorageState(
-    storage,
-    storageKey || WEBCHAT.DEFAULTS.STORAGE_KEY
-  )
+  const [botonicState, saveState] = useStorageState(storage, storageKey)
 
   const host = props.host || document.body
 
@@ -402,9 +402,13 @@ export const Webchat = forwardRef((props, ref) => {
   )
 
   const getBlockInputs = (rule, inputData) => {
+    const processedInput = rule.preprocess
+      ? rule.preprocess(inputData)
+      : inputData
+
     return rule.match.some(regex => {
       if (typeof regex === 'string') regex = deserializeRegex(regex)
-      return regex.test(inputData)
+      return regex.test(processedInput)
     })
   }
 
@@ -559,6 +563,11 @@ export const Webchat = forwardRef((props, ref) => {
     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
     openCoverComponent: () => toggleCoverComponent(true),
     closeCoverComponent: () => toggleCoverComponent(false),
+    renderCustomComponent: _customComponent => {
+      setCustomComponent(_customComponent)
+      doRenderCustomComponent(true)
+    },
+    unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
     openWebviewApi: component => openWebviewT(component),
@@ -886,6 +895,11 @@ export const Webchat = forwardRef((props, ref) => {
     )
   }
 
+  const _renderCustomComponent = () => {
+    if (!customComponent) return <></>
+    else return customComponent
+  }
+
   const WebchatComponent = (
     <WebchatContext.Provider
       value={{
@@ -916,6 +930,7 @@ export const Webchat = forwardRef((props, ref) => {
           {triggerButton()}
         </div>
       )}
+
       {webchatState.isWebchatOpen && (
         <StyledWebchat
           // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
@@ -948,6 +963,9 @@ export const Webchat = forwardRef((props, ref) => {
           {!webchatState.handoff && userInputArea()}
           {webchatState.webview && webchatWebview()}
           {webchatState.isCoverComponentOpen && coverComponent()}
+          {webchatState.isCustomComponentRendered &&
+            customComponent &&
+            _renderCustomComponent()}
         </StyledWebchat>
       )}
     </WebchatContext.Provider>

package/src/webchat-app.jsx

@@ -1,7 +1,7 @@
 import { HubtypeService, INPUT } from '@botonic/core'
 import merge from 'lodash.merge'
 import React, { createRef } from 'react'
-import { render } from 'react-dom'
+import { render, unmountComponentAtNode } from 'react-dom'
 
 import { SENDERS, WEBCHAT } from './constants'
 import { msgToBotonic } from './msg-to-botonic'
@@ -51,8 +51,8 @@ export class WebchatApp {
     this.hostId = hostId || WEBCHAT.DEFAULTS.HOST_ID
     this.defaultDelay = defaultDelay
     this.defaultTyping = defaultTyping
-    this.storage = storage
-    this.storageKey = storageKey
+    this.storage = storage === undefined ? localStorage : storage
+    this.storageKey = storageKey || WEBCHAT.DEFAULTS.STORAGE_KEY
     this.onInit = onInit
     this.onOpen = onOpen
     this.onClose = onClose
@@ -211,6 +211,14 @@ export class WebchatApp {
     this.webchatRef.current.closeCoverComponent()
   }
 
+  renderCustomComponent(_customComponent) {
+    this.webchatRef.current.renderCustomComponent(_customComponent)
+  }
+
+  unmountCustomComponent() {
+    this.webchatRef.current.unmountCustomComponent()
+  }
+
   toggleCoverComponent() {
     this.webchatRef.current.toggleCoverComponent()
   }
@@ -278,9 +286,9 @@ export class WebchatApp {
     enableAnimations = enableAnimations || this.enableAnimations
     defaultDelay = defaultDelay || this.defaultDelay
     defaultTyping = defaultTyping || this.defaultTyping
-    storage = storage || this.storage
-    storageKey = storageKey || this.storageKey
     server = server || this.server
+    this.storage = storage || this.storage
+    this.storageKey = storageKey || this.storageKey
     this.onInit = onInit || this.onInit
     this.onOpen = onOpen || this.onOpen
     this.onClose = onClose || this.onClose
@@ -343,6 +351,12 @@ export class WebchatApp {
     return false
   }
 
+  destroy() {
+    if (this.hubtypeService) this.hubtypeService.destroyPusher()
+    unmountComponentAtNode(this.host)
+    if (this.storage) this.storage.removeItem(this.storageKey)
+  }
+
   async render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(async () => {
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)