@botonic/react 0.34.1 → 0.35.0-alpha.1

package/src/time-zone-to-country-code.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export const timeZoneToCountryCode: Record<string, string> = {
+  'Africa/Abidjan': 'CI',
+  'Africa/Accra': 'GH',
+  'Africa/Addis_Ababa': 'ET',
+  'Africa/Algiers': 'DZ',
+  'Africa/Asmara': 'ER',
+  'Africa/Bamako': 'ML',
+  'Africa/Bangui': 'CF',
+  'Africa/Banjul': 'GM',
+  'Africa/Bissau': 'GW',
+  'Africa/Blantyre': 'MW',
+  'Africa/Brazzaville': 'CG',
+  'Africa/Bujumbura': 'BI',
+  'Africa/Cairo': 'EG',
+  'Africa/Casablanca': 'MA',
+  'Africa/Ceuta': 'ES',
+  'Africa/Conakry': 'GN',
+  'Africa/Dakar': 'SN',
+  'Africa/Dar_es_Salaam': 'TZ',
+  'Africa/Djibouti': 'DJ',
+  'Africa/Douala': 'CM',
+  'Africa/El_Aaiun': 'EH',
+  'Africa/Freetown': 'SL',
+  'Africa/Gaborone': 'BW',
+  'Africa/Harare': 'ZW',
+  'Africa/Johannesburg': 'ZA',
+  'Africa/Juba': 'SS',
+  'Africa/Kampala': 'UG',
+  'Africa/Khartoum': 'SD',
+  'Africa/Kigali': 'RW',
+  'Africa/Kinshasa': 'CD',
+  'Africa/Lagos': 'NG',
+  'Africa/Libreville': 'GA',
+  'Africa/Lome': 'TG',
+  'Africa/Luanda': 'AO',
+  'Africa/Lubumbashi': 'CD',
+  'Africa/Lusaka': 'ZM',
+  'Africa/Malabo': 'GQ',
+  'Africa/Maputo': 'MZ',
+  'Africa/Maseru': 'LS',
+  'Africa/Mbabane': 'SZ',
+  'Africa/Mogadishu': 'SO',
+  'Africa/Monrovia': 'LR',
+  'Africa/Nairobi': 'KE',
+  'Africa/Ndjamena': 'TD',
+  'Africa/Niamey': 'NE',
+  'Africa/Nouakchott': 'MR',
+  'Africa/Ouagadougou': 'BF',
+  'Africa/Porto-Novo': 'BJ',
+  'Africa/Sao_Tome': 'ST',
+  'Africa/Tripoli': 'LY',
+  'Africa/Tunis': 'TN',
+  'Africa/Windhoek': 'NA',
+  'America/Argentina/Buenos_Aires': 'AR',
+  'America/Bogota': 'CO',
+  'America/Caracas': 'VE',
+  'America/Chicago': 'US',
+  'America/Denver': 'US',
+  'America/Guatemala': 'GT',
+  'America/Halifax': 'CA',
+  'America/La_Paz': 'BO',
+  'America/Lima': 'PE',
+  'America/Los_Angeles': 'US',
+  'America/Mexico_City': 'MX',
+  'America/Montevideo': 'UY',
+  'America/New_York': 'US',
+  'America/Phoenix': 'US',
+  'America/Santiago': 'CL',
+  'America/Sao_Paulo': 'BR',
+  'America/Toronto': 'CA',
+  'Asia/Bangkok': 'TH',
+  'Asia/Colombo': 'LK',
+  'Asia/Dubai': 'AE',
+  'Asia/Hong_Kong': 'HK',
+  'Asia/Jakarta': 'ID',
+  'Asia/Kolkata': 'IN',
+  'Asia/Manila': 'PH',
+  'Asia/Seoul': 'KR',
+  'Asia/Shanghai': 'CN',
+  'Asia/Singapore': 'SG',
+  'Asia/Taipei': 'TW',
+  'Asia/Tokyo': 'JP',
+  'Australia/Brisbane': 'AU',
+  'Australia/Melbourne': 'AU',
+  'Australia/Perth': 'AU',
+  'Australia/Sydney': 'AU',
+  'Europe/Amsterdam': 'NL',
+  'Europe/Berlin': 'DE',
+  'Europe/Brussels': 'BE',
+  'Europe/Bucharest': 'RO',
+  'Europe/Copenhagen': 'DK',
+  'Europe/Helsinki': 'FI',
+  'Europe/Lisbon': 'PT',
+  'Europe/London': 'GB',
+  'Europe/Madrid': 'ES',
+  'Europe/Oslo': 'NO',
+  'Europe/Paris': 'FR',
+  'Europe/Prague': 'CZ',
+  'Europe/Rome': 'IT',
+  'Europe/Stockholm': 'SE',
+  'Europe/Warsaw': 'PL',
+  'Pacific/Auckland': 'NZ',
+}

