@botonic/react 0.31.0-alpha.3 → 0.31.0-alpha.5

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

@@ -3,15 +3,15 @@ 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 { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
   persistentMenu: PersistentMenuTheme
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>
 }
@@ -45,6 +45,8 @@ export const Textarea = ({
   }
 
   const onKeyUp = () => {
+    if (!textareaRef.current) return
+
     if (textareaRef.current.value === '') {
       stopTyping()
       return

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

@@ -1,7 +1,7 @@
 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 { IntroMessage } from './intro-message'
@@ -12,11 +12,9 @@ import { useNotifications } from './use-notifications'
 
 const SCROLL_TIMEOUT = 200
 const scrollOptionsEnd: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'end',
 }
 const scrollOptionsCenter: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'center',
 }
 
@@ -136,8 +134,8 @@ export const WebchatMessageList = () => {
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
           return (
-            <>
-              <ContainerMessage role={ROLES.MESSAGE} key={index}>
+            <React.Fragment key={messageComponent.props.id}>
+              <ContainerMessage role={ROLES.MESSAGE}>
                 {showUnreadMessagesBanner(messageComponent.props.id) && (
                   <UnreadMessagesBanner
                     unreadMessagesBannerRef={unreadMessagesBannerRef}
@@ -153,7 +151,7 @@ export const WebchatMessageList = () => {
                   }}
                 ></div>
               )}
-            </>
+            </React.Fragment>
           )
         })}
         {webchatState.typing && <TypingIndicator ref={typingRef} />}

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

@@ -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

@@ -3,7 +3,7 @@ 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/{webchat-typed/styles.ts → styles.ts}

@@ -1,8 +1,13 @@
 import styled from 'styled-components'
 
-import { COLORS, WEBCHAT } from '../../constants'
+import { COLORS, WEBCHAT } from '../constants'
 
-export const StyledWebchat = styled.div<{ height: string; width: string }>`
+interface StyledWebchatProps {
+  width: number
+  height: number
+}
+
+export const StyledWebchat = styled.div<StyledWebchatProps>`
   position: fixed;
   right: 20px;
   bottom: 20px;

package/src/webchat/trigger-button/index.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
 
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import {
   StyledTriggerButton,
   TriggerImage,

package/src/webchat/webchat-dev.jsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import styled from 'styled-components'
 
-import { useWebchat } from './hooks'
+import { useWebchat } from './context/use-webchat'
 import { SessionView } from './session-view'
 import { Webchat } from './webchat'