@botonic/plugin-flow-builder 0.46.1 → 2.23.0

package/src/content-fields/content-fields-base.ts

@@ -1,100 +0,0 @@
-import type { ActionRequest } from '@botonic/react'
-
-import {
-  ACCESS_TOKEN_VARIABLE_KEY,
-  VARIABLE_PATTERN_GLOBAL,
-} from '../constants'
-import type {
-  HtMediaFileLocale,
-  HtNodeLink,
-  HtQueueLocale,
-  HtTextLocale,
-  HtVideoLocale,
-} from './hubtype-fields'
-
-export abstract class ContentFieldsBase {
-  public code: string
-  public followUp?: HtNodeLink
-
-  constructor(public readonly id: string) {}
-
-  abstract trackFlow(request: ActionRequest): Promise<void>
-
-  static getTextByLocale(locale: string, text: HtTextLocale[]): string {
-    const result = text.find(t => t.locale === locale)
-    return result?.message ?? ''
-  }
-
-  static getAssetByLocale(locale: string, asset: HtMediaFileLocale[]): string {
-    const result = asset.find(i => i.locale === locale)
-    return result?.file ?? ''
-  }
-
-  static getVideoByLocale(locale: string, video: HtVideoLocale[]): string {
-    const result = video.find(v => v.locale === locale)
-    return result?.url ?? ''
-  }
-
-  static getQueueByLocale(
-    locale: string,
-    queues: HtQueueLocale[]
-  ): HtQueueLocale | undefined {
-    return queues.find(queue => queue.locale === locale)
-  }
-
-  replaceVariables(text: string, request: ActionRequest): string {
-    const matches = text.match(VARIABLE_PATTERN_GLOBAL)
-
-    let replacedText = text
-    if (matches && request) {
-      matches.forEach(match => {
-        // remove \\ ( escape for _ ) added by text node with markdown
-        const keyPath = match.slice(1, -1).replaceAll('\\', '')
-        const botVariable = keyPath.endsWith(ACCESS_TOKEN_VARIABLE_KEY)
-          ? match
-          : this.getValueFromKeyPath(request, keyPath)
-        // TODO In local if change variable and render multiple times the value is always the last update
-        replacedText = replacedText.replace(
-          match,
-          this.isValidType(botVariable) ? botVariable : match
-        )
-      })
-    }
-
-    return replacedText
-  }
-
-  getValueFromKeyPath(request: ActionRequest, keyPath: string): any {
-    if (keyPath.startsWith('session.user.contact_info.')) {
-      const name = keyPath.split('.').at(-1)
-      return request.session.user.contact_info?.find(
-        contact => contact.name === name
-      )?.value
-    }
-
-    if (keyPath.startsWith('input.') || keyPath.startsWith('session.')) {
-      return keyPath
-        .split('.')
-        .reduce((object, key) => this.resolveObjectKey(object, key), request)
-    }
-
-    return keyPath
-      .split('.')
-      .reduce(
-        (object, key) => this.resolveObjectKey(object, key),
-        request.session.user.extra_data
-      )
-  }
-
-  private resolveObjectKey(object: any, key: string): any {
-    if (object && object[key] !== undefined) {
-      return object[key]
-    }
-    return undefined
-  }
-
-  private isValidType(botVariable: any): boolean {
-    const validTypes = ['boolean', 'string', 'number']
-    return validTypes.includes(typeof botVariable)
-  }
-}

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

