nextjs-chatbot-ui 1.3.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/components/AdminSetup.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useState } from 'react';
-import { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, AdminSetupProps } from '../types/admin';
+import React, { useState, useEffect } from 'react';
+import { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, CollectionColumnMapping, AdminSetupProps } from '../types/admin';
 import { normalizeConnection, transformConnectionForBackend } from '../utils/connectionHelpers';
 import clsx from 'clsx';
 
@@ -10,17 +10,22 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
   onTestConnection,
   onFetchCollections,
   onFetchColumns,
+  onProcessEmbeddings,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentStep, setCurrentStep] = useState<'connection' | 'collection' | 'columns'>('connection');
+  const [currentStep, setCurrentStep] = useState<'connection' | 'collection' | 'columns' | 'processing'>('connection');
   const [isConnecting, setIsConnecting] = useState(false);
   const [connectionError, setConnectionError] = useState<string | null>(null);
   const [connectionSuccess, setConnectionSuccess] = useState(false);
   const [availableCollections, setAvailableCollections] = useState<string[]>([]);
-  const [selectedCollection, setSelectedCollection] = useState<string>('');
-  const [availableColumns, setAvailableColumns] = useState<string[]>([]);
+  const [selectedCollections, setSelectedCollections] = useState<string[]>([]);
+  const [collectionColumns, setCollectionColumns] = useState<Record<string, string[]>>({});
+  const [selectedColumns, setSelectedColumns] = useState<Record<string, string[]>>({});
   const [isLoadingCollections, setIsLoadingCollections] = useState(false);
