@botonic/plugin-flow-builder 0.22.0-beta.3 → 0.22.0

package/src/index.ts

@@ -1,254 +1,112 @@
 import {
-  Input,
   Plugin,
   PluginPostRequest,
   PluginPreRequest,
   Session,
 } from '@botonic/core'
-import axios from 'axios'
+import { ActionRequest } from '@botonic/react'
 
+import { FlowBuilderApi } from './api'
 import {
   FlowCarousel,
   FlowContent,
   FlowImage,
   FlowText,
   FlowVideo,
+  FlowWhatsappButtonList,
 } from './content-fields'
 import {
-  FallbackNode,
-  FlowBuilderData,
-  FunctionNode,
-  HandoffNode,
-  IntentNode,
-  KeywordNode,
-  NodeComponent,
-  NodeType,
-  StartNode,
-} from './flow-builder-models'
+  HtFunctionNode,
+  HtHandoffNode,
+  HtNodeComponent,
+  HtNodeWithContent,
+  HtNodeWithContentType,
+} from './content-fields/hubtype-fields'
 import { DEFAULT_FUNCTIONS } from './functions'
-import { updateButtonUrls } from './helpers'
+import { isHandoffNode } from './helpers'
 import { BotonicPluginFlowBuilderOptions } from './types'
 import { resolveGetAccessToken } from './utils'
 
 export default class BotonicPluginFlowBuilder implements Plugin {
-  private flowUrl: string
-  private flow: Promise<FlowBuilderData> | FlowBuilderData
+  public cmsApi: FlowBuilderApi
   private functions: Record<any, any>
   private currentRequest: PluginPreRequest
   private getAccessToken: (session: Session) => string
   public getLocale: (session: Session) => string
+  public trackEvent?: (
+    request: ActionRequest,
+    eventName: string,
+    args?: Record<string, any>
+  ) => Promise<void>
 
   constructor(readonly options: BotonicPluginFlowBuilderOptions) {
+    this.cmsApi = new FlowBuilderApi({
+      url: options.flowUrl,
+      flow: options.flow,
+    })
     this.getLocale = options.getLocale
     this.getAccessToken = resolveGetAccessToken(options)
-    this.flowUrl = options.flowUrl
-    if (options.flow) this.flow = options.flow
+    this.trackEvent = options.trackEvent
     const customFunctions = options.customFunctions || {}
     this.functions = { ...DEFAULT_FUNCTIONS, ...customFunctions }
   }
 
-  async readFlowContent(session: Session): Promise<FlowBuilderData> {
-    const { data } = await axios.get(this.flowUrl, {
-      headers: { Authorization: `Bearer ${this.getAccessToken(session)}` },
-    })
-    return data
-  }
-
   async pre(request: PluginPreRequest): Promise<void> {
     this.currentRequest = request
-    this.flow = await this.readFlowContent(this.currentRequest.session)
+    await this.cmsApi.init(this.getAccessToken(request.session))
   }
 
   async post(_request: PluginPostRequest): Promise<void> {}
 
-  async getContent(id: string): Promise<NodeComponent> {
-    const flow = await this.flow
-    const content = flow.nodes.find(node => node.id === id)
-    if (!content) throw Error(`Node with id: '${id}' not found`)
-    return content
-  }
-
-  async getContentByCode(code: string): Promise<NodeComponent> {
-    const flow = await this.flow
-    const content = flow.nodes.find(node => {
-      if ('code' in node) return node.code === code
-      return undefined
-    })
-    if (!content) throw Error(`Node with code: '${code}' not found`)
-    return content
-  }
-
-  async getHandoffContent(
-    handoffTargetId: string | undefined
-  ): Promise<HandoffNode | undefined> {
-    if (!handoffTargetId) return undefined
-    return (await this.getContent(handoffTargetId)) as HandoffNode
-  }
-
-  getFlowContent(
-    hubtypeContent: NodeComponent,
-    locale: string
-  ): FlowContent | undefined {
-    switch (hubtypeContent.type) {
-      case NodeType.TEXT:
-        return FlowText.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.IMAGE:
-        return FlowImage.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.CAROUSEL:
-        return FlowCarousel.fromHubtypeCMS(hubtypeContent, locale)
-      case NodeType.VIDEO:
-        return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
-      default:
-        return undefined
-    }
-  }
-
-  async getStartId(): Promise<string> {
-    const flow = await this.flow
-    const startNode = flow.nodes.find(
-      node => node.type === NodeType.START_UP
-    ) as StartNode | undefined
-    if (!startNode) throw new Error('start-up id must be defined')
-    return startNode.target.id
-  }
-
-  async getFallbackId(alternate: boolean): Promise<string> {
-    const flow = await this.flow
-    const fallbackNode = flow.nodes.find(
-      node => node.type === NodeType.FALLBACK
-    ) as FallbackNode | undefined
-    if (!fallbackNode) throw new Error('fallback node must be defined')
-    const fallbackFirstMessage = fallbackNode.content.first_message
-    const fallbackSecondMessage = fallbackNode.content.second_message
-    if (!fallbackSecondMessage) return fallbackFirstMessage.id
-    return alternate ? fallbackFirstMessage.id : fallbackSecondMessage.id
-  }
-  async getContents(
-    id: string,
+  async getContent(
+    nodeOrId: HtNodeWithContent | string,
     locale: string,
     prevContents?: FlowContent[]
-  ): Promise<{ contents: FlowContent[]; handoffNode: HandoffNode }> {
+  ): Promise<{ contents: FlowContent[]; handoffNode?: HtHandoffNode }> {
     const contents = prevContents || []
-    const hubtypeContent: any = await this.getContent(id)
-    const isHandoff = hubtypeContent.type === NodeType.HANDOFF
-    // TODO: Create function to populate these buttons
-    await updateButtonUrls(hubtypeContent, 'elements', this.getContent)
-    await updateButtonUrls(hubtypeContent, 'buttons', this.getContent)
-    const content = this.getFlowContent(hubtypeContent, locale)
+    let node = nodeOrId as HtNodeWithContent
+    if (typeof nodeOrId === 'string') {
+      node = this.cmsApi.getNode(nodeOrId) as HtNodeWithContent
+    }
 
-    this.replaceButtonPayload(content)
+    const content = await this.getFlowContent(node, locale)
 
-    if (hubtypeContent.type === NodeType.FUNCTION) {
-      const targetId = await this.callFunction(hubtypeContent, locale)
-      return this.getContents(targetId, locale, contents)
+    if (node.type === HtNodeWithContentType.FUNCTION) {
+      const targetId = await this.callFunction(node, locale)
+      return this.getContent(targetId, locale, contents)
     } else {
       if (content) contents.push(content)
       // TODO: prevent infinite recursive calls
 
-      if (hubtypeContent.follow_up)
-        return this.getContents(hubtypeContent.follow_up.id, locale, contents)
+      if (node.follow_up)
+        return this.getContent(node.follow_up.id, locale, contents)
     }
-    // execute function
-    // return this.getContents(function result_mapping target, locale, contents)
-    return { contents, handoffNode: isHandoff && hubtypeContent }
-  }
 
-  private async replaceButtonPayload(content: FlowContent | undefined) {
-    if (content && 'buttons' in content) {
-      for (const button of content.buttons) {
-        if (button.payload) {
-          const contentButton = await this.getContent(button.payload)
-          if (contentButton?.type === NodeType.PAYLOAD) {
-            button.payload = contentButton.content.payload
-          }
-        }
-      }
-    }
+    return { contents, handoffNode: isHandoffNode(node) ? node : undefined }
   }
 
-  async getPayloadByIntent(
-    input: Input,
+  private getFlowContent(
+    hubtypeContent: HtNodeComponent,
     locale: string
-  ): Promise<string | undefined> {
-    try {
-      const flow = await this.flow
-      const intents = flow.nodes.filter(
-        node => node.type === NodeType.INTENT
-      ) as IntentNode[]
-      const inputIntent = input.intent
-      const inputConfidence = input.confidence
-      if (inputIntent) {
-        const matchedIntentNode = intents.find(
-          node =>
-            inputIntent &&
-            this.hasIntent(node, inputIntent, locale) &&
-            inputConfidence &&
-            this.hasMetConfidenceThreshold(node, inputConfidence)
-        )
-        return matchedIntentNode?.target?.id
-      }
-    } catch (error) {
-      console.error('Error getting payload by input: ', error)
-    }
-
-    return undefined
-  }
-
-  hasIntent(node: IntentNode, intent: string, locale: string): boolean {
-    return node.content.intents.some(
-      i => i.locale === locale && i.values.includes(intent)
-    )
-  }
-
-  hasMetConfidenceThreshold(
-    node: IntentNode,
-    predictedConfidence: number
-  ): boolean {
-    const nodeConfidence = node.content.confidence / 100
-    return predictedConfidence >= nodeConfidence
-  }
-
-  async getPayloadByKeyword(
-    input: Input,
-    locale: string
-  ): Promise<string | undefined> {
-    try {
-      const flow = await this.flow
-      const keywordNodes = flow.nodes.filter(
-        node => node.type == NodeType.KEYWORD
-      ) as KeywordNode[]
-      const matchedKeywordNodes = keywordNodes.filter(node =>
-        //@ts-ignore
-        this.matchKeywords(node, input.data, locale)
-      )
-      if (matchedKeywordNodes.length > 0) {
-        return matchedKeywordNodes[0].target?.id
-      }
-    } catch (error) {
-      console.error('Error getting payload by input: ', error)
-    }
-
-    return undefined
-  }
-
-  matchKeywords(node: KeywordNode, input: string, locale: string): boolean {
-    const result = node.content.keywords.find(
-      i => i.locale === locale && this.containsAnyKeywords(input, i.values)
-    )
-    return Boolean(result)
-  }
-
-  containsAnyKeywords(input: string, keywords: string[]): boolean {
-    for (let i = 0; i < keywords.length; i++) {
-      if (input.includes(keywords[i])) {
-        return true
-      }
+  ): FlowContent | undefined {
+    switch (hubtypeContent.type) {
+      case HtNodeWithContentType.TEXT:
+        return FlowText.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
+      case HtNodeWithContentType.IMAGE:
+        return FlowImage.fromHubtypeCMS(hubtypeContent, locale)
+      case HtNodeWithContentType.CAROUSEL:
+        return FlowCarousel.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
+      case HtNodeWithContentType.VIDEO:
+        return FlowVideo.fromHubtypeCMS(hubtypeContent, locale)
+      case HtNodeWithContentType.WHATSAPP_BUTTON_LIST:
+        return FlowWhatsappButtonList.fromHubtypeCMS(hubtypeContent, locale)
+      default:
+        return undefined
     }
-    return false
   }
 
   async callFunction(
-    functionNode: FunctionNode,
+    functionNode: HtFunctionNode,
     locale: string
   ): Promise<string> {
     const functionNodeId = functionNode.id
@@ -259,7 +117,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
 
     const args = Object.assign(
       {
-        session: this.currentRequest.session,
+        request: this.currentRequest,
         results: [functionNode.content.result_mapping.map(r => r.result)],
       },
       ...nameValues
@@ -271,7 +129,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     const result = functionNode.content.result_mapping.find(
       r => r.result === functionResult
     )
-    if (!result) {
+    if (!result?.target) {
       throw new Error(
         `No result found for result_mapping for node with id: ${functionNodeId}`
       )

package/src/types.ts

@@ -1,13 +1,25 @@
 import { Session } from '@botonic/core'
+import { ActionRequest } from '@botonic/react'
 
-import { FlowBuilderData } from './flow-builder-models'
+import { FlowBuilderApi } from './api'
+import { HtFlowBuilderData } from './content-fields/hubtype-fields'
 
 export interface BotonicPluginFlowBuilderOptions {
   flowUrl: string
-  flow?: FlowBuilderData
+  flow?: HtFlowBuilderData
   customFunctions?: Record<any, any>
   getLocale: (session: Session) => string
   getAccessToken: () => string
+  trackEvent?: (
+    request: ActionRequest,
+    eventName: string,
+    args?: Record<string, any>
+  ) => Promise<void>
+}
+
+export interface FlowBuilderApiOptions {
+  url: string
+  flow?: HtFlowBuilderData
 }
 
 export enum ProcessEnvNodeEnvs {

package/lib/cjs/content-fields/types.d.ts

@@ -1,5 +0,0 @@
-import { FlowCarousel } from './flow-carousel';
-import { FlowImage } from './flow-image';
-import { FlowText } from './flow-text';
-import { FlowVideo } from './flow-video';
-export type FlowContent = FlowText | FlowImage | FlowCarousel | FlowVideo;

package/lib/cjs/content-fields/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/content-fields/types.ts"],"names":[],"mappings":""}

package/lib/cjs/flow-builder-models.d.ts

@@ -1,196 +0,0 @@
-export interface FlowBuilderData {
-    version: string;
-    name: string;
-    locales: string[];
-    start_node_id?: string;
-    ai_model_id?: string;
-    nodes: NodeComponent[];
-}
-export declare enum NodeType {
-    TEXT = "text",
-    IMAGE = "image",
-    CAROUSEL = "carousel",
-    HANDOFF = "handoff",
-    KEYWORD = "keyword",
-    INTENT = "intent",
-    START_UP = "start-up",
-    URL = "url",
-    PAYLOAD = "payload",
-    FUNCTION = "function",
-    FALLBACK = "fallback",
-    VIDEO = "video"
-}
-export interface BaseNode {
-    id: string;
-    type: NodeType;
-}
-export interface Meta {
-    x: number;
-    y: number;
-}
-export interface Node extends BaseNode {
-    code: string;
-    meta: Meta;
-    follow_up?: NodeLink;
-    target?: NodeLink;
-}
-export interface NodeLink {
-    id: string;
-    type: NodeType;
-}
-export interface TextLocale {
-    message: string;
-    locale: string;
-}
-export declare enum ButtonStyle {
-    BUTTON = "button",
-    QUICK_REPLY = "quick-reply"
-}
-export interface UrlLocale {
-    id: string;
-    locale: string;
-}
-export interface PayloadLocale {
-    id: string;
-    locale: string;
-}
-export interface Button {
-    id: string;
-    text: TextLocale[];
-    target?: NodeLink;
-    hidden: string;
-    url?: UrlLocale[];
-    payload?: PayloadLocale[];
-}
-export interface TextNodeContent {
-    text: TextLocale[];
-    buttons_style?: ButtonStyle;
-    buttons: Button[];
-}
-export interface TextNode extends Node {
-    type: NodeType.TEXT;
-    content: TextNodeContent;
-}
-export interface MediaFileLocale {
-    id: string;
-    file: string;
-    locale: string;
-}
-export interface ImageNodeContent {
-    image: MediaFileLocale[];
-}
-export interface ImageNode extends Node {
-    type: NodeType.IMAGE;
-    content: ImageNodeContent;
-}
-export interface CarouselElementNode {
-    id: string;
-    title: TextLocale[];
-    subtitle: TextLocale[];
-    image: MediaFileLocale[];
-    button: Button;
-}
-export interface CarouselNodeContent {
-    elements: CarouselElementNode[];
-}
-export interface CarouselNode extends Node {
-    type: NodeType.CAROUSEL;
-    content: CarouselNodeContent;
-}
-export interface QueueLocale {
-    id: string;
-    name: string;
-    locale: string;
-}
-export interface HandoffNodeContent {
-    queue: QueueLocale[];
-    payload: PayloadLocale[];
-    has_auto_assign: boolean;
-}
-export interface HandoffNode extends Node {
-    type: NodeType.HANDOFF;
-    content: HandoffNodeContent;
-}
-export interface InputLocale {
-    values: string[];
-    locale: string;
-}
-export interface KeywordNodeContent {
-    title: TextLocale[];
-    keywords: InputLocale[];
-}
-export interface KeywordNode extends Node {
-    type: NodeType.KEYWORD;
-    content: KeywordNodeContent;
-}
-export interface IntentNodeContent {
-    title: TextLocale[];
-    intents: InputLocale[];
-    confidence: number;
-}
-export interface IntentNode extends Node {
-    type: NodeType.INTENT;
-    content: IntentNodeContent;
-}
-export interface StartNode extends BaseNode {
-    type: NodeType.START_UP;
-    target: NodeLink;
-}
-export interface UrlNodeContent {
-    url: string;
-}
-export interface UrlNode extends BaseNode {
-    type: NodeType.URL;
-    content: UrlNodeContent;
-}
-export interface PayloadNodeContent {
-    payload: string;
-}
-export interface PayloadNode extends BaseNode {
-    type: NodeType.PAYLOAD;
-    content: PayloadNodeContent;
-}
-export type ArgumentType = number | string | Record<any, any>;
-export interface FunctionNodeArgument {
-    type: ArgumentType;
-    name: string;
-    value: string;
-}
-export interface FunctionNodeArgumentLocale {
-    locale: string;
-    values: FunctionNodeArgument[];
-}
-export interface FunctionNodeResult {
-    result: string;
-    target: NodeLink;
-}
-export interface FunctionNodeContent {
-    action: string;
-    arguments: FunctionNodeArgumentLocale[];
-    result_mapping: FunctionNodeResult[];
-}
-export interface FunctionNode extends Node {
-    type: NodeType.FUNCTION;
-    content: FunctionNodeContent;
-}
-export interface FallbackNodeContent {
-    first_message: NodeLink;
-    second_message: NodeLink;
-}
-export interface FallbackNode extends Node {
-    type: NodeType.FALLBACK;
-    content: FallbackNodeContent;
-}
-export interface VideoLocale {
-    url: string;
-    is_embedded?: boolean;
-    locale: string;
-}
-export interface VideoNodeContent {
-    video: VideoLocale[];
-}
-export interface VideoNode extends Node {
-    type: NodeType.VIDEO;
-    content: VideoNodeContent;
-}
-export type NodeComponent = TextNode | ImageNode | CarouselNode | HandoffNode | KeywordNode | IntentNode | UrlNode | StartNode | PayloadNode | FunctionNode | FallbackNode | VideoNode;

package/lib/cjs/flow-builder-models.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonStyle = exports.NodeType = void 0;
-var NodeType;
-(function (NodeType) {
-    NodeType["TEXT"] = "text";
-    NodeType["IMAGE"] = "image";
-    NodeType["CAROUSEL"] = "carousel";
-    NodeType["HANDOFF"] = "handoff";
-    NodeType["KEYWORD"] = "keyword";
-    NodeType["INTENT"] = "intent";
-    NodeType["START_UP"] = "start-up";
-    NodeType["URL"] = "url";
-    NodeType["PAYLOAD"] = "payload";
-    NodeType["FUNCTION"] = "function";
-    NodeType["FALLBACK"] = "fallback";
-    NodeType["VIDEO"] = "video";
-})(NodeType = exports.NodeType || (exports.NodeType = {}));
-var ButtonStyle;
-(function (ButtonStyle) {
-    ButtonStyle["BUTTON"] = "button";
-    ButtonStyle["QUICK_REPLY"] = "quick-reply";
-})(ButtonStyle = exports.ButtonStyle || (exports.ButtonStyle = {}));
-//# sourceMappingURL=flow-builder-models.js.map

package/lib/cjs/flow-builder-models.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"flow-builder-models.js","sourceRoot":"","sources":["../../src/flow-builder-models.ts"],"names":[],"mappings":";;;AAUA,IAAY,QAaX;AAbD,WAAY,QAAQ;IAClB,yBAAa,CAAA;IACb,2BAAe,CAAA;IACf,iCAAqB,CAAA;IACrB,+BAAmB,CAAA;IACnB,+BAAmB,CAAA;IACnB,6BAAiB,CAAA;IACjB,iCAAqB,CAAA;IACrB,uBAAW,CAAA;IACX,+BAAmB,CAAA;IACnB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;AACjB,CAAC,EAbW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAanB;AA6BD,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,gCAAiB,CAAA;IACjB,0CAA2B,CAAA;AAC7B,CAAC,EAHW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAGtB"}

package/lib/esm/content-fields/types.d.ts

@@ -1,5 +0,0 @@
-import { FlowCarousel } from './flow-carousel';
-import { FlowImage } from './flow-image';
-import { FlowText } from './flow-text';
-import { FlowVideo } from './flow-video';
-export type FlowContent = FlowText | FlowImage | FlowCarousel | FlowVideo;

package/lib/esm/content-fields/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/lib/esm/content-fields/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/content-fields/types.ts"],"names":[],"mappings":""}