@botonic/react 0.30.0-alpha.1 → 0.30.0-alpha.2

package/src/webchat/hooks/use-virtual-keyboard-detection.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+export const useVirtualKeyboardDetection = originalHeight => {
+  const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] =
+    useState(false)
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.visualViewport) {
+        if (window.visualViewport.height < originalHeight) {
+          setIsVirtualKeyboardVisible(true)
+          return
+        }
+        setIsVirtualKeyboardVisible(false)
+        return
+      }
+    }
+    window.visualViewport &&
+      window.visualViewport.addEventListener('resize', handleResize)
+
+    return () => {
+      window.visualViewport &&
+        window.visualViewport.removeEventListener('resize', handleResize)
+    }
+  }, [originalHeight])
+
+  return { isVirtualKeyboardVisible }
+}

package/src/webchat/hooks/use-webchat-dimensions.ts

@@ -0,0 +1,50 @@
+import { useCallback, useContext } from 'react'
+
+import { WebchatContext } from '../../contexts'
+
+export const useWebchatDimensions = () => {
+  const {
+    webchatRef,
+    headerRef,
+    inputPanelRef,
+    webchatState: { isWebchatOpen },
+  } = useContext(WebchatContext)
+
+  const calculateResizedPercentualWebchatHeight = useCallback(() => {
+    const webchatElement = webchatRef.current
+    if (!isWebchatOpen || !webchatElement) return 0
+    const webchatHeight = webchatElement.clientHeight || 0
+    const keyboardOffset =
+      (window.visualViewport && window.visualViewport.height) ||
+      window.innerHeight
+    let newWebchatPercentualHeight = keyboardOffset / webchatHeight
+    newWebchatPercentualHeight =
+      Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
+    return newWebchatPercentualHeight
+  }, [isWebchatOpen])
+
+  const calculateResizedPxChatAreaHeight = useCallback(() => {
+    const webchatElement = webchatRef.current
+    const headerElement = headerRef.current
+    const inputPanelElement = inputPanelRef.current
+
+    if (
+      !isWebchatOpen ||
+      !webchatElement ||
+      !headerElement ||
+      !inputPanelElement
+    )
+      return 0
+
+    return (
+      webchatElement.clientHeight -
+      headerElement.clientHeight -
+      inputPanelElement.clientHeight
+    )
+  }, [isWebchatOpen])
+
+  return {
+    calculateResizedPercentualWebchatHeight,
+    calculateResizedPxChatAreaHeight,
+  }
+}

package/src/webchat/hooks/use-webchat-resizer.ts

@@ -0,0 +1,43 @@
+import { useContext } from 'react'
+
+import { WebchatContext } from '../../contexts'
+import { useWebchatDimensions } from './use-webchat-dimensions'
+
+export const useWebchatResizer = () => {
+  const { webchatRef, chatAreaRef, inputPanelRef, headerRef } =
+    useContext(WebchatContext)
+
+  const {
+    calculateResizedPercentualWebchatHeight,
+    calculateResizedPxChatAreaHeight,
+  } = useWebchatDimensions()
+
+  const handleKeyboardShown = () => {
+    if (
+      webchatRef.current &&
+      chatAreaRef.current &&
+      headerRef.current &&
+      inputPanelRef.current
+    ) {
+      webchatRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`
+      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
+    }
+  }
+
+  const handleKeyboardHidden = () => {
+    if (
+      webchatRef.current &&
+      chatAreaRef.current &&
+      inputPanelRef.current &&
+      headerRef.current
+    ) {
+      webchatRef.current.style.height = '100%'
+      chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`
+    }
+  }
+
+  return {
+    handleKeyboardShown,
+    handleKeyboardHidden,
+  }
+}

package/src/webchat/hooks/use-webchat.ts

@@ -1,5 +1,5 @@
 import { Input, Session } from '@botonic/core'
-import { useReducer } from 'react'
+import { useReducer, useRef } from 'react'
 
 import { ThemeProps, Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
@@ -42,7 +42,6 @@ export const webchatInitialState: WebchatState = {
   isCustomComponentRendered: false,
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
-  jwt: undefined,
   numUnreadMessages: 0,
   isLastMessageVisible: true,
 }
@@ -53,6 +52,13 @@ export function useWebchat() {
     webchatInitialState
   )
 
+  const webchatRef = useRef<HTMLDivElement | null>(null)
+  const chatAreaRef = useRef<HTMLDivElement | null>(null)
+  const inputPanelRef = useRef<HTMLDivElement | null>(null)
+  const headerRef = useRef<HTMLDivElement | null>(null)
+  const scrollableMessagesListRef = useRef<HTMLDivElement | null>(null)
+  const repliesRef = useRef<HTMLDivElement | null>(null)
+
   const addMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.ADD_MESSAGE, payload: message })
 
