@botonic/react 0.44.1 → 0.45.0-alpha.0

package/src/components/video.tsx

@@ -1,10 +1,9 @@
 import { INPUT, isBrowser } from '@botonic/core'
-import React from 'react'
 import styled from 'styled-components'
 
 import { COLORS, ROLES } from '../constants'
 import { staticAsset } from '../util/environment'
-import { VideoProps } from './index-types'
+import type { VideoProps } from './index-types'
 import { Message } from './message'
 
 const StyledVideo = styled.video`
@@ -22,12 +21,13 @@ const serialize = (videoProps: { src: string }) => {
 export const Video = (props: VideoProps) => {
   props = { ...props, src: staticAsset(props.src) }
   let content = props.children
-  if (isBrowser())
+  if (isBrowser()) {
     content = (
       <StyledVideo controls>
         <source src={props.src} />
       </StyledVideo>
     )
+  }
   return (
     <Message
       role={ROLES.VIDEO_MESSAGE}

package/src/components/webchat-settings.tsx

@@ -1,14 +1,61 @@
 import { INPUT } from '@botonic/core'
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
 import { WebchatContext } from '../webchat/context'
-import {
+import type {
   PersistentMenuOptionsTheme,
   WebchatTheme,
 } from '../webchat/theme/types'
-import { BlockInputOption } from './index-types'
+import type { BlockInputOption } from './index-types'
+
+export const normalizeWebchatSettings = (settings: WebchatSettingsProps) => {
+  let {
+    theme,
+    blockInputs,
+    persistentMenu,
+    enableEmojiPicker,
+    enableAttachments,
+    enableUserInput,
+    enableAnimations,
+  } = settings
+  if (!theme) {
+    theme = {}
+  }
+  if (!theme.userInput) {
+    theme.userInput = {}
+  }
+  if (persistentMenu !== undefined) {
+    theme.userInput.persistentMenu = persistentMenu
+  }
+  if (enableEmojiPicker !== undefined) {
+    if (!theme.userInput.emojiPicker) {
+      theme.userInput.emojiPicker = {}
+    }
+    theme.userInput.emojiPicker.enable = enableEmojiPicker
+  }
+  if (enableAttachments !== undefined) {
+    if (!theme.userInput.attachments) {
+      theme.userInput.attachments = {}
+    }
+    theme.userInput.attachments.enable = enableAttachments
+  }
+  if (enableUserInput !== undefined) {
+    theme.userInput.enable = enableUserInput
+  }
+  if (blockInputs !== undefined) {
+    theme.userInput.blockInputs = blockInputs
+  }
+
+  if (!theme.animations) {
+    theme.animations = {}
+  }
+  if (enableAnimations !== undefined) {
+    theme.animations.enable = enableAnimations
+  }
+  return theme
+}
 
 export interface WebchatSettingsProps {
   blockInputs?: BlockInputOption[]
@@ -37,7 +84,6 @@ export const WebchatSettings = ({
   user,
 }: WebchatSettingsProps) => {
   const renderBrowser = () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { updateWebchatDevSettings } = useContext(WebchatContext)
     updateWebchatDevSettings({
       theme,
@@ -61,7 +107,7 @@ export const WebchatSettings = ({
       enableAnimations,
     })
     return (
-      //@ts-ignore
+      //@ts-expect-error
       <message
         type={INPUT.WEBCHAT_SETTINGS}
         settings={stringifyWithRegexs({ theme: updatedTheme, user })}
@@ -70,38 +116,3 @@ export const WebchatSettings = ({
   }
   return renderComponent({ renderBrowser, renderNode })
 }
-
-export const normalizeWebchatSettings = (settings: WebchatSettingsProps) => {
-  let {
-    theme,
-    blockInputs,
-    persistentMenu,
-    enableEmojiPicker,
-    enableAttachments,
-    enableUserInput,
-    enableAnimations,
-  } = settings
-  if (!theme) theme = {}
-  if (!theme.userInput) theme.userInput = {}
-  if (persistentMenu !== undefined) {
-    theme.userInput.persistentMenu = persistentMenu
-  }
-  if (enableEmojiPicker !== undefined) {
-    if (!theme.userInput.emojiPicker) theme.userInput.emojiPicker = {}
-    theme.userInput.emojiPicker.enable = enableEmojiPicker
-  }
-  if (enableAttachments !== undefined) {
-    if (!theme.userInput.attachments) theme.userInput.attachments = {}
-    theme.userInput.attachments.enable = enableAttachments
-  }
-  if (enableUserInput !== undefined) {
-    theme.userInput.enable = enableUserInput
-  }
-  if (blockInputs !== undefined) theme.userInput.blockInputs = blockInputs
-
-  if (!theme.animations) theme.animations = {}
-  if (enableAnimations !== undefined) {
-    theme.animations.enable = enableAnimations
-  }
-  return theme
-}

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

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { truncateText } from '../util'
 import { renderComponent } from '../util/react'
@@ -82,7 +81,7 @@ export const WhatsappButtonList = (props: WhatsappButtonListProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         body={convertToMarkdownMeta(props.body)}

package/src/components/whatsapp-catalog.tsx

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { renderComponent } from '../util/react'
 import { Message } from './message'
@@ -27,7 +26,7 @@ export const WhatsappCatalog = (props: WhatsappCatalogProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         body={props.body}

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

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { truncateText } from '../util'
 import { renderComponent } from '../util/react'
@@ -127,7 +126,7 @@ export const WhatsappCTAUrlButton = (props: WhatsappCTAUrlButtonProps) => {
           : props.url,
     }
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message {...validatedProps} type={INPUT.WHATSAPP_CTA_URL_BUTTON} />
     )
   }

package/src/components/whatsapp-interactive-media-carousel.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { truncateText } from '../util'
 import { Button } from './button'
 import { Carousel } from './carousel'
@@ -55,7 +53,7 @@ export const WhatsappInteractiveMediaCarousel = (
   return (
     <Carousel text={truncateText(props.textMessage, WHATSAPP_MAX_BODY_CHARS)}>
       {props.cards.map((card, index) => (
-        <Element key={index}>
+        <Element key={`card-${index}-${card.text}`}>
           <Pic src={card.imageLink} />
           <Title>
             {truncateText(card.text, WHATSAPP_MAX_CAROUSEL_CARD_TEXT_CHARS)}
@@ -67,7 +65,10 @@ export const WhatsappInteractiveMediaCarousel = (
           )}
           {card.type === CardType.QUICK_REPLY &&
             card.action.buttons.map((button, index) => (
-              <Button key={index} payload={button.payload}>
+              <Button
+                key={`quick-reply-button-${index}-${button.text}`}
+                payload={button.payload}
+              >
                 {truncateText(button.text, WHATSAPP_MAX_BUTTON_CHARS)}
               </Button>
             ))}

package/src/components/whatsapp-media-carousel.tsx

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { toSnakeCaseKeys } from '../util/functional'
 import { renderComponent } from '../util/react'
@@ -91,7 +90,7 @@ export const WhatsappMediaCarousel = (props: WhatsappMediaCarouselProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}

package/src/components/whatsapp-product-carousel.tsx

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { toSnakeCaseKeys } from '../util/functional'
 import { renderComponent } from '../util/react'
@@ -67,7 +66,7 @@ export const WhatsappProductCarousel = (
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         bodyParameters={JSON.stringify(toSnakeCaseKeys(props.bodyParameters))}

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

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { toSnakeCaseKeys } from '../util/functional'
 import { renderComponent } from '../util/react'
@@ -39,7 +38,7 @@ export const WhatsappProductList = (props: WhatsappProductListProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         body={props.body}

package/src/components/whatsapp-product.tsx

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { renderComponent } from '../util/react'
 import { Message } from './message'
@@ -28,7 +27,7 @@ export const WhatsappProduct = (props: WhatsappProductProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         body={props.body}

package/src/components/whatsapp-template/index.tsx

@@ -1,5 +1,4 @@
 import { INPUT } from '@botonic/core'
-import React from 'react'
 
 import { renderComponent } from '../../util/react'
 import { Message } from '../message'
@@ -31,7 +30,7 @@ export const WhatsappTemplate = (props: WhatsappTemplateProps) => {
 
   const renderNode = () => {
     return (
-      // @ts-ignore Property 'message' does not exist on type 'JSX.IntrinsicElements'.
+      // @ts-expect-error Property 'message' does not exist on type 'JSX.IntrinsicElements'.
       <message
         {...props}
         name={props.name}

package/src/contexts.tsx

@@ -1,7 +1,7 @@
-import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
+import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { ActionRequest } from './index-types'
+import type { ActionRequest } from './index-types'
 
 export const RequestContext = createContext<ActionRequest>({
   getUserCountry: () => '',

package/src/dev-app.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { SENDERS } from './index-types'
@@ -106,11 +105,10 @@ export class DevApp extends WebchatApp {
   }
 
   async onUserInput({ input, session, lastRoutePath }) {
-    this.onMessage &&
-      this.onMessage(this, {
-        sentBy: 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 =>

package/src/index-types.ts

@@ -1,31 +1,31 @@
-import {
+import type {
   BotContext,
   BotRequest as CoreBotRequest,
   Input as CoreInput,
   InputType as CoreInputType,
   Route as CoreRoute,
   Routes as CoreRoutes,
-  ServerConfig,
   Session as CoreSession,
   SessionUser as CoreSessionUser,
+  ServerConfig,
 } from '@botonic/core'
-import React from 'react'
+import type React from 'react'
 
-import {
+import type {
   BlockInputOption,
   ButtonProps,
   ReplyProps,
   WebchatSettingsProps,
 } from './components'
 import { ChunkIdsGroupedBySourceData } from './components/system-debug-trace/events/knowledge-bases-types'
-import { CloseWebviewOptions } from './contexts'
-import { UseWebchat } from './webchat/context/use-webchat'
+import type { CloseWebviewOptions } from './contexts'
+import type { UseWebchat } from './webchat/context/use-webchat'
 import {
-  CoverComponentOptions,
-  PersistentMenuOptionsTheme,
+  type CoverComponentOptions,
+  type PersistentMenuOptionsTheme,
   WebchatTheme,
 } from './webchat/theme/types'
-import { WebchatApp } from './webchat-app'
+import type { WebchatApp } from './webchat-app'
 
 /**
  * See @botonic/core's Response for the description of the Response's semantics*/

package/src/message-utils.js

@@ -40,7 +40,9 @@ export const readDataURL = file =>
 
 export const isAllowedSize = fileSize => {
   const maxAllowedBytesSize = MAX_ALLOWED_SIZE_MB * 1024 * 1024
-  if (fileSize > maxAllowedBytesSize) return false
+  if (fileSize > maxAllowedBytesSize) {
+    return false
+  }
   return true
 }
 

package/src/msg-to-botonic.jsx

@@ -1,6 +1,3 @@
-/* eslint-disable complexity */
-import React from 'react'
-
 import { Audio } from './components/audio'
 import { Button } from './components/button/index'
 import { ButtonsDisabler } from './components/buttons-disabler'
@@ -35,6 +32,7 @@ import {
  * @param customMessageTypes {{customTypeName}[]?}
  * @return {React.ReactNode}
  */
+// eslint-disable-next-line complexity
 export function msgToBotonic(msg, customMessageTypes = []) {
   delete msg.display
   if (isCustom(msg)) {
@@ -90,12 +88,10 @@ export function msgToBotonic(msg, customMessageTypes = []) {
   } else if (isButtonMessage(msg)) {
     const buttons = buttonsParse(msg.buttons)
     return (
-      <>
-        <Text {...msg} key={msg.key}>
-          {msg.text}
-          {buttons}
-        </Text>
-      </>
+      <Text {...msg} key={msg.key}>
+        {msg.text}
+        {buttons}
+      </Text>
     )
   } else if (isSystemDebugTrace(msg)) {
     return <SystemDebugTrace {...msg} key={msg.key} />
@@ -127,23 +123,22 @@ export function msgsToBotonic(msgs, customMessageTypes) {
 
 function textToBotonic(msg) {
   const txt = msg.data?.text ?? String(msg.data)
-  if (
-    (msg.replies && msg.replies.length) ||
-    (msg.keyboard && msg.keyboard.length)
-  )
+  if (msg.replies?.length || msg.keyboard?.length) {
     return (
       <Text {...msg} key={msg.key}>
         {txt}
         {parseQuickReplies(msg)}
       </Text>
     )
-  if (msg.buttons && msg.buttons.length)
+  }
+  if (msg.buttons?.length) {
     return (
       <Text {...msg} key={msg.key}>
         {txt}
         {buttonsParse(msg.buttons)}
       </Text>
     )
+  }
   return (
     <Text {...msg} key={msg.key}>
       {txt}
@@ -153,7 +148,7 @@ function textToBotonic(msg) {
 
 function elementsParse(elements) {
   return elements.map((e, i) => (
-    <Element key={i}>
+    <Element key={`element-${i}`}>
       <Pic src={e.img || e.pic || e.image_url} />
       <Title>{e.title}</Title>
       <Subtitle>{e.subtitle}</Subtitle>
@@ -166,7 +161,9 @@ function buttonsParse(buttons) {
   return buttons.map((b, i) => {
     const props = b.props || b
     let payload = props.payload
-    if (props.path) payload = `__PATH_PAYLOAD__${props.path}`
+    if (props.path) {
+      payload = `__PATH_PAYLOAD__${props.path}`
+    }
     const url = props.messenger_extensions ? null : props.url
     const target = props.messenger_extensions ? null : props.target
     const title = props.title
@@ -174,7 +171,7 @@ function buttonsParse(buttons) {
     const disabledProps = ButtonsDisabler.constructBrowserProps(props)
     return (
       <Button
-        key={i}
+        key={`button-${i}`}
         payload={payload}
         url={url}
         target={target}
@@ -192,9 +189,11 @@ function parseQuickReplies(msg) {
   if (msg.replies) {
     replies = msg.replies.map((el, i) => {
       let payload = el.payload
-      if (el.path) payload = `__PATH_PAYLOAD__${el.path}`
+      if (el.path) {
+        payload = `__PATH_PAYLOAD__${el.path}`
+      }
       return (
-        <Reply key={i} payload={payload}>
+        <Reply key={`reply-${i}`} payload={payload}>
           {el.text}
         </Reply>
       )
@@ -202,7 +201,7 @@ function parseQuickReplies(msg) {
   }
   if (msg.keyboard) {
     replies = msg.keyboard.map((el, i) => (
-      <Reply key={i} payload={el.data}>
+      <Reply key={`reply-${i}`} payload={el.data}>
         {el.label}
       </Reply>
     ))

package/src/react-bot.tsx

@@ -1,9 +1,9 @@
 import { CoreBot } from '@botonic/core'
-import React from 'react'
+import type React from 'react'
 
 import { Text } from './components/text'
 import { RequestContext } from './contexts'
-import { ActionRequest } from './index-types'
+import type { ActionRequest } from './index-types'
 
 type ActionComponentType<P = any> = React.ComponentType<P> & {
   botonicInit?: (request: ActionRequest) => Promise<P>

package/src/util/dom.js

@@ -1,10 +1,10 @@
 import { BotonicContainerId } from '../webchat/constants'
 
 export const getWebchatElement = host =>
-  host && host.querySelector(`#${BotonicContainerId.Webchat}`)
+  host?.querySelector(`#${BotonicContainerId.Webchat}`)
 
 export const getScrollableMessagesListElement = host =>
