@botonic/react 1.0.0-dev.1 → 1.0.0-dev.2

package/src/experimental/webchat/webchat-reducer.js

@@ -0,0 +1,68 @@
+import {
+  SET_CURRENT_ATTACHMENT,
+  SET_ERROR,
+  SET_ONLINE,
+  TOGGLE_COVER_COMPONENT,
+  TOGGLE_EMOJI_PICKER,
+  TOGGLE_PERSISTENT_MENU,
+  TOGGLE_WEBCHAT,
+  UPDATE_BOT_STATE,
+  UPDATE_DEV_SETTINGS,
+  UPDATE_HANDOFF,
+  UPDATE_JWT,
+  UPDATE_LAST_ROUTE_PATH,
+  UPDATE_LATEST_INPUT,
+  UPDATE_SESSION,
+  UPDATE_THEME,
+  UPDATE_TYPING,
+  UPDATE_USER,
+  UPDATE_WEBVIEW,
+} from './actions'
+import { messagesReducer } from './messages-reducer'
+
+// eslint-disable-next-line complexity
+export function webchatReducer(state, action) {
+  switch (action.type) {
+    case UPDATE_WEBVIEW:
+      return { ...state, ...action.payload }
+    case UPDATE_TYPING:
+      return { ...state, typing: action.payload }
+    case UPDATE_THEME:
+      return {
+        ...state,
+        ...action.payload,
+      }
+    case UPDATE_HANDOFF:
+      return { ...state, handoff: action.payload }
+    case TOGGLE_WEBCHAT:
+      return { ...state, isWebchatOpen: action.payload }
+    case TOGGLE_EMOJI_PICKER:
+      return { ...state, isEmojiPickerOpen: action.payload }
+    case TOGGLE_PERSISTENT_MENU:
+      return { ...state, isPersistentMenuOpen: action.payload }
+    case TOGGLE_COVER_COMPONENT:
+      return { ...state, isCoverComponentOpen: action.payload }
+    case SET_ERROR:
+      return { ...state, error: action.payload || {} }
+    case SET_ONLINE:
+      return { ...state, online: action.payload }
+    case UPDATE_DEV_SETTINGS:
+      return { ...state, devSettings: { ...action.payload } }
+    case UPDATE_LATEST_INPUT:
+      return { ...state, latestInput: action.payload }
+    case UPDATE_LAST_ROUTE_PATH:
+      return { ...state, lastRoutePath: action.payload }
+    case SET_CURRENT_ATTACHMENT:
+      return { ...state, currentAttachment: action.payload }
+    case UPDATE_JWT:
+      return { ...state, jwt: action.payload }
+    case UPDATE_USER:
+      return { ...state, user: action.payload }
+    case UPDATE_SESSION:
+      return { ...state, session: action.payload }
+    case UPDATE_BOT_STATE:
+      return { ...state, botState: action.payload }
+    default:
+      return messagesReducer(state, action)
+  }
+}

package/src/experimental/webchat/webchat.jsx

@@ -1,4 +1,8 @@
 import { INPUT, isMobile, params2queryString } from '@botonic/core'
