feedback knoweldege base with thumbsUp/thumbsDown

packages/botonic-plugin-flow-builder/src/action/knowledge-bases.ts

@@ -71,16 +71,17 @@ async function getContentsWithKnowledgeResponse(
     return undefined
   }
 
-  return updateContentsWithAnswer(contents, knowledgeBaseResponse.answer)
+  return updateContentsWithResponse(contents, knowledgeBaseResponse)
 }
 
-function updateContentsWithAnswer(
+function updateContentsWithResponse(
   contents: FlowContent[],
-  answer: string
+  response: KnowledgeBaseResponse
 ): FlowContent[] {
   return contents.map(content => {
     if (content instanceof FlowKnowledgeBase) {
-      content.text = answer
+      content.text = response.answer
+      content.inferenceId = response.inferenceId
     }
 
     return content

packages/botonic-plugin-flow-builder/src/content-fields/flow-knowledge-base.tsx

@@ -5,19 +5,30 @@ import { ContentFieldsBase } from './content-fields-base'
 import { HtKnowledgeBaseNode } from './hubtype-fields'
 
 export class FlowKnowledgeBase extends ContentFieldsBase {
-  public code = ''
+  public code: string = ''
+  public feedbackEnabled: boolean = false
   public sources: string[] = []
-  public text = ''
+  public text: string = ''
+  public inferenceId?: string
 
   static fromHubtypeCMS(component: HtKnowledgeBaseNode): FlowKnowledgeBase {
     const newKnowledgeBase = new FlowKnowledgeBase(component.id)
     newKnowledgeBase.code = component.code
+    newKnowledgeBase.feedbackEnabled = component.content.feedback_enabled
     newKnowledgeBase.sources = component.content.sources
 
     return newKnowledgeBase
   }
 
   toBotonic(id: string): JSX.Element {
-    return <Text key={id}>{this.text}</Text>
+    return (
+      <Text
+        key={id}
+        feedbackEnabled={this.feedbackEnabled}
+        inferenceId={this.inferenceId}
+      >
+        {this.text}
+      </Text>
+    )
   }
 }

packages/botonic-plugin-flow-builder/src/content-fields/hubtype-fields/knowledge-base.ts

@@ -4,6 +4,7 @@ import { HtNodeWithContentType } from './node-types'
 export interface HtKnowledgeBaseNode extends HtBaseNode {
   type: HtNodeWithContentType.KNOWLEDGE_BASE
   content: {
+    feedback_enabled: boolean
     sources: string[]
   }
 }

packages/botonic-plugin-hubtype-analytics/src/event-models/ht-event-feedback-knowledgebase.ts

@@ -0,0 +1,33 @@
+import {
+  EventAction,
+  EventFeedbackKnowledgebase,
+  EventType,
+  RequestData,
+} from '../types'
+import { HtEvent } from './ht-event'
+
+export class HtEventFeedbackKnowledgebase extends HtEvent {
+  action: EventAction.FeedbackKnowledgebase
+  knowledgebase_inference_id: string
+  feedback_target_id: string
+  feedback_group_id: string
+  possible_options: string[]
+  possible_values?: number[]
+  option: string
+  value?: number
+  comment?: string
+
+  constructor(event: EventFeedbackKnowledgebase, requestData: RequestData) {
+    super(event, requestData)
+    this.type = EventType.WebEvent
+    this.action = event.action
+    this.knowledgebase_inference_id = event.knowledgebaseInferenceId
+    this.feedback_target_id = event.feedbackTargetId
+    this.feedback_group_id = event.feedbackGroupId
+    this.possible_options = event.possibleOptions
+    this.possible_values = event.possibleValues
+    this.option = event.option
+    this.value = event.value
+    this.comment = event.comment
+  }
+}

packages/botonic-plugin-hubtype-analytics/src/event-models/ht-event-feedback.ts

@@ -7,20 +7,20 @@ export class HtEventFeedback extends HtEvent {
     | EventAction.FeedbackConversation
     | EventAction.FeedbackMessage
     | EventAction.FeedbackWebview
-  feedback_target_id?: string
-  feedback_group_id?: string
+  feedback_target_id: string
+  feedback_group_id: string
   possible_options: string[]
-  possible_values: number[]
+  possible_values?: number[]
   option: string
-  value: number
+  value?: number
   comment?: string
 
   constructor(event: EventFeedback, requestData: RequestData) {
     super(event, requestData)
     this.type = EventType.WebEvent
     this.action = event.action
-    this.feedback_target_id = event.feedbackTargetId // ?? case_id, message_id, conversation_id ???, webview_name
-    this.feedback_group_id = event.feedbackGroupId // ??
+    this.feedback_target_id = event.feedbackTargetId
+    this.feedback_group_id = event.feedbackGroupId
     this.possible_options = event.possibleOptions
     this.possible_values = event.possibleValues
     this.option = event.option

packages/botonic-plugin-hubtype-analytics/src/event-models/index.ts

@@ -2,6 +2,7 @@ export { HtEvent } from './ht-event'
 export { HtEventCustom } from './ht-event-custom'
 export { HtEventFallback } from './ht-event-fallback'
 export { HtEventFeedback } from './ht-event-feedback'
+export { HtEventFeedbackKnowledgebase } from './ht-event-feedback-knowledgebase'
 export { HtEventFlow } from './ht-event-flow'
 export { HtEventHandoff } from './ht-event-handoff'
 export { HtEventHandoffOption } from './ht-event-handoff-option'

packages/botonic-plugin-hubtype-analytics/src/types.ts

@@ -7,6 +7,7 @@ export enum EventAction {
   FeedbackCase = 'feedback_case',
   FeedbackMessage = 'feedback_message',
   FeedbackConversation = 'feedback_conversation',
+  FeedbackKnowledgebase = 'feedback_knowledgebase',
   FeedbackWebview = 'feedback_webview',
   FlowNode = 'flow_node',
   HandoffOption = 'handoff_option',
@@ -32,13 +33,24 @@ export interface EventFeedback extends HtBaseEventProps {
     | EventAction.FeedbackConversation
     | EventAction.FeedbackMessage
     | EventAction.FeedbackWebview
-  messageGeneratedBy?: string
-  feedbackTargetId?: string
-  feedbackGroupId?: string
+  feedbackTargetId: string
+  feedbackGroupId: string
   possibleOptions: string[]
-  possibleValues: number[]
+  possibleValues?: number[]
   option: string
-  value: number
+  value?: number
+  comment?: string
+}
+
+export interface EventFeedbackKnowledgebase extends HtBaseEventProps {
+  action: EventAction.FeedbackKnowledgebase
+  knowledgebaseInferenceId: string
+  feedbackTargetId: string
+  feedbackGroupId: string
+  possibleOptions: string[]
+  possibleValues?: number[]
+  option: string
+  value?: number
   comment?: string
 }
 
@@ -135,6 +147,7 @@ export interface EventCustom extends HtBaseEventProps {
 
 export type HtEventProps =
   | EventFeedback
+  | EventFeedbackKnowledgebase
   | EventFlow
   | EventHandoff
   | EventHandoffOption

packages/botonic-plugin-hubtype-analytics/src/utils.ts

@@ -3,6 +3,7 @@ import {
   HtEventCustom,
   HtEventFallback,
   HtEventFeedback,
+  HtEventFeedbackKnowledgebase,
   HtEventFlow,
   HtEventHandoff,
   HtEventHandoffOption,
@@ -25,6 +26,9 @@ export function createHtEvent(
     case EventAction.FeedbackWebview:
       return new HtEventFeedback(htEventProps, requestData)
 
+    case EventAction.FeedbackKnowledgebase:
+      return new HtEventFeedbackKnowledgebase(htEventProps, requestData)
+
     case EventAction.FlowNode:
       return new HtEventFlow(htEventProps, requestData)
 

packages/botonic-plugin-hubtype-analytics/tests/event-feedback-knowledgebase.test.ts

@@ -0,0 +1,34 @@
+import { createHtEvent, EventAction, EventType } from '../src'
+import { getRequestData } from './helpers'
+
+describe('Create feedback knowledgebase event', () => {
+  test('A message generated for a knowledge base recive feedback', () => {
+    const requestData = getRequestData()
+    const htEvent = createHtEvent(requestData, {
+      action: EventAction.FeedbackKnowledgebase,
+      feedbackTargetId: 'messageIdTest',
+      feedbackGroupId: 'groupIdTest',
+      knowledgebaseInferenceId: 'knowledgebaseInferenceIdTest',
+      possibleOptions: ['thumbs_down', 'thumbs_up'],
+      possibleValues: [0, 1],
+      option: 'thumbs_down',
+      value: 0,
+    })
+
+    expect(htEvent).toEqual({
+      chat_id: 'chatIdTest',
+      chat_language: 'es',
+      chat_country: 'ES',
+      format_version: 2,
+      action: EventAction.FeedbackKnowledgebase,
+      feedback_target_id: 'messageIdTest',
+      feedback_group_id: 'groupIdTest',
+      knowledgebase_inference_id: 'knowledgebaseInferenceIdTest',
+      possible_options: ['thumbs_down', 'thumbs_up'],
+      possible_values: [0, 1],
+      option: 'thumbs_down',
+      value: 0,
+      type: EventType.WebEvent,
+    })
+  })
+})

packages/botonic-plugin-hubtype-analytics/tests/event-feedback.test.ts

@@ -5,7 +5,9 @@ describe('Create feedback event', () => {
   test('A conversation feedback event is created', () => {
     const requestData = getRequestData()
     const htEvent = createHtEvent(requestData, {
-      action: EventAction.FeedbackMessage,
+      action: EventAction.FeedbackCase,
+      feedbackTargetId: 'caseId',
+      feedbackGroupId: 'groupIdTest',
       possibleOptions: ['*', '**', '***', '****', '*****'],
       possibleValues: [1, 2, 3, 4, 5],
       option: '**',
@@ -17,7 +19,9 @@ describe('Create feedback event', () => {
       chat_language: 'es',
       chat_country: 'ES',
       format_version: 2,
-      action: EventAction.FeedbackMessage,
+      action: EventAction.FeedbackCase,
+      feedback_target_id: 'caseId',
+      feedback_group_id: 'groupIdTest',
       possible_options: ['*', '**', '***', '****', '*****'],
       possible_values: [1, 2, 3, 4, 5],
       option: '**',
@@ -30,6 +34,8 @@ describe('Create feedback event', () => {
     const requestData = getRequestData()
     const htEvent = createHtEvent(requestData, {
       action: EventAction.FeedbackConversation,
+      feedbackTargetId: 'chatIdTest',
+      feedbackGroupId: 'groupIdTest',
       possibleOptions: ['*', '**', '***', '****', '*****'],
       possibleValues: [1, 2, 3, 4, 5],
       option: '**',
@@ -43,6 +49,8 @@ describe('Create feedback event', () => {
       chat_country: 'ES',
       format_version: 2,
       action: EventAction.FeedbackConversation,
+      feedback_target_id: 'chatIdTest',
+      feedback_group_id: 'groupIdTest',
       possible_options: ['*', '**', '***', '****', '*****'],
       possible_values: [1, 2, 3, 4, 5],
       option: '**',

packages/botonic-react/src/components/index-types.ts

@@ -1,4 +1,4 @@
-import React, { ErrorInfo } from 'react'
+import React from 'react'
 
 import { SENDERS } from '../index-types'
 import { CoverComponentProps } from '../webchat/index-types'
@@ -29,6 +29,8 @@ export interface MessageProps {
 export interface TextProps extends MessageProps {
   // converts markdown syntax to HTML
   markdown?: boolean
+  feedbackEnabled?: boolean
+  inferenceId?: string
 }
 
 export interface Webview {
@@ -204,21 +206,3 @@ export interface WebchatSettingsProps {
 export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
   customTypeName: string
 }
-
-// TODO: Reuse types to be typed in respective functions
-// export class ErrorBoundary<Props> extends React.Component<Props> {
-//   componentDidCatch(error: Error, errorInfo: ErrorInfo): void
-// }
-
-// export function createErrorBoundary<Props>(_?: {
-//   errorComponent: React.ComponentType
-// }): ErrorBoundary<Props>
-
-// export function customMessage<Props>(_: {
-//   name: string
-//   component: React.ComponentType<Props>
-//   defaultProps?: Record<string, unknown>
-//   errorBoundary?: ErrorBoundary<Props>
-// }): WrappedComponent<Props>
-
-// export function getDisplayName(component: React.ComponentType): string

packages/botonic-react/src/components/message/index.jsx

@@ -12,6 +12,7 @@ import { Button } from '../button'
 import { ButtonsDisabler } from '../buttons-disabler'
 import { getMarkdownStyle, renderLinks, renderMarkdown } from '../markdown'
 import { Reply } from '../reply'
+import { MessageFooter } from './message-footer'
 import { MessageImage } from './message-image'
 import {
   BlobContainer,
@@ -20,7 +21,7 @@ import {
   BlobTickContainer,
   MessageContainer,
 } from './styles'
-import { MessageTimestamp, resolveMessageTimestamps } from './timestamps'
+import { resolveMessageTimestamps } from './timestamps'
 
 export const Message = props => {
   const { defaultTyping, defaultDelay } = useContext(RequestContext)
@@ -36,6 +37,8 @@ export const Message = props => {
     style,
     imagestyle = props.imagestyle || props.imageStyle,
     isUnread = true,
+    feedbackEnabled,
+    inferenceId,
     ...otherProps
   } = props
 
@@ -67,8 +70,10 @@ export const Message = props => {
       typeof e === 'string' ? renderLinks(e) : e
     )
 
-  const { timestampsEnabled, getFormattedTimestamp, timestampStyle } =
-    resolveMessageTimestamps(getThemeProperty, enabletimestamps)
+  const { timestampsEnabled, getFormattedTimestamp } = resolveMessageTimestamps(
+    getThemeProperty,
+    enabletimestamps
+  )
 
   const getEnvAck = () => {
     if (isDev) return 1
@@ -111,6 +116,8 @@ export const Message = props => {
         customTypeName: decomposedChildren.customTypeName,
         ack: ack,
         isUnread: isUnread === 1 || isUnread === true,
+        feedbackEnabled,
+        inferenceId,
       }
       addMessage(message)
     }
@@ -255,13 +262,15 @@ export const Message = props => {
               {Boolean(blob) && hasBlobTick() && getBlobTick(5)}
             </BlobContainer>
           </MessageContainer>
-          {timestampsEnabled && (
-            <MessageTimestamp
+          {timestampsEnabled || feedbackEnabled ? (
+            <MessageFooter
+              enabletimestamps={timestampsEnabled}
+              messageJSON={messageJSON}
               sentBy={sentBy}
-              style={timestampStyle}
-              timestamp={messageJSON.timestamp}
+              feedbackEnabled={feedbackEnabled}
+              inferenceId={inferenceId}
             />
-          )}
+          ) : null}
         </>
       </ConditionalWrapper>
     )