@botonic/react 0.30.6 → 0.30.7-alpha.1

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

@@ -3,13 +3,23 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { ROLES } from '../../constants'
 import { WebchatContext } from '../../contexts'
 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 = {
+  behavior: 'smooth',
+  block: 'end',
+}
+const scrollOptionsCenter: ScrollIntoViewOptions = {
+  behavior: 'smooth',
+  block: 'center',
+}
+
 export const WebchatMessageList = () => {
   const {
     webchatState,
@@ -18,39 +28,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 +81,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 +136,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}
+            <>
+              <ContainerMessage role={ROLES.MESSAGE} key={index}>
+                {showUnreadMessagesBanner(messageComponent.props.id) && (
+                  <UnreadMessagesBanner
+                    unreadMessagesBannerRef={unreadMessagesBannerRef}
+                  />
+                )}
+                {messageComponent}
+              </ContainerMessage>
               {index === webchatState.messagesComponents.length - 1 && (
                 <div
-                  ref={lastMessageBottomRef}
+                  ref={lastMessageRef}
                   style={{
                     content: '',
                   }}
                 ></div>
               )}
-            </ContainerMessage>
+            </>
           )
         })}
-        {webchatState.typing && <TypingIndicator />}
+        {webchatState.typing && <TypingIndicator ref={typingRef} />}
       </ScrollableMessageList>
       {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}
     </>

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;

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

@@ -1,16 +1,24 @@
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { COLORS, ROLES } from '../../constants'
-import { Dot, TypingIndicatorWrapper } from './styles'
+import { Dot, TypingContainer, TypingMsgWrapper } from './styles'
 
-export const TypingIndicator = () => (
-  <TypingIndicatorWrapper
-    role={ROLES.TYPING_INDICATOR}
-    className='typing-indicator'
-    backgroundColor={COLORS.SEASHELL_WHITE}
-  >
-    <Dot />
-    <Dot />
-    <Dot />
-  </TypingIndicatorWrapper>
+const TypingIndicator = forwardRef<HTMLDivElement, any>(
+  (_props, ref: ForwardedRef<HTMLDivElement>) => (
+    <TypingContainer ref={ref}>
+      <TypingMsgWrapper
+        role={ROLES.TYPING_INDICATOR}
+        className='typing-indicator'
+        backgroundColor={COLORS.SEASHELL_WHITE}
+      >
+        <Dot />
+        <Dot />
+        <Dot />
+      </TypingMsgWrapper>
+    </TypingContainer>
+  )
 )
+
+TypingIndicator.displayName = 'TypingIndicator'
+
+export default TypingIndicator

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

@@ -12,16 +12,20 @@ const bulge = keyframes`
   }
 `
 
-interface TypingIndicatorWrapperProps {
+export const TypingContainer = styled.div`
+  padding: 0px 8px 8px 8px;
+`
+
+interface TypingMsgWrapperProps {
   backgroundColor: string
 }
 
-export const TypingIndicatorWrapper = styled.div<TypingIndicatorWrapperProps>`
+export const TypingMsgWrapper = styled.div<TypingMsgWrapperProps>`
   will-change: transform;
   width: 44px;
   line-height: 0px;
   border-radius: 20px;
-  padding: 8px 2px 8px;
+  padding: 8px 2px;
   text-align: center;
   display: block;
   margin: 8px;

package/src/webchat/webchat-reducer.ts

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

package/src/webchat/webchat.jsx

@@ -121,6 +121,7 @@ export const Webchat = forwardRef((props, ref) => {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
@@ -682,6 +683,7 @@ export const Webchat = forwardRef((props, ref) => {
         openWebview,
         resolveCase,
         resetUnreadMessages,
+        setIsInputFocused,
         setLastMessageVisible,
         sendAttachment,
         sendInput,