@botonic/react 0.44.1 → 0.45.0-alpha.0

package/src/util/react.js

@@ -7,15 +7,20 @@ export const ConditionalWrapper = ({ condition, wrapper, children }) =>
   condition ? wrapper(children) : children
 
 export function renderComponent({ renderBrowser, renderNode }) {
-  if (isBrowser()) return renderBrowser()
-  else if (isNode()) return renderNode()
+  if (isBrowser()) {
+    return renderBrowser()
+  } else if (isNode()) {
+    return renderNode()
+  }
   throw new Error('Unexpected process type. Not recognized as browser nor node')
 }
 
 export const mapObjectNonBooleanValues = obj => {
   // to avoid React SSR warnings: https://github.com/styled-components/styled-components/issues/1198#issue-262022540
   return mapObject(obj, ([key, value]) => {
-    if (typeof value === 'boolean') return [key, Number(value)]
+    if (typeof value === 'boolean') {
+      return [key, Number(value)]
+    }
     return [key, value]
   })
 }

package/src/util/regexs.js

@@ -1,6 +1,6 @@
 export const deserializeRegex = regexStr => {
   /* eslint-disable no-useless-escape */
-  const fragments = regexStr.match(/\/(.[^\/]+)\/([a-z]{1})?$/i) // https://stackoverflow.com/a/33642463, https://github.com/hubtype/botonic/pull/805#discussion_r437309074
+  const fragments = regexStr.match(/\/(.[^/]+)\/([a-z]{1})?$/i) // https://stackoverflow.com/a/33642463, https://github.com/hubtype/botonic/pull/805#discussion_r437309074
   const deserialized = new RegExp(fragments[1], fragments[2] || '')
   return deserialized
 }
