@botonic/react 0.23.1-alpha.0 → 0.23.2-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.23.1-alpha.0",
+  "version": "0.23.2-alpha.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -35,7 +35,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@botonic/core": "^0.23.0",
+    "@botonic/core": "0.23.1-alpha.0",
     "axios": "^1.4.0",
     "emoji-picker-react": "^4.4.9",
     "framer-motion": "^3.1.1",
@@ -78,10 +78,10 @@
     "jest-environment-jsdom": "^29.5.0",
     "react-test-renderer": "^16.14.0",
     "ts-jest": "^29.1.0",
-    "typescript": "^5.0.4"
+    "typescript": "5.0.4"
   },
   "engines": {
-    "node": ">=10.0.0"
+    "node": ">=14.0.0"
   },
   "keywords": [
     "bot-framework",

package/src/components/index-types.ts

@@ -128,7 +128,7 @@ export interface ThemeProps extends StyleProp {
   } & StyleProp & {
       timestamps?: {
         enable?: boolean
-        format(): string
+        format: () => string
       } & StyleProp
     }
   button?: {

package/src/components/multichannel/multichannel-text.jsx

@@ -18,7 +18,7 @@ import {
   getMultichannelReplies,
   isFacebook,
   isWhatsapp,
-  MENU_BUTOON_WHATSAPP_BUTTON_LIST,
+  MENU_BUTTON_WHATSAPP_BUTTON_LIST,
   MULTICHANNEL_WHATSAPP_PROPS,
   WHATSAPP_LIST_MAX_BUTTONS,
   WHATSAPP_MAX_BUTTONS,
@@ -81,14 +81,12 @@ export const MultichannelText = props => {
       const asText =
         type === buttonTypes.POSTBACK ? postbackButtonsAsText : true
       const newline =
-        multichannelContext.messageSeparator === null &&
+        multichannelContext.messageSeparator == null &&
         !newLineFirstButton &&
         i === 0
           ? ''
           : '\n'
-      if (type !== buttonTypes.POSTBACK && multichannelButton.props.payload) {
-        delete multichannelButton.props.payload
-      }
+
       return (
         <MultichannelButton
           key={`${type}${i}`}
@@ -115,7 +113,6 @@ export const MultichannelText = props => {
     return messages
   }
 
-  // START WHATSAPP LOGIC
   if (isWhatsapp(requestContext)) {
     const texts = getText(props.children)
     const { postbackButtons, urlButtons, webviewButtons } = getWhatsappButtons()
@@ -132,13 +129,12 @@ export const MultichannelText = props => {
     const buttonsTextSeparator =
       props.buttonsTextSeparator || DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR
 
-    //MORE THAN 3 BUTTONS
-    if (
-      !postbackButtonsAsText &&
-      postbackButtons.length > WHATSAPP_MAX_BUTTONS
-    ) {
+    const exceedWhatsAppMaxButtonNumber =
+      !postbackButtonsAsText && postbackButtons.length > WHATSAPP_MAX_BUTTONS
+
+    if (exceedWhatsAppMaxButtonNumber) {
       const menuButtonTextWhatsappList =
-        props.menuButtonTextWhatsappList || MENU_BUTOON_WHATSAPP_BUTTON_LIST
+        props.menuButtonTextWhatsappList || MENU_BUTTON_WHATSAPP_BUTTON_LIST
 
       const urlButtonElements = urlButtons.map(
         regenerateMultichannelButtons(!!texts.length)
@@ -153,7 +149,7 @@ export const MultichannelText = props => {
 
       const messages = messagesPostbackButtonList.map(
         (postbackButtons, index) => {
-          if (postbackButtons.length < 4) {
+          if (postbackButtons.length <= WHATSAPP_MAX_BUTTONS) {
             return {
               type: INPUT.TEXT,
               children: [...buttonsTextSeparator, ...postbackButtons],
@@ -166,7 +162,6 @@ export const MultichannelText = props => {
                 : postbackButton.props.payload,
               title: postbackButton.props.children,
             }
-            console.log({ row })
             return row
           })
           const whatsbuttonlistProps = {
@@ -223,14 +218,11 @@ export const MultichannelText = props => {
               </Text>
             )
           })}
-          {urlButtonElements.length ? messageWithUrlButtonElements : null}
-          {webviewButtonElements.length
-            ? messageWithWebviewButtonElements
-            : null}
+          {urlButtonElements.length > 0 && messageWithUrlButtonElements}
+          {webviewButtonElements.length > 0 && messageWithWebviewButtonElements}
         </>
       )
     }
-    // END LOGIC WHATSAPP WITH MORE THAN 3 BUTTONS
 
     multichannelContext.currentIndex = getDefaultIndex()
     const postbackButtonElements = postbackButtons.map(
@@ -264,9 +256,7 @@ export const MultichannelText = props => {
 
     return <>{messages}</>
   }
-  // END WHATSAPP LOGIC
 
-  // START FACEBOOK LOGIC
   if (isFacebook(requestContext)) {
     const text = getText(props.children)
     const multichannelFacebook = new MultichannelFacebook()

package/src/components/multichannel/multichannel-utils.js

@@ -11,7 +11,7 @@ export const WHATSAPP_MAX_BUTTONS = 3
 export const WHATSAPP_LIST_MAX_BUTTONS = 10
 export const WHATSAPP_MAX_BUTTON_CHARS = 20
 export const DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
-export const MENU_BUTOON_WHATSAPP_BUTTON_LIST = 'Menu'
+export const MENU_BUTTON_WHATSAPP_BUTTON_LIST = 'Show options'
 
 export function isMultichannelButton(node) {
   return isNodeKind(node, 'MultichannelButton')

package/src/contexts.tsx

@@ -0,0 +1,64 @@
+import { createContext } from 'react'
+
+import { WebchatContextProps } from './index-types'
+import { webchatInitialState } from './webchat/hooks'
+
+export const RequestContext = createContext({
+  getString: () => '',
+  setLocale: () => '',
+  session: {},
+  params: {},
+  input: {},
+  defaultDelay: 0,
+  defaultTyping: 0,
+})
+
+export const WebchatContext = createContext<WebchatContextProps>({
+  addMessage: () => {
+    return
+  },
+  closeWebview: () => {
+    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
+  },
+  sendAttachment: () => {
+    return
+  },
+  sendInput: () => {
+    return
+  },
+  sendPayload: () => {
+    return
+  },
+  sendText: () => {
+    return
+  },
+  theme: {},
+  toggleWebchat: () => {
+    return
+  },
+  updateLatestInput: () => {
+    return
+  },
+  updateMessage: () => {
+    return
+  },
+  updateReplies: () => {
+    return
+  },
+  updateUser: () => {
+    return
+  },
+  updateWebchatDevSettings: () => {
+    return
+  },
+  webchatState: webchatInitialState,
+})

package/src/index-types.ts

@@ -169,23 +169,23 @@ export interface Event {
 }
 
 export interface WebchatContextProps {
-  sendText: (text: string, payload?: string) => void
-  sendAttachment: (attachment: File) => void
-  sendPayload: (payload: string) => void
-  sendInput: (input: CoreInput) => void
-  openWebview: (webviewComponent: Webview) => void
   addMessage: (message: WebchatMessage) => void
-  updateMessage: (message: WebchatMessage) => void
-  updateReplies: (replies: boolean) => void
-  updateLatestInput: (input: CoreInput) => void
   closeWebview: () => void
-  toggleWebchat: (toggle: boolean) => void
-  getThemeProperty: (property: string, defaultValue?: string) => any
+  getThemeProperty: (property: string, defaultValue?: string | boolean) => any
+  openWebview: (webviewComponent: Webview) => void
   resolveCase: () => void
+  sendAttachment: (attachment: File) => void
+  sendInput: (input: CoreInput) => void
+  sendPayload: (payload: string) => void
+  sendText: (text: string, payload?: string) => void
   theme: ThemeProps
-  webchatState: WebchatState
-  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  toggleWebchat: (toggle: boolean) => void
+  updateLatestInput: (input: CoreInput) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: boolean) => void
   updateUser: (user: Partial<CoreSessionUser>) => void
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  webchatState: WebchatState
 }
 
 // export class DevApp extends WebchatApp {

package/src/webchat/actions.ts

@@ -0,0 +1,25 @@
+export enum WebchatAction {
+  ADD_MESSAGE = 'addMessage',
+  ADD_MESSAGE_COMPONENT = 'addMessageComponent',
+  UPDATE_MESSAGE = 'updateMessage',
+  UPDATE_REPLIES = 'updateReplies',
+  UPDATE_LATEST_INPUT = 'updateLatestInput',
+  UPDATE_TYPING = 'updateTyping',
+  UPDATE_WEBVIEW = 'updateWebview',
+  UPDATE_SESSION = 'updateSession',
+  UPDATE_LAST_ROUTE_PATH = 'updateLastRoutePath',
+  UPDATE_HANDOFF = 'updateHandoff',
+  UPDATE_THEME = 'updateTheme',
+  UPDATE_DEV_SETTINGS = 'updateDevSettings',
+  TOGGLE_WEBCHAT = 'toggleWebchat',
+  TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker',
+  TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu',
+  TOGGLE_COVER_COMPONENT = 'toggleCoverComponent',
+  DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent',
+  SET_ERROR = 'setError',
+  CLEAR_MESSAGES = 'clearMessages',
+  UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate',
+  SET_CURRENT_ATTACHMENT = 'setCurrentAttachment',
+  SET_ONLINE = 'setOnline',
+  UPDATE_JWT = 'updateJwt',
+}

package/src/webchat/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useComponentVisible } from './use-component-visible'
+export { useComponentWillMount } from './use-component-will-mount'
+export { usePrevious } from './use-previous'
+export { useTyping } from './use-typing'
+export { useWebchat, webchatInitialState } from './use-webchat'

package/src/webchat/hooks/use-component-visible.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface ComponentVisible {
+  ref: React.RefObject<HTMLElement>
+  isComponentVisible: boolean
+  setIsComponentVisible: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export function useComponentVisible(
+  initialIsVisible: boolean,
+  onClickOutside: () => void
+): ComponentVisible {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)
+  const ref = useRef<HTMLElement>(null)
+  const handleClickOutside = event => {
+    const target = event.path ? event.path[0] : event.target
+    if (ref.current && !ref.current.contains(target)) {
+      setIsComponentVisible(false)
+      onClickOutside()
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, false)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, false)
+    }
+  })
+  return { ref, isComponentVisible, setIsComponentVisible }
+}

package/src/webchat/hooks/use-component-will-mount.ts

@@ -0,0 +1,5 @@
+import { useMemo } from 'react'
+
+export const useComponentWillMount = func => {
+  useMemo(func, [])
+}

package/src/webchat/hooks/use-previous.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react'
+
+export function usePrevious(value) {
+  const ref = useRef()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

package/src/webchat/hooks/use-typing.ts

@@ -0,0 +1,43 @@
+import { useEffect } from 'react'
+
+import { WebchatMessage } from '../../index-types'
+import { scrollToBottom } from '../../util'
+import { WebchatState } from '../index-types'
+
+interface UseTyping {
+  webchatState: WebchatState
+  updateTyping: (typing: boolean) => void
+  updateMessage: (message: WebchatMessage) => void
+  host: any
+}
+
+export function useTyping({
+  webchatState,
+  updateTyping,
+  updateMessage,
+  host,
+}: UseTyping): void {
+  useEffect(() => {
+    let delayTimeout, typingTimeout
+    scrollToBottom({ host })
+    try {
+      const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]
+      if (nextMsg.delay && nextMsg.typing) {
+        delayTimeout = setTimeout(
+          () => updateTyping(true),
+          nextMsg.delay * 1000
+        )
+      } else if (nextMsg.typing) updateTyping(true)
+      const totalDelay = nextMsg.delay + nextMsg.typing
+      if (totalDelay)
+        typingTimeout = setTimeout(() => {
+          updateMessage({ ...nextMsg, display: true })
+          updateTyping(false)
+        }, totalDelay * 1000)
+    } catch (e) {}
+    return () => {
+      clearTimeout(delayTimeout)
+      clearTimeout(typingTimeout)
+    }
+  }, [webchatState.messagesJSON, webchatState.typing])
+}

package/src/webchat/hooks/use-webchat.ts

@@ -0,0 +1,213 @@
+import { Input, Session } from '@botonic/core'
+import { useReducer } from 'react'
+
+import { ThemeProps, Webview } from '../../components/index-types'
+import { COLORS, WEBCHAT } from '../../constants'
+import { WebchatMessage } from '../../index-types'
+import { WebchatAction } from '../actions'
+import { DevSettings, ErrorMessage, WebchatState } from '../index-types'
+import { webchatReducer } from '../webchat-reducer'
+
+export const webchatInitialState: WebchatState = {
+  width: WEBCHAT.DEFAULTS.WIDTH,
+  height: WEBCHAT.DEFAULTS.HEIGHT,
+  messagesJSON: [],
+  messagesComponents: [],
+  replies: [],
+  latestInput: {},
+  typing: false,
+  webview: null,
+  webviewParams: null,
+  session: { user: undefined },
+  lastRoutePath: null,
+  handoff: false,
+  theme: {
+    headerTitle: WEBCHAT.DEFAULTS.TITLE,
+    brandColor: COLORS.BOTONIC_BLUE,
+    brandImage: WEBCHAT.DEFAULTS.LOGO,
+    triggerButtonImage: undefined,
+    textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,
+    style: {
+      fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,
+    },
+  },
+  themeUpdates: {},
+  error: {},
+  online: true,
+  devSettings: { keepSessionOnReload: false },
+  isWebchatOpen: false,
+  isEmojiPickerOpen: false,
+  isPersistentMenuOpen: false,
+  isCoverComponentOpen: false,
+  isCustomComponentRendered: false,
+  lastMessageUpdate: undefined,
+  currentAttachment: undefined,
+  jwt: undefined,
+  unreadMessages: 0,
+}
+
+export function useWebchat() {
+  const [webchatState, webchatDispatch] = useReducer(
+    webchatReducer,
+    webchatInitialState
+  )
+
+  const addMessage = (message: WebchatMessage) =>
+    webchatDispatch({ type: WebchatAction.ADD_MESSAGE, payload: message })
+
+  const addMessageComponent = (message: WebchatMessage) =>
+    webchatDispatch({
+      type: WebchatAction.ADD_MESSAGE_COMPONENT,
+      payload: message,
+    })
+
+  const updateMessage = (message: WebchatMessage) =>
+    webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
+
+  const updateReplies = replies =>
+    webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies })
+
+  const updateLatestInput = (input: Input) =>
+    webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input })
+
+  const updateTyping = (typing: boolean) =>
+    webchatDispatch({ type: WebchatAction.UPDATE_TYPING, payload: typing })
+
+  const updateWebview = (webview: Webview, params: Record<string, string>) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_WEBVIEW,
+      payload: { webview, webviewParams: params },
+    })
+
+  const updateSession = (session: Session) => {
+    webchatDispatch({
+      type: WebchatAction.UPDATE_SESSION,
+      payload: session,
+    })
+  }
+
+  const updateLastRoutePath = (path: string) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_LAST_ROUTE_PATH,
+      payload: path,
+    })
+
+  const updateHandoff = (handoff: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_HANDOFF,
+      payload: handoff,
+    })
+
+  const updateTheme = (theme: ThemeProps, themeUpdates?: ThemeProps) => {
+    const payload =
+      themeUpdates !== undefined ? { theme, themeUpdates } : { theme }
+    webchatDispatch({
+      type: WebchatAction.UPDATE_THEME,
+      payload,
+    })
+  }
+
+  const updateDevSettings = (settings: DevSettings) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_DEV_SETTINGS,
+      payload: settings,
+    })
+
+  const toggleWebchat = (toggle: boolean) => {
+    webchatDispatch({
+      type: WebchatAction.TOGGLE_WEBCHAT,
+      payload: toggle,
+    })
+  }
+
+  const toggleEmojiPicker = (toggle: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.TOGGLE_EMOJI_PICKER,
+      payload: toggle,
+    })
+
+  const togglePersistentMenu = (toggle: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.TOGGLE_PERSISTENT_MENU,
+      payload: toggle,
+    })
+
+  const toggleCoverComponent = (toggle: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.TOGGLE_COVER_COMPONENT,
+      payload: toggle,
+    })
+
+  const doRenderCustomComponent = (toggle: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.DO_RENDER_CUSTOM_COMPONENT,
+      payload: toggle,
+    })
+
+  const setError = (error: ErrorMessage) =>
+    webchatDispatch({
+      type: WebchatAction.SET_ERROR,
+      payload: error,
+    })
+
+  const setOnline = (online: boolean) =>
+    webchatDispatch({
+      type: WebchatAction.SET_ONLINE,
+      payload: online,
+    })
+
+  const clearMessages = () => {
+    webchatDispatch({
+      type: WebchatAction.CLEAR_MESSAGES,
+    })
+  }
+
+  const updateLastMessageDate = (date: string) => {
+    webchatDispatch({
+      type: WebchatAction.UPDATE_LAST_MESSAGE_DATE,
+      payload: date,
+    })
+  }
+
+  const setCurrentAttachment = (attachment: File) => {
+    webchatDispatch({
+      type: WebchatAction.SET_CURRENT_ATTACHMENT,
+      payload: attachment,
+    })
+  }
+
+  const updateJwt = (jwt: string) => {
+    webchatDispatch({
+      type: WebchatAction.UPDATE_JWT,
+      payload: jwt,
+    })
+  }
+
+  return {
+    addMessage,
+    addMessageComponent,
+    clearMessages,
+    doRenderCustomComponent,
+    setCurrentAttachment,
+    setError,
+    setOnline,
+    toggleCoverComponent,
+    toggleEmojiPicker,
+    togglePersistentMenu,
+    toggleWebchat,
+    updateDevSettings,
+    updateHandoff,
+    updateJwt,
+    updateLastMessageDate,
+    updateLastRoutePath,
+    updateLatestInput,
+    updateMessage,
+    updateReplies,
+    updateSession,
+    updateTheme,
+    updateTyping,
+    updateWebview,
+    webchatDispatch,
+    webchatState,
+  }
+}

