agenticaichat 1.0.3 → 1.0.5

package/README.md

@@ -6,45 +6,51 @@ AI-powered chatbot for business analytics with natural language database queries
 - Five-minute setup with an interactive CLI wizard
 - Natural language questions in English or Hindi
 - Works with PostgreSQL, MySQL, SQLite, Turso, and MongoDB
-- Ready-to-use React/Next.js widget for dashboards and full pages
+- Universal Web Component for any framework (React, Angular, Vue, Next.js, HTML)
+- Ready-to-use React/Next.js widget for advanced dashboards
 - Configuration files generated for you (`.env.chatbot`, `chatbot-config.json`)
 - Fully typed TypeScript package
 
 ## Requirements
 
 - Node.js 18+ and npm 9+
-- React 18+ and Next.js 13+ (app router recommended)
+- React 18+ and Next.js 13+ (app router recommended) for the built-in widget
 
-## Installation and Setup
+## Universal Web Component (Recommended for All Frameworks)
 
-The setup wizard now launches automatically right after installation. Choose your preferred package manager:
+For the best compatibility across all frameworks and plain HTML, use our universal Web Component:
 
-```bash
-# npm
-npm install agenticaichat
+```html
+<script src="https://cdn.jsdelivr.net/npm/agenticaichat/dist/web-component/index.js"></script>
+<agentica-chatbot api="/api/chatbot/query"></agentica-chatbot>
+```
 
-# yarn
-yarn add agenticaichat
+Or import in your framework:
 
-# pnpm
-pnpm add agenticaichat
+```javascript
+// React, Vue, Angular, etc.
+import 'agenticaichat/web-component';
 ```
 
-During install, the wizard will:
+This works everywhere without framework-specific code.
 
-- Ask for your database type and connection details
-- Collect your AI provider, model, and API key
-- Generate `.env.chatbot` and `chatbot-config.json`
-- Create starter files if they are missing (Next.js defaults):
-  - `app/api/chatbot/query/route.ts`
-  - `app/chat/page.tsx`
-  - Updates `.gitignore` to exclude generated secrets
+## Widget vs Web Component — When to Use What?
 
-If you need to rerun the wizard later:
+AgenticAIChat offers two ways to integrate the chatbot:
 
-```bash
-npx agenticai-setup
-```
+1. **React/Next.js Widget (Advanced UI)**  
+   - Fully designed UI with animations and chat history  
+   - Best for dashboards and full-page experiences  
+   - Uses React internally  
+   - Ideal for Next.js apps  
+
+2. **Web Component (Universal) — Recommended**  
+   - Works in React, Angular, Vue, Next.js, Svelte, plain HTML  
+   - No framework dependencies  
+   - Perfect for embedding on external websites  
+   - Lightweight and self-contained  
+
+If unsure, use the Web Component for maximum compatibility.
 
 ## Quick Start (Next.js)
 
@@ -81,11 +87,151 @@ Start your Next.js app:
 npm run dev
 ```
 
