nextjs-chatbot-ui 1.4.0 → 1.4.1

package/README.md

@@ -1,6 +1,27 @@
-# Chatbot UI Component
+# nextjs-chatbot-ui
 
-A beautiful, configurable chatbot UI component for Next.js applications with Tailwind CSS. Inspired by Sendbird's modern chat interface.
+A beautiful, configurable chatbot UI component for Next.js with Tailwind CSS. Perfect for customer support, AI assistants, and chat applications.
+
+## ⚡ Super Simple Usage (Just 2 Files!)
+
+```javascript
+// app/page.tsx
+'use client';
+import { Chatbot } from 'nextjs-chatbot-ui';
+export default function Home() {
+  return <Chatbot config={{ backendUrl: '/api/chat' }} />;
+}
+```
+
+```javascript
+// app/api/chat/route.ts
+export async function POST(req: Request) {
+  const { message } = await req.json();
+  return Response.json({ message: `You said: ${message}` });
+}
+```
+
+**Done!** See `SIMPLE_SETUP.md` for more examples.
 
 ## Features
 
@@ -33,6 +54,34 @@ This package requires:
 npm install nextjs-chatbot-ui
 ```
 
+## Quick Start (Minimal Code)
+
+### Simplest Usage (Just 2 files!)
+
+**1. Add to your page:**
+```javascript
+// app/page.tsx
+'use client';
+import { Chatbot } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  return <Chatbot config={{ backendUrl: '/api/chat' }} />;
+}
+```
+
+**2. Create API endpoint:**
+```javascript
+// app/api/chat/route.ts
+import { NextResponse } from 'next/server';
+
+export async function POST(req: Request) {
+  const { message } = await req.json();
+  return NextResponse.json({ message: `You said: ${message}` });
+}
+```
+
+**Done!** See `SIMPLE_SETUP.md` for more examples.
+
 ## Usage
 
 ### Basic Setup
@@ -230,7 +279,9 @@ interface ChatbotConfig {
 
 ### Backend API Requirements
 
-Your backend should accept POST requests with the following format:
+**✅ Works with ANY backend!** Express, FastAPI, Flask, Django, NestJS, Go, or any other framework.
+
+Your backend just needs to implement **one POST endpoint** that accepts and returns JSON:
 
 **Request:**
 ```json
