@botonic/react 0.36.0-alpha.0 → 0.36.0

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,18 +1,17 @@
 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 = () => {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    true
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
   )
   const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro)
   const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage)

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,19 +1,17 @@
 import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 
 export function useNotifications() {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const CustomUnreadMessagesBanner = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom
   )
 
   const notificationsBannerEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled
   )
 
   const notificationsEnabled = getThemeProperty(
@@ -22,13 +20,11 @@ export function useNotifications() {
   )
 
   const bannerText = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText,
-    'unread messages'
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText
   )
 
   const CustomScrollButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom
   )
 
   const scrollButtonEnabled = getThemeProperty(

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;

package/src/webchat/styles.ts

@@ -0,0 +1,65 @@
+import styled from 'styled-components'
+
+import { COLORS } from '../constants'
+
+export const StyledWebchat = styled.div`
+  position: fixed;
+  right: ${props => props.theme.style.right};
+  bottom: ${props => props.theme.style.bottom};
+  width: ${props => props.theme.style.width};
+  height: ${props => props.theme.style.height};
+  margin: auto;
+  background-color: ${props => props.theme.style.backgroundColor};
+  border-radius: 10px;
+  box-shadow: ${props => props.theme.style.boxShadow};
+  font-family: ${props => props.theme.style.fontFamily};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    position: ${props => props.theme.mobileStyle.position};
+    right: ${props => props.theme.mobileStyle.right};
+    bottom: ${props => props.theme.mobileStyle.bottom};
+    width: ${props => props.theme.mobileStyle.width};
+    height: ${props => props.theme.mobileStyle.height};
+    border-radius: ${props => props.theme.mobileStyle.borderRadius};
+    font-size: ${props => props.theme.mobileStyle.fontSize};
+  }
+`
+
+export const ErrorMessageContainer = styled.div`
+  position: relative;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+`
+
+export 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: ${props => props.theme.style.fontFamily};
+`
+
+export 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%;
+`

package/src/webchat/theme/default-theme.ts

@@ -0,0 +1,102 @@
+import { COLORS, WEBCHAT } from '../../constants'
+import { WebchatTheme } from './types'
+
+export const defaultTheme: WebchatTheme = {
+  style: {
+    width: '300px',
+    height: '450px',
+    borderRadius: '10px',
+    fontFamily: "'Noto Sans JP', sans-serif",
+    fontSize: '16px',
+    position: 'fixed',
+    right: '20px',
+    bottom: '20px',
+    backgroundColor: COLORS.SOLID_WHITE,
+    boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`,
+  },
+  mobileBreakpoint: 768,
+  mobileStyle: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '0px',
+    fontSize: '16px',
+    position: 'absolute',
+    right: '0px',
+    bottom: '0px',
+  },
+  header: {
+    title: 'Botonic',
+    subtitle: '',
+    image: WEBCHAT.DEFAULTS.LOGO,
+    style: {
+      borderRadius: '10px 10px 0px 0px',
+    },
+    mobileStyle: {
+      borderRadius: '0px',
+    },
+  },
+  brand: {
+    color: COLORS.BOTONIC_BLUE,
+    image: WEBCHAT.DEFAULTS.LOGO,
+  },
+  button: {
+    autodisable: false,
+    disabledstyle: {
+      opacity: 0.5,
+      cursor: 'auto',
+      pointerEvents: 'none',
+    },
+    messageType: 'text',
+    hoverBackground: COLORS.CONCRETE_WHITE,
+    hoverTextColor: COLORS.SOLID_BLACK,
+    style: {
+      width: '100%',
+      maxHeight: '80px',
+      height: 'auto',
+      fontFamily: 'inherit',
+      fontSize: '14px',
+      fontWeight: 'normal',
+      background: COLORS.SOLID_WHITE,
+      color: COLORS.SOLID_BLACK,
+      outline: '0',
+      border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,
+      borderRadius: '0px',
+      padding: '12px 32px',
+      overflow: 'hidden',
+    },
+    urlIcon: {
+      enable: false,
+      image: WEBCHAT.DEFAULTS.URL_ICON,
+    },
+  },
+  message: {
+    user: {
+      blobTick: true,
+    },
+    bot: {
+      blobTick: true,
+    },
+  },
+  triggerButton: { image: WEBCHAT.DEFAULTS.LOGO },
+  userInput: {
+    attachments: { enable: false },
+    box: {
+      placeholder: 'Ask me something...',
+    },
+    emojiPicker: { enable: false },
+    sendButton: { enable: true },
+    enable: true,
+  },
+  carousel: {
+    enableArrows: true,
+  },
+  animations: { enable: true },
+  notifications: {
+    enable: false,
+    banner: {
+      enable: false,
+      text: 'unread messages',
+    },
+    triggerButton: { enable: false },
+  },
+}

package/src/webchat/theme/theme.d.ts

@@ -0,0 +1,8 @@
+import 'styled-components'
+
+import { WebchatTheme } from './types'
+
+// With this declaration, we can use the theme prop in styled components with TypeScript defined in WebchatTheme
+declare module 'styled-components' {
+  export interface DefaultTheme extends WebchatTheme {}
+}