@botonic/react 0.34.1 → 0.35.0-alpha.0

package/src/webchat/input-panel/send-button.tsx

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

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

@@ -5,12 +5,10 @@ import { WEBCHAT } from '../../constants'
 import { Typing } from '../../index-types'
 import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
-import { PersistentMenuOptionsTheme } from '../theme/types'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
-  persistentMenu: PersistentMenuOptionsTheme
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>
@@ -18,23 +16,22 @@ interface TextareaProps {
 
 export const Textarea = ({
   host,
-  persistentMenu,
   textareaRef,
   sendChatEvent,
   sendTextAreaText,
 }: TextareaProps) => {
-  const { getThemeProperty, webchatState, setIsInputFocused } =
-    useContext(WebchatContext)
+  const { webchatState, setIsInputFocused } = useContext(WebchatContext)
 
   useDeviceAdapter(host, webchatState.isWebchatOpen)
 
   let isTyping = false
   let typingTimeout
 
-  const persistentMenuOptions = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.persistentMenu,
-    persistentMenu
-  )
+  const persistentMenuOptions = webchatState.theme.userInput?.persistentMenu
+
+  const placeholder = webchatState.theme.userInput?.box?.placeholder
+
+  const userInputBoxStyle = webchatState.theme.userInput?.box?.style
 
   const onKeyDown = event => {
     if (event.keyCode === 13 && event.shiftKey === false) {
@@ -92,10 +89,7 @@ export const Textarea = ({
         maxRows={4}
         wrap='soft'
         maxLength={1000}
-        placeholder={getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder,
-          WEBCHAT.DEFAULTS.PLACEHOLDER
-        )}
+        placeholder={placeholder}
         autoFocus={false}
         onKeyDown={e => onKeyDown(e)}
         onKeyUp={onKeyUp}
@@ -111,7 +105,7 @@ export const Textarea = ({
           padding: 10,
           paddingLeft: persistentMenuOptions ? 0 : 10,
           fontFamily: 'inherit',
-          ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle),
+          ...userInputBoxStyle,
         }}
       />
     </TextAreaContainer>

package/src/webchat/message-list/intro-message.tsx

@@ -11,8 +11,7 @@ export const IntroMessage = () => {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    true
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
   )
   const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro)
   const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage)

package/src/webchat/message-list/use-notifications.ts

@@ -7,13 +7,11 @@ export function useNotifications() {
   const { getThemeProperty } = useContext(WebchatContext)
 
   const CustomUnreadMessagesBanner = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom
   )
 
   const notificationsBannerEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled
   )
 
   const notificationsEnabled = getThemeProperty(
@@ -22,13 +20,11 @@ export function useNotifications() {
   )
 
   const bannerText = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText,
-    'unread messages'
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText
   )
 
   const CustomScrollButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom
   )
 
   const scrollButtonEnabled = getThemeProperty(

package/src/webchat/styles.ts

@@ -1,26 +1,32 @@
 import styled from 'styled-components'
 
-import { COLORS, WEBCHAT } from '../constants'
+import { COLORS } from '../constants'
 
-interface StyledWebchatProps {
-  width: number
-  height: number
-}
-
-export const StyledWebchat = styled.div<StyledWebchatProps>`
+export const StyledWebchat = styled.div`
   position: fixed;
-  right: 20px;
-  bottom: 20px;
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
+  right: ${props => props.theme.style.right};
+  bottom: ${props => props.theme.style.bottom};
+  width: ${props => props.theme.style.width};
+  height: ${props => props.theme.style.height};
   margin: auto;
-  background-color: ${COLORS.SOLID_WHITE};
+  background-color: ${props => props.theme.style.backgroundColor};
   border-radius: 10px;
-  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
+  box-shadow: ${props => props.theme.style.boxShadow};
+  font-family: ${props => props.theme.style.fontFamily};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
+
+  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {
+    position: ${props => props.theme.mobileStyle.position};
+    right: ${props => props.theme.mobileStyle.right};
+    bottom: ${props => props.theme.mobileStyle.bottom};
+    width: ${props => props.theme.mobileStyle.width};
+    height: ${props => props.theme.mobileStyle.height};
+    border-radius: ${props => props.theme.mobileStyle.borderRadius};
+    font-size: ${props => props.theme.mobileStyle.fontSize};
+  }
 `
 
 export const ErrorMessageContainer = styled.div`
@@ -43,7 +49,7 @@ export const ErrorMessage = styled.div`
   border-radius: 5px;
   align-items: center;
   justify-content: center;
-  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
+  font-family: ${props => props.theme.style.fontFamily};
 `
 
 export const DarkBackgroundMenu = styled.div`

package/src/webchat/theme/default-theme.ts

@@ -0,0 +1,102 @@
+import { COLORS, WEBCHAT } from '../../constants'
+import { WebchatTheme } from './types'
+
+export const defaultTheme: WebchatTheme = {
+  style: {
+    width: '300px',
+    height: '450px',
+    borderRadius: '10px',
+    fontFamily: "'Noto Sans JP', sans-serif",
+    fontSize: '16px',
+    position: 'fixed',
+    right: '20px',
+    bottom: '20px',
+    backgroundColor: COLORS.SOLID_WHITE,
+    boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`,
+  },
+  mobileBreakpoint: 768,
+  mobileStyle: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '0px',
+    fontSize: '16px',
+    position: 'absolute',
+    right: '0px',
+    bottom: '0px',
+  },
+  header: {
+    title: 'Botonic',
+    subtitle: '',
+    image: WEBCHAT.DEFAULTS.LOGO,
+    style: {
+      borderRadius: '10px 10px 0px 0px',
+    },
+    mobileStyle: {
+      borderRadius: '0px',
+    },
+  },
+  brand: {
+    color: COLORS.BOTONIC_BLUE,
+    image: WEBCHAT.DEFAULTS.LOGO,
+  },
+  button: {
+    autodisable: false,
+    disabledstyle: {
+      opacity: 0.5,
+      cursor: 'auto',
+      pointerEvents: 'none',
+    },
+    messageType: 'text',
+    hoverBackground: COLORS.CONCRETE_WHITE,
+    hoverTextColor: COLORS.SOLID_BLACK,
+    style: {
+      width: '100%',
+      maxHeight: '80px',
+      height: 'auto',
+      fontFamily: 'inherit',
+      fontSize: '14px',
+      fontWeight: 'normal',
+      background: COLORS.SOLID_WHITE,
+      color: COLORS.SOLID_BLACK,
+      outline: '0',
+      border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,
+      borderRadius: '0px',
+      padding: '12px 32px',
+      overflow: 'hidden',
+    },
+    urlIcon: {
+      enable: false,
+      image: WEBCHAT.DEFAULTS.URL_ICON,
+    },
+  },
+  message: {
+    user: {
+      blobTick: true,
+    },
+    bot: {
+      blobTick: true,
+    },
+  },
+  triggerButton: { image: WEBCHAT.DEFAULTS.LOGO },
+  userInput: {
+    attachments: { enable: false },
+    box: {
+      placeholder: 'Ask me something...',
+    },
+    emojiPicker: { enable: false },
+    sendButton: { enable: true },
+    enable: true,
+  },
+  carousel: {
+    enableArrows: true,
+  },
+  animations: { enable: true },
+  notifications: {
+    enable: false,
+    banner: {
+      enable: false,
+      text: 'unread messages',
+    },
+    triggerButton: { enable: false },
+  },
+}

