@botonic/plugin-flow-builder 0.24.0 → 0.24.2-alpha.0

package/src/action/index.tsx

@@ -7,7 +7,6 @@ import { HtNodeWithContent } from '../content-fields/hubtype-fields'
 import { getFlowBuilderPlugin } from '../helpers'
 import { createNodeFromKnowledgeBase } from './knowledge-bases'
 import { EventName, trackEvent } from './tracking'
-import { getNodeByUserInput } from './user-input'
 
 export type FlowBuilderActionProps = {
   contents: FlowContent[]
@@ -22,11 +21,7 @@ export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
     const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
     const locale = flowBuilderPlugin.getLocale(request.session)
 
-    const targetNode = await getTargetNode(
-      flowBuilderPlugin.cmsApi,
-      locale,
-      request
-    )
+    const targetNode = await getTargetNode(flowBuilderPlugin.cmsApi, request)
 
     const contents = await flowBuilderPlugin.getContentsByNode(
       targetNode,
@@ -58,15 +53,17 @@ export class FlowBuilderMultichannelAction extends FlowBuilderAction {
   }
 }
 
-async function getTargetNode(
-  cmsApi: FlowBuilderApi,
-  locale: string,
-  request: ActionRequest
-) {
+async function getTargetNode(cmsApi: FlowBuilderApi, request: ActionRequest) {
+  if (request.session.is_first_interaction) {
+    const startNode = cmsApi.getStartNode()
+    await trackEvent(request, EventName.botStart)
+    return startNode
+  }
   const contentId = request.input.payload
-  const targetNode = !contentId
-    ? await getNodeByUserInput(cmsApi, locale, request)
-    : (cmsApi.getNodeById(contentId) as HtNodeWithContent)
+
+  const targetNode = contentId
+    ? cmsApi.getNodeById<HtNodeWithContent>(contentId)
+    : undefined
 
   if (targetNode) {
     const eventArgs = {

package/src/action/intent.ts

@@ -1,17 +1,14 @@
 import { ActionRequest } from '@botonic/react'
 
 import { FlowBuilderApi } from '../api'
-import {
-  HtIntentNode,
-  HtNodeWithContent,
-} from '../content-fields/hubtype-fields'
+import { HtIntentNode } from '../content-fields/hubtype-fields'
 import { EventName, trackEvent } from './tracking'
 
-export async function getNodeByIntent(
+export async function getIntentNodeByInput(
   cmsApi: FlowBuilderApi,
   locale: string,
   request: ActionRequest
-): Promise<HtNodeWithContent | undefined> {
+): Promise<HtIntentNode | undefined> {
   const intentNode = cmsApi.getIntentNode(request.input, locale)
   const eventArgs = {
     intent: request.input.intent as string,
@@ -20,7 +17,7 @@ export async function getNodeByIntent(
   }
   if (isIntentValid(intentNode, request, cmsApi) && intentNode?.target?.id) {
     await trackEvent(request, EventName.botAiModel, eventArgs)
-    return cmsApi.getNodeById<HtNodeWithContent>(intentNode.target.id)
+    return intentNode
   } else {
     eventArgs.confidence_successful = false
     await trackEvent(request, EventName.botAiModel, eventArgs)

package/src/action/keyword.ts

@@ -1,15 +1,15 @@
 import { ActionRequest } from '@botonic/react'
 
 import { FlowBuilderApi } from '../api'
-import { HtNodeWithContent } from '../content-fields/hubtype-fields'
+import { HtKeywordNode } from '../content-fields/hubtype-fields'
 import { EventName, trackEvent } from './tracking'
 
-export async function getNodeByKeyword(
+export async function getKeywordNodeByInput(
   cmsApi: FlowBuilderApi,
   locale: string,
   request: ActionRequest,
   userInput: string
-): Promise<HtNodeWithContent | undefined> {
+): Promise<HtKeywordNode | undefined> {
   const keywordNode = cmsApi.getNodeByKeyword(userInput, locale)
   if (!keywordNode) {
     return undefined

package/src/action/user-input.ts

@@ -1,27 +1,20 @@
 import { ActionRequest } from '@botonic/react'
 
 import { FlowBuilderApi } from '../api'
-import { HtNodeWithContent } from '../content-fields/hubtype-fields'
-import { getNodeByIntent } from './intent'
-import { getNodeByKeyword } from './keyword'
-import { EventName, trackEvent } from './tracking'
+import { HtIntentNode, HtKeywordNode } from '../content-fields/hubtype-fields'
+import { getIntentNodeByInput } from './intent'
+import { getKeywordNodeByInput } from './keyword'
 
 export async function getNodeByUserInput(
   cmsApi: FlowBuilderApi,
   locale: string,
   request: ActionRequest
-): Promise<HtNodeWithContent | undefined> {
-  if (request.session.is_first_interaction) {
-    const startNode = cmsApi.getStartNode()
-    await trackEvent(request, EventName.botStart)
-    return startNode
-  }
-
+): Promise<HtIntentNode | HtKeywordNode | undefined> {
   if (request.input.data) {
-    const nodeByIntent = await getNodeByIntent(cmsApi, locale, request)
-    if (nodeByIntent) return nodeByIntent
+    const intentNode = await getIntentNodeByInput(cmsApi, locale, request)
+    if (intentNode) return intentNode
 
-    const keywordNode = await getNodeByKeyword(
+    const keywordNode = await getKeywordNodeByInput(
       cmsApi,
       locale,
       request,

package/src/api.ts

@@ -1,7 +1,9 @@
 import { Input, PluginPreRequest } from '@botonic/core'
 import axios from 'axios'
 
+import { SEPARATOR } from './constants'
 import {
+  HtBotActionNode,
   HtFallbackNode,
   HtFlowBuilderData,
   HtIntentNode,
@@ -10,6 +12,8 @@ import {
   HtNodeLink,
   HtNodeWithContent,
   HtNodeWithContentType,
+  HtNodeWithoutContentType,
+  HtPayloadNode,
 } from './content-fields/hubtype-fields'
 import { FlowBuilderApiOptions } from './types'
 
@@ -37,9 +41,18 @@ export class FlowBuilderApi {
     return data as HtFlowBuilderData
   }
 
+  getNodeByFlowId(id: string): HtNodeWithContent {
+    const subFlow = this.flow.flows.find(subFlow => subFlow.id === id)
+    if (!subFlow) throw Error(`SubFlow with id: '${id}' not found`)
+    return this.getNodeById<HtNodeWithContent>(subFlow.start_node_id)
+  }
+
   getNodeById<T extends HtNodeComponent>(id: string): T {
     const node = this.flow.nodes.find(node => node.id === id)
     if (!node) throw Error(`Node with id: '${id}' not found`)
+    if (node.type === HtNodeWithoutContentType.GO_TO_FLOW) {
+      return this.getNodeByFlowId(node.content.flow_id) as T
+    }
     return node as T
   }
 
@@ -132,18 +145,16 @@ export class FlowBuilderApi {
   getNodeByKeyword(
     userInput: string,
     locale: string
-  ): HtNodeWithContent | undefined {
+  ): HtKeywordNode | undefined {
     try {
       const keywordNodes = this.flow.nodes.filter(
-        node => node.type == HtNodeWithContentType.KEYWORD
+        node => node.type === HtNodeWithContentType.KEYWORD
       ) as HtKeywordNode[]
       const matchedKeywordNodes = keywordNodes.filter(node =>
         this.matchKeywords(node, userInput, locale)
       )
       if (matchedKeywordNodes.length > 0 && matchedKeywordNodes[0].target) {
-        return this.getNodeById<HtNodeWithContent>(
-          matchedKeywordNodes[0].target.id
-        )
+        return matchedKeywordNodes[0]
       }
     } catch (error) {
       console.error(`Error getting node by keyword '${userInput}': `, error)
@@ -166,4 +177,29 @@ export class FlowBuilderApi {
   private containsAnyKeywords(input: string, keywords: string[]): boolean {
     return keywords.some(keyword => input.includes(keyword))
   }
+
+  getPayload(target?: HtNodeLink): string | undefined {
+    if (target) {
+      if (target.type === HtNodeWithoutContentType.BOT_ACTION) {
+        const botActionNode = this.getNodeById<HtBotActionNode>(target.id)
+        return this.createPayloadWithParams(botActionNode)
+      }
+      const targetNode = this.getNodeById(target.id)
+      return targetNode.id
+    }
+    return undefined
+  }
+
+  private createPayloadWithParams(botActionNode: HtBotActionNode): string {
+    const payloadId = botActionNode.content.payload_id
+    const payloadNode = this.getNodeById<HtPayloadNode>(payloadId)
+    const customParams = JSON.parse(
+      botActionNode.content.payload_params || '{}'
+    )
+    const payloadJson = JSON.stringify({
+      ...customParams,
+      followUpId: botActionNode.follow_up?.id,
+    })
+    return `${payloadNode.content.payload}${SEPARATOR}${payloadJson}`
+  }
 }

package/src/constants.ts

@@ -1,2 +1,3 @@
-export const SOURCE_INFO_SEPARATOR = '|source_'
+export const SEPARATOR = '|'
+export const SOURCE_INFO_SEPARATOR = `${SEPARATOR}source_`
 export const VARIABLE_REGEX = /{([^}]+)}/g

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

@@ -27,14 +27,16 @@ export class FlowButton extends ContentFieldsBase {
     const newButton = new FlowButton(cmsButton.id)
     newButton.text = this.getTextByLocale(locale, cmsButton.text)
     if (cmsButton.target) {
-      newButton.payload = cmsButton.target.id
+      newButton.payload = cmsApi.getPayload(cmsButton.target)
     }
+
+    // OLD PAYLOAD
     if (cmsButton.payload && payloadId) {
-      const payloadNode = cmsApi.getNodeById(payloadId) as HtPayloadNode
+      const payloadNode = cmsApi.getNodeById<HtPayloadNode>(payloadId)
       newButton.payload = payloadNode.content.payload
     }
     if (cmsButton.url && urlId) {
-      const payloadNode = cmsApi.getNodeById(urlId) as HtUrlNode
+      const payloadNode = cmsApi.getNodeById<HtUrlNode>(urlId)
       newButton.url = payloadNode.content.url
     }
 

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

@@ -6,23 +6,7 @@ import { EventName, trackEvent } from '../action/tracking'
 import { FlowBuilderApi } from '../api'
 import { getQueueAvailability } from '../functions/conditional-queue-status'
 import { ContentFieldsBase } from './content-fields-base'
-import {
-  HtCarouselNode,
-  HtHandoffNode,
-  HtImageNode,
-  HtPayloadNode,
-  HtQueueLocale,
-  HtTextNode,
-  HtVideoNode,
-  HtWhatsappButtonListNode,
-} from './hubtype-fields'
-
-type HtAfterHandoff =
-  | HtTextNode
-  | HtImageNode
-  | HtVideoNode
-  | HtCarouselNode
-  | HtWhatsappButtonListNode
+import { HtHandoffNode, HtPayloadNode, HtQueueLocale } from './hubtype-fields'
 
 export class FlowHandoff extends ContentFieldsBase {
   public code: string
@@ -54,21 +38,18 @@ export class FlowHandoff extends ContentFieldsBase {
     cmsApi: FlowBuilderApi
   ): string | undefined {
     if (cmsHandoff.target?.id) {
-      const handoffTargetNode = cmsApi.getNodeById<HtAfterHandoff>(
-        cmsHandoff.target?.id
-      )
-      if (handoffTargetNode?.id) return handoffTargetNode?.id
+      return cmsApi.getPayload(cmsHandoff.target)
     }
 
+    // OLD PAYLOAD
     const payloadId = cmsHandoff.content.payload.find(
       payload => payload.locale === locale
     )?.id
+    if (payloadId) {
+      return cmsApi.getNodeById<HtPayloadNode>(payloadId).content.payload
+    }
 
-    if (!payloadId) return undefined
-
-    const actionPayload = cmsApi.getNodeById(payloadId)
-
-    return (actionPayload as HtPayloadNode).content.payload
+    return undefined
   }
 
   async doHandoff(request: ActionRequest): Promise<void> {

package/src/content-fields/hubtype-fields/bot-action.ts

@@ -0,0 +1,11 @@
+import { HtBaseNode } from './common'
+import { HtNodeWithoutContentType } from './node-types'
+
+export interface HtBotActionNode extends HtBaseNode {
+  id: string
+  type: HtNodeWithoutContentType.BOT_ACTION
+  content: {
+    payload_id: string
+    payload_params?: string
+  }
+}

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

@@ -8,6 +8,13 @@ export interface HtFlowBuilderData {
   start_node_id?: string
   ai_model_id?: string
   nodes: HtNodeComponent[]
+  flows: HtFlows[]
+}
+
+export interface HtFlows {
+  id: string
+  name: string
+  start_node_id: string
 }
 
 export interface HtNodeLink {

package/src/content-fields/hubtype-fields/go-to-flow.ts

@@ -0,0 +1,9 @@
+import { HtNodeWithoutContentType } from './node-types'
+
+export interface HtGoToFlow {
+  id: string
+  type: HtNodeWithoutContentType.GO_TO_FLOW
+  content: {
+    flow_id: string
+  }
+}

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

@@ -1,8 +1,10 @@
+export * from './bot-action'
 export * from './button'
 export * from './carousel'
 export * from './common'
 export * from './fallback'
 export * from './function'
+export * from './go-to-flow'
 export * from './handoff'
 export * from './image'
 export * from './intent'

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

@@ -14,6 +14,8 @@ export enum HtNodeWithContentType {
 export enum HtNodeWithoutContentType {
   URL = 'url',
   PAYLOAD = 'payload',
+  GO_TO_FLOW = 'go-to-flow',
+  BOT_ACTION = 'bot-action',
 }
 
 export enum HtButtonStyle {

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

@@ -1,6 +1,8 @@
+import { HtBotActionNode } from './bot-action'
 import { HtCarouselNode } from './carousel'
 import { HtFallbackNode } from './fallback'
 import { HtFunctionNode } from './function'
+import { HtGoToFlow } from './go-to-flow'
 import { HtHandoffNode } from './handoff'
 import { HtImageNode } from './image'
 import { HtIntentNode } from './intent'
@@ -23,6 +25,10 @@ export type HtNodeWithContent =
   | HtFallbackNode
   | HtWhatsappButtonListNode
 
-export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode
+export type HtNodeWithoutContent =
+  | HtUrlNode
+  | HtPayloadNode
+  | HtGoToFlow
+  | HtBotActionNode
 
 export type HtNodeComponent = HtNodeWithContent | HtNodeWithoutContent

package/src/index.ts

@@ -1,8 +1,9 @@
 import { Plugin, PluginPreRequest, Session } from '@botonic/core'
 import { ActionRequest } from '@botonic/react'
 
+import { getNodeByUserInput } from './action/user-input'
 import { FlowBuilderApi } from './api'
-import { SOURCE_INFO_SEPARATOR } from './constants'
+import { SEPARATOR, SOURCE_INFO_SEPARATOR } from './constants'
 import {
   FlowCarousel,
   FlowContent,
@@ -20,7 +21,11 @@ import {
   HtNodeWithContentType,
 } from './content-fields/hubtype-fields'
 import { DEFAULT_FUNCTIONS } from './functions'
-import { BotonicPluginFlowBuilderOptions, KnowledgeBaseResponse } from './types'
+import {
+  BotonicPluginFlowBuilderOptions,
+  KnowledgeBaseResponse,
+  PayloadParamsBase,
+} from './types'
 import { resolveGetAccessToken } from './utils'
 
 export default class BotonicPluginFlowBuilder implements Plugin {
@@ -59,6 +64,21 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       accessToken: this.getAccessToken(request.session),
       request: this.currentRequest,
     })
+
+    const checkUserTextInput =
+      request.input.data &&
+      !request.input.payload &&
+      !request.session.is_first_interaction
+
+    if (checkUserTextInput) {
+      const nodeByUserInput = await getNodeByUserInput(
+        this.cmsApi,
+        this.getLocale(request.session),
+        request as unknown as ActionRequest
+      )
+      request.input.payload = this.cmsApi.getPayload(nodeByUserInput?.target)
+    }
+
     if (request.input.payload) {
       request.input.payload = request.input.payload?.split(
         SOURCE_INFO_SEPARATOR
@@ -165,8 +185,13 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     }
     return result.target.id
   }
+
+  getPayloadParams<T extends PayloadParamsBase>(payload: string): T {
+    const payloadParams = JSON.parse(payload.split(SEPARATOR)[1] || '{}')
+    return payloadParams
+  }
 }
 
 export * from './action'
 export * from './content-fields'
-export { BotonicPluginFlowBuilderOptions } from './types'
+export { BotonicPluginFlowBuilderOptions, PayloadParamsBase } from './types'

package/src/types.ts

@@ -39,3 +39,7 @@ export interface KnowledgeBaseResponse {
     page?: number
   }[]
 }
+
+export interface PayloadParamsBase {
+  followUpId?: string
+}