nextjs-chatbot-ui 1.2.0 → 1.4.0

package/components/AdminSetup.tsx

@@ -1,22 +1,31 @@
 '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';
 
 const AdminSetup: React.FC<AdminSetupProps> = ({
   onSave,
   onTestConnection,
+  onFetchCollections,
   onFetchColumns,
+  onProcessEmbeddings,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentStep, setCurrentStep] = useState<'connection' | '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 [availableColumns, setAvailableColumns] = useState<string[]>([]);
-  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [availableCollections, setAvailableCollections] = 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 [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>({
@@ -30,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({
@@ -60,41 +63,31 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     setConnectionSuccess(false);
 
     try {
-      // Ensure default ports are set
       const normalizedConnection = normalizeConnection(connection, dbType);
-
-      // Transform to backend format
       const backendRequest = transformConnectionForBackend(connection, dbType);
 
       let isValid: boolean;
 
       if (onTestConnection) {
-        // Use provided handler - send normalized connection
         isValid = await onTestConnection(normalizedConnection);
       } else {
-        // Default: Try to call backend API
         try {
           const response = await fetch('/api/database/test', {
             method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(backendRequest), // Send transformed format
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(backendRequest),
           });
 
           if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+            throw new Error(errorData.message || `HTTP ${response.status}`);
           }
 
           const data = await response.json();
           isValid = data.success === true || response.ok;
         } catch (fetchError: any) {
-          // If API endpoint doesn't exist, show helpful error
           if (fetchError.message?.includes('Failed to fetch') || fetchError.message?.includes('404')) {
-            throw new Error(
-              'Backend API endpoint not found. Please implement POST /api/database/test endpoint or provide onTestConnection handler.'
-            );
+            throw new Error('Backend API endpoint not found. Please implement POST /api/database/test endpoint.');
           }
           throw fetchError;
         }
@@ -105,13 +98,12 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
         setConnectionSuccess(true);
         return true;
       } else {
-        setConnectionError('Connection failed. Please check your credentials and try again.');
+        setConnectionError('Connection failed. Please check your credentials.');
         setConnectionSuccess(false);
         return false;
       }
     } catch (error: any) {
-      const errorMessage = error.message || 'Connection failed. Please try again.';
-      setConnectionError(errorMessage);
+      setConnectionError(error.message || 'Connection failed. Please try again.');
       setConnectionSuccess(false);
       console.error('Database connection error:', error);
       return false;
@@ -120,138 +112,299 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     }
   };
 
-  const handleFetchColumns = async (): Promise<string[]> => {
-    setIsLoadingColumns(true);
+  const handleFetchCollections = async (): Promise<string[]> => {
+    setIsLoadingCollections(true);
     setConnectionError(null);
     
     try {
-      // Ensure default ports are set
       const normalizedConnection = normalizeConnection(connection, dbType);
+      const backendRequest = transformConnectionForBackend(connection, dbType);
+
+      let collections: string[];
+
+      if (onFetchCollections) {
+        collections = await onFetchCollections(normalizedConnection);
+      } else {
+        try {
+          const response = await fetch('/api/database/collections', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(backendRequest),
+          });
+
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP ${response.status}`);
+          }
+
+          const data = await response.json();
+          collections = data.collections || data.tables || data.columnNames || [];
+        } catch (fetchError: any) {
+          if (fetchError.message?.includes('Failed to fetch') || fetchError.message?.includes('404')) {
+            throw new Error('Backend API endpoint not found. Please implement POST /api/database/collections endpoint.');
+          }
+          throw fetchError;
+        }
+      }
+
+      if (collections && collections.length > 0) {
+        setAvailableCollections(collections);
+        setIsLoadingCollections(false);
+        return collections;
+      } else {
+        setConnectionError('No collections found in the database.');
+        setIsLoadingCollections(false);
+        return [];
+      }
+    } catch (error: any) {
+      setConnectionError(error.message || 'Failed to fetch collections.');
+      setIsLoadingCollections(false);
+      console.error('Fetch collections error:', error);
+      return [];
+    }
+  };
 
-      // Transform to backend format
+  const handleFetchColumns = async (collectionName: string): Promise<string[]> => {
+    setLoadingColumnsFor(prev => [...prev, collectionName]);
+    setConnectionError(null);
+    
+    try {
+      const normalizedConnection = normalizeConnection(connection, dbType);
       const backendRequest = transformConnectionForBackend(connection, dbType);
 
       let columns: string[];
 
       if (onFetchColumns) {
-        // Use provided handler
-        columns = await onFetchColumns(normalizedConnection);
+        columns = await onFetchColumns(normalizedConnection, collectionName);
       } else {
-        // Default: Try to call backend API
         try {
           const response = await fetch('/api/database/columns', {
             method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(backendRequest), // Send transformed format
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              ...backendRequest,
+              collection: collectionName,
+            }),
           });
 
           if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
-            throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+            throw new Error(errorData.message || `HTTP ${response.status}`);
           }
 
           const data = await response.json();
           columns = data.columns || data.columnNames || [];
         } catch (fetchError: any) {
-          // If API endpoint doesn't exist, show helpful error
           if (fetchError.message?.includes('Failed to fetch') || fetchError.message?.includes('404')) {
-            throw new Error(
-              'Backend API endpoint not found. Please implement POST /api/database/columns endpoint or provide onFetchColumns handler.'
-            );
+            throw new Error('Backend API endpoint not found. Please implement POST /api/database/columns endpoint.');
           }
           throw fetchError;
         }
       }
 
       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 database. Please check your database connection and table selection.');
-        setIsLoadingColumns(false);
+        setConnectionError(`No columns found in ${collectionName}.`);
+        setLoadingColumnsFor(prev => prev.filter(c => c !== collectionName));
         return [];
       }
     } catch (error: any) {
-      const errorMessage = error.message || 'Failed to fetch columns. Please try again.';
-      setConnectionError(errorMessage);
-      setIsLoadingColumns(false);
+      setConnectionError(error.message || 'Failed to fetch columns.');
+      setLoadingColumnsFor(prev => prev.filter(c => c !== collectionName));
       console.error('Fetch columns error:', error);
       return [];
     }
   };
 
-  const handleConnectAndNext = async () => {
-    // Validate connection fields
+  const handleConnect = async () => {
     if (dbType === 'mongodb') {
       if (!connection.connectionString && (!connection.host || !connection.database)) {
         setConnectionError('Please provide connection string or host and database');
-        setConnectionSuccess(false);
         return;
       }
     } else {
       if (!connection.host || !connection.database || !connection.username || !connection.password) {
         setConnectionError('Please fill in all required fields');
-        setConnectionSuccess(false);
         return;
       }
     }
 
-    // Clear previous errors
     setConnectionError(null);
     setConnectionSuccess(false);
 
-    // Test connection first
     const connectionSuccess = await handleTestConnection();
     
-    if (!connectionSuccess) {
-      // Connection failed, don't proceed
-      return;
+    if (connectionSuccess) {
+      const collections = await handleFetchCollections();
+      if (collections && collections.length > 0) {
+        setCurrentStep('collection');
+      }
     }
+  };
 
-    // If connection successful, fetch columns
-    const fetchedColumns = await handleFetchColumns();
-    
-    if (fetchedColumns && fetchedColumns.length > 0) {
-      // Successfully fetched columns, move to next step
-      setCurrentStep('columns');
-      setConnectionError(null);
+  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 {
-      // Column fetching failed, show error but keep connection success
-      // Error is already set in handleFetchColumns
+      // 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);
     }
-    
-    // Close modal and reset
-    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 = () => {
@@ -259,125 +412,74 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     setCurrentStep('connection');
     setConnectionError(null);
     setConnectionSuccess(false);
-    setAvailableColumns([]);
-    setColumnSelection({
-      embeddingColumns: [],
-      llmColumns: [],
-      chromaColumns: [],
-    });
+    setAvailableCollections([]);
+    setSelectedCollections([]);
+    setCollectionColumns({});
+    setSelectedColumns({});
   };
 
   return (
     <>
-      {/* Sidebar Button/Item - This can be integrated into admin sidebar */}
       <button
         onClick={() => setIsModalOpen(true)}
-        className="w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-gray-100 rounded-lg transition-colors"
+        className="w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-gray-50 rounded-lg transition-colors text-sm text-gray-700"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-5 w-5 text-gray-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
-          />
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
         </svg>
-        <span className="text-sm font-medium text-gray-700">Database Setup</span>
+        <span className="font-medium">Database Setup</span>
       </button>
 
-      {/* Modal */}
       {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
-            {/* Modal Header */}
-            <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
-              <h2 className="text-xl font-semibold text-gray-900">
-                {currentStep === 'connection' ? 'Database Connection' : 'Select Columns'}
+        <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-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 Collections'}
+                {currentStep === 'columns' && 'Select Query Columns'}
+                {currentStep === 'processing' && 'Processing Embeddings'}
               </h2>
               <button
                 onClick={handleClose}
-                className="text-gray-400 hover:text-gray-600 transition-colors"
+                className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
             </div>
 
-            {/* Modal Content */}
-            <div className="flex-1 overflow-y-auto px-6 py-4">
-              {currentStep === 'connection' ? (
-                <div className="space-y-6">
-                  {/* Database Type Selection */}
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto px-6 py-6">
+              {currentStep === 'connection' && (
+                <div className="space-y-5">
+                  {/* Database Type */}
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-3">
-                      Database Type
-                    </label>
-                    <div className="grid grid-cols-2 gap-4">
+                    <label className="block text-sm font-medium text-gray-700 mb-2">Database Type</label>
+                    <div className="flex gap-3">
                       <button
                         onClick={() => handleDbTypeChange('mongodb')}
                         className={clsx(
-                          'p-4 border-2 rounded-lg transition-all text-left',
+                          'flex-1 px-4 py-3 rounded-lg border-2 transition-all text-sm font-medium',
                           dbType === 'mongodb'
-                            ? 'border-blue-500 bg-blue-50'
-                            : 'border-gray-200 hover:border-gray-300'
+                            ? 'border-blue-500 bg-blue-50 text-blue-700'
+                            : 'border-gray-200 text-gray-700 hover:border-gray-300'
                         )}
                       >
-                        <div className="flex items-center gap-3">
-                          <div className={clsx(
-                            'w-5 h-5 rounded-full border-2 flex items-center justify-center',
-                            dbType === 'mongodb' ? 'border-blue-500' : 'border-gray-300'
-                          )}>
-                            {dbType === 'mongodb' && (
-                              <div className="w-3 h-3 rounded-full bg-blue-500" />
-                            )}
-                          </div>
-                          <div>
-                            <div className="font-semibold text-gray-900">MongoDB</div>
-                            <div className="text-xs text-gray-500">NoSQL Database</div>
-                          </div>
-                        </div>
+                        MongoDB
                       </button>
                       <button
                         onClick={() => handleDbTypeChange('postgres')}
                         className={clsx(
-                          'p-4 border-2 rounded-lg transition-all text-left',
+                          'flex-1 px-4 py-3 rounded-lg border-2 transition-all text-sm font-medium',
                           dbType === 'postgres'
-                            ? 'border-blue-500 bg-blue-50'
-                            : 'border-gray-200 hover:border-gray-300'
+                            ? 'border-blue-500 bg-blue-50 text-blue-700'
+                            : 'border-gray-200 text-gray-700 hover:border-gray-300'
                         )}
                       >
-                        <div className="flex items-center gap-3">
-                          <div className={clsx(
-                            'w-5 h-5 rounded-full border-2 flex items-center justify-center',
-                            dbType === 'postgres' ? 'border-blue-500' : 'border-gray-300'
-                          )}>
-                            {dbType === 'postgres' && (
-                              <div className="w-3 h-3 rounded-full bg-blue-500" />
-                            )}
-                          </div>
-                          <div>
-                            <div className="font-semibold text-gray-900">PostgreSQL</div>
-                            <div className="text-xs text-gray-500">SQL Database</div>
-                          </div>
-                        </div>
+                        PostgreSQL
                       </button>
                     </div>
                   </div>
@@ -386,320 +488,323 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
                   {dbType === 'mongodb' ? (
                     <div className="space-y-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Connection String (Recommended)
-                        </label>
+                        <label className="block text-sm font-medium text-gray-700 mb-1.5">Connection String</label>
                         <input
                           type="text"
                           value={connection.connectionString || ''}
                           onChange={(e) => handleConnectionChange('connectionString', e.target.value)}
-                          placeholder="mongodb://username:password@host:port/database"
-                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="mongodb://host:port/database"
+                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                         />
-                        <p className="mt-1 text-xs text-gray-500">
-                          Or fill individual fields below
-                        </p>
                       </div>
-                      <div className="border-t border-gray-200 pt-4">
-                        <div className="grid grid-cols-2 gap-4">
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                              Host *
-                            </label>
-                            <input
-                              type="text"
-                              value={connection.host}
-                              onChange={(e) => handleConnectionChange('host', e.target.value)}
-                              placeholder="localhost"
-                              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                            />
-                          </div>
-                          <div>
-                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                              Port *
-                            </label>
-                            <input
-                              type="number"
-                              value={connection.port}
-                              onChange={(e) => handleConnectionChange('port', parseInt(e.target.value) || 27017)}
-                              placeholder="27017"
-                              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                            />
-                          </div>
-                        </div>
-                        <div className="mt-4">
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Database Name *
-                          </label>
+                      <div className="text-xs text-gray-500 text-center">or</div>
+                      <div className="grid grid-cols-2 gap-3">
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Host</label>
                           <input
                             type="text"
-                            value={connection.database}
-                            onChange={(e) => handleConnectionChange('database', e.target.value)}
-                            placeholder="my_database"
-                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            value={connection.host}
+                            onChange={(e) => handleConnectionChange('host', e.target.value)}
+                            placeholder="localhost"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           />
                         </div>
-                        <div className="mt-4">
-                          <label className="flex items-center gap-2">
-                            <input
-                              type="checkbox"
-                              checked={connection.ssl || false}
-                              onChange={(e) => handleConnectionChange('ssl', e.target.checked)}
-                              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                            />
-                            <span className="text-sm text-gray-700">Enable SSL</span>
-                          </label>
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Port</label>
+                          <input
+                            type="number"
+                            value={connection.port}
+                            onChange={(e) => handleConnectionChange('port', parseInt(e.target.value) || 27017)}
+                            placeholder="27017"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                          />
                         </div>
                       </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-1.5">Database</label>
+                        <input
+                          type="text"
+                          value={connection.database}
+                          onChange={(e) => handleConnectionChange('database', e.target.value)}
+                          placeholder="database_name"
+                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        />
+                      </div>
                     </div>
                   ) : (
                     <div className="space-y-4">
-                      <div className="grid grid-cols-2 gap-4">
+                      <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Host *
-                          </label>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Host</label>
                           <input
                             type="text"
                             value={connection.host}
                             onChange={(e) => handleConnectionChange('host', e.target.value)}
                             placeholder="localhost"
-                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           />
                         </div>
                         <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Port *
-                          </label>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Port</label>
                           <input
                             type="number"
                             value={connection.port}
                             onChange={(e) => handleConnectionChange('port', parseInt(e.target.value) || 5432)}
                             placeholder="5432"
-                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           />
                         </div>
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Database Name *
-                        </label>
+                        <label className="block text-sm font-medium text-gray-700 mb-1.5">Database</label>
                         <input
                           type="text"
                           value={connection.database}
                           onChange={(e) => handleConnectionChange('database', e.target.value)}
-                          placeholder="my_database"
-                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          placeholder="database_name"
+                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                       </div>
-                      <div className="grid grid-cols-2 gap-4">
+                      <div className="grid grid-cols-2 gap-3">
                         <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Username *
-                          </label>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Username</label>
                           <input
                             type="text"
                             value={connection.username || ''}
                             onChange={(e) => handleConnectionChange('username', e.target.value)}
-                            placeholder="postgres"
-                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            placeholder="username"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           />
                         </div>
                         <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            Password *
-                          </label>
+                          <label className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
                           <input
                             type="password"
                             value={connection.password || ''}
                             onChange={(e) => handleConnectionChange('password', e.target.value)}
-                            placeholder="••••••••"
-                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                            placeholder="••••••"
+                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                           />
                         </div>
                       </div>
-                      <div>
-                        <label className="flex items-center gap-2">
-                          <input
-                            type="checkbox"
-                            checked={connection.ssl || false}
-                            onChange={(e) => handleConnectionChange('ssl', e.target.checked)}
-                            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                          />
-                          <span className="text-sm text-gray-700">Enable SSL</span>
-                        </label>
-                      </div>
                     </div>
                   )}
 
                   {connectionError && (
-                    <div className="bg-red-50 border border-red-200 rounded-lg p-4">
-                      <p className="text-sm text-red-800">{connectionError}</p>
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="text-sm text-red-700">{connectionError}</p>
                     </div>
                   )}
                   {connectionSuccess && !connectionError && !isConnecting && (
-                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-                      <p className="text-sm text-green-800">✓ Connection successful!</p>
+                    <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                      <p className="text-sm text-green-700">✓ Connection successful</p>
                     </div>
                   )}
                 </div>
-              ) : (
-                <div className="space-y-6">
-                  {isLoadingColumns ? (
-                    <div className="flex flex-col items-center justify-center py-8">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3"></div>
-                      <p className="text-sm text-gray-600">Loading columns...</p>
-                    </div>
-                  ) : availableColumns.length === 0 ? (
-                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
-                      <p className="text-sm text-yellow-800">No columns available. Please go back and check your connection.</p>
-                    </div>
-                  ) : (
-                    <>
-                      <div>
-                        <p className="text-sm text-gray-600 mb-2">
-                          Select which columns to use for <strong>Embeddings</strong>, <strong>LLM processing</strong>, and <strong>ChromaDB storage</strong>.
-                        </p>
-                        <p className="text-xs text-gray-500 mb-4">
-                          Found {availableColumns.length} column{availableColumns.length !== 1 ? 's' : ''} in your database.
+              )}
+
+              {currentStep === 'collection' && (
+                <div className="space-y-4">
+                  <div>
+                    <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>
+                    ) : (
+                      <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 && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="text-sm text-red-700">{connectionError}</p>
+                    </div>
+                  )}
+                </div>
+              )}
 
-                      {/* Embedding Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Works with Embeddings
-                        </label>
-                        <p className="text-xs text-gray-500 mb-3">Select columns that will be used for embedding generation</p>
-                        <div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto border border-gray-200 rounded-lg p-3 bg-gray-50">
-                          {availableColumns.length === 0 ? (
-                            <p className="text-sm text-gray-500 col-span-2 text-center py-2">No columns available</p>
-                          ) : (
-                            availableColumns.map((column) => (
-                              <label
-                                key={`embedding-${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>
-                            ))
-                          )}
-                        </div>
-                        {columnSelection.embeddingColumns.length > 0 && (
-                          <p className="text-xs text-green-600 mt-1">
-                            {columnSelection.embeddingColumns.length} column{columnSelection.embeddingColumns.length !== 1 ? 's' : ''} selected
-                          </p>
-                        )}
-                      </div>
+              {currentStep === 'columns' && (
+                <div className="space-y-6">
+                  <div>
+                    <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>
 
-                      {/* LLM Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Works with LLM
-                        </label>
-                        <p className="text-xs text-gray-500 mb-3">Select columns that will be processed by the LLM</p>
-                        <div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto border border-gray-200 rounded-lg p-3 bg-gray-50">
-                          {availableColumns.length === 0 ? (
-                            <p className="text-sm text-gray-500 col-span-2 text-center py-2">No columns available</p>
-                          ) : (
-                            availableColumns.map((column) => (
+                  {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={`llm-${column}`}
+                                key={column}
                                 className="flex items-center gap-2 cursor-pointer hover:bg-white p-2 rounded transition-colors"
                               >
                                 <input
                                   type="checkbox"
-                                  checked={columnSelection.llmColumns.includes(column)}
-                                  onChange={() => handleColumnToggle(column, 'llmColumns')}
+                                  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>
-                        {columnSelection.llmColumns.length > 0 && (
-                          <p className="text-xs text-green-600 mt-1">
-                            {columnSelection.llmColumns.length} column{columnSelection.llmColumns.length !== 1 ? 's' : ''} selected
-                          </p>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-sm text-gray-500">No columns available</p>
                         )}
                       </div>
+                    );
+                  })}
 
-                      {/* ChromaDB Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Works with ChromaDB
-                        </label>
-                        <p className="text-xs text-gray-500 mb-3">Select columns that will be stored in ChromaDB</p>
-                        <div className="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto border border-gray-200 rounded-lg p-3 bg-gray-50">
-                          {availableColumns.length === 0 ? (
-                            <p className="text-sm text-gray-500 col-span-2 text-center py-2">No columns available</p>
-                          ) : (
-                            availableColumns.map((column) => (
-                              <label
-                                key={`chroma-${column}`}
-                                className="flex items-center gap-2 cursor-pointer hover:bg-white p-2 rounded transition-colors"
-                              >
-                                <input
-                                  type="checkbox"
-                                  checked={columnSelection.chromaColumns.includes(column)}
-                                  onChange={() => handleColumnToggle(column, 'chromaColumns')}
-                                  className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                                />
-                                <span className="text-sm text-gray-700">{column}</span>
-                              </label>
-                            ))
-                          )}
+                  {connectionError && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                      <p className="text-sm text-red-700">{connectionError}</p>
+                    </div>
+                  )}
+                </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>
-                        {columnSelection.chromaColumns.length > 0 && (
-                          <p className="text-xs text-green-600 mt-1">
-                            {columnSelection.chromaColumns.length} column{columnSelection.chromaColumns.length !== 1 ? 's' : ''} selected
-                          </p>
-                        )}
                       </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>
 
-            {/* Modal Footer */}
-            <div className="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
+            {/* Footer */}
+            <div className="px-6 py-4 border-t border-gray-100 bg-gray-50/50 flex items-center justify-between">
               <button
-                onClick={currentStep === 'columns' ? () => setCurrentStep('connection') : handleClose}
-                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
+                onClick={currentStep === 'connection' ? handleClose : currentStep === 'processing' ? undefined : () => {
+                  if (currentStep === 'columns') {
+                    setCurrentStep('collection');
+                  } else {
+                    setCurrentStep('connection');
+                  }
+                }}
+                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 === 'columns' ? 'Back' : 'Cancel'}
+                {currentStep === 'connection' ? 'Cancel' : currentStep === 'processing' ? 'Processing...' : 'Back'}
               </button>
               <div className="flex gap-3">
-                {currentStep === 'connection' ? (
+                {currentStep === 'connection' && (
                   <button
-                    onClick={handleConnectAndNext}
-                    disabled={isConnecting || isLoadingColumns}
+                    onClick={handleConnect}
+                    disabled={isConnecting || isLoadingCollections}
                     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 flex items-center gap-2"
                   >
-                    {isConnecting && (
-                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
-                    )}
-                    {isLoadingColumns ? 'Loading Columns...' : isConnecting ? 'Connecting...' : 'Connect & Next'}
+                    {isConnecting && <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>}
+                    {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 &&
-                      columnSelection.llmColumns.length === 0 &&
-                      columnSelection.chromaColumns.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/index.tsx

@@ -2,4 +2,4 @@ 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 type { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, CollectionColumnMapping, AdminSetupProps } from './types/admin';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextjs-chatbot-ui",
   
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
   "main": "./index.tsx",
   "module": "./index.tsx",

package/types/admin.ts

@@ -1,35 +1,43 @@
-export type DatabaseType = 'mongodb' | 'postgres';
-
-export interface DatabaseConnection {
-  type: DatabaseType;
-  host: string;
-  port: number;
-  database: string;
-  username?: string;
-  password?: string;
-  connectionString?: string; // For MongoDB connection string
-  ssl?: boolean;
-}
-
-export interface ColumnSelection {
-  embeddingColumns: string[];
-  llmColumns: string[];
-  chromaColumns: string[];
-}
-
-export interface DatabaseConfig {
-  connection: DatabaseConnection;
-  columnSelection: ColumnSelection;
-}
-
-export interface AdminSetupProps {
-  onSave?: (config: DatabaseConfig) => void;
-  onTestConnection?: (connection: DatabaseConnection) => Promise<boolean>;
-  onFetchColumns?: (connection: DatabaseConnection) => Promise<string[]>;
-}
-
-// Backend request format
-export interface BackendConnectionRequest {
-  databaseType: 'mongodb' | 'postgresql';
-  connection: Omit<DatabaseConnection, 'type'>;
+export type DatabaseType = 'mongodb' | 'postgres';
+
+export interface DatabaseConnection {
+  type: DatabaseType;
+  host: string;
+  port: number;
+  database: string;
+  username?: string;
+  password?: string;
+  connectionString?: string; // For MongoDB connection string
+  ssl?: boolean;
+}
+
+export interface ColumnSelection {
+  embeddingColumns: string[];
+  llmColumns: string[];
+  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 {
+  onSave?: (config: DatabaseConfig) => void;
+  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
+export interface BackendConnectionRequest {
+  databaseType: 'mongodb' | 'postgresql';
+  connection: Omit<DatabaseConnection, 'type'>;
 }