+import {
+  MessageEventAck,
+  MessageEventFrom,
+} from '@botonic/core/src/models/events/message'
 import { motion } from 'framer-motion'
 import merge from 'lodash.merge'
 import React, {
@@ -38,12 +42,6 @@ import { scrollToBottom } from '../../util/dom'
 import { isDev, resolveImage } from '../../util/environment'
 import { ConditionalWrapper } from '../../util/react'
 import { deserializeRegex, stringifyWithRegexs } from '../../util/regexs'
-import {
-  _getThemeProperty,
-  getServerErrorMessage,
-  initSession,
-  shouldKeepSessionOnReload,
-} from '../../util/webchat'
 import { Attachment } from '../../webchat/components/attachment'
 import {
   EmojiPicker,
@@ -57,12 +55,6 @@ import { SendButton } from '../../webchat/components/send-button'
 import { TypingIndicator } from '../../webchat/components/typing-indicator'
 import { DeviceAdapter } from '../../webchat/devices/device-adapter'
 import { StyledWebchatHeader } from '../../webchat/header'
-import {
-  useComponentWillMount,
-  usePrevious,
-  useTyping,
-  useWebchat,
-} from '../../webchat/hooks'
 import { WebchatMessageList } from '../../webchat/message-list'
 import { WebchatReplies } from '../../webchat/replies'
 import { useStorageState } from '../../webchat/use-storage-state-hook'
@@ -70,6 +62,18 @@ import { WebviewContainer } from '../../webchat/webview'
 import { Audio, Document, Image, Video } from '../components'
 import { Text } from '../components/text'
 import { msgToBotonic } from '../msg-to-botonic'
+import {
+  _getThemeProperty,
+  getServerErrorMessage,
+  initUser,
+  shouldKeepSessionOnReload,
+} from '../util/webchat'
+import {
+  useComponentWillMount,
+  usePrevious,
+  useTyping,
+  useWebchat,
+} from '../webchat/hooks'
 export const getParsedAction = botonicAction => {
   const splittedAction = botonicAction.split('create_case:')
   if (splittedAction.length <= 1) return undefined
@@ -177,7 +181,6 @@ export const Webchat = forwardRef((props, ref) => {
     updateLatestInput,
     updateTyping,
     updateWebview,
-    updateSession,
     updateLastRoutePath,
     updateHandoff,
     updateTheme,
@@ -194,14 +197,23 @@ export const Webchat = forwardRef((props, ref) => {
     updateLastMessageDate,
     setCurrentAttachment,
     updateJwt,
+    updateUser,
+    updateSession,
+    updateBotState,
     // eslint-disable-next-line react-hooks/rules-of-hooks
   } = props.webchatHooks || useWebchat()
 
   const firstUpdate = useRef(true)
-  const isOnline = () => webchatState.online
+  const isOnline = () => webchatState.isWebchatOnline
   const currentDateString = () => new Date().toISOString()
   const theme = merge(webchatState.theme, props.theme)
-  const { initialSession, initialDevSettings, onStateChange } = props
+  const {
+    initialUser,
+    initialSession,
+    initialBotState,
+    initialDevSettings,
+    onStateChange,
+  } = props
   const getThemeProperty = _getThemeProperty(theme)
 
   const storage = props.storage === undefined ? localStorage : props.storage
@@ -223,12 +235,13 @@ export const Webchat = forwardRef((props, ref) => {
         JSON.parse(
           stringifyWithRegexs({
             messages: webchatState.messagesJSON,
-            session: webchatState.session,
-            lastRoutePath: webchatState.lastRoutePath,
             devSettings: webchatState.devSettings,
             lastMessageUpdate: webchatState.lastMessageUpdate,
             themeUpdates: webchatState.themeUpdates,
             jwt: webchatState.jwt,
+            user: webchatState.user,
+            session: webchatState.session,
+            botState: webchatState.botState,
           })
         )
       )
@@ -256,10 +269,10 @@ export const Webchat = forwardRef((props, ref) => {
   const sendUserInput = async input => {
     props.onUserInput &&
       props.onUserInput({
-        user: webchatState.session.user,
-        input: input,
+        user: webchatState.user,
+        input,
         session: webchatState.session,
-        lastRoutePath: webchatState.lastRoutePath,
+        botState: webchatState.botState,
       })
   }
 
@@ -293,16 +306,18 @@ export const Webchat = forwardRef((props, ref) => {
 
   // Load initial state from storage
   useEffect(() => {
-    let {
+    const {
       messages,
-      session,
       lastRoutePath,
       devSettings,
       lastMessageUpdate,
       themeUpdates,
+      user,
+      session,
+      botState,
     } = botonicState || {}
-    session = initSession(session)
-    updateSession(session)
+    updateUser(merge(initialUser, initUser(user)))
+
     if (shouldKeepSessionOnReload({ initialDevSettings, devSettings })) {
       if (messages) {
         messages.forEach(m => {
@@ -315,9 +330,16 @@ export const Webchat = forwardRef((props, ref) => {
           if (newComponent) addMessageComponent(newComponent)
         })
       }
-      if (initialSession) updateSession(merge(initialSession, session))
-      if (lastRoutePath) updateLastRoutePath(lastRoutePath)
-    } else updateSession(merge(initialSession, session))
+      if (initialSession) {
+        updateSession(merge(initialSession, session))
+      }
+      if (initialBotState) {
+        updateBotState(merge(initialBotState, botState))
+      }
+    } else {
+      updateSession(merge(initialSession, session))
+      updateBotState(merge(initialBotState, botState))
+    }
     if (devSettings) updateDevSettings(devSettings)
     else if (initialDevSettings) updateDevSettings(initialDevSettings)
     if (lastMessageUpdate) updateLastMessageDate(lastMessageUpdate)
@@ -333,21 +355,26 @@ export const Webchat = forwardRef((props, ref) => {
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
-    if (onStateChange && typeof onStateChange === 'function') {
+    if (
+      onStateChange &&
+      typeof onStateChange === 'function' &&
+      webchatState.user.id
+    ) {
       onStateChange({ ...webchatState, updateJwt })
     }
     saveWebchatState(webchatState)
   }, [
     webchatState.messagesJSON,
-    webchatState.session,
-    webchatState.lastRoutePath,
     webchatState.devSettings,
     webchatState.lastMessageUpdate,
     webchatState.jwt,
+    webchatState.user,
+    webchatState.session,
+    webchatState.botState,
   ])
 
   useAsyncEffect(async () => {
-    if (!webchatState.online) {
+    if (!webchatState.isWebchatOnline) {
       setError({
         message: getServerErrorMessage(props.server),
       })
@@ -356,7 +383,7 @@ export const Webchat = forwardRef((props, ref) => {
         setError(undefined)
       }
     }
-  }, [webchatState.online])
+  }, [webchatState.isWebchatOnline])
 
   useTyping({ webchatState, updateTyping, updateMessage, host })
 
@@ -423,7 +450,7 @@ export const Webchat = forwardRef((props, ref) => {
     )
     if (!Array.isArray(blockInputs)) return false
     for (const rule of blockInputs) {
-      if (getBlockInputs(rule, input.data)) {
+      if (getBlockInputs(rule, input.text)) {
         addMessageComponent(
           <Text
             id={input.id}
@@ -498,36 +525,36 @@ export const Webchat = forwardRef((props, ref) => {
 
   const messageComponentFromInput = input => {
     let messageComponent = null
+    let props = { ...input }
     if (isText(input)) {
-      messageComponent = (
-        <Text id={input.id} payload={input.payload} from={SENDERS.user}>
-          {input.data}
-        </Text>
-      )
+      messageComponent = <Text {...props}>{input.text}</Text>
     } else if (isMedia(input)) {
-      const temporaryDisplayUrl = URL.createObjectURL(input.data)
-      const mediaProps = {
-        id: input.id,
-        from: SENDERS.user,
-        src: temporaryDisplayUrl,
-      }
-      if (isImage(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} />
+      const temporaryDisplayUrl = URL.createObjectURL(input.src)
+      props = { ...props, src: temporaryDisplayUrl }
+      if (isImage(input)) messageComponent = <Image {...props} />
+      else if (isAudio(input)) messageComponent = <Audio {...props} />
+      else if (isVideo(input)) messageComponent = <Video {...props} />
+      else if (isDocument(input)) messageComponent = <Document {...props} />
     }
     return messageComponent
   }
 
   const sendInput = async input => {
     if (!input || Object.keys(input).length == 0) return
-    if (isText(input) && (!input.data || !input.data.trim())) return // in case trim() doesn't work in a browser we can use !/\S/.test(input.data)
+    if (isText(input) && (!input.text || !input.text.trim())) return // in case trim() doesn't work in a browser we can use !/\S/.test(input.text)
     if (isText(input) && checkBlockInput(input)) return
     if (!input.id) input.id = uuidv4()
+    const { idFromChannel, channel } = webchatState.user
+    input = {
+      idFromChannel,
+      channel,
+      ack: MessageEventAck.DRAFT,
+      from: MessageEventFrom.USER,
+      ...input,
+    }
     const messageComponent = messageComponentFromInput(input)
     if (messageComponent) addMessageComponent(messageComponent)
-    if (isMedia(input)) input.data = await readDataURL(input.data)
+    if (isMedia(input)) input.src = await readDataURL(input.src)
     sendUserInput(input)
     updateLatestInput(input)
     isOnline() && updateLastMessageDate(currentDateString())
@@ -540,27 +567,28 @@ export const Webchat = forwardRef((props, ref) => {
   https://stackoverflow.com/questions/37949981/call-child-method-from-parent
   */
 
-  const updateSessionWithUser = userToUpdate =>
-    updateSession(merge(webchatState.session, { user: userToUpdate }))
+  const mergeAndUpdateUser = userToUpdate =>
+    updateUser(merge(webchatState.user, userToUpdate))
 
   useImperativeHandle(ref, () => ({
     addBotResponse: ({ response, session, lastRoutePath }) => {
       updateTyping(false)
       if (Array.isArray(response)) response.map(r => addMessageComponent(r))
       else if (response) addMessageComponent(response)
-      if (session) {
-        updateSession(merge(session, { user: webchatState.session.user }))
-        const action = session._botonic_action || ''
-        const handoff = action.startsWith('create_case')
-        if (handoff && isDev) addMessageComponent(<Handoff />)
-        updateHandoff(handoff)
-      }
-      if (lastRoutePath) updateLastRoutePath(lastRoutePath)
       updateLastMessageDate(currentDateString())
     },
     setTyping: typing => updateTyping(typing),
     addUserMessage: message => sendInput(message),
-    updateUser: updateSessionWithUser,
+    updateUser: mergeAndUpdateUser,
+    updateBotState: botState => {
+      // TODO: Review handoff logic for 1.0
+      // const action = botState.botonicAction || ''
+      // // const isHandoff = action.startsWith('create_case')
+      if (botState.isHandoff && isDev) addMessageComponent(<Handoff />)
+      updateBotState(botState)
+      // updateHandoff(botState.isHandoff)
+    },
+    updateSession: updateSession,
     openWebchat: () => toggleWebchat(true),
     closeWebchat: () => toggleWebchat(false),
     toggleWebchat: () => toggleWebchat(!webchatState.isWebchatOpen),
@@ -593,26 +621,30 @@ export const Webchat = forwardRef((props, ref) => {
   }))
 
   const resolveCase = () => {
-    updateHandoff(false)
-    updateSession({ ...webchatState.session, _botonic_action: null })
+    // updateHandoff(false)
+    updateBotState({
+      ...webchatState.botState,
+      isHandoff: false,
+      botonicAction: null,
+    })
   }
 
-  const prevSession = usePrevious(webchatState.session)
+  const previousBotState = usePrevious(webchatState.botState)
   useEffect(() => {
     // Resume conversation after handoff
     if (
-      prevSession &&
-      prevSession._botonic_action &&
-      !webchatState.session._botonic_action
+      previousBotState &&
+      previousBotState.botonicAction &&
+      !webchatState.botState.botonicAction
     ) {
-      const action = getParsedAction(prevSession._botonic_action)
+      const action = getParsedAction(previousBotState.botonicAction)
       if (action && action.on_finish) sendPayload(action.on_finish)
     }
-  }, [webchatState.session._botonic_action])
+  }, [webchatState.botState.botonicAction])
 
   const sendText = async (text, payload) => {
     if (!text) return
-    const input = { type: INPUT.TEXT, data: text, payload }
+    const input = { type: INPUT.TEXT, text, payload }
     await sendInput(input)
   }
 
@@ -628,7 +660,7 @@ export const Webchat = forwardRef((props, ref) => {
       if (!attachmentType) return
       const input = {
         type: attachmentType,
-        data: attachment.file,
+        src: attachment.file,
       }
       await sendInput(input)
       setCurrentAttachment(undefined)
@@ -648,8 +680,8 @@ export const Webchat = forwardRef((props, ref) => {
   }
 
   const webviewRequestContext = {
-    getString: stringId => props.getString(stringId, webchatState.session),
-    setLocale: locale => props.getString(locale, webchatState.session),
+    getString: stringId => props.getString(stringId, webchatState.botState),
+    setLocale: locale => props.getString(locale, webchatState.botState),
     session: webchatState.session || {},
     params: webchatState.webviewParams || {},
     closeWebview: closeWebview,
@@ -909,7 +941,7 @@ export const Webchat = forwardRef((props, ref) => {
         updateMessage,
         updateReplies,
         updateLatestInput,
-        updateUser: updateSessionWithUser,
+        updateUser: mergeAndUpdateUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
       }}
     >

package/src/experimental/webchat-app.jsx

@@ -3,9 +3,9 @@ import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { render } from 'react-dom'
 
-import { SENDERS, WEBCHAT } from '../constants'
-import { isShadowDOMSupported, onDOMLoaded } from '../util/dom'
+import { SENDERS, WEBCHAT } from './constants'
 import { msgToBotonic } from './msg-to-botonic'
+import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
 import { Webchat } from './webchat/webchat'
 
 export class WebchatApp {
@@ -139,18 +139,27 @@ export class WebchatApp {
   }
 
   onServiceEvent(event) {
-    if (event.action === 'connectionChange')
+    const { action, ...eventData } = event
+    if (action === 'connection_change')
       this.webchatRef.current.setOnline(event.online)
-    else if (event.action === 'update_message_info')
-      this.updateMessageInfo(event.message.id, event.message)
-    else if (event.message.type === 'update_webchat_settings')
-      this.updateWebchatSettings(event.message.data)
-    else if (event.message.type === 'sender_action')
-      this.setTyping(event.message.data === 'typing_on')
-    else {
+    else if (action === 'update_message_info') {
+      this.updateMessageInfo(eventData.id, eventData)
+    } else if (action === 'update_user') {
+      this.updateUser(eventData)
+    } else if (action === 'update_session') {
+      this.updateSession(eventData.session)
+    } else if (action === 'update_bot_state') {
+      this.updateBotState(eventData.botState)
+    }
+    // TODO: Discuss how this updates  to be done
+    else if (eventData.type === 'update_webchat_settings')
+      this.updateWebchatSettings(event.data)
+    else if (eventData.type === 'sender_action')
+      this.setTyping(event.data === 'typing_on')
+    else if (eventData.eventType === 'message') {
       this.onMessage &&
-        this.onMessage(this, { from: SENDERS.bot, message: event.message })
-      this.addBotMessage(event.message)
+        this.onMessage(this, { from: SENDERS.bot, message: eventData })
+      this.addBotMessage(eventData)
     }
   }
 
@@ -158,6 +167,14 @@ export class WebchatApp {
     this.webchatRef.current.updateUser(user)
   }
 
+  updateSession(session) {
+    this.webchatRef.current.updateSession(session)
+  }
+
+  updateBotState(botState) {
+    this.webchatRef.current.updateBotState(botState)
+  }
+
   addBotMessage(message) {
     this.webchatRef.current.addBotResponse({
       response: msgToBotonic(
@@ -240,7 +257,7 @@ export class WebchatApp {
   }
 
   // eslint-disable-next-line complexity
-  getComponent(optionsAtRuntime = {}) {
+  getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
       persistentMenu,
@@ -258,6 +275,7 @@ export class WebchatApp {
       onOpen,
       onClose,
       onMessage,
+      hostId,
       appId,
       visibility,
       server,
@@ -282,6 +300,8 @@ export class WebchatApp {
     this.onMessage = onMessage || this.onMessage
     this.visibility = visibility || this.visibility
     this.appId = appId || this.appId
+    this.hostId = hostId || this.hostId
+    this.createRootElement(host)
     return (
       <Webchat
         {...webchatOptions}
@@ -342,11 +362,10 @@ export class WebchatApp {
 
   async render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(async () => {
-      this.createRootElement(dest)
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)
       if (isVisible)
         render(
-          this.getComponent(optionsAtRuntime),
+          this.getComponent(dest, optionsAtRuntime),
           this.getReactMountNode(dest)
         )
     })

package/src/index.d.ts

@@ -176,6 +176,7 @@ export class WebchatApp {
   close(): void
   closeCoverComponent(): void
   getComponent(
+    host: HTMLElement,
     optionsAtRuntime?: WebchatAppArgs
   ): React.ForwardRefExoticComponent<any>
   getLastMessageUpdate(): string

package/src/util/dom.js

@@ -1,10 +1,12 @@
 import { WEBCHAT } from '../constants'
 
+export const getScrollableContent = webchatElement => {
+  return webchatElement.querySelector(WEBCHAT.SELECTORS.SCROLLABLE_CONTENT)
+}
+
 export const getScrollableArea = webchatElement => {
   const getArea = area => {
-    const botonicScrollableContent = webchatElement.querySelector(
-      WEBCHAT.SELECTORS.SCROLLABLE_CONTENT
-    )
+    const botonicScrollableContent = getScrollableContent(webchatElement)
     const scrollableArea =
       botonicScrollableContent && botonicScrollableContent.querySelector(area)
     return scrollableArea

package/src/webchat/devices/device-adapter.js

@@ -4,21 +4,33 @@ import { ScrollbarController } from './scrollbar-controller'
 import { WebchatResizer } from './webchat-resizer'
 
 export class DeviceAdapter {
+  constructor() {
+    this.currentDevice = this.getCurrentDevice()
+  }
+
   init(host) {
-    this.currentDevice = navigator.platform
     this.webchatResizer = new WebchatResizer(this.currentDevice, host)
     this.scrollbarController = new ScrollbarController(this.currentDevice, host)
     this.scrollbarController.handleScrollEvents()
   }
 
+  getCurrentDevice() {
+    // navigator.platform deprecated. Ref: (https://erikmartinjordan.com/navigator-platform-deprecated-alternative)
+    if (navigator.userAgentData) return navigator.userAgentData.platform
+    return navigator.platform
+  }
+
   onFocus(host) {
     if (this.currentDevice !== DEVICES.MOBILE.IPHONE) {
       scrollToBottom({ host, timeout: 800 })
       return
     }
-    this.webchatResizer.onFocus(() =>
-      this.scrollbarController.handleOnTouchMoveEvents()
-    )
+    setTimeout(() => {
+      // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays
+      this.webchatResizer.onFocus(() =>
+        this.scrollbarController.handleOnTouchMoveEvents()
+      )
+    }, 0)
   }
 
   onBlur() {

package/src/webchat/devices/scrollbar-controller.js

@@ -1,4 +1,8 @@
-import { getScrollableArea, getWebchatElement } from '../../util/dom'
+import {
+  getScrollableArea,
+  getScrollableContent,
+  getWebchatElement,
+} from '../../util/dom'
 import { DEVICES, isMobileDevice } from '.'
 
 const debounced = (delay, fn) => {
@@ -28,7 +32,7 @@ export class ScrollbarController {
 
   handleScrollEvents() {
     /*
-      It handles scroll events for Mobile/Desktop. 
+      It handles scroll events for Mobile/Desktop.
       "ontouchmove" is the phone equivalent for "onmouseover"
     */
     if (isMobileDevice()) {
@@ -61,11 +65,12 @@ export class ScrollbarController {
   }
 
   toggleOnMouseWheelEvents() {
+    const scrollableContent = getScrollableContent(this.webchat)
     if (this.hasScrollbar()) {
-      this.webchat.onmousewheel = {}
+      scrollableContent.onmousewheel = {}
       return
     }
-    this.webchat.onmousewheel = e => e.preventDefault()
+    scrollableContent.onmousewheel = e => e.preventDefault()
   }
 
   handleOnTouchMoveEvents(e) {

package/src/webchat/webchat.jsx

@@ -212,6 +212,8 @@ export const Webchat = forwardRef((props, ref) => {
 
   const host = props.host || document.body
 
+  const deviceAdapter = new DeviceAdapter()
+
   const saveWebchatState = webchatState => {
     storage &&
       saveState(
@@ -227,7 +229,6 @@ export const Webchat = forwardRef((props, ref) => {
         )
       )
   }
-  const deviceAdapter = new DeviceAdapter()
 
   const handleAttachment = event => {
     if (!isAllowedSize(event.target.files[0].size)) {