@@ -1,67 +0,0 @@
-import { type AgenticOutputMessage, VerbosityLevel } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
-
-import { trackOneContent } from '../tracking'
-import { ContentFieldsBase } from './content-fields-base'
-import { FlowCarousel } from './flow-carousel'
-import { FlowText } from './flow-text'
-import type {
-  HtAiAgentNode,
-  HtInputGuardrailRule,
-} from './hubtype-fields/ai-agent'
-
-export class FlowAiAgent extends ContentFieldsBase {
-  public name: string = ''
-  public instructions: string = ''
-  public model: string = ''
-  public verbosity: VerbosityLevel = VerbosityLevel.Medium
-  public activeTools?: { name: string }[]
-  public inputGuardrailRules: HtInputGuardrailRule[]
-  public sources?: { id: string; name: string }[]
-
-  public responses: AgenticOutputMessage[] = []
-
-  static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent {
-    const newAiAgent = new FlowAiAgent(component.id)
-    newAiAgent.code = component.code
-    newAiAgent.name = component.content.name
-    newAiAgent.instructions = component.content.instructions
-    newAiAgent.model = component.content.model
-    newAiAgent.verbosity = component.content.verbosity
-    newAiAgent.activeTools = component.content.active_tools
-    newAiAgent.inputGuardrailRules =
-      component.content.input_guardrail_rules || []
-    newAiAgent.sources = component.content.sources
-    newAiAgent.followUp = component.follow_up
-
-    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)
-  }
-
-  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 <></>
-        })}
-      </>
-    )
-  }
-}

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

@@ -1,52 +0,0 @@
-import { BotonicAction, EventAction, type EventBotAction } from '@botonic/core'
-import type { ActionRequest } from '@botonic/react'
-
-import type { FlowBuilderApi } from '../api'
-import {
-  getCommonFlowContentEventArgsForContentId,
-  trackEvent,
-} from '../tracking'
-import { ContentFieldsBase } from './content-fields-base'
-import type { HtBotActionNode } from './hubtype-fields'
-
-export class FlowBotAction extends ContentFieldsBase {
-  public code: string
-  public payload: string
-
-  static fromHubtypeCMS(
-    cmsBotAction: HtBotActionNode,
-    cmsApi: FlowBuilderApi
-  ): FlowBotAction {
-    const newBotAction = new FlowBotAction(cmsBotAction.id)
-    newBotAction.code = cmsBotAction.code
-    newBotAction.payload = cmsApi.createPayloadWithParams(cmsBotAction)
-    newBotAction.followUp = cmsBotAction.follow_up
-
-    return newBotAction
-  }
-
-  async trackFlow(request: ActionRequest): Promise<void> {
-    const { flowThreadId, flowId, flowName, flowNodeId, flowNodeContentId } =
-      getCommonFlowContentEventArgsForContentId(request, this.id)
-    const eventBotAction: EventBotAction = {
-      action: EventAction.BotAction,
-      flowThreadId,
-      flowId,
-      flowName,
-      flowNodeId,
-      flowNodeContentId,
-      flowNodeIsMeaningful: false,
-      payload: this.payload,
-    }
-    const { action, ...eventArgs } = eventBotAction
-    await trackEvent(request, action, eventArgs)
-  }
-
-  doBotAction(request: ActionRequest): void {
-    request.session._botonic_action = `${BotonicAction.Redirect}:${this.payload}`
-  }
-
-  toBotonic(): JSX.Element {
-    return <></>
-  }
-}

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

