agenticaichat 1.0.6 → 1.0.7

package/README.md

@@ -1,291 +1,128 @@
 # AgenticAIChat
-AI-powered chatbot for business analytics with natural language database queries.
+AI chatbot for business data. Ask questions in normal English or Hindi.
 
-## Highlights
-
-- Five-minute setup with an interactive CLI wizard
-- Natural language questions in English or Hindi
-- Works with PostgreSQL, MySQL, SQLite, Turso, and MongoDB
-- 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
+## What it does
+- Quick 5-minute setup
+- Ask questions in English or Hindi
+- Works with PostgreSQL, MySQL, SQLite, Turso, MongoDB
+- Ready for React, Angular, Vue, Next.js
+- Same design in all frameworks
+- Auto-creates config files
 
+## What you need
 - Node.js 18+ and npm 9+
-- React 18+ and Next.js 13+ (app router recommended) for the built-in widget
-
-## Universal Web Component (Recommended for All Frameworks)
+- React 18+ for React/Next.js apps
+- Angular 12+ for Angular apps
+- Vue 3+ for Vue apps
 
-For the best compatibility across all frameworks and plain HTML, use our universal Web Component:
+## Install and Setup
 
-```html
-<script src="https://cdn.jsdelivr.net/npm/agenticaichat/dist/web-component/index.js"></script>
-<agentica-chatbot api="/api/chatbot/query"></agentica-chatbot>
+### Step 1: Install
+```bash
+npm install agenticaichat
 ```
 
-Or import in your framework:
-
-```javascript
-// React, Vue, Angular, etc.
-import 'agenticaichat/web-component';
+### Step 2: Setup
+Run this command:
+```bash
+npx agenticai-setup
 ```
 
-This works everywhere without framework-specific code.
-
-## Widget vs Web Component — When to Use What?
-
-AgenticAIChat offers two ways to integrate the chatbot:
+The setup will ask:
+- Your database details (type, host, user, password)
+- Your AI API key (OpenAI, Google, etc.)
+- Which framework you use (React, Angular, Vue, Next.js)
 
-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  
+It will create files and tell you what to do next.
 
-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  
+## How to Use in Different Frameworks
 
-If unsure, use the Web Component for maximum compatibility.
-
-## Quick Start (Next.js)
-
-Add the widget to any page or component:
+### Next.js (Easiest)
+Setup creates:
+- API file: `app/api/chatbot/route.ts`
+- Chat page: `app/chat/page.tsx`
 
+Use in your code:
 ```tsx
-// app/dashboard/page.tsx
 import { ChatbotWidget } from 'agenticaichat';
 
-export default function Dashboard() {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <ChatbotWidget />
-    </div>
-  );
+export default function MyPage() {
+  return <ChatbotWidget />;
 }
 ```
 
-Create a full-page chat experience:
-
+### React (Vite, CRA, etc.)
+Setup gives you the widget. Use it:
 ```tsx
-// app/chat/page.tsx
 import { ChatbotWidget } from 'agenticaichat';
 
-export default function ChatPage() {
-  return <ChatbotWidget fullScreen />;
-}
-```
-
-Start your Next.js app:
-
-```bash
-npm run dev
-```
-
-## 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);
-  }
+function MyApp() {
+  return <ChatbotWidget />;
 }
 ```
 
-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:
+### Angular
+Setup creates:
+- Service file: `src/app/services/chatbot.service.ts`
+- Component file: `src/app/components/chatbot.component.ts`
 
-```bash
-npm install agenticaichat
-npx agenticai-setup
+Add to your HTML:
+```html
+<app-chatbot></app-chatbot>
 ```
 
-2. Set up the backend API as described above.
-
-3. In your Vue app, create a chatbot component:
+### Vue
+Setup creates:
+- Composable file: `src/composables/useChatbot.js`
+- Component file: `src/components/Chatbot.vue`
 
+Use in your template:
 ```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>
+<Chatbot />
 ```
 
-4. Use the component in your app and configure CORS on your backend.
-
-## 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.
-- Return JSON responses in the same shape as the template handler.
-- Configure CORS/auth so the widget can call your endpoint from the browser.
-
-Frontend usage stays the same:
-
-```tsx
-import { ChatbotWidget } from 'agenticaichat';
-
-export default function Page() {
-  return <ChatbotWidget apiPath="/api/chatbot/query" />;
-}
-```
+## Same Design Everywhere
+All frameworks use the same chat design:
+- Chat bubble
+- Message list
+- Input box
+- Send button
+- Same colors and style
 