-## Using with Other React Frameworks
+## Setting up the Backend API
+
+For all frameworks, you need a backend endpoint that handles chatbot queries. The setup wizard generates configuration files, but you must implement the API route yourself unless using Next.js.
+
+1. Run the setup wizard to generate `.env.chatbot` and `chatbot-config.json`:
+
+```bash
+npx agenticai-setup
+```
+
+2. Create an HTTP POST endpoint at `/api/chatbot/query` (or any path you choose).
+
+Use the template from `templates/api-route.template.ts` as a guide. Load environment variables from `.env.chatbot` and use the `ChatbotEngine` from `agenticaichat/core`.
+
+Example (Node.js/Express):
+
+```javascript
+const express = require('express');
+const { ChatbotEngine } = require('agenticaichat/core');
+require('dotenv').config({ path: '.env.chatbot' });
+
+const app = express();
+app.use(express.json());
+
+app.post('/api/chatbot/query', async (req, res) => {
+  const { query } = req.body;
+  const engine = new ChatbotEngine();
+  try {
+    const result = await engine.processQuery(query);
+    res.json(result);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+app.listen(3000);
+```
+
+For Next.js, the wizard generates this automatically.
+
+**Important: Enable CORS**  
+If your frontend and backend are on different domains or ports, enable CORS in your backend:  
+```
+Access-Control-Allow-Origin: *
+```
+Or restrict to your specific domain for security.
+
+## Setup for Angular
+
+**Recommended:** Use the universal Web Component for easiest integration. See the Web Component section above.
+
+If you prefer a custom Angular component:
+
+1. Install the package and run setup:
+
+```bash
+npm install agenticaichat
+npx agenticai-setup
+```
+
+2. Set up the backend API as described above (e.g., using Express or your preferred Node.js framework).
+
+3. In your Angular app, create a chatbot component:
+
+```typescript
+// chatbot.component.ts
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AngularChatRequest, AngularChatResponse } from 'agenticaichat/angular';
+
+@Component({
+  selector: 'app-chatbot',
+  template: `
+    <div>
+      <input [(ngModel)]="query" placeholder="Ask a question..." />
+      <button (click)="ask()">Ask</button>
+      <div *ngIf="response">{{ response.answer }}</div>
+    </div>
+  `
+})
+export class ChatbotComponent {
+  query = '';
+  response: AngularChatResponse | null = null;
+
+  constructor(private http: HttpClient) {}
+
+  ask() {
+    const request: AngularChatRequest = { query: this.query };
+    this.http.post<AngularChatResponse>('/api/chatbot/query', request)
+      .subscribe(res => this.response = res);
+  }
+}
+```
+
+4. Add the component to your app and ensure CORS is configured on your backend.
+
+## Setup for Vue
+
+**Recommended:** Use the universal Web Component for easiest integration. See the Web Component section above.
+
+If you prefer a custom Vue component:
+
+1. Install the package and run setup:
+
+```bash
+npm install agenticaichat
+npx agenticai-setup
+```
+
+2. Set up the backend API as described above.
+
+3. In your Vue app, create a chatbot component:
+
+```vue
+<!-- Chatbot.vue -->
+<template>
+  <div>
+    <input v-model="query" placeholder="Ask a question..." />
+    <button @click="ask">Ask</button>
+    <div v-if="response">{{ response.answer }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { VueChatRequest, VueChatResponse } from 'agenticaichat/vue';
+
+const query = ref('');
+const response = ref<VueChatResponse | null>(null);
+
+const ask = async () => {
+  const request: VueChatRequest = { query: query.value };
+  const res = await fetch('/api/chatbot/query', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request)
+  });
+  response.value = await res.json();
+};
+</script>
+```
 
-The widget renders in any React 18+ app (CRA, Vite, Remix, etc.). You only need to supply a compatible backend endpoint.
+4. Use the component in your app and configure CORS on your backend.
 
-Backend requirements:
+## Setup for Other React Frameworks
 
 - Create an HTTP POST endpoint (e.g., `/api/chatbot/query`) that follows `templates/api-route.template.ts`.
 - Load `.env.chatbot` on the server and wire `DATABASE_URL`, `DB_TYPE`, `LLM_PROVIDER`, `LLM_MODEL`, and `LLM_API_KEY` into the handler.
