@botonic/react 0.31.5-alpha.1 → 0.32.0

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

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

package/src/webchat/index-types.ts

@@ -1,7 +1,4 @@
-import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
-import { RefObject } from 'react'
-
-import { Webview } from '../components/index-types'
+import { WebchatArgs } from '../index-types'
 
 export interface WebchatStateTheme {
   headerTitle: string
@@ -11,59 +8,13 @@ export interface WebchatStateTheme {
   textPlaceholder: string
   style: {
     fontFamily: string
+    borderRadius?: string
   }
 }
 
-export interface ErrorMessage {
-  message?: string
-}
-export interface DevSettings {
-  keepSessionOnReload?: boolean
-  showSessionView?: boolean
-}
-
-export interface WebchatState {
-  width: number
-  height: number
-  messagesJSON: any[]
-  messagesComponents: any[]
-  replies: any[]
-  latestInput: Partial<CoreInput>
-  typing: boolean
-  webview: Webview | null
-  webviewParams: null
-  session: Partial<CoreSession>
-  lastRoutePath: string | null
-  handoff: boolean
-  theme: WebchatStateTheme
-  themeUpdates: Partial<WebchatStateTheme>
-  error: ErrorMessage
-  online: boolean
-  devSettings: DevSettings
-  isWebchatOpen: boolean
-  isEmojiPickerOpen: boolean
-  isPersistentMenuOpen: boolean
-  isCoverComponentOpen: boolean
-  isCustomComponentRendered: boolean
-  lastMessageUpdate?: string
-  currentAttachment?: File
-  numUnreadMessages: number
-  isLastMessageVisible: boolean
-}
-
-// export interface WebchatProps extends WebchatArgs {
-export interface WebchatProps {
-  ref: RefObject<any>
-  onConnectionRegained?: () => Promise<void>
-}
-
-export interface WebchatDevProps extends WebchatProps {
+export interface WebchatDevProps extends WebchatArgs {
   initialDevSettings?: {
     keepSessionOnReload?: boolean
     showSessionView?: boolean
   }
 }
-
-export interface CoverComponentProps {
-  closeComponent: () => void
-}

package/src/webchat/index.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+export { WebchatContext } from './context'
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 

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

@@ -2,13 +2,13 @@ import React, { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface AttachmentProps {
   accept: string
-  enableAttachments: boolean
+  enableAttachments?: boolean
   onChange: (event: any) => void
 }
 

package/src/webchat/input-panel/emoji-picker.tsx

@@ -2,12 +2,12 @@ import React, { useContext } from 'react'
 
 import LogoEmoji from '../../assets/emojiButton.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface EmojiPickerProps {
-  enableEmojiPicker: boolean
+  enableEmojiPicker?: boolean
   onClick: () => void
 }
 

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

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { getFullMimeWhitelist } from '../../message-utils'
+import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
 import { Attachment } from './attachment'
 import { EmojiPicker } from './emoji-picker'
@@ -16,10 +16,10 @@ import { Textarea } from './textarea'
 
 interface InputPanelProps {
   persistentMenu: any
-  enableEmojiPicker: boolean
-  enableAttachments: boolean
+  enableEmojiPicker?: boolean
+  enableAttachments?: boolean
   handleAttachment: (event: any) => void
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   host: HTMLElement
   onUserInput?: (event: any) => Promise<void>
 }
@@ -43,6 +43,8 @@ export const InputPanel = ({
   } = useContext(WebchatContext)
 
   const handleSelectedEmoji = event => {
+    if (!textareaRef.current) return
+
     textareaRef.current.value += event.emoji
     textareaRef.current.focus()
   }
@@ -56,7 +58,9 @@ export const InputPanel = ({
   }
 
   const sendTextAreaText = async () => {
-    await sendText(textareaRef.current.value)
+    if (!textareaRef.current) return
+
+    await sendText(textareaRef.current?.value)
     textareaRef.current.value = ''
   }
 

package/src/webchat/input-panel/persistent-menu.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import LogoMenu from '../../assets/menuButton.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 

package/src/webchat/input-panel/send-button.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 

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

@@ -1,17 +1,17 @@
 import React, { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { PersistentMenuTheme } from '../../components/index-types'
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Typing } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
+import { PersistentMenuOptionsTheme } from '../theme/types'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
-  persistentMenu: PersistentMenuTheme
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  persistentMenu: PersistentMenuOptionsTheme
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>
 }
@@ -23,7 +23,8 @@ export const Textarea = ({
   sendChatEvent,
   sendTextAreaText,
 }: TextareaProps) => {
-  const { getThemeProperty, webchatState } = useContext(WebchatContext)
+  const { getThemeProperty, webchatState, setIsInputFocused } =
+    useContext(WebchatContext)
 
   useDeviceAdapter(host, webchatState.isWebchatOpen)
 
@@ -44,6 +45,8 @@ export const Textarea = ({
   }
 
   const onKeyUp = () => {
+    if (!textareaRef.current) return
+
     if (textareaRef.current.value === '') {
       stopTyping()
       return
@@ -71,10 +74,20 @@ export const Textarea = ({
     sendChatEvent(Typing.Off)
   }
 
+  const handleFocus = () => {
+    setIsInputFocused(true)
+  }
+
+  const handleBlur = () => {
+    setIsInputFocused(false)
+  }
+
   return (
     <TextAreaContainer>
       <TextareaAutosize
         ref={(ref: HTMLTextAreaElement) => (textareaRef.current = ref)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         name='text'
         maxRows={4}
         wrap='soft'

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

@@ -1,15 +1,23 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { ROLES } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
-import { TypingIndicator } from '../typing-indicator'
+import TypingIndicator from '../typing-indicator'
 import { IntroMessage } from './intro-message'
 import { ScrollButton } from './scroll-button'
 import { ContainerMessage, ScrollableMessageList } from './styles'
 import { UnreadMessagesBanner } from './unread-messages-banner'
 import { useNotifications } from './use-notifications'
 
+const SCROLL_TIMEOUT = 200
+const scrollOptionsEnd: ScrollIntoViewOptions = {
+  block: 'end',
+}
+const scrollOptionsCenter: ScrollIntoViewOptions = {
+  block: 'center',
+}
+
 export const WebchatMessageList = () => {
   const {
     webchatState,
@@ -18,39 +26,50 @@ export const WebchatMessageList = () => {
     scrollableMessagesListRef,
   } = useContext(WebchatContext)
 
-  const [firstUnreadMessageId, setFirstUnreadMessageId] = useState()
+  const { notificationsEnabled } = useNotifications()
 
-  const lastMessageBottomRef = useRef<HTMLDivElement>(null)
+  const [firstUnreadMessageId, setFirstUnreadMessageId] = useState<string>()
 
-  const scrollToBottom = () => {
+  const lastMessageRef = useRef<HTMLDivElement>(null)
+  const typingRef = useRef<HTMLDivElement>(null)
+  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)
+
+  const scrollToTyping = () => {
     setTimeout(() => {
-      lastMessageBottomRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end',
-      })
-    }, 100)
+      typingRef.current?.scrollIntoView(scrollOptionsEnd)
+    }, SCROLL_TIMEOUT)
   }
 
-  const handleScrollToBottom = () => {
-    resetUnreadMessages()
-    scrollToBottom()
+  const scrollToLastMessage = () => {
+    setTimeout(() => {
+      lastMessageRef.current?.scrollIntoView(scrollOptionsEnd)
+    }, SCROLL_TIMEOUT)
   }
 
-  const unreadMessagesBannerRef = useRef<HTMLDivElement>(null)
-
   const scrollToBanner = () => {
     setTimeout(() => {
-      unreadMessagesBannerRef.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      })
-    }, 100)
+      unreadMessagesBannerRef.current?.scrollIntoView(scrollOptionsCenter)
+    }, SCROLL_TIMEOUT)
   }
 
-  const showUnreadMessagesBanner = (messageComponentId: string) =>
-    firstUnreadMessageId &&
-    messageComponentId === firstUnreadMessageId &&
-    webchatState.numUnreadMessages > 0
+  const handleScrollToBottom = () => {
+    resetUnreadMessages()
+    if (webchatState.typing) {
+      scrollToTyping()
+      return
+    }
+
+    scrollToLastMessage()
+  }
+
+  const showUnreadMessagesBanner = (messageComponentId: string) => {
+    return (
+      !webchatState.isInputFocused &&
+      firstUnreadMessageId &&
+      messageComponentId === firstUnreadMessageId &&
+      webchatState.numUnreadMessages > 0
+    )
+  }
 
   useEffect(() => {
     const firstUnreadMessage = webchatState.messagesComponents.find(
@@ -60,39 +79,47 @@ export const WebchatMessageList = () => {
   }, [webchatState.messagesComponents])
 
   useEffect(() => {
-    if (
-      webchatState.messagesComponents.length > 0 &&
-      lastMessageBottomRef.current
-    ) {
+    if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {
       const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           setLastMessageVisible(entry.isIntersecting)
         })
       })
-      observer.observe(lastMessageBottomRef.current)
+      observer.observe(lastMessageRef.current)
     }
   }, [webchatState.messagesComponents])
 
-  const { notificationsEnabled } = useNotifications()
-
   useEffect(() => {
     if (!notificationsEnabled) {
-      scrollToBottom()
-      return
+      if (webchatState.typing) {
+        scrollToTyping()
+        return
+      }
+
+      scrollToLastMessage()
     }
-  }, [webchatState.typing])
+  }, [webchatState.typing, webchatState.messagesComponents])
 
   useEffect(() => {
-    if (notificationsEnabled) {
-      if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
+    if (webchatState.isWebchatOpen && notificationsEnabled) {
+      if (unreadMessagesBannerRef.current) {
         scrollToBanner()
         return
       }
 
-      scrollToBottom()
-      return
+      if (webchatState.typing) {
+        scrollToTyping()
+        return
+      }
+
+      scrollToLastMessage()
     }
-  }, [firstUnreadMessageId, webchatState.isWebchatOpen, webchatState.typing])
+  }, [
+    firstUnreadMessageId,
+    webchatState.isWebchatOpen,
+    webchatState.typing,
+    webchatState.messagesComponents,
+  ])
 
   const showScrollButton =
     webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible
@@ -107,25 +134,27 @@ export const WebchatMessageList = () => {
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
           return (
-            <ContainerMessage role={ROLES.MESSAGE} key={index}>
-              {showUnreadMessagesBanner(messageComponent.props.id) && (
-                <UnreadMessagesBanner
-                  unreadMessagesBannerRef={unreadMessagesBannerRef}
-                />
-              )}
-              {messageComponent}
+            <React.Fragment key={messageComponent.props.id}>
+              <ContainerMessage role={ROLES.MESSAGE}>
+                {showUnreadMessagesBanner(messageComponent.props.id) && (
+                  <UnreadMessagesBanner
+                    unreadMessagesBannerRef={unreadMessagesBannerRef}
+                  />
+                )}
+                {messageComponent}
+              </ContainerMessage>
               {index === webchatState.messagesComponents.length - 1 && (
                 <div
-                  ref={lastMessageBottomRef}
+                  ref={lastMessageRef}
                   style={{
                     content: '',
                   }}
                 ></div>
               )}
-            </ContainerMessage>
+            </React.Fragment>
           )
         })}