package/src/webchat/index-types.ts

@@ -1,7 +1,4 @@
-import type {
-  Input as CoreInput,
-  Session as CoreSession,
-} from '@botonic/core/lib/esm/models/legacy-types'
+import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { RefObject } from 'react'
 
 import { Webview } from '../components/index-types'
@@ -17,6 +14,14 @@ export interface WebchatStateTheme {
   }
 }
 
+export interface ErrorMessage {
+  message?: string
+}
+export interface DevSettings {
+  keepSessionOnReload?: boolean
+  showSessionView?: boolean
+}
+
 export interface WebchatState {
   width: number
   height: number
@@ -32,14 +37,18 @@ export interface WebchatState {
   handoff: boolean
   theme: WebchatStateTheme
   themeUpdates: Partial<WebchatStateTheme>
-  error: { message?: string }
-  devSettings: { keepSessionOnReload?: boolean; showSessionView?: boolean }
+  error: ErrorMessage
+  online: boolean
+  devSettings: DevSettings
   isWebchatOpen: boolean
   isEmojiPickerOpen: boolean
   isPersistentMenuOpen: boolean
   isCoverComponentOpen: boolean
-  lastMessageUpdate: string
-  currentAttachment: File | undefined
+  isCustomComponentRendered: boolean
+  lastMessageUpdate?: string
+  currentAttachment?: File
+  jwt?: string
+  unreadMessages: number
 }
 
 // export interface WebchatProps extends WebchatArgs {