@botonic/react 0.34.1 → 0.35.0-alpha.1

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.tsx

@@ -88,8 +88,7 @@ export const Carousel = (props: CarouselProps) => {
   )
   // 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 => {

package/src/components/element.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
 import { renderComponent } from '../util/react'
-import { Button } from './button'
+import { Button } from './button/index'
 
 const ElementContainer = styled.div`
   display: flex;

package/src/components/image.tsx

@@ -37,9 +37,9 @@ export const Image = (props: ImageProps) => {
 
   const { getThemeProperty } = useContext(WebchatContext)
   const ImagePreviewer = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,
-    null
+    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer
   )
+
   if (isBrowser()) {
     content = (
       <>
@@ -59,6 +59,7 @@ export const Image = (props: ImageProps) => {
       </>
     )
   }
+
   return (
     <Message
       role={ROLES.IMAGE_MESSAGE}

package/src/components/index-types.ts

@@ -51,7 +51,7 @@ export interface ButtonProps {
   onClick?: () => void
   autodisable?: boolean
   disabled?: boolean
-  disabledstyle?: boolean
+  disabledstyle?: Record<string, string> | string
   children: string
   setDisabled?: (disabled: boolean) => void
   parentId?: string

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export { Audio } from './audio'
-export { Button } from './button'
+export { Button } from './button/index'
 export { Carousel } from './carousel'
 export { customMessage } from './custom-message'
 export { Document } from './document'

package/src/components/message/index.jsx

@@ -9,7 +9,7 @@ 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 { Button } from '../button/index'
 import { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'
 import { Reply } from '../reply'
@@ -49,7 +49,7 @@ export const Message = props => {
   const markdown = props.markdown
   const { webchatState, addMessage, updateReplies, getThemeProperty } =
     useContext(WebchatContext)
-  const [state, setState] = useState({
+  const [state] = useState({
     id: props.id || uuidv7(),
   })
 
@@ -139,10 +139,7 @@ export const Message = props => {
     }
   }, [webchatState.messagesJSON])
 
-  const brandColor = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-    COLORS.BOTONIC_BLUE
-  )
+  const brandColor = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor)
 
   const getBgColor = () => {
     if (!blob) return COLORS.TRANSPARENT
@@ -165,7 +162,7 @@ export const Message = props => {
 
   const userOrBotMessage = isSentByUser ? SENDERS.user : SENDERS.bot
   const hasBlobTick = () =>
-    getThemeProperty(`message.${userOrBotMessage}.blobTick`, true)
+    getThemeProperty(`message.${userOrBotMessage}.blobTick`)
 
   const renderBrowser = () => {
     const messageJSON = webchatState.messagesJSON.find(m => m.id === state.id)
@@ -205,8 +202,7 @@ export const Message = props => {
     }
 
     const animationsEnabled = getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-      true
+      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations
     )
 
     const resolveCustomTypeName = () =>

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

@@ -23,10 +23,7 @@ export const MessageImage = ({ imagestyle, sentBy }: MessageImageProps) => {
 
   const BotMessageImage = getThemeProperty(
     WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
-    getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
-      WEBCHAT.DEFAULTS.LOGO
-    )
+    getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage)
   )
 
   const AgentMessageImage = getThemeProperty(

package/src/components/message/timestamps.tsx

@@ -62,8 +62,7 @@ export const MessageTimestamp = ({
   const isSentByAgent = sentBy === SENDERS.agent
 
   const BotMessageImage = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.botMessageImage
   )
 
   const AgentMessageImage = getThemeProperty(

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

@@ -3,7 +3,7 @@ import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
 import { truncateText } from '../../util'
-import { Button } from '../button'
+import { Button } from '../button/index'
 import { MultichannelContext } from './multichannel-context'
 import { WHATSAPP_MAX_BUTTON_CHARS } from './whatsapp/constants'
 

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

@@ -2,7 +2,7 @@ import { isDev, isFacebook, isWebchat, isWhatsapp } from '@botonic/core'
 import React, { useContext } from 'react'
 
 import { RequestContext } from '../../contexts'
-import { Button } from '../button'
+import { Button } from '../button/index'
 import { Carousel } from '../carousel'
 import { Image } from '../image'
 import { Text } from '../text'

package/src/components/multichannel/multichannel-utils.js

@@ -1,4 +1,4 @@
-import { Button } from '../button'
+import { Button } from '../button/index'
 import { Carousel } from '../carousel'
 import { Pic } from '../pic'
 import { Reply } from '../reply'

package/src/components/reply.tsx

@@ -11,6 +11,8 @@ const StyledButton = styled.button`
   padding: 4px 8px;
   font-family: inherit;
   border-radius: 8px;
