@botonic/react 0.36.0-alpha.0 → 0.36.0

package/src/webchat/theme/types.ts

@@ -0,0 +1,206 @@
+import {
+  BlockInputOption,
+  ButtonProps,
+  CustomMessageType,
+} from '../../components/index-types'
+
+export 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 CustomButtonProps {
+  children: React.ReactNode
+  onClick?: () => void
+}
+
+interface ButtonStyle {
+  width?: string
+  maxHeight?: string
+  height?: string
+  fontFamily?: string
+  fontSize?: string
+  fontWeight?: string
+  background?: string
+  color?: string
+  outline?: string
+  border?: string
+  borderRadius?: string
+  padding?: string
+  overflow?: string
+}
+
+export interface WebchatTheme {
+  style: {
+    width?: string
+    height?: string
+    borderRadius?: string
+    fontFamily?: string
+    fontSize?: string
+    position?: 'fixed' | 'absolute'
+    right?: string
+    bottom?: string
+    backgroundColor?: string
+    boxShadow?: string
+  }
+  mobileBreakpoint: number
+  mobileStyle: {
+    width?: string
+    height?: string
+    borderRadius?: string
+    fontSize?: string
+    position?: 'fixed' | 'absolute'
+    right?: string
+    bottom?: string
+  }
+
+  coverComponent?: CoverComponentOptions
+  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?: {
+      borderRadius?: string
+    }
+    mobileStyle?: {
+      borderRadius?: string
+    }
+    custom?: React.ComponentType
+  }
+  message?: {
+    bot?: BlobProps & { image?: string; style?: any }
+    agent?: { image?: string }
+    user?: BlobProps & { style?: any }
+    // TODO: Review type used in customTypes 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?: {
+      opacity?: number
+      cursor?: string
+      pointerEvents?: string
+      backgroundColor?: string
+    }
+    hoverBackground?: string
+    hoverTextColor?: string
+    messageType?: 'text' | 'postback'
+    urlIcon?: {
+      image?: string
+      enable?: boolean
+    }
+    style?: ButtonStyle
+    custom?: React.ComponentType<CustomButtonProps>
+  }
+  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/tracking.ts

@@ -1,8 +1,67 @@
+import { useContext } from 'react'
+import { v7 as uuidv7 } from 'uuid'
+
+import { ActionRequest } from '../index-types'
+import { WebchatContext } from './context'
+
 export enum EventAction {
   FeedbackKnowledgebase = 'feedback_knowledgebase',
 }
+interface TrackKnowledgebaseFeedbackArgs {
+  messageId: string
+  isUseful: boolean
+  botInteractionId?: string
+  inferenceId?: string
+}
 
 export enum FeedbackOption {
   ThumbsUp = 'thumbsUp',
   ThumbsDown = 'thumbsDown',
 }
+
+export function useTracking() {
+  const { webchatState, trackEvent } = useContext(WebchatContext)
+
+  const getRequest = () => {
+    const request = {
+      session: {
+        ...webchatState.session,
+      },
+      getUserCountry: () => webchatState.session.user?.country || '',
+      getUserLocale: () => webchatState.session.user?.locale || '',
+      getSystemLocale: () => {
+        return webchatState.session.user?.system_locale || ''
+      },
+    } as unknown as ActionRequest
+
+    return request
+  }
+
+  const trackKnowledgebaseFeedback = async ({
+    messageId,
+    isUseful,
+    botInteractionId,
+    inferenceId,
+  }: TrackKnowledgebaseFeedbackArgs) => {
+    if (!trackEvent) {
+      return
+    }
+
+    const args = {
+      knowledgebaseInferenceId: inferenceId,
+      feedbackBotInteractionId: botInteractionId,
+      feedbackTargetId: messageId,
+      feedbackGroupId: uuidv7(),
+      possibleOptions: [FeedbackOption.ThumbsDown, FeedbackOption.ThumbsUp],
+      possibleValues: [0, 1],
+      option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
+      value: isUseful ? 1 : 0,
+    }
+
+    const request = getRequest()
+
+    await trackEvent(request, EventAction.FeedbackKnowledgebase, args)
+  }
+
+  return { trackKnowledgebaseFeedback }
+}

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,
@@ -20,7 +20,7 @@ export const TriggerButton = (): JSX.Element => {
     )
 
     if (!image) {
-      webchatState.theme.triggerButtonImage = WEBCHAT.DEFAULTS.LOGO
+      webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO
       return null
     }
     return image
@@ -33,8 +33,7 @@ export const TriggerButton = (): JSX.Element => {
   )
 
   const notificationsTriggerButtonEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled,
-    false
+    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled
   )
 
   const notificationsEnabled = getThemeProperty(
@@ -43,8 +42,7 @@ export const TriggerButton = (): JSX.Element => {
   )
 
   const CustomTriggerButton = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.customTrigger,
-    undefined
+    WEBCHAT.CUSTOM_PROPERTIES.customTrigger
   )
 
   const handleClick = (event: any) => {

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'