@botonic/react 0.31.5-alpha.1 → 0.32.0-alpha.0

package/src/webchat/{webchat.jsx → webchat.tsx}

@@ -12,15 +12,22 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import styled, { StyleSheetManager } from 'styled-components'
+import { StyleSheetManager } from 'styled-components'
 import { v7 as uuidv7 } from 'uuid'
 
-import { Audio, Document, Image, Text, Video } from '../components'
-import { Handoff } from '../components/handoff'
-import { normalizeWebchatSettings } from '../components/webchat-settings'
+import {
+  Audio,
+  Document,
+  Handoff,
+  Image,
+  normalizeWebchatSettings,
+  Text,
+  Video,
+  WebchatSettingsProps,
+} from '../components'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
-import { WebchatContext, WebviewRequestContext } from '../contexts'
-import { SENDERS } from '../index-types'
+import { CloseWebviewOptions } from '../contexts'
+import { SENDERS, WebchatProps, WebchatRef } from '../index-types'
 import {
   getMediaType,
   isAllowedSize,
@@ -44,6 +51,7 @@ import {
 import { ChatArea } from './chat-area'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
 import { BotonicContainerId } from './constants'
+import { useWebchat, WebchatContext, WebchatState } from './context'
 import { CoverComponent } from './cover-component'
 import { WebchatHeader } from './header'
 import {
@@ -51,76 +59,30 @@ import {
   usePrevious,
   useScrollToBottom,
   useTyping,
-  useWebchat,
 } from './hooks'
 import { InputPanel } from './input-panel'
+import {
+  DarkBackgroundMenu,
+  ErrorMessage,
+  ErrorMessageContainer,
+  StyledWebchat,
+} from './styles'
 import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
-import { WebviewContainer } from './webview'
-
-const StyledWebchat = styled.div`
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
-  margin: auto;
-  background-color: ${COLORS.SOLID_WHITE};
-  border-radius: 10px;
-  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-`
-
-const ErrorMessageContainer = styled.div`
-  position: relative;
-  display: flex;
-  z-index: 1;
-  justify-content: center;
-  width: 100%;
-`
-
-const ErrorMessage = styled.div`
-  position: absolute;
-  top: 10px;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 4px 11px;
-  display: flex;
-  background-color: ${COLORS.ERROR_RED};
-  color: ${COLORS.CONCRETE_WHITE};
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
-`
-
-const DarkBackgroundMenu = styled.div`
-  background: ${COLORS.SOLID_BLACK};
-  opacity: 0.3;
-  z-index: 1;
-  right: 0;
-  bottom: 0;
-  border-radius: 10px;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-`
+import { WebviewContainer } from './webview/index'
 
 // eslint-disable-next-line complexity, react/display-name
-export const Webchat = forwardRef((props, ref) => {
+const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
   const {
     addMessage,
     addMessageComponent,
     clearMessages,
     doRenderCustomComponent,
-    openWebviewT,
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -138,15 +100,18 @@ export const Webchat = forwardRef((props, ref) => {
     updateTheme,
     updateTyping,
     updateWebview,
+    removeWebview,
+    removeReplies,
     webchatState,
-    webchatRef,
+    webchatContainerRef,
     chatAreaRef,
     inputPanelRef,
     headerRef,
+    repliesRef,
     scrollableMessagesListRef,
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
   } = props.webchatHooks || useWebchat()
+
   const firstUpdate = useRef(true)
   const isOnline = () => webchatState.online
   const currentDateString = () => new Date().toISOString()
@@ -167,7 +132,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const { scrollToBottom } = useScrollToBottom({ host })
 
-  const saveWebchatState = webchatState => {
+  const saveWebchatState = (webchatState: WebchatState) => {
     storage &&
       saveState(
         JSON.parse(
@@ -183,32 +148,34 @@ export const Webchat = forwardRef((props, ref) => {
       )
   }
 
-  const handleAttachment = event => {
+  const handleAttachment = (event: any) => {
     if (!isAllowedSize(event.target.files[0].size)) {
       throw new Error(
         `The file is too large. A maximum of ${MAX_ALLOWED_SIZE_MB}MB is allowed.`
       )
     }
-    setCurrentAttachment({
-      fileName: event.target.files[0].name,
-      file: event.target.files[0], // TODO: Attach more files?
-      attachmentType: getMediaType(event.target.files[0].type),
-    })
+
+    // TODO: Attach more files?
+    setCurrentAttachment(event.target.files[0])
   }
 
   useEffect(() => {
-    if (webchatState.currentAttachment)
+    if (webchatState.currentAttachment) {
       sendAttachment(webchatState.currentAttachment)
+    }
   }, [webchatState.currentAttachment])
 
-  const sendUserInput = async input => {
+  const sendUserInput = async (input: any) => {
     if (props.onUserInput) {
       resetUnreadMessages()
-      scrollToBottom({ host })
+      scrollToBottom()
       props.onUserInput({
         user: webchatState.session.user,
+        // TODO: Review if this input.sentBy exists in the frontend
         input: input,
+        //@ts-ignore
         session: webchatState.session,
+        // TODO: Review why we were passing lastRoutePath, is only for devMode?
         lastRoutePath: webchatState.lastRoutePath,
       })
     }
@@ -260,9 +227,9 @@ export const Webchat = forwardRef((props, ref) => {
           addMessage(message)
           const newMessageComponent = msgToBotonic(
             { ...message, delay: 0, typing: 0 },
-            (props.theme.message && props.theme.message.customTypes) ||
-              props.theme.customMessageTypes
+            props.theme?.message?.customTypes || props.theme?.customMessageTypes
           )
+          //@ts-ignore
           if (newMessageComponent) addMessageComponent(newMessageComponent)
         })
       }
@@ -271,10 +238,18 @@ export const Webchat = forwardRef((props, ref) => {
     } else updateSession(merge(initialSession, session))
     if (devSettings) updateDevSettings(devSettings)
     else if (initialDevSettings) updateDevSettings(initialDevSettings)
-    if (lastMessageUpdate) updateLastMessageDate(lastMessageUpdate)
-    if (themeUpdates !== undefined)
+
+    if (lastMessageUpdate) {
+      updateLastMessageDate(lastMessageUpdate)
+    }
+
+    if (themeUpdates !== undefined) {
       updateTheme(merge(props.theme, themeUpdates), themeUpdates)
-    if (props.onInit) setTimeout(() => props.onInit(), 100)
+    }
+
+    if (props.onInit) {
+      setTimeout(() => props.onInit && props.onInit(), 100)
+    }
   }, [])
 
   useEffect(() => {
@@ -287,8 +262,9 @@ export const Webchat = forwardRef((props, ref) => {
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
-    if (onStateChange && typeof onStateChange === 'function') {
-      onStateChange(webchatState)
+    const { messagesJSON, session } = webchatState
+    if (onStateChange && typeof onStateChange === 'function' && session.user) {
+      onStateChange({ messagesJSON, user: session.user })
     }
     saveWebchatState(webchatState)
   }, [
@@ -321,12 +297,12 @@ export const Webchat = forwardRef((props, ref) => {
     updateWebview(webviewComponent, params)
   }
 
-  const textareaRef = useRef(null)
+  const textareaRef = useRef<HTMLTextAreaElement | undefined>()
 
-  const closeWebview = async options => {
-    updateWebview()
+  const closeWebview = async (options?: CloseWebviewOptions) => {
+    removeWebview()
     if (userInputEnabled) {
-      textareaRef.current.focus()
+      textareaRef.current?.focus()
     }
     if (options?.payload) {
       await sendPayload(options.payload)
@@ -342,8 +318,7 @@ export const Webchat = forwardRef((props, ref) => {
   )
 
   const darkBackgroundMenu = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu,
-    false
+    WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu
   )
 
   const getBlockInputs = (rule, inputData) => {
@@ -368,6 +343,9 @@ export const Webchat = forwardRef((props, ref) => {
       if (getBlockInputs(rule, input.data)) {
         addMessageComponent(
           <Text
+            // Is necessary to add the id of the input
+            // to keep the input.id generated in the frontend as id of the message
+            // @ts-ignore
             id={input.id}
             sentBy={SENDERS.user}
             blob={false}
@@ -380,7 +358,7 @@ export const Webchat = forwardRef((props, ref) => {
             {rule.message}
           </Text>
         )
-        updateReplies(false)
+        removeReplies()
         return true
       }
     }
@@ -421,16 +399,32 @@ export const Webchat = forwardRef((props, ref) => {
   }, [])
 
   const messageComponentFromInput = input => {
-    let messageComponent = null
+    let messageComponent: any = null
     if (isText(input)) {
       messageComponent = (
-        <Text id={input.id} payload={input.payload} sentBy={SENDERS.user}>
+        <Text
+          // Is necessary to add the id of the input
+          // to keep the input.id generated in the frontend as id of the message
+          // @ts-ignore
+          id={input.id}
+          // Is necessary to add the payload of the input when user clicks a button
+          // @ts-ignore
+          payload={input.payload}
+          sentBy={SENDERS.user}
+        >
           {input.data}
         </Text>
       )
     } else if (isMedia(input)) {
       const temporaryDisplayUrl = URL.createObjectURL(input.data)
-      const mediaProps = {
+      // TODO: We sould use URL.revokeObjectURL(temporaryDisplayUrl) when the component is unmounted
+      // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static#memory_management
+      const mediaProps: {
+        id: string
+        sentBy: SENDERS
+        src: string
+        input?: any
+      } = {
         id: input.id,
         sentBy: SENDERS.user,
         src: temporaryDisplayUrl,
@@ -446,7 +440,7 @@ export const Webchat = forwardRef((props, ref) => {
     return messageComponent
   }
 
-  const sendInput = async input => {
+  const sendInput = async (input: any) => {
     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) && checkBlockInput(input)) return
@@ -457,7 +451,7 @@ export const Webchat = forwardRef((props, ref) => {
     sendUserInput(input)
     updateLatestInput(input)
     isOnline() && updateLastMessageDate(currentDateString())
-    updateReplies(false)
+    removeReplies()
     togglePersistentMenu(false)
     toggleEmojiPicker(false)
   }
@@ -466,7 +460,7 @@ export const Webchat = forwardRef((props, ref) => {
   https://stackoverflow.com/questions/37949981/call-child-method-from-parent
   */
 
-  const updateSessionWithUser = userToUpdate =>
+  const updateSessionWithUser = (userToUpdate: any) =>
     updateSession(merge(webchatState.session, { user: userToUpdate }))
 
   useImperativeHandle(ref, () => ({
@@ -499,7 +493,7 @@ export const Webchat = forwardRef((props, ref) => {
 
       updateLastMessageDate(currentDateString())
     },
-    setTyping: typing => updateTyping(typing),
+    setTyping: (typing: boolean) => updateTyping(typing),
     addUserMessage: message => sendInput(message),
     updateUser: updateSessionWithUser,
     openWebchat: () => toggleWebchat(true),
@@ -514,25 +508,23 @@ export const Webchat = forwardRef((props, ref) => {
     unmountCustomComponent: () => doRenderCustomComponent(false),
     toggleCoverComponent: () =>
       toggleCoverComponent(!webchatState.isCoverComponentOpen),
-    openWebviewApi: component => openWebviewT(component),
-    setError,
     setOnline,
     getMessages: () => webchatState.messagesJSON,
     isOnline,
     clearMessages: () => {
       clearMessages()
-      updateReplies(false)
+      removeReplies()
     },
     getLastMessageUpdate: () => webchatState.lastMessageUpdate,
-    updateMessageInfo: (msgId, messageInfo) => {
+    updateMessageInfo: (msgId: string, messageInfo: any) => {
       const messageToUpdate = webchatState.messagesJSON.filter(
-        m => m.id == msgId
+        m => m.id === msgId
       )[0]
       const updatedMsg = merge(messageToUpdate, messageInfo)
       if (updatedMsg.ack === 1) delete updatedMsg.unsentInput
       updateMessage(updatedMsg)
     },
-    updateWebchatSettings: settings => {
+    updateWebchatSettings: (settings: WebchatSettingsProps) => {
       if (settings.user) {
         updateSessionWithUser(settings.user)
       }
@@ -540,59 +532,49 @@ export const Webchat = forwardRef((props, ref) => {
       updateTheme(merge(webchatState.theme, themeUpdates), themeUpdates)
       updateTyping(false)
     },
-    closeWebview: closeWebview,
+    closeWebview: async (options?: CloseWebviewOptions) =>
+      closeWebview(options),
   }))
 
   const resolveCase = () => {
     updateHandoff(false)
-    updateSession({ ...webchatState.session, _botonic_action: null })
+    updateSession({ ...webchatState.session, _botonic_action: undefined })
   }
 
   const prevSession = usePrevious(webchatState.session)
   useEffect(() => {
     // Resume conversation after handoff
-    if (
-      prevSession &&
-      prevSession._botonic_action &&
-      !webchatState.session._botonic_action
-    ) {
+    if (prevSession?._botonic_action && !webchatState.session._botonic_action) {
       const action = getParsedAction(prevSession._botonic_action)
-      if (action && action.on_finish) sendPayload(action.on_finish)
+      if (action?.on_finish) sendPayload(action.on_finish)
     }
   }, [webchatState.session._botonic_action])
 
-  const sendText = async (text, payload) => {
+  const sendText = async (text: string, payload?: string) => {
     if (!text) return
     const input = { type: INPUT.TEXT, data: text, payload }
     await sendInput(input)
   }
 
-  const sendPayload = async payload => {
+  const sendPayload = async (payload: string) => {
     if (!payload) return
     const input = { type: INPUT.POSTBACK, payload }
     await sendInput(input)
   }
 
-  const sendAttachment = async attachment => {
-    if (attachment.file) {
-      const attachmentType = getMediaType(attachment.file.type)
+  const sendAttachment = async (attachment: File) => {
+    if (attachment) {
+      const attachmentType = getMediaType(attachment.type)
       if (!attachmentType) return
       const input = {
         type: attachmentType,
-        data: attachment.file,
+        data: attachment,
       }
       await sendInput(input)
-      setCurrentAttachment(undefined)
+      setCurrentAttachment()
     }
   }
 
-  const webviewRequestContext = {
-    closeWebview: closeWebview,
-    getString: stringId => props.getString(stringId, webchatState.session),
-    params: webchatState.webviewParams || {},
-    session: webchatState.session || {},
-  }
-
   useEffect(() => {
     if (firstUpdate.current) {
       firstUpdate.current = false
@@ -618,17 +600,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const userInputEnabled = isUserInputEnabled()
 
-  const webchatWebview = () => (
-    <WebviewRequestContext.Provider value={webviewRequestContext}>
-      <WebviewContainer
-        style={{
-          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
-          ...mobileStyle,
-        }}
-        webview={webchatState.webview}
-      />
-    </WebviewRequestContext.Provider>
-  )
+  // TODO: Create a default theme that include mobileStyle
   let mobileStyle = {}
   if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
     mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
@@ -679,9 +651,11 @@ export const Webchat = forwardRef((props, ref) => {
       value={{
         addMessage,
         getThemeProperty,
+        closeWebview,
         openWebview,
         resolveCase,
         resetUnreadMessages,
+        setIsInputFocused,
         setLastMessageVisible,
         sendAttachment,
         sendInput,
@@ -696,12 +670,15 @@ export const Webchat = forwardRef((props, ref) => {
         updateReplies,
         updateUser: updateSessionWithUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
-        webchatState,
         trackEvent: props.onTrackEvent,
-        webchatRef,
+        webchatState,
+        // TODO: Review if need theme inside Context, already exist inside webchatState
+        theme,
+        webchatContainerRef,
         chatAreaRef,
         inputPanelRef,
         headerRef,
+        repliesRef,
         scrollableMessagesListRef,
       }}
     >
@@ -710,7 +687,7 @@ export const Webchat = forwardRef((props, ref) => {
       {webchatState.isWebchatOpen && (
         <StyledWebchat
           id={BotonicContainerId.Webchat}
-          ref={webchatRef}
+          ref={webchatContainerRef}
           // TODO: Distinguish between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
           role={ROLES.WEBCHAT}
           width={webchatState.width}
@@ -720,13 +697,7 @@ export const Webchat = forwardRef((props, ref) => {
             ...mobileStyle,
           }}
         >
-          <WebchatHeader
-            id={BotonicContainerId.Header}
-            ref={headerRef}
-            onCloseClick={() => {
-              toggleWebchat(false)
-            }}
-          />
+          <WebchatHeader ref={headerRef} />
 
           {webchatState.isCoverComponentOpen ? (
             <CoverComponent
@@ -759,7 +730,7 @@ export const Webchat = forwardRef((props, ref) => {
                 />
               )}
 
-              {webchatState.webview && webchatWebview()}
+              {webchatState.webview && <WebviewContainer />}
 
               {webchatState.isCustomComponentRendered &&
                 customComponent &&
@@ -777,3 +748,6 @@ export const Webchat = forwardRef((props, ref) => {
     WebchatComponent
   )
 })
+
+Webchat.displayName = 'Webchat'
+export { Webchat }

package/src/webchat/webview/header.tsx

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebviewRequestContext } from '../../contexts'
+import { WebchatContext } from '../context'
+import { StyledCloseHeader, StyledWebviewHeader } from './styles'
+
+export const WebviewHeader = () => {
+  const { closeWebview } = useContext(WebviewRequestContext)
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  return (
+    <StyledWebviewHeader
+      role={ROLES.WEBVIEW_HEADER}
+      style={{
+        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle),
+      }}
+    >
+      <StyledCloseHeader onClick={() => closeWebview()}>✕</StyledCloseHeader>
+    </StyledWebviewHeader>
+  )
+}

package/src/webchat/webview/index.tsx

@@ -0,0 +1,80 @@
+import { isMobile, Session as CoreSession } from '@botonic/core'
+import React, { useContext, useEffect } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { CloseWebviewOptions, WebviewRequestContext } from '../../contexts'
+import { WebchatContext } from '../context'
+import { WebviewHeader } from './header'
+import {
+  StyledFrame,
+  StyledFrameAsDiv,
+  StyledWebview,
+  StyledWebviewContent,
+} from './styles'
+
+export const WebviewContainer = () => {
+  const { closeWebview, getThemeProperty, webchatState } =
+    useContext(WebchatContext)
+
+  const webviewRequestContext = {
+    closeWebview: async (options?: CloseWebviewOptions) =>
+      await closeWebview(options),
+    params: webchatState.webviewParams || ({} as Record<string, any>),
+    session: webchatState.session || ({} as Partial<CoreSession>),
+  }
+
+  // TODO: Remove this code and use theme or webchatState.theme from the context,
+  // this code is duplicated from webchat.tsx
+  let mobileStyle = {}
+  if (isMobile(getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
+    mobileStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
+      width: '100%',
+      height: '100%',
+      right: 0,
+      bottom: 0,
+      borderRadius: 0,
+    }
+  }
+
+  const Webview = webchatState.webview as string | React.ComponentType
+
+  const close = async (e: any) => {
+    if (e.data === 'botonicCloseWebview') {
+      console.log('Received close message from webview')
+      await closeWebview()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', close, false)
+
+    return () => window.removeEventListener('message', close, false)
+  }, [])
+
+  // TODO: Review how to split the logic of rendering a webview in local development and production
+  // In local development, Webview is a component. In production it is the URL of the webview
+  const isUrlToWebview = typeof Webview === 'string'
+
+  return (
+    <StyledWebview
+      role={ROLES.WEBVIEW}
+      style={{
+        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
+        ...mobileStyle,
+      }}
+    >
+      <WebviewHeader />
+      <StyledWebviewContent>
+        {isUrlToWebview ? (
+          <StyledFrame src={Webview} />
+        ) : (
+          <WebviewRequestContext.Provider value={webviewRequestContext}>
+            <StyledFrameAsDiv>
+              <Webview />
+            </StyledFrameAsDiv>
+          </WebviewRequestContext.Provider>
+        )}
+      </StyledWebviewContent>
+    </StyledWebview>
+  )
+}

package/src/webchat/webview/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const StyledWebview = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${COLORS.SOLID_WHITE};
+  z-index: 2;
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+`
+
+export const StyledWebviewHeader = styled.div`
+  flex: none;
+  text-align: right;
+  background-color: ${COLORS.WILD_SAND_WHITE};
+  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+`
+export const StyledCloseHeader = styled.div`
+  display: inline-block;
+  padding: 8px 12px;
+  cursor: pointer;
+`
+
+export const StyledWebviewContent = styled.div`
+  flex: 1;
+  overflow: auto;
+`
+
+export const FrameStyles = `
+  border-style: none;
+  width: 100%;
+  height: 100%;
+`
+
+export const StyledFrame = styled.iframe`
+  ${FrameStyles}
+`
+
+export const StyledFrameAsDiv = styled.div`
+  ${FrameStyles}
+`