@botonic/react 0.31.5-alpha.1 → 0.32.0-alpha.0

package/src/webchat/styles.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../constants'
+
+interface StyledWebchatProps {
+  width: number
+  height: number
+}
+
+export const StyledWebchat = styled.div<StyledWebchatProps>`
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  margin: auto;
+  background-color: ${COLORS.SOLID_WHITE};
+  border-radius: 10px;
+  box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+`
+
+export const ErrorMessageContainer = styled.div`
+  position: relative;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+`
+
+export const ErrorMessage = styled.div`
+  position: absolute;
+  top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 11px;
+  display: flex;
+  background-color: ${COLORS.ERROR_RED};
+  color: ${COLORS.CONCRETE_WHITE};
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-family: ${WEBCHAT.DEFAULTS.FONT_FAMILY};
+`
+
+export const DarkBackgroundMenu = styled.div`
+  background: ${COLORS.SOLID_BLACK};
+  opacity: 0.3;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  border-radius: 10px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`

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/typing-indicator/index.tsx

@@ -1,16 +1,24 @@
-import React from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 
 import { COLORS, ROLES } from '../../constants'
-import { Dot, TypingIndicatorWrapper } from './styles'
+import { Dot, TypingContainer, TypingMsgWrapper } from './styles'
 
-export const TypingIndicator = () => (
-  <TypingIndicatorWrapper
-    role={ROLES.TYPING_INDICATOR}
-    className='typing-indicator'
-    backgroundColor={COLORS.SEASHELL_WHITE}
-  >
-    <Dot />
-    <Dot />
-    <Dot />
-  </TypingIndicatorWrapper>
+const TypingIndicator = forwardRef<HTMLDivElement, any>(
+  (_props, ref: ForwardedRef<HTMLDivElement>) => (
+    <TypingContainer ref={ref}>
+      <TypingMsgWrapper
+        role={ROLES.TYPING_INDICATOR}
+        className='typing-indicator'
+        backgroundColor={COLORS.SEASHELL_WHITE}
+      >
+        <Dot />
+        <Dot />
+        <Dot />
+      </TypingMsgWrapper>
+    </TypingContainer>
+  )
 )
+
+TypingIndicator.displayName = 'TypingIndicator'
+
+export default TypingIndicator

package/src/webchat/typing-indicator/styles.ts

@@ -12,16 +12,20 @@ const bulge = keyframes`
   }
 `
 
-interface TypingIndicatorWrapperProps {
+export const TypingContainer = styled.div`
+  padding: 0px 8px 8px 8px;
+`
+
+interface TypingMsgWrapperProps {
   backgroundColor: string
 }
 
-export const TypingIndicatorWrapper = styled.div<TypingIndicatorWrapperProps>`
+export const TypingMsgWrapper = styled.div<TypingMsgWrapperProps>`
   will-change: transform;
   width: 44px;
   line-height: 0px;
   border-radius: 20px;
-  padding: 8px 2px 8px;
+  padding: 8px 2px;
   text-align: center;
   display: block;
   margin: 8px;

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'