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

package/src/experimental/util/webchat.js

@@ -0,0 +1,61 @@
+import { Channels } from '@botonic/core'
+import merge from 'lodash.merge'
+import UAParser from 'ua-parser-js'
+import { v4 as uuidv4 } from 'uuid'
+
+import { isDev } from '../../util/environment'
+import { WEBCHAT } from '../constants'
+import { getProperty } from './objects'
+
+/**
+ * Returns the value of a property defined in bot's theme based on WEBCHAT.CUSTOM_PROPERTIES dictionary.
+ * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
+ * If property doesn't exist, returns the defaultValue.
+ */
+export const _getThemeProperty = theme => (
+  property,
+  defaultValue = undefined
+) => {
+  for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
+    if (v == property) {
+      const nestedProperty = getProperty(theme, v)
+      if (nestedProperty !== undefined) return nestedProperty
+      const plainProperty = getProperty(theme, k)
+      if (plainProperty !== undefined) return plainProperty
+      return defaultValue
+    }
+  }
+  return undefined
+}
+
+export const createUser = () => {
+  const parser = new UAParser()
+  const ua = parser.getResult()
+  let name = `${ua.os.name} ${ua.browser.name}`
+  if (ua.device && ua.device.type) name = `${ua.device.type} ${name}`
+
+  return {
+    id: uuidv4(),
+    name,
+    channel: isDev ? Channels.DEV : Channels.WEBCHAT,
+  }
+}
+
+export const initUser = user => {
+  if (!user) return createUser()
+  if (user && !user.id) return merge(user, createUser())
+  return user
+}
+
+export const shouldKeepSessionOnReload = ({
+  initialDevSettings,
+  devSettings,
+}) => !initialDevSettings || (devSettings && devSettings.keepSessionOnReload)
+
+export const getServerErrorMessage = serverConfig => {
+  if (!serverConfig || !serverConfig.errorMessage) return 'Connection issues'
+  if (typeof serverConfig.errorMessage === 'function') {
+    return serverConfig.errorMessage()
+  }
+  return serverConfig.errorMessage
+}

package/src/experimental/webchat/actions.jsx

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

package/src/experimental/webchat/hooks.js

