@botonic/react 0.23.3 → 0.24.0-alpha.0

package/src/components/message.jsx

@@ -4,8 +4,9 @@ import Fade from 'react-reveal/Fade'
 import styled from 'styled-components'
 import { v4 as uuidv4 } from 'uuid'
 
-import { COLORS, SENDERS, WEBCHAT } from '../constants'
+import { COLORS, WEBCHAT } from '../constants'
 import { RequestContext, WebchatContext } from '../contexts'
+import { SENDERS } from '../index-types'
 import { isDev, resolveImage } from '../util/environment'
 import { ConditionalWrapper, renderComponent } from '../util/react'
 import { Button } from './button'
@@ -16,7 +17,7 @@ import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'
 
 const MessageContainer = styled.div`
   display: flex;
-  justify-content: ${props => (props.isfromuser ? 'flex-end' : 'flex-start')};
+  justify-content: ${props => (props.isSentByUser ? 'flex-end' : 'flex-start')};
   position: relative;
   padding: 0px 6px;
 `
@@ -72,7 +73,7 @@ export const Message = props => {
   let {
     type = '',
     blob = true,
-    from = SENDERS.bot,
+    sentBy,
     delay = defaultDelay,
     typing = defaultTyping,
     children,
@@ -80,10 +81,13 @@ export const Message = props => {
     json,
     style,
     imagestyle = props.imagestyle || props.imageStyle,
+    isUnread = true,
     ...otherProps
   } = props
-  const isFromUser = from === SENDERS.user
-  const isFromBot = from === SENDERS.bot
+
+  const isSentByUser = sentBy === SENDERS.user
+  const isSentByBot = sentBy === SENDERS.bot
+  const isSentByAgent = sentBy === SENDERS.agent
   const markdown = props.markdown
   const { webchatState, addMessage, updateReplies, getThemeProperty } =
     useContext(WebchatContext)
@@ -105,7 +109,7 @@ export const Message = props => {
   let textChildren = React.Children.toArray(children).filter(
     e => ![Button, Reply].includes(e.type)
   )
-  if (isFromUser)
+  if (isSentByUser)
     textChildren = textChildren.map(e =>
       typeof e === 'string' ? renderLinks(e) : e
     )
@@ -115,7 +119,7 @@ export const Message = props => {
 
   const getEnvAck = () => {
     if (isDev) return 1
-    if (!isFromUser) return 1
+    if (!isSentByUser) return 1
     if (props.ack !== undefined) return props.ack
     return 0
   }
@@ -131,7 +135,7 @@ export const Message = props => {
         data: decomposedChildren ? decomposedChildren : textChildren,
         timestamp: props.timestamp || getFormattedTimestamp,
         markdown,
-        from,
+        sentBy,
         buttons: buttons.map(b => ({
           parentId: b.props.parentId,
           payload: b.props.payload,
@@ -153,6 +157,7 @@ export const Message = props => {
         display: delay + typing == 0,
         customTypeName: decomposedChildren.customTypeName,
         ack: ack,
+        isUnread: isUnread === 1 || isUnread === true,
       }
       addMessage(message)
     }
@@ -178,7 +183,7 @@ export const Message = props => {
 
   const getBgColor = () => {
     if (!blob) return COLORS.TRANSPARENT
-    if (isFromUser) {
+    if (isSentByUser) {
       return getThemeProperty(
         WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,
         brandColor
@@ -191,11 +196,13 @@ export const Message = props => {
   }
 
   const getMessageStyle = () =>
-    isFromBot
+    isSentByBot
       ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)
       : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)
 
-  const hasBlobTick = () => getThemeProperty(`message.${from}.blobTick`, true)
+  const userOrBotMessage = isSentByUser ? SENDERS.user : SENDERS.bot
+  const hasBlobTick = () =>
+    getThemeProperty(`message.${userOrBotMessage}.blobTick`, true)
 
   const renderBrowser = () => {
     const m = webchatState.messagesJSON.find(m => m.id === state.id)
@@ -209,14 +216,14 @@ export const Message = props => {
         pointerSize == 5
           ? getBgColor()
           : getThemeProperty(
-              `message.${from}.style.borderColor`,
+              `message.${userOrBotMessage}.style.borderColor`,
               COLORS.TRANSPARENT
             )
       const containerStyle = {
-        ...getThemeProperty(`message.${from}.blobTickStyle`),
+        ...getThemeProperty(`message.${userOrBotMessage}.blobTickStyle`),
       }
       const blobTickStyle = {}
-      if (isFromUser) {
+      if (isSentByUser) {
         containerStyle.right = 0
         containerStyle.marginRight = -pointerSize
         blobTickStyle.borderRight = 0
@@ -247,9 +254,10 @@ export const Message = props => {
     )
 
     const resolveCustomTypeName = () =>
-      isFromBot && type === INPUT.CUSTOM ? ` ${m.customTypeName}` : ''
+      isSentByBot && type === INPUT.CUSTOM ? ` ${m.customTypeName}` : ''
+
+    const className = `${type}-${userOrBotMessage}${resolveCustomTypeName()}`
 
-    const className = `${type}-${from}${resolveCustomTypeName()}`
     return (
       <ConditionalWrapper
         condition={animationsEnabled}
@@ -257,12 +265,12 @@ export const Message = props => {
       >
         <>
           <MessageContainer
-            isfromuser={isFromUser}
+            isSentByUser={isSentByUser}
             style={{
               ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),
             }}
           >
-            {isFromBot && BotMessageImage && (
+            {isSentByBot && BotMessageImage && (
               <BotMessageImageContainer
                 style={{
                   ...getThemeProperty(
@@ -280,7 +288,7 @@ export const Message = props => {
             <Blob
               className={className}
               bgcolor={getBgColor()}
-              color={isFromUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}
+              color={isSentByUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}
               blobwidth={getThemeProperty(
                 WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth
               )}
@@ -300,7 +308,7 @@ export const Message = props => {
                   }}
                   markdownstyle={getMarkdownStyle(
                     getThemeProperty,
-                    isFromUser ? COLORS.SEASHELL_WHITE : brandColor
+                    isSentByUser ? COLORS.SEASHELL_WHITE : brandColor
                   )}
                 />
               ) : (
@@ -317,7 +325,7 @@ export const Message = props => {
             <MessageTimestamp
               timestamp={m.timestamp}
               style={timestampStyle}
-              isfromuser={isFromUser}
+              isSentByUser={isSentByUser}
             />
           )}
         </>

package/src/components/timestamps.jsx

@@ -46,17 +46,17 @@ const TimestampText = styled.div`
   font-size: 10px;
   color: ${COLORS.SOLID_BLACK};
   width: 100%;
-  text-align: ${props => (props.isfromuser ? 'right' : 'left')};
-  padding: ${props => (props.isfromuser ? '0px 15px' : '0px 50px')};
+  text-align: ${props => (props.isSentByUser ? 'right' : 'left')};
+  padding: ${props => (props.isSentByUser ? '0px 15px' : '0px 50px')};
   margin-bottom: 5px;
 `
 
-export const MessageTimestamp = ({ timestamp, style, isfromuser }) => {
-  const classSufix = isfromuser ? 'user' : 'bot'
+export const MessageTimestamp = ({ timestamp, style, isSentByUser }) => {
+  const classSufix = isSentByUser ? 'user' : 'bot'
   return (
     <TimestampContainer className={`botonic-timestamp-${classSufix}`}>
       <TimestampText
-        isfromuser={isfromuser}
+        isSentByUser={isSentByUser}
         style={{
           ...style,
         }}

package/src/constants.js

@@ -1,10 +1,5 @@
 import BotonicLogo from './assets/botonic_react_logo100x100.png'
 
-export const SENDERS = {
-  bot: 'bot',
-  user: 'user',
-}
-
 export const COLORS = {
   // http://chir.ag/projects/name-that-color
   APPLE_GREEN: 'rgba(58, 156, 53, 1)',
@@ -125,8 +120,16 @@ export const WEBCHAT = {
     // TriggerButton
     customTrigger: 'triggerButton.custom',
     triggerButtonImage: 'triggerButton.image',
-    triggerButtonNotificationsEnabled: 'triggerButton.notificationsEnabled',
     triggerButtonStyle: 'triggerButton.style',
+    // Notifications
+    notificationsEnabled: 'notifications.enable',
+    notificationsBannerEnabled: 'notifications.banner.enable',
+    notificationsBannerCustom: 'notifications.banner.custom',
+    notificationsBannerText: 'notifications.banner.text',
+    notificationsTriggerButtonEnabled: 'notifications.triggerButton.enable',
+    // Scroll Button
+    scrollButtonEnabled: 'scrollButton.enable',
+    scrollButtonCustom: 'scrollButton.custom',
     // User Input
     blockInputs: 'userInput.blockInputs',
     documentDownload: 'documentDownload',

package/src/contexts.tsx

@@ -29,6 +29,12 @@ export const WebchatContext = createContext<WebchatContextProps>({
   resolveCase: () => {
     return
   },
+  resetUnreadMessages: () => {
+    return
+  },
+  setLastMessageVisible: () => {
+    return
+  },
   sendAttachment: () => {
     return
   },

package/src/dev-app.jsx

@@ -2,7 +2,7 @@ import merge from 'lodash.merge'
 import React from 'react'
 import { render } from 'react-dom'
 
-import { SENDERS } from './constants'
+import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
 import { onDOMLoaded } from './util/dom'
 import { WebchatDev } from './webchat/webchat-dev'
@@ -123,11 +123,17 @@ export class DevApp extends WebchatApp {
 
   async onUserInput({ input, session, lastRoutePath }) {
     this.onMessage &&
-      this.onMessage(this, { from: SENDERS.user, message: input })
+      this.onMessage(this, {
+        sentBy: SENDERS.user,
+        message: input,
+      })
     const resp = await this.bot.input({ input, session, lastRoutePath })
     this.onMessage &&
       resp.response.map(r =>
-        this.onMessage(this, { from: SENDERS.bot, message: r })
+        this.onMessage(this, {
+          sentBy: SENDERS.bot,
+          message: r,
+        })
       )
     this.webchatRef.current.addBotResponse(resp)
   }

package/src/index-types.ts

@@ -1,4 +1,4 @@
-import type {
+import {
   BotRequest as CoreBotRequest,
   Input as CoreInput,
   InputType as CoreInputType,
@@ -7,7 +7,7 @@ import type {
   Routes as CoreRoutes,
   Session as CoreSession,
   SessionUser as CoreSessionUser,
-} from '@botonic/core/lib/esm/models/legacy-types'
+} from '@botonic/core/src'
 import React from 'react'
 
 import {
@@ -129,16 +129,29 @@ export interface WebchatAppArgs {
   visibility?: () => boolean
 }
 
+export enum SENDERS {
+  bot = 'bot',
+  user = 'user',
+  agent = 'agent',
+}
+
 export interface WebchatMessage {
   ack: 0 | 1
+  blob: boolean
   buttons: ButtonProps[]
+  children: any
   data: any
   delay: number
   display: boolean
-  from: 'user' | 'bot'
+  enabletimestamps: boolean
   id: string
+  imagestyle: any
+  isUnread: boolean
+  json: any
   markdown: boolean
   replies: ReplyProps[]
+  sentBy: SENDERS
+  style: any
   timestamp: string
   type: CoreInputType
   typing: number
@@ -173,11 +186,13 @@ export interface WebchatContextProps {
   closeWebview: () => void
   getThemeProperty: (property: string, defaultValue?: string | boolean) => any
   openWebview: (webviewComponent: Webview) => void
+  resetUnreadMessages: () => void
   resolveCase: () => void
   sendAttachment: (attachment: File) => void
   sendInput: (input: CoreInput) => void
   sendPayload: (payload: string) => void
   sendText: (text: string, payload?: string) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
   theme: ThemeProps
   toggleWebchat: (toggle: boolean) => void
   updateLatestInput: (input: CoreInput) => void

package/src/msg-to-botonic.jsx

@@ -88,7 +88,7 @@ export function msgToBotonic(msg, customMessageTypes) {
     const buttons = buttonsParse(msg.buttons)
     return (
       <>
-        <Text {...msg}>
+        <Text {...msg} key={msg.key}>
           {msg.text}
           {buttons}
         </Text>
@@ -125,8 +125,7 @@ export function msgsToBotonic(msgs, customMessageTypes) {
 }
 
 function textToBotonic(msg) {
-  const txt =
-    msg.data && msg.data.text != undefined ? msg.data.text : String(msg.data)
+  const txt = msg.data?.text ?? String(msg.data)
   if (
     (msg.replies && msg.replies.length) ||
     (msg.keyboard && msg.keyboard.length)

package/src/webchat/actions.ts

@@ -1,25 +1,27 @@
 export enum WebchatAction {
   ADD_MESSAGE = 'addMessage',
   ADD_MESSAGE_COMPONENT = 'addMessageComponent',
-  UPDATE_MESSAGE = 'updateMessage',
-  UPDATE_REPLIES = 'updateReplies',
-  UPDATE_LATEST_INPUT = 'updateLatestInput',
-  UPDATE_TYPING = 'updateTyping',
-  UPDATE_WEBVIEW = 'updateWebview',
-  UPDATE_SESSION = 'updateSession',
-  UPDATE_LAST_ROUTE_PATH = 'updateLastRoutePath',
-  UPDATE_HANDOFF = 'updateHandoff',
-  UPDATE_THEME = 'updateTheme',
-  UPDATE_DEV_SETTINGS = 'updateDevSettings',
-  TOGGLE_WEBCHAT = 'toggleWebchat',
-  TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker',
-  TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu',
-  TOGGLE_COVER_COMPONENT = 'toggleCoverComponent',
-  DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent',
-  SET_ERROR = 'setError',
   CLEAR_MESSAGES = 'clearMessages',
-  UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate',
+  DO_RENDER_CUSTOM_COMPONENT = 'doRenderCustomComponent',
+  RESET_UNREAD_MESSAGES = 'resetUnreadMessages',
   SET_CURRENT_ATTACHMENT = 'setCurrentAttachment',
+  SET_ERROR = 'setError',
+  SET_LAST_MESSAGE_VISIBLE = 'setlastMessageVisible',
   SET_ONLINE = 'setOnline',
+  TOGGLE_COVER_COMPONENT = 'toggleCoverComponent',
+  TOGGLE_EMOJI_PICKER = 'toggleEmojiPicker',
+  TOGGLE_PERSISTENT_MENU = 'togglePersistentMenu',
+  TOGGLE_WEBCHAT = 'toggleWebchat',
+  UPDATE_DEV_SETTINGS = 'updateDevSettings',
+  UPDATE_HANDOFF = 'updateHandoff',
   UPDATE_JWT = 'updateJwt',
+  UPDATE_LAST_MESSAGE_DATE = 'updateLastMessageDate',
+  UPDATE_LAST_ROUTE_PATH = 'updateLastRoutePath',
+  UPDATE_LATEST_INPUT = 'updateLatestInput',
+  UPDATE_MESSAGE = 'updateMessage',
+  UPDATE_REPLIES = 'updateReplies',
+  UPDATE_SESSION = 'updateSession',
+  UPDATE_THEME = 'updateTheme',
+  UPDATE_TYPING = 'updateTyping',
+  UPDATE_WEBVIEW = 'updateWebview',
 }

package/src/webchat/components/styled-scrollbar.jsx

@@ -8,7 +8,7 @@ import { COLORS } from '../../constants'
 
 export const StyledScrollbar = styled(SimpleBar)`
   ${props =>
-    props.ismessagescontainer &&
+    props.isMessagesContainer &&
     css`
       display: flex;
       flex-direction: column;

package/src/webchat/devices/device-adapter.js

@@ -22,7 +22,7 @@ export class DeviceAdapter {
 
   onFocus(host) {
     if (this.currentDevice !== DEVICES.MOBILE.IPHONE) {
-      scrollToBottom({ host, timeout: 800 })
+      // scrollToBottom({ host, timeout: 800 })
       return
     }
     setTimeout(() => {

package/src/webchat/devices/webchat-resizer.js

@@ -29,7 +29,7 @@ export class WebchatResizer {
     }
     setTimeout(() => {
       this.setWebchatElementHeight(`${calculateNewWebchatElementHeight()}%`)
-      scrollToBottom(this.host)
+      // scrollToBottom(this.host)
       onKeyboardShownFn()
     }, waitUntilKeyboardIsShown)
   }

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

@@ -15,11 +15,11 @@ export function useTyping({
   webchatState,
   updateTyping,
   updateMessage,
-  host,
-}: UseTyping): void {
+}: // host,
+UseTyping): void {
   useEffect(() => {
     let delayTimeout, typingTimeout
-    scrollToBottom({ host })
+    // scrollToBottom({ host })
     try {
       const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]
       if (nextMsg.delay && nextMsg.typing) {

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

@@ -43,7 +43,8 @@ export const webchatInitialState: WebchatState = {
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
   jwt: undefined,
-  unreadMessages: 0,
+  numUnreadMessages: 0,
+  isLastMessageVisible: true,
 }
 
 export function useWebchat() {
@@ -55,7 +56,7 @@ export function useWebchat() {
   const addMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.ADD_MESSAGE, payload: message })
 
-  const addMessageComponent = (message: WebchatMessage) =>
+  const addMessageComponent = (message: { props: WebchatMessage }) =>
     webchatDispatch({
       type: WebchatAction.ADD_MESSAGE_COMPONENT,
       payload: message,
@@ -183,13 +184,28 @@ export function useWebchat() {
     })
   }
 
+  const resetUnreadMessages = () => {
+    webchatDispatch({
+      type: WebchatAction.RESET_UNREAD_MESSAGES,
+    })
+  }
+
+  const setLastMessageVisible = (isLastMessageVisible: boolean) => {
+    webchatDispatch({
+      type: WebchatAction.SET_LAST_MESSAGE_VISIBLE,
+      payload: isLastMessageVisible,
+    })
+  }
+
   return {
     addMessage,
     addMessageComponent,
     clearMessages,
     doRenderCustomComponent,
+    resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setLastMessageVisible,
     setOnline,
     toggleCoverComponent,
     toggleEmojiPicker,

package/src/webchat/index-types.ts

@@ -48,7 +48,8 @@ export interface WebchatState {
   lastMessageUpdate?: string
   currentAttachment?: File
   jwt?: string
-  unreadMessages: number
+  numUnreadMessages: number
+  isLastMessageVisible: boolean
 }
 
 // export interface WebchatProps extends WebchatArgs {

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

@@ -0,0 +1,103 @@
+import React, { useContext, useEffect, useRef, useState } from 'react'
+
+import { ROLES, WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { scrollToBottom } from '../../util'
+import { StyledScrollbar } from '../components/styled-scrollbar'
+import { TypingIndicator } from '../components/typing-indicator'
+import { IntroMessage } from './intro-message'
+import { ScrollButton } from './scroll-button'
+import { ContainerMessage } from './styles'
+import { UnreadMessagesBanner } from './unread-messages-banner'
+
+export const WebchatMessageList = props => {
+  const {
+    webchatState,
+    getThemeProperty,
+    resetUnreadMessages,
+    setLastMessageVisible,
+  } = useContext(WebchatContext)
+
+  const scrollbarOptions = {
+    ...{ enable: true, autoHide: true },
+    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),
+  }
+
+  const [firstUnreadMessageId, setFirstUnreadMessageId] = useState()
+  useEffect(() => {
+    const firstUnreadMessage = webchatState.messagesComponents.find(
+      message => message.props.isUnread
+    )
+    setFirstUnreadMessageId(firstUnreadMessage?.props?.id)
+  }, [webchatState.messagesComponents])
+
+  const lastMessageRef = useRef(null)
+  useEffect(() => {
+    if (webchatState.messagesComponents.length > 0 && lastMessageRef.current) {
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          setLastMessageVisible(entry.isIntersecting)
+        })
+      })
+      observer.observe(lastMessageRef.current)
+    }
+  }, [webchatState.messagesComponents])
+
+  useEffect(() => {
+    if (webchatState.isLastMessageVisible && webchatState.typing) {
+      scrollToBottom({ host: props.host })
+    }
+    if (webchatState.isLastMessageVisible) {
+      scrollToBottom({ host: props.host })
+    }
+  }, [webchatState.typing, webchatState.isLastMessageVisible])
+
+  const handleScrollToBottom = () => {
+    resetUnreadMessages()
+    scrollToBottom({ host: props.host })
+  }
+
+  const showUnreadMessagesBanner = (messageComponentId: string) =>
+    firstUnreadMessageId &&
+    messageComponentId === firstUnreadMessageId &&
+    webchatState.numUnreadMessages > 0
+
+  const showScrollButton =
+    webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible
+
+  return (
+    <>
+      <StyledScrollbar
+        role={ROLES.MESSAGE_LIST}
+        // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
+        id='botonic-scrollable-content'
+        scrollbar={scrollbarOptions}
+        autoHide={scrollbarOptions.autoHide}
+        isMessagesContainer={true}
+        style={{
+          ...props.style,
+        }}
+      >
+        <IntroMessage />
+        {webchatState.messagesComponents.map((messageComponent, index) => {
+          return (
+            <ContainerMessage role={ROLES.MESSAGE} key={index}>
+              {showUnreadMessagesBanner(messageComponent.props.id) && (
+                <UnreadMessagesBanner
+                  numUnreadMessages={webchatState.numUnreadMessages}
+                />
+              )}
+
+              {index === webchatState.messagesComponents.length - 1 && (
+                <div ref={lastMessageRef} style={{ content: '' }}></div>
+              )}
+              {messageComponent}
+            </ContainerMessage>
+          )
+        })}
+        {webchatState.typing && <TypingIndicator />}
+      </StyledScrollbar>
+      {showScrollButton && <ScrollButton handleClick={handleScrollToBottom} />}
+    </>
+  )
+}

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

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react'
+import Fade from 'react-reveal/Fade'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import { DefaultIntroImage } from './styles'
+
+export const IntroMessage = () => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    true
+  )
+  const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro)
+  const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage)
+  const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle)
+
+  const DefaultIntro = introImage && (
+    <DefaultIntroImage
+      style={{
+        ...introStyle,
+      }}
+      src={resolveImage(introImage)}
+    />
+  )
+
+  return CustomIntro || DefaultIntro ? (
+    <ConditionalWrapper
+      condition={animationsEnabled}
+      wrapper={children => <Fade>{children}</Fade>}
+    >
+      {CustomIntro ? <CustomIntro /> : DefaultIntro}
+    </ConditionalWrapper>
+  ) : null
+}

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

@@ -0,0 +1,41 @@
+import React, { useContext, useEffect, useState } 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'
+
+interface ScrollButtonProps {
+  handleClick: () => void
+}
+
+export const ScrollButton = ({
+  handleClick,
+}: ScrollButtonProps): JSX.Element => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const CustomScrollButton = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom,
+    undefined
+  )
+
+  const scrollButtonEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled,
+    false
+  )
+
+  return (
+    scrollButtonEnabled && (
+      <>
+        {CustomScrollButton ? (
+          <CustomScrollButton />
+        ) : (
+          <ContainerScrollButton onClick={handleClick}>
+            <img src={resolveImage(ArrowScrollDown)} />
+          </ContainerScrollButton>
+        )}
+      </>
+    )
+  )
+}