@botonic/plugin-flow-builder 0.46.1 → 0.47.0

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

@@ -1,14 +1,32 @@
-import { type AgenticOutputMessage, VerbosityLevel } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
-
-import { trackOneContent } from '../tracking'
+import {
+  type AgenticOutputMessage,
+  type BotContext,
+  EventAction,
+  type EventAiAgent,
+  type GuardrailRule,
+  type HubtypeAssistantMessage,
+  type InferenceResponse,
+  VerbosityLevel,
+} from '@botonic/core'
+import {
+  type FlowBuilderContentMessage,
+  FlowBuilderContentSchema,
+} from '../structured-output/flow-builder-content'
+import {
+  getCommonFlowContentEventArgsForContentId,
+  trackEvent,
+} from '../tracking'
+import { HubtypeAssistantContent } from '../utils/ai-agent'
+import { getFlowBuilderPlugin } from '../utils/get-flow-builder-plugin'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowCarousel } from './flow-carousel'
 import { FlowText } from './flow-text'
+import type { HtNodeWithContent } from './hubtype-fields'
 import type {
   HtAiAgentNode,
   HtInputGuardrailRule,
 } from './hubtype-fields/ai-agent'
+import type { FlowContent } from './index'
 
 export class FlowAiAgent extends ContentFieldsBase {
   public name: string = ''
@@ -19,7 +37,9 @@ export class FlowAiAgent extends ContentFieldsBase {
   public inputGuardrailRules: HtInputGuardrailRule[]
   public sources?: { id: string; name: string }[]
 
-  public responses: AgenticOutputMessage[] = []
+  public aiAgentResponse?: InferenceResponse<FlowBuilderContentMessage>
+  public messages: AgenticOutputMessage<FlowBuilderContentMessage>[] = []
+  public jsxElements: JSX.Element[] = []
 
   static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent {
     const newAiAgent = new FlowAiAgent(component.id)
@@ -37,31 +57,149 @@ export class FlowAiAgent extends ContentFieldsBase {
     return newAiAgent
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
-    // We can call trackFlowContent here but the function no track events for AiAgent contents
-    // Review how we can track here the ai agent event
-    await trackOneContent(request, this)
+  async resolveAIAgentResponse(
+    botContext: BotContext,
+    previousContents?: FlowContent[]
+  ): Promise<InferenceResponse<FlowBuilderContentMessage> | undefined> {
+    const aiAgentResponse = await this.getAIAgentResponse(
+      botContext,
+      previousContents
+    )
+
+    if (aiAgentResponse) {
+      this.aiAgentResponse = aiAgentResponse
+      await this.trackAiAgentResponse(botContext)
+      this.messages = aiAgentResponse.messages
+      await this.messagesToBotonicJSXElements(botContext)
+    }
+
+    return aiAgentResponse
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    return (
-      <>
-        {this.responses.map((response: AgenticOutputMessage) => {
-          if (
-            response.type === 'text' ||
-            response.type === 'textWithButtons' ||
-            response.type === 'botExecutor'
-          ) {
-            return FlowText.fromAIAgent(id, response)
-          }
-
-          if (response.type === 'carousel') {
-            return FlowCarousel.fromAIAgent(id, response, request)
-          }
-
-          return <></>
-        })}
-      </>
+  async getAIAgentResponse(
+    botContext: BotContext,
+    previousContents?: FlowContent[]
+  ): Promise<InferenceResponse<FlowBuilderContentMessage> | undefined> {
+    const previousHubtypeContents: HubtypeAssistantMessage[] =
+      previousContents?.map(content => {
+        return {
+          role: 'assistant',
+          content: HubtypeAssistantContent.adapt(content),
+        }
+      }) || []
+
+    const activeInputGuardrailRules: GuardrailRule[] =
+      this.inputGuardrailRules
+        ?.filter(rule => rule.is_active)
+        ?.map(rule => ({
+          name: rule.name,
+          description: rule.description,
+        })) || []
+
+    const flowBuilderPlugin = getFlowBuilderPlugin(botContext.plugins)
+
+    const aiAgentResponse = await flowBuilderPlugin.getAiAgentResponse?.(
+      botContext,
+      {
+        name: this.name,
+        instructions: this.instructions,
+        model: this.model,
+        verbosity: this.verbosity,
+        activeTools: this.activeTools,
+        inputGuardrailRules: activeInputGuardrailRules,
+        sourceIds: this.sources?.map(source => source.id),
+        outputMessagesSchemas: [FlowBuilderContentSchema],
+        previousHubtypeMessages: previousHubtypeContents,
+      }
     )
+
+    return aiAgentResponse
+  }
+
+  async trackFlow(): Promise<void> {
+    return
+  }
+
+  async trackAiAgentResponse(botContext: BotContext) {
+    const { flowThreadId, flowId, flowName, flowNodeId } =
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
+
+    const event: EventAiAgent = {
+      action: EventAction.AiAgent,
+      flowThreadId: flowThreadId,
+      flowId: flowId,
+      flowName: flowName,
+      flowNodeId: flowNodeId,
+      flowNodeContentId: this.name,
+      flowNodeIsMeaningful: true,
+      toolsExecuted: this.aiAgentResponse?.toolsExecuted ?? [],
+      memoryLength: this.aiAgentResponse?.memoryLength ?? 0,
+      inputMessageId: botContext.input.message_id!,
+      exit: this.aiAgentResponse?.exit ?? true,
+      inputGuardrailsTriggered:
+        this.aiAgentResponse?.inputGuardrailsTriggered ?? [],
+      outputGuardrailsTriggered: [], //aiAgentResponse.outputGuardrailsTriggered,
+      error: this.aiAgentResponse?.error ?? false,
+    }
+    const { action, ...eventArgs } = event
+
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async getFlowContentsByContentId(
+    botContext: BotContext,
+    contentId: string
+  ): Promise<FlowContent[]> {
+    const flowBuilderPlugin = getFlowBuilderPlugin(botContext.plugins)
+    const cmsApi = flowBuilderPlugin.cmsApi
+    const node = cmsApi.getNodeByContentID(contentId)
+    const flowContents = await flowBuilderPlugin.getContentsByNode(
+      node as HtNodeWithContent
+    )
+    return flowContents
+  }
+
+  async messagesToBotonicJSXElements(botContext: BotContext): Promise<void> {
+    for (const message of this.messages) {
+      if (
+        message.type === 'text' ||
+        message.type === 'textWithButtons' ||
+        message.type === 'botExecutor'
+      ) {
+        this.jsxElements.push(FlowText.fromAIAgent(this.id, message))
+      }
+
+      if (message.type === 'carousel') {
+        this.jsxElements.push(
+          FlowCarousel.fromAIAgent(this.id, message, botContext)
+        )
+      }
+
+      if (message.type === 'flowBuilderContent') {
+        const flowContents = await this.getFlowContentsByContentId(
+          botContext,
+          message.contentId
+        )
+        for (const content of flowContents) {
+          await content.processContent(botContext)
+          this.jsxElements.push(content.toBotonic(botContext))
+        }
+      }
+    }
+    return
+  }
+
+  async processContent(
+    botContext: BotContext,
+    previousContents?: FlowContent[]
+  ): Promise<void> {
+    if (this.messages.length === 0) {
+      await this.resolveAIAgentResponse(botContext, previousContents)
+    }
+    return
+  }
+
+  toBotonic(): JSX.Element {
+    return <>{this.jsxElements}</>
   }
 }

package/src/content-fields/flow-bot-action.tsx

@@ -1,4 +1,9 @@
-import { BotonicAction, EventAction, type EventBotAction } from '@botonic/core'
+import {
+  type BotContext,
+  BotonicAction,
+  EventAction,
+  type EventBotAction,
+} from '@botonic/core'
 import type { ActionRequest } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../api'
@@ -25,9 +30,9 @@ export class FlowBotAction extends ContentFieldsBase {
     return newBotAction
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
     const eventBotAction: EventBotAction = {
       action: EventAction.BotAction,
       flowThreadId,
@@ -39,11 +44,17 @@ export class FlowBotAction extends ContentFieldsBase {
       payload: this.payload,
     }
     const { action, ...eventArgs } = eventBotAction
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  doBotAction(botContext: ActionRequest): void {
+    botContext.session._botonic_action = `${BotonicAction.Redirect}:${this.payload}`
   }
 
-  doBotAction(request: ActionRequest): void {
-    request.session._botonic_action = `${BotonicAction.Redirect}:${this.payload}`
+  async processContent(botContext: BotContext): Promise<void> {
+    this.doBotAction(botContext)
+    await this.trackFlow(botContext)
+    return
   }
 
   toBotonic(): JSX.Element {

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

@@ -1,4 +1,5 @@
-import { type ActionRequest, Button, Reply, type Webview } from '@botonic/react'
+import type { BotContext } from '@botonic/core'
+import { Button, Reply, type Webview } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../api'
 import { SOURCE_INFO_SEPARATOR } from '../constants'
@@ -92,11 +93,13 @@ export class FlowButton extends ContentFieldsBase {
     text: string
     payload?: string
     url?: string
+    target?: string
   }): FlowButton {
     const newButton = new FlowButton(button.id)
     newButton.text = button.text
     if (button.url) {
       newButton.url = button.url
+      newButton.target = button.target
     } else {
       newButton.payload = button.payload
     }
@@ -126,12 +129,16 @@ export class FlowButton extends ContentFieldsBase {
     return FlowWebview.fromHubtypeCMS(targetNode)
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     if (this.flowWebview) {
-      await this.flowWebview.trackFlow(request)
+      await this.flowWebview.trackFlow(botContext)
     }
   }
 
+  async processContent(): Promise<void> {
+    return
+  }
+
   renderButton(buttonIndex: number, buttonStyle?: HtButtonStyle): JSX.Element {
     if (buttonStyle === HtButtonStyle.QUICK_REPLY) {
       return (

package/src/content-fields/flow-capture-user-input.tsx

@@ -1,6 +1,6 @@
-import type { ActionRequest } from '@botonic/react'
+import type { BotContext } from '@botonic/core'
 
-import { getFlowBuilderPlugin } from '../helpers'
+import { getFlowBuilderPlugin } from '../utils/get-flow-builder-plugin'
 import { ContentFieldsBase } from './content-fields-base'
 import {
   HtAiValidationType,
@@ -30,13 +30,16 @@ export class FlowCaptureUserInput extends ContentFieldsBase {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async trackFlow(_request: ActionRequest): Promise<void> {
+  async trackFlow(_botContext: BotContext): Promise<void> {
     return
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  toBotonic(_id: string, request: ActionRequest): JSX.Element {
-    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  async processContent(): Promise<void> {
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
+    const flowBuilderPlugin = getFlowBuilderPlugin(botContext.plugins)
     const cmsApi = flowBuilderPlugin.cmsApi
     cmsApi.setCaptureUserInputId(this.id)
 

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

@@ -1,4 +1,8 @@
-import { type CarouselMessage, isWhatsapp } from '@botonic/core'
+import {
+  type BotContext,
+  type CarouselMessage,
+  isWhatsapp,
+} from '@botonic/core'
 import {
   type ActionRequest,
   Button,
@@ -111,10 +115,10 @@ export class FlowCarousel extends ContentFieldsBase {
   static fromAIAgent(
     id: string,
     carouselMessage: CarouselMessage,
-    request: ActionRequest
+    botContext: ActionRequest
   ): JSX.Element {
     if (
-      isWhatsapp(request.session) &&
+      isWhatsapp(botContext.session) &&
       FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
     ) {
       if (
@@ -168,9 +172,10 @@ export class FlowCarousel extends ContentFieldsBase {
     return (
       <Carousel key={id}>
         {carouselMessage.content.elements.map((element, index) =>
-          FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(
-            id
-          )
+          FlowElement.fromAIAgent(
+            `${id}-element-${index}`,
+            element
+          ).renderElement(id)
         )}
       </Carousel>
     )
@@ -196,10 +201,15 @@ export class FlowCarousel extends ContentFieldsBase {
     }
   }
 
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  toBotonic(botContext: BotContext): JSX.Element {
     const carouselMessage = this.toCarouselMessage(this.elements)
     if (
-      isWhatsapp(request.session) &&
+      isWhatsapp(botContext.session) &&
       FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
     ) {
       if (this.elements.length === 1 && this.elements[0].button?.url) {
@@ -209,7 +219,7 @@ export class FlowCarousel extends ContentFieldsBase {
 
         return (
           <WhatsappCTAUrlButton
-            key={id}
+            key={this.id}
             body={element.title}
             headerType={WhatsappCTAUrlHeaderType.Image}
             headerImage={element.image}
@@ -246,8 +256,8 @@ export class FlowCarousel extends ContentFieldsBase {
       )
     }
     return (
-      <Carousel key={id}>
-        {this.elements.map(element => element.toBotonic(id))}
+      <Carousel key={this.id}>
+        {this.elements.map(element => element.renderElement(this.id))}
       </Carousel>
     )
   }

package/src/content-fields/flow-channel-conditional.tsx

@@ -1,5 +1,8 @@
-import { EventAction, type EventConditionalChannel } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+import {
+  type BotContext,
+  EventAction,
+  type EventConditionalChannel,
+} from '@botonic/core'
 
 import {
   getCommonFlowContentEventArgsForContentId,
@@ -16,18 +19,18 @@ export class FlowChannelConditional extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtChannelConditionalNode,
-    request: ActionRequest
+    botContext: BotContext
   ): FlowChannelConditional {
     const newChannelConditional = new FlowChannelConditional(component.id)
     newChannelConditional.code = component.code
     newChannelConditional.resultMapping = component.content.result_mapping
-    newChannelConditional.setConditionalResult(request)
+    newChannelConditional.setConditionalResult(botContext)
 
     return newChannelConditional
   }
 
-  setConditionalResult(request: ActionRequest): void {
-    const provider = request.session.user.provider
+  setConditionalResult(botContext: BotContext): void {
+    const provider = botContext.session.user.provider
     const conditionalResult =
       this.resultMapping.find(rMap => rMap.result === provider) ||
       this.resultMapping.find(rMap => rMap.result === 'default')
@@ -41,9 +44,9 @@ export class FlowChannelConditional extends ContentFieldsBase {
     this.followUp = conditionalResult.target
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
 
     const eventChannelConditional: EventConditionalChannel = {
       action: EventAction.ConditionalChannel,
@@ -56,7 +59,11 @@ export class FlowChannelConditional extends ContentFieldsBase {
       channel: this.channelResult,
     }
     const { action, ...eventArgs } = eventChannelConditional
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
   }
 
   toBotonic(): JSX.Element {

package/src/content-fields/flow-country-conditional.tsx

@@ -1,5 +1,8 @@
-import { EventAction, type EventConditionalCountry } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+import {
+  type BotContext,
+  EventAction,
+  type EventConditionalCountry,
+} from '@botonic/core'
 
 import {
   getCommonFlowContentEventArgsForContentId,
@@ -15,18 +18,18 @@ export class FlowCountryConditional extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtCountryConditionalNode,
-    request: ActionRequest
+    botContext: BotContext
   ): FlowCountryConditional {
     const newCountryConditional = new FlowCountryConditional(component.id)
     newCountryConditional.code = component.code
     newCountryConditional.resultMapping = component.content.result_mapping
-    newCountryConditional.setConditionalResult(request)
+    newCountryConditional.setConditionalResult(botContext)
 
     return newCountryConditional
   }
 
-  setConditionalResult(request: ActionRequest): void {
-    const country = request.getUserCountry()
+  setConditionalResult(botContext: BotContext): void {
+    const country = botContext.getUserCountry()
     const conditionalResult =
       this.resultMapping.find(rMap => rMap.result === country) ||
       this.resultMapping.find(rMap => rMap.result === 'default')
@@ -39,9 +42,9 @@ export class FlowCountryConditional extends ContentFieldsBase {
     this.followUp = conditionalResult.target
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
     if (!this.conditionalResult?.result) {
       console.warn(
         `Tracking event for node ${this.code} but no conditional result found`
@@ -58,7 +61,12 @@ export class FlowCountryConditional extends ContentFieldsBase {
       country: (this.conditionalResult?.result as string) ?? '',
     }
     const { action, ...eventArgs } = eventCountryConditional
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
+  }
+
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
   }
 
   toBotonic(): JSX.Element {

package/src/content-fields/flow-custom-conditional.tsx

@@ -1,5 +1,8 @@
-import { EventAction, type EventConditionalCustom } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
+import {
+  type BotContext,
+  EventAction,
+  type EventConditionalCustom,
+} from '@botonic/core'
 
 import {
   getCommonFlowContentEventArgsForContentId,
@@ -22,13 +25,13 @@ export class FlowCustomConditional extends ContentFieldsBase {
 
   static fromHubtypeCMS(
     component: HtCustomConditionalNode,
-    request: ActionRequest
+    botContext: BotContext
   ): FlowCustomConditional {
     const newCustomConditional = new FlowCustomConditional(component.id)
     newCustomConditional.code = component.code
     newCustomConditional.arguments = component.content.arguments
     newCustomConditional.resultMapping = component.content.result_mapping
-    newCustomConditional.setConditionalResult(request)
+    newCustomConditional.setConditionalResult(botContext)
     newCustomConditional.variableFormat = (
       component.content.arguments as HtFunctionArgument[]
     )[0].type
@@ -36,7 +39,7 @@ export class FlowCustomConditional extends ContentFieldsBase {
     return newCustomConditional
   }
 
-  setConditionalResult(request: ActionRequest): void {
+  setConditionalResult(botContext: BotContext): void {
     const functionArgument = this.arguments.find(arg => {
       if ('name' in arg) {
         return arg.name === 'keyPath'
@@ -52,7 +55,7 @@ export class FlowCustomConditional extends ContentFieldsBase {
       throw new Error(`Key path not found for node ${this.code}`)
     }
 
-    const botVariable = this.getValueFromKeyPath(request, keyPath)
+    const botVariable = this.getValueFromKeyPath(botContext, keyPath)
 
     let conditionalResult =
       this.resultMapping.find(rMap => rMap.result === botVariable) ||
@@ -80,9 +83,9 @@ export class FlowCustomConditional extends ContentFieldsBase {
     this.followUp = conditionalResult.target
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
+      getCommonFlowContentEventArgsForContentId(botContext, this.id)
     if (!this.conditionalResult?.result) {
       console.warn(
         `Tracking event for node ${this.code} but no conditional result found`
@@ -100,7 +103,7 @@ export class FlowCustomConditional extends ContentFieldsBase {
       variableFormat: this.variableFormat,
     }
     const { action, ...eventArgs } = eventCustomConditional
-    await trackEvent(request, action, eventArgs)
+    await trackEvent(botContext, action, eventArgs)
   }
 
   private isBooleanConditional(resultMapping: HtFunctionResult[]): boolean {
@@ -111,6 +114,11 @@ export class FlowCustomConditional extends ContentFieldsBase {
     )
   }
 
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
   toBotonic() {
     return <></>
   }

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

@@ -1,11 +1,5 @@
-import type { Button } from '@botonic/core'
-import {
-  type ActionRequest,
-  Element,
-  Pic,
-  Subtitle,
-  Title,
-} from '@botonic/react'
+import type { BotContext, Button } from '@botonic/core'
+import { Element, Pic, Subtitle, Title } from '@botonic/react'
 
 import type { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
@@ -60,13 +54,18 @@ export class FlowElement extends ContentFieldsBase {
     return newElement
   }
 
-  async trackFlow(request: ActionRequest): Promise<void> {
+  async trackFlow(botContext: BotContext): Promise<void> {
     if (this.button) {
-      await this.button.trackFlow(request)
+      await this.button.trackFlow(botContext)
     }
   }
 
-  toBotonic(parentId: string): JSX.Element {
+  async processContent(botContext: BotContext): Promise<void> {
+    await this.trackFlow(botContext)
+    return
+  }
+
+  renderElement(parentId: string): JSX.Element {
     return (
       <Element key={`${parentId}-${this.id}`}>
         <Pic src={this.image} />