@@ -177,13 +183,6 @@ export function useWebchat() {
     })
   }
 
-  const updateJwt = (jwt: string) => {
-    webchatDispatch({
-      type: WebchatAction.UPDATE_JWT,
-      payload: jwt,
-    })
-  }
-
   const resetUnreadMessages = () => {
     webchatDispatch({
       type: WebchatAction.RESET_UNREAD_MESSAGES,
@@ -213,7 +212,6 @@ export function useWebchat() {
     toggleWebchat,
     updateDevSettings,
     updateHandoff,
-    updateJwt,
     updateLastMessageDate,
     updateLastRoutePath,
     updateLatestInput,
@@ -225,5 +223,11 @@ export function useWebchat() {
     updateWebview,
     webchatDispatch,
     webchatState,
+    webchatRef,
+    headerRef,
+    chatAreaRef,
+    scrollableMessagesListRef,
+    repliesRef,
+    inputPanelRef,
   }
 }

package/src/webchat/index-types.ts

@@ -47,7 +47,6 @@ export interface WebchatState {
   isCustomComponentRendered: boolean
   lastMessageUpdate?: string
   currentAttachment?: File
-  jwt?: string
   numUnreadMessages: number
   isLastMessageVisible: boolean
 }

package/src/webchat/message-list/index.tsx

@@ -1,28 +1,23 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
-import { ROLES, WEBCHAT } from '../../constants'
+import { ROLES } from '../../constants'
 import { WebchatContext } from '../../contexts'
-import { StyledScrollbar } from '../components/styled-scrollbar'
-import { TypingIndicator } from '../components/typing-indicator'
+import { BotonicContainerId } from '../constants'
+import { TypingIndicator } from '../typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
-import { ContainerMessage } from './styles'
+import { ContainerMessage, ScrollableMessageList } from './styles'
 import { UnreadMessagesBanner } from './unread-messages-banner'
 import { useNotifications } from './use-notifications'
 
 export const WebchatMessageList = () => {
   const {
     webchatState,
-    getThemeProperty,
     resetUnreadMessages,
     setLastMessageVisible,
+    scrollableMessagesListRef,
   } = useContext(WebchatContext)
 
-  const scrollbarOptions = {
-    ...{ enable: true, autoHide: true },
-    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),
-  }
-
   const [firstUnreadMessageId, setFirstUnreadMessageId] = useState()
 
   const lastMessageBottomRef = useRef<HTMLDivElement>(null)
@@ -104,15 +99,10 @@ export const WebchatMessageList = () => {
 
   return (
     <>
-      <StyledScrollbar
+      <ScrollableMessageList
+        id={BotonicContainerId.ScrollableMessagesList}
+        ref={scrollableMessagesListRef}
         role={ROLES.MESSAGE_LIST}
-        // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
-        id='botonic-scrollable-content'
-        // @ts-ignore
-        scrollbar={scrollbarOptions}
-        autoHide={scrollbarOptions.autoHide}
-        ismessagescontainer={true.toString()}
-        style={{ flex: 1 }}
       >
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
@@ -136,7 +126,7 @@ export const WebchatMessageList = () => {
           )
         })}
         {webchatState.typing && <TypingIndicator />}
-      </StyledScrollbar>
+      </ScrollableMessageList>
       {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}
     </>
   )

package/src/webchat/message-list/scroll-button.tsx

@@ -1,8 +1,6 @@
-import React, { useContext } from 'react'
+import React from 'react'
 
 import ArrowScrollDown from '../../assets/arrow-scroll-down.svg'
-import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
 import { ContainerScrollButton } from './styles'
 import { useDebounce } from './use-debounce'

package/src/webchat/message-list/styles.ts

@@ -47,3 +47,13 @@ export const ContainerUnreadMessagesBanner = styled.div`
     width: 10px;
   }
 `
+
+export const ScrollableMessageList = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  -webkit-overflow-scrolling: touch;
+`

package/src/webchat/replies.jsx

@@ -3,7 +3,12 @@ import styled from 'styled-components'
 
 import { WEBCHAT } from '../constants'
 import { WebchatContext } from '../contexts'
-import { StyledScrollbar } from '../webchat/components/styled-scrollbar'
+import { BotonicContainerId } from './constants'
+
+const ScrollableReplies = styled.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`
 
 const RepliesContainer = styled.div`
   display: flex;
@@ -13,6 +18,7 @@ const RepliesContainer = styled.div`
   padding-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
+  overflow-x: scroll;
 `
 
 const ReplyContainer = styled.div`
@@ -28,11 +34,8 @@ const options = {
 }
 
 export const WebchatReplies = props => {
-  const { webchatState, getThemeProperty } = useContext(WebchatContext)
-  const scrollbarOptions = {
-    ...{ enable: true, autoHide: true },
-    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),
-  }
+  const { webchatState, getThemeProperty, repliesRef } =
+    useContext(WebchatContext)
   let justifyContent = 'center'
   const flexWrap = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,
@@ -44,11 +47,10 @@ export const WebchatReplies = props => {
       options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]
 
   return (
-    <StyledScrollbar
-      scrollbar={scrollbarOptions}
-      autoHide={scrollbarOptions.autoHide}
-    >
+    <ScrollableReplies>
       <RepliesContainer
+        id={BotonicContainerId.RepliesContainer}
+        ref={repliesRef}
         className='replies-container'
         justify={justifyContent}
         wrap={flexWrap}
@@ -57,6 +59,6 @@ export const WebchatReplies = props => {
           <ReplyContainer key={i}>{r}</ReplyContainer>
         ))}
       </RepliesContainer>