@@ -108,6 +254,23 @@ export default function Page() {
 - `chatbot-config.json` stores non-secret metadata (database/LLM selection).
 - `.gitignore` is updated automatically to keep generated secrets out of version control.
 
+## Architecture Summary
+
+```
+[Browser: React/Angular/Vue/HTML/Next.js]
+                |
+                V
+   <agentica-chatbot web component>
+                |
+                V
+      Your Backend API (/api/chatbot/query)
+                |
+                V
+     ChatbotEngine → LLM / Database / Business Logic
+```
+
+The Web Component handles all frontend interactions and works universally across frameworks.
+
 ## Troubleshooting
 
 - CI environments skip the wizard; run `npx agenticai-setup` locally after install.

package/bin/cli.js

@@ -1,6 +1,6 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
-const inquirer = require('inquirer').default;
+const inquirer = require('inquirer');
 const chalk = require('chalk');
 const ora = require('ora');
 const fs = require('fs');
@@ -298,8 +298,41 @@ async function main() {
   const selectedProvider = llmProviders.find(p => p.value === llmAnswers.provider);
   console.log(chalk.green(`\n✅ ${selectedProvider.name} configured!\n`));
 
-  // Step 3: Generate configuration files
-  console.log(chalk.bold.blue('📝 Step 3: Generating Configuration Files\n'));
+  // Step 3: Frontend Framework / Adapter
+  console.log(chalk.bold.blue('\n🧩 Step 3: Frontend Framework\n'));
+
+  const frontendAnswers = await inquirer.prompt([
+    {
+      type: 'list',
+      name: 'framework',
+      message: 'Which frontend framework will you use for the chat UI?',
+      choices: [
+        {
+          name: 'Next.js / React (recommended, uses built-in ChatbotWidget)',
+          value: 'react',
+          short: 'React'
+        },
+        {
+          name: 'Angular (use HTTP API from your Angular component)',
+          value: 'angular',
+          short: 'Angular'
+        },
+        {
+          name: 'Vue (use HTTP API from your Vue component)',
+          value: 'vue',
+          short: 'Vue'
+        },
+        {
+          name: 'Other / Backend-only (no bundled UI, HTTP API only)',
+          value: 'other',
+          short: 'Other'
+        }
+      ]
+    }
+  ]);
+
+  // Step 4: Generate configuration files
+  console.log(chalk.bold.blue('📝 Step 4: Generating Configuration Files\n'));
   
   const spinner = ora('Creating files...').start();
 
@@ -317,6 +350,9 @@ LLM_PROVIDER=${llmAnswers.provider}
 LLM_API_KEY=${llmAnswers.apiKey}
 LLM_MODEL=${llmAnswers.model}
 
+# Frontend Adapter
+FRONTEND_FRAMEWORK=${frontendAnswers.framework}
+
 # Other
 SECRET_KEY=${crypto.randomBytes(32).toString('hex')}
 CHATBOT_ENABLED=true
@@ -336,6 +372,9 @@ CHATBOT_ENABLED=true
       provider: llmAnswers.provider,
       model: llmAnswers.model
     },
+    frontend: {
+      framework: frontendAnswers.framework
+    },
     setupDate: new Date().toISOString(),
     version: '2.0.0'
   };
@@ -344,44 +383,52 @@ CHATBOT_ENABLED=true
   fs.writeFileSync(configPath, JSON.stringify(configContent, null, 2));
   spinner.text = 'Created chatbot-config.json';
 