+  border: 1px solid ${props => props.theme.brand?.color};
+  color: ${props => props.theme.brand?.color};
   cursor: pointer;
   outline: 0;
 `
@@ -41,14 +43,6 @@ export const Reply = (props: ReplyProps) => {
     return (
       <StyledButton
         style={{
-          border: `1px solid ${getThemeProperty(
-            WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-            COLORS.BOTONIC_BLUE
-          )}`,
-          color: getThemeProperty(
-            WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-            COLORS.BOTONIC_BLUE
-          ),
           ...replyStyle,
         }}
         onClick={e => handleClick(e)}

package/src/components/webchat-settings.tsx

@@ -4,7 +4,10 @@ import React, { useContext } from 'react'
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
 import { WebchatContext } from '../webchat/context'
-import { PersistentMenuOptionsTheme, ThemeProps } from '../webchat/theme/types'
+import {
+  PersistentMenuOptionsTheme,
+  WebchatTheme,
+} from '../webchat/theme/types'
 import { BlockInputOption } from './index-types'
 
 export interface WebchatSettingsProps {
@@ -14,8 +17,13 @@ export interface WebchatSettingsProps {
   enableEmojiPicker?: boolean
   enableUserInput?: boolean
   persistentMenu?: PersistentMenuOptionsTheme
-  theme?: ThemeProps
-  user?: { extra_data?: any }
+  theme?: Partial<WebchatTheme>
+  user?: {
+    extra_data?: any
+    country?: string
+    locale?: string
+    system_locale?: string
+  }
 }
 
 export const WebchatSettings = ({

package/src/constants.js

@@ -33,25 +33,13 @@ export const COLORS = {
 
 export const WEBCHAT = {
   DEFAULTS: {
-    WIDTH: 300,
-    HEIGHT: 450,
-    TITLE: 'Botonic',
     LOGO: BotonicLogo,
     URL_ICON: UrlIcon,
-    PLACEHOLDER: 'Ask me something...',
-    FONT_FAMILY: "'Noto Sans JP', sans-serif",
-    BORDER_RADIUS_TOP_CORNERS: '6px 6px 0px 0px',
     ELEMENT_WIDTH: 222,
     ELEMENT_MARGIN_RIGHT: 6,
     STORAGE_KEY: 'botonicState',
     HOST_ID: 'root',
     ID: 'botonic-webchat',
-    BUTTON_AUTO_DISABLE: false,
-    BUTTON_DISABLED_STYLE: {
-      opacity: 0.5,
-      cursor: 'auto',
-      pointerEvents: 'none',
-    },
   },
   CUSTOM_PROPERTIES: {
     // General

package/src/contexts.tsx

@@ -3,19 +3,20 @@ import { createContext } from 'react'
 
 import { ActionRequest } from './index-types'
 
-export const RequestContext = createContext<
-  Partial<ActionRequest> & {
-    getString: () => string
-    setLocale: () => void
-  }
->({
-  getString: () => '',
-  setLocale: () => undefined,
-  session: {} as CoreSession,
+export const RequestContext = createContext<ActionRequest>({
+  getUserCountry: () => '',
+  getUserLocale: () => '',
+  getSystemLocale: () => '',
+  setUserCountry: () => undefined,
+  setUserLocale: () => undefined,
+  setSystemLocale: () => undefined,
   params: {},
-  input: {} as CoreInput,
   defaultDelay: 0,
   defaultTyping: 0,
+  input: {} as CoreInput,
+  session: {} as CoreSession,
+  lastRoutePath: '',
+  plugins: {},
 })
 
 export interface CloseWebviewOptions {
@@ -26,12 +27,10 @@ export interface CloseWebviewOptions {
 
 export const WebviewRequestContext = createContext<{
   closeWebview: (options?: CloseWebviewOptions) => Promise<void>
-  getString?: (stringId: string) => string
   params: Record<string, any>
   session: Partial<CoreSession>
 }>({
   closeWebview: async () => undefined,
-  getString: undefined,
   params: {} as Record<string, any>,
   session: {} as Partial<CoreSession>,
 })

package/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,17 +82,8 @@ 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)}
-        setLocale={(locale, session) => this.bot.setLocale(locale, session)}
         onInit={(...args) => this.onInitWebchat(...args)}
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}

package/src/index-types.ts

@@ -1,8 +1,8 @@
 import {
+  BotContext,
   BotRequest as CoreBotRequest,
   Input as CoreInput,
   InputType as CoreInputType,
-  Plugin as CorePlugin,
   Route as CoreRoute,
   Routes as CoreRoutes,
   ServerConfig,
@@ -22,7 +22,7 @@ import { UseWebchat } from './webchat/context/use-webchat'
 import {
   CoverComponentOptions,
   PersistentMenuOptionsTheme,
-  ThemeProps,
+  WebchatTheme,
 } from './webchat/theme/types'
 import { WebchatApp } from './webchat-app'
 
@@ -38,21 +38,9 @@ export interface Route extends CoreRoute {
 }
 export type Routes = CoreRoutes<Route>
 
-// Parameters of the actions' botonicInit method
-export interface ActionRequest {
-  defaultDelay: number
-  defaultTyping: number
-  input: CoreInput
-  lastRoutePath: string
-  params: { [key: string]: string }
-  plugins: { [id: string]: CorePlugin }
-  session: CoreSession
-}
-
-export interface RequestContextInterface extends ActionRequest {
-  getString: (stringId: string) => string
-  setLocale: (locale: string) => string
-}
+// Parameters of the actions in botonicInit method
+// the ActionRequest is provided by the context of the core-bot
+export type ActionRequest = BotContext
 
 export interface WebchatRef {
   addBotResponse: ({
@@ -88,7 +76,7 @@ interface AddBotResponseArgs {
 }
 
 export interface WebchatArgs {
-  theme?: ThemeProps
+  theme?: Partial<WebchatTheme>
   persistentMenu?: PersistentMenuOptionsTheme
   coverComponent?: CoverComponentOptions
   blockInputs?: BlockInputOption[]
@@ -120,14 +108,7 @@ export interface WebchatProps {
   onStateChange: (args: OnStateChangeArgs) => void
 
   shadowDOM?: any
-  theme?: ThemeProps
-  persistentMenu?: PersistentMenuOptionsTheme
-  coverComponent?: CoverComponentOptions
-  blockInputs?: BlockInputOption[]
-  enableEmojiPicker?: boolean
-  enableAttachments?: boolean
-  enableUserInput?: boolean
-  enableAnimations?: boolean
+  theme?: WebchatTheme
   storage?: Storage | null
   storageKey?: string | (() => string)
   defaultDelay?: number
@@ -215,3 +196,4 @@ interface UpdateMessageInfoEvent {
 }
 
 export { CaseEventQueuePositionChangedInput } from '@botonic/core'
+export { WebchatTheme }

package/src/msg-to-botonic.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Audio } from './components/audio'
-import { Button } from './components/button'
+import { Button } from './components/button/index'
 import { ButtonsDisabler } from './components/buttons-disabler'
 import { Carousel } from './components/carousel'
 import { Document } from './components/document'

package/src/react-bot.tsx

@@ -0,0 +1,51 @@
+import { CoreBot } from '@botonic/core'
+import React from 'react'
+
+import { Text } from './components/text'
+import { RequestContext } from './contexts'
+import { ActionRequest } from './index-types'
+
+type ActionComponentType<P = any> = React.ComponentType<P> & {
+  botonicInit?: (request: ActionRequest) => Promise<P>
+  contextType?: React.Context<typeof RequestContext>
+  render: (props: P) => JSX.Element
+}
+interface RenderReactActionsArgs {
+  request: ActionRequest
+  actions: ActionComponentType[]
+}
+
+export class ReactBot extends CoreBot {
+  constructor(options: any) {
+    super({
+      defaultRoutes: [
+        {
+          path: '404',
+          action: () => <Text>I don't understand you</Text>, // eslint-disable-line
+        },
+      ],
+      renderer: (args: RenderReactActionsArgs) => this.renderReactActions(args),
+      ...options,
+    })
+  }
+
+  async renderReactActions({ request, actions }: RenderReactActionsArgs) {
+    const renderedActions: JSX.Element[] = []
+
+    for (const Action of actions) {
+      if (Action) {
+        const props = Action.botonicInit
+          ? await Action.botonicInit(request)
+          : {}
+        const renderedAction: JSX.Element = (
+          <RequestContext.Provider value={request}>
+            <Action {...props} />
+          </RequestContext.Provider>
+        )
+        renderedActions.push(renderedAction)
+      }
+    }
+
+    return renderedActions
+  }
+}