@@ -1,163 +0,0 @@
-import { type ActionRequest, Button, Reply, type Webview } from '@botonic/react'
-
-import type { FlowBuilderApi } from '../api'
-import { SOURCE_INFO_SEPARATOR } from '../constants'
-import { ContentFieldsBase } from './content-fields-base'
-import { FlowWebview } from './flow-webview'
-import {
-  type HtButton,
-  HtButtonStyle,
-  type HtNodeWithContent,
-  HtNodeWithContentType,
-  type HtUrlNode,
-} from './hubtype-fields'
-import type { HtRatingButton } from './hubtype-fields/rating'
-
-export class FlowButton extends ContentFieldsBase {
-  public text = ''
-  public url?: string
-  public payload?: string
-  public target?: string
-  public webview?: Webview
-  public flowWebview?: FlowWebview // Used for tracking
-  public params?: Record<string, string>
-
-  static fromHubtypeCMS(
-    cmsButton: HtButton,
-    locale: string,
-    cmsApi: FlowBuilderApi
-  ): FlowButton {
-    const urlId = FlowButton.getUrlId(cmsButton, locale)
-
-    const newButton = new FlowButton(cmsButton.id)
-    newButton.text = FlowButton.getTextByLocale(locale, cmsButton.text)
-    if (cmsButton.target) {
-      const webview = FlowButton.getTargetWebview(cmsApi, cmsButton.target.id)
-      if (webview) {
-        newButton.flowWebview = webview
-        const params = FlowButton.getWebviewParams(webview, cmsApi)
-        newButton.webview = { name: webview.webviewComponentName }
-        newButton.params = params
-      } else {
-        newButton.payload = cmsApi.getPayload(cmsButton.target)
-      }
-    }
-
-    if (cmsButton.url && urlId) {
-      const urlNode = cmsApi.getNodeById<HtUrlNode>(urlId)
-      newButton.url = urlNode.content.url
-    }
-
-    return newButton
-  }
-
-  private static getWebviewParams(
-    webview: FlowWebview,
-    cmsApi: FlowBuilderApi
-  ) {
-    const params: Record<string, string> = {
-      webviewId: webview.webviewTargetId,
-      t: Date.now().toString(),
-    }
-    const exitSuccessContentID = FlowButton.getExitSuccessContentID(
-      webview,
-      cmsApi
-    )
-
-    if (exitSuccessContentID) {
-      params.exitSuccessContentID = exitSuccessContentID
-    }
-
-    return params
-  }
-
-  private static getExitSuccessContentID(
-    webview: FlowWebview,
-    cmsApi: FlowBuilderApi
-  ) {
-    const webviewSuccessExit = webview.exits?.find(
-      exit => exit.name === 'Success'
-    )
-    const exitSuccessId = webviewSuccessExit?.target?.id
-    if (!exitSuccessId) {
-      return undefined
-    }
-    const exitNode = cmsApi.getNodeById<HtNodeWithContent>(exitSuccessId)
-
-    return exitNode.code
-  }
-
-  static fromAIAgent(button: {
-    id: string
-    text: string
-    payload?: string
-    url?: string
-  }): FlowButton {
-    const newButton = new FlowButton(button.id)
-    newButton.text = button.text
-    if (button.url) {
-      newButton.url = button.url
-    } else {
-      newButton.payload = button.payload
-    }
-    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
-  }
-
-  static getTargetWebview(
-    cmsApi: FlowBuilderApi,
-    targetId: string
-  ): FlowWebview | undefined {
-    const targetNode = cmsApi.getNodeById(targetId)
-    if (targetNode.type !== HtNodeWithContentType.WEBVIEW) {
-      return undefined
-    }
-    return FlowWebview.fromHubtypeCMS(targetNode)
-  }
-
-  async trackFlow(request: ActionRequest): Promise<void> {
-    if (this.flowWebview) {
-      await this.flowWebview.trackFlow(request)
-    }
-  }
-
-  renderButton(buttonIndex: number, buttonStyle?: HtButtonStyle): JSX.Element {
-    if (buttonStyle === HtButtonStyle.QUICK_REPLY) {
-      return (
-        <Reply key={this.id} payload={this.getButtonPayload(buttonIndex)}>
-          {this.text}
-        </Reply>
-      )
-    }
-
-    return (
-      <Button
-        key={this.id}
-        url={this.url}
-        payload={this.getButtonPayload(buttonIndex)}
-        target={this.target}
-        webview={this.webview}
-        params={this.params}
-      >
-        {this.text}
-      </Button>
-    )
-  }
-
-  private getButtonPayload(buttonIndex: number): string | undefined {
-    return this.payload
-      ? `${this.payload}${SOURCE_INFO_SEPARATOR}${buttonIndex}`
-      : undefined
-  }
-}

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