-  // Create API route file
-  try {
-    const apiDir = path.join(process.cwd(), 'app', 'api', 'chatbot', 'query');
-    if (!fs.existsSync(apiDir)) {
-      fs.mkdirSync(apiDir, { recursive: true });
+  // Create frontend scaffolding based on selected framework
+  if (frontendAnswers.framework === 'react') {
+    // Next.js / React: generate app router files
+    try {
+      const apiDir = path.join(process.cwd(), 'app', 'api', 'chatbot', 'query');
+      if (!fs.existsSync(apiDir)) {
+        fs.mkdirSync(apiDir, { recursive: true });
+      }
+
+      const apiTemplate = fs.readFileSync(
+        path.join(__dirname, '..', 'templates', 'api-route.txt'),
+        'utf8'
+      );
+
+      const apiPath = path.join(apiDir, 'route.ts');
+      fs.writeFileSync(apiPath, apiTemplate);
+      spinner.text = 'Created API route: app/api/chatbot/query/route.ts';
+    } catch (error) {
+      spinner.warn('Could not create API route automatically');
+      console.log(chalk.yellow('\nℹ️  You can manually create the API route later'));
     }
 
-    const apiTemplate = fs.readFileSync(
-      path.join(__dirname, '..', 'templates', 'api-route.txt'),
-      'utf8'
-    );
-
-    const apiPath = path.join(apiDir, 'route.ts');
-    fs.writeFileSync(apiPath, apiTemplate);
-    spinner.text = 'Created API route: app/api/chatbot/query/route.ts';
-  } catch (error) {
-    spinner.warn('Could not create API route automatically');
-    console.log(chalk.yellow('\nℹ️  You can manually create the API route later'));
-  }
+    try {
+      const chatDir = path.join(process.cwd(), 'app', 'chat');
+      if (!fs.existsSync(chatDir)) {
+        fs.mkdirSync(chatDir, { recursive: true });
+      }
 
-  // Create chat page
-  try {
-    const chatDir = path.join(process.cwd(), 'app', 'chat');
-    if (!fs.existsSync(chatDir)) {
-      fs.mkdirSync(chatDir, { recursive: true });
+      const chatTemplate = fs.readFileSync(
+        path.join(__dirname, '..', 'templates', 'chat-page.txt'),
+        'utf8'
+      );
+
+      const chatPath = path.join(chatDir, 'page.tsx');
+      fs.writeFileSync(chatPath, chatTemplate);
+      spinner.text = 'Created chat page: app/chat/page.tsx';
+    } catch (error) {
+      spinner.warn('Could not create chat page automatically');
+      console.log(chalk.yellow('\nℹ️  You can manually create the chat page later'));
     }
-
-    const chatTemplate = fs.readFileSync(
-      path.join(__dirname, '..', 'templates', 'chat-page.txt'),
-      'utf8'
-    );
-
-    const chatPath = path.join(chatDir, 'page.tsx');
-    fs.writeFileSync(chatPath, chatTemplate);
-    spinner.text = 'Created chat page: app/chat/page.tsx';
-  } catch (error) {
-    spinner.warn('Could not create chat page automatically');
-    console.log(chalk.yellow('\nℹ️  You can manually create the chat page later'));
+  } else {
+    // Non-React frameworks: keep backend-only scaffolding, user builds UI
+    spinner.text = 'Backend configured (HTTP API). Frontend adapter to be implemented in your framework.';
+    console.log(chalk.yellow('\nℹ️  Frontend note:'));
+    console.log(chalk.gray('   - Use the /api/chatbot/query HTTP endpoint from your Angular/Vue/other component.'));
+    console.log(chalk.gray('   - See README for framework-specific adapter guidance.\n'));
   }
 
   // Update .gitignore
@@ -403,8 +450,8 @@ CHATBOT_ENABLED=true
   // Success message
   console.log(chalk.green.bold('\n✅ Setup Complete!\n'));
   console.log(chalk.white('Files created:'));
-  console.log(chalk.gray('  • .env.chatbot (API keys & database config)'));
-  console.log(chalk.gray('  • chatbot-config.json (settings)'));
+  console.log(chalk.gray('  • .env.chatbot (API keys, database, LLM, frontend framework)'));
+  console.log(chalk.gray('  • chatbot-config.json (settings, including frontend framework)'));
   console.log(chalk.gray('  • .gitignore (updated)\n'));
 
   console.log(chalk.white('Database Configuration:'));
@@ -417,17 +464,38 @@ CHATBOT_ENABLED=true
   console.log(chalk.cyan(`  • Model: ${llmAnswers.model}`));
   console.log(chalk.gray(`  • API Key: ${'*'.repeat(20)}\n`));
 
-  console.log(chalk.white('Next steps:\n'));
-  console.log(chalk.yellow('1. Add the widget to your Next.js app:\n'));
-  console.log(chalk.cyan('   import { ChatbotWidget } from "agenticaichat";'));
-  console.log(chalk.cyan('   \n   <ChatbotWidget />\n'));
-  
-  console.log(chalk.yellow('2. Or create a full-page chat route:\n'));
-  console.log(chalk.cyan('   // app/chat/page.tsx'));
-  console.log(chalk.cyan('   <ChatbotWidget fullScreen />\n'));
+  console.log(chalk.white('Frontend Framework:'));
+  console.log(chalk.cyan(`  • Framework: ${frontendAnswers.framework}\n`));
 
-  console.log(chalk.yellow('3. Start your development server:\n'));
-  console.log(chalk.cyan('   npm run dev\n'));
+  console.log(chalk.white('Next steps:\n'));
+  if (frontendAnswers.framework === 'react') {
+    console.log(chalk.yellow('1. Add the widget to your Next.js/React app:\n'));
+    console.log(chalk.cyan('   import { ChatbotWidget } from "agenticaichat";'));
+    console.log(chalk.cyan('   \n   <ChatbotWidget />\n'));
+    
+    console.log(chalk.yellow('2. Or create a full-page chat route:\n'));
+    console.log(chalk.cyan('   // app/chat/page.tsx'));
+    console.log(chalk.cyan('   <ChatbotWidget fullScreen />\n'));
+
+    console.log(chalk.yellow('3. Start your development server:\n'));
+    console.log(chalk.cyan('   npm run dev\n'));
+  } else if (frontendAnswers.framework === 'angular') {
+    console.log(chalk.yellow('1. Set up a backend API endpoint (see README for details).\n'));
+    console.log(chalk.yellow('2. Use the universal Web Component:\n'));
+    console.log(chalk.cyan('   import "agenticaichat/web-component";'));
+    console.log(chalk.cyan('   <agentica-chatbot api="/api/chatbot/query"></agentica-chatbot>\n'));
+    console.log(chalk.yellow('3. Or create a custom Angular component (see README).\n'));
+  } else if (frontendAnswers.framework === 'vue') {
+    console.log(chalk.yellow('1. Set up a backend API endpoint (see README for details).\n'));
+    console.log(chalk.yellow('2. Use the universal Web Component:\n'));
+    console.log(chalk.cyan('   import "agenticaichat/web-component";'));
+    console.log(chalk.cyan('   <agentica-chatbot api="/api/chatbot/query"></agentica-chatbot>\n'));
+    console.log(chalk.yellow('3. Or create a custom Vue component (see README).\n'));
+  } else {
+    console.log(chalk.yellow('1. Implement a small adapter/component in your framework that calls:\n'));
+    console.log(chalk.cyan('   POST /api/chatbot/query { query: string }\n'));
+    console.log(chalk.yellow('2. Use the response to render messages in your UI.\n'));
+  }
 
   console.log(chalk.white('Need help? Visit: ') + chalk.blue('https://github.com/yourusername/agenticaichat\n'));
 }

package/dist/adapters/angular.d.ts

@@ -0,0 +1,9 @@
+export interface AngularChatRequest {
+    query: string;
+}
+export interface AngularChatResponse {
+    answer: string;
+    sql?: string;
+    data?: any;
+    error?: string;
+}

package/dist/adapters/angular.js

@@ -0,0 +1,6 @@
+"use strict";
+// Placeholder types and helper for Angular adapters.
+// Angular users should create their own component/service that calls the HTTP API:
+// POST /api/chatbot/query { query: string }
+// and handles the JSON response.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/adapters/react.d.ts

@@ -0,0 +1 @@
+export { ChatbotWidget as ReactChatbotWidget } from '../widget';

package/dist/adapters/react.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactChatbotWidget = void 0;
+// Thin alias so future adapters can share a consistent naming scheme.
+// React users should continue to import from "agenticaichat" directly,
+// but this adapter is exposed for symmetry with Angular/Vue.
+var widget_1 = require("../widget");
+Object.defineProperty(exports, "ReactChatbotWidget", { enumerable: true, get: function () { return widget_1.ChatbotWidget; } });

package/dist/adapters/vue.d.ts

@@ -0,0 +1,9 @@
+export interface VueChatRequest {
+    query: string;
+}
+export interface VueChatResponse {
+    answer: string;
+    sql?: string;
+    data?: any;
+    error?: string;
+}

package/dist/adapters/vue.js

@@ -0,0 +1,6 @@
+"use strict";
+// Placeholder types and helper for Vue adapters.
+// Vue users should create their own component/composable that calls the HTTP API:
+// POST /api/chatbot/query { query: string }
+// and handles the JSON response.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { ChatbotWidget } from './widget';
+export { ReactChatbotWidget } from './adapters/react';
 export { ChatbotEngine } from './core/ChatbotEngine';
 export { EngineFactory } from './core/EngineFactory';
 export { DatabaseEngine } from './engines/base/DatabaseEngine';
@@ -18,3 +19,5 @@ export { TogetherAIProvider } from './llm/providers/TogetherAIProvider';
 export { DeepInfraProvider } from './llm/providers/DeepInfraProvider';
 export type { DatabaseCategory, SqlDatabaseType, NoSqlDatabaseType, SupportedDatabaseType, DatabaseConfig, DatabaseSchema, TableSchema, ColumnSchema, LLMConfig, LLMProviderType, ChatMessage, QueryRequest, QueryResponse, QueryResult, EngineStatus, ChatbotConfig } from './types';
 export { Logger, logger } from './utils/logger';
+export * from './adapters/angular';
+export * from './adapters/vue';

package/dist/index.js

@@ -1,11 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.logger = exports.Logger = exports.DeepInfraProvider = exports.TogetherAIProvider = exports.GrokProvider = exports.ClaudeProvider = exports.GeminiProvider = exports.OpenAIProvider = exports.LLMFactory = exports.MongoEngine = exports.SQLiteDialect = exports.MySQLDialect = exports.PostgresDialect = exports.NoSqlEngine = exports.SqlEngine = exports.DatabaseEngine = exports.EngineFactory = exports.ChatbotEngine = exports.ChatbotWidget = void 0;
+exports.logger = exports.Logger = exports.DeepInfraProvider = exports.TogetherAIProvider = exports.GrokProvider = exports.ClaudeProvider = exports.GeminiProvider = exports.OpenAIProvider = exports.LLMFactory = exports.MongoEngine = exports.SQLiteDialect = exports.MySQLDialect = exports.PostgresDialect = exports.NoSqlEngine = exports.SqlEngine = exports.DatabaseEngine = exports.EngineFactory = exports.ChatbotEngine = exports.ReactChatbotWidget = exports.ChatbotWidget = void 0;
 // ============================================
 // CLIENT-SIDE EXPORTS (Safe for browser)
 // ============================================
 var widget_1 = require("./widget");
 Object.defineProperty(exports, "ChatbotWidget", { enumerable: true, get: function () { return widget_1.ChatbotWidget; } });
+var react_1 = require("./adapters/react");
+Object.defineProperty(exports, "ReactChatbotWidget", { enumerable: true, get: function () { return react_1.ReactChatbotWidget; } });
 // ============================================
 // SERVER-SIDE EXPORTS (Node.js only)
 // ============================================
@@ -52,3 +68,6 @@ Object.defineProperty(exports, "DeepInfraProvider", { enumerable: true, get: fun
 var logger_1 = require("./utils/logger");
 Object.defineProperty(exports, "Logger", { enumerable: true, get: function () { return logger_1.Logger; } });
 Object.defineProperty(exports, "logger", { enumerable: true, get: function () { return logger_1.logger; } });
+// Framework adapter helper types (for Angular/Vue HTTP adapters)
+__exportStar(require("./adapters/angular"), exports);
+__exportStar(require("./adapters/vue"), exports);

package/dist/web-component/AgenticAIChatbot.js

@@ -0,0 +1,219 @@
+class AgenticAIChatbot extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.apiUrl = this.getAttribute('api') || '/api/chatbot/query';
+    this.messages = [];
+    this.isOpen = false;
+    this.isTyping = false;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          z-index: 9999;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .chat-container {
+          display: ${this.isOpen ? 'block' : 'none'};
+          width: 350px;
+          height: 500px;
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          overflow: hidden;
+          position: relative;
+        }
+
+        .chat-header {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          padding: 16px;
+          font-weight: 600;
+        }
+
+        .chat-messages {
+          height: 380px;
+          overflow-y: auto;
+          padding: 16px;
+          background: #f8f9fa;
+        }
+
+        .message {
+          margin-bottom: 12px;
+          padding: 8px 12px;
+          border-radius: 8px;
+          max-width: 80%;
+        }
+
+        .message.user {
+          background: #007bff;
+          color: white;
+          margin-left: auto;
+        }
+
+        .message.bot {
+          background: white;
+          color: #333;
+          border: 1px solid #e9ecef;
+        }
+
+        .typing {
+          display: ${this.isTyping ? 'block' : 'none'};
+          font-style: italic;
+          color: #666;
+        }
+
+        .chat-input {
+          padding: 16px;
+          background: white;
+          border-top: 1px solid #e9ecef;
+        }
+
+        .input-group {
+          display: flex;
+          gap: 8px;
+        }
+
+        input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid #ddd;
+          border-radius: 6px;
+          outline: none;
+        }
+
+        button {
+          padding: 8px 16px;
+          background: #007bff;
+          color: white;
+          border: none;
+          border-radius: 6px;
+          cursor: pointer;
+        }
+
+        button:hover {
+          background: #0056b3;
+        }
+
+        .chat-toggle {
+          width: 60px;
+          height: 60px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 50%;
+          border: none;
+          color: white;
+          font-size: 24px;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .chat-toggle:hover {
+          transform: scale(1.05);
+        }
+      </style>
+
+      <div class="chat-container">
+        <div class="chat-header">
+          🤖 AgenticAI Chatbot
+        </div>
+        <div class="chat-messages" id="messages">
+          ${this.messages.map(msg => `
+            <div class="message ${msg.sender}">
+              ${msg.text}
+            </div>
+          `).join('')}
+          <div class="message bot typing" id="typing">Typing...</div>
+        </div>
+        <div class="chat-input">
+          <div class="input-group">
+            <input type="text" id="messageInput" placeholder="Ask me anything..." />
+            <button id="sendButton">Send</button>
+          </div>
+        </div>
+      </div>
+
+      <button class="chat-toggle" id="toggleButton">
+        ${this.isOpen ? '✕' : '💬'}
+      </button>
+    `;
+  }
+
+  setupEventListeners() {
+    const toggleButton = this.shadowRoot.getElementById('toggleButton');
+    const sendButton = this.shadowRoot.getElementById('sendButton');
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+
+    toggleButton.addEventListener('click', () => {
+      this.isOpen = !this.isOpen;
+      this.render();
+    });
+
+    sendButton.addEventListener('click', () => this.sendMessage());
+    messageInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') this.sendMessage();
+    });
+  }
+
+  async sendMessage() {
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+    const query = messageInput.value.trim();
+    if (!query) return;
+
+    // Add user message
+    this.messages.push({ sender: 'user', text: query });
+    messageInput.value = '';
+    this.render();
+
+    // Show typing
+    this.isTyping = true;
+    this.render();
+
+    try {
+      const response = await fetch(this.apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query }),
+      });
+
+      const data = await response.json();
+
+      // Hide typing
+      this.isTyping = false;
+
+      if (data.error) {
+        this.messages.push({ sender: 'bot', text: `Error: ${data.error}` });
+      } else {
+        this.messages.push({ sender: 'bot', text: data.answer || data.reply || 'No response' });
+      }
+    } catch (error) {
+      this.isTyping = false;
+      this.messages.push({ sender: 'bot', text: 'Sorry, I encountered an error. Please try again.' });
+    }
+
+    this.render();
+    this.scrollToBottom();
+  }
+
+  scrollToBottom() {
+    const messages = this.shadowRoot.getElementById('messages');
+    messages.scrollTop = messages.scrollHeight;
+  }
+}
+
+customElements.define('agentica-chatbot', AgenticAIChatbot);

package/dist/web-component/index.js

@@ -0,0 +1,2 @@
+// Web Component for universal chatbot support
+export { default as AgenticAIChatbot } from './AgenticAIChatbot.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenticaichat",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "AI-powered chatbot for business analytics with natural language database queries",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,6 +19,10 @@
       "types": "./dist/core/index.d.ts",
       "import": "./dist/core/index.js",
       "require": "./dist/core/index.js"
+    },
+    "./web-component": {
+      "import": "./dist/web-component/index.js",
+      "require": "./dist/web-component/index.js"
     }
   },
   "bin": {
@@ -28,10 +32,12 @@
     "dist",
     "bin",
     "templates",
-    "scripts"
+    "scripts",
+    "src/web-component"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && npm run build:web-component",
+    "build:web-component": "if not exist dist\\web-component mkdir dist\\web-component && copy src\\web-component\\* dist\\web-component\\",
     "dev": "tsc --watch",
     "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
     "prebuild": "npm run clean",

package/src/web-component/AgenticAIChatbot.js

@@ -0,0 +1,219 @@
+class AgenticAIChatbot extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.apiUrl = this.getAttribute('api') || '/api/chatbot/query';
+    this.messages = [];
+    this.isOpen = false;
+    this.isTyping = false;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          z-index: 9999;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .chat-container {
+          display: ${this.isOpen ? 'block' : 'none'};
+          width: 350px;
+          height: 500px;
+          background: white;
+          border-radius: 12px;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          overflow: hidden;
+          position: relative;
+        }
+
+        .chat-header {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+          padding: 16px;
+          font-weight: 600;
+        }
+
+        .chat-messages {
+          height: 380px;
+          overflow-y: auto;
+          padding: 16px;
+          background: #f8f9fa;
+        }
+
+        .message {
+          margin-bottom: 12px;
+          padding: 8px 12px;
+          border-radius: 8px;
+          max-width: 80%;
+        }
+
+        .message.user {
+          background: #007bff;
+          color: white;
+          margin-left: auto;
+        }
+
+        .message.bot {
+          background: white;
+          color: #333;
+          border: 1px solid #e9ecef;
+        }
+
+        .typing {
+          display: ${this.isTyping ? 'block' : 'none'};
+          font-style: italic;
+          color: #666;
+        }
+
+        .chat-input {
+          padding: 16px;
+          background: white;
+          border-top: 1px solid #e9ecef;
+        }
+
+        .input-group {
+          display: flex;
+          gap: 8px;
+        }
+
+        input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid #ddd;
+          border-radius: 6px;
+          outline: none;
+        }
+
+        button {
+          padding: 8px 16px;
+          background: #007bff;
+          color: white;
+          border: none;
+          border-radius: 6px;
+          cursor: pointer;
+        }
+
+        button:hover {
+          background: #0056b3;
+        }
+
+        .chat-toggle {
+          width: 60px;
+          height: 60px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 50%;
+          border: none;
+          color: white;
+          font-size: 24px;
+          cursor: pointer;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .chat-toggle:hover {
+          transform: scale(1.05);
+        }
+      </style>
+
+      <div class="chat-container">
+        <div class="chat-header">
+          🤖 AgenticAI Chatbot
+        </div>
+        <div class="chat-messages" id="messages">
+          ${this.messages.map(msg => `
+            <div class="message ${msg.sender}">
+              ${msg.text}
+            </div>
+          `).join('')}
+          <div class="message bot typing" id="typing">Typing...</div>
+        </div>
+        <div class="chat-input">
+          <div class="input-group">
+            <input type="text" id="messageInput" placeholder="Ask me anything..." />
+            <button id="sendButton">Send</button>
+          </div>
+        </div>
+      </div>
+
+      <button class="chat-toggle" id="toggleButton">
+        ${this.isOpen ? '✕' : '💬'}
+      </button>
+    `;
+  }
+
+  setupEventListeners() {
+    const toggleButton = this.shadowRoot.getElementById('toggleButton');
+    const sendButton = this.shadowRoot.getElementById('sendButton');
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+
+    toggleButton.addEventListener('click', () => {
+      this.isOpen = !this.isOpen;
+      this.render();
+    });
+
+    sendButton.addEventListener('click', () => this.sendMessage());
+    messageInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') this.sendMessage();
+    });
+  }
+
+  async sendMessage() {
+    const messageInput = this.shadowRoot.getElementById('messageInput');
+    const query = messageInput.value.trim();
+    if (!query) return;
+
+    // Add user message
+    this.messages.push({ sender: 'user', text: query });
+    messageInput.value = '';
+    this.render();
+
+    // Show typing
+    this.isTyping = true;
+    this.render();
+
+    try {
+      const response = await fetch(this.apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query }),
+      });
+
+      const data = await response.json();
+
+      // Hide typing
+      this.isTyping = false;
+
+      if (data.error) {
+        this.messages.push({ sender: 'bot', text: `Error: ${data.error}` });
+      } else {
+        this.messages.push({ sender: 'bot', text: data.answer || data.reply || 'No response' });
+      }
+    } catch (error) {
+      this.isTyping = false;
+      this.messages.push({ sender: 'bot', text: 'Sorry, I encountered an error. Please try again.' });
+    }
+
+    this.render();
+    this.scrollToBottom();
+  }
+
+  scrollToBottom() {
+    const messages = this.shadowRoot.getElementById('messages');
+    messages.scrollTop = messages.scrollHeight;
+  }
+}
+
+customElements.define('agentica-chatbot', AgenticAIChatbot);

package/src/web-component/index.js

@@ -0,0 +1,2 @@
+// Web Component for universal chatbot support
+export { default as AgenticAIChatbot } from './AgenticAIChatbot.js';