@botonic/react 0.30.0-alpha.1 → 0.30.0-alpha.2

package/lib/esm/webview-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"webview-app.js","sourceRoot":"","sources":["../../src/webview-app.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"webview-app.js","sourceRoot":"","sources":["../../src/webview-app.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.30.0-alpha.1",
+  "version": "0.30.0-alpha.2",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -20,20 +20,18 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' --fix"
   },
   "dependencies": {
-    "@botonic/core": "0.30.0-alpha.1",
+    "@botonic/core": "0.30.0-alpha.2",
     "axios": "^1.7.2",
     "emoji-picker-react": "^4.4.9",
     "lodash.merge": "^4.6.2",
     "markdown-it": "^12.0.6",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-frame-component": "^4.1.3",
     "react-json-tree": "^0.15.0",
     "react-router-dom": "^5.3.4",
     "react-textarea-autosize": "^8.5.3",
-    "simplebar-react": "^2.4.3",
     "styled-components": "^5.3.0",
-    "ua-parser-js": "^0.8.1",
+    "ua-parser-js": "^1.0.39",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
@@ -44,7 +42,6 @@
     "@types/jest": "^29.5.1",
     "@types/parse5": "^7.0.0",
     "@types/react": "^16.14.56",
-    "@types/react-frame-component": "^4.1.6",
     "@types/styled-components": "^5.1.34",
     "babel-plugin-add-module-exports": "^1.0.4",
     "copyfiles": "^2.4.1",

package/src/components/carousel.jsx

@@ -7,10 +7,14 @@ import RightArrow from '../assets/rightArrow.svg'
 import { COLORS, WEBCHAT } from '../constants'
 import { WebchatContext } from '../contexts'
 import { resolveImage } from '../util/environment'
-import { StyledScrollbar } from '../webchat/components/styled-scrollbar'
 import { ButtonsDisabler } from './buttons-disabler'
 import { Message } from './message'
 
+const ScrollableCarousel = styled.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`
+
 const StyledCarousel = styled.div`
   padding: 10px 0px;
   display: flex;
@@ -62,10 +66,6 @@ const serialize = carouselProps => {
 export const Carousel = props => {
   const { getThemeProperty } = useContext(WebchatContext)
   let content = props.children
-  const scrollbarOptions = {
-    ...{ enable: true, autoHide: true },
-    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),
-  }
   const [hasLeftArrow, setLeftArrow] = useState(false)
   const [hasRightArrow, setRightArrow] = useState(true)
   const carouselRef = useRef(null)
@@ -77,6 +77,7 @@ export const Carousel = props => {
     WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow,
     undefined
   )
+  // TODO: Investigate why when set to false, scroll is enabled via dragging the bar but not hovering the carousel elements
   const carouselArrowsEnabled = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows,
     true
@@ -150,10 +151,7 @@ export const Carousel = props => {
 
   if (isBrowser()) {
     content = (
-      <StyledScrollbar
-        scrollbar={scrollbarOptions}
-        autoHide={scrollbarOptions.autoHide}
-      >
+      <ScrollableCarousel>
         <StyledCarousel
           ref={carouselRef}
           carouselArrowsEnabled={carouselArrowsEnabled}
@@ -161,7 +159,7 @@ export const Carousel = props => {
           <StyledItems>{carouselProps.children}</StyledItems>
           {carouselArrowsEnabled && getArrows()}
         </StyledCarousel>
-      </StyledScrollbar>
+      </ScrollableCarousel>
     )
   }
 

package/src/constants.js

@@ -53,16 +53,10 @@ export const WEBCHAT = {
       pointerEvents: 'none',
     },
   },
-  SELECTORS: {
-    SCROLLABLE_CONTENT: '#botonic-scrollable-content',
-    SIMPLEBAR_CONTENT: '.simplebar-content',
-    SIMPLEBAR_WRAPPER: '.simplebar-content-wrapper',
-  },
   CUSTOM_PROPERTIES: {
     // General
     enableAnimations: 'animations.enable',
     markdownStyle: 'markdownStyle',
-    scrollbar: 'scrollbar',
     imagePreviewer: 'imagePreviewer',
     // Mobile
     mobileBreakpoint: 'mobileBreakpoint',

package/src/contexts.tsx

@@ -26,12 +26,12 @@ export interface CloseWebviewOptions {
 }
 
 export const WebviewRequestContext = createContext<{
-  closeWebview: (options?: CloseWebviewOptions) => undefined
+  closeWebview: (options?: CloseWebviewOptions) => Promise<void>
   getString: (stringId: string) => string
   params: Record<string, any>
   session: CoreSession
 }>({
-  closeWebview: () => undefined,
+  closeWebview: async () => undefined,
   getString: () => '',
   params: {} as Record<string, any>,
   session: {} as CoreSession,
@@ -41,7 +41,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
   addMessage: () => {
     return
   },
-  closeWebview: () => {
+  closeWebview: async () => {
     return
   },
   getThemeProperty: () => {
@@ -100,4 +100,10 @@ export const WebchatContext = createContext<WebchatContextProps>({
   trackEvent: async () => {
     return
   },
+  webchatRef: { current: null },
+  chatAreaRef: { current: null },
+  inputPanelRef: { current: null },
+  headerRef: { current: null },
+  scrollableMessagesListRef: { current: null },
+  repliesRef: { current: null },
 })

package/src/index-types.ts

@@ -55,51 +55,6 @@ export interface CustomMessageType {
   customTypeName: string
 }
 
-// TODO: Reuse types to be reused in respective components
-// export class WebchatApp {
-//   constructor(options: WebchatAppArgs)
-//   addBotMessage(message: WebchatMessage): void
-//   addBotText(text: string): void
-//   addUserMessage(message: WebchatMessage): void
-//   addUserPayload(payload: string): void
-//   addUserText(text: string): void
-//   clearMessages(): void
-//   close(): void
-//   closeCoverComponent(): void
-//   destroy(): void
-//   getComponent(
-//     host: HTMLElement,
-//     optionsAtRuntime?: WebchatAppArgs
-//   ): React.ForwardRefExoticComponent<any>
-//   getLastMessageUpdate(): string
-//   getMessages(): WebchatMessage[]
-//   getVisibility(): Promise<boolean>
-//   isWebchatVisible({ appId: string }): Promise<boolean>
-//   onCloseWebchat(args: any): void
-//   onInitWebchat(args: any): void
-//   onOpenWebchat(args: any): void
-//   onServiceEvent(event: Event): void
-//   onStateChange(args: OnStateChangeArgs): void
-//   onUserInput(args: OnUserInputArgs): Promise<void>
-//   open(): void
-//   openCoverComponent(): void
-//   render(dest?: HTMLElement, optionsAtRuntime?: WebchatAppArgs): void
-//   resendUnsentInputs(): Promise<void>
-//   resolveWebchatVisibility(optionsAtRuntime: {
-//     appId: string
-//     visibility: () => boolean
-//   }): Promise<boolean>
-//   setTyping(enable: boolean): void
-//   toggle(): void
-//   toggleCoverComponent(): void
-//   updateMessageInfo(msgId: string, messageInfo: MessageInfo): void
-//   updateLastMessageDate(date: string): void
-//   updateUser(user: Partial<CoreSessionUser>): void
-//   updateWebchatSettings(settings: WebchatSettingsProps): void
-//   renderCustomComponent(customComponent: React.ReactNode): void
-//   unmountCustomComponent(): void
-// }
-
 export interface WebchatArgs {
   blockInputs?: BlockInputOption[]
   coverComponent?: CoverComponentOptions
@@ -195,7 +150,7 @@ export interface Event {
 
 export interface WebchatContextProps {
   addMessage: (message: WebchatMessage) => void
-  closeWebview: () => void
+  closeWebview: () => Promise<void>
   getThemeProperty: (property: string, defaultValue?: any) => any
   openWebview: (webviewComponent: Webview) => void
   resetUnreadMessages: () => void
@@ -216,10 +171,10 @@ export interface WebchatContextProps {
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   webchatState: WebchatState
   trackEvent: TrackEventFunction
+  webchatRef: React.MutableRefObject<HTMLDivElement | null>
+  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
+  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
+  headerRef: React.MutableRefObject<HTMLDivElement | null>
+  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
+  repliesRef: React.MutableRefObject<HTMLDivElement | null>
 }
-
-// export class DevApp extends WebchatApp {
-//   constructor(args: WebchatAppArgs)
-//   onUserInput(args: OnUserInputArgs): Promise<void>
-//   render(dest: HTMLElement, optionsAtRuntime: WebchatAppArgs): void
-// }

package/src/node-app.jsx

@@ -19,10 +19,4 @@ export class NodeApp {
   input(args) {
     return this.bot.input(args)
   }
-
-  getConfig() {
-    return Object.entries(this.bot.plugins).map(([_, plugin]) => {
-      return { id: plugin.id, name: plugin.name, config: plugin.config }
-    })
-  }
 }

package/src/util/dom.js

@@ -1,40 +1,7 @@
-import { WEBCHAT } from '../constants'
-
-export const getScrollableContent = webchatElement => {
-  return webchatElement.querySelector(WEBCHAT.SELECTORS.SCROLLABLE_CONTENT)
-}
-
-export const getScrollableArea = webchatElement => {
-  const getArea = area => {
-    const botonicScrollableContent = getScrollableContent(webchatElement)
-    const scrollableArea =
-      botonicScrollableContent && botonicScrollableContent.querySelector(area)
-    return scrollableArea
-  }
-  return {
-    full: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_CONTENT),
-    visible: getArea(WEBCHAT.SELECTORS.SIMPLEBAR_WRAPPER),
-  }
-}
-
-export const scrollToBottom = ({
-  timeout = 200,
-  behavior = 'smooth',
-  host,
-} = {}) => {
-  const webchatElement = getWebchatElement(host)
-  if (!webchatElement) return
-  const frame = getScrollableArea(webchatElement).visible
-  if (frame) {
-    setTimeout(
-      () => frame.scrollTo({ top: frame.scrollHeight, behavior: behavior }),
-      timeout
-    )
-  }
-}
+import { BotonicContainerId } from '../webchat/constants'
 
 export const getWebchatElement = host =>
-  host && host.querySelector(`#${WEBCHAT.DEFAULTS.ID}`)
+  host && host.querySelector(`#${BotonicContainerId.Webchat}`)
 
 // https://stackoverflow.com/questions/9457891/how-to-detect-if-domcontentloaded-was-fired
 export const onDOMLoaded = callback => {

package/src/webchat/actions.ts

@@ -14,7 +14,6 @@ export enum WebchatAction {
   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',

package/src/webchat/constants.ts

@@ -0,0 +1,9 @@
+// Convert to an enum when all the files using these values are migrated to ts{x}
+export const BotonicContainerId = {
+  Webchat: 'botonic-webchat',
+  Header: 'botonic-header',
+  ChatArea: 'botonic-chat-area',
+  ScrollableMessagesList: 'botonic-scrollable-messages-list',
+  RepliesContainer: 'botonic-replies-container',
+  InputPanel: 'botonic-input-panel',
+}

package/src/webchat/header.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { forwardRef, useContext } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, ROLES, WEBCHAT } from '../constants'
@@ -6,6 +6,7 @@ import { WebchatContext } from '../contexts'
 import { Scale } from '../shared/styles'
 import { resolveImage } from '../util/environment'
 import { ConditionalWrapper } from '../util/react'
+import { BotonicContainerId } from './constants'
 
 const Header = styled.div`
   display: flex;
@@ -14,9 +15,9 @@ const Header = styled.div`
     ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
     ${props => props.color} 100%
   );
-  height: 55px;
   border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
   z-index: 2;
+  height: inherit;
 `
 
 const ImageContainer = styled.div`
@@ -107,32 +108,42 @@ export const DefaultHeader = props => {
   )
 }
 
-export const WebchatHeader = props => {
+const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`
+
+export const WebchatHeader = forwardRef((props, ref) => {
   const { webchatState, getThemeProperty } = useContext(WebchatContext)
 
   const handleCloseWebchat = event => {
     props.onCloseClick(event.target.value)
   }
+
   const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader)
   if (CustomHeader) {
-    return <CustomHeader onCloseClick={handleCloseWebchat} />
+    return (
+      <div id={BotonicContainerId.Header} ref={ref}>
+        <CustomHeader onCloseClick={handleCloseWebchat} />
+      </div>
+    )
   }
+
   return (
-    <DefaultHeader
-      webchatState={webchatState}
-      getThemeProperty={getThemeProperty}
-      color={getThemeProperty(
-        WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-        COLORS.BOTONIC_BLUE
-      )}
-      onCloseClick={handleCloseWebchat}
-    />
+    <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+      <DefaultHeader
+        webchatState={webchatState}
+        getThemeProperty={getThemeProperty}
+        color={getThemeProperty(
+          WEBCHAT.CUSTOM_PROPERTIES.brandColor,
+          COLORS.BOTONIC_BLUE
+        )}
+        onCloseClick={handleCloseWebchat}
+      />
+    </StyledWebchatHeader>
   )
-}
+})
 
-export const StyledWebchatHeader = styled(WebchatHeader)`
-  border-radius: 8px 8px 0px 0px;
-  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
-  height: 36px;
-  flex: none;
-`
+WebchatHeader.displayName = 'WebchatHeader'

package/src/webchat/hooks/index.ts

@@ -1,5 +1,11 @@
 export { useComponentVisible } from './use-component-visible'
 export { useComponentWillMount } from './use-component-will-mount'
+export { useDeviceAdapter } from './use-device-adapter'
 export { usePrevious } from './use-previous'
+export { useScrollToBottom } from './use-scroll-to-bottom'
+export { useScrollbarController } from './use-scrollbar-controller'
 export { useTyping } from './use-typing'
+export { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'
 export { useWebchat, webchatInitialState } from './use-webchat'
+export { useWebchatDimensions } from './use-webchat-dimensions'
+export { useWebchatResizer } from './use-webchat-resizer'

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

@@ -0,0 +1,50 @@
+import { useEffect } from 'react'
+
+import { DEVICES } from '../devices'
+import { useScrollToBottom } from './use-scroll-to-bottom'
+import { useScrollbarController } from './use-scrollbar-controller'
+import { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'
+import { useWebchatResizer } from './use-webchat-resizer'
+
+function getCurrentDevice() {
+  // @ts-ignore
+  if (navigator.userAgentData) return navigator.userAgentData.platform
+  return navigator.platform
+}
+
+export const useDeviceAdapter = (host, isWebchatOpen) => {
+  const currentDevice = getCurrentDevice()
+
+  const { scrollToBottom } = useScrollToBottom({ host })
+
+  const { isVirtualKeyboardVisible } = useVirtualKeyboardDetection(
+    window.innerHeight
+  )
+
+  const { handleKeyboardShown, handleKeyboardHidden } = useWebchatResizer()
+
+  const { handleScrollEvents } = useScrollbarController(currentDevice, host)
+
+  useEffect(() => {
+    if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+    if (isVirtualKeyboardVisible) {
+      handleKeyboardShown()
+      scrollToBottom()
+    } else {
+      handleKeyboardHidden()
+    }
+
+    return
+  }, [isVirtualKeyboardVisible])
+
+  useEffect(() => {
+    if (host && isWebchatOpen) {
+      if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+      handleScrollEvents()
+    }
+  }, [host, isWebchatOpen, handleScrollEvents])
+
+  return {
+    currentDevice,
+  }
+}

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

@@ -0,0 +1,29 @@
+import { useContext } from 'react'
+
+import { WebchatContext } from '../../contexts'
+import { getWebchatElement } from '../../util/dom'
+
+export const useScrollToBottom = ({
+  host,
+  behavior = 'smooth',
+  timeout = 200,
+}) => {
+  const {
+    webchatState: { isWebchatOpen },
+    scrollableMessagesListRef,
+  } = useContext(WebchatContext)
+
+  const scrollToBottom = () => {
+    const webchatElement = getWebchatElement(host)
+    if (!webchatElement) return
+    if (!isWebchatOpen) return
+    setTimeout(() => {
+      scrollableMessagesListRef.current?.scrollTo({
+        top: scrollableMessagesListRef.current?.scrollHeight,
+        behavior: behavior as ScrollBehavior,
+      })
+    }, timeout)
+  }
+
+  return { scrollToBottom }
+}

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

@@ -0,0 +1,159 @@
+import { useContext, useEffect } from 'react'
+
+import { WebchatContext } from '../../contexts'
+import { DEVICES, isMobileDevice } from '../devices'
+
+// TODO: Investigate why when we have some messages, scroll actions are not disabled properly
+
+const debounced = (delay, fn) => {
+  let timerId
+  return function (...args) {
+    if (timerId) {
+      clearTimeout(timerId)
+    }
+    timerId = setTimeout(() => {
+      fn(...args)
+      timerId = null
+    }, delay)
+  }
+}
+
+const stopAtScrollLimit = element => {
+  if (element.scrollTop === 0) element.scrollTop = 1
+  if (element.scrollHeight - element.scrollTop === element.clientHeight)
+    element.scrollTop -= 1
+}
+
+export const useScrollbarController = (currentDevice, host) => {
+  const { webchatRef, chatAreaRef, repliesRef, scrollableMessagesListRef } =
+    useContext(WebchatContext)
+
+  const hasScrollbar = () => {
+    if (chatAreaRef.current && scrollableMessagesListRef.current) {
+      if (!repliesRef) {
+        return (
+          scrollableMessagesListRef.current?.scrollHeight >
+          chatAreaRef.current?.clientHeight
+        )
+      }
+      if (repliesRef.current) {
+        return (
+          scrollableMessagesListRef.current?.scrollHeight >
+          chatAreaRef.current?.clientHeight - repliesRef.current?.clientHeight
+        )
+      }
+    }
+
+    return false
+  }
+
+  const toggleOnMouseWheelEvents = () => {
+    if (scrollableMessagesListRef.current) {
+      if (hasScrollbar()) {
+        // @ts-ignore
+        scrollableMessagesListRef.current.onmousewheel = {}
+        return
+      }
+      // @ts-ignore
+      scrollableMessagesListRef.current.onmousewheel = e => {
+        e.preventDefault()
+      }
+    }
+  }
+
+  const handleOnMouseOverEvents = e => {
+    let target = e.currentTarget
+    while (target) {
+      toggleOnMouseWheelEvents()
+      target = target.parentNode
+    }
+  }
+
+  const toggleOnTouchMoveEvents = () => {
+    if (webchatRef.current && scrollableMessagesListRef.current) {
+      if (hasScrollbar()) {
+        scrollableMessagesListRef.current.style.touchAction = 'auto'
+        webchatRef.current.style.touchAction = 'auto'
+        webchatRef.current.ontouchmove = null
+        webchatRef.current.ontouchstart = null
+        return
+      }
+
+      scrollableMessagesListRef.current.style.touchAction = 'none'
+      webchatRef.current.style.touchAction = 'none'
+    }
+    if (webchatRef.current) {
+      webchatRef.current.ontouchstart = e => {
+        if (e.target === e.currentTarget) {
+          e.preventDefault()
+        }
+      }
+      webchatRef.current.ontouchmove = e => {
+        if (e.target === e.currentTarget) {
+          e.preventDefault()
+        }
+      }
+    }
+  }
+
+  const handleOnTouchMoveEvents = () => {
+    toggleOnTouchMoveEvents()
+  }
+
+  const limitScrollBoundaries = () => {
+    if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+    const chatArea = chatAreaRef.current
+    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)
+
+    if (chatArea) {
+      // @ts-ignore
+      if (window.addEventListener) {
+        chatArea.addEventListener(
+          'scroll',
+          () => dStopAtScrollLimit(chatArea),
+          true
+        )
+        // @ts-ignore
+      } else if (window.attachEvent) {
+        // @ts-ignore
+        chatAreaRef.attachEvent('scroll', () => dStopAtScrollLimit(chatArea))
+      }
+    }
+  }
+
+  const handleScrollEvents = () => {
+    if (webchatRef.current) {
+      if (isMobileDevice()) {
+        if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+
+        limitScrollBoundaries()
+
+        webchatRef.current.ontouchstart = handleOnTouchMoveEvents
+        webchatRef.current.ontouchmove = handleOnTouchMoveEvents
+      } else {
+        webchatRef.current.onmouseover = e => handleOnMouseOverEvents(e)
+      }
+    }
+  }
+
+  useEffect(() => {
+    const webchat = webchatRef.current
+
+    handleScrollEvents()
+
+    return () => {
+      if (webchat) {
+        webchat.onmouseover = null
+        webchat.ontouchstart = null
+        webchat.ontouchmove = null
+      }
+    }
+  }, [currentDevice, host])
+
+  return {
+    handleScrollEvents,
+    handleOnTouchMoveEvents,
+    handleOnMouseOverEvents,
+    hasScrollbar,
+  }
+}