-  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [loadingColumnsFor, setLoadingColumnsFor] = useState<string[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [processingStatus, setProcessingStatus] = useState<string>('');
+  const [processingError, setProcessingError] = useState<string | null>(null);
 
   const [dbType, setDbType] = useState<DatabaseType>('mongodb');
   const [connection, setConnection] = useState<DatabaseConnection>({
@@ -34,12 +39,6 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     ssl: false,
   });
 
-  const [columnSelection, setColumnSelection] = useState<ColumnSelection>({
-    embeddingColumns: [],
-    llmColumns: [],
-    chromaColumns: [],
-  });
-
   const handleDbTypeChange = (type: DatabaseType) => {
     setDbType(type);
     setConnection({
@@ -165,8 +164,8 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     }
   };
 
-  const handleFetchColumns = async (collectionName?: string): Promise<string[]> => {
-    setIsLoadingColumns(true);
+  const handleFetchColumns = async (collectionName: string): Promise<string[]> => {
+    setLoadingColumnsFor(prev => [...prev, collectionName]);
     setConnectionError(null);
     
     try {
@@ -176,7 +175,7 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
       let columns: string[];
 
       if (onFetchColumns) {
-        columns = await onFetchColumns(normalizedConnection, collectionName || selectedCollection);
+        columns = await onFetchColumns(normalizedConnection, collectionName);
       } else {
         try {
           const response = await fetch('/api/database/columns', {
@@ -184,7 +183,7 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({
               ...backendRequest,
-              collection: collectionName || selectedCollection,
+              collection: collectionName,
             }),
           });
 
@@ -204,17 +203,18 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
       }
 
       if (columns && columns.length > 0) {
-        setAvailableColumns(columns);
-        setIsLoadingColumns(false);
+        setCollectionColumns(prev => ({ ...prev, [collectionName]: columns }));
+        setSelectedColumns(prev => ({ ...prev, [collectionName]: [] }));
+        setLoadingColumnsFor(prev => prev.filter(c => c !== collectionName));
         return columns;
       } else {
-        setConnectionError('No columns found in the selected collection.');
-        setIsLoadingColumns(false);
+        setConnectionError(`No columns found in ${collectionName}.`);
+        setLoadingColumnsFor(prev => prev.filter(c => c !== collectionName));
         return [];
       }
     } catch (error: any) {
       setConnectionError(error.message || 'Failed to fetch columns.');
-      setIsLoadingColumns(false);
+      setLoadingColumnsFor(prev => prev.filter(c => c !== collectionName));
       console.error('Fetch columns error:', error);
       return [];
     }
@@ -246,41 +246,165 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     }
   };
 
-  const handleCollectionSelect = async (collection: string) => {
-    setSelectedCollection(collection);
-    const columns = await handleFetchColumns(collection);
-    if (columns && columns.length > 0) {
-      setCurrentStep('columns');
+  const handleCollectionToggle = async (collection: string) => {
+    if (selectedCollections.includes(collection)) {
+      // Deselect collection
+      setSelectedCollections(prev => prev.filter(c => c !== collection));
+      setCollectionColumns(prev => {
+        const newCols = { ...prev };
+        delete newCols[collection];
+        return newCols;
+      });
+      setSelectedColumns(prev => {
+        const newSelected = { ...prev };
+        delete newSelected[collection];
+        return newSelected;
+      });
+    } else {
+      // Select collection and fetch its columns
+      setSelectedCollections(prev => [...prev, collection]);
+      await handleFetchColumns(collection);
     }
   };
 
-  const handleColumnToggle = (column: string, category: keyof ColumnSelection) => {
-    setColumnSelection((prev) => {
-      const currentColumns = prev[category];
-      const isSelected = currentColumns.includes(column);
+  const handleColumnToggle = (collection: string, column: string) => {
+    setSelectedColumns(prev => {
+      const collectionCols = prev[collection] || [];
+      const isSelected = collectionCols.includes(column);
       
       return {
         ...prev,
-        [category]: isSelected
-          ? currentColumns.filter((c) => c !== column)
-          : [...currentColumns, column],
+        [collection]: isSelected
+          ? collectionCols.filter(c => c !== column)
+          : [...collectionCols, column],
       };
     });
   };
 
-  const handleSave = () => {
+  const handleNextToColumns = () => {
+    if (selectedCollections.length > 0) {
+      setCurrentStep('columns');
+    } else {
+      setConnectionError('Please select at least one collection.');
+    }
+  };
+
+  const handleSave = async () => {
+    // Combine all selected columns from all collections
+    const allQueryColumns: string[] = [];
+    const collections: CollectionColumnMapping[] = [];
+
+    selectedCollections.forEach(collection => {
+      const columns = selectedColumns[collection] || [];
+      if (columns.length > 0) {
+        allQueryColumns.push(...columns);
+        collections.push({
+          collection,
+          columns,
+        });
+      }
+    });
+
     const config: DatabaseConfig = {
       connection,
-      columnSelection,
+      columnSelection: {
+        embeddingColumns: allQueryColumns,
+        llmColumns: [],
+        chromaColumns: [],
+      },
+      collections,
     };
     
+    // Save configuration first
     if (onSave) {
       onSave(config);
     }
-    
-    setIsModalOpen(false);
-    setCurrentStep('connection');
-    setConnectionError(null);
+
+    // Then process embeddings if handler is provided
+    if (onProcessEmbeddings) {
+      setCurrentStep('processing');
+      setIsProcessing(true);
+      setProcessingStatus('Fetching data from database...');
+      setProcessingError(null);
+
+      try {
+        // Simulate progress updates
+        setTimeout(() => setProcessingStatus('Converting data to embeddings...'), 1000);
+        
+        const result = await onProcessEmbeddings(config);
+        
+        if (result.success) {
+          setProcessingStatus('Storing embeddings in vector database...');
+          setTimeout(() => {
+            setProcessingStatus('✓ Successfully processed embeddings and stored in vector database!');
+            setTimeout(() => {
+              setIsModalOpen(false);
+              setCurrentStep('connection');
+              setConnectionError(null);
+              setIsProcessing(false);
+              setProcessingStatus('');
+              handleClose();
+            }, 2000);
+          }, 500);
+        } else {
+          setProcessingError(result.message || 'Failed to process embeddings');
+          setIsProcessing(false);
+        }
+      } catch (error: any) {
+        setProcessingError(error.message || 'An error occurred while processing embeddings');
+        setIsProcessing(false);
+      }
+    } else {
+      // If no processing handler, try default API endpoint
+      setCurrentStep('processing');
+      setIsProcessing(true);
+      setProcessingStatus('Fetching data from database...');
+      setProcessingError(null);
+
+      try {
+        const response = await fetch('/api/database/process-embeddings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(config),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP ${response.status}`);
+        }
+
+        setProcessingStatus('Converting data to embeddings...');
+        const data = await response.json();
+        
+        if (data.success) {
+          setProcessingStatus('Storing embeddings in vector database...');
+          setTimeout(() => {
+            setProcessingStatus('✓ Successfully processed embeddings and stored in vector database!');
+            setTimeout(() => {
+              setIsModalOpen(false);
+              setCurrentStep('connection');
+              setConnectionError(null);
+              setIsProcessing(false);
+              setProcessingStatus('');
+              handleClose();
+            }, 2000);
+          }, 500);
+        } else {
+          setProcessingError(data.message || 'Failed to process embeddings');
+          setIsProcessing(false);
+        }
+      } catch (error: any) {
+        if (error.message?.includes('Failed to fetch') || error.message?.includes('404')) {
+          // If endpoint doesn't exist, just close modal
+          setIsModalOpen(false);
+          setCurrentStep('connection');
+          setConnectionError(null);
+        } else {
+          setProcessingError(error.message || 'An error occurred while processing embeddings');
+          setIsProcessing(false);
+        }
+      }
+    }
   };
 
   const handleClose = () => {
@@ -289,13 +413,9 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     setConnectionError(null);
     setConnectionSuccess(false);
     setAvailableCollections([]);
-    setSelectedCollection('');
-    setAvailableColumns([]);
-    setColumnSelection({
-      embeddingColumns: [],
-      llmColumns: [],
-      chromaColumns: [],
-    });
+    setSelectedCollections([]);
+    setCollectionColumns({});
+    setSelectedColumns({});
   };
 
   return (
@@ -312,13 +432,14 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
 
       {isModalOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-          <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] overflow-hidden flex flex-col">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
             {/* Header */}
             <div className="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
               <h2 className="text-lg font-semibold text-gray-900">
                 {currentStep === 'connection' && 'Database Connection'}
-                {currentStep === 'collection' && 'Select Collection'}
-                {currentStep === 'columns' && 'Configure Columns'}
+                {currentStep === 'collection' && 'Select Collections'}
+                {currentStep === 'columns' && 'Select Query Columns'}
+                {currentStep === 'processing' && 'Processing Embeddings'}
               </h2>
               <button
                 onClick={handleClose}
@@ -485,24 +606,51 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
               {currentStep === 'collection' && (
                 <div className="space-y-4">
                   <div>
-                    <p className="text-sm text-gray-600 mb-4">Select a collection to configure for embeddings:</p>
+                    <p className="text-sm text-gray-600 mb-4">Select one or more collections to configure for embeddings:</p>
                     {isLoadingCollections ? (
                       <div className="flex items-center justify-center py-8">
                         <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                       </div>
                     ) : (
-                      <select
-                        value={selectedCollection}
-                        onChange={(e) => handleCollectionSelect(e.target.value)}
-                        className="w-full px-3 py-2.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
-                      >
-                        <option value="">Select a collection...</option>
-                        {availableCollections.map((collection) => (
-                          <option key={collection} value={collection}>
-                            {collection}
-                          </option>
-                        ))}
-                      </select>
+                      <div className="space-y-2 max-h-96 overflow-y-auto border border-gray-200 rounded-lg p-3 bg-gray-50/50">
+                        {availableCollections.map((collection) => {
+                          const isSelected = selectedCollections.includes(collection);
+                          const isLoading = loadingColumnsFor.includes(collection);
+                          const hasColumns = collectionColumns[collection]?.length > 0;
+
+                          return (
+                            <label
+                              key={collection}
+                              className="flex items-center gap-3 cursor-pointer hover:bg-white p-3 rounded-lg border border-gray-200 transition-colors"
+                            >
+                              <input
+                                type="checkbox"
+                                checked={isSelected}
+                                onChange={() => handleCollectionToggle(collection)}
+                                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                              />
+                              <div className="flex-1">
+                                <span className="text-sm font-medium text-gray-900">{collection}</span>
+                                {isLoading && (
+                                  <span className="ml-2 text-xs text-gray-500">Loading columns...</span>
+                                )}
+                                {hasColumns && !isLoading && (
+                                  <span className="ml-2 text-xs text-green-600">
+                                    ({collectionColumns[collection].length} columns)
+                                  </span>
+                                )}
+                              </div>
+                            </label>
+                          );
+                        })}
+                      </div>
+                    )}
+                    {selectedCollections.length > 0 && (
+                      <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                        <p className="text-sm text-blue-700">
+                          {selectedCollections.length} collection{selectedCollections.length !== 1 ? 's' : ''} selected
+                        </p>
+                      </div>
                     )}
                   </div>
                   {connectionError && (
@@ -514,46 +662,56 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
               )}
 
               {currentStep === 'columns' && (
-                <div className="space-y-5">
+                <div className="space-y-6">
                   <div>
-                    <p className="text-sm text-gray-600 mb-1">Collection: <span className="font-medium text-gray-900">{selectedCollection}</span></p>
-                    <p className="text-xs text-gray-500">Select columns for embeddings</p>
+                    <p className="text-sm text-gray-600 mb-1">
+                      Select columns that the chatbot will query from {selectedCollections.length} collection{selectedCollections.length !== 1 ? 's' : ''}:
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      These columns will be used to fetch data, convert to embeddings, and store in vector database
+                    </p>
                   </div>
 
-                  {isLoadingColumns ? (
-                    <div className="flex items-center justify-center py-8">
-                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-                    </div>
-                  ) : availableColumns.length === 0 ? (
-                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
-                      <p className="text-sm text-yellow-700">No columns found.</p>
-                    </div>
-                  ) : (
-                    <div>
-                      <label className="block text-sm font-medium text-gray-700 mb-3">Embedding Columns</label>
-                      <div className="space-y-2 max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-3 bg-gray-50/50">
-                        {availableColumns.map((column) => (
-                          <label
-                            key={column}
-                            className="flex items-center gap-2 cursor-pointer hover:bg-white p-2 rounded transition-colors"
-                          >
-                            <input
-                              type="checkbox"
-                              checked={columnSelection.embeddingColumns.includes(column)}
-                              onChange={() => handleColumnToggle(column, 'embeddingColumns')}
-                              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                            />
-                            <span className="text-sm text-gray-700">{column}</span>
-                          </label>
-                        ))}
+                  {selectedCollections.map((collection) => {
+                    const columns = collectionColumns[collection] || [];
+                    const selectedCols = selectedColumns[collection] || [];
+
+                    return (
+                      <div key={collection} className="border border-gray-200 rounded-lg p-4 bg-gray-50/50">
+                        <div className="mb-3">
+                          <h3 className="text-sm font-semibold text-gray-900 mb-1">{collection}</h3>
+                          <p className="text-xs text-gray-500">
+                            {columns.length} column{columns.length !== 1 ? 's' : ''} available
+                            {selectedCols.length > 0 && (
+                              <span className="text-green-600 ml-2">
+                                • {selectedCols.length} selected
+                              </span>
+                            )}
+                          </p>
+                        </div>
+                        {columns.length > 0 ? (
+                          <div className="space-y-2 max-h-48 overflow-y-auto">
+                            {columns.map((column) => (
+                              <label
+                                key={column}
+                                className="flex items-center gap-2 cursor-pointer hover:bg-white p-2 rounded transition-colors"
+                              >
+                                <input
+                                  type="checkbox"
+                                  checked={selectedCols.includes(column)}
+                                  onChange={() => handleColumnToggle(collection, column)}
+                                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                                />
+                                <span className="text-sm text-gray-700">{column}</span>
+                              </label>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-sm text-gray-500">No columns available</p>
+                        )}
                       </div>
-                      {columnSelection.embeddingColumns.length > 0 && (
-                        <p className="text-xs text-green-600 mt-2">
-                          {columnSelection.embeddingColumns.length} column{columnSelection.embeddingColumns.length !== 1 ? 's' : ''} selected
-                        </p>
-                      )}
-                    </div>
-                  )}
+                    );
+                  })}
 
                   {connectionError && (
                     <div className="bg-red-50 border border-red-200 rounded-lg p-3">
@@ -562,22 +720,55 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
                   )}
                 </div>
               )}
+
+              {currentStep === 'processing' && (
+                <div className="space-y-6">
+                  <div className="flex flex-col items-center justify-center py-12">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
+                    <p className="text-sm font-medium text-gray-900 mb-2">Processing Embeddings</p>
+                    <p className="text-xs text-gray-600 text-center max-w-sm">{processingStatus}</p>
+                    
+                    {processingStatus && (
+                      <div className="mt-4 w-full max-w-sm">
+                        <div className="flex items-center gap-2 text-xs text-gray-500">
+                          <div className="flex-1 h-1 bg-gray-200 rounded-full overflow-hidden">
+                            <div className="h-full bg-blue-600 rounded-full animate-pulse" style={{ width: '60%' }}></div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {processingError && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+                      <p className="text-sm text-red-700 mb-2">Error processing embeddings:</p>
+                      <p className="text-xs text-red-600">{processingError}</p>
+                    </div>
+                  )}
+
+                  {processingStatus.includes('✓') && (
+                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+                      <p className="text-sm text-green-700">{processingStatus}</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
 
             {/* Footer */}
             <div className="px-6 py-4 border-t border-gray-100 bg-gray-50/50 flex items-center justify-between">
               <button
-                onClick={currentStep === 'connection' ? handleClose : () => {
+                onClick={currentStep === 'connection' ? handleClose : currentStep === 'processing' ? undefined : () => {
                   if (currentStep === 'columns') {
                     setCurrentStep('collection');
-                    setAvailableColumns([]);
                   } else {
                     setCurrentStep('connection');
                   }
                 }}
-                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+                disabled={currentStep === 'processing'}
+                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                {currentStep === 'connection' ? 'Cancel' : 'Back'}
+                {currentStep === 'connection' ? 'Cancel' : currentStep === 'processing' ? 'Processing...' : 'Back'}
               </button>
               <div className="flex gap-3">
                 {currentStep === 'connection' && (
@@ -590,13 +781,30 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
                     {isConnecting ? 'Connecting...' : 'Connect'}
                   </button>
                 )}
+                {currentStep === 'collection' && (
+                  <button
+                    onClick={handleNextToColumns}
+                    disabled={selectedCollections.length === 0}
+                    className="px-6 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  >
+                    Next
+                  </button>
+                )}
                 {currentStep === 'columns' && (
                   <button
                     onClick={handleSave}
-                    disabled={columnSelection.embeddingColumns.length === 0}
+                    disabled={Object.values(selectedColumns).every(cols => cols.length === 0)}
                     className="px-6 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                   >
-                    Save Configuration
+                    Save & Process
+                  </button>
+                )}
+                {currentStep === 'processing' && processingError && (
+                  <button
+                    onClick={() => setCurrentStep('columns')}
+                    className="px-6 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors"
+                  >
+                    Go Back
                   </button>
                 )}
               </div>

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, 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.3.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"
   },

package/types/admin.ts

@@ -17,9 +17,15 @@ export interface ColumnSelection {
   chromaColumns: string[];
 }
 
+export interface CollectionColumnMapping {
+  collection: string;
+  columns: string[];
+}
+
 export interface DatabaseConfig {
   connection: DatabaseConnection;
   columnSelection: ColumnSelection;
+  collections?: CollectionColumnMapping[]; // Optional: for multiple collections
 }
 
 export interface AdminSetupProps {
@@ -27,6 +33,7 @@ export interface AdminSetupProps {
   onTestConnection?: (connection: DatabaseConnection) => Promise<boolean>;
   onFetchCollections?: (connection: DatabaseConnection) => Promise<string[]>; // For MongoDB collections or PostgreSQL tables
   onFetchColumns?: (connection: DatabaseConnection, collection?: string) => Promise<string[]>; // collection/table name optional
+  onProcessEmbeddings?: (config: DatabaseConfig) => Promise<{ success: boolean; message?: string }>; // Process: fetch data -> convert to embeddings -> store in vector DB
 }
 
 // Backend request format

package/utils/connectionHelpers.ts

@@ -1,40 +1,40 @@
-import { DatabaseConnection, DatabaseType } from '../types/admin';
-
-export interface BackendConnectionRequest {
-  databaseType: 'mongodb' | 'postgresql';
-  connection: Omit<DatabaseConnection, 'type'>;
-}
-
-/**
- * Normalizes connection data with defaults
- */
-export function normalizeConnection(
-  connection: DatabaseConnection,
-  dbType: DatabaseType
-): DatabaseConnection {
-  return {
-    ...connection,
-    port: connection.port || (dbType === 'mongodb' ? 27017 : 5432),
-    host: connection.host || 'localhost',
-    database: connection.database || '',
-  };
-}
-
-/**
- * Transforms DatabaseConnection to backend format
- */
-export function transformConnectionForBackend(
-  connection: DatabaseConnection,
-  dbType: DatabaseType
-): BackendConnectionRequest {
-  const normalized = normalizeConnection(connection, dbType);
-  
-  const backendConnection = { ...normalized };
-  // Remove type from connection object
-  delete (backendConnection as any).type;
-
-  return {
-    databaseType: dbType === 'postgres' ? 'postgresql' : 'mongodb',
-    connection: backendConnection,
-  };
-}
+import { DatabaseConnection, DatabaseType } from '../types/admin';
+
+export interface BackendConnectionRequest {
+  databaseType: 'mongodb' | 'postgresql';
+  connection: Omit<DatabaseConnection, 'type'>;
+}
+
+/**
+ * Normalizes connection data with defaults
+ */
+export function normalizeConnection(
+  connection: DatabaseConnection,
+  dbType: DatabaseType
+): DatabaseConnection {
+  return {
+    ...connection,
+    port: connection.port || (dbType === 'mongodb' ? 27017 : 5432),
+    host: connection.host || 'localhost',
+    database: connection.database || '',
+  };
+}
+
+/**
+ * Transforms DatabaseConnection to backend format
+ */
+export function transformConnectionForBackend(
+  connection: DatabaseConnection,
+  dbType: DatabaseType
+): BackendConnectionRequest {
+  const normalized = normalizeConnection(connection, dbType);
+  
+  const backendConnection = { ...normalized };
+  // Remove type from connection object
+  delete (backendConnection as any).type;
+
+  return {
+    databaseType: dbType === 'postgres' ? 'postgresql' : 'mongodb',
+    connection: backendConnection,
+  };
+}