@aakash58/chatbot 1.1.20 → 1.1.21

package/docs/PUBLISHING_GUIDE.md

@@ -0,0 +1,104 @@
+# 📦 Advanced Library Publishing System
+
+This system is designed to provide a robust, modular, and safe way to publish Angular libraries while preventing **NG0400** (Dual Angular Runtime) errors.
+
+---
+
+## 🚀 Workflows
+
+### 1. Version Management
+
+We use explicit commands to manage library versions. These commands update the `projects/doohbot/package.json` file.
+
+```bash
+# Bump patch version (1.1.20 -> 1.1.21)
+npm run version-patch
+
+# Bump minor version (1.1.20 -> 1.2.0)
+npm run version-minor
+
+# Bump major version (1.1.20 -> 2.0.0)
+npm run version-major
+```
+
+### 2. Validation & Publishing
+
+After bumping the version, use the modular publishing pipeline.
+
+```bash
+# Recommended: Run a dry-run first
+npm run publish -- doohbot --dry-run
+
+# Final Publish
+npm run publish -- doohbot
+```
+
+---
+
+## 🏗️ Modular Architecture
+
+The publishing system is located in `scripts/publishing/` and is broken down into a multi-step pipeline for maximum reliability and easier debugging.
+
+### Pipeline Directory Structure
+
+```text
+scripts/publishing/
+├── index.ts               # Main Entry Point & Orchestrator
+├── pipeline/              # Individual Step Logic
+│   ├── 01-clean.ts        # Cleans previous dist artifacts
+│   ├── 02-validate-pre.ts # Runs NG0400 checks on source/config
+│   ├── 03-build.ts        # Compiles the library in Ivy mode
+│   ├── 04-validate-post.ts# Analyzes dist binaries for runtime leaks
+│   ├── 05-prepare-package.ts # Verifies package integrity (npm pack)
+│   ├── 06-version.ts      # Verifies the version to be published
+│   ├── 07-publish.ts      # Registry push (skipped in dry-run)
+│   └── 08-cleanup.ts      # Final cleanup tasks
+└── utils/                 # Shared utilities (Config, CLI, Types)
+```
+
+### The 8-Step Safety Guard
+
+1. **Clean**: Removes `dist/doohbot` to ensure no "ghost" files from previous builds remain.
+2. **Version Check**: Confirms the version in `package.json` matches your expectations.
+3. **Pre-Validation**: Scans for Angular packages in `dependencies` and `platformBrowserDynamic` calls.
+4. **Ivy Build**: Compiles using `ng-packagr` in production mode.
+5. **Post-Validation**: Scans `.mjs` files in `dist/` for signs of the Angular Core runtime being bundled.
+6. **Pack Check**: Simulates an `npm pack` to list exactly which files will be sent to the registry.
+7. **Registry Push**: Navigates into `dist/doohbot` and executes the internal `npm publish`.
+8. **Git Tag**: Creates a local Git tag for the specific project and version.
+
+---
+
+## ⚙️ Configuration (`publish.config.js`)
+
+You can customize the validation rules for each project:
+
+```javascript
+module.exports = {
+  projects: {
+    doohbot: {
+      validate: {
+        peerDependencies: ['@angular/core', ...], // Required to be in peer
+        forbiddenDependencies: ['@angular/core'], // Forbidden in 'dependencies'
+        checkRuntimeInDist: true,                 // Scan binaries
+        checkPlatformCreation: true               // Scan source
+      }
+    }
+  }
+}
+```
+
+---
+
+## ❓ Troubleshooting
+
+### NG0400 Detection
+
+If the script says **"Angular runtime code detected in bundle"**, it means your library is accidentally including its own copy of Angular.
+
+* **Fix**: Ensure all `@angular` packages are listed in `peerDependencies` and NOT in `dependencies`.
+
+### Module Not Found Errors
+
+The system uses ESM (ECMAScript Modules). If running manually, ensure you use:
+`npx ts-node --esm scripts/publishing/index.ts`

package/package.json

