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

package/src/components/multichannel/multichannel-utils.js

@@ -1,45 +1,63 @@
-/**
- *
- * Whatsapp does not support Markdown
- * (its markup syntax is different)
- */
-export const MULTICHANNEL_WHATSAPP_PROPS = { markdown: false }
-
-export const WHATSAPP_MAX_BUTTONS = 3
-export const WHATSAPP_LIST_MAX_BUTTONS = 10
-export const WHATSAPP_MAX_BUTTON_CHARS = 20
-export const WHATSAPP_MAX_HEADER_CHARS = 60
-export const WHATSAPP_MAX_BODY_CHARS = 1024
-export const WHATSAPP_MAX_FOOTER_CHARS = 60
-export const DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
-export const MENU_BUTTON_WHATSAPP_BUTTON_LIST = 'Show options'
+import { Button } from '../button'
+import { Carousel } from '../carousel'
+import { Pic } from '../pic'
+import { Reply } from '../reply'
+import { Subtitle } from '../subtitle'
+import { Text } from '../text'
+import { Title } from '../title'
+import { MultichannelButton } from './multichannel-button'
+import { MultichannelReply } from './multichannel-reply'
+
+function isNodeKind(node, kind) {
+  return node?.type?.name === kind
+}
 
 export function isMultichannelButton(node) {
-  return isNodeKind(node, 'MultichannelButton')
+  return isNodeKind(node, MultichannelButton.name)
 }
 
 export function isMultichannelReply(node) {
-  return isNodeKind(node, 'MultichannelReply')
+  return isNodeKind(node, MultichannelReply.name)
+}
+
+export function isNodeText(node) {
+  return isNodeKind(node, Text.name)
+}
+
+export function isNodeButton(node) {
+  return isNodeKind(node, Button.name)
+}
+
+export function isNodeCarousel(node) {
+  return isNodeKind(node, Carousel.name)
 }
 