-## Configuration Files
+## Files Created
+- `.env.chatbot` - Your secret keys
+- `chatbot-config.json` - Settings
+- `.gitignore` - Keeps secrets safe
 
-- `.env.chatbot` holds database connection, LLM provider, model, and API key.
-- `chatbot-config.json` stores non-secret metadata (database/LLM selection).
-- `.gitignore` is updated automatically to keep generated secrets out of version control.
+## Need Help?
+- Check the setup output for next steps
+- All frameworks work the same way
+- Design looks identical everywhere
 
-## Architecture Summary
+## How It Works
 
 ```
-[Browser: React/Angular/Vue/HTML/Next.js]
+Your App (React/Angular/Vue/Next.js)
                 |
                 V
-   <agentica-chatbot web component>
+     Framework Adapter (auto-loaded)
+                |
+                V
+        ChatbotWidget (same design)
                 |
                 V
       Your Backend API (/api/chatbot/query)
                 |
                 V
-     ChatbotEngine → LLM / Database / Business Logic
+     ChatbotEngine → Database → AI
 ```
 
-The Web Component handles all frontend interactions and works universally across frameworks.
-
-## Troubleshooting
+Each framework gets its own adapter that loads the same ChatbotWidget.
 
-- CI environments skip the wizard; run `npx agenticai-setup` locally after install.
-- If the wizard cannot run (non-interactive terminal), rerun manually with the command above.
-- To switch databases or AI providers, rerun the wizard; existing files will be replaced.
-
-## Contributing
-
-Contributions are welcome. Please open an issue or pull request with details and reproduction steps.
+## Problems?
+- Run `npx agenticai-setup` again
+- Check that your framework is supported
+- Make sure Node.js 18+ is installed
 
 ## License
-
-MIT License
-
-## Support
-
-- GitHub: [Issues](https://github.com/Bhaviraj2004/agenticaichat/issues)
-- Email: bhaviraj001@gmail.com
+MIT License

package/bin/cli.js

@@ -384,51 +384,15 @@ CHATBOT_ENABLED=true
   spinner.text = 'Created chatbot-config.json';
 
   // 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'));
-    }
-
-    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'));
-    }
-  } 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'));
+  try {
+    const adapterPath = `./adapters/${frontendAnswers.framework}/index.js`;
+    const adapter = require(path.join(__dirname, '..', 'dist', 'adapters', frontendAnswers.framework, 'index.js'));
+    const setupFunctionName = `setup${frontendAnswers.framework.charAt(0).toUpperCase() + frontendAnswers.framework.slice(1)}`;
+    await adapter[setupFunctionName]();
+    spinner.text = `${frontendAnswers.framework} adapter setup complete`;
+  } catch (error) {
+    spinner.warn(`Could not load ${frontendAnswers.framework} adapter: ${error.message}`);
+    console.log(chalk.yellow('\nℹ️  You can manually set up the frontend integration later'));
   }
 
   // Update .gitignore

package/dist/adapters/angular/index.d.ts

@@ -0,0 +1 @@
+export declare function setupAngular(): Promise<void>;

package/dist/adapters/angular/index.js

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupAngular = setupAngular;
+// Angular Adapter - Generate service and component
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+async function setupAngular() {
+    const cwd = process.cwd();
+    // Generate service
+    const serviceDir = path_1.default.join(cwd, 'src', 'app', 'services');
+    const serviceFile = path_1.default.join(serviceDir, 'chatbot.service.ts');
+    if (!fs_1.default.existsSync(serviceDir)) {
+        fs_1.default.mkdirSync(serviceDir, { recursive: true });
+    }
+    const serviceContent = `import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChatbotService {
+  constructor(private http: HttpClient) {}
+
+  sendQuery(query: string): Observable<any> {
+    return this.http.post('/api/chatbot/query', { query });
+  }
+}`;
+    fs_1.default.writeFileSync(serviceFile, serviceContent);
+    // Generate component
+    const componentDir = path_1.default.join(cwd, 'src', 'app', 'components', 'chatbot');
+    const componentFile = path_1.default.join(componentDir, 'chatbot.component.ts');
+    const templateFile = path_1.default.join(componentDir, 'chatbot.component.html');
+    if (!fs_1.default.existsSync(componentDir)) {
+        fs_1.default.mkdirSync(componentDir, { recursive: true });
+    }
+    const componentContent = `import { Component } from '@angular/core';
+import { ChatbotService } from '../../services/chatbot.service';
+
+@Component({
+  selector: 'app-chatbot',
+  templateUrl: './chatbot.component.html'
+})
+export class ChatbotComponent {
+  messages: any[] = [];
+  newMessage = '';
+
+  constructor(private chatbotService: ChatbotService) {}
+
+  sendMessage() {
+    if (!this.newMessage.trim()) return;
+
+    this.messages.push({ text: this.newMessage, sender: 'user' });
+    this.chatbotService.sendQuery(this.newMessage).subscribe(
+      response => {
+        this.messages.push({ text: response.answer, sender: 'bot' });
+      },
+      error => {
+        this.messages.push({ text: 'Error: ' + error.message, sender: 'bot' });
+      }
+    );
+    this.newMessage = '';
+  }
+}`;
+    const templateContent = `<div class="chat-container">
+  <div class="chat-messages">
+    <div *ngFor="let message of messages" [class]="message.sender">
+      {{ message.text }}
+    </div>
+  </div>
+  <input [(ngModel)]="newMessage" (keyup.enter)="sendMessage()" placeholder="Ask a question..." />
+  <button (click)="sendMessage()">Send</button>
+</div>`;
+    fs_1.default.writeFileSync(componentFile, componentContent);
+    fs_1.default.writeFileSync(templateFile, templateContent);
+    console.log('Angular setup complete. Service and component generated.');
+}