package/src/webchat/theme/theme.d.ts

@@ -0,0 +1,8 @@
+import 'styled-components'
+
+import { WebchatTheme } from './types'
+
+// With this declaration, we can use the theme prop in styled components with TypeScript defined in WebchatTheme
+declare module 'styled-components' {
+  export interface DefaultTheme extends WebchatTheme {}
+}

package/src/webchat/theme/types.ts

@@ -4,7 +4,7 @@ import {
   CustomMessageType,
 } from '../../components/index-types'
 
-interface ImagePreviewerProps {
+export interface ImagePreviewerProps {
   src: string
   isPreviewerOpened: boolean
   closePreviewer: () => void
@@ -38,29 +38,82 @@ export interface BlobProps {
   imageStyle?: any
 }
 
-export interface ThemeProps {
-  style?: any
+export interface CustomButtonProps {
+  children: React.ReactNode
+  onClick?: () => void
+}
+
+interface ButtonStyle {
+  width?: string
+  maxHeight?: string
+  height?: string
+  fontFamily?: string
+  fontSize?: string
+  fontWeight?: string
+  background?: string
+  color?: string
+  outline?: string
+  border?: string
+  borderRadius?: string
+  padding?: string
+  overflow?: string
+}
+
+export interface WebchatTheme {
+  style: {
+    width?: string
+    height?: string
+    borderRadius?: string
+    fontFamily?: string
+    fontSize?: string
+    position?: 'fixed' | 'absolute'
+    right?: string
+    bottom?: string
+    backgroundColor?: string
+    boxShadow?: string
+  }
+  mobileBreakpoint: number
+  mobileStyle: {
+    width?: string
+    height?: string
+    borderRadius?: string
+    fontSize?: string
+    position?: 'fixed' | 'absolute'
+    right?: string
+    bottom?: string
+  }
+
   coverComponent?: CoverComponentOptions
-  mobileBreakpoint?: number
-  mobileStyle?: any
-  webview?: { style?: any; header?: { style?: any } }
+  webview?: {
+    style?: any
+    header?: {
+      style?: any
+    }
+  }
   animations?: { enable?: boolean }
-  intro?: { style?: any; image?: string; custom?: React.ComponentType }
+  intro?: {
+    style?: any
+    image?: string
+    custom?: React.ComponentType
+  }
   brand?: { color?: string; image?: string }
   header?: {
     title?: string
     subtitle?: string
     image?: string
-    style?: any
+    style?: {
+      borderRadius?: string
+    }
+    mobileStyle?: {
+      borderRadius?: string
+    }
     custom?: React.ComponentType
   }
-  // TODO: Review if this is needed hear, or only in message.customTypes? use the same type in both places
-  customMessageTypes?: CustomMessageType[]
   message?: {
     bot?: BlobProps & { image?: string; style?: any }
     agent?: { image?: string }
     user?: BlobProps & { style?: any }
-    // TODO: Review type used in cutomTypes should be a component exported by default with customMessage function
+    // TODO: Review type used in customTypes should be a component exported by default with customMessage function
     customTypes?: CustomMessageType[]
     style?: any
     timestamps?: {
@@ -72,13 +125,21 @@ export interface ThemeProps {
   }
   button?: {
     autodisable?: boolean
-    disabledstyle?: any
+    disabledstyle?: {
+      opacity?: number
+      cursor?: string
+      pointerEvents?: string
+      backgroundColor?: string
+    }
     hoverBackground?: string
     hoverTextColor?: string
-    messageType?: 'text' | 'payload'
-    urlIcon?: { image?: string; enable?: boolean }
-    style?: any
-    custom?: React.ComponentType
+    messageType?: 'text' | 'postback'
+    urlIcon?: {
+      image?: string
+      enable?: boolean
+    }
+    style?: ButtonStyle
+    custom?: React.ComponentType<CustomButtonProps>
   }
   replies?: {
     align?: 'left' | 'center' | 'right'
@@ -91,27 +152,53 @@ export interface ThemeProps {
     }
     enableArrows?: boolean
   }
-  reply?: { style?: any; custom?: React.ComponentType }
-  triggerButton?: { image?: string; style?: any; custom?: React.ComponentType }
+  reply?: {
+    style?: any
+    custom?: React.ComponentType
+  }
+  triggerButton: {
+    image?: string
+    style?: any
+    custom?: React.ComponentType
+  }
   notifications?: {
     enable?: boolean
-    banner?: { custom?: React.ComponentType; enable?: boolean; text?: string }
+    banner?: {
+      custom?: React.ComponentType
+      enable?: boolean
+      text?: string
+    }
     triggerButton?: { enable?: boolean }
   }
-  scrollButton?: { enable?: boolean; custom?: React.ComponentType }
+  scrollButton?: {
+    enable?: boolean
+    custom?: React.ComponentType
+  }
   markdownStyle?: string // string template with css styles
   userInput?: {
-    attachments?: { enable?: boolean; custom?: React.ComponentType }
+    attachments?: {
+      enable?: boolean
+      custom?: React.ComponentType
+    }
     blockInputs?: BlockInputOption[]
-    box?: { placeholder: string; style?: any }
-    emojiPicker?: { enable?: boolean; custom?: React.ComponentType }
+    box?: {
+      placeholder: string
+      style?: any
+    }
+    emojiPicker?: {
+      enable?: boolean
+      custom?: React.ComponentType
+    }
     menu?: {
       darkBackground?: boolean
       custom?: React.ComponentType<PersistentMenuOptionsProps>
     }
     menuButton?: { custom?: React.ComponentType }
     persistentMenu?: PersistentMenuOptionsTheme
-    sendButton?: { enable?: boolean; custom?: React.ComponentType }
+    sendButton?: {
+      enable?: boolean
+      custom?: React.ComponentType
+    }
     enable?: boolean
     style?: any
   }

package/src/webchat/trigger-button/index.tsx

@@ -20,7 +20,7 @@ export const TriggerButton = (): JSX.Element => {
     )
 
     if (!image) {
-      webchatState.theme.triggerButtonImage = WEBCHAT.DEFAULTS.LOGO
+      webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO
       return null
     }
     return image
@@ -33,8 +33,7 @@ export const TriggerButton = (): JSX.Element => {
   )
 
   const notificationsTriggerButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled,
-    false
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled
   )
 
   const notificationsEnabled = getThemeProperty(
@@ -43,8 +42,7 @@ export const TriggerButton = (): JSX.Element => {
   )
 
   const CustomTriggerButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customTrigger,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customTrigger
   )
 
   const handleClick = (event: any) => {