@botonic/react 0.31.5-alpha.1 → 0.32.0-alpha.0

package/src/contexts.tsx

@@ -1,8 +1,7 @@
 import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { ActionRequest, WebchatContextProps } from './index-types'
-import { webchatInitialState } from './webchat/hooks'
+import { ActionRequest } from './index-types'
 
 export const RequestContext = createContext<
   Partial<ActionRequest> & {
@@ -27,86 +26,12 @@ export interface CloseWebviewOptions {
 
 export const WebviewRequestContext = createContext<{
   closeWebview: (options?: CloseWebviewOptions) => Promise<void>
-  getString: (stringId: string) => string
+  getString?: (stringId: string) => string
   params: Record<string, any>
-  session: CoreSession
+  session: Partial<CoreSession>
 }>({
   closeWebview: async () => undefined,
-  getString: () => '',
+  getString: undefined,
   params: {} as Record<string, any>,
-  session: {} as CoreSession,
-})
-
-export const WebchatContext = createContext<WebchatContextProps>({
-  addMessage: () => {
-    return
-  },
-  closeWebview: async () => {
-    return
-  },
-  getThemeProperty: () => {
-    return
-  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
-  openWebview: () => {
-    return
-  },
-  resolveCase: () => {
-    return
-  },
-  resetUnreadMessages: () => {
-    return
-  },
-  setLastMessageVisible: () => {
-    return
-  },
-  sendAttachment: async () => {
-    return
-  },
-  sendInput: async () => {
-    return
-  },
-  sendPayload: async () => {
-    return
-  },
-  sendText: async () => {
-    return
-  },
-  theme: {},
-  toggleCoverComponent: () => {
-    return
-  },
-  toggleWebchat: () => {
-    return
-  },
-  toggleEmojiPicker: () => {
-    return
-  },
-  togglePersistentMenu: () => {
-    return
-  },
-  updateLatestInput: () => {
-    return
-  },
-  updateMessage: () => {
-    return
-  },
-  updateReplies: () => {
-    return
-  },
-  updateUser: () => {
-    return
-  },
-  updateWebchatDevSettings: () => {
-    return
-  },
-  webchatState: webchatInitialState,
-  trackEvent: async () => {
-    return
-  },
-  webchatRef: { current: null },
-  chatAreaRef: { current: null },
-  inputPanelRef: { current: null },
-  headerRef: { current: null },
-  scrollableMessagesListRef: { current: null },
-  repliesRef: { current: null },
+  session: {} as Partial<CoreSession>,
 })

package/src/dev-app.jsx

@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
@@ -119,10 +119,10 @@ export class DevApp extends WebchatApp {
 
   render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(() => {
-      render(
-        this.getComponent(dest, optionsAtRuntime),
-        this.getReactMountNode(dest)
-      )
+      const devAppComponent = this.getComponent(dest, optionsAtRuntime)
+      const container = this.getReactMountNode(dest)
+      const reactRoot = createRoot(container)
+      reactRoot.render(devAppComponent)
     })
   }
 

package/src/index-types.ts

@@ -5,6 +5,7 @@ import {
   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,
+  ThemeProps,
+} from './webchat/theme/types'
 import { WebchatApp } from './webchat-app'
 
 /**
@@ -51,46 +54,100 @@ export interface RequestContextInterface extends ActionRequest {
   setLocale: (locale: string) => string
 }
 
-export interface CustomMessageType {
-  customTypeName: string
+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>
+}
+
+interface AddBotResponseArgs {
+  response: any
+  session?: any
+  lastRoutePath?: any
 }
 
 export interface WebchatArgs {
-  blockInputs?: BlockInputOption[]
+  theme?: ThemeProps
+  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
-  storage?: Storage | null
-  storageKey?: any
+  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?: ThemeProps
+  persistentMenu?: PersistentMenuOptionsTheme
+  coverComponent?: CoverComponentOptions
+  blockInputs?: BlockInputOption[]
+  enableEmojiPicker?: boolean
+  enableAttachments?: boolean
+  enableUserInput?: boolean
+  enableAnimations?: boolean
+  storage?: Storage | null
+  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 +163,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 +185,7 @@ export interface OnUserInputArgs {
   input: CoreInput
   lastRoutePath?: string
   session?: CoreSession
-  user: CoreSessionUser
+  user?: CoreSessionUser
 }
 
 export interface OnStateChangeArgs {
@@ -142,43 +199,17 @@ 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
-  toggleCoverComponent: (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
 }

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

@@ -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}[]?}

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.js → webchat.ts}

@@ -3,6 +3,7 @@ import UAParser from 'ua-parser-js'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../constants'
+import { ThemeProps } from '../webchat/theme/types'
 import { getProperty } from './objects'
 
 /**
@@ -11,13 +12,12 @@ import { getProperty } from './objects'
  * If property doesn't exist, returns the defaultValue.
  */
 export const _getThemeProperty =
-  theme =>
-  (property, defaultValue = undefined) => {
-    for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
-      if (v == property) {
-        const nestedProperty = getProperty(theme, v)
+  (theme: ThemeProps) => (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, k)
+        const plainProperty = getProperty(theme, key)
         if (plainProperty !== undefined) return plainProperty
         return defaultValue
       }
@@ -25,7 +25,10 @@ export const _getThemeProperty =
     return undefined
   }
 
-export const createUser = () => {
+export const createUser = (): {
+  id: string
+  name: string
+} => {
   const parser = new UAParser()
   const ua = parser.getResult()
   let name = `${ua.os.name} ${ua.browser.name}`
@@ -35,9 +38,11 @@ export const createUser = () => {
     name,
   }
 }
-export const initSession = session => {
+export const initSession = (
+  session: any
+): { user: { id: string; name: string } } => {
   if (!session) session = {}
-  const hasUserId = session.user && session.user.id !== undefined
+  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
@@ -48,6 +53,7 @@ export const shouldKeepSessionOnReload = ({
   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') {

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,9 +1,9 @@
 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)

package/src/webchat/components/opened-persistent-menu.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { Button } from '../../components/button'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../context'
 import { useComponentVisible } from '../hooks'
 
 const ButtonsContainer = styled.div`

package/src/webchat/{actions.ts → context/actions.ts}

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 export enum WebchatAction {
   ADD_MESSAGE = 'addMessage',
   ADD_MESSAGE_COMPONENT = 'addMessageComponent',
@@ -23,4 +24,7 @@ export enum WebchatAction {
   UPDATE_THEME = 'updateTheme',
   UPDATE_TYPING = 'updateTyping',
   UPDATE_WEBVIEW = 'updateWebview',
+  REMOVE_REPLIES = 'removeReplies',
+  REMOVE_WEBVIEW = 'removeWebview',
+  SET_IS_INPUT_FOCUSED = 'setIsInputFocused',
 }

package/src/webchat/context/index.tsx

@@ -0,0 +1,84 @@
+import { createContext } from 'react'
+
+import { WebchatContextProps } from './types'
+import { webchatInitialState } from './use-webchat'
+
+export { WebchatState } from './types'
+export { useWebchat, webchatInitialState } from './use-webchat'
+
+export const WebchatContext = createContext<WebchatContextProps>({
+  addMessage: () => {
+    return
+  },
+  getThemeProperty: () => {
+    return
+  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
+  closeWebview: async () => {
+    return
+  },
+  openWebview: () => {
+    return
+  },
+  resolveCase: () => {
+    return
+  },
+  resetUnreadMessages: () => {
+    return
+  },
+  setIsInputFocused: () => {
+    return
+  },
+  setLastMessageVisible: () => {
+    return
+  },
+  sendAttachment: async () => {
+    return
+  },
+  sendInput: async () => {
+    return
+  },
+  sendPayload: async () => {
+    return
+  },
+  sendText: async () => {
+    return
+  },
+  theme: {}, // TODO: Remove this attribute and use allways webchatState.theme
+  toggleCoverComponent: () => {
+    return
+  },
+  toggleWebchat: () => {
+    return
+  },
+  toggleEmojiPicker: () => {
+    return
+  },
+  togglePersistentMenu: () => {
+    return
+  },
+  updateLatestInput: () => {
+    return
+  },
+  updateMessage: () => {
+    return
+  },
+  updateReplies: () => {
+    return
+  },
+  updateUser: () => {
+    return
+  },
+  updateWebchatDevSettings: () => {
+    return
+  },
+  webchatState: webchatInitialState,
+  trackEvent: async () => {
+    return
+  },
+  webchatContainerRef: { current: null },
+  chatAreaRef: { current: null },
+  inputPanelRef: { current: null },
+  headerRef: { current: null },
+  scrollableMessagesListRef: { current: null },
+  repliesRef: { current: null },
+})

package/src/webchat/{messages-reducer.ts → context/messages-reducer.ts}

@@ -1,6 +1,6 @@
-import { SENDERS } from '../index-types'
+import { SENDERS } from '../../index-types'
 import { WebchatAction } from './actions'
-import { WebchatState } from './index-types'
+import { WebchatState } from './types'
 
 export const messagesReducer = (
   state: WebchatState,
@@ -15,6 +15,8 @@ export const messagesReducer = (
       return updateMessageReducer(state, action)
     case WebchatAction.UPDATE_REPLIES:
       return { ...state, replies: action.payload }
+    case WebchatAction.REMOVE_REPLIES:
+      return { ...state, replies: undefined }
     case WebchatAction.CLEAR_MESSAGES:
       return {
         ...state,