@botonic/react 0.37.1 → 0.38.0-alpha.0

package/src/webchat/context/messages-reducer.ts

@@ -1,5 +1,4 @@
 import { SENDERS } from '../../index-types'
-import { isCustom } from '../../message-utils'
 import { WebchatAction } from './actions'
 import { WebchatState } from './types'
 
@@ -14,6 +13,8 @@ export const messagesReducer = (
       return addMessageComponent(state, action)
     case WebchatAction.UPDATE_MESSAGE:
       return updateMessageReducer(state, action)
+    case WebchatAction.UPDATE_CUSTOM_MESSAGE_PROPS:
+      return updateCustomMessagePropsReducer(state, action)
     case WebchatAction.UPDATE_REPLIES:
       return { ...state, replies: action.payload }
     case WebchatAction.REMOVE_REPLIES:
@@ -90,32 +91,29 @@ function updateMessageReducer(
   state: WebchatState,
   action: { type: WebchatAction; payload?: any }
 ) {
-  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id)
+  const messageId = action.payload.id
+  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(messageId)
   if (msgIndex > -1) {
     const msgComponent = state.messagesComponents[msgIndex]
-    let updatedMessageComponents = {}
+    let updatedMsgComponent = {}
     if (msgComponent) {
-      const updatedMsgComponent = {
+      updatedMsgComponent = {
         ...msgComponent,
         ...{
           props: { ...msgComponent.props, ack: action.payload.ack },
         },
       }
+    }
 
-      if (isCustom(action.payload)) {
-        // If the message is a custom message, update the json property to update props.
-        // If user close and open the chat the message will render again with the new props.
-        updatedMsgComponent.props.json = action.payload.data.json
-      }
+    const updatedMessagesComponents = msgComponent
+      ? getUpdatedMessagesComponents(state, msgIndex, updatedMsgComponent)
+      : state.messagesComponents
 
-      updatedMessageComponents = {
-        messagesComponents: [
-          ...state.messagesComponents.slice(0, msgIndex),
-          { ...updatedMsgComponent },
-          ...state.messagesComponents.slice(msgIndex + 1),
-        ],
-      }
-    }
+    const messageJSON = state.messagesJSON.find(m => m.id === messageId)
+
+    const updatedMessagesJSON = messageJSON
+      ? getUpdatedMessagesJSON(state, msgIndex, action.payload)
+      : state.messagesJSON
 
     const numUnreadMessages = state.messagesComponents.filter(
       messageComponent => messageComponent.props.isUnread
@@ -123,12 +121,8 @@ function updateMessageReducer(
 
     return {
       ...state,
-      messagesJSON: [
-        ...state.messagesJSON.slice(0, msgIndex),
-        { ...action.payload },
-        ...state.messagesJSON.slice(msgIndex + 1),
-      ],
-      ...updatedMessageComponents,
+      messagesJSON: updatedMessagesJSON,
+      messagesComponents: updatedMessagesComponents,
       numUnreadMessages,
     }
   }
@@ -150,3 +144,76 @@ function addMessageReducer(
     messagesJSON: [...(state.messagesJSON || []), action.payload],
   }
 }
+
+function updateCustomMessagePropsReducer(
+  state: WebchatState,
+  action: { type: WebchatAction; payload?: any }
+) {
+  const { messageId, props } = action.payload
+
+  if (!messageId) {
+    return state
+  }
+
+  // Similar to updateMessageReducer but only for custom messages when update props
+  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(messageId)
+  if (msgIndex > -1) {
+    const msgComponent = state.messagesComponents[msgIndex]
+    if (msgComponent) {
+      msgComponent.props = {
+        ...msgComponent.props,
+        ack: action.payload.ack,
+        ...props,
+      }
+    }
+
+    const updatedMessagesComponents = msgComponent
+      ? getUpdatedMessagesComponents(state, msgIndex, msgComponent)
+      : state.messagesComponents
+
+    const messageJSON = state.messagesJSON.find(m => m.id === messageId)
+    if (messageJSON) {
+      messageJSON.data = {
+        ...messageJSON.data,
+        ...props,
+      }
+    }
+
+    const updatedMessagesJSON = messageJSON
+      ? getUpdatedMessagesJSON(state, msgIndex, messageJSON)
+      : state.messagesJSON
+
+    return {
+      ...state,
+      messagesJSON: updatedMessagesJSON,
+      messagesComponents: updatedMessagesComponents,
+    }
+  }
+
+  return state
+}
+
+// Helper functions to update messagesComponents and messagesJSON
+function getUpdatedMessagesComponents(
+  state: WebchatState,
+  msgIndex: number,
+  updatedMessageComponent: any
+) {
+  return [
+    ...state.messagesComponents.slice(0, msgIndex),
+    { ...updatedMessageComponent },
+    ...state.messagesComponents.slice(msgIndex + 1),
+  ]
+}
+
+function getUpdatedMessagesJSON(
+  state: WebchatState,
+  msgIndex: number,
+  messageJSON: any
+) {
+  return [
+    ...state.messagesJSON.slice(0, msgIndex),
+    { ...messageJSON },
+    ...state.messagesJSON.slice(msgIndex + 1),
+  ]
+}

package/src/webchat/context/types.ts

@@ -75,6 +75,10 @@ export interface WebchatContextProps {
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
   toggleCoverComponent: (toggle: boolean) => void
+  updateCustomMessageProps: (
+    json: Record<string, any>,
+    messageId?: string
+  ) => void
   updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: (typeof Reply)[]) => void

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

@@ -55,6 +55,10 @@ export interface UseWebchat {
   toggleEmojiPicker: (toggle: boolean) => void
   togglePersistentMenu: (toggle: boolean) => void
   toggleWebchat: (toggle: boolean) => void
+  updateCustomMessageProps: (
+    props: Record<string, any>,
+    messageId?: string
+  ) => void
   updateDevSettings: (settings: DevSettings) => void
   updateHandoff: (handoff: boolean) => void
   updateLastMessageDate: (date: string) => void
@@ -102,6 +106,15 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
       payload: message,
     })
 
+  const updateCustomMessageProps = (
+    props: Record<string, any>,
+    messageId?: string
+  ) =>
+    webchatDispatch({
+      type: WebchatAction.UPDATE_CUSTOM_MESSAGE_PROPS,
+      payload: { messageId, props },
+    })
+
   const updateMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
 
@@ -260,6 +273,7 @@ export function useWebchat(theme?: WebchatTheme): UseWebchat {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,

package/src/webchat/custom-messages/rating/index.tsx

@@ -1,5 +1,4 @@
 import { INPUT, InputType } from '@botonic/core'
-import merge from 'lodash.merge'
 import React, { useContext, useState } from 'react'
 import { ThemeContext } from 'styled-components'
 
@@ -14,56 +13,40 @@ interface CustomRatingMessageProps {
   messageText: string
   buttonText: string
   ratingType: RatingType
-  json: { messageId?: string; valueSent?: number }
+  id?: string // This id not exist in local development
+  valueSent?: number
 }
 
 const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
-  const { payloads, messageText, buttonText, ratingType } = props
-  const { webchatState, updateMessage, sendInput } = useContext(WebchatContext)
+  const { payloads, messageText, buttonText, ratingType, id, valueSent } = props
+  const { updateCustomMessageProps, sendInput } = useContext(WebchatContext)
 
   const theme = useContext(ThemeContext)
   const color = theme?.brand?.color ?? ''
 
-  const [ratingValue, setRatingValue] = useState(
-    props.json?.valueSent ? props.json.valueSent : -1
-  )
+  const [ratingValue, setRatingValue] = useState(valueSent ? valueSent : -1)
   const [showRating, setShowRating] = useState(true)
 
   const ratingChanged = (newRating: number) => {
     setRatingValue(newRating)
   }
 
-  const updateMessageJSON = (messageId?: string) => {
-    if (messageId) {
-      const messageToUpdate = webchatState.messagesJSON.filter(m => {
-        return m.id === messageId
-      })[0]
-      const messageInfo = {
-        data: {
-          json: {
-            valueSent: ratingValue,
-          },
-        },
-      }
-      const updatedMsg = merge(messageToUpdate, messageInfo)
-      updateMessage(updatedMsg)
-    }
-  }
-
   const handleButtonSend = () => {
-    if (ratingValue !== -1) {
-      setShowRating(false)
+    if (ratingValue === -1) return
 
-      const payload = payloads[ratingValue - 1]
+    const json = {
+      valueSent: ratingValue,
+    }
+    updateCustomMessageProps(json, id)
 
-      updateMessageJSON(props.json?.messageId)
+    setShowRating(false)
+    const payload = payloads[ratingValue - 1]
 
-      const input = {
-        type: INPUT.POSTBACK as InputType,
-        payload,
-      }
-      void sendInput(input)
+    const input = {
+      type: INPUT.POSTBACK as InputType,
+      payload,
     }
+    void sendInput(input)
   }
 
   const disabled = ratingValue === -1
@@ -77,10 +60,10 @@ const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
           onRatingChange={ratingChanged}
           ratingValue={ratingValue}
           ratingType={ratingType}
-          valueSent={props.json?.valueSent}
+          valueSent={valueSent}
         />
       </MessageBubble>
-      {!props.json?.valueSent && showRating && (
+      {!props?.valueSent && showRating && (
         <Button
           autodisable={true}
           disabled={disabled}

package/src/webchat/tracking.ts

@@ -1,3 +1,8 @@
+import {
+  EventCustom,
+  EventFeedback,
+  EventFeedbackKnowledgebase,
+} from '@botonic/core'
 import { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
@@ -14,12 +19,23 @@ interface TrackKnowledgebaseFeedbackArgs {
   inferenceId?: string
 }
 
-export enum FeedbackOption {
+enum FeedbackOption {
   ThumbsUp = 'thumbsUp',
   ThumbsDown = 'thumbsDown',
 }
 
-export function useTracking() {
+interface UseTracking {
+  trackKnowledgebaseFeedback: ({
+    messageId,
+    isUseful,
+    botInteractionId,
+    inferenceId,
+  }: TrackKnowledgebaseFeedbackArgs) => Promise<void>
+  trackCustomEvent: (event: EventCustom) => Promise<void>
+  trackFeedbackEvent: (event: EventFeedback) => Promise<void>
+}
+
+export function useTracking(): UseTracking {
   const { webchatState, trackEvent } = useContext(WebchatContext)
 
   const getRequest = () => {
@@ -46,10 +62,13 @@ export function useTracking() {
     if (!trackEvent) {
       return
     }
+    const request = getRequest()
 
-    const args = {
-      knowledgebaseInferenceId: inferenceId,
-      feedbackBotInteractionId: botInteractionId,
+    // inferenceId and botInteractionId are strings, but in local development they are undefined
+    const event: EventFeedbackKnowledgebase = {
+      action: EventAction.FeedbackKnowledgebase,
+      knowledgebaseInferenceId: inferenceId as string,
+      feedbackBotInteractionId: botInteractionId as string,
       feedbackTargetId: messageId,
       feedbackGroupId: uuidv7(),
       possibleOptions: [FeedbackOption.ThumbsDown, FeedbackOption.ThumbsUp],
@@ -57,11 +76,30 @@ export function useTracking() {
       option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
       value: isUseful ? 1 : 0,
     }
+    const { action, ...eventArgs } = event
+
+    await trackEvent(request, action, eventArgs)
+  }
+
+  const trackCustomEvent = async (event: EventCustom) => {
+    if (!trackEvent) {
+      return
+    }
 
     const request = getRequest()
+    const { action, ...eventArgs } = event
+    await trackEvent(request, action, eventArgs)
+  }
 
-    await trackEvent(request, EventAction.FeedbackKnowledgebase, args)
+  const trackFeedbackEvent = async (event: EventFeedback) => {
+    if (!trackEvent) {
+      return
+    }
+
+    const request = getRequest()
+    const { action, ...eventArgs } = event
+    await trackEvent(request, action, eventArgs)
   }
 
-  return { trackKnowledgebaseFeedback }
+  return { trackKnowledgebaseFeedback, trackCustomEvent, trackFeedbackEvent }
 }

package/src/webchat/webchat.tsx

@@ -86,6 +86,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
     toggleEmojiPicker,
     togglePersistentMenu,
     toggleWebchat,
+    updateCustomMessageProps,
     updateDevSettings,
     updateHandoff,
     updateLastMessageDate,
@@ -650,6 +651,7 @@ const Webchat = forwardRef<WebchatRef | null, WebchatProps>((props, ref) => {
         toggleEmojiPicker,
         togglePersistentMenu,
         toggleCoverComponent,
+        updateCustomMessageProps,
         updateLatestInput,
         updateMessage,
         updateReplies,