@botonic/react 0.20.2 → 0.20.5

package/src/components/button.jsx

@@ -85,6 +85,25 @@ export const Button = props => {
     }
   }
 
+  const getClassName = (isCustom = false) => {
+    if (isCustom) {
+      return 'button-custom'
+    }
+    if (props.payload) {
+      return 'button-payload'
+    }
+    if (props.url) {
+      return 'button-url'
+    }
+    if (props.webview) {
+      return 'button-webview'
+    }
+    if (props.path) {
+      return 'button-path'
+    }
+    return ''
+  }
+
   const renderBrowser = () => {
     const buttonStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.buttonStyle)
     const CustomButton = getThemeProperty(
@@ -92,7 +111,7 @@ export const Button = props => {
     )
     if (CustomButton) {
       return (
-        <div onClick={e => handleClick(e)}>
+        <div className={getClassName(true)} onClick={e => handleClick(e)}>
           <CustomButton>{props.children}</CustomButton>
         </div>
       )
@@ -119,6 +138,7 @@ export const Button = props => {
 
     return (
       <StyledButton
+        className={getClassName()}
         theme={theme}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}

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/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,14 +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
@@ -225,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/webchat.jsx

@@ -202,16 +202,13 @@ export const Webchat = forwardRef((props, ref) => {
   const getThemeProperty = _getThemeProperty(theme)
 
   const [customComponent, setCustomComponent] = useState(null)
-  const storage = props.storage === undefined ? localStorage : props.storage
+  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
 
@@ -405,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)
     })
   }
 

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
@@ -286,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
@@ -312,8 +312,8 @@ export class WebchatApp {
         enableAttachments={enableAttachments}
         enableUserInput={enableUserInput}
         enableAnimations={enableAnimations}
-        storage={storage}
-        storageKey={storageKey}
+        storage={this.storage}
+        storageKey={this.storageKey}
         defaultDelay={defaultDelay}
         defaultTyping={defaultTyping}
         onInit={(...args) => this.onInitWebchat(...args)}
@@ -351,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)