agenticaichat 1.0.4 → 1.0.6

package/README.md

@@ -6,7 +6,8 @@ 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
 
@@ -15,36 +16,41 @@ AI-powered chatbot for business analytics with natural language database queries
 - Node.js 18+ and npm 9+
 - React 18+ and Next.js 13+ (app router recommended) for the built-in widget
 
-## Installation and Setup
+## Universal Web Component (Recommended for All Frameworks)
 
-Install the package:
+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';
 ```
 
-Run the setup wizard to configure your database and AI provider:
+This works everywhere without framework-specific code.
 
-```bash
-npx agenticai-setup
-```
+## Widget vs Web Component — When to Use What?
+
+AgenticAIChat offers two ways to integrate the chatbot:
 
-The wizard will:
+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  
 
-- Ask for your database type and connection details
-- Collect your AI provider, model, and API key
-- Generate `.env.chatbot` and `chatbot-config.json`
-- For Next.js: Generate API route and chat page
-- Update `.gitignore` to exclude generated secrets
+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 the wizard doesn't run automatically after install (e.g., in CI or non-interactive environments), run the command above manually.
+If unsure, use the Web Component for maximum compatibility.
 
 ## Quick Start (Next.js)
 
@@ -86,7 +92,7 @@ npm run dev
 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
 ```
@@ -121,8 +127,19 @@ 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
@@ -168,6 +185,10 @@ export class ChatbotComponent {
 
 ## 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
@@ -233,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
 
-const inquirer = require('inquirer').default;
+const inquirer = require('inquirer');
 const chalk = require('chalk');
 const ora = require('ora');
 const fs = require('fs');
@@ -481,19 +481,16 @@ CHATBOT_ENABLED=true
     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. Create an Angular component like this:\n'));
-    console.log(chalk.cyan('   // chatbot.component.ts'));
-    console.log(chalk.cyan('   import { HttpClient } from "@angular/common/http";'));
-    console.log(chalk.cyan('   // ... component code to POST to /api/chatbot/query\n'));
-    console.log(chalk.yellow('3. See README.md for complete Angular setup example.\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. Create a Vue component like this:\n'));
-    console.log(chalk.cyan('   // Chatbot.vue'));
-    console.log(chalk.cyan('   <script setup>'));
-    console.log(chalk.cyan('   const response = await fetch("/api/chatbot/query", { ... });'));
-    console.log(chalk.cyan('   </script>\n'));
-    console.log(chalk.yellow('3. See README.md for complete Vue setup example.\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'));

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.4",
+  "version": "1.0.6",
   "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",
@@ -67,11 +73,14 @@
     "@google/generative-ai": "^0.24.1",
     "axios": "^1.13.2",
     "better-sqlite3": "^12.5.0",
+    "chalk": "^4.1.2",
     "dotenv": "^17.2.3",
+    "inquirer": "^8.2.6",
     "lucide-react": "^0.559.0",
     "mongodb": "^7.0.0",
     "mysql2": "^3.15.3",
     "openai": "^6.10.0",
+    "ora": "^5.4.1",
     "pg": "^8.16.3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -83,10 +92,7 @@
     "@types/pg": "^8.15.6",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "chalk": "^4.1.2",
     "commander": "^11.1.0",
-    "inquirer": "^8.2.6",
-    "ora": "^5.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.0"
   },

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';