@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.36.0-alpha.0",
+  "version": "0.36.0-alpha.1",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",
@@ -20,39 +20,44 @@
     "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.36.0-alpha.0",
+    "axios": "^1.9.0",
+    "emoji-picker-react": "^4.12.0",
     "lodash.merge": "^4.6.2",
-    "markdown-it": "^12.0.6",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.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/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.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": "^17.0.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 → button/index.tsx}

@@ -1,64 +1,24 @@
 import { INPUT } from '@botonic/core'
-import React, { useContext, useState } from 'react'
-import styled from 'styled-components'
+import React, { useContext } from 'react'
 
-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 { ButtonsDisabler } from './buttons-disabler'
-import { ButtonProps } from './index-types'
-
-const StyledButton = styled.button`
-  display: flex;
-  width: 100%;
-  max-height: 80px;
-  font-size: 14px;
-  text-align: center;
-  align-content: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 12px 32px;
-  font-family: inherit;
-  border: none;
-  border: 1px solid ${COLORS.SEASHELL_WHITE};
-  cursor: pointer;
-  outline: 0;
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
-  overflow: hidden;
-`
-
-export const StyledUrlImage = styled.img`
-  width: 20px;
-`
+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'
+import { StyledButton, StyledUrlImage } from './styles'
 
 export const Button = (props: ButtonProps) => {
-  const {
-    webchatState,
-    openWebview,
-    sendPayload,
-    sendInput,
-    getThemeProperty,
-    updateMessage,
-  } = useContext(WebchatContext)
-  const [hover, setHover] = useState(false)
-  const { theme } = webchatState
-  const { autoDisable, disabledStyle } = ButtonsDisabler.resolveDisabling(
-    webchatState.theme,
-    props
-  )
+  const { webchatState, openWebview, sendPayload, sendInput, updateMessage } =
+    useContext(WebchatContext)
+
+  const autoDisable = webchatState.theme?.button?.autodisable
 
   const handleClick = event => {
     event.preventDefault()
 
-    const type = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.buttonMessageType,
-      INPUT.TEXT
-    )
+    const type = webchatState.theme?.button?.messageType
 
     if (props.webview) {
       openWebview(props.webview, props.params)
@@ -93,10 +53,7 @@ export const Button = (props: ButtonProps) => {
       const messageToUpdate = webchatState.messagesJSON.filter(
         m => m.id === props.parentId
       )[0]
-      const updatedMsg = ButtonsDisabler.getUpdatedMessage(messageToUpdate, {
-        autoDisable,
-        disabledStyle,
-      })
+      const updatedMsg = ButtonsDisabler.getUpdatedMessage(messageToUpdate)
       updateMessage(updatedMsg)
     }
   }
@@ -121,10 +78,12 @@ export const Button = (props: ButtonProps) => {
   }
 
   const renderBrowser = () => {
-    const buttonStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.buttonStyle)
-    const CustomButton = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.customButton
-    )
+    const themeButton = webchatState.theme.button
+    const urlIconEnabledProp = themeButton?.urlIcon?.enable
+    const urlIconImage = themeButton?.urlIcon?.image
+    const urlIcon = urlIconEnabledProp ? urlIconImage : undefined
+
+    const CustomButton = themeButton?.custom
 
     if (CustomButton) {
       return (
@@ -134,52 +93,11 @@ export const Button = (props: ButtonProps) => {
       )
     }
 
-    const buttonBgColor = hover
-      ? getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.buttonHoverBackground,
-          COLORS.CONCRETE_WHITE
-        )
-      : getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.buttonStyleBackground,
-          COLORS.SOLID_WHITE
-        )
-
-    const buttonTextColor = hover
-      ? getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.buttonHoverTextColor,
-          COLORS.SOLID_BLACK
-        )
-      : getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.buttonStyleColor,
-          COLORS.SOLID_BLACK
-        )
-
-    const urlIconEnabledProp = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.urlIconEnabled
-    )
-
-    const urlIconImageProp = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.urlIconImage
-    )
-
-    const urlIconImage = urlIconImageProp ?? WEBCHAT.DEFAULTS.URL_ICON
-
-    const urlIcon =
-      urlIconEnabledProp || urlIconImageProp ? urlIconImage : undefined
-
     return (
       <StyledButton
         className={getClassName()}
-        theme={theme}
-        onMouseEnter={() => setHover(true)}
-        onMouseLeave={() => setHover(false)}
         onClick={e => handleClick(e)}
-        style={{
-          ...buttonStyle,
-          color: buttonTextColor,
-          backgroundColor: buttonBgColor,
-          ...(props.disabled && autoDisable && disabledStyle),
-        }}
+        disabled={props.disabled && autoDisable}
       >
         {props.children}
         {props.url && urlIcon && (
@@ -193,7 +111,11 @@ export const Button = (props: ButtonProps) => {
   }
 
   const renderNode = () => {
-    const disabledProps = ButtonsDisabler.constructNodeProps(props)
+    const disabledProps = ButtonsDisabler.constructNodeProps({
+      disabled: props.disabled,
+      disabledstyle: props.disabledstyle,
+      autodisable: props.autodisable,
+    })
     if (props.webview) {
       return (
         <button

package/src/components/button/styles.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components'
+
+export const StyledButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  gap: 6px;
+  cursor: pointer;
+  width: ${props => props.theme.button?.style?.width};
+  max-height: ${props => props.theme.button?.style?.maxHeight};
+  height: ${props => props.theme.button?.style?.height};
+  font-family: ${props => props.theme.style?.fontFamily};
+  font-size: ${props => props.theme.button?.style?.fontSize};
+  font-weight: ${props => props.theme.button?.style?.fontWeight};
+  background: ${props => props.theme.button?.style?.background};
+  color: ${props => props.theme.button?.style?.color};
+  outline: ${props => props.theme.button?.style?.outline};
+  border: ${props => props.theme.button?.style?.border};
+  border-radius: ${props => props.theme.button?.style?.borderRadius};
+  padding: ${props => props.theme.button?.style?.padding};
+  overflow: ${props => props.theme.button?.style?.overflow};
+
+  &:hover {
+    background: ${props => props.theme.button?.hoverBackground};
+    color: ${props => props.theme.button?.hoverTextColor};
+  }
+
+  &:disabled {
+    opacity: ${props => props.theme.button?.disabledstyle?.opacity};
+    cursor: ${props => props.theme.button?.disabledstyle?.cursor};
+    pointer-events: ${props =>
+      props.theme.button?.disabledstyle?.pointerEvents};
+  }
+`
+
+export const StyledUrlImage = styled.img`
+  width: 20px;
+`

package/src/components/{buttons-disabler.js → buttons-disabler.ts}

@@ -1,21 +1,35 @@
-import { Button } from '../components/button'
-import { WEBCHAT } from '../constants'
+import React from 'react'
+
+import { WebchatMessage } from '../index-types'
 import { isCarousel } from '../message-utils'
 import { strToBool } from '../util/objects'
 import { deepMapWithIndex } from '../util/react'
-import { _getThemeProperty } from '../util/webchat'
+import { Button } from './button'
+import { ButtonProps } from './index-types'
+
+interface DisabledProps {
+  disabled?: boolean
+  autodisable?: boolean | string
+  disabledstyle?: Record<string, string> | string
+}
 
+interface AdditionalProps {
+  parentId: string
+  disabled?: boolean
+  setDisabled: (disabled: boolean) => void
+}
 export class ButtonsDisabler {
-  static constructBrowserProps(props) {
-    const disabledProps = { disabled: props.disabled }
+  static constructBrowserProps(props: DisabledProps): DisabledProps {
+    const disabledProps: DisabledProps = {}
     if (props.autodisable !== undefined)
       disabledProps.autodisable = strToBool(props.autodisable)
     if (props.disabledstyle !== undefined)
       disabledProps.disabledstyle = props.disabledstyle
     return disabledProps
   }
-  static constructNodeProps(props) {
-    const disabledProps = {}
+
+  static constructNodeProps(props: DisabledProps): DisabledProps {
+    const disabledProps: DisabledProps = {}
     if (props.autodisable !== undefined)
       disabledProps.autodisable = String(props.autodisable)
     if (props.disabledstyle !== undefined)
@@ -23,7 +37,7 @@ export class ButtonsDisabler {
     return disabledProps
   }
 
-  static withDisabledProps(props) {
+  static withDisabledProps(props: DisabledProps): DisabledProps {
     return {
       disabled: props.disabled,
       autodisable: props.autodisable,
@@ -31,44 +45,25 @@ export class ButtonsDisabler {
     }
   }
 
-  static resolveDisabling(theme, props) {
-    const getThemeProperty = _getThemeProperty(theme)
-    const autoDisable =
-      props.autodisable !== undefined
-        ? props.autodisable
-        : getThemeProperty(
-            WEBCHAT.CUSTOM_PROPERTIES.buttonAutoDisable,
-            WEBCHAT.DEFAULTS.BUTTON_AUTO_DISABLE
-          )
-    const computedDisabledStyle =
-      props.disabledstyle !== undefined
-        ? props.disabledstyle
-        : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.buttonDisabledStyle, {})
-
-    const disabledStyle = {
-      ...WEBCHAT.DEFAULTS.BUTTON_DISABLED_STYLE,
-      ...computedDisabledStyle,
-    }
-    return { autoDisable, disabledStyle }
-  }
-
-  static updateChildrenButtons(children, additionalProps = undefined) {
-    return deepMapWithIndex(children, n => {
-      if (n.type === Button) return this.updateButtons(n, additionalProps)
-      return n
+  static updateChildrenButtons(
+    children: React.ReactNode,
+    additionalProps?: AdditionalProps
+  ): React.ReactNode {
+    return deepMapWithIndex(children, (node: any) => {
+      if (node.type === Button) return this.updateButtons(node, additionalProps)
+      return node
     })
   }
 
-  static updateButtons(node, additionalProps) {
-    if (!additionalProps) additionalProps = {}
-    else {
+  static updateButtons(node: any, additionalProps?: AdditionalProps): any {
+    if (additionalProps) {
       additionalProps = {
+        parentId: additionalProps.parentId,
         disabled:
           node.props.disabled === true
             ? node.props.disabled
             : additionalProps.disabled,
         setDisabled: additionalProps.setDisabled,
-        parentId: additionalProps.parentId,
       }
     }
     return {
@@ -80,8 +75,8 @@ export class ButtonsDisabler {
     }
   }
 
-  static getUpdatedMessage(messageToUpdate, { autoDisable, disabledStyle }) {
-    const updateMsgButton = button => {
+  static getUpdatedMessage(messageToUpdate: WebchatMessage): WebchatMessage {
+    const updateMsgButton = (button: ButtonProps) => {
       return {
         ...button,
         ...{
@@ -89,6 +84,7 @@ export class ButtonsDisabler {
         },
       }
     }
+
     if (
       isCarousel(messageToUpdate) &&
       messageToUpdate.data &&

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

@@ -5,9 +5,10 @@ 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 { CarouselProps } from './index-types'
 import { Message } from './message'
 
 const ScrollableCarousel = styled.div`
@@ -15,7 +16,11 @@ const ScrollableCarousel = styled.div`
   -webkit-overflow-scrolling: touch;
 `
 
-const StyledCarousel = styled.div`
+interface StyledCarouselProps {
+  carouselArrowsEnabled: boolean
+}
+
+const StyledCarousel = styled.div<StyledCarouselProps>`
   padding: 10px 0px;
   display: flex;
   flex-direction: row;
@@ -27,7 +32,14 @@ const StyledItems = styled.div`
   display: flex;
 `
 
-const StyledArrowContainer = styled.div`
+interface StyledArrowContainerProps {
+  left?: number
+  right?: number
+  arrow: 'right' | 'left'
+  justifyContent: string
+}
+
+const StyledArrowContainer = styled.div<StyledArrowContainerProps>`
   position: absolute;
   top: calc(50% - 20px);
   height: 40px;
@@ -37,10 +49,14 @@ const StyledArrowContainer = styled.div`
   align-items: center;
   cursor: pointer;
   justify-content: ${props => props.justifyContent};
-  left: ${props => props.left}px;
-  right: ${props => props.right}px;
-  border-top-${props => props.arrow}-radius: 30px;
-  border-bottom-${props => props.arrow}-radius: 30px;
+
+  ${props => (props.left ? ` left: ${props.left}px` : '')};
+  ${props => (props.right ? ` right: ${props.right}px` : '')};
+  ${props => (props.arrow === 'right' ? 'border-top-right-radius: 30px' : '')};
+  ${props =>
+    props.arrow === 'right' ? 'border-bottom-right-radius: 30px' : ''};
+  ${props => (props.arrow === 'left' ? 'border-top-left-radius: 30px' : '')};
+  ${props => (props.arrow === 'left' ? 'border-bottom-left-radius: 30px' : '')};
 `
 const StyledArrow = styled.img`
   width: 20px;
@@ -53,38 +69,30 @@ const serialize = carouselProps => {
   return {
     type: INPUT.CAROUSEL,
     elements: carouselChildren.map(
-      e => e && e.type && e.type.serialize && e.type.serialize(e.props)
+      e => e?.type?.serialize && e.type.serialize(e.props)
     ),
   }
 }
 
-/**
- *
- * @param {MessageProps} props
- * @returns {JSX.Element}
- */
-export const Carousel = props => {
+export const Carousel = (props: CarouselProps) => {
   const { getThemeProperty } = useContext(WebchatContext)
-  let content = props.children
   const [hasLeftArrow, setLeftArrow] = useState(false)
   const [hasRightArrow, setRightArrow] = useState(true)
-  const carouselRef = useRef(null)
+  const carouselRef = useRef<HTMLDivElement>(null)
+
   const CustomCarouselLeftArrow = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow
   )
   const CustomCarouselRightArrow = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow
   )
   // 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
+    WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows
   )
 
   const scrollCarouselBy = value => {
-    carouselRef.current.scrollBy({
+    carouselRef.current?.scrollBy({
       left: value,
       behavior: 'smooth',
     })
@@ -139,8 +147,12 @@ export const Carousel = props => {
     const carousel = carouselRef.current
     if (carousel && carousel.addEventListener) {
       carousel.addEventListener('scroll', setArrowsVisibility, false)
-    } else if (carousel && carousel.attachEvent) {
-      carousel.attachEvent('scroll', setArrowsVisibility)
+    }
+
+    return () => {
+      if (carousel && carousel.removeEventListener) {
+        carousel.removeEventListener('scroll', setArrowsVisibility, false)
+      }
     }
   }, [carouselRef.current])
 
@@ -150,16 +162,28 @@ export const Carousel = props => {
   }
 
   if (isBrowser()) {
-    content = (
-      <ScrollableCarousel>
-        <StyledCarousel
-          ref={carouselRef}
-          carouselArrowsEnabled={carouselArrowsEnabled}
-        >
-          <StyledItems>{carouselProps.children}</StyledItems>
-          {carouselArrowsEnabled && getArrows()}
-        </StyledCarousel>
-      </ScrollableCarousel>
+    return (
+      <Message
+        style={{
+          width: '85%',
+          padding: 0,
+          backgroundColor: COLORS.TRANSPARENT,
+        }}
+        blob={false}
+        json={serialize(carouselProps)}
+        type={INPUT.CAROUSEL}
+        {...carouselProps}
+      >
+        <ScrollableCarousel>
+          <StyledCarousel
+            ref={carouselRef}
+            carouselArrowsEnabled={carouselArrowsEnabled}
+          >
+            <StyledItems>{carouselProps.children}</StyledItems>
+            {carouselArrowsEnabled && getArrows()}
+          </StyledCarousel>
+        </ScrollableCarousel>
+      </Message>
     )
   }
 
@@ -171,7 +195,7 @@ export const Carousel = props => {
       type={INPUT.CAROUSEL}
       {...carouselProps}
     >
-      {content}
+      {props.children}
     </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}