@botonic/react 0.31.5-alpha.1 → 0.32.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.31.5-alpha.1",
+  "version": "0.32.0-alpha.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -20,39 +20,42 @@
     "lint_core": "../../node_modules/.bin/eslint_d --cache --quiet '.*.js' '*.js' 'src/**/*.js*' --fix"
   },
   "dependencies": {
-    "@botonic/core": "^0.30.0",
-    "axios": "^1.7.2",
-    "emoji-picker-react": "^4.4.9",
+    "@botonic/core": "0.32.0-alpha.0",
+    "axios": "^1.7.9",
+    "emoji-picker-react": "^4.12.0",
     "lodash.merge": "^4.6.2",
-    "markdown-it": "^12.0.6",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-json-tree": "^0.15.0",
+    "markdown-it": "^12.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-json-tree": "^0.18.0",
     "react-router-dom": "^5.3.4",
-    "react-textarea-autosize": "^8.5.3",
-    "styled-components": "^5.3.0",
+    "react-textarea-autosize": "^8.5.5",
+    "styled-components": "^5.3.11",
     "ua-parser-js": "^1.0.39",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.5.1",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/lodash.merge": "^4.6.9",
     "@types/parse5": "^7.0.0",
-    "@types/react": "^16.14.56",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/styled-components": "^5.1.34",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/uuid": "^10.0.0",
     "babel-plugin-add-module-exports": "^1.0.4",
     "copyfiles": "^2.4.1",
     "identity-obj-proxy": "^3.0.0",
     "intersection-observer": "^0.12.2",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.3.1",
     "typescript": "5.0.4"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.0.0",
+    "npm": ">=10.0.0"
   },
   "sideEffects": [
     "*.scss",

package/src/components/{audio.jsx → audio.tsx}

@@ -1,23 +1,29 @@
 import { INPUT, isBrowser } from '@botonic/core'
 import React from 'react'
+import styled from 'styled-components'
 
 import { ROLES } from '../constants'
 import { staticAsset } from '../util/environment'
+import { AudioProps } from './index-types'
 import { Message } from './message'
 
-const serialize = audioProps => {
+const StyledAudio = styled.audio`
+  max-width: 100%;
+`
+
+const serialize = (audioProps: { src: string }) => {
   return { audio: audioProps.src }
 }
 
-export const Audio = props => {
+export const Audio = (props: AudioProps) => {
   props = { ...props, src: staticAsset(props.src) }
   let content = props.children
   if (isBrowser())
     content = (
-      <audio style={{ maxWidth: '100%' }} id='myAudio' controls>
+      <StyledAudio id='myAudio' controls>
         <source src={props.src} type='audio/mpeg' />
         Your browser does not support this audio format.
-      </audio>
+      </StyledAudio>
     )
   return (
     <Message

package/src/components/button.tsx

@@ -3,10 +3,10 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { resolveImage } from '../util/environment'
 import { renderComponent } from '../util/react'
 import { generateWebviewUrlWithParams } from '../util/webviews'
+import { WebchatContext } from '../webchat/context'
 import { ButtonsDisabler } from './buttons-disabler'
 import { ButtonProps } from './index-types'
 
@@ -46,7 +46,6 @@ export const Button = (props: ButtonProps) => {
     updateMessage,
   } = useContext(WebchatContext)
   const [hover, setHover] = useState(false)
-  const { theme } = webchatState
   const { autoDisable, disabledStyle } = ButtonsDisabler.resolveDisabling(
     webchatState.theme,
     props
@@ -170,7 +169,6 @@ export const Button = (props: ButtonProps) => {
     return (
       <StyledButton
         className={getClassName()}
-        theme={theme}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         onClick={e => handleClick(e)}

package/src/components/carousel.jsx

@@ -5,8 +5,8 @@ import styled from 'styled-components'
 import LeftArrow from '../assets/leftArrow.svg'
 import RightArrow from '../assets/rightArrow.svg'
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { resolveImage } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
 import { ButtonsDisabler } from './buttons-disabler'
 import { Message } from './message'
 

package/src/components/{custom-message.jsx → custom-message.tsx}

@@ -6,22 +6,31 @@ import { SENDERS } from '../index-types'
 import { createErrorBoundary } from '../util/error-boundary'
 import { warnDeprecatedProps } from '../util/logs'
 import { mapObjectNonBooleanValues } from '../util/react'
+import { CustomMessageType } from './index-types'
 import { Message } from './message'
 import { Reply } from './reply'
 
 /**
  *
- * @param name as it appears at ThemeProps' message.customTypes key
- * @param CustomMessageComponent
- * @param defaultProps Props for the wrapper Message
- * @param ErrorBoundary to recover in case it fails
+ *  name: as it appears at ThemeProps' message.customTypes key
+ *  CustomMessageComponent
+ *  defaultProps: Props for the wrapper Message
+ *  ErrorBoundary: to recover in case it fails
  */
+
+export interface CustomMessageArgs {
+  name: string
+  component: React.ComponentType
+  defaultProps?: Record<string, any>
+  errorBoundary?: any
+}
+
 export const customMessage = ({
   name,
   component: CustomMessageComponent,
   defaultProps = {},
-  errorBoundary: ErrorBoundary = createErrorBoundary(),
-}) => {
+  errorBoundary = createErrorBoundary(),
+}: CustomMessageArgs): CustomMessageType => {
   const CustomMessage = props => {
     warnDeprecatedProps(defaultProps, 'customMessage:')
     if (defaultProps.sentBy === SENDERS.user) {
@@ -57,6 +66,9 @@ export const customMessage = ({
   const WrappedComponent = props => {
     const { id, children, ...customMessageProps } = props
     const { replies, childrenWithoutReplies } = splitChildren(props)
+
+    const ErrorBoundary = errorBoundary
+
     return (
       <CustomMessage
         id={id}
@@ -80,7 +92,7 @@ export const customMessage = ({
   }
   WrappedComponent.customTypeName = name
   // eslint-disable-next-line react/display-name
-  WrappedComponent.deserialize = msg => (
+  WrappedComponent.deserialize = (msg: any) => (
     <WrappedComponent
       id={msg.id}
       key={msg.key}

package/src/components/{document.jsx → document.tsx}

@@ -3,8 +3,9 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
+import { DocumentProps } from './index-types'
 import { Message } from './message'
 
 const StyledButton = styled.a`
@@ -25,12 +26,13 @@ const StyledButton = styled.a`
   }
 `
 
-const serialize = documentProps => {
+const serialize = (documentProps: { src: string }) => {
   return { document: documentProps.src }
 }
 
-export const Document = props => {
+export const Document = (props: DocumentProps) => {
   props = { ...props, src: staticAsset(props.src) }
+
   let content = props.children
 
   const { getThemeProperty } = useContext(WebchatContext)

package/src/components/element.jsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
 import { renderComponent } from '../util/react'
+import { Button } from './button'
 
 const ElementContainer = styled.div`
   display: flex;
@@ -38,21 +39,13 @@ Element.serialize = elementProps => {
     ...elementProps.children
       .filter(c => {
         if (c instanceof Array) return true
-        return c && c.type && c.type.name == 'Button'
+        return c?.type?.name === Button.name
       })
       .map(b => {
         if (b instanceof Array) {
-          return b.map(
-            bb =>
-              bb &&
-              bb.type &&
-              bb.type.serialize &&
-              bb.type.serialize(bb.props).button
-          )
+          b.map(bb => bb?.type?.serialize?.(bb.props)?.button)
         }
-        return (
-          b && b.type && b.type.serialize && b.type.serialize(b.props).button
-        )
+        return b?.type?.serialize(b.props).button
       }),
   ]
   // When we have the buttons from backend, we have all buttons inside an array on the first position

package/src/components/handoff.jsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'
-import { WebchatContext } from '../contexts'
+import { WebchatContext } from '../webchat/context'
 
 const Container = styled.div`
   display: flex;

package/src/components/{image.jsx → image.tsx}

@@ -3,11 +3,16 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
+import { ImageProps } from './index-types'
 import { Message } from './message'
 
-const StyledImage = styled.img`
+interface StyledImageProps {
+  hasPreviewer: boolean
+}
+
+const StyledImage = styled.img<StyledImageProps>`
   border-radius: 8px;
   max-width: 150px;
   max-height: 150px;
@@ -15,14 +20,15 @@ const StyledImage = styled.img`
   cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};
 `
 
-const serialize = imageProps => {
+const serialize = (imageProps: { src: string }) => {
   return { image: imageProps.src }
 }
 
-export const Image = props => {
+export const Image = (props: ImageProps) => {
   props = props.input?.data
     ? { ...props, src: props.input.data }
     : { ...props, src: staticAsset(props.src) }
+
   let content = props.children
 
   const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)

package/src/components/index-types.ts

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { SENDERS } from '../index-types'
-import { CoverComponentProps } from '../webchat/index-types'
 
 export type MessageType =
   | 'audio'
@@ -16,7 +15,7 @@ export type MessageType =
 
 export interface MessageProps {
   blob?: boolean
-  children: React.ReactNode
+  children?: React.ReactNode
   delay?: number
   enabletimestamps?: boolean
   sentBy?: SENDERS
@@ -64,7 +63,26 @@ export interface PicProps {
   src: string
 }
 
-export type ImageProps = PicProps
+export interface ImageProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface VideoProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface AudioProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface DocumentProps extends MessageProps {
+  src: string
+  input?: { data: string }
+  from?: any
+}
 
 export interface TitleProps {
   children: React.ReactNode
@@ -73,21 +91,10 @@ export interface TitleProps {
 
 export type SubtitleProps = TitleProps
 
-export type CustomProp = { custom?: React.ComponentType }
-export type EnableProp = { enable?: boolean }
-export type ImageProp = { image?: string } // https URL or imported Image asset
-export type PersistentMenuCloseOption = { closeLabel: string }
-export type PersistentMenuOption = { label: string } & ButtonProps
-export type StyleProp = { style?: any }
-
-export type PersistentMenuTheme = (
-  | PersistentMenuCloseOption
-  | PersistentMenuOption
-)[]
-
-export interface PersistentMenuProps {
-  onClick: () => void
-  options: any
+export interface CustomMessageType {
+  (props: any): JSX.Element
+  customTypeName: string
+  deserialize(msg: any): JSX.Element
 }
 
 export type BlockInputOption = {
@@ -96,102 +103,6 @@ export type BlockInputOption = {
   message: string
 }
 
-export interface BlobProps {
-  blobTick?: boolean
-  blobTickStyle?: any
-  blobWidth?: string
-  imageStyle?: any
-}
-
-export interface ThemeProps extends StyleProp {
-  coverComponent?: CoverComponentOptions
-  mobileBreakpoint?: number
-  mobileStyle?: any
-  webview?: StyleProp & { header?: StyleProp }
-  animations?: EnableProp
-  intro?: StyleProp & ImageProp & CustomProp
-  brand?: { color?: string } & ImageProp
-  header?: { title?: string; subtitle?: string } & ImageProp &
-    StyleProp &
-    CustomProp
-  message?: {
-    bot?: BlobProps & ImageProp & StyleProp
-    agent?: ImageProp
-    user?: BlobProps & StyleProp
-    customTypes?: React.ComponentType[]
-  } & StyleProp & {
-      timestamps?: {
-        withImage?: boolean
-        format: () => string
-      } & StyleProp &
-        EnableProp
-    }
-  button?: {
-    autodisable?: boolean
-    disabledstyle?: any
-    hoverBackground?: string
-    hoverTextColor?: string
-    messageType?: 'text' | 'payload'
-    urlIcon?: ImageProp & EnableProp
-  } & StyleProp &
-    CustomProp
-  replies?: {
-    align?: 'left' | 'center' | 'right'
-    wrap?: 'wrap' | 'nowrap'
-  }
-  carousel?: {
-    arrow?: {
-      left: CustomProp
-      right: CustomProp
-    }
-    enableArrows?: boolean
-  }
-  reply?: StyleProp & CustomProp
-  triggerButton?: ImageProp & StyleProp & CustomProp
-  notifications?: EnableProp & {
-    banner?: CustomProp & EnableProp & { text?: string }
-    triggerButton?: EnableProp
-  }
-  scrollButton?: EnableProp & CustomProp
-  markdownStyle?: string // string template with css styles
-  userInput?: {
-    attachments?: EnableProp & CustomProp
-    blockInputs?: BlockInputOption[]
-    box?: { placeholder: string } & StyleProp
-    emojiPicker?: EnableProp & CustomProp
-    menu?: { darkBackground?: boolean } & {
-      custom?: React.ComponentType<PersistentMenuProps>
-    }
-    menuButton?: CustomProp
-    persistentMenu?: PersistentMenuTheme
-    sendButton?: EnableProp & CustomProp
-  } & EnableProp &
-    StyleProp
-  imagePreviewer?: React.ComponentType<ImagePreviewerProps>
-}
-
-interface ImagePreviewerProps {
-  src: string
-  isPreviewerOpened: boolean
-  closePreviewer: () => void
-}
-
-export interface CoverComponentOptions {
-  component: React.ComponentType<CoverComponentProps>
-  props?: any
-}
-
-export interface WebchatSettingsProps {
-  blockInputs?: BlockInputOption[]
-  enableAnimations?: boolean
-  enableAttachments?: boolean
-  enableEmojiPicker?: boolean
-  enableUserInput?: boolean
-  persistentMenu?: PersistentMenuTheme
-  theme?: ThemeProps
-  user?: { extra_data?: any }
-}
-
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { Carousel } from './carousel'
 export { customMessage } from './custom-message'
 export { Document } from './document'
 export { Element } from './element'
+export { Handoff } from './handoff'
 export { Image } from './image'
 export * from './index-types'
 export { Location } from './location'
@@ -18,15 +19,35 @@ export { Subtitle } from './subtitle'
 export { Text } from './text'
 export { Title } from './title'
 export { Video } from './video'
-export { WebchatSettings } from './webchat-settings'
+export {
+  normalizeWebchatSettings,
+  WebchatSettings,
+  WebchatSettingsProps,
+} from './webchat-settings'
 export {
   WhatsappButtonList,
   WhatsappButtonListProps,
   WhatsappButtonListRowProps,
   WhatsappButtonListSectionProps,
 } from './whatsapp-button-list'
+export { WhatsappCatalog, WhatsappCatalogProps } from './whatsapp-catalog'
 export {
   WhatsappCTAUrlButton,
   WhatsappCTAUrlButtonProps,
 } from './whatsapp-cta-url-button'
+export {
+  WhatsappMediaCarousel,
+  WhatsappMediaCarouselProps,
+} from './whatsapp-media-carousel'
+export { WhatsappProduct } from './whatsapp-product'
+export {
+  WhatsappProductCarousel,
+  WhatsappProductCarouselProps,
+} from './whatsapp-product-carousel'
+export {
+  ProductItem,
+  WhatsappProductList,
+  WhatsappProductListProps,
+  WhatsappProductListSection,
+} from './whatsapp-product-list'
 export { WhatsappTemplate } from './whatsapp-template'

package/src/components/message/index.jsx

@@ -3,11 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { COLORS, WEBCHAT } from '../../constants'
-import { RequestContext, WebchatContext } from '../../contexts'
+import { RequestContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { Fade } from '../../shared/styles'
 import { isDev } from '../../util/environment'
 import { ConditionalWrapper, renderComponent } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
 import { Button } from '../button'
 import { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'

package/src/components/message/message-feedback.tsx

@@ -3,9 +3,9 @@ import { v7 as uuidv7 } from 'uuid'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'
-import { WebchatContext } from '../../contexts'
 import { ActionRequest } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { EventAction, FeedbackOption } from '../../webchat/tracking'
 import { FeedbackButton, FeedbackMessageContainer } from './styles'
 

package/src/components/message/message-footer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { MessageFeedback } from './message-feedback'
 import { MessageFooterContainer } from './styles'
 import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'

package/src/components/message/message-image.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { BotMessageImageContainer } from './styles'
 
 interface MessageImageProps {

package/src/components/message/timestamps.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { TimestampContainer, TimestampText } from './styles'
 
 export const resolveMessageTimestamps = (

package/src/components/multichannel/multichannel-button.jsx

@@ -5,7 +5,7 @@ import { RequestContext } from '../../contexts'
 import { truncateText } from '../../util'
 import { Button } from '../button'
 import { MultichannelContext } from './multichannel-context'
-import { WHATSAPP_MAX_BUTTON_CHARS } from './multichannel-utils'
+import { WHATSAPP_MAX_BUTTON_CHARS } from './whatsapp/constants'
 
 export const MultichannelButton = props => {
   const requestContext = useContext(RequestContext)

package/src/components/multichannel/multichannel-carousel.jsx

@@ -7,7 +7,9 @@ import { MultichannelText } from './multichannel-text'
 import {
   getFilteredElements,
   isMultichannelButton,
-  isNodeKind,
+  isNodePic,
+  isNodeSubtitle,
+  isNodeTitle,
 } from './multichannel-utils'
 
 export const MultichannelCarousel = props => {
@@ -26,17 +28,17 @@ export const MultichannelCarousel = props => {
         const buttons = []
 
         for (const node of element) {
-          if (isNodeKind(node, 'Pic')) {
+          if (isNodePic(node)) {
             imageProps = node.props
           }
-          if (isNodeKind(node, 'Title')) {
+          if (isNodeTitle(node)) {
             title = node.props.children
           }
-          if (isNodeKind(node, 'Subtitle')) {
+          if (isNodeSubtitle(node)) {
             subtitle = node.props.children
           }
 
-          if (isNodeKind(node, 'MultichannelButton')) {
+          if (isMultichannelButton(node)) {
             buttons.push(node)
           }
           //TODO support fragment containing an array

package/src/components/multichannel/multichannel-text.jsx

@@ -9,18 +9,20 @@ import { MultichannelButton } from './multichannel-button'
 import { MultichannelContext } from './multichannel-context'
 import {
   buttonTypes,
-  DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR,
   elementHasPostback,
   elementHasUrl,
   elementHasWebview,
   getButtonType,
   getMultichannelButtons,
   getMultichannelReplies,
+} from './multichannel-utils'
+import {
+  DEFAULT_WHATSAPP_MAX_BUTTON_SEPARATOR,
   MENU_BUTTON_WHATSAPP_BUTTON_LIST,
   MULTICHANNEL_WHATSAPP_PROPS,
   WHATSAPP_LIST_MAX_BUTTONS,
   WHATSAPP_MAX_BUTTONS,
-} from './multichannel-utils'
+} from './whatsapp/constants'
 import { convertToMarkdownMeta } from './whatsapp/markdown-meta'
 
 export const MultichannelText = props => {