@botonic/react 0.27.2 → 0.28.0

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

@@ -0,0 +1,99 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { v4 as uuid } from 'uuid'
+
+import ThumbsDown from '../../assets/thumbs-down.svg'
+import ThumbsUp from '../../assets/thumbs-up.svg'
+import { RequestContext, WebchatContext } from '../../contexts'
+import { ActionRequest } from '../../index-types'
+import { resolveImage } from '../../util'
+import { EventAction, FeedbackOption } from '../../webchat/tracking'
+import { FeedbackButton, FeedbackMessageContainer } from './styles'
+
+interface ButtonsState {
+  positive: boolean
+  negative: boolean
+}
+
+interface RatingProps {
+  inferenceId?: string
+  messageId: string
+}
+
+export const MessageFeedback = ({ inferenceId, messageId }: RatingProps) => {
+  const { webchatState, updateMessage, trackEvent } = useContext(WebchatContext)
+  const request = useContext(RequestContext)
+
+  const [className, setClassName] = useState('')
+  const [disabled, setDisabled] = useState<ButtonsState>({
+    positive: false,
+    negative: false,
+  })
+
+  const updateMsgWithFeedback = (feedbackEnabled: boolean) => {
+    const message = webchatState.messagesJSON.find(
+      message => message.id === messageId
+    )
+    const updatedMsg = {
+      ...message,
+      feedbackEnabled,
+    }
+    updateMessage(updatedMsg)
+  }
+
+  useEffect(() => {
+    updateMsgWithFeedback(true)
+  }, [])
+
+  useEffect(() => {
+    if (disabled.positive || disabled.negative) {
+      setClassName('clicked')
+      updateMsgWithFeedback(false)
+    }
+  }, [disabled])
+
+  const handleClick = async (isUseful: boolean) => {
+    if (!trackEvent) {
+      return
+    }
+
+    if (isUseful) {
+      setDisabled({ positive: false, negative: true })
+    } else {
+      setDisabled({ positive: true, negative: false })
+    }
+
+    const args = {
+      knowledgebaseInferenceId: inferenceId,
+      feedbackTargetId: messageId,
+      feedbackGroupId: uuid(),
+      possibleOptions: [FeedbackOption.ThumbsUp, FeedbackOption.ThumbsDown],
+      possibleValues: [0, 1],
+      option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
+      value: isUseful ? 1 : 0,
+    }
+    await trackEvent(
+      request as ActionRequest,
+      EventAction.FeedbackKnowledgebase,
+      args
+    )
+  }
+
+  return (
+    <FeedbackMessageContainer>
+      <FeedbackButton
+        className={className}
+        disabled={disabled.positive}
+        onClick={() => handleClick(true)}
+      >
+        <img src={resolveImage(ThumbsUp)} />
+      </FeedbackButton>
+      <FeedbackButton
+        className={className}
+        disabled={disabled.negative}
+        onClick={() => handleClick(false)}
+      >
+        <img src={resolveImage(ThumbsDown)} />
+      </FeedbackButton>
+    </FeedbackMessageContainer>
+  )
+}

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

@@ -0,0 +1,52 @@
+import React, { useContext } from 'react'
+
+import { WebchatContext } from '../../contexts'
+import { SENDERS } from '../../index-types'
+import { MessageFeedback } from './message-feedback'
+import { MessageFooterContainer } from './styles'
+import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'
+
+interface MessageFooterProps {
+  enabletimestamps: boolean
+  messageJSON: any
+  sentBy: SENDERS
+  feedbackEnabled: boolean
+  inferenceId?: string
+}
+
+export const MessageFooter = ({
+  enabletimestamps,
+  messageJSON,
+  sentBy,
+  feedbackEnabled,
+  inferenceId,
+}: MessageFooterProps) => {
+  const { getThemeProperty } = useContext(WebchatContext)
+
+  const { timestampsEnabled, timestampStyle } = resolveMessageTimestamps(
+    getThemeProperty,
+    enabletimestamps
+  )
+  const isSentByUser = sentBy === SENDERS.user
+  const messageFotterClass = isSentByUser
+    ? 'message-footer-user'
+    : 'message-footer-bot'
+
+  return (
+    <MessageFooterContainer
+      className={messageFotterClass}
+      isSentByUser={isSentByUser}
+    >
+      {timestampsEnabled ? (
+        <MessageTimestamp
+          sentBy={sentBy}
+          style={timestampStyle}
+          timestamp={messageJSON.timestamp}
+        />
+      ) : null}
+      {feedbackEnabled ? (
+        <MessageFeedback inferenceId={inferenceId} messageId={messageJSON.id} />
+      ) : null}
+    </MessageFooterContainer>
+  )
+}

