@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

package/src/index-types.ts

@@ -1,10 +1,11 @@
 import {
+  BotContext,
   BotRequest as CoreBotRequest,
   Input as CoreInput,
   InputType as CoreInputType,
-  Plugin as CorePlugin,
   Route as CoreRoute,
   Routes as CoreRoutes,
+  ServerConfig,
   Session as CoreSession,
   SessionUser as CoreSessionUser,
 } from '@botonic/core'
@@ -13,14 +14,16 @@ import React from 'react'
 import {
   BlockInputOption,
   ButtonProps,
-  CoverComponentOptions,
-  PersistentMenuTheme,
   ReplyProps,
-  ThemeProps,
   WebchatSettingsProps,
-  Webview,
-} from './components/index-types'
-import { WebchatState } from './webchat/index-types'
+} from './components'
+import { CloseWebviewOptions } from './contexts'
+import { UseWebchat } from './webchat/context/use-webchat'
+import {
+  CoverComponentOptions,
+  PersistentMenuOptionsTheme,
+  WebchatTheme,
+} from './webchat/theme/types'
 import { WebchatApp } from './webchat-app'
 
 /**
@@ -35,62 +38,97 @@ export interface Route extends CoreRoute {
 }
 export type Routes = CoreRoutes<Route>
 
-// Parameters of the actions' botonicInit method
-export interface ActionRequest {
-  defaultDelay: number
-  defaultTyping: number
-  input: CoreInput
-  lastRoutePath: string
-  params: { [key: string]: string }
-  plugins: { [id: string]: CorePlugin }
-  session: CoreSession
-}
-
-export interface RequestContextInterface extends ActionRequest {
-  getString: (stringId: string) => string
-  setLocale: (locale: string) => string
+// Parameters of the actions in botonicInit method
+// the ActionRequest is provided by the context of the core-bot
+export type ActionRequest = BotContext
+
+export interface WebchatRef {
+  addBotResponse: ({
+    response,
+    session,
+    lastRoutePath,
+  }: AddBotResponseArgs) => void
+  setTyping: (typing: boolean) => void
+  addUserMessage: (message: any) => Promise<void>
+  updateUser: (userToUpdate: any) => void
+  openWebchat: () => void
+  closeWebchat: () => void
+  toggleWebchat: () => void
+  openCoverComponent: () => void
+  closeCoverComponent: () => void
+  toggleCoverComponent: () => void
+  renderCustomComponent: (customComponent: any) => void
+  unmountCustomComponent: () => void
+  isOnline: () => boolean
+  setOnline: (online: boolean) => void
+  getMessages: () => { id: string; ack: number; unsentInput: CoreInput }[] // TODO: define MessagesJSON
+  clearMessages: () => void
+  getLastMessageUpdate: () => string | undefined
+  updateMessageInfo: (msgId: string, messageInfo: any) => void
+  updateWebchatSettings: (settings: WebchatSettingsProps) => void
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
 }
 
-export interface CustomMessageType {
-  customTypeName: string
+interface AddBotResponseArgs {
+  response: any
+  session?: any
+  lastRoutePath?: any
 }
 
 export interface WebchatArgs {
-  blockInputs?: BlockInputOption[]
+  theme?: Partial<WebchatTheme>
+  persistentMenu?: PersistentMenuOptionsTheme
   coverComponent?: CoverComponentOptions
-  defaultDelay?: number
-  defaultTyping?: number
-  enableAnimations?: boolean
-  enableAttachments?: boolean
+  blockInputs?: BlockInputOption[]
   enableEmojiPicker?: boolean
+  enableAttachments?: boolean
   enableUserInput?: boolean
-  shadowDOM?: boolean | (() => boolean)
+  enableAnimations?: boolean
   hostId?: string
-  getString?: (stringId: string, session: CoreSession) => string
-  onClose?: (app: WebchatApp, args: any) => void
+  shadowDOM?: boolean | (() => boolean)
+  defaultDelay?: number
+  defaultTyping?: number
+  storage?: Storage | null
+  storageKey?: string
   onInit?: (app: WebchatApp, args: any) => void
-  onMessage?: (app: WebchatApp, message: WebchatMessage) => void
   onOpen?: (app: WebchatApp, args: any) => void
-  onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  onClose?: (app: WebchatApp, args: any) => void
+  onMessage?: (app: WebchatApp, message: WebchatMessage) => void
   onTrackEvent?: TrackEventFunction
-  persistentMenu?: PersistentMenuTheme
+  onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  appId?: string
+  visibility?: boolean | (() => boolean) | 'dynamic'
+  server?: ServerConfig
+}
+
+export interface WebchatProps {
+  webchatHooks?: UseWebchat
+  initialSession?: any
+  initialDevSettings?: any
+  onStateChange: (args: OnStateChangeArgs) => void
+
+  shadowDOM?: any
+  theme?: WebchatTheme
   storage?: Storage | null
-  storageKey?: any
-  theme?: ThemeProps
+  storageKey?: string | (() => string)
+  defaultDelay?: number
+  defaultTyping?: number
+  onInit?: (args?: any) => void
+  onOpen?: (args?: any) => void
+  onClose?: (args?: any) => void
+  onUserInput(args: OnUserInputArgs): Promise<void>
+  onTrackEvent?: TrackEventFunction
+  host?: any
+  server?: ServerConfig
 }
 
-type EventArgs = { [key: string]: any }
-type TrackEventFunction = (
+export type EventArgs = { [key: string]: any }
+export type TrackEventFunction = (
   request: ActionRequest,
   eventName: string,
   args?: EventArgs
 ) => Promise<void>
 
-export interface WebchatAppArgs {
-  appId?: string
-  visibility?: () => boolean
-}
-
 export enum SENDERS {
   bot = 'bot',
   user = 'user',
@@ -106,19 +144,19 @@ export interface WebchatMessage {
   ack: 0 | 1
   blob: boolean
   buttons: ButtonProps[]
-  children: any
-  data: any
+  children: any // messageJSON don't have children prop
+  data: any // if message.type === 'text' => message.data = {text: string}
   delay: number
   display: boolean
-  enabletimestamps: boolean
+  enabletimestamps?: boolean
   id: string
-  imagestyle: any
+  imagestyle?: any
   isUnread: boolean
   json: any
-  markdown: boolean
+  markdown: boolean // 0 | 1
   replies: ReplyProps[]
   sentBy: SENDERS
-  style: any
+  style?: any
   timestamp: string
   type: CoreInputType
   typing: number
@@ -128,7 +166,7 @@ export interface OnUserInputArgs {
   input: CoreInput
   lastRoutePath?: string
   session?: CoreSession
-  user: CoreSessionUser
+  user?: CoreSessionUser
 }
 
 export interface OnStateChangeArgs {
@@ -142,42 +180,20 @@ export interface MessageInfo {
   type: 'update_webchat_settings' | 'sender_action'
 }
 
-export interface Event {
-  action?: 'update_message_info'
+export type Event = ConnectionChangeEvent | UpdateMessageInfoEvent
+
+interface ConnectionChangeEvent {
+  action: 'connectionChange'
+  online: boolean
   isError?: boolean
   message?: MessageInfo
 }
 
-// ClientInput: type for sendInput and updateLatestInput function without message_id and bot_interaction_id because backend set this values
-export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
-
-export interface WebchatContextProps {
-  addMessage: (message: WebchatMessage) => void
-  closeWebview: () => Promise<void>
-  getThemeProperty: (property: string, defaultValue?: any) => any
-  openWebview: (webviewComponent: Webview, params?: any) => void
-  resetUnreadMessages: () => void
-  resolveCase: () => void
-  sendAttachment: (attachment: File) => Promise<void>
-  sendInput: (input: ClientInput) => Promise<void>
-  sendPayload: (payload: string) => Promise<void>
-  sendText: (text: string, payload?: string) => Promise<void>
-  setLastMessageVisible: (isLastMessageVisible: boolean) => void
-  theme: ThemeProps
-  toggleWebchat: (toggle: boolean) => void
-  toggleEmojiPicker: (toggle: boolean) => void
-  togglePersistentMenu: (toggle: boolean) => void
-  updateLatestInput: (input: ClientInput) => void
-  updateMessage: (message: WebchatMessage) => void
-  updateReplies: (replies: boolean) => void
-  updateUser: (user: Partial<CoreSessionUser>) => void
-  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
-  webchatState: WebchatState
-  trackEvent: TrackEventFunction
-  webchatRef: React.MutableRefObject<HTMLDivElement | null>
-  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
-  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
-  headerRef: React.MutableRefObject<HTMLDivElement | null>
-  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
-  repliesRef: React.MutableRefObject<HTMLDivElement | null>
+interface UpdateMessageInfoEvent {
+  action: 'update_message_info'
+  message: MessageInfo
+  isError?: boolean
 }
+
+export { CaseEventQueuePositionChangedInput } from '@botonic/core'
+export { WebchatTheme }

package/src/index.ts

@@ -1,10 +1,6 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
-export {
-  RequestContext,
-  WebchatContext,
-  WebviewRequestContext,
-} from './contexts'
+export { RequestContext, WebviewRequestContext } from './contexts'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'

package/src/msg-to-botonic.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Audio } from './components/audio'
-import { Button } from './components/button'
+import { Button } from './components/button/index'
 import { ButtonsDisabler } from './components/buttons-disabler'
 import { Carousel } from './components/carousel'
 import { Document } from './components/document'
@@ -32,7 +32,7 @@ import {
  * @param customMessageTypes {{customTypeName}[]?}
  * @return {React.ReactNode}
  */