@@ -1,45 +0,0 @@
-import type { ActionRequest } from '@botonic/react'
-
-import { getFlowBuilderPlugin } from '../helpers'
-import { ContentFieldsBase } from './content-fields-base'
-import {
-  HtAiValidationType,
-  type HtCaptureUserInputNode,
-} from './hubtype-fields/capture-user-input'
-
-export class FlowCaptureUserInput extends ContentFieldsBase {
-  public fieldName = ''
-  public aiValidationType = HtAiValidationType.NONE
-  public aiValidationInstructions = ''
-  public captureSuccessId = ''
-  public captureFailId = ''
-
-  static fromHubtypeCMS(cmsText: HtCaptureUserInputNode): FlowCaptureUserInput {
-    const newCaptureUserInput = new FlowCaptureUserInput(cmsText.id)
-    newCaptureUserInput.code = cmsText.code
-    newCaptureUserInput.fieldName = cmsText.content.field_name
-    newCaptureUserInput.aiValidationType =
-      cmsText.content.ai_validation_type || HtAiValidationType.NONE
-    newCaptureUserInput.aiValidationInstructions =
-      cmsText.content.ai_validation_instructions || ''
-    newCaptureUserInput.captureSuccessId = cmsText.content.capture_success.id
-    newCaptureUserInput.captureFailId = cmsText.content.capture_fail.id
-    newCaptureUserInput.followUp = undefined
-
-    return newCaptureUserInput
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  async trackFlow(_request: ActionRequest): Promise<void> {
-    return
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  toBotonic(_id: string, request: ActionRequest): JSX.Element {
-    const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
-    const cmsApi = flowBuilderPlugin.cmsApi
-    cmsApi.setCaptureUserInputId(this.id)
-
-    return <></>
-  }
-}

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

@@ -1,254 +0,0 @@
-import { type CarouselMessage, isWhatsapp } from '@botonic/core'
-import {
-  type ActionRequest,
-  Button,
-  CardType,
-  Carousel,
-  Text,
-  WhatsappCTAUrlButton,
-  WhatsappCTAUrlHeaderType,
-  type WhatsappInteractiveMediaCard,
-  WhatsappInteractiveMediaCarousel,
-} from '@botonic/react'
-
-import type { FlowBuilderApi } from '../api'
-import { trackOneContent } from '../tracking'
-import { ContentFieldsBase } from './content-fields-base'
-import { FlowElement } from './flow-element'
-import type { HtCarouselNode } from './hubtype-fields'
-
-const DEFAULT_TEXT_MESSAGE = 'These are the options'
-export class FlowCarousel extends ContentFieldsBase {
-  public whatsappText: string = ''
-  public elements: FlowElement[] = []
-
-  static fromHubtypeCMS(
-    component: HtCarouselNode,
-    locale: string,
-    cmsApi: FlowBuilderApi
-  ): FlowCarousel {
-    const newCarousel = new FlowCarousel(component.id)
-    newCarousel.code = component.code
-    newCarousel.elements = component.content.elements.map(element =>
-      FlowElement.fromHubtypeCMS(element, locale, cmsApi)
-    )
-    newCarousel.whatsappText = FlowCarousel.getTextByLocale(
-      locale,
-      component.content.whatsapp_text
-    )
-    newCarousel.followUp = component.follow_up
-
-    return newCarousel
-  }
-
-  async trackFlow(request: ActionRequest): Promise<void> {
-    await trackOneContent(request, this)
-    for (const element of this.elements) {
-      await element.trackFlow(request)
-    }
-  }
-
-  static areElementsValidForWhatsapp = (carouselMessage: CarouselMessage) => {
-    const isValid =
-      carouselMessage.content.elements.every(element => element.button.url) ||
-      carouselMessage.content.elements.every(element => element.button.payload)
-
-    if (!isValid) {
-      console.warn(
-        'Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent, all elements must have either url or payload.',
-        carouselMessage.content
-      )
-    }
-    return isValid
-  }
-
-  static generateWhatsappElementText(element: {
-    title: string
-    subtitle?: string
-  }): string {
-    if (element.subtitle) {
-      return `*${element.title}*\n${element.subtitle}`
-    }
-    return element.title
-  }
-
-  private static createCardsFromElements(
-    elements: FlowElement[]
-  ): WhatsappInteractiveMediaCard[] {
-    return elements.map(element => {
-      const text = FlowCarousel.generateWhatsappElementText(element)
-
-      if (element.button?.url) {
-        return {
-          imageLink: element.image,
-          text,
-          type: CardType.CTA_URL as const,
-          action: {
-            buttonText: element.button.text,
-            buttonUrl: element.button.url,
-          },
-        }
-      }
-      if (element.button?.payload) {
-        return {
-          imageLink: element.image,
-          text,
-          type: CardType.QUICK_REPLY as const,
-          action: {
-            buttons: [
-              {
-                text: element.button.text,
-                payload: element.button.payload,
-              },
-            ],
-          },
-        }
-      }
-      throw new Error('Element must have a url or a payload')
-    })
-  }
-
-  static fromAIAgent(
-    id: string,
-    carouselMessage: CarouselMessage,
-    request: ActionRequest
-  ): JSX.Element {
-    if (
-      isWhatsapp(request.session) &&
-      FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
-    ) {
-      if (
-        carouselMessage.content.elements.length === 1 &&
-        carouselMessage.content.elements[0].button?.url
-      ) {
-        const element = carouselMessage.content.elements[0]
-        const buttonText = element.button.text
-        const url = carouselMessage.content.elements[0].button.url
-        // TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
-        return (
-          <WhatsappCTAUrlButton
-            key={id}
-            body={element.title}
-            headerType={WhatsappCTAUrlHeaderType.Image}
-            headerImage={element.image}
-            footer={element.subtitle}
-            displayText={buttonText}
-            url={url}
-          />
-        )
-      }
-
-      if (
-        carouselMessage.content.elements.length === 1 &&
-        carouselMessage.content.elements[0].button?.payload
-      ) {
-        const element = carouselMessage.content.elements[0]
-        const text = FlowCarousel.generateWhatsappElementText(element)
-        const buttonPayload = carouselMessage.content.elements[0].button.payload
-        const buttonText = carouselMessage.content.elements[0].button.text
-
-        return (
-          <Text>
-            {text}
-            <Button payload={buttonPayload}>{buttonText}</Button>
-          </Text>
-        )
-      }
-
-      const elements = carouselMessage.content.elements.map((element, index) =>
-        FlowElement.fromAIAgent(`${id}-element-${index}`, element)
-      )
-      return (
-        <WhatsappInteractiveMediaCarousel
-          cards={FlowCarousel.createCardsFromElements(elements)}
-          textMessage={carouselMessage.content.text || DEFAULT_TEXT_MESSAGE}
-        />
-      )
-    }
-    return (
-      <Carousel key={id}>
-        {carouselMessage.content.elements.map((element, index) =>
-          FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(
-            id
-          )
-        )}
-      </Carousel>
-    )
-  }
-
-  private toCarouselMessage(elements: FlowElement[]): CarouselMessage {
-    return {
-      type: 'carousel',
-      content: {
-        elements: elements.map(element => {
-          return {
-            button: {
-              text: element.button?.text || '',
-              payload: element.button?.payload,
-              url: element.button?.url,
-            },
-            title: element.title,
-            subtitle: element.subtitle,
-            image: element.image,
-          }
-        }),
-      },
-    }
-  }
-
-  toBotonic(id: string, request: ActionRequest): JSX.Element {
-    const carouselMessage = this.toCarouselMessage(this.elements)
-    if (
-      isWhatsapp(request.session) &&
-      FlowCarousel.areElementsValidForWhatsapp(carouselMessage)
-    ) {
-      if (this.elements.length === 1 && this.elements[0].button?.url) {
-        const element = this.elements[0]
-        const buttonText = this.elements[0].button.text
-        const url = this.elements[0].button.url
-
-        return (
-          <WhatsappCTAUrlButton
-            key={id}
-            body={element.title}
-            headerType={WhatsappCTAUrlHeaderType.Image}
-            headerImage={element.image}
-            displayText={buttonText}
-            url={url}
-          />
-        )
-      }
-
-      if (
-        this.elements.length === 1 &&
-        this.elements[0].button &&
-        this.elements[0].button?.payload
-      ) {
-        const element = this.elements[0]
-        const text = FlowCarousel.generateWhatsappElementText(element)
-        const buttonPayload = this.elements[0].button.payload
-        const buttonText = this.elements[0].button.text
-
-        return (
-          <Text>
-            {text}
-            <Button payload={buttonPayload}>{buttonText}</Button>
-          </Text>
-        )
-      }
-
-      return (
-        <WhatsappInteractiveMediaCarousel
-          cards={FlowCarousel.createCardsFromElements(this.elements)}
-          // TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
-          textMessage={this.whatsappText || DEFAULT_TEXT_MESSAGE}
-        />
-      )
-    }
-    return (
-      <Carousel key={id}>
-        {this.elements.map(element => element.toBotonic(id))}
-      </Carousel>
-    )
-  }
-}