@@ -0,0 +1,296 @@
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
+
+import { COLORS, WEBCHAT } from '../constants'
+import { scrollToBottom } from '../util/dom'
+import {
+  ADD_MESSAGE,
+  ADD_MESSAGE_COMPONENT,
+  CLEAR_MESSAGES,
+  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_MESSAGE_DATE,
+  UPDATE_LAST_ROUTE_PATH,
+  UPDATE_LATEST_INPUT,
+  UPDATE_MESSAGE,
+  UPDATE_REPLIES,
+  UPDATE_SESSION,
+  UPDATE_THEME,
+  UPDATE_TYPING,
+  UPDATE_USER,
+  UPDATE_WEBVIEW,
+} from './actions'
+import { webchatReducer } from './webchat-reducer'
+
+export const initialUser = {
+  id: undefined,
+  name: undefined,
+  userName: undefined,
+  channel: undefined,
+  idFromChannel: undefined,
+  isOnline: true,
+}
+
+const initialBotState = {
+  botId: undefined,
+  lastRoutePath: null,
+  isFirstInteraction: true,
+  retries: 0,
+  isHandoff: false,
+  isShadowing: false,
+}
+
+const initialSession = {}
+
+export const webchatInitialState = {
+  width: WEBCHAT.DEFAULTS.WIDTH,
+  height: WEBCHAT.DEFAULTS.HEIGHT,
+  messagesJSON: [],
+  messagesComponents: [],
+  replies: [],
+  latestInput: {},
+  typing: false,
+  webview: null,
+  webviewParams: null,
+  // session: { user: null },
+  // 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: {},
+  isWebchatOnline: true,
+  devSettings: { keepSessionOnReload: false },
+  isWebchatOpen: false,
+  isEmojiPickerOpen: false,
+  isPersistentMenuOpen: false,
+  isCoverComponentOpen: false,
+  lastMessageUpdate: undefined,
+  currentAttachment: undefined,
+  jwt: null,
+  user: initialUser,
+  session: initialSession,
+  botState: initialBotState,
+}
+
+export function useWebchat() {
+  const [webchatState, webchatDispatch] = useReducer(
+    webchatReducer,
+    webchatInitialState
+  )
+
+  const addMessage = message =>
+    webchatDispatch({ type: ADD_MESSAGE, payload: message })
+  const addMessageComponent = message =>
+    webchatDispatch({ type: ADD_MESSAGE_COMPONENT, payload: message })
+  const updateMessage = message =>
+    webchatDispatch({ type: UPDATE_MESSAGE, payload: message })
+  const updateReplies = replies =>
+    webchatDispatch({ type: UPDATE_REPLIES, payload: replies })
+  const updateLatestInput = input =>
+    webchatDispatch({ type: UPDATE_LATEST_INPUT, payload: input })
+  const updateTyping = typing =>
+    webchatDispatch({ type: UPDATE_TYPING, payload: typing })
+  const updateWebview = (webview, params) =>
+    webchatDispatch({
+      type: UPDATE_WEBVIEW,
+      payload: { webview, webviewParams: params },
+    })
+  const updateSession = session =>
+    webchatDispatch({
+      type: UPDATE_SESSION,
+      payload: session,
+    })
+
+  const updateUser = user =>
+    webchatDispatch({
+      type: UPDATE_USER,
+      payload: user,
+    })
+
+  const updateBotState = botState =>
+    webchatDispatch({
+      type: UPDATE_BOT_STATE,
+      payload: botState,
+    })
+
+  const updateLastRoutePath = path =>
+    webchatDispatch({
+      type: UPDATE_LAST_ROUTE_PATH,
+      payload: path,
+    })
+  const updateHandoff = handoff =>
+    webchatDispatch({
+      type: UPDATE_HANDOFF,
+      payload: handoff,
+    })
+  const updateTheme = (theme, themeUpdates = undefined) => {
+    const payload =
+      themeUpdates !== undefined ? { theme, themeUpdates } : { theme }
+    webchatDispatch({
+      type: UPDATE_THEME,
+      payload,
+    })
+  }
+  const updateDevSettings = settings =>
+    webchatDispatch({
+      type: UPDATE_DEV_SETTINGS,
+      payload: settings,
+    })
+  const toggleWebchat = toggle =>
+    webchatDispatch({
+      type: TOGGLE_WEBCHAT,
+      payload: toggle,
+    })
+  const toggleEmojiPicker = toggle =>
+    webchatDispatch({
+      type: TOGGLE_EMOJI_PICKER,
+      payload: toggle,
+    })
+  const togglePersistentMenu = toggle =>
+    webchatDispatch({
+      type: TOGGLE_PERSISTENT_MENU,
+      payload: toggle,
+    })
+  const toggleCoverComponent = toggle =>
+    webchatDispatch({
+      type: TOGGLE_COVER_COMPONENT,
+      payload: toggle,
+    })
+  const setError = error =>
+    webchatDispatch({
+      type: SET_ERROR,
+      payload: error,
+    })
+  const setOnline = online =>
+    webchatDispatch({
+      type: SET_ONLINE,
+      payload: online,
+    })
+
+  const clearMessages = () => {
+    webchatDispatch({
+      type: CLEAR_MESSAGES,
+    })
+  }
+  const updateLastMessageDate = date => {
+    webchatDispatch({
+      type: UPDATE_LAST_MESSAGE_DATE,
+      payload: date,
+    })
+  }
+  const setCurrentAttachment = attachment => {
+    webchatDispatch({
+      type: SET_CURRENT_ATTACHMENT,
+      payload: attachment,
+    })
+  }
+
+  const updateJwt = jwt => {
+    webchatDispatch({
+      type: UPDATE_JWT,
+      payload: jwt,
+    })
+  }
+
+  return {
+    webchatState,
+    webchatDispatch,
+    addMessage,
+    addMessageComponent,
+    updateMessage,
+    updateReplies,
+    updateLatestInput,
+    updateTyping,
+    updateWebview,
+    updateSession,
+    updateLastRoutePath,
+    updateHandoff,
+    updateTheme,
+    updateDevSettings,
+    toggleWebchat,
+    toggleEmojiPicker,
+    togglePersistentMenu,
+    toggleCoverComponent,
+    setError,
+    setOnline,
+    clearMessages,
+    updateLastMessageDate,
+    setCurrentAttachment,
+    updateJwt,
+    updateBotState,
+    updateUser,
+  }
+}
+
+export function useTyping({ webchatState, updateTyping, updateMessage, host }) {
+  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])
+}
+
+export function usePrevious(value) {
+  const ref = useRef()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}
+
+export function useComponentVisible(initialIsVisible, onClickOutside) {
+  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)
+  const ref = useRef(null)
+  const handleClickOutside = event => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false)
+      onClickOutside()
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, false)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, false)
+    }
+  })
+  return { ref, isComponentVisible, setIsComponentVisible }
+}
+
+export const useComponentWillMount = func => {
+  useMemo(func, [])
+}

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