-export function msgToBotonic(msg, customMessageTypes) {
+export function msgToBotonic(msg, customMessageTypes = []) {
   delete msg.display
   if (isCustom(msg)) {
     try {
@@ -56,28 +56,28 @@ export function msgToBotonic(msg, customMessageTypes) {
       <Image
         key={msg.key}
         {...msg}
-        src={msg.data.image != undefined ? msg.data.image : msg.data}
+        src={msg.data.image !== undefined ? msg.data.image : msg.data}
       />
     )
   } else if (isVideo(msg)) {
     return (
       <Video
         {...msg}
-        src={msg.data.video != undefined ? msg.data.video : msg.data}
+        src={msg.data.video !== undefined ? msg.data.video : msg.data}
       />
     )
   } else if (isAudio(msg)) {
     return (
       <Audio
         {...msg}
-        src={msg.data.audio != undefined ? msg.data.audio : msg.data}
+        src={msg.data.audio !== undefined ? msg.data.audio : msg.data}
       />
     )
   } else if (isDocument(msg)) {
     return (
       <Document
         {...msg}
-        src={msg.data.document != undefined ? msg.data.document : msg.data}
+        src={msg.data.document !== undefined ? msg.data.document : msg.data}
       />
     )
   } else if (isLocation(msg)) {
@@ -99,10 +99,6 @@ export function msgToBotonic(msg, customMessageTypes) {
   return null
 }
 
-function rndStr() {
-  return Math.random().toString()
-}
-
 /**
  * @param msgs {object|object[]}
  * @param customMessageTypes {{customTypeName}[]?}
@@ -133,7 +129,7 @@ function textToBotonic(msg) {
     return (
       <Text {...msg} key={msg.key}>
         {txt}
-        {quickrepliesParse(msg)}
+        {parseQuickReplies(msg)}
       </Text>
     )
   if (msg.buttons && msg.buttons.length)
@@ -186,7 +182,7 @@ function buttonsParse(buttons) {
   })
 }
 
-function quickrepliesParse(msg) {
+function parseQuickReplies(msg) {
   let replies = null
   if (msg.replies) {
     replies = msg.replies.map((el, i) => {

package/src/react-bot.tsx

@@ -0,0 +1,51 @@
+import { CoreBot } from '@botonic/core'
+import React from 'react'
+
+import { Text } from './components/text'
+import { RequestContext } from './contexts'
+import { ActionRequest } from './index-types'
+
+type ActionComponentType<P = any> = React.ComponentType<P> & {
+  botonicInit?: (request: ActionRequest) => Promise<P>
+  contextType?: React.Context<typeof RequestContext>
+  render: (props: P) => JSX.Element
+}
+interface RenderReactActionsArgs {
+  request: ActionRequest
+  actions: ActionComponentType[]
+}
+
+export class ReactBot extends CoreBot {
+  constructor(options: any) {
+    super({
+      defaultRoutes: [
+        {
+          path: '404',
+          action: () => <Text>I don't understand you</Text>, // eslint-disable-line
+        },
+      ],
+      renderer: (args: RenderReactActionsArgs) => this.renderReactActions(args),
+      ...options,
+    })
+  }
+
+  async renderReactActions({ request, actions }: RenderReactActionsArgs) {
+    const renderedActions: JSX.Element[] = []
+
+    for (const Action of actions) {
+      if (Action) {
+        const props = Action.botonicInit
+          ? await Action.botonicInit(request)
+          : {}
+        const renderedAction: JSX.Element = (
+          <RequestContext.Provider value={request}>
+            <Action {...props} />
+          </RequestContext.Provider>
+        )
+        renderedActions.push(renderedAction)
+      }
+    }
+
+    return renderedActions
+  }
+}

package/src/time-zone-to-country-code.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export const timeZoneToCountryCode: Record<string, string> = {
+  'Africa/Abidjan': 'CI',
+  'Africa/Accra': 'GH',
+  'Africa/Addis_Ababa': 'ET',
+  'Africa/Algiers': 'DZ',
+  'Africa/Asmara': 'ER',
+  'Africa/Bamako': 'ML',
+  'Africa/Bangui': 'CF',
+  'Africa/Banjul': 'GM',
+  'Africa/Bissau': 'GW',
+  'Africa/Blantyre': 'MW',
+  'Africa/Brazzaville': 'CG',
+  'Africa/Bujumbura': 'BI',
+  'Africa/Cairo': 'EG',
+  'Africa/Casablanca': 'MA',
+  'Africa/Ceuta': 'ES',
+  'Africa/Conakry': 'GN',
+  'Africa/Dakar': 'SN',
+  'Africa/Dar_es_Salaam': 'TZ',
+  'Africa/Djibouti': 'DJ',
+  'Africa/Douala': 'CM',
+  'Africa/El_Aaiun': 'EH',
+  'Africa/Freetown': 'SL',
+  'Africa/Gaborone': 'BW',
+  'Africa/Harare': 'ZW',
+  'Africa/Johannesburg': 'ZA',
+  'Africa/Juba': 'SS',
+  'Africa/Kampala': 'UG',
+  'Africa/Khartoum': 'SD',
+  'Africa/Kigali': 'RW',
+  'Africa/Kinshasa': 'CD',
+  'Africa/Lagos': 'NG',
+  'Africa/Libreville': 'GA',
+  'Africa/Lome': 'TG',
+  'Africa/Luanda': 'AO',
+  'Africa/Lubumbashi': 'CD',
+  'Africa/Lusaka': 'ZM',
+  'Africa/Malabo': 'GQ',
+  'Africa/Maputo': 'MZ',
+  'Africa/Maseru': 'LS',
+  'Africa/Mbabane': 'SZ',
+  'Africa/Mogadishu': 'SO',
+  'Africa/Monrovia': 'LR',
+  'Africa/Nairobi': 'KE',
+  'Africa/Ndjamena': 'TD',
+  'Africa/Niamey': 'NE',
+  'Africa/Nouakchott': 'MR',
+  'Africa/Ouagadougou': 'BF',
+  'Africa/Porto-Novo': 'BJ',
+  'Africa/Sao_Tome': 'ST',
+  'Africa/Tripoli': 'LY',
+  'Africa/Tunis': 'TN',
+  'Africa/Windhoek': 'NA',
+  'America/Argentina/Buenos_Aires': 'AR',
+  'America/Bogota': 'CO',
+  'America/Caracas': 'VE',
+  'America/Chicago': 'US',
+  'America/Denver': 'US',
+  'America/Guatemala': 'GT',
+  'America/Halifax': 'CA',
+  'America/La_Paz': 'BO',
+  'America/Lima': 'PE',
+  'America/Los_Angeles': 'US',
+  'America/Mexico_City': 'MX',
+  'America/Montevideo': 'UY',
+  'America/New_York': 'US',
+  'America/Phoenix': 'US',
+  'America/Santiago': 'CL',
+  'America/Sao_Paulo': 'BR',
+  'America/Toronto': 'CA',
+  'Asia/Bangkok': 'TH',
+  'Asia/Colombo': 'LK',
+  'Asia/Dubai': 'AE',
+  'Asia/Hong_Kong': 'HK',
+  'Asia/Jakarta': 'ID',
+  'Asia/Kolkata': 'IN',
+  'Asia/Manila': 'PH',
+  'Asia/Seoul': 'KR',
+  'Asia/Shanghai': 'CN',
+  'Asia/Singapore': 'SG',
+  'Asia/Taipei': 'TW',
+  'Asia/Tokyo': 'JP',
+  'Australia/Brisbane': 'AU',
+  'Australia/Melbourne': 'AU',
+  'Australia/Perth': 'AU',
+  'Australia/Sydney': 'AU',
+  'Europe/Amsterdam': 'NL',
+  'Europe/Berlin': 'DE',
+  'Europe/Brussels': 'BE',
+  'Europe/Bucharest': 'RO',
+  'Europe/Copenhagen': 'DK',
+  'Europe/Helsinki': 'FI',
+  'Europe/Lisbon': 'PT',
+  'Europe/London': 'GB',
+  'Europe/Madrid': 'ES',
+  'Europe/Oslo': 'NO',
+  'Europe/Paris': 'FR',
+  'Europe/Prague': 'CZ',
+  'Europe/Rome': 'IT',
+  'Europe/Stockholm': 'SE',
+  'Europe/Warsaw': 'PL',
+  'Pacific/Auckland': 'NZ',
+}

package/src/util/functional.ts

@@ -0,0 +1,31 @@
+function camelCaseToSnake(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1_$2')
+    .replace(/([A-Za-z])(\d)/g, '$1_$2')
+    .replace(/(\d)([A-Za-z])/g, '$1_$2')
+    .toLowerCase()
+}
+type Input = Record<string, any> | Record<string, any>[] | undefined
+
+export function toSnakeCaseKeys(input: Input): Input {
+  if (Array.isArray(input)) {
+    return input.map(item => toSnakeCaseKeys(item))
+  }
+
+  if (typeof input === 'object' && input !== null) {
+    const result = Object.keys(input).reduce((acc, key) => {
+      const snakeKey = camelCaseToSnake(key)
+      const value = input[key]
+      acc[snakeKey] =
+        typeof value === 'object' && value !== null
+          ? toSnakeCaseKeys(value)
+          : value
+
+      return acc
+    }, {})
+
+    return result
+  }
+
+  return input
+}

package/src/util/webchat.ts

@@ -0,0 +1,102 @@
+import merge from 'lodash.merge'
+import UAParser from 'ua-parser-js'
+import { v7 as uuidv7 } from 'uuid'
+
+import { WEBCHAT } from '../constants'
+import { timeZoneToCountryCode } from '../time-zone-to-country-code'
+import { ClientUser } from '../webchat/context/types'
+import { WebchatTheme } from '../webchat/theme/types'
+import { getProperty } from './objects'
+
+/**
+ * Returns the value of a property defined in bot's theme based on WEBCHAT.CUSTOM_PROPERTIES dictionary.
+ * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
+ * If property doesn't exist, returns the defaultValue.
+ */
+export const _getThemeProperty =
+  (theme: WebchatTheme) => (property: string, defaultValue?: any) => {
+    for (const [key, value] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
+      if (value === property) {
+        const nestedProperty = getProperty(theme, value)
+        if (nestedProperty !== undefined) return nestedProperty
+        const plainProperty = getProperty(theme, key)
+        if (plainProperty !== undefined) return plainProperty
+        return defaultValue
+      }
+    }
+    return undefined
+  }
+
+export const createUser = (): {
+  id: string
+  name: string
+} => {
+  const parser = new UAParser()
+  const ua = parser.getResult()
+  let name = `${ua.os.name} ${ua.browser.name}`
+  if (ua.device && ua.device.type) name = `${ua.device.type} ${name}`
+  return {
+    id: uuidv7(),
+    name,
+  }
+}
+export const initSession = (
+  session: any
+): { user: { id: string; name: string } } => {
+  if (!session) session = {}
+  const hasUserId = session?.user?.id !== undefined
+  if (!session.user || Object.keys(session.user).length === 0 || !hasUserId)
+    session.user = !hasUserId ? merge(session.user, createUser()) : createUser()
+  return session
+}
+
+export function updateUserLocaleAndCountry(user: Partial<ClientUser>) {
+  user.locale = getLocale(user)
+  user.country = getCountry(user)
+  user.system_locale = getSystemLocale(user)
+
+  return user
+}
+
+function getLocale(user: Partial<ClientUser>) {
+  if (user.locale) {
+    return user.locale
+  }
+
+  return user.extra_data?.language
+    ? (user.extra_data?.language as string)
+    : navigator.language
+}
+
+function getCountry(user: Partial<ClientUser>) {
+  if (user.country) {
+    return user.country
+  }
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const userCountry = timeZoneToCountryCode[timeZone]
+
+  return user.extra_data?.country
+    ? (user.extra_data?.country as string)
+    : userCountry
+}
+
+function getSystemLocale(user: Partial<ClientUser>) {
+  if (user.system_locale) {
+    return user.system_locale
+  }
+  return getLocale(user)
+}
+
+export const shouldKeepSessionOnReload = ({
+  initialDevSettings,
+  devSettings,
+}) => !initialDevSettings || (devSettings && devSettings.keepSessionOnReload)
+
+//TODO: Review param serverConfig if is of type ServerConfig this never have errorMessage
+export const getServerErrorMessage = serverConfig => {
+  if (!serverConfig || !serverConfig.errorMessage) return 'Connection issues'
+  if (typeof serverConfig.errorMessage === 'function') {
+    return serverConfig.errorMessage()
+  }
+  return serverConfig.errorMessage
+}

package/src/webchat/chat-area/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { BotonicContainerId } from '../constants'
+import { WebchatContext } from '../context'
 import { useWebchatDimensions } from '../hooks'
 import { WebchatMessageList } from '../message-list'
 import { WebchatReplies } from '../replies'
@@ -27,9 +27,7 @@ export const ChatArea = () => {
       height={chatAreaHeight}
     >
       <WebchatMessageList />
-      {replies && Object.keys(replies).length > 0 && (
-        <WebchatReplies replies={replies} />
-      )}
+      {replies && replies.length > 0 && <WebchatReplies />}
     </StyledChatArea>
   )
 }

package/src/webchat/components/conditional-animation.jsx

@@ -1,17 +1,17 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Scale } from '../../shared/styles'
 import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../context'
 
 export const ConditionalAnimation = props => {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    props.enableAnimations !== undefined ? props.enableAnimations : true
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
   )
+
   return (
     <ConditionalWrapper
       condition={animationsEnabled}