WIP

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

@@ -83,16 +83,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,9 +5,10 @@ import { ContentFieldsBase } from './content-fields-base'
 import { HtKnowledgeBaseNode } from './hubtype-fields'
 
 export class FlowKnowledgeBase extends ContentFieldsBase {
-  public code = ''
+  public code: string = ''
   public sources: string[] = []
-  public text = ''
+  public text: string = ''
+  public inferenceId?: string
 
   static fromHubtypeCMS(component: HtKnowledgeBaseNode): FlowKnowledgeBase {
     const newKnowledgeBase = new FlowKnowledgeBase(component.id)
@@ -18,6 +19,10 @@ export class FlowKnowledgeBase extends ContentFieldsBase {
   }
 
   toBotonic(id: string): JSX.Element {
-    return <Text key={id}>{this.text}</Text>
+    return (
+      <Text key={id} withfeedback={true} inferenceid={this.inferenceId}>
+        {this.text}
+      </Text>
+    )
   }
 }

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

@@ -5,6 +5,7 @@ import { HtButtonStyle, HtNodeWithContentType } from './node-types'
 export interface HtTextNode extends HtBaseNode {
   type: HtNodeWithContentType.TEXT
   content: {
+    withfeedback?: boolean
     text: HtTextLocale[]
     buttons_style?: HtButtonStyle
     buttons: HtButton[]

packages/botonic-plugin-flow-builder/src/tracking.ts

@@ -12,6 +12,7 @@ export enum EventAction {
   IntentSmart = 'nlu_intent_smart',
   Knowledgebase = 'knowledgebase',
   Fallback = 'fallback',
+  FeedbackKnowledgebase = 'feedback_knowledgebase',
 }
 
 export enum KnowledgebaseFailReason {
@@ -49,7 +50,7 @@ export async function trackFlowContent(
   await trackEvent(request, EventAction.FlowNode, eventArgs)
 }
 
-export function getContentEventArgs(
+function getContentEventArgs(
   request: ActionRequest,
   contentInfo: {
     code: string
@@ -70,3 +71,28 @@ export function getContentEventArgs(
     flowNodeIsMeaningful: contentInfo.isMeaningful,
   }
 }
+
+export async function trackFeedbackKnowledgebase(request: ActionRequest) {
+  const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  const payloadParams = flowBuilderPlugin.getPayloadParams<{
+    inferenceid?: string
+    isPositive: boolean
+    messagegeneratedbyid?: string
+    messageId: string
+    followUpContentID?: string
+  }>(request.input.payload!)
+  await trackEvent(
+    request as unknown as ActionRequest,
+    EventAction.FeedbackKnowledgebase,
+    {
+      messageGeneratedById: payloadParams.messagegeneratedbyid,
+      knowledgebaseInferenceId: payloadParams.inferenceid,
+      feedbackTargetId: payloadParams.messageId,
+      feedbackGroupId: uuid(),
+      possibleOptions: ['thumbsDown', 'thumbsUp'],
+      possibleValues: [0, 1],
+      option: payloadParams.isPositive ? 'thumbsUp' : 'thumbsDown',
+      value: payloadParams.isPositive ? 1 : 0,
+    }
+  )
+}

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 // ?? case_id, message_id, conversation_id ???, webview_name
+    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/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,7 +33,18 @@ export interface EventFeedback extends HtBaseEventProps {
     | EventAction.FeedbackConversation
     | EventAction.FeedbackMessage
     | EventAction.FeedbackWebview
-  messageGeneratedBy?: string
+  feedbackTargetId?: string
+  feedbackGroupId?: string
+  possibleOptions: string[]
+  possibleValues: number[]
+  option: string
+  value: number
+  comment?: string
+}
+
+export interface EventFeedbackKnowledgebase extends HtBaseEventProps {
+  action: EventAction.FeedbackKnowledgebase
+  knowledgebaseInferenceId: string
   feedbackTargetId?: string
   feedbackGroupId?: string
   possibleOptions: string[]
@@ -133,6 +145,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,32 @@
+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,
+      messageGeneratedById: 'messageIdTest',
+      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,
+      message_generated_by_id: 'messageIdTest',
+      knowledgebase_inference_id: 'knowledgebaseInferenceIdTest',
+      possible_options: ['thumbs_down', 'thumbs_up'],
+      possible_values: [0, 1],
+      option: 'thumbs_down',
+      value: 0,
+      type: EventType.WebEvent,
+    })
+  })
+})

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
+  withfeedback?: 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,
+    withfeedback,
+    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,
+        withfeedback,
+        inferenceid,
       }
       addMessage(message)
     }
@@ -255,13 +262,15 @@ export const Message = props => {
               {Boolean(blob) && hasBlobTick() && getBlobTick(5)}
             </BlobContainer>
           </MessageContainer>
-          {timestampsEnabled && (
-            <MessageTimestamp
+          {timestampsEnabled || withfeedback ? (
+            <MessageFooter
+              enabletimestamps={timestampsEnabled}
+              messageJSON={messageJSON}
               sentBy={sentBy}
-              style={timestampStyle}
-              timestamp={messageJSON.timestamp}
+              withfeedback={withfeedback}
+              inferenceid={inferenceid}
             />
-          )}
+          ) : null}
         </>
       </ConditionalWrapper>
     )