-export function isButton(node) {
-  return isNodeKind(node, 'Button')
+export function isNodeReply(node) {
+  return isNodeKind(node, Reply.name)
 }
 
-export function isNodeKind(node, kind) {
-  return node.type && node.type.name == kind
+export function isNodePic(node) {
+  return isNodeKind(node, Pic.name)
 }
+
+export function isNodeTitle(node) {
+  return isNodeKind(node, Title.name)
+}
+
+export function isNodeSubtitle(node) {
+  return isNodeKind(node, Subtitle.name)
+}
+
 export function elementHasUrl(element) {
-  return element.props && element.props.url
+  return element?.props?.url
 }
+
 export function elementHasPostback(element) {
-  return (
-    (element.props && element.props.payload) ||
-    (element.props && element.props.path)
-  )
+  return element?.props?.payload || element?.props?.path
 }
+
 export function elementHasWebview(element) {
-  return element.props && element.props.webview
+  return element?.props?.webview
 }
 
 export const buttonTypes = {

package/src/components/multichannel/multichannel.jsx

@@ -1,7 +1,6 @@
 import { isFacebook, isWhatsapp } from '@botonic/core'
 import React, { useContext } from 'react'
 
-import { COMPONENT_TYPE } from '../../constants'
 import { RequestContext } from '../../contexts'
 import { deepMapWithIndex } from '../../util/react'
 import { Text } from '../text'
@@ -10,7 +9,13 @@ import { MultichannelCarousel } from './multichannel-carousel'
 import { MultichannelContext } from './multichannel-context'
 import { MultichannelReply } from './multichannel-reply'
 import { MultichannelText } from './multichannel-text'
-import { MULTICHANNEL_WHATSAPP_PROPS } from './multichannel-utils'
+import {
+  isNodeButton,
+  isNodeCarousel,
+  isNodeReply,
+  isNodeText,
+} from './multichannel-utils'
+import { MULTICHANNEL_WHATSAPP_PROPS } from './whatsapp/constants'
 
 export const Multichannel = props => {
   const requestContext = useContext(RequestContext)
@@ -22,7 +27,7 @@ export const Multichannel = props => {
   }
   if (isFacebook(requestContext.session)) {
     const newChildren = deepMapWithIndex(props.children, child => {
-      if (child && child.type && child.type.name === COMPONENT_TYPE.TEXT) {
+      if (isNodeText(child)) {
         return (
           <MultichannelText {...child.props} key={child.key}>
             {child.props.children}
@@ -35,21 +40,21 @@ export const Multichannel = props => {
   }
 
   let newChildren = deepMapWithIndex(props.children, (child, index) => {
-    if (child && child.type && child.type.name === COMPONENT_TYPE.BUTTON) {
+    if (isNodeButton(child)) {
       return (
         <MultichannelButton {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelButton>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.REPLY) {
+    if (isNodeReply(child)) {
       return (
         <MultichannelReply {...child.props} key={child.key}>
           {child.props.children}
         </MultichannelReply>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.TEXT) {
+    if (isNodeText(child)) {
       return (
         <MultichannelText
           {...child.props}
@@ -62,7 +67,7 @@ export const Multichannel = props => {
         </MultichannelText>
       )
     }
-    if (child && child.type && child.type.name === COMPONENT_TYPE.CAROUSEL) {
+    if (isNodeCarousel(child)) {
       return (
         <MultichannelCarousel
           {...child.props}

package/src/components/multichannel/whatsapp/constants.ts

@@ -0,0 +1,10 @@
+export const MULTICHANNEL_WHATSAPP_PROPS = { markdown: false }
+
+export const WHATSAPP_MAX_BUTTONS = 3
+export const WHATSAPP_LIST_MAX_BUTTONS = 10
+export const WHATSAPP_MAX_BUTTON_CHARS = 20
+export const WHATSAPP_MAX_HEADER_CHARS = 60
+export const WHATSAPP_MAX_BODY_CHARS = 1024
+export const WHATSAPP_MAX_FOOTER_CHARS = 60
+export const DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR = 'More options:'
+export const MENU_BUTTON_WHATSAPP_BUTTON_LIST = 'Show options'

package/src/components/whatsapp-button-list.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { truncateText } from '../util'
 import { renderComponent } from '../util/react'
 import { Message } from './message'
-import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/multichannel-utils'
+import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel/whatsapp/constants'
 import { convertToMarkdownMeta } from './multichannel/whatsapp/markdown-meta'
 
 // TODO: Add validation in component

package/src/components/whatsapp-cta-url-button.tsx

@@ -10,7 +10,7 @@ import {
   WHATSAPP_MAX_BUTTON_CHARS,
   WHATSAPP_MAX_FOOTER_CHARS,
   WHATSAPP_MAX_HEADER_CHARS,
-} from './multichannel/multichannel-utils'
+} from './multichannel/whatsapp/constants'
 import { convertToMarkdownMeta } from './multichannel/whatsapp/markdown-meta'
 
 export interface WhatsappCTAUrlButtonCommonProps {

package/src/constants.js

@@ -189,10 +189,3 @@ export const ROLES = {
   DOCUMENT_MESSAGE: 'document-message',
   RAW_MESSAGE: 'raw-message',
 }
-
-export const COMPONENT_TYPE = {
-  TEXT: 'Text',
-  BUTTON: 'Button',
-  REPLY: 'Reply',
-  CAROUSEL: 'Carousel',
-}

package/src/contexts.tsx

@@ -56,6 +56,9 @@ export const WebchatContext = createContext<WebchatContextProps>({
   resetUnreadMessages: () => {
     return
   },
+  setIsInputFocused: () => {
+    return
+  },
   setLastMessageVisible: () => {
     return
   },
@@ -72,6 +75,9 @@ export const WebchatContext = createContext<WebchatContextProps>({
     return
   },
   theme: {},
+  toggleCoverComponent: () => {
+    return
+  },
   toggleWebchat: () => {
     return
   },

package/src/dev-app.jsx

@@ -1,6 +1,6 @@
 import merge from 'lodash.merge'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import { SENDERS } from './index-types'
 import { ReactBot } from './react-bot'
@@ -119,10 +119,10 @@ export class DevApp extends WebchatApp {
 
   render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(() => {
-      render(
-        this.getComponent(dest, optionsAtRuntime),
-        this.getReactMountNode(dest)
-      )
+      const devAppComponent = this.getComponent(dest, optionsAtRuntime)
+      const container = this.getReactMountNode(dest)
+      const reactRoot = createRoot(container)
+      reactRoot.render(devAppComponent)
     })
   }
 

package/src/index-types.ts

@@ -79,18 +79,13 @@ export interface WebchatArgs {
   theme?: ThemeProps
 }
 
-type EventArgs = { [key: string]: any }
-type TrackEventFunction = (
+export type EventArgs = { [key: string]: any }
+export type TrackEventFunction = (
   request: ActionRequest,
   eventName: string,
   args?: EventArgs
 ) => Promise<void>
 
-export interface WebchatAppArgs {
-  appId?: string
-  visibility?: () => boolean
-}
-
 export enum SENDERS {
   bot = 'bot',
   user = 'user',
@@ -162,11 +157,13 @@ export interface WebchatContextProps {
   sendInput: (input: ClientInput) => Promise<void>
   sendPayload: (payload: string) => Promise<void>
   sendText: (text: string, payload?: string) => Promise<void>
+  setIsInputFocused: (isInputFocused: boolean) => void
   setLastMessageVisible: (isLastMessageVisible: boolean) => void
   theme: ThemeProps
   toggleWebchat: (toggle: boolean) => void
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
+  toggleCoverComponent: (toggle: boolean) => void
   updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: boolean) => void

package/src/index.ts

@@ -11,5 +11,5 @@ export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'
 export { NodeApp } from './node-app'
 export * from './util'
 export * from './webchat'
-export { WebchatApp } from './webchat-app'
+export { WebchatApp, WebchatAppProps } from './webchat-app'
 export { WebviewApp } from './webview-app'

package/src/webchat/actions.ts

@@ -23,4 +23,5 @@ export enum WebchatAction {
   UPDATE_THEME = 'updateTheme',
   UPDATE_TYPING = 'updateTyping',
   UPDATE_WEBVIEW = 'updateWebview',
+  SET_IS_INPUT_FOCUSED = 'setIsInputFocused',
 }

package/src/webchat/cover-component/index.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../contexts'
+
+interface Props {
+  component: any
+  componentProps: any
+}
+
+export const CoverComponent = ({ component, componentProps }: Props) => {
+  const { getThemeProperty, toggleCoverComponent, webchatState } =
+    useContext(WebchatContext)
+
+  const Cover = component
+
+  const coverComponentProps = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps,
+    componentProps
+  )
+
+  const closeCoverComponent = () => {
+    toggleCoverComponent(false)
+  }
+
+  if (!Cover || !webchatState.isCoverComponentOpen) {
+    return null
+  }
+
+  return <Cover closeComponent={closeCoverComponent} {...coverComponentProps} />
+}

package/src/webchat/hooks/use-scroll-to-bottom.ts

@@ -3,11 +3,17 @@ import {
   getWebchatElement,
 } from '../../util/dom'
 
+interface UseScrollToBottom {
+  host: any
+  behavior?: ScrollBehavior
+  timeout?: number
+}
+
 export const useScrollToBottom = ({
   host,
   behavior = 'smooth',
   timeout = 200,
-}) => {
+}: UseScrollToBottom) => {
   const scrollToBottom = () => {
     const webchatElement = getWebchatElement(host)
     if (!webchatElement) return
@@ -17,7 +23,7 @@ export const useScrollToBottom = ({
     setTimeout(() => {
       scrollableMessagesListElement.scrollTo({
         top: scrollableMessagesListElement.scrollHeight,
-        behavior: behavior as ScrollBehavior,
+        behavior: behavior,
       })
     }, timeout)
   }

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

@@ -44,6 +44,7 @@ export const webchatInitialState: WebchatState = {
   currentAttachment: undefined,
   numUnreadMessages: 0,
   isLastMessageVisible: true,
+  isInputFocused: false,
 }
 
 export function useWebchat() {
@@ -196,6 +197,13 @@ export function useWebchat() {
     })
   }
 
+  const setIsInputFocused = (isInputFocused: boolean) => {
+    webchatDispatch({
+      type: WebchatAction.SET_IS_INPUT_FOCUSED,
+      payload: isInputFocused,
+    })
+  }
+
   return {
     addMessage,
     addMessageComponent,
@@ -204,6 +212,7 @@ export function useWebchat() {
     resetUnreadMessages,
     setCurrentAttachment,
     setError,
+    setIsInputFocused,
     setLastMessageVisible,
     setOnline,
     toggleCoverComponent,

package/src/webchat/index-types.ts

@@ -49,6 +49,7 @@ export interface WebchatState {
   currentAttachment?: File
   numUnreadMessages: number
   isLastMessageVisible: boolean
+  isInputFocused: boolean
 }
 
 // export interface WebchatProps extends WebchatArgs {

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

@@ -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)
 
@@ -71,10 +72,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

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