@botonic/nx-plugin 2.23.1 → 2.24.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 2.24.0 (2026-03-27)
+
+### 🚀 Features
+
+- **botonic:** remove webchat-react Lilara gateway and decouple CSS #BLT-2288 ([#770](https://github.com/metis-ai/hubtype-product/pull/770))
+
+### ❤️ Thank You
+
+- David Hidalgo @Davidhidalgo
+
+## 2.23.2 (2026-03-23)
+
+This was a version bump only for @botonic/nx-plugin to align it with other projects, there were no code changes.
+
 ## 2.23.1 (2026-03-23)
 
 This was a version bump only for @botonic/nx-plugin to align it with other projects, there were no code changes.

package/README.md

@@ -4,10 +4,10 @@ Nx **generators** and **migrations** for Botonic bot apps and workspaces on the
 
 ## Source and versions
 
-| Line        | npm   | Source                                                                                                                                                                                     |
-| ----------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Legacy**  | `0.x` | [github.com/hubtype/botonic](https://github.com/hubtype/botonic)                                                                                                                           |
-| **Current** | `2.x` | [github.com/hubtype/hubtype-product](https://github.com/hubtype/hubtype-product) · [`libs/botonic/nx-plugin`](https://github.com/hubtype/hubtype-product/tree/main/libs/botonic/nx-plugin) |
+| Line        | npm   | Source                                                           |
+| ----------- | ----- | ---------------------------------------------------------------- |
+| **Legacy**  | `0.x` | [github.com/hubtype/botonic](https://github.com/hubtype/botonic) |
+| **Current** | `2.x` | Hubtype internal monorepo (not public; packages publish to npm)  |
 
 Keep this package aligned in **major version** with `@botonic/core` and other `@botonic/*` dependencies in your workspace.
 
@@ -258,7 +258,7 @@ Migrations are designed to be safe:
 
 ## Contributing
 
-Changes land via the **[hubtype/hubtype-product](https://github.com/hubtype/hubtype-product)** repository (`libs/botonic/nx-plugin`). Add tests for new generators or migrations and open a pull request there.
+Contributions are handled **inside Hubtype** (this plugin ships with the private Botonic source tree). Add tests for new generators or migrations and follow your team’s internal PR process.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/nx-plugin",
-  "version": "2.23.1",
+  "version": "2.24.0",
   "description": "Nx plugin for creating Botonic bot applications",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

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

@@ -1,3 +1,6 @@
+import '@lilara/foundations/base.css'
+import '@lilara/ui-web-react/styles.css'
+import '@botonic/webchat-react/styles.css'
 import './styles.css'
 
 import type { WebchatConfig } from '@botonic/webchat-core'

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

@@ -1,6 +1,3 @@
-/* Import library styles (standard CSS import pattern) */
-@import '@botonic/webchat-react/styles.css';
-
 /* Import app-specific token overrides */
 @import './webchat-tokens-overrides.css';
 

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

@@ -1,3 +1,5 @@
+import '@lilara/ui-web-react/styles.css'
+
 import { WebviewApp, WebviewDefinition } from '@botonic/webviews'
 import * as ReactDOM from 'react-dom/client'
 

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

@@ -17,4 +17,3 @@ export function getBaseConfig() {
     },
   }
 }
-

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

@@ -10,8 +10,13 @@ const server = BUILD_CONFIG.SERVER.webviews
 
 export function getWebviewsConfig(command: 'serve' | 'build'): UserConfig {
   return {
-    // For serve mode, use the webviews directory as root so dev server finds index.html
-    // For build mode, use project root to avoid relative path issues
+    resolve: {
+      dedupe: [
+        '@lilara/foundations',
+        '@lilara/ui-web-react',
+        '@lilara/ui-web',
+      ],
+    },
     root:
       command === 'serve'
         ? resolve(projectRoot, BUILD_CONFIG.INPUT.webviews.root)

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

@@ -32,9 +32,32 @@ __export(generator_exports, {
 });
 module.exports = __toCommonJS(generator_exports);
 var import_devkit = require("@nx/devkit");
+var import_child_process = require("child_process");
 var fs = __toESM(require("fs"));
 var path = __toESM(require("path"));
 const MODULE_DIR = __dirname;
+function getLilaraVersion() {
+  const jsonPath = path.join(MODULE_DIR, "lilara-version.json");
+  try {
+    if (fs.existsSync(jsonPath)) {
+      const data = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
+      if (data.version && typeof data.version === "string") {
+        return data.version.replace(/^[\^~]/, "");
+      }
+    }
+  } catch {
+  }
+  try {
+    const tag = (0, import_child_process.execSync)('git describe --tags --match "lilara-v*" --abbrev=0', {
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "pipe"]
+    }).trim();
+    const v = tag.replace(/^lilara-v/, "");
+    if (v) return v;
+  } catch {
+  }
+  return "latest";
+}
 function getBotonicVersion(options) {
   const version = options.botonicVersion;
   if (version && version !== "{{WORKSPACE_VERSION}}" && version !== "latest") {
@@ -109,7 +132,7 @@ function createProjectConfiguration(tree, options) {
   };
   (0, import_devkit.addProjectConfiguration)(tree, options.projectName, projectConfig);
 }
-function createPackageJson(tree, options, botonicVersion) {
+function createPackageJson(tree, options, botonicVersion, lilaraVersion) {
   const packageJson = {
     name: options.projectName,
     version: "1.0.0",
@@ -120,26 +143,29 @@ function createPackageJson(tree, options, botonicVersion) {
     scripts: {},
     dependencies: {
       "@botonic/core": botonicVersion,
+      "@botonic/plugin-ai-agents": botonicVersion,
+      "@botonic/plugin-flow-builder": botonicVersion,
+      "@botonic/plugin-hubtype-analytics": botonicVersion,
       "@botonic/shared": botonicVersion,
       "@botonic/webchat-core": botonicVersion,
       "@botonic/webchat-react": botonicVersion,
       "@botonic/webviews": botonicVersion,
-      "@botonic/plugin-hubtype-analytics": botonicVersion,
-      "@botonic/plugin-flow-builder": botonicVersion,
-      "@botonic/plugin-ai-agents": botonicVersion,
+      "@lilara/foundations": lilaraVersion,
+      "@lilara/ui-web": lilaraVersion,
+      "@lilara/ui-web-react": lilaraVersion,
       react: "18.3.1",
       "react-dom": "18.3.1"
     },
     devDependencies: {
-      "@nx/vite": "21.0.3",
-      "@types/node": "18.16.9",
+      "@nx/vite": "21.6.3",
+      "@types/node": "22.13.0",
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.0",
       "@vitejs/plugin-react": "^4.2.0",
       "@vitejs/plugin-react-swc": "^3.5.0",
       typescript: "5.7.3",
-      vite: "^5.0.0",
-      vitest: "^1.3.1"
+      vite: "7.1.9",
+      vitest: "^4.0.15"
     }
   };
   (0, import_devkit.writeJson)(tree, `${options.projectRoot}/package.json`, packageJson);
@@ -227,15 +253,15 @@ function addBotonicDependencies(tree, botonicVersion) {
     },
     // devDependencies
     {
-      "@nx/vite": "21.0.3",
-      "@types/node": "18.16.9",
+      "@nx/vite": "21.6.3",
+      "@types/node": "22.13.0",
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.0",
       "@vitejs/plugin-react": "4.2.0",
       "@vitejs/plugin-react-swc": "3.5.0",
       typescript: "5.7.3",
-      vite: "5.0.0",
-      vitest: "1.3.1"
+      vite: "7.1.9",
+      vitest: "^4.0.15"
     }
   );
 }
@@ -254,8 +280,10 @@ function addBotonicFiles(tree, options, botonicVersion) {
 }
 async function generator_default(tree, options) {
   const botonicVersion = getBotonicVersion(options);
+  const lilaraVersion = getLilaraVersion();
   const tasks = [];
   console.log(`\u{1F916} Using Botonic version: ${botonicVersion}`);
+  console.log(`\u{1F3A8} Using Lilara version: ${lilaraVersion}`);
   console.log(`\u{1F50D} Creating project using programmatic configuration...`);
   const normalizedOptions = normalizeOptions(tree, options);
   console.log(`\u{1F50D} Normalized options:`, {
@@ -264,7 +292,7 @@ async function generator_default(tree, options) {
     projectDirectory: normalizedOptions.projectDirectory
   });
   createProjectConfiguration(tree, normalizedOptions);
-  createPackageJson(tree, normalizedOptions, botonicVersion);
+  createPackageJson(tree, normalizedOptions, botonicVersion, lilaraVersion);
   createTsConfigs(tree, normalizedOptions);
   const depsTask = addBotonicDependencies(tree, botonicVersion);
   tasks.push(depsTask);

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

@@ -0,0 +1,3 @@
+{
+  "version": "0.4.0"
+}

package/src/generators/preset/files/.cursor/skills/botonic-webview/SKILL.md

@@ -43,11 +43,13 @@ If not already clear from context, ask: "What should this webview display or all
 Use `WebviewFrame`, `WebviewHeader`, `WebviewBody` from `@botonic/webviews` as the structural shell.
 Access request data and the close handler via `useWebviewRequest`.
 
-> **CSS reset and design tokens are loaded automatically.** `WebviewApp` imports `@lilara/foundations/reset.css` and `@lilara/foundations/tokens.css` as side effects — no manual CSS import is needed in the app's `index.tsx`.
+> **CSS loading.** `WebviewApp` (from `@botonic/webviews`) loads `@lilara/foundations` reset + tokens internally. The webview entry (`src/client/webviews/index.tsx`) only imports `@lilara/ui-web-react/styles.css` for Lilara component styles — this is generated for new bots.
 
-#### Always use UI components from `@botonic/webchat-react`
+#### Always use UI components from `@lilara/ui-web-react`
 
-Never use raw HTML elements (`<input>`, `<button>`, `<select>`, etc.) in webviews. All interactive and display elements must come from `@botonic/webchat-react`, which re-exports the full design system.
+Never use raw HTML elements (`<input>`, `<button>`, `<select>`, etc.) in webviews. Interactive and display primitives come from `@lilara/ui-web-react` (design system). Use `@botonic/webchat-react` only for webchat-specific pieces (e.g. `ButtonComponent` for message-style buttons).
+
+The table below lists **@lilara/ui-web-react** exports (import from that package).
 
 > **react-aria conventions.** These components are built on react-aria — prop names differ from standard HTML. Check the `.d.ts` types before using any component. Key differences: `Button` uses `onPress` not `onClick`; `Checkbox` and `Switch` use `isSelected` not `checked`, and `onChange` receives a `boolean` not an event.
 
@@ -88,7 +90,7 @@ export const OrderDetail = () => {
 **Form with submission**
 
 ```tsx
-import { Button, TextInput } from '@botonic/webchat-react'
+import { Button, TextInput } from '@lilara/ui-web-react'
 import { useWebviewRequest, WebviewBody, WebviewFrame, WebviewHeader } from '@botonic/webviews'
 
 export const BookingForm = () => {
@@ -117,7 +119,7 @@ export const BookingForm = () => {
 **Fetching data on load**
 
 ```tsx
-import { Banner, Spinner } from '@botonic/webchat-react'
+import { Banner, Spinner } from '@lilara/ui-web-react'
 import { useWebviewRequest, WebviewBody, WebviewFrame, WebviewHeader } from '@botonic/webviews'
 
 export const OrderDetail = () => {