package/src/components/message/styles.ts

@@ -85,8 +85,6 @@ export const TimestampContainer = styled.div<TimestampContainerProps>`
 
   box-sizing: border-box;
   width: 100%;
-  padding: 0px 15px 4px 15px;
-  padding-top: ${props => (props.isSentByUser ? '0px' : '4px')};
 
   img {
     max-width: 20px;
@@ -103,3 +101,53 @@ export const TimestampText = styled.div<TimestampTextProps>`
   color: ${COLORS.SOLID_BLACK};
   text-align: ${props => (props.isSentByUser ? 'right' : 'left')};
 `
+
+export const MessageFooterContainer = styled.div<TimestampContainerProps>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  box-sizing: border-box;
+  padding: 0px 15px 4px 15px;
+  padding-top: ${props => (props.isSentByUser ? '0px' : '4px')};
+  width: 100%;
+`
+
+export const FeedbackMessageContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+
+  box-sizing: border-box;
+`
+
+export const FeedbackButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: none;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 8px;
+  height: 24px;
+  width: 24px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: #f4f3f4;
+  }
+
+  &:disabled {
+    cursor: default;
+    background: none;
+    opacity: 0.3;
+  }
+
+  &.clicked {
+    opacity: 0;
+    transition: 1s 1s;
+  }
+`

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

@@ -2,6 +2,7 @@ import { INPUT } from '@botonic/core'
 import React, { Children } from 'react'
 
 import { mapObjectNonBooleanValues } from '../util/react'
+import { TextProps } from './index-types'
 import { serializeMarkdown, toMarkdownChildren } from './markdown'
 import { Message } from './message'
 
@@ -17,7 +18,7 @@ const serializeText = children => {
   return text
 }
 