-    </StyledScrollbar>
+    </ScrollableReplies>
   )
 }

package/src/webchat/typing-indicator/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { COLORS, ROLES } from '../../constants'
+import { Dot, TypingIndicatorWrapper } from './styles'
+
+export const TypingIndicator = () => (
+  <TypingIndicatorWrapper
+    role={ROLES.TYPING_INDICATOR}
+    className='typing-indicator'
+    backgroundColor={COLORS.SEASHELL_WHITE}
+  >
+    <Dot />
+    <Dot />
+    <Dot />
+  </TypingIndicatorWrapper>
+)

package/src/webchat/typing-indicator/styles.ts

@@ -0,0 +1,50 @@
+import styled, { keyframes } from 'styled-components'
+
+const blink = keyframes`
+  50% {
+    opacity: 1;
+  }
+`
+
+const bulge = keyframes`
+  50% {
+    transform: scale(1.05);
+  }
+`
+
+interface TypingIndicatorWrapperProps {
+  backgroundColor: string
+}
+
+export const TypingIndicatorWrapper = styled.div<TypingIndicatorWrapperProps>`
+  will-change: transform;
+  width: 44px;
+  line-height: 0px;
+  border-radius: 20px;
+  padding: 8px 2px 8px;
+  text-align: center;
+  display: block;
+  margin: 8px;
+  position: relative;
+  animation: 2s ${bulge} infinite ease-out;
+  background-color: ${props => props.backgroundColor};
+`
+
+export const Dot = styled.span`
+  height: 6px;
+  width: 6px;
+  margin: 0 1px;
+  background-color: #9e9ea1;
+  display: inline-block;
+  border-radius: 50%;
+  opacity: 0.4;
+  &:nth-of-type(1) {
+    animation: 1s ${blink} infinite 0.3333s;
+  }
+  &:nth-of-type(2) {
+    animation: 1s ${blink} infinite 0.6666s;
+  }
+  &:nth-of-type(3) {
+    animation: 1s ${blink} infinite 1s;
+  }
+`

package/src/webchat/webchat-chat-area/index.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+import { WebchatContext } from '../../contexts'
+import { BotonicContainerId } from '../constants'
+import { useWebchatDimensions } from '../hooks'
+import { WebchatMessageList } from '../message-list'
+import { WebchatReplies } from '../replies'
+import { StyledWebchatChatArea } from './styles'
+
+export const WebchatChatArea = () => {
+  const {
+    webchatState: { replies },
+    chatAreaRef,
+  } = useContext(WebchatContext)
+
+  const { calculateResizedPxChatAreaHeight } = useWebchatDimensions()
+  const [chatAreaHeight, setChatAreaHeight] = useState(0)
+
+  useEffect(() => {
+    setChatAreaHeight(calculateResizedPxChatAreaHeight())
+  }, [])
+
+  return (
+    <StyledWebchatChatArea
+      id={BotonicContainerId.ChatArea}
+      ref={chatAreaRef}
+      height={chatAreaHeight}
+    >
+      <WebchatMessageList />
+      {replies && Object.keys(replies).length > 0 && (
+        <WebchatReplies replies={replies} />
+      )}
+    </StyledWebchatChatArea>
+  )
+}

