@botonic/plugin-flow-builder 0.35.2 → 0.35.3

package/src/action/ai-agent.ts

@@ -0,0 +1,52 @@
+import { FlowContent } from '../content-fields'
+import { FlowAiAgent } from '../content-fields/flow-ai-agent'
+import { AiAgentResponse } from '../types'
+import { FlowBuilderContext } from './index'
+
+export async function getContentsByAiAgent({
+  cmsApi,
+  flowBuilderPlugin,
+  request,
+}: FlowBuilderContext): Promise<FlowContent[]> {
+  const startNodeAiAgentFlow = cmsApi.getStartNodeAiAgentFlow()
+  if (!startNodeAiAgentFlow) {
+    return []
+  }
+
+  const contents =
+    await flowBuilderPlugin.getContentsByNode(startNodeAiAgentFlow)
+  const aiAgentContent = contents.find(
+    content => content instanceof FlowAiAgent
+  ) as FlowAiAgent
+
+  if (!aiAgentContent) {
+    return []
+  }
+
+  const aiAgentResponse = await flowBuilderPlugin.getAiAgentResponse?.(
+    request,
+    {
+      name: aiAgentContent.name,
+      instructions: aiAgentContent.instructions,
+    }
+  )
+
+  if (!aiAgentResponse) {
+    return []
+  }
+
+  return updateContentsWithAiAgentResponse(contents, aiAgentResponse)
+}
+
+function updateContentsWithAiAgentResponse(
+  contents: FlowContent[],
+  aiAgentResponse: AiAgentResponse
+): FlowContent[] {
+  return contents.map(content => {
+    if (content instanceof FlowAiAgent) {
+      content.text = aiAgentResponse.message.content
+    }
+
+    return content
+  })
+}

package/src/action/index.tsx

@@ -1,14 +1,22 @@
-import { INPUT } from '@botonic/core'
-import { ActionRequest, Multichannel, RequestContext } from '@botonic/react'
+import { BotContext, INPUT, isDev, isWebchat } from '@botonic/core'
+import {
+  ActionRequest,
+  Multichannel,
+  RequestContext,
+  WebchatSettings,
+  WebchatSettingsProps,
+} from '@botonic/react'
 import React from 'react'
 
 import { FlowBuilderApi } from '../api'
 import { FlowContent, FlowHandoff } from '../content-fields'
 import { FlowBotAction } from '../content-fields/flow-bot-action'
+import { ContentFilterExecutor } from '../filters'
 import { getFlowBuilderPlugin } from '../helpers'
 import BotonicPluginFlowBuilder from '../index'
 import { trackFlowContent } from '../tracking'
 import { inputHasTextData } from '../utils'
+import { getContentsByAiAgent } from './ai-agent'
 import { getContentsByFallback } from './fallback'
 import { getContentsByFirstInteraction } from './first-interaction'
 import { getContentsByKnowledgeBase } from './knowledge-bases'
@@ -16,6 +24,7 @@ import { getContentsByPayload } from './payload'
 
 export type FlowBuilderActionProps = {
   contents: FlowContent[]
+  webchatSettingsParams?: WebchatSettingsProps
 }
 
 export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
@@ -27,10 +36,11 @@ export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
   ): Promise<FlowBuilderActionProps> {
     const context = getContext(request)
     const contents = await getContentsByFirstInteraction(context)
-    await trackFlowContent(request, contents)
-    await FlowBuilderAction.doHandoffAndBotActions(request, contents)
+    const filteredContents = await filterContents(request, contents)
+    await trackFlowContent(request, filteredContents)
+    await FlowBuilderAction.doHandoffAndBotActions(request, filteredContents)
 
-    return { contents }
+    return { contents: filteredContents }
   }
 
   static async botonicInit(
@@ -38,13 +48,14 @@ export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
     contentID?: string
   ): Promise<FlowBuilderActionProps> {
     const contents = await getContents(request, contentID)
-    await trackFlowContent(request, contents)
-    await FlowBuilderAction.doHandoffAndBotActions(request, contents)
+    const filteredContents = await filterContents(request, contents)
+    await trackFlowContent(request, filteredContents)
+    await FlowBuilderAction.doHandoffAndBotActions(request, filteredContents)
 
-    return { contents }
+    return { contents: filteredContents }
   }
 
