@botonic/react 0.31.5-alpha.1 → 0.32.0

package/src/webchat/context/types.ts

@@ -0,0 +1,86 @@
+import {
+  Input as CoreInput,
+  Session as CoreSession,
+  SessionUser as CoreSessionUser,
+} from '@botonic/core'
+
+import { Reply, WebchatSettingsProps, Webview } from '../../components'
+import { CloseWebviewOptions } from '../../contexts'
+import { TrackEventFunction, WebchatMessage } from '../../index-types'
+import { WebchatStateTheme } from '../index-types'
+import { ThemeProps } from '../theme/types'
+
+export interface ErrorMessage {
+  message?: string
+}
+
+export interface DevSettings {
+  keepSessionOnReload?: boolean
+  showSessionView?: boolean
+}
+
+export interface WebchatState {
+  width: number // TODO: move this inside webchatState.theme.style
+  height: number // TODO: move this inside webchatState.theme.style
+  messagesJSON: any[]
+  messagesComponents: any[]
+  replies?: (typeof Reply)[]
+  latestInput: Partial<CoreInput>
+  typing: boolean
+  webview: Webview | null
+  webviewParams: null
+  session: Partial<CoreSession>
+  lastRoutePath?: string
+  handoff: boolean
+  theme: WebchatStateTheme // TODO: type this as ThemeProps
+  themeUpdates: Partial<WebchatStateTheme> // TODO: type this as Partial<ThemeProps>
+  error: ErrorMessage
+  online: boolean
+  devSettings: DevSettings
+  isWebchatOpen: boolean
+  isEmojiPickerOpen: boolean
+  isPersistentMenuOpen: boolean
+  isCoverComponentOpen: boolean
+  isCustomComponentRendered: boolean
+  lastMessageUpdate?: string
+  currentAttachment?: File
+  numUnreadMessages: number
+  isLastMessageVisible: boolean
+  isInputFocused: boolean
+}
+
+// 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
+  getThemeProperty: (property: string, defaultValue?: any) => any
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
+  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>
+  setIsInputFocused: (isInputFocused: boolean) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
+  theme: ThemeProps // TODO: Remove this attribute and use allways webchatState.theme
+  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: (typeof Reply)[]) => void
+  updateUser: (user: Partial<CoreSessionUser>) => void
+  updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
+  trackEvent?: TrackEventFunction
+  webchatState: WebchatState
+  webchatContainerRef: 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>
+}

package/src/webchat/{hooks → context}/use-webchat.ts

