simplify template

examples/flow-builder-typescript/package.json

@@ -24,11 +24,12 @@
     "he": "^1.2.0",
     "react-redux": "^7.2.9",
     "styled-components": "^6.0.0",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1"
   },
   "devDependencies": {
     "@botonic/dx": "^0.31.0",
-    "@botonic/dx-bundler-webpack": "^0.31.0-alpha.0",
     "@types/react": "18.3.13",
     "@types/react-dom": "18.3.1",
     "@types/react-redux": "^7.1.34",

examples/flow-builder-typescript/src/client/webchat/index.ts

@@ -1,11 +1,11 @@
 import { WebchatApp, WebchatArgs } from '@botonic/react'
 
-import { FORCED_PAYLOAD } from '../../server/constants'
+import { START_CONVERSATION_PAYLOAD } from '../../server/constants'
 
 export const webchat: WebchatArgs = {
   onOpen: (app: WebchatApp) => {
     if (app.getMessages()?.length === 0) {
-      app.addUserPayload(FORCED_PAYLOAD)
+      app.addUserPayload(START_CONVERSATION_PAYLOAD)
     }
   },
 }

examples/flow-builder-typescript/src/server/actions/start-conversation.tsx

@@ -1,18 +1,17 @@
-import { FlowBuilderActionProps } from '@botonic/plugin-flow-builder'
+import {
+  FlowBuilderActionProps,
+  FlowBuilderMultichannelAction,
+} from '@botonic/plugin-flow-builder'
 import { RequestContext } from '@botonic/react'
 
 import { BotRequest } from '../types'
-import { getRequestData } from '../utils/actions'
-import { ExtendedFlowBuilderAction } from './extended-flow-builder'
 
 // Action intended to be used in first interaction, when there is inactivity or when the start over button is clicked
-export class StartConversationAction extends ExtendedFlowBuilderAction {
+export class StartConversationAction extends FlowBuilderMultichannelAction {
   static contextType = RequestContext
   static async botonicInit(
     request: BotRequest
   ): Promise<FlowBuilderActionProps> {
-    const { cmsPlugin, botContext } = getRequestData(request)
-    const contents = await cmsPlugin.getStartContents(botContext.locale)
-    return super.botonicInit(request, { contentId: contents[0].code })
+    return super.executeConversationStart(request)
   }
 }

examples/flow-builder-typescript/src/server/config.ts

@@ -10,7 +10,7 @@ import {
 import { ActionRequest } from '@botonic/react'
 
 import { context } from './domain/user-data'
-import { EventPropsMap, trackEvent } from './tracking'
+import { trackEvent } from './tracking'
 import { BotRequest, BotSession } from './types'
 import { ENVIRONMENT, isLocal, isProduction } from './utils/env-utils'
 
@@ -26,12 +26,9 @@ function getFlowBuilderConfig(
       : FlowBuilderJSONVersion.LATEST,
     getLocale: (session: Session) => context(session as BotSession).locale,
     getAccessToken: () => '', // Used locally,
-    trackEvent: async (request: ActionRequest, eventAction, args) => {
-      await trackEvent(
-        request as BotRequest,
-        eventAction as keyof EventPropsMap,
-        args as EventPropsMap[keyof EventPropsMap]
-      )
+    // @ts-ignore
+    trackEvent: async (request: BotRequest, eventName, args) => {
+      await trackEvent(request, eventName, args)
     },
     getKnowledgeBaseResponse: async (
       request: ActionRequest,

examples/flow-builder-typescript/src/server/constants.ts

@@ -1,48 +1 @@
-export const FORCED_PAYLOAD = '_forced_payload_'
-
-export const RESTART_CONVERSATION_PAYLOAD = 'restart-conversation'
-
-export const SUBMITED_WEBVIEW_PAYLOAD = 'ADD_SUBMITED_WEBVIEW_PAYLOAD'
-
-export const UPDATE_SESSION_PAYLOAD = 'update-session'
-
-export const REMOVE_SESSION_PAYLOAD = 'remove-session'
-
-export const MODIFY_SESSION_PAYLOAD_REGEX = new RegExp(
-  `^${UPDATE_SESSION_PAYLOAD}.*|^${REMOVE_SESSION_PAYLOAD}.*`
-)
-
-export const REMOVE_SESSION_PAYLOAD_REGEX = new RegExp(
-  `^${REMOVE_SESSION_PAYLOAD}.*`
-)
-
-export const CONTENT_ID_PAYLOAD = 'content-id'
-
-export const CONTENT_ID_PAYLOAD_REGEX = new RegExp(`^${CONTENT_ID_PAYLOAD}.*`)
-
-export const RATING_PAYLOAD = 'rating'
-
-export const RATING_PAYLOAD_REGEX = new RegExp(`^${RATING_PAYLOAD}.*`)
-
-export const START_CONVERSATION_PAYLOAD_REGEX = new RegExp(
-  `^${FORCED_PAYLOAD}$|^${RESTART_CONVERSATION_PAYLOAD}$`
-)
-
-export const SET_WEBCHAT_SETTINGS_PAYLOAD = 'set-webchat-settings'
-
-export const SET_WEBCHAT_SETTINGS_PAYLOAD_REGEX = new RegExp(
-  `^${SET_WEBCHAT_SETTINGS_PAYLOAD}.*`
-)
-
-export const DO_NOTHING_PAYLOAD = 'do-nothing'
-export const DO_NOTHING_PAYLOAD_REGEX = new RegExp(`^${DO_NOTHING_PAYLOAD}.*`)
-
-export const BACKDOOR_COMMANDS = {
-  botInfo: '###bot_info',
-  reset: '###reset',
-  setPayload: '###payload=',
-}
-
-export const SET_PAYLOAD_BACKDOOR_REGEX = new RegExp(
-  `^${BACKDOOR_COMMANDS.setPayload}.*`
-)
+export const START_CONVERSATION_PAYLOAD = 'start-conversation'

examples/flow-builder-typescript/src/server/domain/user-data.ts

@@ -1,8 +1,12 @@
 import { BotSession, ContextWithLocale } from '../types'
-import { empty } from '../utils/functional'
+
+export const empty = (object: Record<string, any>): boolean =>
+  Object.keys(object).length === 0
 
 const COUNTRIES = {
   spain: 'ES',
+  united_states: 'US',
+  united_kingdom: 'UK',
 } as const
 
 const LANGUAGES = {
@@ -31,8 +35,8 @@ export class UserData {
 
   static createWithDefaults(): UserData {
     return new UserData({
-      country: COUNTRIES.spain,
-      language: LANGUAGES.spanish,
+      country: COUNTRIES.united_states,
+      language: LANGUAGES.english,
     })
   }
 

examples/flow-builder-typescript/src/server/plugins.ts

@@ -1,7 +1,6 @@
 import { PluginConfig } from '@botonic/core'
 
 import { CONFIG } from './config'
-import * as PreHandoffPlugin from './plugins/pre-handoff'
 import { getEnvironment } from './utils/env-utils'
 
 const config = CONFIG[getEnvironment()]
@@ -16,10 +15,6 @@ export const plugins: PluginConfig<any>[] = [
     id: 'hubtypeAnalytics',
     resolve: require('@botonic/plugin-hubtype-analytics'),
   },
-  {
-    id: 'preHandoff',
-    resolve: PreHandoffPlugin,
-  },
   {
     id: 'knowledgeBases',
     resolve: require('@botonic/plugin-knowledge-bases'),

examples/flow-builder-typescript/src/server/routes.ts

@@ -1,25 +1,22 @@
 import { Route } from '@botonic/core'
+import { FlowBuilderMultichannelAction } from '@botonic/plugin-flow-builder'
 
-import { ExtendedFlowBuilderAction } from './actions/extended-flow-builder'
 import { StartConversationAction } from './actions/start-conversation'
-import { START_CONVERSATION_PAYLOAD_REGEX } from './constants'
-import { BotRequest } from './types'
-
-export function routes(request: BotRequest): Route[] {
-  console.log('[User Input]', request.input)
+import { START_CONVERSATION_PAYLOAD } from './constants'
 
+export function routes(): Route[] {
   const routes: Route[] = [
     {
       path: 'start-conversation',
-      payload: START_CONVERSATION_PAYLOAD_REGEX,
+      payload: START_CONVERSATION_PAYLOAD,
       action: StartConversationAction,
     },
     {
       path: 'flow-builder-action',
       text: /.*/,
       payload: /.*/,
       type: /.*/,
-      action: ExtendedFlowBuilderAction,
+      action: FlowBuilderMultichannelAction,
     },
   ]
 

examples/flow-builder-typescript/src/server/tracking.ts

@@ -1,73 +1,44 @@
-import BotonicPluginHubtypeAnalytics, {
-  EventAction,
-  EventCustom,
-  EventFeedback,
-  EventHandoff,
-  EventHandoffOption,
-  EventWebviewEnd,
-  EventWebviewStep,
-  HtEventProps,
-} from '@botonic/plugin-hubtype-analytics'
-import { ActionRequest } from '@botonic/react'
+import { EventAction, HtEventProps } from '@botonic/plugin-hubtype-analytics'
 
 import { BotRequest } from './types'
-import { isBrowser, isLocal } from './utils/env-utils'
+import { isLocal } from './utils/env-utils'
 
-export type EventPropsMap = {
-  [EventAction.FeedbackCase]: Omit<EventFeedback, 'action'>
-  [EventAction.FeedbackConversation]: Omit<EventFeedback, 'action'>
-  [EventAction.FeedbackWebview]: Omit<EventFeedback, 'action'>
-  [EventAction.HandoffOption]: Omit<EventHandoffOption, 'action'>
-  [EventAction.HandoffFail]: Omit<EventHandoff, 'action'>
-  [EventAction.WebviewStep]: Omit<EventWebviewStep, 'action'>
-  [EventAction.WebviewEnd]: Omit<EventWebviewEnd, 'action'>
-  [EventAction.Custom]: Omit<EventCustom, 'action'>
-}
+type EventArgs = { [key: string]: any }
 
-export async function trackEvent<T extends keyof EventPropsMap>(
+export async function trackEvent(
   request: BotRequest,
-  eventName: T,
-  eventProps?: EventPropsMap[T]
+  eventName: string,
+  args?: EventArgs
 ): Promise<void> {
-  if (isLocal()) {
-    console.log('Tracking event...', eventName, eventProps)
-    return
+  if (Object.values(EventAction).includes(eventName as EventAction)) {
+    const htEventProps = {
+      action: eventName as EventAction,
+      ...args,
+    }
+    await trackHtEvent(request, htEventProps as HtEventProps)
   }
-
-  const htEventProps = eventProps
-    ? {
-        action: eventName as EventAction,
-        ...eventProps,
-      }
-    : { action: eventName as EventAction }
-
-  await trackHtEvent(request, htEventProps as HtEventProps)
+  return
 }
 
 export async function trackHtEvent(
-  request: ActionRequest,
+  request: BotRequest,
   htEventProps: HtEventProps
 ) {
-  const printLogs = !isBrowser()
-  const hubtypeAnalyticsPlugin = isBrowser()
-    ? new BotonicPluginHubtypeAnalytics()
-    : (request.plugins.hubtypeAnalytics as BotonicPluginHubtypeAnalytics)
+  if (isLocal()) {
+    console.log('TrackHtEvent', { htEventProps })
+    return
+  }
+  const hubtypeAnalytics = request.plugins.hubtypeAnalytics
   try {
-    const response = await hubtypeAnalyticsPlugin.trackEvent(
-      request,
-      htEventProps
-    )
-    printLogs && console.log('TrackHtEvent Success', { data: response.data })
-  } catch (error: any) {
-    printLogs &&
-      console.log(
-        'TrackHtEvent Error',
-        { error },
-        JSON.stringify(error.response?.data),
-        {
-          errorData: error.response?.data,
-        }
-      )
+    await hubtypeAnalytics.trackEvent(request, htEventProps)
+    console.log('TrackHtEvent Success', {
+      action: htEventProps.action,
+    })
+  } catch (error: unknown) {
+    console.error('TrackHtEvent Error', {
+      action: htEventProps.action,
+    })
   }
+
   return
 }