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

package/src/webchat/hooks/index.ts

@@ -6,6 +6,5 @@ export { useScrollToBottom } from './use-scroll-to-bottom'
 export { useScrollbarController } from './use-scrollbar-controller'
 export { useTyping } from './use-typing'
 export { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'
-export { useWebchat, webchatInitialState } from './use-webchat'
 export { useWebchatDimensions } from './use-webchat-dimensions'
 export { useWebchatResizer } from './use-webchat-resizer'

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

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

package/src/webchat/hooks/use-scroll-to-bottom.ts

@@ -3,11 +3,17 @@ import {
   getWebchatElement,
 } from '../../util/dom'
 
+interface UseScrollToBottom {
+  host: any
+  behavior?: ScrollBehavior
+  timeout?: number
+}
+
 export const useScrollToBottom = ({
   host,
   behavior = 'smooth',
   timeout = 200,
-}) => {
+}: UseScrollToBottom) => {
   const scrollToBottom = () => {
     const webchatElement = getWebchatElement(host)
     if (!webchatElement) return
@@ -17,7 +23,7 @@ export const useScrollToBottom = ({
     setTimeout(() => {
       scrollableMessagesListElement.scrollTo({
         top: scrollableMessagesListElement.scrollHeight,
-        behavior: behavior as ScrollBehavior,
+        behavior: behavior,
       })
     }, timeout)
   }

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

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { DEVICES, isMobileDevice } from '../devices'
 
 // TODO: Investigate why when we have some messages, scroll actions are not disabled properly
@@ -25,12 +25,16 @@ const stopAtScrollLimit = element => {
 }
 
 export const useScrollbarController = (currentDevice, host) => {
-  const { webchatRef, chatAreaRef, repliesRef, scrollableMessagesListRef } =
-    useContext(WebchatContext)
+  const {
+    webchatContainerRef,
+    chatAreaRef,
+    repliesRef,
+    scrollableMessagesListRef,
+  } = useContext(WebchatContext)
 
   const hasScrollbar = () => {
     if (chatAreaRef.current && scrollableMessagesListRef.current) {
-      if (!repliesRef) {
+      if (!repliesRef?.current) {
         return (
           scrollableMessagesListRef.current?.scrollHeight >
           chatAreaRef.current?.clientHeight
@@ -70,25 +74,25 @@ export const useScrollbarController = (currentDevice, host) => {
   }
 
   const toggleOnTouchMoveEvents = () => {
-    if (webchatRef.current && scrollableMessagesListRef.current) {
+    if (webchatContainerRef.current && scrollableMessagesListRef.current) {
       if (hasScrollbar()) {
         scrollableMessagesListRef.current.style.touchAction = 'auto'
-        webchatRef.current.style.touchAction = 'auto'
-        webchatRef.current.ontouchmove = null
-        webchatRef.current.ontouchstart = null
+        webchatContainerRef.current.style.touchAction = 'auto'
+        webchatContainerRef.current.ontouchmove = null
+        webchatContainerRef.current.ontouchstart = null
         return
       }
 
       scrollableMessagesListRef.current.style.touchAction = 'none'
-      webchatRef.current.style.touchAction = 'none'
+      webchatContainerRef.current.style.touchAction = 'none'
     }
-    if (webchatRef.current) {
-      webchatRef.current.ontouchstart = e => {
+    if (webchatContainerRef.current) {
+      webchatContainerRef.current.ontouchstart = e => {
         if (e.target === e.currentTarget) {
           e.preventDefault()
         }
       }
-      webchatRef.current.ontouchmove = e => {
+      webchatContainerRef.current.ontouchmove = e => {
         if (e.target === e.currentTarget) {
           e.preventDefault()
         }
@@ -122,22 +126,23 @@ export const useScrollbarController = (currentDevice, host) => {
   }
 
   const handleScrollEvents = () => {
-    if (webchatRef.current) {
+    if (webchatContainerRef.current) {
       if (isMobileDevice()) {
         if (currentDevice !== DEVICES.MOBILE.IPHONE) return
 
         limitScrollBoundaries()
 
-        webchatRef.current.ontouchstart = handleOnTouchMoveEvents
-        webchatRef.current.ontouchmove = handleOnTouchMoveEvents
+        webchatContainerRef.current.ontouchstart = handleOnTouchMoveEvents
+        webchatContainerRef.current.ontouchmove = handleOnTouchMoveEvents
       } else {
-        webchatRef.current.onmouseover = e => handleOnMouseOverEvents(e)
+        webchatContainerRef.current.onmouseover = e =>
+          handleOnMouseOverEvents(e)
       }
     }
   }
 
   useEffect(() => {
-    const webchat = webchatRef.current
+    const webchat = webchatContainerRef.current
 
     handleScrollEvents()
 

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { WebchatMessage } from '../../index-types'
-import { WebchatState } from '../index-types'
+import { WebchatState } from '../context'
 
 interface UseTyping {
   webchatState: WebchatState

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

@@ -1,17 +1,17 @@
 import { useCallback, useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 
 export const useWebchatDimensions = () => {
   const {
-    webchatRef,
+    webchatContainerRef,
     headerRef,
     inputPanelRef,
     webchatState: { isWebchatOpen },
   } = useContext(WebchatContext)
 
   const calculateResizedPercentualWebchatHeight = useCallback(() => {
-    const webchatElement = webchatRef.current
+    const webchatElement = webchatContainerRef.current
     if (!isWebchatOpen || !webchatElement) return 0
     const webchatHeight = webchatElement.clientHeight || 0
     const keyboardOffset =
@@ -24,7 +24,7 @@ export const useWebchatDimensions = () => {
   }, [isWebchatOpen])
 
   const calculateResizedPxChatAreaHeight = useCallback(() => {
-    const webchatElement = webchatRef.current
+    const webchatElement = webchatContainerRef.current
     const headerElement = headerRef.current
     const inputPanelElement = inputPanelRef.current
 

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

@@ -1,10 +1,10 @@
 import { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { useWebchatDimensions } from './use-webchat-dimensions'
 
 export const useWebchatResizer = () => {
-  const { webchatRef, chatAreaRef, inputPanelRef, headerRef } =
+  const { webchatContainerRef, chatAreaRef, inputPanelRef, headerRef } =
     useContext(WebchatContext)
 
   const {
@@ -14,24 +14,24 @@ export const useWebchatResizer = () => {
 
   const handleKeyboardShown = () => {
     if (
-      webchatRef.current &&
+      webchatContainerRef.current &&
       chatAreaRef.current &&
       headerRef.current &&
       inputPanelRef.current
     ) {
-      webchatRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`
+      webchatContainerRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`
       chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
     }
   }
 
   const handleKeyboardHidden = () => {
     if (
-      webchatRef.current &&
+      webchatContainerRef.current &&
       chatAreaRef.current &&
       inputPanelRef.current &&
       headerRef.current
     ) {
-      webchatRef.current.style.height = '100%'
+      webchatContainerRef.current.style.height = '100%'
       chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
     }
   }

package/src/webchat/index-types.ts

@@ -1,69 +1,8 @@
-import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
-import { RefObject } from 'react'
+import { WebchatArgs } from '../index-types'
 
-import { Webview } from '../components/index-types'
-
-export interface WebchatStateTheme {
-  headerTitle: string
-  brandColor: string
-  brandImage: string
-  triggerButtonImage: undefined
-  textPlaceholder: string
-  style: {
-    fontFamily: string
-  }
-}
-
-export interface ErrorMessage {
-  message?: string
-}
-export interface DevSettings {
-  keepSessionOnReload?: boolean
-  showSessionView?: boolean
-}
-
-export interface WebchatState {
-  width: number
-  height: number
-  messagesJSON: any[]
-  messagesComponents: any[]
-  replies: any[]
-  latestInput: Partial<CoreInput>
-  typing: boolean
-  webview: Webview | null
-  webviewParams: null
-  session: Partial<CoreSession>
-  lastRoutePath: string | null
-  handoff: boolean
-  theme: WebchatStateTheme
-  themeUpdates: Partial<WebchatStateTheme>
-  error: ErrorMessage
-  online: boolean
-  devSettings: DevSettings
-  isWebchatOpen: boolean
-  isEmojiPickerOpen: boolean
-  isPersistentMenuOpen: boolean
-  isCoverComponentOpen: boolean
-  isCustomComponentRendered: boolean
-  lastMessageUpdate?: string
-  currentAttachment?: File
-  numUnreadMessages: number
-  isLastMessageVisible: boolean
-}
-
-// export interface WebchatProps extends WebchatArgs {
-export interface WebchatProps {
-  ref: RefObject<any>
-  onConnectionRegained?: () => Promise<void>
-}
-
-export interface WebchatDevProps extends WebchatProps {
+export interface WebchatDevProps extends WebchatArgs {
   initialDevSettings?: {
     keepSessionOnReload?: boolean
     showSessionView?: boolean
   }
 }
-
-export interface CoverComponentProps {
-  closeComponent: () => void
-}

package/src/webchat/index.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+export { WebchatContext } from './context'
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 

package/src/webchat/input-panel/attachment.tsx

@@ -1,38 +1,27 @@
 import React, { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
-import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { ROLES } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface AttachmentProps {
   accept: string
-  enableAttachments: boolean
   onChange: (event: any) => void
 }
 
-export const Attachment = ({
-  accept,
-  enableAttachments,
-  onChange,
-}: AttachmentProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const Attachment = ({ accept, onChange }: AttachmentProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
   const fileInputRef = useRef<HTMLInputElement | null>(null)
 
-  const CustomAttachments = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customAttachments,
-    undefined
-  )
+  const CustomAttachments = webchatState.theme.userInput?.attachments?.custom
 
   const isAttachmentsEnabled = () => {
     const hasCustomAttachments = !!CustomAttachments
     return (
-      getThemeProperty(
-        WEBCHAT.CUSTOM_PROPERTIES.enableAttachments,
-        enableAttachments
-      ) ?? hasCustomAttachments
+      webchatState.theme.userInput?.attachments?.enable ?? hasCustomAttachments
     )
   }
   const attachmentsEnabled = isAttachmentsEnabled()

package/src/webchat/input-panel/emoji-picker.tsx

@@ -1,34 +1,24 @@
 import React, { useContext } from 'react'
 
 import LogoEmoji from '../../assets/emojiButton.svg'
-import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { ROLES } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface EmojiPickerProps {
-  enableEmojiPicker: boolean
   onClick: () => void
 }
 
-export const EmojiPicker = ({
-  enableEmojiPicker,
-  onClick,
-}: EmojiPickerProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const EmojiPicker = ({ onClick }: EmojiPickerProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
-  const CustomEmojiPicker = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker,
-    undefined
-  )
+  const CustomEmojiPicker = webchatState.theme.userInput?.emojiPicker?.custom
 
   const isEmojiPickerEnabled = () => {
     const hasCustomEmojiPicker = !!CustomEmojiPicker
     return (
-      getThemeProperty(
-        WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker,
-        enableEmojiPicker
-      ) ?? hasCustomEmojiPicker
+      webchatState.theme.userInput?.emojiPicker?.enable ?? hasCustomEmojiPicker
     )
   }
   const emojiPickerEnabled = isEmojiPickerEnabled()

package/src/webchat/input-panel/index.tsx

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { getFullMimeWhitelist } from '../../message-utils'
+import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
 import { Attachment } from './attachment'
 import { EmojiPicker } from './emoji-picker'
@@ -15,19 +15,13 @@ import { UserInputContainer } from './styles'
 import { Textarea } from './textarea'
 
 interface InputPanelProps {
-  persistentMenu: any
-  enableEmojiPicker: boolean
-  enableAttachments: boolean
   handleAttachment: (event: any) => void
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   host: HTMLElement
   onUserInput?: (event: any) => Promise<void>
 }
 
 export const InputPanel = ({
-  persistentMenu,
-  enableEmojiPicker,
-  enableAttachments,
   handleAttachment,
   textareaRef,
   host,
@@ -43,6 +37,8 @@ export const InputPanel = ({
   } = useContext(WebchatContext)
 
   const handleSelectedEmoji = event => {
+    if (!textareaRef.current) return
+
     textareaRef.current.value += event.emoji
     textareaRef.current.focus()
   }
@@ -56,7 +52,9 @@ export const InputPanel = ({
   }
 
   const sendTextAreaText = async () => {
-    await sendText(textareaRef.current.value)
+    if (!textareaRef.current) return
+
+    await sendText(textareaRef.current?.value)
     textareaRef.current.value = ''
   }
 
@@ -92,23 +90,18 @@ export const InputPanel = ({
         />
       )}
 
-      <PersistentMenu onClick={handleMenu} persistentMenu={persistentMenu} />
+      <PersistentMenu onClick={handleMenu} />
 
       <Textarea
         host={host}
-        persistentMenu={persistentMenu}
         textareaRef={textareaRef}
         sendChatEvent={sendChatEvent}
         sendTextAreaText={sendTextAreaText}
       />
 
-      <EmojiPicker
-        enableEmojiPicker={enableEmojiPicker}
-        onClick={handleEmojiClick}
-      />
+      <EmojiPicker onClick={handleEmojiClick} />
 
       <Attachment
-        enableAttachments={enableAttachments}
         onChange={handleAttachment}
         accept={getFullMimeWhitelist().join(',')}
       />

package/src/webchat/input-panel/persistent-menu.tsx

@@ -1,31 +1,21 @@
 import React, { useContext } from 'react'
 
 import LogoMenu from '../../assets/menuButton.svg'
-import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { ROLES } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface PersistentMenuProps {
-  persistentMenu: any
   onClick: () => void
 }
 
-export const PersistentMenu = ({
-  onClick,
-  persistentMenu,
-}: PersistentMenuProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const PersistentMenu = ({ onClick }: PersistentMenuProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
-  const persistentMenuOptions = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-    persistentMenu
-  )
+  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
 
-  const CustomMenuButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customMenuButton,
-    undefined
-  )
+  const CustomMenuButton = webchatState.theme.userInput?.menuButton?.custom
 
   return (
     <>

package/src/webchat/input-panel/send-button.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
@@ -11,17 +11,11 @@ interface SendButtonProps {
 }
 
 export const SendButton = ({ onClick }: SendButtonProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+  const { webchatState } = useContext(WebchatContext)
 
-  const sendButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableSendButton,
-    true
-  )
+  const sendButtonEnabled = webchatState.theme.userInput?.sendButton?.enable
 
-  const CustomSendButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customSendButton,
-    undefined
-  )
+  const CustomSendButton = webchatState.theme.userInput?.sendButton?.custom
 
   return (
     <>

package/src/webchat/input-panel/textarea.tsx

@@ -1,39 +1,37 @@
 import React, { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { PersistentMenuTheme } from '../../components/index-types'
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Typing } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
-  persistentMenu: PersistentMenuTheme
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>
 }
 
 export const Textarea = ({
   host,
-  persistentMenu,
   textareaRef,
   sendChatEvent,
   sendTextAreaText,
 }: TextareaProps) => {
-  const { getThemeProperty, webchatState } = useContext(WebchatContext)
+  const { webchatState, setIsInputFocused } = useContext(WebchatContext)
 
   useDeviceAdapter(host, webchatState.isWebchatOpen)
 
   let isTyping = false
   let typingTimeout
 
-  const persistentMenuOptions = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-    persistentMenu
-  )
+  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
+
+  const placeholder = webchatState.theme.userInput?.box?.placeholder
+
+  const userInputBoxStyle = webchatState.theme.userInput?.box?.style
 
   const onKeyDown = event => {
     if (event.keyCode === 13 && event.shiftKey === false) {
@@ -44,6 +42,8 @@ export const Textarea = ({
   }
 
   const onKeyUp = () => {
+    if (!textareaRef.current) return
+
     if (textareaRef.current.value === '') {
       stopTyping()
       return
@@ -71,18 +71,25 @@ export const Textarea = ({
     sendChatEvent(Typing.Off)
   }
 
+  const handleFocus = () => {
+    setIsInputFocused(true)
+  }
+
+  const handleBlur = () => {
+    setIsInputFocused(false)
+  }
+
   return (
     <TextAreaContainer>
       <TextareaAutosize
         ref={(ref: HTMLTextAreaElement) => (textareaRef.current = ref)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         name='text'
         maxRows={4}
         wrap='soft'
         maxLength={1000}
-        placeholder={getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder,
-          WEBCHAT.DEFAULTS.PLACEHOLDER
-        )}
+        placeholder={placeholder}
         autoFocus={false}
         onKeyDown={e => onKeyDown(e)}
         onKeyUp={onKeyUp}
@@ -98,7 +105,7 @@ export const Textarea = ({
           padding: 10,
           paddingLeft: persistentMenuOptions ? 0 : 10,
           fontFamily: 'inherit',
-          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle),
+          ...userInputBoxStyle,
         }}
       />
     </TextAreaContainer>