-  private static async doHandoffAndBotActions(
+  static async doHandoffAndBotActions(
     request: ActionRequest,
     contents: FlowContent[]
   ) {
@@ -64,19 +75,26 @@ export class FlowBuilderAction extends React.Component<FlowBuilderActionProps> {
   }
 
   render(): JSX.Element | JSX.Element[] {
-    const { contents } = this.props
+    const { contents, webchatSettingsParams } = this.props
     const request = this.context as ActionRequest
-    return contents.map(content => content.toBotonic(content.id, request))
+
+    return (
+      <>
+        {(isWebchat(request.session) || isDev(request.session)) &&
+          !!webchatSettingsParams && (
+            <WebchatSettings {...webchatSettingsParams} />
+          )}
+        {contents.map(content => content.toBotonic(content.id, request))}
+      </>
+    )
   }
 }
 
 export class FlowBuilderMultichannelAction extends FlowBuilderAction {
   render(): JSX.Element | JSX.Element[] {
-    const { contents } = this.props
-    const request = this.context as ActionRequest
     return (
       <Multichannel text={{ buttonsAsText: false }}>
-        {contents.map(content => content.toBotonic(content.id, request))}
+        <FlowBuilderAction {...this.props} />
       </Multichannel>
     )
   }
@@ -106,6 +124,10 @@ async function getContents(
   }
 
   if (inputHasTextData(request.input)) {
+    const aiAgentContents = await getContentsByAiAgent(context)
+    if (aiAgentContents.length > 0) {
+      return aiAgentContents
+    }
     const knowledgeBaseContents = await getContentsByKnowledgeBase(context)
     if (knowledgeBaseContents.length > 0) {
       return knowledgeBaseContents
@@ -115,6 +137,25 @@ async function getContents(
   return await getContentsByFallback(context)
 }
 
+async function filterContents(
+  request: BotContext,
+  contents: FlowContent[]
+): Promise<FlowContent[]> {
+  const flowBuilderPlugin = getFlowBuilderPlugin(request.plugins)
+  const contentFilters = flowBuilderPlugin.contentFilters
+  const contentFilterExecutor = new ContentFilterExecutor({
+    filters: contentFilters,
+  })
+
+  const filteredContents: FlowContent[] = []
+  for (const content of contents) {
+    const filteredContent = await contentFilterExecutor.filter(request, content)
+    filteredContents.push(filteredContent)
+  }
+
+  return filteredContents
+}
+
 export interface FlowBuilderContext {
   cmsApi: FlowBuilderApi
   flowBuilderPlugin: BotonicPluginFlowBuilder

package/src/api.ts

@@ -1,7 +1,12 @@
 import { Input, PluginPreRequest } from '@botonic/core'
 import axios from 'axios'
 
-import { KNOWLEDGE_BASE_FLOW_NAME, SEPARATOR, UUID_REGEXP } from './constants'
+import {
+  AI_AGENTS_FLOW_NAME,
+  KNOWLEDGE_BASE_FLOW_NAME,
+  SEPARATOR,
+  UUID_REGEXP,
+} from './constants'
 import {
   HtBotActionNode,
   HtFallbackNode,
@@ -202,6 +207,18 @@ export class FlowBuilderApi {
     return this.getNodeById<HtNodeWithContent>(knowledgeBaseFlow.start_node_id)
   }
 
+  getStartNodeAiAgentFlow(): HtNodeWithContent | undefined {
+    const aiAgentFlow = this.flow.flows.find(
+      flow => flow.name === AI_AGENTS_FLOW_NAME
+    )
+
+    if (!aiAgentFlow) {
+      return undefined
+    }
+
+    return this.getNodeById<HtNodeWithContent>(aiAgentFlow.start_node_id)
+  }
+
   isKnowledgeBaseEnabled(): boolean {
     return this.flow.is_knowledge_base_active || false
   }

package/src/constants.ts

@@ -10,4 +10,5 @@ export const UUID_REGEXP =
 
 export const MAIN_FLOW_NAME = 'Main'
 export const KNOWLEDGE_BASE_FLOW_NAME = 'Knowledge base'
+export const AI_AGENTS_FLOW_NAME = 'AI agents'
 export const FALLBACK_FLOW_NAME = 'Fallback'

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

@@ -0,0 +1,23 @@
+import { Text } from '@botonic/react'
+
+import { ContentFieldsBase } from './content-fields-base'
+import { HtAiAgentNode } from './hubtype-fields/ai-agent'
+
+export class FlowAiAgent extends ContentFieldsBase {
+  public code: string = ''
+  public name: string = ''
+  public instructions: string = ''
+  public text: string = ''
+
+  static fromHubtypeCMS(component: HtAiAgentNode): FlowAiAgent {
+    const newAiAgent = new FlowAiAgent(component.id)
+    newAiAgent.name = component.content.name
+    newAiAgent.instructions = component.content.instructions
+
+    return newAiAgent
+  }
+
+  toBotonic(id: string): JSX.Element {
+    return <Text key={id}>{this.text}</Text>
+  }
+}

package/src/content-fields/hubtype-fields/ai-agent.ts

@@ -0,0 +1,10 @@
+import { HtBaseNode } from './common'
+import { HtNodeWithContentType } from './node-types'
+
+export interface HtAiAgentNode extends HtBaseNode {
+  type: HtNodeWithContentType.AI_AGENT
+  content: {
+    name: string
+    instructions: string
+  }
+}

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

@@ -12,6 +12,7 @@ export enum HtNodeWithContentType {
   WHATSAPP_CTA_URL_BUTTON = 'whatsapp-cta-url-button',
   KNOWLEDGE_BASE = 'knowledge-base',
   BOT_ACTION = 'bot-action',
+  AI_AGENT = 'ai-agent',
 }
 
 export enum HtNodeWithoutContentType {

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

@@ -1,3 +1,4 @@
+import { HtAiAgentNode } from './ai-agent'
 import { HtBotActionNode } from './bot-action'
 import { HtCarouselNode } from './carousel'
 import { HtFallbackNode } from './fallback'
@@ -29,6 +30,7 @@ export type HtNodeWithContent =
   | HtSmartIntentNode
   | HtKnowledgeBaseNode
   | HtBotActionNode
+  | HtAiAgentNode
 
 export type HtNodeWithoutContent = HtUrlNode | HtPayloadNode | HtGoToFlow
 

package/src/content-fields/index.ts

@@ -1,3 +1,4 @@
+import { FlowAiAgent } from './flow-ai-agent'
 import { FlowBotAction } from './flow-bot-action'
 import { FlowCarousel } from './flow-carousel'
 import { FlowHandoff } from './flow-handoff'
@@ -10,21 +11,21 @@ import { FlowText } from './flow-text'
 import { FlowVideo } from './flow-video'
 import { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
 import { FlowWhatsappButtonList } from './whatsapp-button-list/flow-whatsapp-button-list'
-
 export { ContentFieldsBase } from './content-fields-base'
 export { FlowButton } from './flow-button'
 export { FlowElement } from './flow-element'
 export {
+  FlowAiAgent,
   FlowBotAction,
   FlowCarousel,
+  FlowHandoff,
   FlowImage,
   FlowKnowledgeBase,
   FlowText,
   FlowVideo,
   FlowWhatsappButtonList,
+  FlowWhatsappCtaUrlButtonNode,
 }
-export { FlowHandoff } from './flow-handoff'
-export { FlowWhatsappCtaUrlButtonNode } from './flow-whatsapp-cta-url-button'
 
 export type FlowContent =
   | FlowCarousel
@@ -36,5 +37,6 @@ export type FlowContent =
   | FlowHandoff
   | FlowKnowledgeBase
   | FlowBotAction
+  | FlowAiAgent
 
 export { DISABLED_MEMORY_LENGTH }

package/src/filters/index.ts

@@ -0,0 +1,27 @@
+import { BotContext } from '@botonic/core'
+
+import { FlowContent } from '../content-fields'
+import { ContentFilter } from '../types'
+
+interface ContentFilterExecutorOptions {
+  filters: ContentFilter[]
+}
+
+export class ContentFilterExecutor {
+  private filters: ContentFilter[] = []
+
+  constructor(options: ContentFilterExecutorOptions) {
+    this.filters = options.filters
+  }
+
+  async filter(
+    request: BotContext,
+    content: FlowContent
+  ): Promise<FlowContent> {
+    for (const filter of this.filters) {
+      content = await filter(request, content)
+    }
+
+    return content
+  }
+}

package/src/index.ts

@@ -14,6 +14,7 @@ import {
   SOURCE_INFO_SEPARATOR,
 } from './constants'
 import {
+  FlowAiAgent,
   FlowBotAction,
   FlowCarousel,
   FlowContent,
@@ -37,7 +38,9 @@ import {
 } from './content-fields/hubtype-fields'
 import { DEFAULT_FUNCTIONS } from './functions'
 import {
+  AiAgentFunction,
   BotonicPluginFlowBuilderOptions,
+  ContentFilter,
   FlowBuilderJSONVersion,
   InShadowingConfig,
   KnowledgeBaseFunction,
@@ -58,8 +61,10 @@ export default class BotonicPluginFlowBuilder implements Plugin {
   public getAccessToken: (session: Session) => string
   public trackEvent?: TrackEventFunction
   public getKnowledgeBaseResponse?: KnowledgeBaseFunction
+  public getAiAgentResponse?: AiAgentFunction
   public smartIntentsConfig: SmartIntentsInferenceConfig
   public inShadowing: InShadowingConfig
+  public contentFilters: ContentFilter[]
 
   // TODO: Rethink how we construct FlowBuilderApi to be simpler
   public jsonVersion: FlowBuilderJSONVersion
@@ -72,6 +77,8 @@ export default class BotonicPluginFlowBuilder implements Plugin {
     this.getAccessToken = resolveGetAccessToken(options.getAccessToken)
     this.trackEvent = options.trackEvent
     this.getKnowledgeBaseResponse = options.getKnowledgeBaseResponse
+    // TODO: Add getAiAgentResponse before publish 0.36.0
+    this.getAiAgentResponse = undefined //options.getAiAgentResponse
     this.smartIntentsConfig = {
       ...options?.smartIntentsConfig,
       useLatest: this.jsonVersion === FlowBuilderJSONVersion.LATEST,
@@ -83,6 +90,7 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       allowSmartIntents: options.inShadowing?.allowSmartIntents || false,
       allowKnowledgeBases: options.inShadowing?.allowKnowledgeBases || false,
     }
+    this.contentFilters = options.contentFilters || []
   }
 
   resolveFlowUrl(request: PluginPreRequest): string {
@@ -230,6 +238,9 @@ export default class BotonicPluginFlowBuilder implements Plugin {
       case HtNodeWithContentType.KNOWLEDGE_BASE:
         return FlowKnowledgeBase.fromHubtypeCMS(hubtypeContent)
 
+      case HtNodeWithContentType.AI_AGENT:
+        return FlowAiAgent.fromHubtypeCMS(hubtypeContent)
+
       case HtNodeWithContentType.BOT_ACTION:
         return FlowBotAction.fromHubtypeCMS(hubtypeContent, locale, this.cmsApi)
 
@@ -305,6 +316,7 @@ export { HtBotActionNode } from './content-fields/hubtype-fields'
 export { trackFlowContent } from './tracking'
 export {
   BotonicPluginFlowBuilderOptions,
+  ContentFilter,
   FlowBuilderJSONVersion,
   PayloadParamsBase,
 } from './types'

package/src/types.ts

@@ -1,10 +1,6 @@
-import {
-  BotContext,
-  PluginPreRequest,
-  ResolvedPlugins,
-  Session,
-} from '@botonic/core'
+import { BotContext, PluginPreRequest, ResolvedPlugins } from '@botonic/core'
 
+import { FlowContent } from './content-fields'
 import { HtFlowBuilderData } from './content-fields/hubtype-fields'
 
 export interface InShadowingConfig {
@@ -24,8 +20,10 @@ export interface BotonicPluginFlowBuilderOptions<
   getAccessToken: () => string
   trackEvent?: TrackEventFunction<TPlugins, TExtraData>
   getKnowledgeBaseResponse?: KnowledgeBaseFunction<TPlugins, TExtraData>
+  getAiAgentResponse?: AiAgentFunction<TPlugins, TExtraData>
   smartIntentsConfig?: { numSmartIntentsToUse: number }
   inShadowing?: Partial<InShadowingConfig>
+  contentFilters?: ContentFilter<TPlugins, TExtraData>[]
 }
 
 export type TrackEventFunction<
@@ -48,6 +46,26 @@ export type KnowledgeBaseFunction<
   memoryLength: number
 ) => Promise<KnowledgeBaseResponse>
 
+export type AiAgentFunction<
+  TPlugins extends ResolvedPlugins = ResolvedPlugins,
+  TExtraData = any,
+> = (
+  request: BotContext<TPlugins, TExtraData>,
+  aiAgentArgs: AiAgentArgs
+) => Promise<AiAgentResponse>
+
+export interface AiAgentArgs {
+  name: string
+  instructions: string
+}
+export type ContentFilter<
+  TPlugins extends ResolvedPlugins = ResolvedPlugins,
+  TExtraData = any,
+> = (
+  request: BotContext<TPlugins, TExtraData>,
+  content: FlowContent
+) => Promise<FlowContent> | FlowContent
+
 export interface FlowBuilderApiOptions {
   url: string
   flowUrl: string
@@ -74,6 +92,10 @@ export interface KnowledgeBaseResponse {
   answer: string
 }
 
+export interface AiAgentResponse {
+  message: { role: string; content: string }
+}
+
 export interface SmartIntentResponse {
   data: {
     smart_intent_title: string