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

package/src/components/{image.jsx → image.tsx}

@@ -3,11 +3,16 @@ import React, { useContext, useState } from 'react'
 import styled from 'styled-components'
 
 import { ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { staticAsset } from '../util/environment'
+import { WebchatContext } from '../webchat/context'
+import { ImageProps } from './index-types'
 import { Message } from './message'
 
-const StyledImage = styled.img`
+interface StyledImageProps {
+  hasPreviewer: boolean
+}
+
+const StyledImage = styled.img<StyledImageProps>`
   border-radius: 8px;
   max-width: 150px;
   max-height: 150px;
@@ -15,14 +20,15 @@ const StyledImage = styled.img`
   cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};
 `
 
-const serialize = imageProps => {
+const serialize = (imageProps: { src: string }) => {
   return { image: imageProps.src }
 }
 
-export const Image = props => {
+export const Image = (props: ImageProps) => {
   props = props.input?.data
     ? { ...props, src: props.input.data }
     : { ...props, src: staticAsset(props.src) }
+
   let content = props.children
 
   const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)

package/src/components/index-types.ts

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { SENDERS } from '../index-types'
-import { CoverComponentProps } from '../webchat/index-types'
 
 export type MessageType =
   | 'audio'
@@ -16,7 +15,7 @@ export type MessageType =
 
 export interface MessageProps {
   blob?: boolean
-  children: React.ReactNode
+  children?: React.ReactNode
   delay?: number
   enabletimestamps?: boolean
   sentBy?: SENDERS
@@ -64,7 +63,26 @@ export interface PicProps {
   src: string
 }
 
-export type ImageProps = PicProps
+export interface ImageProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface VideoProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface AudioProps extends MessageProps {
+  src: string
+  input?: { data: string }
+}
+
+export interface DocumentProps extends MessageProps {
+  src: string
+  input?: { data: string }
+  from?: any
+}
 
 export interface TitleProps {
   children: React.ReactNode
@@ -73,21 +91,10 @@ export interface TitleProps {
 
 export type SubtitleProps = TitleProps
 
-export type CustomProp = { custom?: React.ComponentType }
-export type EnableProp = { enable?: boolean }
-export type ImageProp = { image?: string } // https URL or imported Image asset
-export type PersistentMenuCloseOption = { closeLabel: string }
-export type PersistentMenuOption = { label: string } & ButtonProps
-export type StyleProp = { style?: any }
-
-export type PersistentMenuTheme = (
-  | PersistentMenuCloseOption
-  | PersistentMenuOption
-)[]
-
-export interface PersistentMenuProps {
-  onClick: () => void
-  options: any
+export interface CustomMessageType {
+  (props: any): JSX.Element
+  customTypeName: string
+  deserialize(msg: any): JSX.Element
 }
 
 export type BlockInputOption = {
@@ -96,105 +103,6 @@ export type BlockInputOption = {
   message: string
 }
 
-export interface BlobProps {
-  blobTick?: boolean
-  blobTickStyle?: any
-  blobWidth?: string
-  imageStyle?: any
-}
-
-export interface ThemeProps extends StyleProp {
-  coverComponent?: CoverComponentOptions
-  mobileBreakpoint?: number
-  mobileStyle?: any
-  webview?: StyleProp & { header?: StyleProp }
-  animations?: EnableProp
-  intro?: StyleProp & ImageProp & CustomProp
-  brand?: { color?: string } & ImageProp
-  header?: { title?: string; subtitle?: string } & ImageProp &
-    StyleProp &
-    CustomProp
-  // TODO: Review if this is needed hear, or only in message.customTypes? use the same type in both places
-  customMessageTypes?: React.ComponentType[]
-  message?: {
-    bot?: BlobProps & ImageProp & StyleProp
-    agent?: ImageProp
-    user?: BlobProps & StyleProp
-    // TODO: Review type used in cutomTypes should be a component exported by default with customMessage function
-    customTypes?: React.ComponentType[]
-  } & StyleProp & {
-      timestamps?: {
-        withImage?: boolean
-        format: () => string
-      } & StyleProp &
-        EnableProp
-    }
-  button?: {
-    autodisable?: boolean
-    disabledstyle?: any
-    hoverBackground?: string
-    hoverTextColor?: string
-    messageType?: 'text' | 'payload'
-    urlIcon?: ImageProp & EnableProp
-  } & StyleProp &
-    CustomProp
-  replies?: {
-    align?: 'left' | 'center' | 'right'
-    wrap?: 'wrap' | 'nowrap'
-  }
-  carousel?: {
-    arrow?: {
-      left: CustomProp
-      right: CustomProp
-    }
-    enableArrows?: boolean
-  }
-  reply?: StyleProp & CustomProp
-  triggerButton?: ImageProp & StyleProp & CustomProp
-  notifications?: EnableProp & {
-    banner?: CustomProp & EnableProp & { text?: string }
-    triggerButton?: EnableProp
-  }
-  scrollButton?: EnableProp & CustomProp
-  markdownStyle?: string // string template with css styles
-  userInput?: {
-    attachments?: EnableProp & CustomProp
-    blockInputs?: BlockInputOption[]
-    box?: { placeholder: string } & StyleProp
-    emojiPicker?: EnableProp & CustomProp
-    menu?: { darkBackground?: boolean } & {
-      custom?: React.ComponentType<PersistentMenuProps>
-    }
-    menuButton?: CustomProp
-    persistentMenu?: PersistentMenuTheme
-    sendButton?: EnableProp & CustomProp
-  } & EnableProp &
-    StyleProp
-  imagePreviewer?: React.ComponentType<ImagePreviewerProps>
-}
-
-interface ImagePreviewerProps {
-  src: string
-  isPreviewerOpened: boolean
-  closePreviewer: () => void
-}
-
-export interface CoverComponentOptions {
-  component: React.ComponentType<CoverComponentProps>
-  props?: any
-}
-
-export interface WebchatSettingsProps {
-  blockInputs?: BlockInputOption[]
-  enableAnimations?: boolean
-  enableAttachments?: boolean
-  enableEmojiPicker?: boolean
-  enableUserInput?: boolean
-  persistentMenu?: PersistentMenuTheme
-  theme?: ThemeProps
-  user?: { extra_data?: any }
-}
-
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }

package/src/components/index.ts

@@ -4,6 +4,7 @@ export { Carousel } from './carousel'
 export { customMessage } from './custom-message'
 export { Document } from './document'
 export { Element } from './element'
+export { Handoff } from './handoff'
 export { Image } from './image'
 export * from './index-types'
 export { Location } from './location'
@@ -18,7 +19,11 @@ export { Subtitle } from './subtitle'
 export { Text } from './text'
 export { Title } from './title'
 export { Video } from './video'
-export { WebchatSettings } from './webchat-settings'
+export {
+  normalizeWebchatSettings,
+  WebchatSettings,
+  WebchatSettingsProps,
+} from './webchat-settings'
 export {
   WhatsappButtonList,
   WhatsappButtonListProps,

package/src/components/message/index.jsx

@@ -3,11 +3,12 @@ import React, { useContext, useEffect, useState } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { COLORS, WEBCHAT } from '../../constants'
-import { RequestContext, WebchatContext } from '../../contexts'
+import { RequestContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 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 { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'

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

@@ -3,9 +3,9 @@ import { v7 as uuidv7 } from 'uuid'
 
 import ThumbsDown from '../../assets/thumbs-down.svg'
 import ThumbsUp from '../../assets/thumbs-up.svg'
-import { WebchatContext } from '../../contexts'
 import { ActionRequest } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { EventAction, FeedbackOption } from '../../webchat/tracking'
 import { FeedbackButton, FeedbackMessageContainer } from './styles'
 

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { MessageFeedback } from './message-feedback'
 import { MessageFooterContainer } from './styles'
 import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { BotMessageImageContainer } from './styles'
 
 interface MessageImageProps {

package/src/components/message/timestamps.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { SENDERS } from '../../index-types'
 import { resolveImage } from '../../util'
+import { WebchatContext } from '../../webchat/context'
 import { TimestampContainer, TimestampText } from './styles'
 
 export const resolveMessageTimestamps = (

package/src/components/{reply.jsx → reply.tsx}

@@ -2,8 +2,9 @@ import React, { useContext } from 'react'
 import styled from 'styled-components'
 
 import { COLORS, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
+import { WebchatContext } from '../webchat/context'
+import { ReplyProps } from './index-types'
 
 const StyledButton = styled.button`
   width: 100%;
@@ -14,9 +15,10 @@ const StyledButton = styled.button`
   outline: 0;
 `
 
-export const Reply = props => {
+export const Reply = (props: ReplyProps) => {
   const { sendText, getThemeProperty } = useContext(WebchatContext)
-  const handleClick = event => {
+
+  const handleClick = (event: any) => {
     event.preventDefault()
     if (props.children) {
       let payload = props.payload
@@ -59,15 +61,19 @@ export const Reply = props => {
   const renderNode = () => {
     if (props.path) {
       const payload = `__PATH_PAYLOAD__${props.path}`
+      // @ts-ignore
+      // eslint-disable-next-line react/no-unknown-property
       return <reply payload={payload}>{props.children}</reply>
     }
+    // @ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
     return <reply payload={props.payload}>{props.children}</reply>
   }
 
   return renderComponent({ renderBrowser, renderNode })
 }
 
-Reply.serialize = replyProps => {
+Reply.serialize = (replyProps: ReplyProps) => {
   let payload = replyProps.payload
   if (replyProps.path) payload = `__PATH_PAYLOAD__${replyProps.path}`
   return { reply: { title: replyProps.children, payload } }

package/src/components/{video.jsx → video.tsx}

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 import { COLORS, ROLES } from '../constants'
 import { staticAsset } from '../util/environment'
+import { VideoProps } from './index-types'
 import { Message } from './message'
 
 const StyledVideo = styled.video`
@@ -14,11 +15,11 @@ const StyledVideo = styled.video`
   margin: 10px;
 `
 
-const serialize = videoProps => {
+const serialize = (videoProps: { src: string }) => {
   return { video: videoProps.src }
 }
 
-export const Video = props => {
+export const Video = (props: VideoProps) => {
   props = { ...props, src: staticAsset(props.src) }
   let content = props.children
   if (isBrowser())

package/src/components/webchat-settings.tsx

@@ -1,10 +1,22 @@
 import { INPUT } from '@botonic/core'
 import React, { useContext } from 'react'
 
-import { WebchatContext } from '../contexts'
 import { renderComponent } from '../util/react'
 import { stringifyWithRegexs } from '../util/regexs'
-import { WebchatSettingsProps } from '.'
+import { WebchatContext } from '../webchat/context'
+import { PersistentMenuOptionsTheme, ThemeProps } from '../webchat/theme/types'
+import { BlockInputOption } from './index-types'
+
+export interface WebchatSettingsProps {
+  blockInputs?: BlockInputOption[]
+  enableAnimations?: boolean
+  enableAttachments?: boolean
+  enableEmojiPicker?: boolean
+  enableUserInput?: boolean
+  persistentMenu?: PersistentMenuOptionsTheme
+  theme?: ThemeProps
+  user?: { extra_data?: any }
+}
 
 export const WebchatSettings = ({
   theme,

package/src/contexts.tsx

@@ -1,8 +1,7 @@
 import { Input as CoreInput, Session as CoreSession } from '@botonic/core'
 import { createContext } from 'react'
 
-import { ActionRequest, WebchatContextProps } from './index-types'
-import { webchatInitialState } from './webchat/hooks'
+import { ActionRequest } from './index-types'
 
 export const RequestContext = createContext<
   Partial<ActionRequest> & {
@@ -27,89 +26,12 @@ export interface CloseWebviewOptions {
 
 export const WebviewRequestContext = createContext<{
   closeWebview: (options?: CloseWebviewOptions) => Promise<void>
-  getString: (stringId: string) => string
+  getString?: (stringId: string) => string
   params: Record<string, any>
-  session: CoreSession
+  session: Partial<CoreSession>
 }>({
   closeWebview: async () => undefined,
-  getString: () => '',
+  getString: undefined,
   params: {} as Record<string, any>,
-  session: {} as CoreSession,
-})
-
-export const WebchatContext = createContext<WebchatContextProps>({
-  addMessage: () => {
-    return
-  },
-  closeWebview: async () => {
-    return
-  },
-  getThemeProperty: () => {
-    return
-  }, // used to retrieve a specific property of the theme defined by the developer in his 'webchat/index.js'
-  openWebview: () => {
-    return
-  },
-  resolveCase: () => {
-    return
-  },
-  resetUnreadMessages: () => {
-    return
-  },
-  setIsInputFocused: () => {
-    return
-  },
-  setLastMessageVisible: () => {
-    return
-  },
-  sendAttachment: async () => {
-    return
-  },
-  sendInput: async () => {
-    return
-  },
-  sendPayload: async () => {
-    return
-  },
-  sendText: async () => {
-    return
-  },
-  theme: {},
-  toggleCoverComponent: () => {
-    return
-  },
-  toggleWebchat: () => {
-    return
-  },
-  toggleEmojiPicker: () => {
-    return
-  },
-  togglePersistentMenu: () => {
-    return
-  },
-  updateLatestInput: () => {
-    return
-  },
-  updateMessage: () => {
-    return
-  },
-  updateReplies: () => {
-    return
-  },
-  updateUser: () => {
-    return
-  },
-  updateWebchatDevSettings: () => {
-    return
-  },
-  webchatState: webchatInitialState,
-  trackEvent: async () => {
-    return
-  },
-  webchatRef: { current: null },
-  chatAreaRef: { current: null },
-  inputPanelRef: { current: null },
-  headerRef: { current: null },
-  scrollableMessagesListRef: { current: null },
-  repliesRef: { current: null },
+  session: {} as Partial<CoreSession>,
 })