@botonic/react 0.31.0-alpha.5 → 0.31.0-alpha.6

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

@@ -2,9 +2,10 @@ import { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
 import { Reply } from '../../components'
-import { ThemeProps, Webview } from '../../components/index-types'
+import { Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
 import { WebchatMessage } from '../../index-types'
+import { ThemeProps } from '../theme/types'
 import { WebchatAction } from './actions'
 import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
 import { webchatReducer } from './webchat-reducer'
@@ -22,6 +23,7 @@ export const webchatInitialState: WebchatState = {
   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,

package/src/webchat/index-types.ts

@@ -18,7 +18,3 @@ export interface WebchatDevProps extends WebchatArgs {
     showSessionView?: boolean
   }
 }
-
-export interface CoverComponentProps {
-  closeComponent: () => void
-}

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

@@ -1,16 +1,16 @@
 import React, { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { PersistentMenuTheme } from '../../components/index-types'
 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: PersistentMenuTheme
+  persistentMenu: PersistentMenuOptionsTheme
   textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>

package/src/webchat/theme/types.ts

@@ -0,0 +1,119 @@
+import {
+  BlockInputOption,
+  ButtonProps,
+  CustomMessageType,
+} from '../../components/index-types'
+
+interface ImagePreviewerProps {
+  src: string
+  isPreviewerOpened: boolean
+  closePreviewer: () => void
+}
+export interface CoverComponentProps {
+  closeComponent: () => void
+}
+
+export interface CoverComponentOptions {
+  component: React.ComponentType<CoverComponentProps>
+  props?: any
+}
+
+export type PersistentMenuCloseOption = { closeLabel: string }
+export type PersistentMenuOption = { label: string } & ButtonProps
+
+export type PersistentMenuOptionsTheme = (
+  | PersistentMenuCloseOption
+  | PersistentMenuOption
+)[]
+
+export interface PersistentMenuOptionsProps {
+  onClick: () => void
+  options: any
+}
+
+export interface BlobProps {
+  blobTick?: boolean
+  blobTickStyle?: any
+  blobWidth?: string
+  imageStyle?: any
+}
+
+export interface ThemeProps {
+  style?: any
+  coverComponent?: CoverComponentOptions
+  mobileBreakpoint?: number
+  mobileStyle?: any
+  webview?: { style?: any; header?: { style?: any } }
+  animations?: { enable?: boolean }
+  intro?: { style?: any; image?: string; custom?: React.ComponentType }
+  brand?: { color?: string; image?: string }
+  header?: {
+    title?: string
+    subtitle?: string
+    image?: string
+    style?: any
+    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
+    customTypes?: CustomMessageType[]
+    style?: any
+    timestamps?: {
+      withImage?: boolean
+      format: () => string
+      style?: any
+      enable?: boolean
+    }
+  }
+  button?: {
+    autodisable?: boolean
+    disabledstyle?: any
+    hoverBackground?: string
+    hoverTextColor?: string
+    messageType?: 'text' | 'payload'
+    urlIcon?: { image?: string; enable?: boolean }
+    style?: any
+    custom?: React.ComponentType
+  }
+  replies?: {
+    align?: 'left' | 'center' | 'right'
+    wrap?: 'wrap' | 'nowrap'
+  }
+  carousel?: {
+    arrow?: {
+      left: { custom?: React.ComponentType }
+      right: { custom?: React.ComponentType }
+    }
+    enableArrows?: boolean
+  }
+  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 }
+    triggerButton?: { enable?: boolean }
+  }
+  scrollButton?: { enable?: boolean; custom?: React.ComponentType }
+  markdownStyle?: string // string template with css styles
+  userInput?: {
+    attachments?: { enable?: boolean; custom?: React.ComponentType }
+    blockInputs?: BlockInputOption[]
+    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 }
+    enable?: boolean
+    style?: any
+  }
+  imagePreviewer?: React.ComponentType<ImagePreviewerProps>
+}

package/src/webchat/webchat.tsx

@@ -19,13 +19,13 @@ import { v7 as uuidv7 } from 'uuid'
 import {
   Audio,
   Document,
+  Handoff,
   Image,
+  normalizeWebchatSettings,
   Text,
   Video,
   WebchatSettingsProps,
 } from '../components'
-import { Handoff } from '../components/handoff'
-import { normalizeWebchatSettings } from '../components/webchat-settings'
 import { COLORS, MAX_ALLOWED_SIZE_MB, ROLES, WEBCHAT } from '../constants'
 import { CloseWebviewOptions, WebviewRequestContext } from '../contexts'
 import { SENDERS, WebchatProps, WebchatRef } from '../index-types'

package/src/webchat-app.tsx

@@ -3,13 +3,7 @@ import merge from 'lodash.merge'
 import React, { createRef } from 'react'
 import { createRoot, Root } from 'react-dom/client'
 
-import {
-  BlockInputOption,
-  CoverComponentOptions,
-  PersistentMenuTheme,
-  ThemeProps,
-  WebchatSettingsProps,
-} from './components/index-types'
+import { BlockInputOption, WebchatSettingsProps } from './components'
 import { WEBCHAT } from './constants'
 import { CloseWebviewOptions } from './contexts'
 import {
@@ -26,11 +20,16 @@ import {
 } from './index-types'
 import { msgToBotonic } from './msg-to-botonic'
 import { isShadowDOMSupported, onDOMLoaded } from './util/dom'
+import {
+  CoverComponentOptions,
+  PersistentMenuOptionsTheme,
+  ThemeProps,
+} from './webchat/theme/types'
 import { Webchat } from './webchat/webchat'
 
 export class WebchatApp {
   public theme?: ThemeProps
-  public persistentMenu?: PersistentMenuTheme
+  public persistentMenu?: PersistentMenuOptionsTheme
   public coverComponent?: CoverComponentOptions
   public blockInputs?: BlockInputOption[]
   public enableEmojiPicker?: boolean