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

package/src/webchat/message-list/unread-messages-banner.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
 
 import ArrowDown from '../../assets/arrow-down.svg'
-import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import { ContainerUnreadMessagesBanner } from './styles'
 import { useNotifications } from './use-notifications'
 

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 
 export function useNotifications() {
   const { getThemeProperty } = useContext(WebchatContext)

package/src/webchat/replies/index.tsx

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
+import { BotonicContainerId } from '../constants'
+import { RepliesContainer, ReplyContainer, ScrollableReplies } from './styles'
+
+const options = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+}
+
+export const WebchatReplies = () => {
+  const { webchatState, getThemeProperty, repliesRef } =
+    useContext(WebchatContext)
+
+  let justifyContent = 'center'
+  const flexWrap = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,
+    'wrap'
+  )
+
+  if (flexWrap === 'nowrap') {
+    justifyContent = 'flex-start'
+  } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
+    justifyContent =
+      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]
+  }
+
+  return (
+    <ScrollableReplies>
+      <RepliesContainer
+        id={BotonicContainerId.RepliesContainer}
+        ref={repliesRef}
+        className='replies-container'
+        justify={justifyContent}
+        wrap={flexWrap}
+      >
+        {webchatState.replies?.map((reply, i) => (
+          // @ts-ignore TODO: In this point reply is the the component to render
+          <ReplyContainer key={`reply-${i}`}>{reply}</ReplyContainer>
+        ))}
+      </RepliesContainer>
+    </ScrollableReplies>
+  )
+}

package/src/webchat/replies/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components'
+
+export const ScrollableReplies = styled.div`
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`
+
+interface RepliesContainerProps {
+  justify: string
+  wrap: string
+}
+
+export const RepliesContainer = styled.div<RepliesContainerProps>`
+  display: flex;
+  text-align: center;
+  justify-content: ${props => props.justify};
+  flex-wrap: ${props => props.wrap};
+  padding-bottom: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+  overflow-x: auto;
+`
+
+export const ReplyContainer = styled.div`
+  flex: none;
+  display: inline-block;
+  margin: 3px;
+`

package/src/webchat/session-view.jsx

@@ -3,7 +3,7 @@ import { JSONTree } from 'react-json-tree'
 import styled from 'styled-components'
 
 import { COLORS } from '../constants'
-import { useWebchat } from './hooks'
+import { useWebchat } from './context/use-webchat'
 
 const AttributeContainer = styled.div`
   display: flex;

package/src/webchat/{webchat-typed/styles.ts → styles.ts}

@@ -1,8 +1,13 @@
 import styled from 'styled-components'
 
-import { COLORS, WEBCHAT } from '../../constants'
+import { COLORS, WEBCHAT } from '../constants'
 
-export const StyledWebchat = styled.div<{ height: string; width: string }>`
+interface StyledWebchatProps {
+  width: number
+  height: number
+}
+
+export const StyledWebchat = styled.div<StyledWebchatProps>`
   position: fixed;
   right: 20px;
   bottom: 20px;

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/trigger-button/index.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
 
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { resolveImage } from '../../util/environment'
+import { WebchatContext } from '../../webchat/context'
 import {
   StyledTriggerButton,
   TriggerImage,

package/src/webchat/webchat-dev.jsx

@@ -4,7 +4,7 @@ import React, { forwardRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import styled from 'styled-components'
 
-import { useWebchat } from './hooks'
+import { useWebchat } from './context/use-webchat'
 import { SessionView } from './session-view'
 import { Webchat } from './webchat'