-const serialize = textProps => {
+const serialize = (textProps: TextProps) => {
   if (!textProps.markdown)
     return {
       text: serializeText(textProps.children),
@@ -25,20 +26,19 @@ const serialize = textProps => {
   return { text: serializeMarkdown(textProps.children) }
 }
 
-/**
- *
- * @param {TextProps} props
- * @returns {JSX.Element}
- */
-export const Text = props => {
+export const Text = (props: TextProps) => {
   const defaultTextProps = {
     markdown: props.markdown === undefined ? true : props.markdown,
+    feedbackEnabled: props.feedbackEnabled,
+    inferenceId: props.inferenceId,
   }
+
   const textProps = mapObjectNonBooleanValues({
     ...props,
     ...defaultTextProps,
     ...{ children: Children.toArray(props.children) },
   })
+
   if (!textProps.markdown)
     return (
       <Message json={serialize(textProps)} {...textProps} type={INPUT.TEXT}>

package/src/contexts.tsx

@@ -91,4 +91,7 @@ export const WebchatContext = createContext<WebchatContextProps>({
     return
   },
   webchatState: webchatInitialState,
+  trackEvent: async () => {
+    return
+  },
 })

package/src/dev-app.jsx

@@ -26,6 +26,7 @@ export class DevApp extends WebchatApp {
     onOpen,
     onClose,
     onMessage,
+    onTrackEvent,
     ...botOptions
   }) {
     super({
@@ -45,6 +46,7 @@ export class DevApp extends WebchatApp {
       onOpen,
       onClose,
       onMessage,
+      onTrackEvent,
     })
     this.bot = new ReactBot({
       ...botOptions,
@@ -67,6 +69,7 @@ export class DevApp extends WebchatApp {
       onOpen,
       onClose,
       onMessage,
+      onTrackEvent,
       hostId,
       ...webchatOptions
     } = optionsAtRuntime
@@ -84,6 +87,7 @@ export class DevApp extends WebchatApp {
     this.onOpen = onOpen || this.onOpen
     this.onClose = onClose || this.onClose
     this.onMessage = onMessage || this.onMessage
+    this.onTrackEvent = onTrackEvent || this.onTrackEvent
     this.hostId = hostId || this.hostId
     this.createRootElement(host)
     return (
@@ -108,6 +112,7 @@ export class DevApp extends WebchatApp {
         onOpen={(...args) => this.onOpenWebchat(...args)}
         onClose={(...args) => this.onCloseWebchat(...args)}
         onUserInput={(...args) => this.onUserInput(...args)}
+        onTrackEvent={(...args) => this.onTrackEvent(...args)}
       />
     )
   }

package/src/index-types.ts

@@ -117,13 +117,20 @@ export interface WebchatArgs {
   onMessage?: (app: WebchatApp, message: WebchatMessage) => void
   onOpen?: (app: WebchatApp, args: any) => void
   onConnectionChange?: (app: WebchatApp, isOnline: boolean) => void
+  onTrackEvent?: TrackEventFunction
   persistentMenu?: PersistentMenuTheme
   storage?: Storage | null
   storageKey?: any
   theme?: ThemeProps
 }
 
-// export interface WebchatAppArgs extends WebchatArgs {
+type EventArgs = { [key: string]: any }
+type TrackEventFunction = (
+  request: ActionRequest,
+  eventName: string,
+  args?: EventArgs
+) => Promise<void>
+
 export interface WebchatAppArgs {
   appId?: string
   visibility?: () => boolean
@@ -201,6 +208,7 @@ export interface WebchatContextProps {
   updateUser: (user: Partial<CoreSessionUser>) => void
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   webchatState: WebchatState
+  trackEvent: TrackEventFunction
 }
 
 // export class DevApp extends WebchatApp {

package/src/webchat/tracking.ts

@@ -0,0 +1,8 @@
+export enum EventAction {
+  FeedbackKnowledgebase = 'feedback_knowledgebase',
+}
+
+export enum FeedbackOption {
+  ThumbsUp = 'thumbsUp',
+  ThumbsDown = 'thumbsDown',
+}

package/src/webchat/webchat.jsx

@@ -880,6 +880,7 @@ export const Webchat = forwardRef((props, ref) => {
         updateUser: updateSessionWithUser,
         updateWebchatDevSettings: updateWebchatDevSettings,
         webchatState,
+        trackEvent: props.onTrackEvent,
       }}
     >
       {!webchatState.isWebchatOpen && <TriggerButton />}

package/src/webchat-app.jsx

@@ -29,6 +29,7 @@ export class WebchatApp {
     onOpen,
     onClose,
     onMessage,
+    onTrackEvent,
     onConnectionChange,
     appId,
     visibility,
@@ -58,6 +59,7 @@ export class WebchatApp {
     this.onOpen = onOpen
     this.onClose = onClose
     this.onMessage = onMessage
+    this.onTrackEvent = onTrackEvent
     this.onConnectionChange = onConnectionChange
     this.visibility = visibility
     this.server = server
@@ -284,6 +286,7 @@ export class WebchatApp {
       onClose,
       onMessage,
       onConnectionChange,
+      onTrackEvent,
       appId,
       visibility,
       server,
@@ -307,6 +310,7 @@ export class WebchatApp {
     this.onOpen = onOpen || this.onOpen
     this.onClose = onClose || this.onClose
     this.onMessage = onMessage || this.onMessage
+    this.onTrackEvent = onTrackEvent || this.onTrackEvent
     this.onConnectionChange = onConnectionChange || this.onConnectionChange
     this.visibility = visibility || this.visibility
     this.appId = appId || this.appId
@@ -335,6 +339,7 @@ export class WebchatApp {
         onClose={(...args) => this.onCloseWebchat(...args)}
         onUserInput={(...args) => this.onUserInput(...args)}
         onStateChange={webchatState => this.onStateChange(webchatState)}
+        onTrackEvent={(...args) => this.onTrackEvent(...args)}
         server={server}
       />
     )