WIP

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

@@ -46,6 +46,7 @@ export async function createNodeFromKnowledgeBase(
             ],
             buttons_style: undefined,
             buttons: [],
+            withfeedback: true,
           },
           flow_id: 'randomUUID', // TODO: Add flow_id consequentially with HtBaseNode changes
           id: uuid(),

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

@@ -13,6 +13,7 @@ export class FlowText extends ContentFieldsBase {
   public code = ''
   public buttons: FlowButton[] = []
   public buttonStyle = HtButtonStyle.BUTTON
+  public withfeedback?: boolean
 
   static fromHubtypeCMS(
     cmsText: HtTextNode,
@@ -26,6 +27,7 @@ export class FlowText extends ContentFieldsBase {
     newText.buttons = cmsText.content.buttons.map(button =>
       FlowButton.fromHubtypeCMS(button, locale, cmsApi)
     )
+    newText.withfeedback = cmsText.content.withfeedback
     return newText
   }
 
@@ -57,7 +59,7 @@ export class FlowText extends ContentFieldsBase {
   toBotonic(id: string, request: ActionRequest): JSX.Element {
     const replacedText = FlowText.replaceVariables(this.text, request)
     return (
-      <Text key={id}>
+      <Text key={id} withfeedback={this.withfeedback}>
         {replacedText}
         {this.buttons.map((button, buttonIndex) =>
           button.renderButton(buttonIndex, this.buttonStyle)

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-react/src/components/index-types.ts

@@ -29,6 +29,7 @@ export interface MessageProps {
 export interface TextProps extends MessageProps {
   // converts markdown syntax to HTML
   markdown?: boolean
+  withfeedback?: boolean
 }
 
 export interface Webview {

packages/botonic-react/src/components/message/feedback.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+
+import ThumbsDown from '../../assets/thumbs-down.svg'
+import ThumbsUp from '../../assets/thumbs-up.svg'
+import { resolveImage } from '../../util'
+import { getBotonicApp } from '../../webchat'
+import { FeedbackButton, FeedbackContainer } from './styles'
+
+interface FeedbackProps {
+  messageId: string
+}
+
+interface FeedbackState {
+  up: boolean
+  down: boolean
+}
+
+export const Feedback = ({ messageId }: FeedbackProps) => {
+  const [show, setShow] = useState(true)
+  const [disabled, setDisabled] = useState<FeedbackState>({
+    up: false,
+    down: false,
+  })
+
+  useEffect(() => {
+    if (disabled.up || disabled.down) {
+      setTimeout(() => {
+        setShow(false)
+      }, 1000)
+    }
+  }, [disabled])
+
+  const handleClick = (isPositive: boolean) => {
+    const botonicApp = getBotonicApp()
+    const payloadJson = JSON.stringify({ messageId, isPositive })
+    if (isPositive) {
+      setDisabled({ up: false, down: true })
+      botonicApp.addUserPayload(`messageFeedback|${payloadJson}`)
+    } else {
+      setDisabled({ up: true, down: false })
+      botonicApp.addUserPayload(`messageFeedback|${payloadJson}`)
+    }
+  }
+
+  return show ? (
+    <FeedbackContainer>
+      <FeedbackButton disabled={disabled.up} onClick={() => handleClick(true)}>
+        <img src={resolveImage(ThumbsUp)} />
+      </FeedbackButton>
+      <FeedbackButton
+        disabled={disabled.down}
+        onClick={() => handleClick(false)}
+      >
+        <img src={resolveImage(ThumbsDown)} />
+      </FeedbackButton>
+    </FeedbackContainer>
+  ) : null
+}