@@ -1,30 +1,76 @@
-{
-  "name": "@aakash58/chatbot",
-  "version": "1.1.20",
-  "description": "version support 17+",
-  "peerDependencies": {
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "@angular/material": ">=17.0.0",
-    "@angular/cdk": ">=17.0.0"
-  },
-  "dependencies": {
-    "crypto-js": "^4.2.0",
-    "@auth0/angular-jwt": "^5.2.0",
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/aakash58-chatbot.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/aakash58-chatbot.mjs",
-      "esm": "./esm2022/aakash58-chatbot.mjs",
-      "default": "./fesm2022/aakash58-chatbot.mjs"
-    }
-  }
+{
+  "name": "@aakash58/chatbot",
+  "version": "1.1.21",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "dev": "ng build doohbot && ng serve app-doohbot",
+    "version-patch": "npm --prefix projects/doohbot version patch",
+    "version-minor": "npm --prefix projects/doohbot version minor",
+    "version-major": "npm --prefix projects/doohbot version major",
+    "build-lib": "ng build doohbot --doohbot",
+    "validate": "ts-node -P tsconfig.scripts.json scripts/validate.ts",
+    "validate:root": "ts-node -P tsconfig.scripts.json scripts/validate.ts --root",
+    "publish": "ts-node -P tsconfig.scripts.json scripts/publishing/index.ts",
+    "publish:root": "ts-node -P tsconfig.scripts.json scripts/publishing/index.ts --root"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "^17.0.0",
+    "@angular/cdk": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/elements": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/material": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/router": "^17.0.0",
+    "@auth0/angular-jwt": "^5.2.0",
+    "@webcomponents/custom-elements": "^1.6.0",
+    "crypto-js": "^4.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.0.0",
+    "@angular/cli": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@types/crypto-js": "^4.2.2",
+    "@types/jasmine": "~5.1.0",
+    "@types/node": "^24.10.0",
+    "jasmine-core": "~5.9.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^20.3.0",
+    "prettier": "^3.6.2",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/material": ">=17.0.0",
+    "@angular/cdk": ">=17.0.0"
+  }
 }

package/projects/app-doohbot/public/assets/const/app-const.json

@@ -0,0 +1,15 @@
+{
+  "username": "aakashrajbanshi58@gmail.com",
+  "password": "Aakash.r@123",
+  "apiBaseUrl": "",
+  "apiSegment": "/api/",
+  "storageKey": "doohbot-storage",
+  "secretKey": "my-secret-encryption-key-2024",
+  "companyCode": "TEST",
+  "webUrl": "http://localhost:4200",
+  "licenseKey": "doohbot_lic_6X5vqgpT9dL48Oqi-2F0w9CU8I3dyV6kdLx1B8Uyt-Q",
+  "licenseKeys": {
+    "adcity": "doohbot_pk_9RrPUPpg58tSbjmYChtZWFXK3oyqhMaGgD7kl5gmOik",
+    "tractor": "doohbot_pk_9RrPUPpg58tSbjmYChtZWFXK3oyqhMaGgD7kl5gmOik"
+  }
+}

package/projects/app-doohbot/public/assets/const/doohclick_license.json

@@ -0,0 +1,6 @@
+{
+  "aakash": "doohbot_lic_aakash-cxcxcgbfhhjh485fgfdgdg",
+  "doohbot": "doohbot_lic_6X5vqgpT9dL48Oqi-2F0w9CU8I3dyV6kdLx1B8Uyt-Q",
+  "adcity": "doohbot_lic_bqwBpABoYvnRfsYTuYCRQQKpc_06k4Uh1kYpyaFqZV8",
+  "tractor": "doohbot_lic_u52FaSiUyV6R8GPASACusbWe_p6vOaJXkElTa8P4t5U"
+}

package/projects/app-doohbot/src/app/app.config.ts

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+  ],
+};

package/projects/app-doohbot/src/app/app.html

@@ -0,0 +1,31 @@
+<div class="theme-demo-container">
+  <div class="controls-panel">
+    <h1>🎨 Chatbot Theme Auto-Detection Demo</h1>
+    <p>
+      Click the buttons below to change the parent application's theme. The chatbot will
+      automatically detect and match the theme!
+    </p>
+
+    <div class="theme-buttons">
+      <button class="btn btn-light" (click)="setLightTheme()">☀️ Light Theme</button>
+      <button class="btn btn-dark" (click)="setDarkTheme()">🌙 Dark Theme</button>
+      <button class="btn btn-toggle" (click)="toggleTheme()">🔄 Toggle Theme</button>
+    </div>
+
+    <div class="status-panel">
+      <strong>Current Parent Theme:</strong> <span class="theme-badge">{{ currentTheme }}</span>
+    </div>
+  </div>
+</div>
+
+<app-doohbot
+  [themeConfig]=""
+  [config]="chatConfig"
+  [buttonStyle]="'fab'"
+  [enableDrag]="true"
+  [enableResize]="true"
+  [themeConfig]="{
+    primaryColor: '#74c2bb',
+    backgroundColor: 'white, #151521',
+  }"
+></app-doohbot>

package/projects/app-doohbot/src/app/app.routes.ts

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

package/projects/app-doohbot/src/app/app.scss