@@ -0,0 +1,86 @@
+import {
+  ADD_MESSAGE,
+  ADD_MESSAGE_COMPONENT,
+  CLEAR_MESSAGES,
+  UPDATE_LAST_MESSAGE_DATE,
+  UPDATE_MESSAGE,
+  UPDATE_REPLIES,
+} from './actions'
+
+export const messagesReducer = (state, action) => {
+  switch (action.type) {
+    case ADD_MESSAGE:
+      return addMessageReducer(state, action)
+    case ADD_MESSAGE_COMPONENT:
+      return {
+        ...state,
+        messagesComponents: [
+          ...(state.messagesComponents || []),
+          action.payload,
+        ],
+      }
+    case UPDATE_MESSAGE:
+      return updateMessageReducer(state, action)
+    case UPDATE_REPLIES:
+      return { ...state, replies: action.payload }
+    case CLEAR_MESSAGES:
+      return {
+        ...state,
+        messagesJSON: [],
+        messagesComponents: [],
+      }
+    case UPDATE_LAST_MESSAGE_DATE:
+      return {
+        ...state,
+        lastMessageUpdate: action.payload,
+      }
+    default:
+      throw new Error()
+  }
+}
+
+function updateMessageReducer(state, action) {
+  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id)
+  if (msgIndex > -1) {
+    const msgComponent = state.messagesComponents[msgIndex]
+    let updatedMessageComponents = {}
+    if (msgComponent) {
+      const updatedMsgComponent = {
+        ...msgComponent,
+        ...{
+          props: { ...msgComponent.props, ack: action.payload.ack },
+        },
+      }
+      updatedMessageComponents = {
+        messagesComponents: [
+          ...state.messagesComponents.slice(0, msgIndex),
+          { ...updatedMsgComponent },
+          ...state.messagesComponents.slice(msgIndex + 1),
+        ],
+      }
+    }
+    return {
+      ...state,
+      messagesJSON: [
+        ...state.messagesJSON.slice(0, msgIndex),
+        { ...action.payload },
+        ...state.messagesJSON.slice(msgIndex + 1),
+      ],
+      ...updatedMessageComponents,
+    }
+  }
+
+  return state
+}
+
+function addMessageReducer(state, action) {
+  if (
+    state.messagesJSON &&
+    state.messagesJSON.find(m => m.id === action.payload.id)
+  )
+    return state
+  return {
+    ...state,
+    messagesJSON: [...(state.messagesJSON || []), action.payload],
+  }
+}

package/src/experimental/webchat/session-view.jsx