package/src/util/webchat.ts

@@ -3,7 +3,9 @@ import UAParser from 'ua-parser-js'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../constants'
-import { ThemeProps } from '../webchat/theme/types'
+import { timeZoneToCountryCode } from '../time-zone-to-country-code'
+import { ClientUser } from '../webchat/context/types'
+import { WebchatTheme } from '../webchat/theme/types'
 import { getProperty } from './objects'
 
 /**
@@ -12,7 +14,7 @@ import { getProperty } from './objects'
  * If property doesn't exist, returns the defaultValue.
  */
 export const _getThemeProperty =
-  (theme: ThemeProps) => (property: string, defaultValue?: any) => {
+  (theme: WebchatTheme) => (property: string, defaultValue?: any) => {
     for (const [key, value] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
       if (value === property) {
         const nestedProperty = getProperty(theme, value)
@@ -48,6 +50,43 @@ export const initSession = (
   return session
 }
 
+export function updateUserLocaleAndCountry(user: Partial<ClientUser>) {
+  user.locale = getLocale(user)
+  user.country = getCountry(user)
+  user.system_locale = getSystemLocale(user)
+
+  return user
+}
+
+function getLocale(user: Partial<ClientUser>) {
+  if (user.locale) {
+    return user.locale
+  }
+
+  return user.extra_data?.language
+    ? (user.extra_data?.language as string)
+    : navigator.language
+}
+
+function getCountry(user: Partial<ClientUser>) {
+  if (user.country) {
+    return user.country
+  }
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const userCountry = timeZoneToCountryCode[timeZone]
+
+  return user.extra_data?.country
+    ? (user.extra_data?.country as string)
+    : userCountry
+}
+
+function getSystemLocale(user: Partial<ClientUser>) {
+  if (user.system_locale) {
+    return user.system_locale
+  }
+  return getLocale(user)
+}
+
 export const shouldKeepSessionOnReload = ({
   initialDevSettings,
   devSettings,

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

@@ -9,9 +9,9 @@ export const ConditionalAnimation = props => {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    props.enableAnimations !== undefined ? props.enableAnimations : true
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
   )
+
   return (
     <ConditionalWrapper
       condition={animationsEnabled}

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import styled from 'styled-components'
 
-import { Button } from '../../components/button'
+import { Button } from '../../components/button/index'
 import { ROLES, WEBCHAT } from '../../constants'
 import { WebchatContext } from '../context'
 import { useComponentVisible } from '../hooks'
@@ -18,8 +18,7 @@ export const OpenedPersistentMenu = ({ onClick, options, borderRadius }) => {
   const { ref, isComponentVisible } = useComponentVisible(true, onClick)
   const { getThemeProperty } = useContext(WebchatContext)
   const CustomPersistentMenu = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customPersistentMenu
   )
   let closeLabel = 'Cancel'
   try {

package/src/webchat/context/index.tsx

@@ -1,10 +1,9 @@
 import { createContext } from 'react'
 
-import { WebchatContextProps } from './types'
-import { webchatInitialState } from './use-webchat'
+import { WebchatContextProps, WebchatState } from './types'
 
 export { WebchatState } from './types'
-export { useWebchat, webchatInitialState } from './use-webchat'
+export { useWebchat } from './use-webchat'
 
 export const WebchatContext = createContext<WebchatContextProps>({
   addMessage: () => {
@@ -43,7 +42,6 @@ export const WebchatContext = createContext<WebchatContextProps>({
   sendText: async () => {
     return
   },
-  theme: {}, // TODO: Remove this attribute and use allways webchatState.theme
   toggleCoverComponent: () => {
     return
   },
@@ -71,7 +69,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
   updateWebchatDevSettings: () => {
     return
   },
-  webchatState: webchatInitialState,
+  webchatState: {} as WebchatState,
   trackEvent: async () => {
     return
   },

package/src/webchat/context/types.ts

@@ -1,14 +1,9 @@
-import {
-  Input as CoreInput,
-  Session as CoreSession,
-  SessionUser as CoreSessionUser,
-} from '@botonic/core'
+import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 
 import { Reply, WebchatSettingsProps, Webview } from '../../components'
 import { CloseWebviewOptions } from '../../contexts'
 import { TrackEventFunction, WebchatMessage } from '../../index-types'
-import { WebchatStateTheme } from '../index-types'
-import { ThemeProps } from '../theme/types'
+import { WebchatTheme } from '../theme/types'
 
 export interface ErrorMessage {
   message?: string
@@ -20,8 +15,6 @@ export interface DevSettings {
 }
 
 export interface WebchatState {
-  width: number // TODO: move this inside webchatState.theme.style
-  height: number // TODO: move this inside webchatState.theme.style
   messagesJSON: any[]
   messagesComponents: any[]
   replies?: (typeof Reply)[]
@@ -32,8 +25,8 @@ export interface WebchatState {
   session: Partial<CoreSession>
   lastRoutePath?: string
   handoff: boolean
-  theme: WebchatStateTheme // TODO: type this as ThemeProps
-  themeUpdates: Partial<WebchatStateTheme> // TODO: type this as Partial<ThemeProps>
+  theme: WebchatTheme
+  themeUpdates: Partial<WebchatTheme>
   error: ErrorMessage
   online: boolean
   devSettings: DevSettings
@@ -51,6 +44,19 @@ export interface WebchatState {
 
 // ClientInput: type for sendInput and updateLatestInput function without message_id and bot_interaction_id because backend set this values
 export type ClientInput = Omit<CoreInput, 'message_id' | 'bot_interaction_id'>
+// ClientSession: type for session in frontend when webchat is deployed
+export type ClientSession = {
+  user: ClientUser
+}
+// ClientUser: type for user in frontend when webchat is deployed
+export type ClientUser = {
+  id: string
+  name: string
+  locale: string
+  country: string
+  system_locale?: string
+  extra_data?: Record<string, any>
+}
 
 export interface WebchatContextProps {
   addMessage: (message: WebchatMessage) => void
@@ -65,7 +71,6 @@ export interface WebchatContextProps {
   sendText: (text: string, payload?: string) => Promise<void>
   setIsInputFocused: (isInputFocused: boolean) => void
   setLastMessageVisible: (isLastMessageVisible: boolean) => void
-  theme: ThemeProps // TODO: Remove this attribute and use allways webchatState.theme
   toggleWebchat: (toggle: boolean) => void
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
@@ -73,7 +78,7 @@ export interface WebchatContextProps {
   updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: (typeof Reply)[]) => void
-  updateUser: (user: Partial<CoreSessionUser>) => void
+  updateUser: (user: ClientUser) => void
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   trackEvent?: TrackEventFunction
   webchatState: WebchatState

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

@@ -3,51 +3,41 @@ import { useReducer, useRef } from 'react'
 
 import { Reply } from '../../components'
 import { Webview } from '../../components/index-types'
-import { COLORS, WEBCHAT } from '../../constants'
 import { WebchatMessage } from '../../index-types'
-import { ThemeProps } from '../theme/types'
+import { defaultTheme } from '../theme/default-theme'
+import { WebchatTheme } from '../theme/types'
 import { WebchatAction } from './actions'
 import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
 import { webchatReducer } from './webchat-reducer'
 
-export const webchatInitialState: WebchatState = {
-  width: WEBCHAT.DEFAULTS.WIDTH,
-  height: WEBCHAT.DEFAULTS.HEIGHT,
-  messagesJSON: [],
-  messagesComponents: [],
-  replies: [],
-  latestInput: {},
-  typing: false,
-  webview: null,
-  webviewParams: null,
-  session: { user: undefined },
-  lastRoutePath: undefined,
-  handoff: false,
-  // TODO: type create a defaultTheme using ThemeProps, and put this in initialState
-  theme: {
-    headerTitle: WEBCHAT.DEFAULTS.TITLE,
-    brandColor: COLORS.BOTONIC_BLUE,
-    brandImage: WEBCHAT.DEFAULTS.LOGO,
-    triggerButtonImage: undefined,
-    textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,
-    style: {
-      fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,
-    },
-  },
-  themeUpdates: {},
-  error: {},
-  online: true,
-  devSettings: { keepSessionOnReload: false },
-  isWebchatOpen: false,
-  isEmojiPickerOpen: false,
-  isPersistentMenuOpen: false,
-  isCoverComponentOpen: false,
-  isCustomComponentRendered: false,
-  lastMessageUpdate: undefined,
-  currentAttachment: undefined,
-  numUnreadMessages: 0,
-  isLastMessageVisible: true,
-  isInputFocused: false,
+function getWebchatInitialState(initialTheme: WebchatTheme): WebchatState {
+  return {
+    replies: [],
+    messagesJSON: [],
+    messagesComponents: [],
+    latestInput: {},
+    typing: false,
+    webview: null,
+    webviewParams: null,
+    session: { user: undefined },
+    lastRoutePath: undefined,
+    handoff: false,
+    theme: initialTheme,
+    themeUpdates: {},
+    error: {},
+    online: true,
+    devSettings: { keepSessionOnReload: false },
+    isWebchatOpen: false,
+    isEmojiPickerOpen: false,
+    isPersistentMenuOpen: false,
+    isCoverComponentOpen: false,
+    isCustomComponentRendered: false,
+    lastMessageUpdate: undefined,
+    currentAttachment: undefined,
+    numUnreadMessages: 0,
+    isLastMessageVisible: true,
+    isInputFocused: false,
+  }
 }
 
 export interface UseWebchat {
@@ -73,7 +63,7 @@ export interface UseWebchat {
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: (typeof Reply)[]) => void
   updateSession: (session: Partial<Session>) => void
-  updateTheme: (theme: ThemeProps, themeUpdates?: ThemeProps) => void
+  updateTheme: (theme: WebchatTheme, themeUpdates?: WebchatTheme) => void
   updateTyping: (typing: boolean) => void
   updateWebview: (webview: Webview, params: Record<string, string>) => void
   removeReplies: () => void
@@ -87,7 +77,10 @@ export interface UseWebchat {
   inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
 }
 
-export function useWebchat(): UseWebchat {
+export function useWebchat(theme?: WebchatTheme): UseWebchat {
+  const initialTheme = theme || defaultTheme
+  const webchatInitialState = getWebchatInitialState(initialTheme)
+
   const [webchatState, webchatDispatch] = useReducer(
     webchatReducer,
     webchatInitialState
@@ -154,7 +147,7 @@ export function useWebchat(): UseWebchat {
       payload: handoff,
     })
 
-  const updateTheme = (theme: ThemeProps, themeUpdates?: ThemeProps) => {
+  const updateTheme = (theme: WebchatTheme, themeUpdates?: WebchatTheme) => {
     const payload =
       themeUpdates !== undefined ? { theme, themeUpdates } : { theme }
     webchatDispatch({

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 
-import { COLORS, ROLES, WEBCHAT } from '../../constants'
+import { ROLES, WEBCHAT } from '../../constants'
 import { Scale } from '../../shared/styles'
 import { resolveImage } from '../../util/environment'
 import { ConditionalWrapper } from '../../util/react'
@@ -18,36 +18,25 @@ export const DefaultHeader = () => {
   const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
 
   const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    true
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
   )
 
   const headerImage = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.headerImage,
-    getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
-      WEBCHAT.DEFAULTS.LOGO
-    )
+    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)
   )
 
-  const headerTitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
-    WEBCHAT.DEFAULTS.TITLE
-  )
+  const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle)
 
   const headerSubtitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
-    ''
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle
   )
 
   const handleCloseWebchat = () => {
     toggleWebchat(false)
   }
 
-  const color = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-    COLORS.BOTONIC_BLUE
-  )
+  const color = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)
 
   return (
     <HeaderContainer

package/src/webchat/header/styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import { COLORS, WEBCHAT } from '../../constants'
+import { COLORS } from '../../constants'
 
 export const HeaderContainer = styled.div`
   display: flex;
@@ -9,9 +9,13 @@ export const HeaderContainer = styled.div`
     ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
     ${props => props.color} 100%
   );
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  border-radius: ${props => props.theme.header?.style?.borderRadius};
   z-index: 2;
   height: inherit;
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    border-radius: ${props => props.theme.header?.mobileStyle?.borderRadius};
+  }
 `
 
 export const ImageContainer = styled.div`

package/src/webchat/index-types.ts

@@ -1,17 +1,5 @@
 import { WebchatArgs } from '../index-types'
 
-export interface WebchatStateTheme {
-  headerTitle: string
-  brandColor: string
-  brandImage: string
-  triggerButtonImage: undefined
-  textPlaceholder: string
-  style: {
-    fontFamily: string
-    borderRadius?: string
-  }
-}
-
 export interface WebchatDevProps extends WebchatArgs {
   initialDevSettings?: {
     keepSessionOnReload?: boolean

package/src/webchat/input-panel/attachment.tsx

@@ -1,38 +1,27 @@
 import React, { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.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 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,
-    undefined
-  )
+  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()

package/src/webchat/input-panel/emoji-picker.tsx

@@ -1,34 +1,24 @@
 import React, { useContext } from 'react'
 
 import LogoEmoji from '../../assets/emojiButton.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 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()

package/src/webchat/input-panel/index.tsx

@@ -15,9 +15,6 @@ 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
@@ -25,9 +22,6 @@ interface InputPanelProps {
 }
 
 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(',')}
       />

package/src/webchat/input-panel/persistent-menu.tsx

@@ -1,31 +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,
-    undefined
-  )
+  const CustomMenuButton = webchatState.theme.userInput?.menuButton?.custom
 
   return (
     <>