@botonic/react 0.23.0 → 0.23.1

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 {

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

@@ -1,29 +1,26 @@
-import {
-  ADD_MESSAGE,
-  ADD_MESSAGE_COMPONENT,
-  CLEAR_MESSAGES,
-  UPDATE_LAST_MESSAGE_DATE,
-  UPDATE_MESSAGE,
-  UPDATE_REPLIES,
-} from './actions'
+import { WebchatAction } from './actions'
+import { WebchatState } from './index-types'
 
-export const messagesReducer = (state, action) => {
+export const messagesReducer = (
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+): WebchatState => {
   switch (action.type) {
-    case ADD_MESSAGE:
+    case WebchatAction.ADD_MESSAGE:
       return addMessageReducer(state, action)
-    case ADD_MESSAGE_COMPONENT:
-      return addMessageComponent(action, state)
-    case UPDATE_MESSAGE:
+    case WebchatAction.ADD_MESSAGE_COMPONENT:
+      return addMessageComponent(state, action)
+    case WebchatAction.UPDATE_MESSAGE:
       return updateMessageReducer(state, action)
-    case UPDATE_REPLIES:
+    case WebchatAction.UPDATE_REPLIES:
       return { ...state, replies: action.payload }
-    case CLEAR_MESSAGES:
+    case WebchatAction.CLEAR_MESSAGES:
       return {
         ...state,
         messagesJSON: [],
         messagesComponents: [],
       }
-    case UPDATE_LAST_MESSAGE_DATE:
+    case WebchatAction.UPDATE_LAST_MESSAGE_DATE:
       return {
         ...state,
         lastMessageUpdate: action.payload,
@@ -33,7 +30,10 @@ export const messagesReducer = (state, action) => {
   }
 }
 
-function addMessageComponent(action, state) {
+function addMessageComponent(
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+) {
   const messageComponent = action.payload
   const isUnreadMessage =
     !state.isWebchatOpen && messageComponent.props?.ack !== 1
@@ -48,7 +48,10 @@ function addMessageComponent(action, state) {
   }
 }
 
-function updateMessageReducer(state, action) {
+function updateMessageReducer(
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+) {
   const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id)
   if (msgIndex > -1) {
     const msgComponent = state.messagesComponents[msgIndex]
@@ -82,7 +85,10 @@ function updateMessageReducer(state, action) {
   return state
 }
 
-function addMessageReducer(state, action) {
+function addMessageReducer(
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+) {
   if (
     state.messagesJSON &&
     state.messagesJSON.find(m => m.id === action.payload.id)

package/src/webchat/trigger-button/index.tsx

@@ -55,7 +55,6 @@ export const TriggerButton = (): JSX.Element => {
         </UnreadMessagesCounter>
       )}
       {CustomTriggerButton ? (
-        //@ts-ignore
         <CustomTriggerButton />
       ) : (
         <StyledTriggerButton

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

@@ -1,41 +1,27 @@
-import {
-  DO_RENDER_CUSTOM_COMPONENT,
-  SET_CURRENT_ATTACHMENT,
-  SET_ERROR,
-  SET_ONLINE,
-  TOGGLE_COVER_COMPONENT,
-  TOGGLE_EMOJI_PICKER,
-  TOGGLE_PERSISTENT_MENU,
-  TOGGLE_WEBCHAT,
-  UPDATE_DEV_SETTINGS,
-  UPDATE_HANDOFF,
-  UPDATE_JWT,
-  UPDATE_LAST_ROUTE_PATH,
-  UPDATE_LATEST_INPUT,
-  UPDATE_SESSION,
-  UPDATE_THEME,
-  UPDATE_TYPING,
-  UPDATE_WEBVIEW,
-} from './actions'
+import { WebchatAction } from './actions'
+import { WebchatState } from './index-types'
 import { messagesReducer } from './messages-reducer'
 
 // eslint-disable-next-line complexity
-export function webchatReducer(state, action) {
+export function webchatReducer(
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+): WebchatState {
   switch (action.type) {
-    case UPDATE_WEBVIEW:
+    case WebchatAction.UPDATE_WEBVIEW:
       return { ...state, ...action.payload }
-    case UPDATE_SESSION:
+    case WebchatAction.UPDATE_SESSION:
       return { ...state, session: { ...action.payload } }
-    case UPDATE_TYPING:
+    case WebchatAction.UPDATE_TYPING:
       return { ...state, typing: action.payload }
-    case UPDATE_THEME:
+    case WebchatAction.UPDATE_THEME:
       return {
         ...state,
         ...action.payload,
       }
-    case UPDATE_HANDOFF:
+    case WebchatAction.UPDATE_HANDOFF:
       return { ...state, handoff: action.payload }
-    case TOGGLE_WEBCHAT: {
+    case WebchatAction.TOGGLE_WEBCHAT: {
       const isWebchatOpen = action.payload
       return {
         ...state,
@@ -43,27 +29,27 @@ export function webchatReducer(state, action) {
         unreadMessages: isWebchatOpen ? 0 : state.unreadMessages,
       }
     }
-    case TOGGLE_EMOJI_PICKER:
+    case WebchatAction.TOGGLE_EMOJI_PICKER:
       return { ...state, isEmojiPickerOpen: action.payload }
-    case TOGGLE_PERSISTENT_MENU:
+    case WebchatAction.TOGGLE_PERSISTENT_MENU:
       return { ...state, isPersistentMenuOpen: action.payload }
-    case TOGGLE_COVER_COMPONENT:
+    case WebchatAction.TOGGLE_COVER_COMPONENT:
       return { ...state, isCoverComponentOpen: action.payload }
-    case DO_RENDER_CUSTOM_COMPONENT:
+    case WebchatAction.DO_RENDER_CUSTOM_COMPONENT:
       return { ...state, isCustomComponentRendered: action.payload }
-    case SET_ERROR:
+    case WebchatAction.SET_ERROR:
       return { ...state, error: action.payload || {} }
-    case SET_ONLINE:
+    case WebchatAction.SET_ONLINE:
       return { ...state, online: action.payload }
-    case UPDATE_DEV_SETTINGS:
+    case WebchatAction.UPDATE_DEV_SETTINGS:
       return { ...state, devSettings: { ...action.payload } }
-    case UPDATE_LATEST_INPUT:
+    case WebchatAction.UPDATE_LATEST_INPUT:
       return { ...state, latestInput: action.payload }
-    case UPDATE_LAST_ROUTE_PATH:
+    case WebchatAction.UPDATE_LAST_ROUTE_PATH:
       return { ...state, lastRoutePath: action.payload }
-    case SET_CURRENT_ATTACHMENT:
+    case WebchatAction.SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
-    case UPDATE_JWT:
+    case WebchatAction.UPDATE_JWT:
       return { ...state, jwt: action.payload }
     default:
       return messagesReducer(state, action)

package/src/webchat/webchat.jsx

@@ -165,7 +165,6 @@ export const Webchat = forwardRef((props, ref) => {
     setOnline,
     clearMessages,
     openWebviewT,
-    closeWebviewT,
     updateLastMessageDate,
     setCurrentAttachment,
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -496,8 +495,10 @@ export const Webchat = forwardRef((props, ref) => {
         from: SENDERS.user,
         src: temporaryDisplayUrl,
       }
-      if (isImage(input)) messageComponent = <Image {...mediaProps} />
-      else if (isAudio(input)) messageComponent = <Audio {...mediaProps} />
+      if (isImage(input)) {
+        mediaProps.input = input
+        messageComponent = <Image {...mediaProps} />
+      } else if (isAudio(input)) messageComponent = <Audio {...mediaProps} />
       else if (isVideo(input)) messageComponent = <Video {...mediaProps} />
       else if (isDocument(input))
         messageComponent = <Document {...mediaProps} />
@@ -844,21 +845,21 @@ export const Webchat = forwardRef((props, ref) => {
   const WebchatComponent = (
     <WebchatContext.Provider
       value={{
-        sendText,
-        sendAttachment,
-        sendPayload,
-        sendInput,
+        addMessage,
+        getThemeProperty,
         openWebview,
         resolveCase,
-        webchatState,
-        getThemeProperty,
-        addMessage,
+        sendAttachment,
+        sendInput,
+        sendPayload,
+        sendText,
         toggleWebchat,
+        updateLatestInput,
         updateMessage,
         updateReplies,
-        updateLatestInput,
         updateUser: updateSessionWithUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
+        webchatState,
       }}
     >
       {!webchatState.isWebchatOpen && <TriggerButton />}

package/lib/cjs/webchat/hooks.d.ts

@@ -1,81 +0,0 @@
-export function useWebchat(): {
-    webchatState: any;
-    webchatDispatch: import("react").DispatchWithoutAction;
-    addMessage: (message: any) => void;
-    addMessageComponent: (message: any) => void;
-    updateMessage: (message: any) => void;
-    updateReplies: (replies: any) => void;
-    updateLatestInput: (input: any) => void;
-    updateTyping: (typing: any) => void;
-    updateWebview: (webview: any, params: any) => void;
-    updateSession: (session: any) => void;
-    updateLastRoutePath: (path: any) => void;
-    updateHandoff: (handoff: any) => void;
-    updateTheme: (theme: any, themeUpdates?: undefined) => void;
-    updateDevSettings: (settings: any) => void;
-    toggleWebchat: (toggle: any) => void;
-    toggleEmojiPicker: (toggle: any) => void;
-    togglePersistentMenu: (toggle: any) => void;
-    toggleCoverComponent: (toggle: any) => void;
-    doRenderCustomComponent: (toggle: any) => void;
-    setError: (error: any) => void;
-    setOnline: (online: any) => void;
-    clearMessages: () => void;
-    updateLastMessageDate: (date: any) => void;
-    setCurrentAttachment: (attachment: any) => void;
-    updateJwt: (jwt: any) => void;
-};
-export function useTyping({ webchatState, updateTyping, updateMessage, host }: {
-    webchatState: any;
-    updateTyping: any;
-    updateMessage: any;
-    host: any;
-}): void;
-export function usePrevious(value: any): undefined;
-export function useComponentVisible(initialIsVisible: any, onClickOutside: any): {
-    ref: import("react").MutableRefObject<null>;
-    isComponentVisible: any;
-    setIsComponentVisible: import("react").Dispatch<any>;
-};
-export namespace webchatInitialState {
-    let width: number;
-    let height: number;
-    let messagesJSON: never[];
-    let messagesComponents: never[];
-    let replies: never[];
-    let latestInput: {};
-    let typing: boolean;
-    let webview: null;
-    let webviewParams: null;
-    namespace session {
-        let user: null;
-    }
-    let lastRoutePath: null;
-    let handoff: boolean;
-    namespace theme {
-        let headerTitle: string;
-        let brandColor: string;
-        let brandImage: any;
-        let triggerButtonImage: undefined;
-        let textPlaceholder: string;
-        namespace style {
-            let fontFamily: string;
-        }
-    }
-    let themeUpdates: {};
-    let error: {};
-    let online: boolean;
-    namespace devSettings {
-        let keepSessionOnReload: boolean;
-    }
-    let isWebchatOpen: boolean;
-    let isEmojiPickerOpen: boolean;
-    let isPersistentMenuOpen: boolean;
-    let isCoverComponentOpen: boolean;
-    let isCustomComponentRendered: boolean;
-    let lastMessageUpdate: undefined;
-    let currentAttachment: undefined;
-    let jwt: null;
-    let unreadMessages: number;
-}
-export function useComponentWillMount(func: any): void;