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

package/src/action.tsx

@@ -2,70 +2,79 @@ import { ActionRequest, Multichannel, RequestContext } from '@botonic/react'
 import React from 'react'
 
 import { FlowContent } from './content-fields'
+import { HtNodeWithContent } from './content-fields/hubtype-fields'
 import { doHandoff } from './handoff'
 import { getFlowBuilderPlugin } from './helpers'
 
 type FlowBuilderActionProps = {
-  content?: FlowContent[]
+  contents: FlowContent[]
   isHandoff?: boolean
 }
 
 let alternateFallbackMessage = false
-export class FlowBuilderAction extends React.Component {
-  static contextType: any = RequestContext
+export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
+  static contextType = RequestContext
 
   static async botonicInit(request: ActionRequest): Promise<any> {
     const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
     const locale = flowBuilderPlugin.getLocale(request.session)
     const payload = request.input.payload
-    let targetContentId: string | undefined = payload
+    let targetNode: HtNodeWithContent | string | undefined = payload
+
     if (!payload && request.session.is_first_interaction) {
-      targetContentId = await flowBuilderPlugin.getStartId()
+      targetNode = flowBuilderPlugin.cmsApi.getStartNode()
     }
-    if (!payload) {
-      const intentPayload = await flowBuilderPlugin.getPayloadByIntent(
+
+    if (!payload && request.input.data) {
+      const intentNode = flowBuilderPlugin.cmsApi.getNodeByIntent(
         request.input,
         locale
       )
-      if (intentPayload) targetContentId = intentPayload
-      const keywordPayload = await flowBuilderPlugin.getPayloadByKeyword(
-        request.input,
+      const keywordNode = flowBuilderPlugin.cmsApi.getNodeByKeyword(
+        request.input.data,
         locale
       )
-      if (keywordPayload) targetContentId = keywordPayload
+      if (intentNode) {
+        targetNode = intentNode
+      } else if (keywordNode) {
+        targetNode = keywordNode
+      }
     }
-    if (!targetContentId) {
-      targetContentId = await flowBuilderPlugin.getFallbackId(
+
+    if (!targetNode) {
+      targetNode = flowBuilderPlugin.cmsApi.getFallbackNode(
         alternateFallbackMessage
       )
       alternateFallbackMessage = !alternateFallbackMessage
     }
 
-    const { contents, handoffNode } = await flowBuilderPlugin.getContents(
-      targetContentId,
+    const { contents, handoffNode } = await flowBuilderPlugin.getContent(
+      targetNode,
       locale
     )
 
+    if (flowBuilderPlugin.trackEvent) {
+      // TODO: track all targets nodes?
+      await flowBuilderPlugin.trackEvent(request, contents[0].code)
+    }
+
     if (handoffNode) await doHandoff(request, locale, handoffNode)
 
     return { contents, handoffNode }
   }
 
   render(): JSX.Element | JSX.Element[] {
-    // @ts-ignore
-    const { contents, handoffNode } = this.props
-    return contents!.map(content => content.toBotonic(content.id))
+    const { contents } = this.props
+    return contents.map(content => content.toBotonic(content.id))
   }
 }
 
 export class FlowBuilderMultichannelAction extends FlowBuilderAction {
   render(): JSX.Element | JSX.Element[] {
-    // @ts-ignore
-    const { contents, handoffNode } = this.props
+    const { contents } = this.props
     return (
-      //@ts-ignore
       <Multichannel text={{ buttonsAsText: false }}>
-        {contents!.map(content => content.toBotonic(content.id))}
+        {contents.map(content => content.toBotonic(content.id))}
       </Multichannel>
     )
   }

package/src/api.ts

@@ -0,0 +1,162 @@
+import { Input } from '@botonic/core'
+import axios from 'axios/index'
+
+import {
+  HtFallbackNode,
+  HtFlowBuilderData,
+  HtIntentNode,
+  HtKeywordNode,
+  HtNodeComponent,
+  HtNodeStartType,
+  HtNodeWithContent,
+  HtNodeWithContentType,
+  HtStartNode,
+} from './content-fields/hubtype-fields'
+import { FlowBuilderApiOptions } from './types'
+
+export class FlowBuilderApi {
+  private readonly url: string
+  public flow: HtFlowBuilderData
+
+  constructor(options: FlowBuilderApiOptions) {
+    this.url = options.url
+    if (options.flow) {
+      this.flow = options.flow
+    }
+  }
+
+  async init(token: string) {
+    const { data } = await axios.get(this.url, {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+    this.flow = data
+  }
+
+  getNode<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`)
+    return node as T
+  }
+
+  getNodeByCode(code: string): HtNodeComponent {
+    const content = this.flow.nodes.find(node =>
+      'code' in node ? node.code === code : false
+    )
+    if (!content) throw Error(`Node with code: '${code}' not found`)
+    return content
+  }
+
+  getStartNode(): HtNodeWithContent {
+    const startUpNode = this.flow.nodes.find(
+      node => node.type === HtNodeStartType.STARTUP
+    ) as HtStartNode | undefined
+    if (!startUpNode) throw new Error('Start-up id must be defined')
+    return this.getNode(startUpNode.target.id)
+  }
+
+  getFallbackNode(alternate: boolean): HtNodeWithContent {
+    const fallbackNode = this.flow.nodes.find(
+      node => node.type === HtNodeWithContentType.FALLBACK
+    ) as HtFallbackNode | undefined
+    if (!fallbackNode) {
+      throw new Error('Fallback node must be defined')
+    }
+    const fallbackFirstMessage = fallbackNode.content.first_message
+    if (!fallbackFirstMessage) {
+      throw new Error('Fallback 1st message must be defined')
+    }
+    const fallbackSecondMessage = fallbackNode.content.second_message
+    if (!fallbackSecondMessage) {
+      return this.getNode(fallbackFirstMessage.id)
+    }
+    return alternate
+      ? this.getNode(fallbackFirstMessage.id)
+      : this.getNode(fallbackSecondMessage.id)
+  }
+
+  getNodeByIntent(input: Input, locale: string): HtNodeWithContent | undefined {
+    try {
+      const intents = this.flow.nodes.filter(
+        node => node.type === HtNodeWithContentType.INTENT
+      ) as HtIntentNode[]
+      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 &&
+          this.getNode<HtNodeWithContent>(matchedIntentNode?.target.id)
+        )
+      }
+    } catch (error) {
+      console.error(`Error getting node by intent '${input.intent}': `, error)
+    }
+
+    return undefined
+  }
+
+  private hasIntent(
+    node: HtIntentNode,
+    intent: string,
+    locale: string
+  ): boolean {
+    return node.content.intents.some(
+      i => i.locale === locale && i.values.includes(intent)
+    )
+  }
+
+  private hasMetConfidenceThreshold(
+    node: HtIntentNode,
+    predictedConfidence: number
+  ): boolean {
+    const nodeConfidence = node.content.confidence / 100
+    return predictedConfidence >= nodeConfidence
+  }
+
+  getNodeByKeyword(
+    userInput: string,
+    locale: string
+  ): HtNodeWithContent | undefined {
+    try {
+      const keywordNodes = this.flow.nodes.filter(
+        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.getNode<HtNodeWithContent>(matchedKeywordNodes[0].target.id)
+      }
+    } catch (error) {
+      console.error(`Error getting node by keyword '${userInput}': `, error)
+    }
+
+    return undefined
+  }
+
+  private matchKeywords(
+    node: HtKeywordNode,
+    input: string,
+    locale: string
+  ): boolean {
+    const result = node.content.keywords.find(
+      i => i.locale === locale && this.containsAnyKeywords(input, i.values)
+    )
+    return Boolean(result)
+  }
+
+  private containsAnyKeywords(input: string, keywords: string[]): boolean {
+    for (let i = 0; i < keywords.length; i++) {
+      if (input.includes(keywords[i])) {
+        return true
+      }
+    }
+    return false
+  }
+}

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

@@ -1,23 +1,23 @@
 import {
-  MediaFileLocale,
-  TextLocale,
-  VideoLocale,
-} from '../flow-builder-models'
+  HtMediaFileLocale,
+  HtTextLocale,
+  HtVideoLocale,
+} from './hubtype-fields'
 
 export abstract class ContentFieldsBase {
   constructor(public readonly id: string) {}
 
-  static getTextByLocale(locale: string, text: TextLocale[]): string {
+  static getTextByLocale(locale: string, text: HtTextLocale[]): string {
     const result = text.find(t => t.locale === locale)
     return result?.message ?? ''
   }
 
-  static getImageByLocale(locale: string, image: MediaFileLocale[]): string {
+  static getImageByLocale(locale: string, image: HtMediaFileLocale[]): string {
     const result = image.find(i => i.locale === locale)
     return result?.file ?? ''
   }
 
-  static getVideoByLocale(locale: string, video: VideoLocale[]): string {
+  static getVideoByLocale(locale: string, video: HtVideoLocale[]): string {
     const result = video.find(v => v.locale === locale)
     return result?.url ?? ''
   }

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

@@ -1,42 +1,63 @@
 import { Button, Reply } from '@botonic/react'
 import React from 'react'
 
-import { Button as FbButton, ButtonStyle } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
+import {
+  HtButton,
+  HtButtonStyle,
+  HtPayloadNode,
+  HtUrlNode,
+} from './hubtype-fields'
 
 export class FlowButton extends ContentFieldsBase {
   public text = ''
   public url?: string
   public payload?: string
 
-  static fromHubtypeCMS(component: FbButton, locale: string): FlowButton {
-    const newButton = new FlowButton(component.id)
-    newButton.text = FlowButton.getTextByLocale(locale, component.text)
-    newButton.payload = component.target
-      ? component.target.id
-      : component.payload?.find(payload => payload.locale === locale)?.id
-    if (component.url) {
-      const urlButton = (component.url as any).find(
-        url => url.locale === locale
-      )
-      if (urlButton) newButton.url = urlButton.content.url
+  static fromHubtypeCMS(
+    cmsButton: HtButton,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowButton {
+    const payloadId = this.getPayloadId(cmsButton, locale)
+    const urlId = this.getUrlId(cmsButton, locale)
+
+    const newButton = new FlowButton(cmsButton.id)
+    newButton.text = this.getTextByLocale(locale, cmsButton.text)
+    if (cmsButton.target) {
+      newButton.payload = cmsButton.target.id
+    }
+    if (cmsButton.payload && payloadId) {
+      const payloadNode = cmsApi.getNode(payloadId) as HtPayloadNode
+      newButton.payload = payloadNode.content.payload
     }
+    if (cmsButton.url && urlId) {
+      const payloadNode = cmsApi.getNode(urlId) as HtUrlNode
+      newButton.url = payloadNode.content.url
+    }
+
     return newButton
   }
 
-  renderButton(id: string, buttonStyle: ButtonStyle): JSX.Element {
-    if (buttonStyle === ButtonStyle.QUICK_REPLY) {
+  static getPayloadId(cmsButton, locale): string | undefined {
+    return cmsButton.payload.find(payload => payload.locale === locale)?.id
+  }
+
+  static getUrlId(cmsButton, locale): string | undefined {
+    return cmsButton.url.find(url => url.locale === locale)?.id
+  }
+
+  renderButton(buttonStyle?: HtButtonStyle): JSX.Element {
+    if (buttonStyle === HtButtonStyle.QUICK_REPLY) {
       return (
-        <Reply key={id} payload={this.payload}>
+        <Reply key={this.id} payload={this.payload}>
           {this.text}
         </Reply>
       )
     }
-    let props = {}
-    if (this.url) props = { url: this.url }
     return (
-      // @ts-ignore
-      <Button key={id} payload={this.payload} {...props}>
+      <Button key={this.id} payload={this.payload} url={this.url}>
         {this.text}
       </Button>
     )

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

@@ -1,19 +1,24 @@
-import { Button, Carousel, Element, Pic, Subtitle, Title } from '@botonic/react'
+import { Carousel } from '@botonic/react'
 import React from 'react'
 
-import { CarouselNode } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowElement } from './flow-element'
+import { HtCarouselNode } from './hubtype-fields'
 
 export class FlowCarousel extends ContentFieldsBase {
   public code = ''
   public elements: FlowElement[] = []
 
-  static fromHubtypeCMS(component: CarouselNode, locale: string): FlowCarousel {
+  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)
+      FlowElement.fromHubtypeCMS(element, locale, cmsApi)
     )
     return newCarousel
   }
@@ -21,20 +26,7 @@ export class FlowCarousel extends ContentFieldsBase {
   toBotonic(id: string): JSX.Element {
     return (
       <Carousel key={id}>
-        {this.elements.map(element => (
-          <Element key={`${id}-${element.id}`}>
-            <Pic src={element.image} />
-            <Title style=''>{element.title}</Title>
-            <Subtitle style=''>{element.subtitle}</Subtitle>
-            {/* @ts-ignore */}
-            <Button
-              payload={element.buttons?.payload}
-              url={element.buttons?.url}
-            >
-              {element.buttons?.text}
-            </Button>
-          </Element>
-        ))}
+        {this.elements.map(element => element.toBotonic(id))}
       </Carousel>
     )
   }

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

@@ -1,26 +1,43 @@
-import { CarouselElementNode } from '../flow-builder-models'
+import { Element, Pic, Subtitle, Title } from '@botonic/react'
+import React from 'react'
+
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
+import { HtCarouselElement } from './hubtype-fields'
 
 export class FlowElement extends ContentFieldsBase {
   public title = ''
   public subtitle = ''
-  public buttons: FlowButton | undefined
+  public button: FlowButton | undefined
   public image = ''
   public hidden = false
 
   static fromHubtypeCMS(
-    component: CarouselElementNode,
-    locale: string
+    component: HtCarouselElement,
+    locale: string,
+    cmsApi: FlowBuilderApi
   ): FlowElement {
     const newElement = new FlowElement(component.id)
-    newElement.title = FlowElement.getTextByLocale(locale, component.title)
-    newElement.subtitle = FlowElement.getTextByLocale(
+    newElement.title = this.getTextByLocale(locale, component.title)
+    newElement.subtitle = this.getTextByLocale(locale, component.subtitle)
+    newElement.image = this.getImageByLocale(locale, component.image)
+    newElement.button = FlowButton.fromHubtypeCMS(
+      component.button,
       locale,
-      component.subtitle
+      cmsApi
     )
-    newElement.image = FlowElement.getImageByLocale(locale, component.image)
-    newElement.buttons = FlowButton.fromHubtypeCMS(component.button, locale)
     return newElement
   }
+
+  toBotonic(parentId: string): JSX.Element {
+    return (
+      <Element key={`${parentId}-${this.id}`}>
+        <Pic src={this.image} />
+        <Title>{this.title}</Title>
+        <Subtitle>{this.subtitle}</Subtitle>
+        {this.button?.renderButton()}
+      </Element>
+    )
+  }
 }

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

@@ -1,14 +1,14 @@
 import { Image } from '@botonic/react'
 import React from 'react'
 
-import { ImageNode } from '../flow-builder-models'
 import { ContentFieldsBase } from './content-fields-base'
+import { HtImageNode } from './hubtype-fields'
 
 export class FlowImage extends ContentFieldsBase {
   public src = ''
   public code = ''
 
-  static fromHubtypeCMS(component: ImageNode, locale: string): FlowImage {
+  static fromHubtypeCMS(component: HtImageNode, locale: string): FlowImage {
     const newImage = new FlowImage(component.id)
     newImage.code = component.code
     newImage.src = this.getImageByLocale(locale, component.content.image)

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

@@ -1,23 +1,28 @@
 import { Text } from '@botonic/react'
 import React from 'react'
 
-import { ButtonStyle, TextNode } from '../flow-builder-models'
+import { FlowBuilderApi } from '../api'
 import { ContentFieldsBase } from './content-fields-base'
 import { FlowButton } from './flow-button'
+import { HtButtonStyle, HtTextNode } from './hubtype-fields'
 
 export class FlowText extends ContentFieldsBase {
   public text = ''
   public code = ''
   public buttons: FlowButton[] = []
-  public buttonStyle = ButtonStyle.BUTTON
+  public buttonStyle = HtButtonStyle.BUTTON
 
-  static fromHubtypeCMS(component: TextNode, locale: string): FlowText {
-    const newText = new FlowText(component.id)
-    newText.code = component.code
-    newText.buttonStyle = component.content.buttons_style || ButtonStyle.BUTTON
-    newText.text = FlowText.getTextByLocale(locale, component.content.text)
-    newText.buttons = component.content.buttons.map(button =>
-      FlowButton.fromHubtypeCMS(button, locale)
+  static fromHubtypeCMS(
+    cmsText: HtTextNode,
+    locale: string,
+    cmsApi: FlowBuilderApi
+  ): FlowText {
+    const newText = new FlowText(cmsText.id)
+    newText.code = cmsText.code
+    newText.buttonStyle = cmsText.content.buttons_style || HtButtonStyle.BUTTON
+    newText.text = this.getTextByLocale(locale, cmsText.content.text)
+    newText.buttons = cmsText.content.buttons.map(button =>
+      FlowButton.fromHubtypeCMS(button, locale, cmsApi)
     )
     return newText
   }
@@ -26,9 +31,7 @@ export class FlowText extends ContentFieldsBase {
     return (
       <Text key={id}>
         {this.text}
-        {this.buttons.map(button =>
-          button.renderButton(button.id, this.buttonStyle)
-        )}
+        {this.buttons.map(button => button.renderButton(this.buttonStyle))}
       </Text>
     )
   }

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

@@ -1,14 +1,14 @@
 import { Video } from '@botonic/react'
 import React from 'react'
 
-import { VideoNode } from '../flow-builder-models'
 import { ContentFieldsBase } from './content-fields-base'
+import { HtVideoNode } from './hubtype-fields'
 
 export class FlowVideo extends ContentFieldsBase {
   public src = ''
   public code = ''
 
-  static fromHubtypeCMS(component: VideoNode, locale: string): FlowVideo {
+  static fromHubtypeCMS(component: HtVideoNode, locale: string): FlowVideo {
     const newVideo = new FlowVideo(component.id)
     newVideo.code = component.code
     newVideo.src = this.getVideoByLocale(locale, component.content.video)
@@ -16,7 +16,6 @@ export class FlowVideo extends ContentFieldsBase {
   }
 
   toBotonic(id: string): JSX.Element {
-    // @ts-ignore
     return <Video key={id} src={this.src} />
   }
 }

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

@@ -0,0 +1,15 @@
+import {
+  HtNodeLink,
+  HtPayloadLocale,
+  HtTextLocale,
+  HtUrlLocale,
+} from './common'
+
+export interface HtButton {
+  id: string
+  text: HtTextLocale[]
+  url: HtUrlLocale[]
+  payload: HtPayloadLocale[]
+  target?: HtNodeLink
+  hidden: string[]
+}

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

@@ -0,0 +1,18 @@
+import { HtButton } from './button'
+import { HtBaseNode, HtMediaFileLocale, HtTextLocale } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtCarouselElement {
+  id: string
+  title: HtTextLocale[]
+  subtitle: HtTextLocale[]
+  image: HtMediaFileLocale[]
+  button: HtButton
+}
+
+export interface HtCarouselNode extends HtBaseNode {
+  type: HtNodeWithContentType.CAROUSEL
+  content: {
+    elements: HtCarouselElement[]
+  }
+}

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

@@ -0,0 +1,65 @@
+import { HtNodeWithContentType, HtNodeWithoutContentType } from './node-types'
+import { HtNodeComponent } from './nodes'
+
+export interface HtFlowBuilderData {
+  version: string
+  name: string
+  locales: string[]
+  start_node_id?: string
+  ai_model_id?: string
+  nodes: HtNodeComponent[]
+}
+
+export interface HtNodeLink {
+  id: string
+  type: HtNodeWithContentType | HtNodeWithoutContentType
+}
+
+export interface HtBaseNode {
+  id: string
+  code: string
+  meta: {
+    x: number
+    y: number
+  }
+  follow_up?: HtNodeLink
+  target?: HtNodeLink
+}
+
+export interface HtTextLocale {
+  message: string
+  locale: string
+}
+
+export interface HtMediaFileLocale {
+  id: string
+  file: string
+  locale: string
+}
+
+export interface HtVideoLocale {
+  url: string
+  is_embedded: boolean
+  locale: string
+}
+
+export interface HtQueueLocale {
+  id: string
+  name: string
+  locale: string
+}
+
+export interface HtInputLocale {
+  values: string[]
+  locale: string
+}
+
+export interface HtUrlLocale {
+  id: string
+  locale: string
+}
+
+export interface HtPayloadLocale {
+  id: string
+  locale: string
+}