@@ -0,0 +1,166 @@
+import React from 'react'
+import JSONTree from 'react-json-tree'
+import styled from 'styled-components'
+
+import { COLORS } from '../constants'
+import { useWebchat } from './hooks'
+
+const AttributeContainer = styled.div`
+  display: flex;
+  flex: none;
+  padding: 12px;
+  padding-bottom: 0px;
+  font-size: 12px;
+  font-weight: 600;
+  color: ${COLORS.SOLID_WHITE};
+  align-items: center;
+`
+
+const Label = styled.div`
+  flex: none;
+`
+
+const Value = styled.div`
+  flex: 1 1 auto;
+  max-height: 20px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 6px;
+  color: ${COLORS.CURIOUS_BLUE};
+  overflow-x: hidden;
+`
+
+const SessionViewAttribute = props => (
+  <AttributeContainer>
+    <Label>{props.label}</Label>
+    <Value>{props.value}</Value>
+  </AttributeContainer>
+)
+
+const SessionViewContent = styled.div`
+  position: relative;
+  width: ${props => (props.show ? '100%' : '0%')};
+  height: 100%;
+  display: flex;
+  background-color: ${COLORS.DAINTREE_BLUE};
+  font-family: Arial, Helvetica, sans-serif;
+  flex-direction: column;
+  z-index: 100000;
+  transition: all 0.2s ease-in-out;
+`
+
+const ToggleTab = styled.div`
+  position: absolute;
+  top: 10px;
+  right: -32px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
+  font-size: 14px;
+  font-weight: 600;
+  background-color: ${COLORS.DAINTREE_BLUE};
+  flex-direction: column;
+  z-index: 100000;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+`
+
+const ContentContainer = styled.div`
+  overflow-y: auto;
+  overflow-x: auto;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+`
+
+const Title = styled.div`
+  padding: 12px;
+  text-align: center;
+  color: ${COLORS.SOLID_WHITE};
+  border-bottom: 1px solid ${COLORS.SOLID_WHITE_ALPHA_0_2};
+`
+
+const SessionContainer = styled.div`
+  flex: 1 1 auto;
+  height: 100%;
+  overflow-y: auto;
+`
+
+const KeepSessionContainer = styled.div`
+  flex: none;
+  padding: 12px;
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
+  font-size: 12px;
+`
+
+export const SessionView = props => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { webchatState, updateDevSettings } = props.webchatHooks || useWebchat()
+  const { latestInput: input, session, botState } = webchatState
+  const { type, id, ...latestInputData } = input
+
+  const toggleSessionView = () =>
+    updateDevSettings({
+      ...webchatState.devSettings,
+      showSessionView: !webchatState.devSettings.showSessionView,
+    })
+  const toggleKeepSessionOnReload = () =>
+    updateDevSettings({
+      ...webchatState.devSettings,
+      keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload,
+    })
+  return (
+    <SessionViewContent show={webchatState.devSettings.showSessionView}>
+      <ToggleTab onClick={toggleSessionView}>
+        {webchatState.devSettings.showSessionView ? '⇤' : '⇥'}
+      </ToggleTab>
+      <ContentContainer>
+        <Title>Botonic Dev Console</Title>
+        <SessionViewAttribute
+          label='INPUT:'
+          value={
+            input && Object.keys(input).length
+              ? `[${type}] ${JSON.stringify(latestInputData) || ''}`
+              : ''
+          }
+        />
+        <SessionViewAttribute label='PAYLOAD:' value={input.payload} />
+        <SessionViewAttribute
+          label='INTENT:'
+          value={
+            input.intent
+              ? `${input.intent} (${(input.confidence * 100).toFixed(1)}%)`
+              : ''
+          }
+        />
+        <SessionViewAttribute
+          label='PATH:'
+          value={botState.lastRoutePath ? `/${botState.lastRoutePath}` : '/'}
+        />
+        <SessionViewAttribute label='BOT STATE:' />
+        <SessionContainer>
+          <JSONTree data={botState} hideRoot={true} />
+        </SessionContainer>
+        <SessionViewAttribute label='SESSION:' />
+        <SessionContainer>
+          <JSONTree data={session} hideRoot={true} />
+        </SessionContainer>
+        <KeepSessionContainer>
+          <label>
+            <input
+              type='checkbox'
+              name='toggleKeepSessionOnReload'
+              checked={Boolean(webchatState.devSettings.keepSessionOnReload)}
+              onChange={toggleKeepSessionOnReload}
+            />
+            Keep session on reload
+          </label>
+        </KeepSessionContainer>
+      </ContentContainer>
+    </SessionViewContent>
+  )
+}

package/src/experimental/webchat/webchat-dev.jsx

@@ -1,18 +1,18 @@
-import { PROVIDER } from '@botonic/core'
+import { Channels } from '@botonic/core'
 import merge from 'lodash.merge'
 import QRCode from 'qrcode.react'
 import React, { forwardRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styled from 'styled-components'
 
-import { useWebchat } from '../../webchat/hooks'
-import { SessionView } from '../../webchat/session-view'
 import MessengerLogo from './assets/messenger.svg'
 import Open from './assets/open.svg'
 import OpenNewWindow from './assets/open-new-window.svg'
 import TelegramLogo from './assets/telegram.svg'
 import WebchatLogo from './assets/webchat.svg'
 import WhatsappLogo from './assets/whatsapp.svg'
+import { useWebchat } from './hooks'
+import { SessionView } from './session-view'
 import { Webchat } from './webchat'
 
 export const DebugTab = styled.div`
@@ -341,22 +341,24 @@ export const PlaygroundPortal = props =>
     document.body
   )
 
-const initialSession = {
-  is_first_interaction: true,
-  last_session: {},
-  user: {
-    id: '000001',
-    username: 'johndoe',
-    name: 'John Doe',
-    provider: PROVIDER.DEV,
-    provider_id: '0000000',
-    extra_data: {},
-  },
-  organization: '',
-  bot: {
-    id: '0000000',
-    name: 'botName',
-  },
+const initialUser = {
+  id: '000001',
+  name: 'John Doe',
+  username: 'johndoe',
+  channel: Channels.DEV,
+  idFromChannel: '0000000',
+  details: {},
+}
+
+const initialSession = {}
+
+const initialBotState = {
+  botId: '0000000',
+  isFirstInteraction: true,
+  retries: 0,
+  lastRoutePath: null,
+  isHandoff: false,
+  isShadowing: false,
 }
 
 // eslint-disable-next-line react/display-name
@@ -377,7 +379,9 @@ export const WebchatDev = forwardRef((props, ref) => {
         {...props}
         ref={ref}
         webchatHooks={webchatHooks}
+        initialUser={initialUser}
         initialSession={initialSession}
+        initialBotState={initialBotState}
         initialDevSettings={{
           keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,
           showSessionView: webchatState.devSettings.showSessionView,