@@ -10,7 +10,9 @@ export const deserializeRegex = regexStr => {
  */
 export const stringifyWithRegexs = object => {
   return JSON.stringify(object, (_, value) => {
-    if (value instanceof RegExp) return value.toString()
+    if (value instanceof RegExp) {
+      return value.toString()
+    }
     return value
   })
 }

package/src/util/webchat.ts

@@ -3,8 +3,8 @@ import UAParser from 'ua-parser-js'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../constants'
-import { ClientUser } from '../webchat/context/types'
-import { WebchatTheme } from '../webchat/theme/types'
+import type { ClientUser } from '../webchat/context/types'
+import type { WebchatTheme } from '../webchat/theme/types'
 import { getCountryFromTimeZone, normalizeLocale } from './i18n'
 import { getProperty } from './objects'
 
@@ -18,9 +18,13 @@ export const _getThemeProperty =
     for (const [key, value] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
       if (value === property) {
         const nestedProperty = getProperty(theme, value)
-        if (nestedProperty !== undefined) return nestedProperty
+        if (nestedProperty !== undefined) {
+          return nestedProperty
+        }
         const plainProperty = getProperty(theme, key)
-        if (plainProperty !== undefined) return plainProperty
+        if (plainProperty !== undefined) {
+          return plainProperty
+        }
         return defaultValue
       }
     }
@@ -34,7 +38,9 @@ export const createUser = (): {
   const parser = new UAParser()
   const ua = parser.getResult()
   let name = `${ua.os.name} ${ua.browser.name}`
-  if (ua.device && ua.device.type) name = `${ua.device.type} ${name}`
+  if (ua.device?.type) {
+    name = `${ua.device.type} ${name}`
+  }
   return {
     id: uuidv7(),
     name,
@@ -43,10 +49,13 @@ export const createUser = (): {
 export const initSession = (
   session: any
 ): { user: { id: string; name: string } } => {
-  if (!session) session = {}
+  if (!session) {
+    session = {}
+  }
   const hasUserId = session?.user?.id !== undefined
-  if (!session.user || Object.keys(session.user).length === 0 || !hasUserId)
+  if (!session.user || Object.keys(session.user).length === 0 || !hasUserId) {
     session.user = !hasUserId ? merge(session.user, createUser()) : createUser()
+  }
   return session
 }
 
@@ -90,11 +99,13 @@ function getSystemLocale(user: Partial<ClientUser>) {
 export const shouldKeepSessionOnReload = ({
   initialDevSettings,
   devSettings,
-}) => !initialDevSettings || (devSettings && devSettings.keepSessionOnReload)
+}) => !initialDevSettings || devSettings?.keepSessionOnReload
 
 //TODO: Review param serverConfig if is of type ServerConfig this never have errorMessage
 export const getServerErrorMessage = serverConfig => {
-  if (!serverConfig || !serverConfig.errorMessage) return 'Connection issues'
+  if (!serverConfig || !serverConfig.errorMessage) {
+    return 'Connection issues'
+  }
   if (typeof serverConfig.errorMessage === 'function') {
     return serverConfig.errorMessage()
   }

package/src/webchat/chat-area/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import { BotonicContainerId } from '../constants'
 import { WebchatContext } from '../context'

package/src/webchat/components/common.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components'
 
 import { resolveImage } from '../../util/environment'

package/src/webchat/components/conditional-animation.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { Scale } from '../../shared/styles'

package/src/webchat/components/opened-persistent-menu.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import styled from 'styled-components'
 
 import { Button } from '../../components/button/index'
@@ -24,7 +24,9 @@ export const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
   try {
     closeLabel = options.filter(opt => opt.closeLabel !== undefined)[0]
       .closeLabel
-  } catch (e) {}
+  } catch {
+    // do nothing
+  }
   return (
     <div ref={ref} role={ROLES.PERSISTENT_MENU}>
       {isComponentVisible && CustomPersistentMenu ? (

package/src/webchat/context/index.tsx

@@ -1,8 +1,8 @@
 import { createContext } from 'react'
 
-import { ChunkIdsGroupedBySourceData } from '../../components/system-debug-trace/events/knowledge-bases-types'
-import { MinimalHubtypeMessage } from '../../index-types'
-import { WebchatContextProps, WebchatState } from './types'
+import type { ChunkIdsGroupedBySourceData } from '../../components/system-debug-trace/events/knowledge-bases-types'
+import type { MinimalHubtypeMessage } from '../../index-types'
+import type { WebchatContextProps, WebchatState } from './types'
 
 export { ClientSession, WebchatState } from './types'
 export { useWebchat } from './use-webchat'

package/src/webchat/context/messages-reducer.ts

@@ -1,6 +1,6 @@
 import { SENDERS } from '../../index-types'
 import { WebchatAction } from './actions'
-import { WebchatState } from './types'
+import type { WebchatState } from './types'
 
 export const messagesReducer = (
   state: WebchatState,
@@ -138,11 +138,9 @@ function addMessageReducer(
   state: WebchatState,
   action: { type: WebchatAction; payload?: any }
 ) {
-  if (
-    state.messagesJSON &&
-    state.messagesJSON.find(m => m.id === action.payload.id)
-  )
+  if (state.messagesJSON?.find(m => m.id === action.payload.id)) {
     return state
+  }
   return {
     ...state,
     messagesJSON: [...(state.messagesJSON || []), action.payload],

package/src/webchat/context/types.ts

@@ -1,13 +1,13 @@
-import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
+import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 
-import { Reply, WebchatSettingsProps, Webview } from '../../components'
-import { CloseWebviewOptions } from '../../contexts'
-import {
+import type { Reply, WebchatSettingsProps, Webview } from '../../components'
+import type { CloseWebviewOptions } from '../../contexts'
+import type {
   PreviewUtils,
   TrackEventFunction,
   WebchatMessage,
 } from '../../index-types'
-import { WebchatTheme } from '../theme/types'
+import type { WebchatTheme } from '../theme/types'
 
 export interface ErrorMessage {
   message?: string

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

@@ -1,13 +1,18 @@
-import { Session } from '@botonic/core'
+import type { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
-import { Reply } from '../../components'
-import { Webview } from '../../components/index-types'
-import { WebchatMessage } from '../../index-types'
+import type { Reply } from '../../components'
+import type { Webview } from '../../components/index-types'
+import type { WebchatMessage } from '../../index-types'
 import { defaultTheme } from '../theme/default-theme'
-import { WebchatTheme } from '../theme/types'
+import type { WebchatTheme } from '../theme/types'
 import { WebchatAction } from './actions'
-import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
+import type {
+  ClientInput,
+  DevSettings,
+  ErrorMessage,
+  WebchatState,
+} from './types'
 import { webchatReducer } from './webchat-reducer'
 
 function getWebchatInitialState(initialTheme: WebchatTheme): WebchatState {

package/src/webchat/context/webchat-reducer.ts

@@ -1,6 +1,6 @@
 import { WebchatAction } from './actions'
 import { messagesReducer } from './messages-reducer'
-import { WebchatState } from './types'
+import type { WebchatState } from './types'
 
 // eslint-disable-next-line complexity
 export function webchatReducer(

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../context'

package/src/webchat/custom-messages/rating/icons/face-angry.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
+import type { RatingIconProps } from '../types'
 
 export const FaceAngrySvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/icons/face-frown.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
+import type { RatingIconProps } from '../types'
 
 export const FaceFrownSvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/icons/face-grin-beam.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
+import type { RatingIconProps } from '../types'
 
 export const FaceGrinBeamSvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/icons/face-meh.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: we don't need a title for the svg */
+import type { RatingIconProps } from '../types'
 
 export const FaceMehSvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/icons/face-smile.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
+import type { RatingIconProps } from '../types'
 
 export const FaceSmileSvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/icons/star.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
-import { RatingIconProps } from '../types'
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: This is a SVG icon */
+import type { RatingIconProps } from '../types'
 
 export const StarSvg = ({ color, selected }: RatingIconProps) => {
   return selected ? (

package/src/webchat/custom-messages/rating/index.tsx

@@ -1,12 +1,13 @@
-import { INPUT, InputType } from '@botonic/core'
-import React, { useContext, useState } from 'react'
+import { INPUT, type InputType } from '@botonic/core'
+import type React from 'react'
+import { useContext, useState } from 'react'
 import { ThemeContext } from 'styled-components'
 
 import { Button, customMessage } from '../../../components'
 import { WebchatContext } from '../../context'
 import { RatingSelector } from './rating-selector'
 import { MessageBubble } from './styles'
-import { RatingType } from './types'
+import type { RatingType } from './types'
 
 interface CustomRatingMessageProps {
   payloads: string[]
@@ -32,7 +33,9 @@ const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
   }
 
   const handleButtonSend = () => {
-    if (ratingValue === -1) return
+    if (ratingValue === -1) {
+      return
+    }
 
     const json = {
       valueSent: ratingValue,

package/src/webchat/custom-messages/rating/rating-selector.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react'
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the rating selector */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the rating selector */
+import { useState } from 'react'
 
 import { Smileys } from './smileys'
 import { Stars } from './stars'
@@ -26,7 +28,9 @@ export const RatingSelector = ({
   const [hover, setHover] = useState<number>(valueSent ? valueSent : -1)
 
   const onHover = (ratingNumber: number) => {
-    if (!valueSent) setHover(ratingNumber)
+    if (!valueSent) {
+      setHover(ratingNumber)
+    }
   }
 
   return (
@@ -36,7 +40,7 @@ export const RatingSelector = ({
 
         return (
           <div
-            key={i}
+            key={ratingNumber}
             onMouseEnter={() => onHover(ratingNumber)}
             onMouseLeave={() => onHover(ratingValue)}
             onClick={() => onRatingChange(ratingNumber)}

package/src/webchat/custom-messages/rating/smileys.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   FaceAngrySvg,
   FaceFrownSvg,
@@ -7,7 +5,7 @@ import {
   FaceMehSvg,
   FaceSmileSvg,
 } from './icons'
-import { RatingItemProps } from './types'
+import type { RatingItemProps } from './types'
 
 const SMILEY_MAP = {
   1: FaceAngrySvg,

package/src/webchat/custom-messages/rating/stars.tsx

@@ -1,7 +1,5 @@
-import React from 'react'
-
 import { StarSvg } from './icons/index'
-import { RatingItemProps } from './types'
+import type { RatingItemProps } from './types'
 
 export const Stars = ({ color, ratingNumber, hover }: RatingItemProps) => {
   const isSelected = hover >= ratingNumber

package/src/webchat/header/default-header.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { ROLES, WEBCHAT } from '../../constants'
 import { Scale } from '../../shared/styles'
@@ -46,7 +46,7 @@ export const DefaultHeader = () => {
     >
       {headerImage && (
         <ImageContainer>
-          <img src={resolveImage(headerImage)} />
+          <img src={resolveImage(headerImage)} alt='Header' />
         </ImageContainer>
       )}
       <TextContainer>

package/src/webchat/header/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, useContext } from 'react'
+import { type ForwardedRef, forwardRef, useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
 import { WebchatContext } from '../../webchat/context'

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

@@ -6,9 +6,18 @@ import { useScrollbarController } from './use-scrollbar-controller'
 import { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'
 import { useWebchatResizer } from './use-webchat-resizer'
 
+// To avoid type error using experimental new API supported by some browsers like Chrome but not in Safari
+interface NavigatorWithUserAgentData extends Navigator {
+  userAgentData?: {
+    platform: string
+  }
+}
+
 function getCurrentDevice() {
-  // @ts-ignore
-  if (navigator.userAgentData) return navigator.userAgentData.platform
+  const nav = navigator as NavigatorWithUserAgentData
+  if (nav.userAgentData) {
+    return nav.userAgentData.platform
+  }
   return navigator.platform
 }
 
@@ -26,7 +35,9 @@ export const useDeviceAdapter = (host, isWebchatOpen) => {
   const { handleScrollEvents } = useScrollbarController(currentDevice, host)
 
   useEffect(() => {
-    if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+    if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+      return
+    }
     if (isVirtualKeyboardVisible) {
       handleKeyboardShown()
       scrollToBottom()
@@ -39,7 +50,9 @@ export const useDeviceAdapter = (host, isWebchatOpen) => {
 
   useEffect(() => {
     if (host && isWebchatOpen) {
-      if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+      if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+        return
+      }
       handleScrollEvents()
     }
   }, [host, isWebchatOpen, handleScrollEvents])

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

@@ -16,9 +16,13 @@ export const useScrollToBottom = ({
 }: UseScrollToBottom) => {
   const scrollToBottom = () => {
     const webchatElement = getWebchatElement(host)
-    if (!webchatElement) return
+    if (!webchatElement) {
+      return
+    }
     const scrollableMessagesListElement = getScrollableMessagesListElement(host)
-    if (!scrollableMessagesListElement) return
+    if (!scrollableMessagesListElement) {
+      return
+    }
 
     setTimeout(() => {
       scrollableMessagesListElement.scrollTo({

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

@@ -6,8 +6,8 @@ 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) {
+  let timerId: NodeJS.Timeout | null = null
+  return (...args) => {
     if (timerId) {
       clearTimeout(timerId)
     }
@@ -19,9 +19,12 @@ const debounced = (delay, fn) => {
 }
 
 const stopAtScrollLimit = element => {
-  if (element.scrollTop === 0) element.scrollTop = 1
-  if (element.scrollHeight - element.scrollTop === element.clientHeight)
+  if (element.scrollTop === 0) {
+    element.scrollTop = 1
+  }
+  if (element.scrollHeight - element.scrollTop === element.clientHeight) {
     element.scrollTop -= 1
+  }
 }
 
 export const useScrollbarController = (currentDevice, host) => {
@@ -54,11 +57,11 @@ export const useScrollbarController = (currentDevice, host) => {
   const toggleOnMouseWheelEvents = () => {
     if (scrollableMessagesListRef.current) {
       if (hasScrollbar()) {
-        // @ts-ignore
+        // @ts-expect-error
         scrollableMessagesListRef.current.onmousewheel = {}
         return
       }
-      // @ts-ignore
+      // @ts-expect-error
       scrollableMessagesListRef.current.onmousewheel = e => {
         e.preventDefault()
       }
@@ -105,21 +108,23 @@ export const useScrollbarController = (currentDevice, host) => {
   }
 
   const limitScrollBoundaries = () => {
-    if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+    if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+      return
+    }
     const chatArea = chatAreaRef.current
     const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)
 
     if (chatArea) {
-      // @ts-ignore
+      // @ts-expect-error
       if (window.addEventListener) {
         chatArea.addEventListener(
           'scroll',
           () => dStopAtScrollLimit(chatArea),
           true
         )
-        // @ts-ignore
+        // @ts-expect-error
       } else if (window.attachEvent) {
-        // @ts-ignore
+        // @ts-expect-error
         chatAreaRef.attachEvent('scroll', () => dStopAtScrollLimit(chatArea))
       }
     }
@@ -128,7 +133,9 @@ export const useScrollbarController = (currentDevice, host) => {
   const handleScrollEvents = () => {
     if (webchatContainerRef.current) {
       if (isMobileDevice()) {
-        if (currentDevice !== DEVICES.MOBILE.IPHONE) return
+        if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+          return
+        }
 
         limitScrollBoundaries()
 

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

@@ -1,7 +1,8 @@
+/* eslint-disable no-empty */
 import { useEffect } from 'react'
 
-import { WebchatMessage } from '../../index-types'
-import { WebchatState } from '../context'
+import type { WebchatMessage } from '../../index-types'
+import type { WebchatState } from '../context'
 
 interface UseTyping {
   webchatState: WebchatState
@@ -16,7 +17,8 @@ export function useTyping({
   updateMessage,
 }: UseTyping): void {
   useEffect(() => {
-    let delayTimeout, typingTimeout
+    let delayTimeout: NodeJS.Timeout | null = null
+    let typingTimeout: NodeJS.Timeout | null = null
     try {
       const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]
       if (nextMsg) {
@@ -25,18 +27,22 @@ export function useTyping({
             () => updateTyping(true),
             nextMsg.delay * 1000
           )
-        } else if (nextMsg.typing) updateTyping(true)
+        } else if (nextMsg.typing) {
+          updateTyping(true)
+        }
         const totalDelay = nextMsg.delay + nextMsg.typing
-        if (totalDelay)
+        if (totalDelay) {
           typingTimeout = setTimeout(() => {
             updateMessage({ ...nextMsg, display: true })
             updateTyping(false)
           }, totalDelay * 1000)
+        }
       }
-    } catch (e) {}
+      // biome-ignore lint/suspicious/noEmptyBlockStatements: error is not used
+    } catch (_e) {}
     return () => {
-      clearTimeout(delayTimeout)
-      clearTimeout(typingTimeout)
+      delayTimeout && clearTimeout(delayTimeout)
+      typingTimeout && clearTimeout(typingTimeout)
     }
   }, [webchatState.messagesJSON, webchatState.typing])
 }

package/src/webchat/hooks/use-virtual-keyboard-detection.ts

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 
-export const useVirtualKeyboardDetection = originalHeight => {
+export const useVirtualKeyboardDetection = (originalHeight: number) => {
   const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] =
     useState(false)
+
   useEffect(() => {
     const handleResize = () => {
       if (window.visualViewport) {
@@ -14,12 +15,10 @@ export const useVirtualKeyboardDetection = originalHeight => {
         return
       }
     }
-    window.visualViewport &&
-      window.visualViewport.addEventListener('resize', handleResize)
+    window.visualViewport?.addEventListener('resize', handleResize)
 
     return () => {
-      window.visualViewport &&
-        window.visualViewport.removeEventListener('resize', handleResize)
+      window.visualViewport?.removeEventListener('resize', handleResize)
     }
   }, [originalHeight])