package/dist/adapters/next/index.d.ts

@@ -0,0 +1 @@
+export declare function setupNext(): Promise<void>;

package/dist/adapters/next/index.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupNext = setupNext;
+// Next.js Adapter - Auto-generate API route and page
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+async function setupNext() {
+    const cwd = process.cwd();
+    // Generate API route
+    const apiDir = path_1.default.join(cwd, 'app', 'api', 'chatbot');
+    const apiFile = path_1.default.join(apiDir, 'route.ts');
+    if (!fs_1.default.existsSync(apiDir)) {
+        fs_1.default.mkdirSync(apiDir, { recursive: true });
+    }
+    const apiContent = `import { ChatbotEngine } from 'agenticaichat/core';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { query } = await request.json();
+    const engine = new ChatbotEngine();
+    const result = await engine.processQuery(query);
+    return NextResponse.json(result);
+  } catch (error) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}`;
+    fs_1.default.writeFileSync(apiFile, apiContent);
+    // Generate chat page
+    const chatDir = path_1.default.join(cwd, 'app', 'chat');
+    const pageFile = path_1.default.join(chatDir, 'page.tsx');
+    if (!fs_1.default.existsSync(chatDir)) {
+        fs_1.default.mkdirSync(chatDir, { recursive: true });
+    }
+    const pageContent = `import { ChatbotWidget } from 'agenticaichat';
+
+export default function ChatPage() {
+  return (
+    <div>
+      <h1>Chat with AI</h1>
+      <ChatbotWidget />
+    </div>
+  );
+}`;
+    fs_1.default.writeFileSync(pageFile, pageContent);
+    console.log('Next.js setup complete. API route and chat page generated.');
+}

package/dist/adapters/react/index.d.ts

@@ -0,0 +1 @@
+export declare function setupReact(): Promise<void>;

package/dist/adapters/react/index.js

@@ -0,0 +1,8 @@
+"use strict";
+// React Adapter - Direct widget usage
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupReact = setupReact;
+async function setupReact() {
+    // For React frameworks, just provide usage instructions
+    console.log('React setup complete. Use: import { ChatbotWidget } from "agenticaichat";');
+}

package/dist/adapters/vue/index.d.ts

@@ -0,0 +1 @@
+export declare function setupVue(): Promise<void>;