-        {webchatState.typing && <TypingIndicator />}
+        {webchatState.typing && <TypingIndicator ref={typingRef} />}
       </ScrollableMessageList>
       {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}
     </>

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

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Fade } from '../../shared/styles'
 import { resolveImage } from '../../util/environment'
 import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
 import { DefaultIntroImage } from './styles'
 
 export const IntroMessage = () => {

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

@@ -15,9 +15,9 @@ export const DefaultIntroImage = styled.img`
 `
 
 export const ContainerScrollButton = styled.div`
-  position: absolute;
-  right: 10px;
-  bottom: 65px;
+  position: sticky;
+  left: 85%;
+  bottom: 15px;
 
   background-color: #6d6a78;
   cursor: pointer;
@@ -55,5 +55,6 @@ export const ScrollableMessageList = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
 `

package/src/webchat/message-list/unread-messages-banner.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
 
 import ArrowDown from '../../assets/arrow-down.svg'
-import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { ContainerUnreadMessagesBanner } from './styles'
 import { useNotifications } from './use-notifications'
 

package/src/webchat/message-list/use-notifications.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 
 export function useNotifications() {
   const { getThemeProperty } = useContext(WebchatContext)

package/src/webchat/replies/index.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
+import { BotonicContainerId } from '../constants'
+import { RepliesContainer, ReplyContainer, ScrollableReplies } from './styles'
+
+const options = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+}
+
+export const WebchatReplies = () => {
+  const { webchatState, getThemeProperty, repliesRef } =
+    useContext(WebchatContext)
+
+  let justifyContent = 'center'
+  const flexWrap = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,
+    'wrap'
+  )
+
+  if (flexWrap === 'nowrap') {
+    justifyContent = 'flex-start'
+  } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
+    justifyContent =
+      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]
+  }
+
+  return (
+    <ScrollableReplies>
+      <RepliesContainer
+        id={BotonicContainerId.RepliesContainer}
+        ref={repliesRef}
+        className='replies-container'
+        justify={justifyContent}
+        wrap={flexWrap}
+      >
+        {webchatState.replies?.map((reply, i) => (
+          // @ts-ignore TODO: In this point reply is the the component to render
+          <ReplyContainer key={`reply-${i}`}>{reply}</ReplyContainer>
+        ))}
+      </RepliesContainer>
+    </ScrollableReplies>
+  )
+}

package/src/webchat/replies/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const ScrollableReplies = styled.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`
+
+interface RepliesContainerProps {
+  justify: string
+  wrap: string
+}
+
+export const RepliesContainer = styled.div<RepliesContainerProps>`
+  display: flex;
+  text-align: center;
+  justify-content: ${props => props.justify};
+  flex-wrap: ${props => props.wrap};
+  padding-bottom: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  overflow-x: auto;
+`
+
+export const ReplyContainer = styled.div`
+  flex: none;
+  display: inline-block;
+  margin: 3px;
+`

package/src/webchat/session-view.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import JSONTree from 'react-json-tree'
+import { JSONTree } from 'react-json-tree'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'
-import { useWebchat } from './hooks'
+import { useWebchat } from './context/use-webchat'
 
 const AttributeContainer = styled.div`
   display: flex;