@@ -0,0 +1,279 @@
+.theme-demo-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.controls-panel {
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  padding: 30px;
+  margin: 0 auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+body.dark-theme .controls-panel {
+  background: grey;
+  border-color: grey;
+}
+
+h1 {
+  margin: 0 0 15px 0;
+  font-size: 24px;
+  color: black;
+}
+
+body.dark-theme h1 {
+  color: whitesmoke;
+}
+
+p {
+  color: #666;
+  margin-bottom: 20px;
+}
+
+body.dark-theme p {
+  color: #aaa;
+}
+
+.theme-buttons {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn-light {
+  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+  color: #fff;
+}
+
+.btn-dark {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+}
+
+.btn-toggle {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: #fff;
+}
+
+.status-panel {
+  background: rgba(0, 123, 255, 0.1);
+  border-left: 4px solid #007bff;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+
+body.dark-theme .status-panel {
+  background: rgba(0, 123, 255, 0.2);
+}
+
+.theme-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  background: #007bff;
+  color: white;
+  border-radius: 12px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.info-panel {
+  background: red;
+  border-left: 4px solid #ffc107;
+  padding: 15px;
+  border-radius: 4px;
+}
+
+body.dark-theme .info-panel {
+  background: rgba(255, 193, 7, 0.15);
+}
+
+.info-panel strong {
+  color: #333;
+}
+
+body.dark-theme .info-panel strong {
+  color: #fff;
+}
+
+.info-panel ul {
+  margin: 10px 0 0 0;
+  padding-left: 20px;
+  color: #666;
+}
+
+body.dark-theme .info-panel ul {
+  color: #aaa;
+}
+
+.info-panel li {
+  margin-bottom: 8px;
+}
+
+.info-panel code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+}
+
+body.dark-theme .info-panel code {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Global theme styles */
+body {
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+body.light-theme {
+  background-color: #bfbfbf;
+  color: #333;
+}
+
+body.dark-theme {
+  background-color: #ff0000;
+  color: #fff;
+}
+
+/* Tenant Switcher Styles */
+.tenant-switcher-container {
+  position: fixed;
+  bottom: 100px;
+  right: 20px;
+  z-index: 10000;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  min-width: 200px;
+}
+
+body.dark-theme .tenant-switcher-container {
+  background: rgba(30, 30, 30, 0.9);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.tenant-switcher-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #666;
+}
+
+body.dark-theme .tenant-switcher-label {
+  color: #aaa;
+}
+
+.tenant-switcher-select {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+  color: #333;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.tenant-switcher-select:focus {
+  border-color: #007bff;
+}
+
+body.dark-theme .tenant-switcher-select {
+  background-color: #333;
+  border-color: #444;
+  color: #fff;
+}
+
+body.dark-theme .tenant-switcher-select:focus {
+  border-color: #007bff;
+}
+
+/* Logout Buttons */
+.logout-buttons {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+
+.btn-logout,
+.btn-logout-all {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  text-align: left;
+}
+
+.btn-logout {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
+  color: #fff;
+}
+
+.btn-logout:hover {
+  background: linear-gradient(135deg, #ff5252 0%, #e84a5f 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(255, 107, 107, 0.3);
+}
+
+.btn-logout-all {
+  background: linear-gradient(135deg, #fc5c7d 0%, #6a82fb 100%);
+  color: #fff;
+}
+
+.btn-logout-all:hover {
+  background: linear-gradient(135deg, #fb4570 0%, #5a72ea 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(252, 92, 125, 0.3);
+}
+
+.btn-logout:active,
+.btn-logout-all:active {
+  transform: translateY(0);
+}

package/projects/app-doohbot/src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, chatbot-element');
+  });
+});

package/projects/app-doohbot/src/app/app.ts

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Doohbot, DoohbotInput } from 'doohbot';
+import { AppConst } from './../../../doohbot/src/lib/core/app-const';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, Doohbot],
+  templateUrl: './app.html',
+  styleUrl: './app.scss',
+})
+export class App implements OnInit {
+  // Mock authentication mode - no backend needed
+  chatConfig: DoohbotInput = {
+    apiBaseUrl: 'http://localhost:4000/', // Replace with your actual backend URL
+    apiSegment: 'api/', // Replace with your actual API path
+    username: '',
+    password: '',
+    tenancyName: '',
+    licenseKey: '',
+    licenseFilePath: 'assets/const/doohclick_license.json',
+    authToken: 'aakash-token-mock-1234567890',
+  };
+
+  currentTheme = 'Light';
+
+  ngOnInit() {
+    // Ensure body has a theme class
+    if (
+      !document.body.classList.contains('dark-theme') &&
+      !document.body.classList.contains('light-theme')
+    ) {
+      document.body.classList.add('light-theme');
+    }
+  }
+
+  setLightTheme() {
+    document.body.classList.remove('dark-theme');
+    document.body.classList.add('light-theme');
+    this.currentTheme = 'Light';
+    console.log(' Parent theme changed to: Light');
+  }
+
+  setDarkTheme() {
+    document.body.classList.remove('light-theme');
+    document.body.classList.add('dark-theme');
+    this.currentTheme = 'Dark';
+    console.log(' Parent theme changed to: Dark');
+  }
+
+  toggleTheme() {
+    if (document.body.classList.contains('dark-theme')) {
+      this.setLightTheme();
+    } else {
+      this.setDarkTheme();
+    }
+  }
+
+  resetDemo() {
+    localStorage.clear();
+    window.location.reload();
+  }
+
+  constructor(private http: HttpClient) {}
+
+  // Current state
+  platformTenant = '';
+  subTenant = '';
+  agent = '';
+}

package/projects/app-doohbot/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>ChatbotElement</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/app-doohbot/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));