package/dist/adapters/vue/index.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupVue = setupVue;
+// Vue Adapter - Generate composable and component
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+async function setupVue() {
+    const cwd = process.cwd();
+    // Generate composable
+    const composableDir = path_1.default.join(cwd, 'src', 'composables');
+    const composableFile = path_1.default.join(composableDir, 'useChatbot.js');
+    if (!fs_1.default.existsSync(composableDir)) {
+        fs_1.default.mkdirSync(composableDir, { recursive: true });
+    }
+    const composableContent = `import { ref } from 'vue';
+
+export function useChatbot() {
+  const messages = ref([]);
+  const loading = ref(false);
+
+  const sendQuery = async (query) => {
+    loading.value = true;
+    messages.value.push({ text: query, sender: 'user' });
+
+    try {
+      const response = await fetch('/api/chatbot/query', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query })
+      });
+      const data = await response.json();
+      messages.value.push({ text: data.answer, sender: 'bot' });
+    } catch (error) {
+      messages.value.push({ text: 'Error: ' + error.message, sender: 'bot' });
+    }
+
+    loading.value = false;
+  };
+
+  return { messages, loading, sendQuery };
+}`;
+    fs_1.default.writeFileSync(composableFile, composableContent);
+    // Generate component
+    const componentDir = path_1.default.join(cwd, 'src', 'components');
+    const componentFile = path_1.default.join(componentDir, 'Chatbot.vue');
+    if (!fs_1.default.existsSync(componentDir)) {
+        fs_1.default.mkdirSync(componentDir, { recursive: true });
+    }
+    const componentContent = `<template>
+  <div class="chat-container">
+    <div class="chat-messages">
+      <div v-for="message in messages" :key="message.id" :class="message.sender">
+        {{ message.text }}
+      </div>
+      <div v-if="loading" class="loading">Typing...</div>
+    </div>
+    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Ask a question..." />
+    <button @click="sendMessage" :disabled="loading">Send</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useChatbot } from '../composables/useChatbot.js';
+
+const { messages, loading, sendQuery } = useChatbot();
+const newMessage = ref('');
+
+const sendMessage = () => {
+  if (!newMessage.value.trim()) return;
+  sendQuery(newMessage.value);
+  newMessage.value = '';
+};
+</script>
+
+<style scoped>
+.chat-container { /* Add your styles */ }
+.chat-messages { height: 300px; overflow-y: auto; }
+.message { margin: 10px; padding: 10px; border-radius: 10px; }
+.user { background: #007bff; color: white; margin-left: auto; }
+.bot { background: #f1f1f1; }
+.loading { font-style: italic; color: #666; }
+</style>`;
+    fs_1.default.writeFileSync(componentFile, componentContent);
+    console.log('Vue setup complete. Composable and component generated.');
+}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-export { ChatbotWidget } from './widget';
-export { ReactChatbotWidget } from './adapters/react';
+export { ChatbotWidget } from './shared';
 export { ChatbotEngine } from './core/ChatbotEngine';
 export { EngineFactory } from './core/EngineFactory';
 export { DatabaseEngine } from './engines/base/DatabaseEngine';

package/dist/index.js

@@ -14,14 +14,12 @@ 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.ReactChatbotWidget = 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.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; } });
+var shared_1 = require("./shared");
+Object.defineProperty(exports, "ChatbotWidget", { enumerable: true, get: function () { return shared_1.ChatbotWidget; } });
 // ============================================
 // SERVER-SIDE EXPORTS (Node.js only)
 // ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agenticaichat",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "AI-powered chatbot for business analytics with natural language database queries",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,18 +11,34 @@
       "require": "./dist/index.js"
     },
     "./widget": {
-      "types": "./dist/widget/index.d.ts",
-      "import": "./dist/widget/index.js",
-      "require": "./dist/widget/index.js"
+      "types": "./dist/shared/index.d.ts",
+      "import": "./dist/shared/index.js",
+      "require": "./dist/shared/index.js"
     },
     "./server": {
       "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"
+    "./adapters/react": {
+      "types": "./dist/adapters/react/index.d.ts",
+      "import": "./dist/adapters/react/index.js",
+      "require": "./dist/adapters/react/index.js"
+    },
+    "./adapters/angular": {
+      "types": "./dist/adapters/angular/index.d.ts",
+      "import": "./dist/adapters/angular/index.js",
+      "require": "./dist/adapters/angular/index.js"
+    },
+    "./adapters/vue": {
+      "types": "./dist/adapters/vue/index.d.ts",
+      "import": "./dist/adapters/vue/index.js",
+      "require": "./dist/adapters/vue/index.js"
+    },
+    "./adapters/next": {
+      "types": "./dist/adapters/next/index.d.ts",
+      "import": "./dist/adapters/next/index.js",
+      "require": "./dist/adapters/next/index.js"
     }
   },
   "bin": {
@@ -32,12 +48,10 @@
     "dist",
     "bin",
     "templates",
-    "scripts",
-    "src/web-component"
+    "scripts"
   ],
   "scripts": {
-    "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\\",
+    "build": "tsc",
     "dev": "tsc --watch",
     "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
     "prebuild": "npm run clean",

package/dist/adapters/angular.d.ts

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

package/dist/adapters/angular.js

@@ -1,6 +0,0 @@
-"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

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

package/dist/adapters/react.js

@@ -1,8 +0,0 @@
-"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

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

package/dist/adapters/vue.js

@@ -1,6 +0,0 @@
-"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/web-component/AgenticAIChatbot.js

@@ -1,219 +0,0 @@
-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

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

package/src/web-component/AgenticAIChatbot.js

@@ -1,219 +0,0 @@
-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

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