@botonic/plugin-flow-builder 0.36.0 → 0.37.0-alpha.0

package/src/action/ai-agent.ts

@@ -1,6 +1,5 @@
 import { FlowContent } from '../content-fields'
 import { FlowAiAgent } from '../content-fields/flow-ai-agent'
-import { AiAgentResponse } from '../types'
 import { FlowBuilderContext } from './index'
 
 export async function getContentsByAiAgent({
@@ -16,6 +15,7 @@ export async function getContentsByAiAgent({
 
   const contents =
     await flowBuilderPlugin.getContentsByNode(startNodeAiAgentFlow)
+
   const aiAgentContent = contents.find(
     content => content instanceof FlowAiAgent
   ) as FlowAiAgent
@@ -33,22 +33,15 @@ export async function getContentsByAiAgent({
     }
   )
 
-  if (!aiAgentResponse || aiAgentResponse.role === 'exit') {
+  if (!aiAgentResponse) {
     return []
   }
 
-  return updateContentsWithAiAgentResponse(contents, aiAgentResponse)
-}
+  if (aiAgentResponse.length === 1 && aiAgentResponse[0].type === 'exit') {
+    return []
+  }
 
-function updateContentsWithAiAgentResponse(
-  contents: FlowContent[],
-  aiAgentResponse: AiAgentResponse
-): FlowContent[] {
-  return contents.map(content => {
-    if (content instanceof FlowAiAgent) {
-      content.text = aiAgentResponse.content || ''
-    }
+  aiAgentContent.responses = aiAgentResponse
 
-    return content
-  })
+  return contents
 }

package/src/action/index.tsx

@@ -125,6 +125,10 @@ async function getContents(
     return []
   }
 
+  if (request.input.payload?.startsWith('do-nothing')) {
+    request.input.payload = undefined
+  }
+
   if (request.input.payload || contentID) {
     const contentsByPayload = await getContentsByPayload(context)
     if (contentsByPayload.length > 0) {

package/src/action/payload.ts

@@ -1,13 +1,20 @@
+import { storeCaseRating } from '@botonic/core'
+import { v7 as uuid } from 'uuid'
+
+import { AGENT_RATING_PAYLOAD, SEPARATOR } from '../constants'
 import { FlowContent } from '../content-fields'
 import { HtNodeWithContent } from '../content-fields/hubtype-fields'
+import { EventAction, trackEvent } from '../tracking'
 import { FlowBuilderContext } from './index'
 
-export async function getContentsByPayload({
-  cmsApi,
-  flowBuilderPlugin,
-  request,
-  contentID,
-}: FlowBuilderContext): Promise<FlowContent[]> {
+export async function getContentsByPayload(
+  context: FlowBuilderContext
+): Promise<FlowContent[]> {
+  const { cmsApi, flowBuilderPlugin, request, contentID } = context
+  if (request.input.payload?.startsWith(AGENT_RATING_PAYLOAD)) {
+    return await resolveRatingPayload(context)
+  }
+
   const id = contentID
     ? cmsApi.getNodeByContentID(contentID)?.id
     : request.input.payload
@@ -19,3 +26,46 @@ export async function getContentsByPayload({
 
   return []
 }
+
+async function resolveRatingPayload(
+  context: FlowBuilderContext
+): Promise<FlowContent[]> {
+  const { cmsApi, flowBuilderPlugin, request } = context
+
+  if (!request.input.payload) {
+    return []
+  }
+
+  const id = request.input.payload
+  const buttonId = id?.split(SEPARATOR)[1]
+  const ratingNode = cmsApi.getRatingNodeByButtonId(buttonId)
+  const ratingButton = cmsApi.getRatingButtonById(ratingNode, buttonId)
+  const { target, text, value } = ratingButton
+  const possibleOptions = ratingNode.content.buttons.map(button => button.text)
+  const possibleValues = ratingNode.content.buttons.map(button => button.value)
+
+  if (request.session._hubtype_case_id) {
+    const event = {
+      action: EventAction.FeedbackCase,
+      feedbackTargetId: request.session._hubtype_case_id,
+      feedbackGroupId: uuid().toString(),
+      possibleOptions,
+      possibleValues,
+      option: text,
+      value,
+    }
+
+    await storeCaseRating(request.session, value)
+    await trackEvent(request, EventAction.FeedbackCase, event)
+  }
+
+  const targetNode = target
+    ? cmsApi.getNodeById<HtNodeWithContent>(target.id)
+    : undefined
+
+  if (targetNode) {
+    return await flowBuilderPlugin.getContentsByNode(targetNode)
+  }
+
+  return []
+}

package/src/api.ts

@@ -19,6 +19,8 @@ import {
   HtNodeWithContentType,
   HtNodeWithoutContentType,
   HtPayloadNode,
+  HtRatingButton,
+  HtRatingNode,
 } from './content-fields/hubtype-fields'
 import { HtSmartIntentNode } from './content-fields/hubtype-fields/smart-intent'
 import { FlowBuilderApiOptions, ProcessEnvNodeEnvs } from './types'
@@ -80,6 +82,32 @@ export class FlowBuilderApi {
     return node as T
   }
 
+  getRatingNodeByButtonId(id: string): HtRatingNode {
+    const ratingNodes = this.flow.nodes.filter(
+      node => node.type === HtNodeWithContentType.RATING
+    ) as HtRatingNode[]
+    const ratingNode = ratingNodes.find(node =>
+      node.content.buttons.some(button => button.id === id)
+    ) as HtRatingNode | undefined
+
+    if (!ratingNode) {
+      throw Error(`Rating node with button id: '${id}' not found`)
+    }
+
+    return ratingNode
+  }
+
+  getRatingButtonById(ratingNode: HtRatingNode, id: string): HtRatingButton {
+    const ratingButton = ratingNode.content.buttons.find(
+      button => button.id === id
+    ) as HtRatingButton | undefined
+    if (!ratingButton) {
+      throw Error(`Rating button with id: '${id}' not found`)
+    }
+
+    return ratingButton
+  }
+
   getNodeByContentID(contentID: string): HtNodeComponent {
     const content = this.flow.nodes.find(node =>
       'code' in node ? node.code === contentID : false

package/src/constants.ts

@@ -8,6 +8,10 @@ export const REG_EXP_PATTERN = /^\/(.*)\/([gimyus]*)$/
 export const UUID_REGEXP =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
+/* ********** PAYLOADS ********** */
+export const AGENT_RATING_PAYLOAD = 'agent-rating'
+
+/* ********** FLOW NAMES ********** */
 export const MAIN_FLOW_NAME = 'Main'
 export const KNOWLEDGE_BASE_FLOW_NAME = 'Knowledge base'
 export const AI_AGENTS_FLOW_NAME = 'AI Agents'

package/src/content-fields/flow-ai-agent.tsx

@@ -1,6 +1,9 @@
-import { Text } from '@botonic/react'
+import { Button, Carousel, Text } from '@botonic/react'
 
+import { SOURCE_INFO_SEPARATOR } from '../constants'
+import { AgenticOutputMessage } from '../types'
 import { ContentFieldsBase } from './content-fields-base'
+import { FlowElement } from './flow-element'
 import { HtAiAgentNode } from './hubtype-fields/ai-agent'
 
 export class FlowAiAgent extends ContentFieldsBase {
@@ -8,7 +11,8 @@ export class FlowAiAgent extends ContentFieldsBase {
   public name: string = ''
   public instructions: string = ''
   public activeTools?: { name: string }[]
-  public text: string = ''
+
+  public responses: AgenticOutputMessage[] = []
 
   static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent {
     const newAiAgent = new FlowAiAgent(component.id)
@@ -20,6 +24,42 @@ export class FlowAiAgent extends ContentFieldsBase {
   }
 
   toBotonic(id: string): JSX.Element {
-    return <Text key={id}>{this.text}</Text>
+    return (
+      <>
+        {this.responses.map(response => {
+          if (response.type === 'text') {
+            return <Text key={id}>{response.content.text}</Text>
+          }
+
+          if (response.type === 'textWithButtons') {
+            return (
+              <Text key={id}>
+                {response.content.text}
+                {response.content.buttons.map((button, buttonIndex) => (
+                  <Button
+                    key={buttonIndex}
+                    payload={`do-nothing${SOURCE_INFO_SEPARATOR}${buttonIndex}`}
+                  >
+                    {button}
+                  </Button>
+                ))}
+              </Text>
+            )
+          }
+
+          if (response.type === 'carousel') {
+            return (
+              <Carousel key={id}>
+                {response.content.elements.map(element =>
+                  FlowElement.fromAIAgent(id, element).toBotonic(id)
+                )}
+              </Carousel>
+            )
+          }
+
+          return <></>
+        })}
+      </>
+    )
   }
 }

package/src/content-fields/flow-button.tsx

@@ -5,6 +5,7 @@ import { FlowBuilderApi } from '../api'
 import { SOURCE_INFO_SEPARATOR } from '../constants'
 import { ContentFieldsBase } from './content-fields-base'
 import { HtButton, HtButtonStyle, HtUrlNode } from './hubtype-fields'
+import { HtRatingButton } from './hubtype-fields/rating'
 
 export class FlowButton extends ContentFieldsBase {
   public text = ''
@@ -34,6 +35,27 @@ export class FlowButton extends ContentFieldsBase {
     return newButton
   }
 
+  static fromAIAgent(button: {
+    id: string
+    text: string
+    payload?: string
+    url?: string
+  }): FlowButton {
+    const newButton = new FlowButton(button.id)
+    newButton.text = button.text
+    newButton.payload = button.payload
+    newButton.url = button.url
+    return newButton
+  }
+
+  static fromRating(button: HtRatingButton): FlowButton {
+    const newButton = new FlowButton(button.id)
+    newButton.text = button.text
+    newButton.payload = button.payload
+    newButton.target = button.target?.id
+    return newButton
+  }
+
   static getUrlId(cmsButton: HtButton, locale: string): string | undefined {
     return cmsButton.url.find(url => url.locale === locale)?.id
   }

package/src/content-fields/flow-element.tsx

@@ -30,6 +30,27 @@ export class FlowElement extends ContentFieldsBase {
     return newElement
   }
 
+  static fromAIAgent(
+    id: string,
+    element: {
+      title: string
+      subtitle: string
+      image: string
+      button: { text: string; url: string }
+    }
+  ) {
+    const newElement = new FlowElement(id)
+    newElement.title = element.title
+    newElement.subtitle = element.subtitle
+    newElement.image = element.image
+    newElement.button = FlowButton.fromAIAgent({
+      id: '',
+      text: element.button.text,
+      url: element.button.url,
+    })
+    return newElement
+  }
+
   toBotonic(parentId: string): JSX.Element {
     return (
       <Element key={`${parentId}-${this.id}`}>

package/src/content-fields/flow-rating.tsx

@@ -0,0 +1,92 @@
+import { isDev, isWebchat, isWhatsapp } from '@botonic/core'
+import {
+  ActionRequest,
+  CustomRatingMessage,
+  Text,
+  WhatsappButtonList,
+} from '@botonic/react'
+
+import { getFlowBuilderPlugin } from '../helpers'
+import { ContentFieldsBase } from './content-fields-base'
+import { FlowButton } from './flow-button'
+import { HtRatingNode, RatingType } from './hubtype-fields'
+
+export class FlowRating extends ContentFieldsBase {
+  public code = ''
+  public text = ''
+  public sendButtonText = ''
+  public ratingType = RatingType.Stars
+  public buttons: FlowButton[] = []
+  public openListButtonText = ''
+
+  static fromHubtypeCMS(cmsText: HtRatingNode, locale: string): FlowRating {
+    const newRating = new FlowRating(cmsText.id)
+    newRating.code = cmsText.code
+    newRating.text = this.getTextByLocale(locale, cmsText.content.text)
+    newRating.sendButtonText = this.getTextByLocale(
+      locale,
+      cmsText.content.send_button_text
+    )
+    newRating.ratingType = cmsText.content.rating_type
+    newRating.buttons = cmsText.content.buttons.map(button =>
+      FlowButton.fromRating(button)
+    )
+    newRating.openListButtonText = this.getTextByLocale(
+      locale,
+      cmsText.content.open_list_button_text
+    )
+
+    return newRating
+  }
+
+  toBotonic(id: string, request: ActionRequest): JSX.Element {
+    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+    const customRatingMessageEnabled =
+      flowBuilderPlugin.customRatingMessageEnabled
+
+    if (isWhatsapp(request.session)) {
+      return (
+        <WhatsappButtonList
+          body={this.text}
+          button={this.openListButtonText}
+          sections={[
+            {
+              rows: this.buttons.map(button => ({
+                id: button.payload as string,
+                title: button.text,
+              })),
+            },
+          ]}
+        />
+      )
+    }
+
+    if (
+      (isWebchat(request.session) || isDev(request.session)) &&
+      customRatingMessageEnabled
+    ) {
+      const payloads = this.buttons
+        .map(button => button.payload)
+        .slice()
+        .reverse()
+
+      return (
+        <CustomRatingMessage
+          payloads={payloads}
+          messageText={this.text}
+          buttonText={this.sendButtonText}
+          ratingType={this.ratingType}
+        />
+      )
+    }
+
+    return (
+      <Text key={id}>
+        {this.text}
+        {this.buttons.map((button, buttonIndex) =>
+          button.renderButton(buttonIndex)
+        )}
+      </Text>
+    )
+  }
+}

package/src/content-fields/hubtype-fields/index.ts

@@ -12,6 +12,7 @@ export * from './knowledge-base'
 export * from './node-types'
 export * from './nodes'
 export * from './payload'
+export * from './rating'
 export * from './smart-intent'
 export * from './text'
 export * from './url'

package/src/content-fields/hubtype-fields/node-types.ts

@@ -13,6 +13,7 @@ export enum HtNodeWithContentType {
   KNOWLEDGE_BASE = 'knowledge-base',
   BOT_ACTION = 'bot-action',
   AI_AGENT = 'ai-agent',
+  RATING = 'rating',
 }
 
 export enum HtNodeWithoutContentType {

package/src/content-fields/hubtype-fields/nodes.ts

@@ -9,6 +9,7 @@ import { HtImageNode } from './image'
 import { HtKeywordNode } from './keyword'
 import { HtKnowledgeBaseNode } from './knowledge-base'
 import { HtPayloadNode } from './payload'
+import { HtRatingNode } from './rating'
 import { HtSmartIntentNode } from './smart-intent'
 import { HtTextNode } from './text'
 import { HtUrlNode } from './url'
@@ -31,6 +32,7 @@ export type HtNodeWithContent =
   | HtKnowledgeBaseNode
   | HtBotActionNode
   | HtAiAgentNode
+  | HtRatingNode
 
 export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode | HtGoToFlow
 

package/src/content-fields/hubtype-fields/rating.ts

@@ -0,0 +1,26 @@
+import { HtBaseNode, HtNodeLink, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export enum RatingType {
+  Stars = 'stars',
+  Smileys = 'smileys',
+}
+
+export interface HtRatingButton {
+  id: string
+  text: string
+  payload: string
+  value: number
+  target?: HtNodeLink
+}
+
+export interface HtRatingNode extends HtBaseNode {
+  type: HtNodeWithContentType.RATING
+  content: {
+    text: HtTextLocale[]
+    buttons: HtRatingButton[]
+    rating_type: RatingType
+    send_button_text: HtTextLocale[]
+    open_list_button_text: HtTextLocale[]
+  }
+}

package/src/content-fields/index.ts

@@ -7,10 +7,12 @@ import {
   DISABLED_MEMORY_LENGTH,
   FlowKnowledgeBase,
 } from './flow-knowledge-base'
+import { FlowRating } from './flow-rating'
 import { FlowText } from './flow-text'
 import { FlowVideo } from './flow-video'
 import { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
 import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
+
 export { ContentFieldsBase } from './content-fields-base'
 export { FlowButton } from './flow-button'
 export { FlowElement } from './flow-element'
@@ -21,6 +23,7 @@ export {
   FlowHandoff,
   FlowImage,
   FlowKnowledgeBase,
+  FlowRating,
   FlowText,
   FlowVideo,
   FlowWhatsappButtonList,
@@ -38,5 +41,6 @@ export type FlowContent =
   | FlowKnowledgeBase
   | FlowBotAction
   | FlowAiAgent
+  | FlowRating
 
 export { DISABLED_MEMORY_LENGTH }

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list-section.tsx

@@ -4,8 +4,8 @@ import {
 } from '@botonic/react'
 
 import { FlowBuilderApi } from '../../api'
+import { ContentFieldsBase } from '../content-fields-base'
 import { HtWhatsappButtonListSection } from '../hubtype-fields'
-import { ContentFieldsBase } from './../content-fields-base'
 import { FlowWhatsappButtonListRow } from './flow-whatsapp-button-list-row'
 
 export class FlowWhatsappButtonListSection extends ContentFieldsBase {

package/src/content-fields/whatsapp-button-list/flow-whatsapp-button-list.tsx

@@ -2,8 +2,8 @@ import { WhatsappButtonList } from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../../api'
+import { ContentFieldsBase } from '../content-fields-base'
 import { HtWhatsappButtonListNode } from '../hubtype-fields'
-import { ContentFieldsBase } from './../content-fields-base'
 import { FlowWhatsappButtonListSection } from './flow-whatsapp-button-list-section'
 
 export class FlowWhatsappButtonList extends ContentFieldsBase {

package/src/index.ts

@@ -21,6 +21,7 @@ import {
   FlowHandoff,
   FlowImage,
   FlowKnowledgeBase,
+  FlowRating,
   FlowText,
   FlowVideo,
   FlowWhatsappButtonList,
@@ -69,6 +70,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   // TODO: Rethink how we construct FlowBuilderApi to be simpler
   public jsonVersion: FlowBuilderJSONVersion
   public apiUrl: string
+  public customRatingMessageEnabled: boolean
 
   constructor(options: BotonicPluginFlowBuilderOptions<ResolvedPlugins, any>) {
     this.apiUrl = options.apiUrl || FLOW_BUILDER_API_URL_PROD
@@ -90,6 +92,8 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       allowKnowledgeBases: options.inShadowing?.allowKnowledgeBases || false,
     }
     this.contentFilters = options.contentFilters || []
+    this.customRatingMessageEnabled =
+      options.customRatingMessageEnabled || false
   }
 
   resolveFlowUrl(request: PluginPreRequest): string {
@@ -240,6 +244,9 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       case HtNodeWithContentType.AI_AGENT:
         return FlowAiAgent.fromHubtypeCMS(hubtypeContent)
 
+      case HtNodeWithContentType.RATING:
+        return FlowRating.fromHubtypeCMS(hubtypeContent, locale)
+
       case HtNodeWithContentType.BOT_ACTION:
         return FlowBotAction.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
 

package/src/tracking.ts

@@ -14,6 +14,7 @@ export enum EventAction {
   IntentSmart = 'nlu_intent_smart',
   Knowledgebase = 'knowledgebase',
   Fallback = 'fallback',
+  FeedbackCase = 'feedback_case',
 }
 
 export enum KnowledgebaseFailReason {

package/src/types.ts

@@ -24,6 +24,7 @@ export interface BotonicPluginFlowBuilderOptions<
   smartIntentsConfig?: { numSmartIntentsToUse: number }
   inShadowing?: Partial<InShadowingConfig>
   contentFilters?: ContentFilter<TPlugins, TExtraData>[]
+  customRatingMessageEnabled?: boolean
 }
 
 export type TrackEventFunction<
@@ -52,7 +53,7 @@ export type AiAgentFunction<
 > = (
   request: BotContext<TPlugins, TExtraData>,
   aiAgentArgs: AiAgentArgs
-) => Promise<AiAgentResponse | undefined>
+) => Promise<AgenticOutputMessage[] | undefined>
 
 export interface AiAgentArgs {
   name: string
@@ -93,13 +94,6 @@ export interface KnowledgeBaseResponse {
   answer: string
 }
 
-export interface AiAgentResponse {
-  role: string
-  content?: string
-  toolName?: string
-  toolOutput?: string | null
-}
-
 export interface SmartIntentResponse {
   data: {
     smart_intent_title: string
@@ -114,3 +108,44 @@ export interface SmartIntentResponse {
 export interface PayloadParamsBase {
   followUpContentID?: string
 }
+
+export interface OutputBaseMessage {
+  type: 'text' | 'textWithButtons' | 'carousel' | 'exit'
+}
+
+export interface TextMessage extends OutputBaseMessage {
+  type: 'text'
+  content: {
+    text: string
+  }
+}
+
+export interface TextWithButtonsMessage extends OutputBaseMessage {
+  type: 'textWithButtons'
+  content: {
+    text: string
+    buttons: string[]
+  }
+}
+
+export interface CarouselMessage extends OutputBaseMessage {
+  type: 'carousel'
+  content: {
+    elements: {
+      title: string
+      subtitle: string
+      image: string
+      button: { text: string; url: string }
+    }[]
+  }
+}
+
+export interface ExitMessage extends OutputBaseMessage {
+  type: 'exit'
+}
+
+export type AgenticOutputMessage =
+  | TextMessage
+  | TextWithButtonsMessage
+  | CarouselMessage
+  | ExitMessage