feat: remove persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput and enableAnimations from WebchatProps and pass it inside theme

Author: Iru89

packages/botonic-react/src/dev-app.jsx

@@ -1,4 +1,3 @@
-import merge from 'lodash.merge'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 
@@ -56,13 +55,6 @@ export class DevApp extends WebchatApp {
   getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
-      persistentMenu,
-      coverComponent,
-      blockInputs,
-      enableEmojiPicker,
-      enableAttachments,
-      enableUserInput,
-      enableAnimations,
       storage,
       storageKey,
       onInit,
@@ -73,14 +65,7 @@ export class DevApp extends WebchatApp {
       hostId,
       ...webchatOptions
     } = optionsAtRuntime
-    theme = merge(this.theme, theme)
-    persistentMenu = persistentMenu || this.persistentMenu
-    coverComponent = coverComponent || this.coverComponent
-    blockInputs = blockInputs || this.blockInputs
-    enableEmojiPicker = enableEmojiPicker || this.enableEmojiPicker
-    enableAttachments = enableAttachments || this.enableAttachments
-    enableUserInput = enableUserInput || this.enableUserInput
-    enableAnimations = enableAnimations || this.enableAnimations
+    theme = super.createInitialTheme(optionsAtRuntime)
     storage = storage || this.storage
     storageKey = storageKey || this.storageKey
     this.onInit = onInit || this.onInit
@@ -97,13 +82,6 @@ export class DevApp extends WebchatApp {
         host={this.host}
         shadowDOM={this.shadowDOM}
         theme={theme}
-        persistentMenu={persistentMenu}
-        coverComponent={coverComponent}
-        blockInputs={blockInputs}
-        enableEmojiPicker={enableEmojiPicker}
-        enableAttachments={enableAttachments}
-        enableUserInput={enableUserInput}
-        enableAnimations={enableAnimations}
         storage={storage}
         storageKey={storageKey}
         getString={(stringId, session) => this.bot.getString(stringId, session)}

packages/botonic-react/src/index-types.ts

@@ -121,13 +121,6 @@ export interface WebchatProps {
 
   shadowDOM?: any
   theme?: WebchatTheme
-  persistentMenu?: PersistentMenuOptionsTheme
-  coverComponent?: CoverComponentOptions
-  blockInputs?: BlockInputOption[]
-  enableEmojiPicker?: boolean
-  enableAttachments?: boolean
-  enableUserInput?: boolean
-  enableAnimations?: boolean
   storage?: Storage | null
   storageKey?: string | (() => string)
   defaultDelay?: number

packages/botonic-react/src/webchat-app.tsx

@@ -88,7 +88,6 @@ export class WebchatApp {
     server,
   }: WebchatArgs) {
     this.theme = theme
-    // TODO: Review if is possible store persistentMenu, coverComponent, blockInputs, enableEmojiPicker, enableAttachments, enableUserInput, enableAnimations, etc as part of theme
     this.persistentMenu = persistentMenu
     this.coverComponent = coverComponent
     this.blockInputs = blockInputs
@@ -371,17 +370,86 @@ export class WebchatApp {
     return this.webchatRef.current?.updateWebchatSettings(settings)
   }
 
-  // eslint-disable-next-line complexity
+  createInitialTheme(optionsAtRuntime: WebchatArgs = {}) {
+    const theme = merge(defaultTheme, this.theme, optionsAtRuntime.theme)
+
+    if (theme.animations === undefined) {
+      theme.animations = {}
+    }
+
+    theme.animations.enable =
+      theme.animations.enable ??
+      optionsAtRuntime.enableAnimations ??
+      this.enableAnimations
+
+    theme.coverComponent =
+      theme.coverComponent ??
+      optionsAtRuntime.coverComponent ??
+      this.coverComponent
+
+    theme.userInput = this.createInitialThemUserInput(theme, optionsAtRuntime)
+
+    return theme
+  }
+
+  createInitialThemUserInput(
+    theme: WebchatTheme,
+    optionsAtRuntime: WebchatArgs = {}
+  ) {
+    if (theme.userInput === undefined) {
+      theme.userInput = {}
+    }
+
+    console.log(
+      'WebchatApp theme.userInput.enable',
+      theme.userInput.enable,
+      optionsAtRuntime.enableUserInput,
+      this.enableUserInput
+    )
+    theme.userInput.enable =
+      theme.userInput.enable ??
+      optionsAtRuntime.enableUserInput ??
+      this.enableUserInput
+
+    theme.userInput.persistentMenu =
+      theme.userInput.persistentMenu ??
+      optionsAtRuntime.persistentMenu ??
+      this.persistentMenu
+
+    theme.userInput.blockInputs =
+      theme.userInput.blockInputs ??
+      optionsAtRuntime.blockInputs ??
+      this.blockInputs
+
+    if (theme.userInput.emojiPicker === undefined) {
+      theme.userInput.emojiPicker = {}
+    }
+
+    theme.userInput.emojiPicker.enable =
+      theme.userInput.emojiPicker.enable ??
+      optionsAtRuntime.enableEmojiPicker ??
+      this.enableEmojiPicker
+
+    if (theme.userInput.attachments === undefined) {
+      theme.userInput.attachments = {}
+    }
+
+    theme.userInput.attachments.enable =
+      theme.userInput.attachments.enable ??
+      optionsAtRuntime.enableAttachments ??
+      this.enableAttachments
+
+    theme.userInput.blockInputs =
+      theme.userInput.blockInputs ??
+      optionsAtRuntime.blockInputs ??
+      this.blockInputs
+
+    return theme.userInput
+  }
+
   getComponent(host: HTMLDivElement, optionsAtRuntime: WebchatArgs = {}) {
     let {
-      theme = defaultTheme,
-      persistentMenu,
-      coverComponent,
-      blockInputs,
-      enableAttachments,
-      enableUserInput,
-      enableAnimations,
-      enableEmojiPicker,
+      theme = {},
       defaultDelay,
       defaultTyping,
       storage,
@@ -398,14 +466,7 @@ export class WebchatApp {
       hostId,
       ...webchatOptions
     } = optionsAtRuntime
-    theme = merge(this.theme, theme)
-    persistentMenu = persistentMenu || this.persistentMenu
-    coverComponent = coverComponent || this.coverComponent
-    blockInputs = blockInputs || this.blockInputs
-    enableEmojiPicker = enableEmojiPicker || this.enableEmojiPicker
-    enableAttachments = enableAttachments || this.enableAttachments
-    enableUserInput = enableUserInput || this.enableUserInput
-    enableAnimations = enableAnimations || this.enableAnimations
+    theme = this.createInitialTheme(optionsAtRuntime)
     defaultDelay = defaultDelay || this.defaultDelay
     defaultTyping = defaultTyping || this.defaultTyping
     server = server || this.server
@@ -429,29 +490,22 @@ export class WebchatApp {
         host={this.host}
         shadowDOM={this.shadowDOM}
         theme={theme as WebchatTheme}
-        persistentMenu={persistentMenu}
-        coverComponent={coverComponent}
-        blockInputs={blockInputs}
-        enableEmojiPicker={enableEmojiPicker}
-        enableAttachments={enableAttachments}
-        enableUserInput={enableUserInput}
-        enableAnimations={enableAnimations}
         storage={this.storage}
         storageKey={this.storageKey}
         defaultDelay={defaultDelay}
         defaultTyping={defaultTyping}
         onInit={(...args: [any]) => this.onInitWebchat(...args)}
         onOpen={(...args: [any]) => this.onOpenWebchat(...args)}
         onClose={(...args: [any]) => this.onCloseWebchat(...args)}
-        onUserInput={(...args: [any]) => this.onUserInput(...args)} // TODO: Review this function, and his params
+        onUserInput={(...args: [any]) => this.onUserInput(...args)}
         onStateChange={(args: OnStateChangeArgs) => {
           this.onStateChange(args)
         }}
         onTrackEvent={(
           request: ActionRequest,
           eventName: string,
           args?: EventArgs
-        ) => this.onTrackEventWebchat(request, eventName, args)} //TODO: Review if this implementation is correct
+        ) => this.onTrackEventWebchat(request, eventName, args)}
         server={server}
       />
     )

packages/botonic-react/src/webchat/input-panel/attachment.tsx

@@ -8,30 +8,20 @@ import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface AttachmentProps {
   accept: string
-  enableAttachments?: boolean
   onChange: (event: any) => void
 }
 
-export const Attachment = ({
-  accept,
-  enableAttachments,
-  onChange,
-}: AttachmentProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const Attachment = ({ accept, onChange }: AttachmentProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
   const fileInputRef = useRef<HTMLInputElement | null>(null)
 
-  const CustomAttachments = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customAttachments
-  )
+  const CustomAttachments = webchatState.theme.userInput?.attachments?.custom
 
   const isAttachmentsEnabled = () => {
     const hasCustomAttachments = !!CustomAttachments
     return (
-      getThemeProperty(
-        WEBCHAT.CUSTOM_PROPERTIES.enableAttachments,
-        enableAttachments
-      ) ?? hasCustomAttachments
+      webchatState.theme.userInput?.attachments?.enable || hasCustomAttachments
     )
   }
   const attachmentsEnabled = isAttachmentsEnabled()

packages/botonic-react/src/webchat/input-panel/emoji-picker.tsx

@@ -7,28 +7,18 @@ import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface EmojiPickerProps {
-  enableEmojiPicker?: boolean
   onClick: () => void
 }
 
-export const EmojiPicker = ({
-  enableEmojiPicker,
-  onClick,
-}: EmojiPickerProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const EmojiPicker = ({ onClick }: EmojiPickerProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
-  const CustomEmojiPicker = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customEmojiPicker,
-    undefined
-  )
+  const CustomEmojiPicker = webchatState.theme.userInput?.emojiPicker?.custom
 
   const isEmojiPickerEnabled = () => {
     const hasCustomEmojiPicker = !!CustomEmojiPicker
     return (
-      getThemeProperty(
-        WEBCHAT.CUSTOM_PROPERTIES.enableEmojiPicker,
-        enableEmojiPicker
-      ) ?? hasCustomEmojiPicker
+      webchatState.theme.userInput?.emojiPicker?.enable || hasCustomEmojiPicker
     )
   }
   const emojiPickerEnabled = isEmojiPickerEnabled()

packages/botonic-react/src/webchat/input-panel/index.tsx

@@ -15,19 +15,13 @@ import { UserInputContainer } from './styles'
 import { Textarea } from './textarea'
 
 interface InputPanelProps {
-  persistentMenu: any
-  enableEmojiPicker?: boolean
-  enableAttachments?: boolean
   handleAttachment: (event: any) => void
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   host: HTMLElement
   onUserInput?: (event: any) => Promise<void>
 }
 
 export const InputPanel = ({
-  persistentMenu,
-  enableEmojiPicker,
-  enableAttachments,
   handleAttachment,
   textareaRef,
   host,
@@ -96,23 +90,18 @@ export const InputPanel = ({
         />
       )}
 
-      <PersistentMenu onClick={handleMenu} persistentMenu={persistentMenu} />
+      <PersistentMenu onClick={handleMenu} />
 
       <Textarea
         host={host}
-        persistentMenu={persistentMenu}
         textareaRef={textareaRef}
         sendChatEvent={sendChatEvent}
         sendTextAreaText={sendTextAreaText}
       />
 
-      <EmojiPicker
-        enableEmojiPicker={enableEmojiPicker}
-        onClick={handleEmojiClick}
-      />
+      <EmojiPicker onClick={handleEmojiClick} />
 
       <Attachment
-        enableAttachments={enableAttachments}
         onChange={handleAttachment}
         accept={getFullMimeWhitelist().join(',')}
       />

packages/botonic-react/src/webchat/input-panel/persistent-menu.tsx

@@ -1,30 +1,21 @@
 import React, { useContext } from 'react'
 
 import LogoMenu from '../../assets/menuButton.svg'
-import { ROLES, WEBCHAT } from '../../constants'
+import { ROLES } from '../../constants'
 import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface PersistentMenuProps {
-  persistentMenu: any
   onClick: () => void
 }
 
-export const PersistentMenu = ({
-  onClick,
-  persistentMenu,
-}: PersistentMenuProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+export const PersistentMenu = ({ onClick }: PersistentMenuProps) => {
+  const { webchatState } = useContext(WebchatContext)
 
-  const persistentMenuOptions = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-    persistentMenu
-  )
+  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
 
-  const CustomMenuButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customMenuButton
-  )
+  const CustomMenuButton = webchatState.theme.userInput?.menuButton?.custom
 
   return (
     <>

packages/botonic-react/src/webchat/input-panel/send-button.tsx

@@ -11,15 +11,11 @@ interface SendButtonProps {
 }
 
 export const SendButton = ({ onClick }: SendButtonProps) => {
-  const { getThemeProperty } = useContext(WebchatContext)
+  const { webchatState } = useContext(WebchatContext)
 
-  const sendButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableSendButton
-  )
+  const sendButtonEnabled = webchatState.theme.userInput?.sendButton?.enable
 
-  const CustomSendButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customSendButton
-  )
+  const CustomSendButton = webchatState.theme.userInput?.sendButton?.custom
 
   return (
     <>