@@ -243,7 +294,7 @@ Your backend should accept POST requests with the following format:
 }
 ```
 
-**Response:**
+**Response (either format works):**
 ```json
 {
   "message": "Bot's response text",
@@ -260,7 +311,10 @@ or
 }
 ```
 
-**Note:** The `suggestedReplies` or `suggestions` field is optional and will display as clickable buttons below the bot's message, similar to Sendbird's interface.
+**Note:** 
+- The `suggestedReplies` or `suggestions` field is optional
+- The component accepts either `message` or `response` in the response
+- See `BACKEND_INTEGRATION.md` for examples with different backend frameworks (Express, FastAPI, Flask, Django, NestJS, Go, etc.)
 
 ### Example Implementation
 
@@ -500,6 +554,45 @@ If the database connection is not establishing:
 
 5. **Verify database credentials**: Ensure your database host, port, username, password, and database name are correct.
 
+## RAG Chatbot Architecture
+
+This package supports RAG (Retrieval-Augmented Generation) chatbot architecture for answering questions about your database.
+
+### Architecture Flow
+
+```
+React UI → Express API → MongoDB + ChromaDB → OpenAI
+```
+
+1. **Setup Phase**: Use `AdminSetup` component to connect to database, select collections/columns, and process embeddings
+2. **Query Phase**: Use `Chatbot` component to ask questions, which are answered using vector search and LLM generation
+
+### Quick Start with RAG
+
+1. **Set up backend** (see `server.js` or `example-nextjs-api-routes.md`):
+   - Express server with MongoDB, ChromaDB, and OpenAI integration
+   - Endpoints: `/api/search`, `/api/database/process-embeddings`
+
+2. **Configure chatbot**:
+   ```javascript
+   const config: ChatbotConfig = {
+     backendUrl: '/api/search', // RAG search endpoint
+     labels: {
+       title: 'RAG Chatbot',
+       placeholder: 'Ask me anything about your data...',
+     },
+   };
+   ```
+
+3. **Use AdminSetup** to:
+   - Connect to your database
+   - Select collections and columns
+   - Process embeddings (fetches data → converts to embeddings → stores in ChromaDB)
+
+4. **Query your data** using the Chatbot component
+
+For complete RAG architecture documentation, see `RAG_ARCHITECTURE.md`.
+
 ## License
 
 MIT

package/hooks/useAdminSetup.ts

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import type { DatabaseConfig, DatabaseConnection } from '../types/admin';
+
+/**
+ * Simplified hook for admin setup
+ * Handles all API calls automatically
+ */
+export function useAdminSetup() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleTestConnection = async (connection: DatabaseConnection): Promise<boolean> => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/database/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(connection),
+      });
+      const data = await response.json();
+      return data.success === true;
+    } catch (error) {
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFetchCollections = async (connection: DatabaseConnection): Promise<string[]> => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/database/collections', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(connection),
+      });
+      const data = await response.json();
+      return data.collections || data.tables || [];
+    } catch (error) {
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleFetchColumns = async (connection: DatabaseConnection, collection?: string): Promise<string[]> => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/database/columns', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...connection, collection }),
+      });
+      const data = await response.json();
+      return data.columns || [];
+    } catch (error) {
+      return [];
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleProcessEmbeddings = async (config: DatabaseConfig): Promise<{ success: boolean; message?: string }> => {
+    setIsLoading(true);
+    try {
+      const response = await fetch('/api/database/process-embeddings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(config),
+      });
+      const data = await response.json();
+      return { success: data.success || false, message: data.message };
+    } catch (error: any) {
+      return { success: false, message: error.message };
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    handleTestConnection,
+    handleFetchCollections,
+    handleFetchColumns,
+    handleProcessEmbeddings,
+    isLoading,
+  };
+}

package/hooks/useChatbot.ts

@@ -0,0 +1,27 @@
+import type { ChatbotConfig } from '../types';
+
+/**
+ * Simplified hook for chatbot integration
+ * Handles all the configuration automatically
+ */
+export function useChatbot(options?: {
+  apiUrl?: string;
+  title?: string;
+  primaryColor?: string;
+}) {
+  const config: ChatbotConfig = {
+    backendUrl: options?.apiUrl || '/api/chat',
+    labels: {
+      title: options?.title || 'Chat Support',
+      placeholder: 'Type your message...',
+      sendButton: 'Send',
+      welcomeMessage: 'Hello! How can I help you?',
+    },
+    position: 'bottom-right',
+    primaryColor: options?.primaryColor || '#6B46C1',
+    autoOpen: false,
+    showTimestamp: true,
+  };
+
+  return { config };
+}

package/index.tsx

@@ -1,5 +1,9 @@
-export { default as Chatbot } from './components/Chatbot';
-export type { ChatbotConfig, Message, ChatbotProps } from './types';
-
-export { default as AdminSetup } from './components/AdminSetup';
-export type { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, CollectionColumnMapping, AdminSetupProps } from './types/admin';
+export { default as Chatbot } from './components/Chatbot';
+export type { ChatbotConfig, Message, ChatbotProps } from './types';
+
+export { default as AdminSetup } from './components/AdminSetup';
+export type { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, CollectionColumnMapping, AdminSetupProps } from './types/admin';
+
+// Simplified hooks for easier usage
+export { useChatbot } from './hooks/useChatbot';
+export { useAdminSetup } from './hooks/useAdminSetup';

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "nextjs-chatbot-ui",
-  
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
   "main": "./index.tsx",
   "module": "./index.tsx",
@@ -24,18 +23,28 @@
       "import": "./types/index.ts",
       "require": "./types/index.ts",
       "default": "./types/index.ts"
+    },
+    "./hooks/useChatbot": {
+      "import": "./hooks/useChatbot.ts",
+      "require": "./hooks/useChatbot.ts",
+      "default": "./hooks/useChatbot.ts"
+    },
+    "./hooks/useAdminSetup": {
+      "import": "./hooks/useAdminSetup.ts",
+      "require": "./hooks/useAdminSetup.ts",
+      "default": "./hooks/useAdminSetup.ts"
     }
   },
   "files": [
     "components",
     "types",
     "utils",
+    "hooks",
     "index.tsx",
     "README.md"
   ],
   "scripts": {
     "build": "echo 'Package is ready to use. Source files are included.'",
-    "dev": "next dev",
     "prepare": "npm run build",
     "type-check": "tsc --noEmit"
   },