@botonic/nx-plugin 2.29.0 → 2.30.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 2.30.0 (2026-06-11)
+
+### 🚀 Features
+
+- update botonic-basic-template ([#932](https://github.com/metis-ai/hubtype-product/pull/932))
+- update plugins to last botonicV0 changes #BLT-2370 ([#920](https://github.com/metis-ai/hubtype-product/pull/920))
+- **@botonic/dx-bundling:** derive Lambda noExternal deps programmatically ([#918](https://github.com/metis-ai/hubtype-product/pull/918))
+- support botonic v2 preview in flow builder ([#916](https://github.com/metis-ai/hubtype-product/pull/916))
+- wire plugin-hubtype-analytics into bot apps ([#909](https://github.com/metis-ai/hubtype-product/pull/909))
+
+### 🩹 Fixes
+
+- allow multiple, only picking webchat app id ([#896](https://github.com/metis-ai/hubtype-product/pull/896))
+
+### ❤️ Thank You
+
+- Marc Rabat @vanbasten17
+- Oriol Raventós @Iru89
+
 ## 2.29.0 (2026-05-12)
 
 ### 🚀 Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/nx-plugin",
-  "version": "2.29.0",
+  "version": "2.30.0",
   "description": "Nx plugin for creating Botonic bot applications",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -42,7 +42,8 @@
     "fs-extra": "^11.1.1",
     "qs": "^6.11.0",
     "yaml": "^2.6.1",
-    "zip-a-folder": "^1.1.0"
+    "zip-a-folder": "^1.1.0",
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "nx": ">=21.0.0"

package/src/executors/deploy-local-runtime/executor.js

@@ -130,12 +130,16 @@ async function deployLocalRuntime(botonicApiService, projectRoot, params) {
       lambdaEndpoint
     });
     const allProviders = await botonicApiService.getProviders();
-    const appId = allProviders.data.results.filter(
-      (provider) => provider.is_test && provider.is_active
-    )[0].id;
-    console.log("\u2705 Local runtime deployment completed!");
-    updateEnvLocal(projectRoot, appId);
-    console.log(`\u{1F194} APP_ID: ${appId}`);
+    const appId = (0, import_executor_helpers.getActiveTestWebchatProviderAppId)(allProviders.data?.results);
+    if (!appId) {
+      console.error(
+        "\u274C No active test webchat provider found. Local runtime needs a webchat test provider on this bot."
+      );
+    } else {
+      console.log("\u2705 Local runtime deployment completed!");
+      updateEnvLocal(projectRoot, appId);
+      console.log(`\u{1F194} APP_ID: ${appId}`);
+    }
   } catch (error) {
     console.error("\u274C Local runtime deployment failed");
     console.error(`${String(error)}`);

package/src/generators/bot-app/files/src/client/webchat/index.tsx.template

@@ -66,8 +66,10 @@ function App({
     <WebchatTrigger
       appId={webchatConfig.appId}
       position='bottom-right'
+      loader={() => import('./webchat')}
       onReady={handleReady}
       webchatConfig={{
+        ...webchatConfig,
         avatarConfig,
         customMessages,
         title: options.title || '<%= className %>',

package/src/generators/bot-app/files/src/client/webchat/webchat.tsx.template

@@ -0,0 +1,111 @@
+import type { WebchatController } from '@botonic/webchat-core'
+import type {
+  WebchatCompositionExtras,
+  WebchatCompositionProps,
+} from '@botonic/webchat-react'
+import {
+  useWebchatContext,
+  WebchatContainer,
+  WebchatHeader,
+  WebchatInput,
+  WebchatMessages,
+  WebchatProvider,
+} from '@botonic/webchat-react'
+import { useEffect, useRef } from 'react'
+
+function WebchatContent({
+  isOpen,
+  onClose,
+  onControllerReady,
+  title,
+  placeholder,
+  showBranding,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onControllerReady: (controller: WebchatController) => void
+  title?: string
+  placeholder?: string
+  showBranding?: boolean
+}) {
+  const { controller } = useWebchatContext()
+  const hasNotifiedRef = useRef(false)
+
+  useEffect(() => {
+    if (controller && !hasNotifiedRef.current) {
+      hasNotifiedRef.current = true
+      onControllerReady(controller)
+    }
+  }, [controller, onControllerReady])
+
+  useEffect(() => {
+    if (!controller) return
+    const snapshot = controller.machine.getSnapshot()
+    const currentIsOpen = snapshot.context.isOpen ?? false
+    if (isOpen && !currentIsOpen) {
+      controller.open()
+    } else if (!isOpen && currentIsOpen) {
+      controller.close()
+    }
+  }, [isOpen, controller])
+
+  const handleClose = () => {
+    controller?.close()
+    onClose()
+  }
+
+  return (
+    <WebchatContainer layout='default'>
+      <WebchatHeader title={title} onClose={handleClose} />
+      <WebchatMessages variant='default' />
+      <WebchatInput
+        placeholder={placeholder}
+        showBranding={showBranding ?? true}
+        variant='default'
+      />
+    </WebchatContainer>
+  )
+}
+
+export default function Webchat({
+  appId,
+  isOpen,
+  onClose,
+  onControllerReady,
+  ...extras
+}: WebchatCompositionProps) {
+  // `WebchatCompositionProps` exposes extras via a `[key: string]: unknown`
+  // index signature, so assert the concrete shape once instead of per field.
+  const {
+    title,
+    placeholder,
+    showBranding,
+    customMessages = {},
+    avatarConfig,
+    webchatClientSettings,
+    enableResponsiveHeroHeader,
+    storage,
+    previewUtils,
+  } = extras as WebchatCompositionExtras
+
+  return (
+    <WebchatProvider
+      appId={appId}
+      customMessages={customMessages}
+      avatarConfig={avatarConfig}
+      webchatClientSettings={webchatClientSettings}
+      enableResponsiveHeroHeader={enableResponsiveHeroHeader}
+      storage={storage}
+      previewUtils={previewUtils}
+    >
+      <WebchatContent
+        isOpen={isOpen}
+        onClose={onClose}
+        onControllerReady={onControllerReady}
+        title={title}
+        placeholder={placeholder}
+        showBranding={showBranding}
+      />
+    </WebchatProvider>
+  )
+}

package/src/generators/bot-app/files/src/server/bot/plugins/flow-builder/index.ts.template

@@ -1,12 +1,13 @@
+import { BotonicContext } from '@botonic/core'
 import { AiAgentArgs } from '@botonic/plugin-ai-agents'
+import { BotonicPluginHubtypeAnalytics } from '@botonic/plugin-hubtype-analytics'
 import {
   BotonicPluginFlowBuilder,
   BotonicPluginFlowBuilderOptions,
   FlowBuilderJSONVersion,
 } from '@botonic/plugin-flow-builder'
-import { BotonicContext } from '@botonic/core'
+import { EventAction, HtEventProps } from '@botonic/shared'
 
-import { trackEventToHubtypeAnalytics } from '../../tracking'
 import { isLambdaLocal } from '../../utils'
 import { getAiAgentResponse } from '../ai-agents'
 
@@ -14,8 +15,16 @@ export const flowBuilderConfig: BotonicPluginFlowBuilderOptions = {
   flowVersion: isLambdaLocal()
     ? FlowBuilderJSONVersion.DRAFT
     : FlowBuilderJSONVersion.LATEST,
-  trackEvent: async (botonicContext: BotonicContext, eventAction, args) => {
-    await trackEventToHubtypeAnalytics(botonicContext, eventAction, args)
+  trackEvent: async (
+    context: BotonicContext,
+    eventAction: EventAction,
+    args: Omit<HtEventProps, 'action'>
+  ): Promise<void> => {
+    const analyticsPlugin = new BotonicPluginHubtypeAnalytics()
+    await analyticsPlugin.trackEvent(context, {
+      action: eventAction,
+      ...args,
+    } as HtEventProps)
   },
   getAiAgentResponse: async (
     botonicContext: BotonicContext,

package/src/generators/bot-app/files/src/server/bot/plugins/index.ts.template

@@ -1,5 +1,3 @@
-import { BotonicPluginHubtypeAnalytics } from '@botonic/plugin-hubtype-analytics'
-
 import { aiAgentsPlugin } from './ai-agents'
 import { flowBuilderPlugin } from './flow-builder'
 
@@ -7,5 +5,4 @@ export const plugins = {
   flowBuilder: flowBuilderPlugin,
   // AI Agents plugin is only loaded if AZURE_OPENAI_API_KEY or OPENAI_API_KEY is set
   ...(aiAgentsPlugin && { aiAgents: aiAgentsPlugin }),
-  hubtypeAnalytics: new BotonicPluginHubtypeAnalytics(),
 }

package/src/generators/bot-app/files/src/server/lambda/handler.js.template

@@ -3,7 +3,7 @@
 /*
 	In lambda functions, it only have access to all files the first time it's invoked,
 	and placed into memory, after that it only calls the function that have the information
-	loadded in memory. For this reason, we initialize the bot the first time, and then we
+	loaded in memory. For this reason, we initialize the bot the first time, and then we
 	only execute the input function
 
 	https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html

package/src/generators/bot-app/files/src/server/lambda/package.json

@@ -12,9 +12,9 @@
   "description": "",
   "dependencies": {
     "uuid": "^11.1.0",
-    "@openai/agents": "^0.1.11",
-    "openai": "^5.23.2",
+    "@openai/agents": "^0.10.1",
+    "openai": "^6.0.0",
     "tslib": "^2.3.0",
-    "zod": "^3.25.76"
+    "zod": "^4.4.3"
   }
 }

package/src/generators/bot-app/files/vite/botonic-ssr-deps.ts.template

@@ -0,0 +1,56 @@
+import { readFileSync, readdirSync } from 'fs'
+import { resolve } from 'path'
+
+// Build-only tools — never needed at Lambda runtime.
+const BUILD_ONLY_DEPS = new Set(['tslib', 'vite', 'vitest'])
+
+// Browser/UI-only packages pulled in by client-side @botonic/* packages
+// (webchat-react, webchat-core). They are never imported by the server entry.
+const BROWSER_ONLY_DEPS = new Set([
+  'react',
+  'react-dom',
+  'react-aria',
+  '@xstate/react',
+  '@lilara/foundations',
+  '@lilara/ui-web-react',
+  'class-variance-authority',
+  'react-markdown',
+  'rehype-external-links',
+  'remark-breaks',
+  'remark-gfm',
+])
+
+/**
+ * Collects all third-party dependencies declared by the @botonic/* packages
+ * installed in this app's node_modules. The result is used in the Lambda node
+ * build's `ssr.noExternal` so that these packages are bundled into the artifact,
+ * where no node_modules are available at runtime.
+ *
+ * Deriving the list from the installed @botonic/* package.json files keeps it
+ * correct as plugins add new dependencies, instead of a hand-maintained array.
+ */
+export function getBotonicThirdPartyDeps(appRoot: string): string[] {
+  const botonicDir = resolve(appRoot, 'node_modules/@botonic')
+  const thirdParty = new Set<string>()
+  for (const name of readdirSync(botonicDir)) {
+    try {
+      const pkgPath = resolve(botonicDir, name, 'package.json')
+      const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
+      for (const dep of Object.keys({
+        ...pkg.dependencies,
+        ...pkg.peerDependencies,
+      })) {
+        if (
+          !dep.startsWith('@botonic/') &&
+          !BUILD_ONLY_DEPS.has(dep) &&
+          !BROWSER_ONLY_DEPS.has(dep)
+        ) {
+          thirdParty.add(dep)
+        }
+      }
+    } catch {
+      // skip packages without a readable package.json
+    }
+  }
+  return [...thirdParty]
+}

package/src/generators/bot-app/files/vite/node.config.ts.template

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import type { UserConfig } from 'vite'
 
+import { getBotonicThirdPartyDeps } from './botonic-ssr-deps'
 import { BUILD_CONFIG } from './build.config'
 
 const projectRoot = resolve(__dirname, '..')
@@ -12,11 +13,13 @@ export function getNodeConfig(): UserConfig {
     root: projectRoot,
     cacheDir: resolve(projectRoot, BUILD_CONFIG.CACHE_DIR.node),
 
-    // SSR configuration - bundle @botonic/* packages into the lambda
-    // By default, Vite externalizes node_modules in SSR mode, but we need
-    // @botonic packages bundled since they won't be available at runtime in Lambda
+    // Bundle all @botonic/* packages and their third-party deps into the Lambda
+    // artifact. By default Vite SSR externalizes node_modules, but Lambda has no
+    // node_modules at runtime so everything must be self-contained.
+    // Third-party deps are derived programmatically from the @botonic/* package.json
+    // files so this list stays correct as plugins add new dependencies.
     ssr: {
-      noExternal: [/@botonic\/.*/],
+      noExternal: [/@botonic\/.*/, ...getBotonicThirdPartyDeps(projectRoot)],
     },
 
     build: {

package/src/generators/bot-app/files/vite/webchat.config.ts.template

@@ -9,6 +9,25 @@ const projectRoot = resolve(__dirname, '..')
 const output = BUILD_CONFIG.OUTPUT.webchat
 const server = BUILD_CONFIG.SERVER.webchat
 
+/**
+ * Returns the Vite `base` for the webchat bundle.
+ *
+ * Why this matters: the dashboard's flow-builder preview panel
+ * (`PreviewWebchatAppV2`) loads this bundle cross-origin from the bot's Netlify
+ * deploy while running on a different origin (localhost:4200 in dev, the
+ * dashboard domain in prod). With an absolute base ('/'), Vite resolves the
+ * bundle's dynamically-imported chunks as `/chunk.js` against the *host page's*
+ * origin — so the preview requests them from the dashboard origin and they 404.
+ *
+ * A relative base ('') makes those chunks resolve against the entry module's own
+ * origin (import.meta.url = Netlify) instead, so the preview loads the whole
+ * bundle from Netlify with no chunk 404s and no service-worker proxy. The dev
+ * server keeps '/' so its own HMR/asset paths keep working.
+ */
+function getCrossOriginSafeBase(command: 'serve' | 'build'): string {
+  return command === 'build' ? '' : '/'
+}
+
 export function getWebchatConfig(command: 'serve' | 'build'): UserConfig {
   const openPath =
     command === 'serve' && process.env.LOG_VIEWER_PORT
@@ -26,7 +45,7 @@ export function getWebchatConfig(command: 'serve' | 'build'): UserConfig {
     cacheDir: resolve(projectRoot, BUILD_CONFIG.CACHE_DIR.webchat),
     publicDir: resolve(projectRoot, BUILD_CONFIG.PUBLIC_DIR),
     appType: 'spa',
-    base: '/',
+    base: getCrossOriginSafeBase(command),
 
     server: {
       port: server.port,

package/src/generators/bot-app/generator.js

@@ -158,10 +158,11 @@ function createPackageJson(tree, options, botonicVersion, lilaraVersion) {
       "@lilara/ui-web": lilaraVersion,
       "@lilara/ui-web-react": lilaraVersion,
       react: "18.3.1",
-      "react-dom": "18.3.1"
+      "react-dom": "18.3.1",
+      zod: "^4.4.3"
     },
     devDependencies: {
-      "@nx/vite": "21.6.3",
+      "@nx/vite": "21.6.11",
       "@types/node": "22.13.0",
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.0",
@@ -169,7 +170,7 @@ function createPackageJson(tree, options, botonicVersion, lilaraVersion) {
       "@vitejs/plugin-react-swc": "^3.5.0",
       typescript: "5.7.3",
       vite: "7.1.9",
-      vitest: "^4.0.15"
+      vitest: "4.1.1"
     }
   };
   (0, import_devkit.writeJson)(tree, `${options.projectRoot}/package.json`, packageJson);
@@ -257,7 +258,7 @@ function addBotonicDependencies(tree, botonicVersion) {
     },
     // devDependencies
     {
-      "@nx/vite": "21.6.3",
+      "@nx/vite": "21.6.11",
       "@types/node": "22.13.0",
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.0",
@@ -265,7 +266,7 @@ function addBotonicDependencies(tree, botonicVersion) {
       "@vitejs/plugin-react-swc": "3.5.0",
       typescript: "5.7.3",
       vite: "7.1.9",
-      vitest: "^4.0.15"
+      vitest: "4.1.1"
     }
   );
 }

package/src/generators/bot-app/lilara-version.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.8.0"
+  "version": "0.9.0"
 }

package/src/lib/bot-config.d.ts

@@ -1,3 +1,11 @@
+export interface ToolConfigJSON {
+    name: string;
+    schema?: Record<string, unknown>;
+    description: string;
+}
+export interface WebviewConfigJSON {
+    name: string;
+}
 export interface BotConfigJSON {
     build_info: {
         node_version: string;
@@ -7,14 +15,9 @@ export interface BotConfigJSON {
     packages: Record<string, {
         version: string;
     }>;
-    tools: Array<{
-        name: string;
-        description: string;
-    }>;
+    tools: ToolConfigJSON[];
     payloads: string[];
-    webviews: Array<{
-        name: string;
-    }>;
+    webviews: WebviewConfigJSON[];
 }
 export declare class BotConfig {
     static get(projectRoot: string): Promise<BotConfigJSON>;

package/src/lib/bot-config.js

@@ -35,6 +35,7 @@ var childProcess = __toESM(require("child_process"));
 var import_fs = require("fs");
 var import_path = require("path");
 var util = __toESM(require("util"));
+var import_zod = require("zod");
 const CONSTANTS_PATH = "src/shared/constants";
 const TOOLS_PATH = "src/server/bot/tools";
 class BotConfig {
@@ -108,7 +109,10 @@ class BotConfig {
         return toolsModule.customTools.map(
           (tool) => ({
             name: tool.name,
-            description: tool.description
+            description: tool.description,
+            schema: import_zod.z.toJSONSchema(tool.schema, {
+              target: "draft-07"
+            })
           })
         );
       }

package/src/lib/util/executor-helpers.d.ts

@@ -71,6 +71,17 @@ export declare function writeLocalRuntimeBotToAppFolder(projectRoot: string, bot
  */
 export declare function removeAppBotonicJson(projectRoot: string): void;
 export declare function ensureLocalRuntimeBot(botonicApiService: BotonicAPIService): Promise<void>;
+export type ProviderAccountListItem = {
+    id: string;
+    provider?: string;
+    is_test?: boolean;
+    is_active?: boolean;
+};
+/**
+ * APP_ID for local runtime must be the webchat test provider — not WhatsApp
+ * or other channels, which may also be test+active on the same bot.
+ */
+export declare function getActiveTestWebchatProviderAppId(results: ProviderAccountListItem[] | undefined): string | undefined;
 export interface PerformDeployLocalRuntimeOptions {
     email?: string;
     password?: string;

package/src/lib/util/executor-helpers.js

@@ -26,6 +26,7 @@ __export(executor_helpers_exports, {
   ensureLocalRuntimeBot: () => ensureLocalRuntimeBot,
   ensureLocalRuntimeBotBeforeTunnel: () => ensureLocalRuntimeBotBeforeTunnel,
   findMatchingConfigurationKey: () => findMatchingConfigurationKey,
+  getActiveTestWebchatProviderAppId: () => getActiveTestWebchatProviderAppId,
   getAppIdFromEnvFile: () => getAppIdFromEnvFile,
   getAppIdFromEnvFileForConfig: () => getAppIdFromEnvFileForConfig,
   getAvailableBots: () => getAvailableBots,
@@ -500,6 +501,12 @@ async function ensureLocalRuntimeBot(botonicApiService) {
     throw new Error("Bot selection failed");
   }
 }
+const WEBCHAT_PROVIDER = "webchat";
+function getActiveTestWebchatProviderAppId(results) {
+  return results?.find(
+    (p) => Boolean(p.is_test) && Boolean(p.is_active) && p.provider === WEBCHAT_PROVIDER
+  )?.id;
+}
 async function performDeployLocalRuntimeWithEndpoint(context, projectRoot, endpoint, options = {}) {
   const { targetEnvironment, environmentVariables } = resolveHubtypeEnvironment(
     context,
@@ -534,15 +541,18 @@ async function performDeployLocalRuntimeWithEndpoint(context, projectRoot, endpo
         lambdaEndpoint: endpoint
       });
       const providersResp = await botonicApiService.getProviders();
-      const appId = providersResp.data.results?.filter(
-        (p) => p.is_test && p.is_active
-      )[0]?.id;
+      const appId = getActiveTestWebchatProviderAppId(
+        providersResp.data.results
+      );
+      if (!appId) {
+        throw new Error(
+          "No active test webchat provider found for this bot. Local runtime requires a webchat test provider account."
+        );
+      }
       const resolvedTargetEnv = TARGET_ENV_NAMES.includes(
         targetEnvironment
       ) ? targetEnvironment : "local";
-      if (appId) {
-        await writeAppIdToEnvFile(projectRoot, appId, resolvedTargetEnv);
-      }
+      await writeAppIdToEnvFile(projectRoot, appId, resolvedTargetEnv);
       botonicApiService.saveAllCredentials();
       return {
         botId: botonicApiService.botInfo().id,
@@ -572,6 +582,7 @@ async function performDeployLocalRuntimeWithEndpoint(context, projectRoot, endpo
   ensureLocalRuntimeBot,
   ensureLocalRuntimeBotBeforeTunnel,
   findMatchingConfigurationKey,
+  getActiveTestWebchatProviderAppId,
   getAppIdFromEnvFile,
   getAppIdFromEnvFileForConfig,
   getAvailableBots,

package/src/plugin.js

@@ -102,7 +102,7 @@ const configurations = {
   dev: {
     configuration: "dev",
     env: {
-      VITE_HUBTYPE_CLIENT_ID: "AcIVeUMYaqH6O17LiCzbR3phZcRmfxYQNYFMr3BI",
+      VITE_HUBTYPE_CLIENT_ID: "WlvymZ703Y5zGnmaCZ9Da5vf0lNX08jFvgC4pRMT",
       VITE_HUBTYPE_API_URL: "https://api.dev.dev.dev.hubtype.com",
       VITE_PUSHER_API_PREFIX: "dev-dev-dev"
     }

package/src/generators/bot-app/files/src/server/bot/tracking.ts.template

@@ -1,35 +0,0 @@
-import {
-  BotonicPluginHubtypeAnalytics,
-  EventAction,
-  HtEventProps,
-} from '@botonic/plugin-hubtype-analytics'
-import { BotonicContext } from '@botonic/core'
-
-import { BotPlugins } from './types'
-
-export async function trackEventToHubtypeAnalytics(
-  botonicContext: BotonicContext<BotPlugins>,
-  eventName: EventAction,
-  args: Omit<HtEventProps, 'action'>
-): Promise<void> {
-  const hubtypeAnalyticsPlugin = botonicContext.plugins.hubtypeAnalytics
-  const htEventProps = {
-    action: eventName,
-    ...args,
-  } as HtEventProps
-
-  if (
-    !hubtypeAnalyticsPlugin ||
-    !(hubtypeAnalyticsPlugin instanceof BotonicPluginHubtypeAnalytics)
-  ) {
-    console.log('Hubtype Analytics Plugin not found')
-    return
-  }
-
-  const response = await hubtypeAnalyticsPlugin.trackEvent(
-    botonicContext,
-    htEventProps
-  )
-  console.log('TrackEvent Response', response, args)
-  return
-}