package/src/webchat/webchat-chat-area/styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const StyledWebchatChatArea = styled.div<{ height: number }>`
+  display: inherit;
+  flex-direction: inherit;
+  height: ${props => props.height}px;
+  width: inherit;
+  overflow: inherit;
+`

package/src/webchat/webchat-input-panel/index.tsx

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
 import { getFullMimeWhitelist } from '../../message-utils'
-import { DeviceAdapter } from '../devices/device-adapter'
+import { BotonicContainerId } from '../constants'
 import { Attachment } from './attachment'
 import { EmojiPicker } from './emoji-picker'
 import { OpenedEmojiPicker } from './opened-emoji-picker'
@@ -20,7 +20,7 @@ interface WebchatInputPanelProps {
   enableAttachments: boolean
   handleAttachment: (event: any) => void
   textareaRef: React.MutableRefObject<HTMLTextAreaElement>
-  deviceAdapter: DeviceAdapter
+  host: HTMLElement
   onUserInput?: (event: any) => Promise<void>
 }
 
@@ -30,7 +30,7 @@ export const WebchatInputPanel = ({
   enableAttachments,
   handleAttachment,
   textareaRef,
-  deviceAdapter,
+  host,
   onUserInput,
 }: WebchatInputPanelProps) => {
   const {
@@ -39,6 +39,7 @@ export const WebchatInputPanel = ({
     togglePersistentMenu,
     toggleEmojiPicker,
     webchatState,
+    inputPanelRef,
   } = useContext(WebchatContext)
 
   const handleSelectedEmoji = event => {
@@ -77,6 +78,8 @@ export const WebchatInputPanel = ({
 
   return (
     <UserInputContainer
+      id={BotonicContainerId.InputPanel}
+      ref={inputPanelRef}
       style={{
         ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputStyle),
       }}
@@ -92,7 +95,7 @@ export const WebchatInputPanel = ({
       <PersistentMenu onClick={handleMenu} persistentMenu={persistentMenu} />
 
       <Textarea
-        deviceAdapter={deviceAdapter}
+        host={host}
         persistentMenu={persistentMenu}
         textareaRef={textareaRef}
         sendChatEvent={sendChatEvent}

package/src/webchat/webchat-input-panel/textarea.tsx

@@ -5,11 +5,11 @@ import { PersistentMenuTheme } from '../../components/index-types'
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../contexts'
 import { Typing } from '../../index-types'
-import { DeviceAdapter } from '../devices/device-adapter'
+import { useDeviceAdapter } from '../hooks'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
-  deviceAdapter: DeviceAdapter
+  host: HTMLElement
   persistentMenu: PersistentMenuTheme
   textareaRef: React.MutableRefObject<HTMLTextAreaElement>
   sendChatEvent: (event: string) => Promise<void>
@@ -17,13 +17,15 @@ interface TextareaProps {
 }
 
 export const Textarea = ({
-  deviceAdapter,
+  host,
   persistentMenu,
   textareaRef,
   sendChatEvent,
   sendTextAreaText,
 }: TextareaProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+  const { getThemeProperty, webchatState } = useContext(WebchatContext)
+
+  useDeviceAdapter(host, webchatState.isWebchatOpen)
 
   let isTyping = false
   let typingTimeout
@@ -74,12 +76,6 @@ export const Textarea = ({
       <TextareaAutosize
         ref={(ref: HTMLTextAreaElement) => (textareaRef.current = ref)}
         name='text'
-        onFocus={() => {
-          deviceAdapter.onFocus()
-        }}
-        onBlur={() => {
-          deviceAdapter.onBlur()
-        }}
         maxRows={4}
         wrap='soft'
         maxLength={1000}
@@ -92,7 +88,7 @@ export const Textarea = ({
         onKeyUp={onKeyUp}
         style={{
           display: 'flex',
-          fontSize: deviceAdapter.fontSize(14),
+          fontSize: 16,
           width: '100%',
           border: 'none',
           resize: 'none',

package/src/webchat/webchat-reducer.ts

@@ -48,8 +48,6 @@ export function webchatReducer(
       return { ...state, lastRoutePath: action.payload }
     case WebchatAction.SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
-    case WebchatAction.UPDATE_JWT:
-      return { ...state, jwt: action.payload }
     default:
       return messagesReducer(state, action)
   }