@@ -1,12 +1,14 @@
-import { Input, Session } from '@botonic/core'
+import { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
-import { ThemeProps, Webview } from '../../components/index-types'
+import { Reply } from '../../components'
+import { Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
-import { ClientInput, WebchatMessage } from '../../index-types'
-import { WebchatAction } from '../actions'
-import { DevSettings, ErrorMessage, WebchatState } from '../index-types'
-import { webchatReducer } from '../webchat-reducer'
+import { WebchatMessage } from '../../index-types'
+import { ThemeProps } from '../theme/types'
+import { WebchatAction } from './actions'
+import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
+import { webchatReducer } from './webchat-reducer'
 
 export const webchatInitialState: WebchatState = {
   width: WEBCHAT.DEFAULTS.WIDTH,
@@ -19,8 +21,9 @@ export const webchatInitialState: WebchatState = {
   webview: null,
   webviewParams: null,
   session: { user: undefined },
-  lastRoutePath: null,
+  lastRoutePath: undefined,
   handoff: false,
+  // TODO: type create a defaultTheme using ThemeProps, and put this in initialState
   theme: {
     headerTitle: WEBCHAT.DEFAULTS.TITLE,
     brandColor: COLORS.BOTONIC_BLUE,
@@ -44,15 +47,53 @@ export const webchatInitialState: WebchatState = {
   currentAttachment: undefined,
   numUnreadMessages: 0,
   isLastMessageVisible: true,
+  isInputFocused: false,
 }
 
-export function useWebchat() {
+export interface UseWebchat {
+  addMessage: (message: WebchatMessage) => void
+  addMessageComponent: (message: { props: WebchatMessage }) => void
+  clearMessages: () => void
+  doRenderCustomComponent: (toggle: boolean) => void
+  resetUnreadMessages: () => void
+  setCurrentAttachment: (attachment?: File) => void
+  setError: (error?: ErrorMessage) => void
+  setIsInputFocused: (isInputFocused: boolean) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
+  setOnline: (online: boolean) => void
+  toggleCoverComponent: (toggle: boolean) => void
+  toggleEmojiPicker: (toggle: boolean) => void
+  togglePersistentMenu: (toggle: boolean) => void
+  toggleWebchat: (toggle: boolean) => void
+  updateDevSettings: (settings: DevSettings) => void
+  updateHandoff: (handoff: boolean) => void
+  updateLastMessageDate: (date: string) => void
+  updateLastRoutePath: (path: string) => void
+  updateLatestInput: (input: ClientInput) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: (typeof Reply)[]) => void
+  updateSession: (session: Partial<Session>) => void
+  updateTheme: (theme: ThemeProps, themeUpdates?: ThemeProps) => void
+  updateTyping: (typing: boolean) => void
+  updateWebview: (webview: Webview, params: Record<string, string>) => void
+  removeReplies: () => void
+  removeWebview: () => void
+  webchatState: WebchatState
+  webchatContainerRef: React.MutableRefObject<HTMLDivElement | null>
+  headerRef: React.MutableRefObject<HTMLDivElement | null>
+  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
+  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
+  repliesRef: React.MutableRefObject<HTMLDivElement | null>
+  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
+}
+
+export function useWebchat(): UseWebchat {
   const [webchatState, webchatDispatch] = useReducer(
     webchatReducer,
     webchatInitialState
   )
 
-  const webchatRef = useRef<HTMLDivElement | null>(null)
+  const webchatContainerRef = useRef<HTMLDivElement | null>(null)
   const chatAreaRef = useRef<HTMLDivElement | null>(null)
   const inputPanelRef = useRef<HTMLDivElement | null>(null)
   const headerRef = useRef<HTMLDivElement | null>(null)
@@ -71,9 +112,12 @@ export function useWebchat() {
   const updateMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
 
-  const updateReplies = replies =>
+  const updateReplies = (replies: (typeof Reply)[]) =>
     webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies })
 
+  const removeReplies = () =>
+    webchatDispatch({ type: WebchatAction.REMOVE_REPLIES, payload: [] })
+
   const updateLatestInput = (input: ClientInput) =>
     webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input })
 
@@ -86,7 +130,12 @@ export function useWebchat() {
       payload: { webview, webviewParams: params },
     })
 
-  const updateSession = (session: Session) => {
+  const removeWebview = () =>
+    webchatDispatch({
+      type: WebchatAction.REMOVE_WEBVIEW,
+    })
+
+  const updateSession = (session: Partial<Session>) => {
     webchatDispatch({
       type: WebchatAction.UPDATE_SESSION,
       payload: session,
@@ -151,7 +200,7 @@ export function useWebchat() {
       payload: toggle,
     })
 
-  const setError = (error: ErrorMessage) =>
+  const setError = (error?: ErrorMessage) =>
     webchatDispatch({
       type: WebchatAction.SET_ERROR,
       payload: error,
@@ -176,7 +225,7 @@ export function useWebchat() {
     })
   }
 
-  const setCurrentAttachment = (attachment: File) => {
+  const setCurrentAttachment = (attachment?: File) => {
     webchatDispatch({
       type: WebchatAction.SET_CURRENT_ATTACHMENT,
       payload: attachment,
@@ -196,6 +245,13 @@ export function useWebchat() {
     })
   }
 
+  const setIsInputFocused = (isInputFocused: boolean) => {
+    webchatDispatch({
+      type: WebchatAction.SET_IS_INPUT_FOCUSED,
+      payload: isInputFocused,
+    })
+  }
+
   return {
     addMessage,
     addMessageComponent,
@@ -204,6 +260,7 @@ export function useWebchat() {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -221,9 +278,10 @@ export function useWebchat() {
     updateTheme,
     updateTyping,
     updateWebview,
-    webchatDispatch,
+    removeReplies,
+    removeWebview,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     headerRef,
     chatAreaRef,
     scrollableMessagesListRef,

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

@@ -1,6 +1,6 @@
 import { WebchatAction } from './actions'
-import { WebchatState } from './index-types'
 import { messagesReducer } from './messages-reducer'
+import { WebchatState } from './types'
 
 // eslint-disable-next-line complexity
 export function webchatReducer(
@@ -10,6 +10,8 @@ export function webchatReducer(
   switch (action.type) {
     case WebchatAction.UPDATE_WEBVIEW:
       return { ...state, ...action.payload }
+    case WebchatAction.REMOVE_WEBVIEW:
+      return { ...state, webview: null, webviewParams: null }
     case WebchatAction.UPDATE_SESSION:
       return { ...state, session: { ...action.payload } }
     case WebchatAction.UPDATE_TYPING:
@@ -48,6 +50,8 @@ export function webchatReducer(
       return { ...state, lastRoutePath: action.payload }
     case WebchatAction.SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
+    case WebchatAction.SET_IS_INPUT_FOCUSED:
+      return { ...state, isInputFocused: action.payload }
     default:
       return messagesReducer(state, action)
   }

package/src/webchat/cover-component/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../context'
 
 interface Props {
   component: any

package/src/webchat/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  _botonicInsertStyles?: HTMLStyleElement[]
+}

package/src/webchat/header/default-header.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+
+import { COLORS, ROLES, WEBCHAT } from '../../constants'
+import { Scale } from '../../shared/styles'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
+import {
+  CloseHeader,
+  HeaderContainer,
+  ImageContainer,
+  Subtitle,
+  TextContainer,
+  Title,
+} from './styles'
+
+export const DefaultHeader = () => {
+  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    true
+  )
+
+  const headerImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
+    getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
+      WEBCHAT.DEFAULTS.LOGO
+    )
+  )
+
+  const headerTitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
+    WEBCHAT.DEFAULTS.TITLE
+  )
+
+  const headerSubtitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
+    ''
+  )
+
+  const handleCloseWebchat = () => {
+    toggleWebchat(false)
+  }
+
+  const color = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
+    COLORS.BOTONIC_BLUE
+  )
+
+  return (
+    <HeaderContainer
+      role={ROLES.HEADER}
+      color={color}
+      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
+    >
+      {headerImage && (
+        <ImageContainer>
+          <img src={resolveImage(headerImage)} />
+        </ImageContainer>
+      )}
+      <TextContainer>
+        <Title>{headerTitle}</Title>
+        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}
+      </TextContainer>
+      <ConditionalWrapper
+        condition={animationsEnabled}
+        wrapper={children => <Scale>{children}</Scale>}
+      >
+        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </HeaderContainer>
+  )
+}

package/src/webchat/header/index.tsx

@@ -0,0 +1,37 @@
+import React, { ForwardedRef, forwardRef, useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
+import { BotonicContainerId } from '../constants'
+import { DefaultHeader } from './default-header'
+import { StyledWebchatHeader } from './styles'
+
+export const WebchatHeader = forwardRef(
+  (_, ref: ForwardedRef<HTMLDivElement>) => {
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+    const handleCloseWebchat = () => {
+      toggleWebchat(false)
+    }
+
+    const CustomHeader = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.customHeader
+    )
+
+    if (CustomHeader) {
+      return (
+        <div id={BotonicContainerId.Header} ref={ref}>
+          <CustomHeader onCloseClick={handleCloseWebchat} />
+        </div>
+      )
+    }
+
+    return (
+      <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+        <DefaultHeader />
+      </StyledWebchatHeader>
+    )
+  }
+)
+
+WebchatHeader.displayName = 'WebchatHeader'

package/src/webchat/header/styles.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+  height: inherit;
+`
+
+export const ImageContainer = styled.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`
+
+export const Title = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const Subtitle = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const CloseHeader = styled.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`
+
+export const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`

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