-  host && host.querySelector(`#${BotonicContainerId.ScrollableMessagesList}`)
+  host?.querySelector(`#${BotonicContainerId.ScrollableMessagesList}`)
 
 // https://stackoverflow.com/questions/9457891/how-to-detect-if-domcontentloaded-was-fired
 export const onDOMLoaded = callback => {
@@ -21,7 +21,7 @@ export const onDOMLoaded = callback => {
 export const isShadowDOMSupported = () => {
   try {
     return document.head.createShadowRoot || document.head.attachShadow
-  } catch (e) {
+  } catch (_e) {
     return false
   }
 }

package/src/util/environment.js

@@ -3,26 +3,30 @@ export const isProd = process.env.NODE_ENV === 'production'
 
 export const staticAsset = path => {
   try {
-    if (isURL(path)) return path // Webpack 5 >= fully resolves absolute path to assets
+    if (isURL(path)) {
+      return path // Webpack 5 or Rspack >= fully resolves absolute path to assets
+    }
     const scriptBaseURL = document
       .querySelector('script[src*="webchat.botonic.js"]')
       .getAttribute('src')
     const scriptName = scriptBaseURL.split('/').pop()
-    const basePath = scriptBaseURL.replace('/' + scriptName, '/')
+    const basePath = scriptBaseURL.replace(`/${scriptName}`, '/')
     const resolvedStaticAssetPath = basePath + path
     return resolvedStaticAssetPath
-  } catch (e) {
+  } catch (_e) {
     console.error(`Could not resolve path: '${path}'`)
     return normalize(path)
   }
 }
 
 export const resolveImage = src => {
-  if (isURL(src)) return src
+  if (isURL(src)) {
+    return src
+  }
   return staticAsset(src)
 }
 
-export const isURL = urlPath => {
+export function isURL(urlPath) {
   // @stephenhay (38 chars) from: https://mathiasbynens.be/demo/url-regex
   const pattern = new RegExp(/^(blob:)?(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/)
   return !!pattern.test(urlPath)
@@ -33,8 +37,12 @@ export function normalize(path) {
   const trailingSlash = path && path[path.length - 1] === '/'
   // Normalize the path
   path = normalizeArray(path.split('/'), !isAbsolute).join('/')
-  if (!path && !isAbsolute) path = '.'
-  if (path && trailingSlash) path += '/'
+  if (!path && !isAbsolute) {
+    path = '.'
+  }
+  if (path && trailingSlash) {
+    path += '/'
+  }
   return (isAbsolute ? '/' : '') + path
 }
 
@@ -42,7 +50,9 @@ function normalizeArray(parts, allowAboveRoot) {
   const res = []
   for (let i = 0; i < parts.length; i++) {
     const p = parts[i]
-    if (!p || p === '.') continue
+    if (!p || p === '.') {
+      continue
+    }
     if (p === '..') {
       if (res.length && res[res.length - 1] !== '..') {
         res.pop()

package/src/util/error-boundary.jsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { isNode } from '@botonic/core'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 import { Text } from '../components/text'
 
@@ -10,15 +10,15 @@ export const createErrorBoundary = ({
   ),
 } = {}) => {
   const ErrorBoundary = ({ children }) => {
-    const [error, setError] = useState(null)
+    const [error, _setError] = useState(null)
 
-    const componentDidCatch = (error, errorInfo) => {
+    const _componentDidCatch = (error, _errorInfo) => {
       if (isNode()) {
         console.error(`Failure at:`, error)
       }
     }
 
-    const getDerivedStateFromError = error => {
+    const _getDerivedStateFromError = error => {
       return { error }
     }
 

package/src/util/logs.js

@@ -14,7 +14,8 @@ export function warnDeprecatedProps(props, extraInfo) {
     { legacy: 'imageStyle', new: 'imagestyle' },
   ]
   legacyNewProps.forEach(p => {
-    if (getProperty(props, p.legacy) !== undefined)
+    if (getProperty(props, p.legacy) !== undefined) {
       warnDeprecated(p.legacy, p.new, extraInfo)
+    }
   })
 }

package/src/util/objects.js

@@ -6,12 +6,14 @@
  * getProperty(obj, 'a.b.z'), returns undefined
  */
 export const getProperty = (obj, property) => {
-  if (!property) return undefined
+  if (!property) {
+    return undefined
+  }
   const properties = property.split('.')
   for (let i = 0; i < properties.length; i++) {
     const prop = properties[i]
     // eslint-disable-next-line no-prototype-builtins
-    if (!obj || !obj.hasOwnProperty(prop)) {
+    if (!obj || !Object.hasOwn(obj, prop)) {
       return undefined
     } else {
       obj = obj[prop]
@@ -31,7 +33,7 @@ export const mapObject = (obj, conversion = ([key, value]) => [key, value]) => {
     obj &&
     Object.entries(obj)
       .map(conversion)
-      .reduce(function (prev, curr) {
+      .reduce((prev, curr) => {
         prev[curr[0]] = curr[1]
         return prev
       }, {})