nextjs-chatbot-ui 1.1.0 → 1.1.2

package/components/AdminSetup.tsx

@@ -1,566 +1,701 @@
-'use client';
-
-import React, { useState } from 'react';
-import { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, AdminSetupProps } from '../types/admin';
-import clsx from 'clsx';
-
-const AdminSetup: React.FC<AdminSetupProps> = ({
-  onSave,
-  onTestConnection,
-  onFetchColumns,
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentStep, setCurrentStep] = useState<'connection' | 'columns'>('connection');
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [connectionError, setConnectionError] = useState<string | null>(null);
-  const [availableColumns, setAvailableColumns] = useState<string[]>([]);
-  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
-
-  const [dbType, setDbType] = useState<DatabaseType>('mongodb');
-  const [connection, setConnection] = useState<DatabaseConnection>({
-    type: 'mongodb',
-    host: '',
-    port: 27017,
-    database: '',
-    username: '',
-    password: '',
-    connectionString: '',
-    ssl: false,
-  });
-
-  const [columnSelection, setColumnSelection] = useState<ColumnSelection>({
-    embeddingColumns: [],
-    llmColumns: [],
-    chromaColumns: [],
-  });
-
-  const handleDbTypeChange = (type: DatabaseType) => {
-    setDbType(type);
-    setConnection({
-      ...connection,
-      type,
-      port: type === 'mongodb' ? 27017 : 5432,
-    });
-    setConnectionError(null);
-  };
-
-  const handleConnectionChange = (field: keyof DatabaseConnection, value: any) => {
-    setConnection({
-      ...connection,
-      [field]: value,
-    });
-    setConnectionError(null);
-  };
-
-  const handleTestConnection = async () => {
-    if (!onTestConnection) {
-      // Default test - just validate fields
-      if (!connection.host || !connection.database) {
-        setConnectionError('Please fill in all required fields');
-        return;
-      }
-      setConnectionError(null);
-      return;
-    }
-
-    setIsConnecting(true);
-    setConnectionError(null);
-
-    try {
-      const isValid = await onTestConnection(connection);
-      if (isValid) {
-        setConnectionError(null);
-        // Fetch columns after successful connection
-        await handleFetchColumns();
-      } else {
-        setConnectionError('Connection failed. Please check your credentials.');
-      }
-    } catch (error: any) {
-      setConnectionError(error.message || 'Connection failed. Please try again.');
-    } finally {
-      setIsConnecting(false);
-    }
-  };
-
-  const handleFetchColumns = async () => {
-    if (!onFetchColumns) {
-      // Mock columns for demo
-      setAvailableColumns(['id', 'title', 'content', 'description', 'category', 'tags', 'created_at', 'updated_at']);
-      setIsLoadingColumns(false);
-      return;
-    }
-
-    setIsLoadingColumns(true);
-    try {
-      const columns = await onFetchColumns(connection);
-      setAvailableColumns(columns);
-    } catch (error: any) {
-      setConnectionError(error.message || 'Failed to fetch columns');
-    } finally {
-      setIsLoadingColumns(false);
-    }
-  };
-
-  const handleConnectAndNext = async () => {
-    // Validate connection fields
-    if (dbType === 'mongodb') {
-      if (!connection.connectionString && (!connection.host || !connection.database)) {
-        setConnectionError('Please provide connection string or host and database');
-        return;
-      }
-    } else {
-      if (!connection.host || !connection.database || !connection.username || !connection.password) {
-        setConnectionError('Please fill in all required fields');
-        return;
-      }
-    }
-
-    // Test connection
-    await handleTestConnection();
-    
-    // If no error, move to next step
-    if (!connectionError) {
-      setCurrentStep('columns');
-    }
-  };
-
-  const handleColumnToggle = (column: string, category: keyof ColumnSelection) => {
-    setColumnSelection((prev) => {
-      const currentColumns = prev[category];
-      const isSelected = currentColumns.includes(column);
-      
-      return {
-        ...prev,
-        [category]: isSelected
-          ? currentColumns.filter((c) => c !== column)
-          : [...currentColumns, column],
-      };
-    });
-  };
-
-  const handleSave = () => {
-    const config: DatabaseConfig = {
-      connection,
-      columnSelection,
-    };
-    
-    if (onSave) {
-      onSave(config);
-    }
-    
-    // Close modal and reset
-    setIsModalOpen(false);
-    setCurrentStep('connection');
-    setConnectionError(null);
-  };
-
-  const handleClose = () => {
-    setIsModalOpen(false);
-    setCurrentStep('connection');
-    setConnectionError(null);
-    setColumnSelection({
-      embeddingColumns: [],
-      llmColumns: [],
-      chromaColumns: [],
-    });
-  };
-
-  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"
-      >
-        <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>
-        <span className="text-sm font-medium text-gray-700">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'}
-              </h2>
-              <button
-                onClick={handleClose}
-                className="text-gray-400 hover:text-gray-600 transition-colors"
-              >
-                <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>
-              </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 */}
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-3">
-                      Database Type
-                    </label>
-                    <div className="grid grid-cols-2 gap-4">
-                      <button
-                        onClick={() => handleDbTypeChange('mongodb')}
-                        className={clsx(
-                          'p-4 border-2 rounded-lg transition-all text-left',
-                          dbType === 'mongodb'
-                            ? 'border-blue-500 bg-blue-50'
-                            : 'border-gray-200 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>
-                      </button>
-                      <button
-                        onClick={() => handleDbTypeChange('postgres')}
-                        className={clsx(
-                          'p-4 border-2 rounded-lg transition-all text-left',
-                          dbType === 'postgres'
-                            ? 'border-blue-500 bg-blue-50'
-                            : 'border-gray-200 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>
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Connection Fields */}
-                  {dbType === 'mongodb' ? (
-                    <div className="space-y-4">
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Connection String (Recommended)
-                        </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"
-                        />
-                        <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>
-                          <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"
-                          />
-                        </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>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="space-y-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) || 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"
-                          />
-                        </div>
-                      </div>
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                          Database Name *
-                        </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"
-                        />
-                      </div>
-                      <div className="grid grid-cols-2 gap-4">
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            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"
-                          />
-                        </div>
-                        <div>
-                          <label className="block text-sm font-medium text-gray-700 mb-2">
-                            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"
-                          />
-                        </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>
-                  )}
-                </div>
-              ) : (
-                <div className="space-y-6">
-                  {isLoadingColumns ? (
-                    <div className="flex items-center justify-center py-8">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-                    </div>
-                  ) : (
-                    <>
-                      <div>
-                        <p className="text-sm text-gray-600 mb-4">
-                          Select which columns to use for embedding, LLM processing, and ChromaDB storage.
-                        </p>
-                      </div>
-
-                      {/* Embedding Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-3">
-                          Embedding Columns
-                        </label>
-                        <div className="grid grid-cols-2 gap-2 max-h-32 overflow-y-auto border border-gray-200 rounded-lg p-3">
-                          {availableColumns.map((column) => (
-                            <label
-                              key={`embedding-${column}`}
-                              className="flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-2 rounded"
-                            >
-                              <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>
-                      </div>
-
-                      {/* LLM Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-3">
-                          LLM Columns
-                        </label>
-                        <div className="grid grid-cols-2 gap-2 max-h-32 overflow-y-auto border border-gray-200 rounded-lg p-3">
-                          {availableColumns.map((column) => (
-                            <label
-                              key={`llm-${column}`}
-                              className="flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-2 rounded"
-                            >
-                              <input
-                                type="checkbox"
-                                checked={columnSelection.llmColumns.includes(column)}
-                                onChange={() => handleColumnToggle(column, 'llmColumns')}
-                                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                              />
-                              <span className="text-sm text-gray-700">{column}</span>
-                            </label>
-                          ))}
-                        </div>
-                      </div>
-
-                      {/* ChromaDB Columns */}
-                      <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-3">
-                          ChromaDB Columns
-                        </label>
-                        <div className="grid grid-cols-2 gap-2 max-h-32 overflow-y-auto border border-gray-200 rounded-lg p-3">
-                          {availableColumns.map((column) => (
-                            <label
-                              key={`chroma-${column}`}
-                              className="flex items-center gap-2 cursor-pointer hover:bg-gray-50 p-2 rounded"
-                            >
-                              <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>
-                          ))}
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-              )}
-            </div>
-
-            {/* Modal Footer */}
-            <div className="px-6 py-4 border-t border-gray-200 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"
-              >
-                {currentStep === 'columns' ? 'Back' : 'Cancel'}
-              </button>
-              <div className="flex gap-3">
-                {currentStep === 'connection' ? (
-                  <button
-                    onClick={handleConnectAndNext}
-                    disabled={isConnecting || isLoadingColumns}
-                    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"
-                  >
-                    {isConnecting ? 'Connecting...' : 'Connect & Next'}
-                  </button>
-                ) : (
-                  <button
-                    onClick={handleSave}
-                    disabled={
-                      columnSelection.embeddingColumns.length === 0 &&
-                      columnSelection.llmColumns.length === 0 &&
-                      columnSelection.chromaColumns.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
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default AdminSetup;
+'use client';
+
+import React, { useState } from 'react';
+import { DatabaseType, DatabaseConnection, ColumnSelection, DatabaseConfig, AdminSetupProps } from '../types/admin';
+import clsx from 'clsx';
+
+const AdminSetup: React.FC<AdminSetupProps> = ({
+  onSave,
+  onTestConnection,
+  onFetchColumns,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentStep, setCurrentStep] = useState<'connection' | 'columns'>('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 [dbType, setDbType] = useState<DatabaseType>('mongodb');
+  const [connection, setConnection] = useState<DatabaseConnection>({
+    type: 'mongodb',
+    host: '',
+    port: 27017,
+    database: '',
+    username: '',
+    password: '',
+    connectionString: '',
+    ssl: false,
+  });
+
+  const [columnSelection, setColumnSelection] = useState<ColumnSelection>({
+    embeddingColumns: [],
+    llmColumns: [],
+    chromaColumns: [],
+  });
+
+  const handleDbTypeChange = (type: DatabaseType) => {
+    setDbType(type);
+    setConnection({
+      ...connection,
+      type,
+      port: type === 'mongodb' ? 27017 : 5432,
+    });
+    setConnectionError(null);
+  };
+
+  const handleConnectionChange = (field: keyof DatabaseConnection, value: any) => {
+    setConnection({
+      ...connection,
+      [field]: value,
+    });
+    setConnectionError(null);
+  };
+
+  const handleTestConnection = async (): Promise<boolean> => {
+    setIsConnecting(true);
+    setConnectionError(null);
+    setConnectionSuccess(false);
+
+    try {
+      let isValid: boolean;
+
+      if (onTestConnection) {
+        // Use provided handler
+        isValid = await onTestConnection(connection);
+      } 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(connection),
+          });
+
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+          }
+
+          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 fetchError;
+        }
+      }
+
+      if (isValid) {
+        setConnectionError(null);
+        setConnectionSuccess(true);
+        return true;
+      } else {
+        setConnectionError('Connection failed. Please check your credentials and try again.');
+        setConnectionSuccess(false);
+        return false;
+      }
+    } catch (error: any) {
+      const errorMessage = error.message || 'Connection failed. Please try again.';
+      setConnectionError(errorMessage);
+      setConnectionSuccess(false);
+      console.error('Database connection error:', error);
+      return false;
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleFetchColumns = async (): Promise<string[]> => {
+    setIsLoadingColumns(true);
+    setConnectionError(null);
+    
+    try {
+      let columns: string[];
+
+      if (onFetchColumns) {
+        // Use provided handler
+        columns = await onFetchColumns(connection);
+      } 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(connection),
+          });
+
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+          }
+
+          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 fetchError;
+        }
+      }
+
+      if (columns && columns.length > 0) {
+        setAvailableColumns(columns);
+        setIsLoadingColumns(false);
+        return columns;
+      } else {
+        setConnectionError('No columns found in the database. Please check your database connection and table selection.');
+        setIsLoadingColumns(false);
+        return [];
+      }
+    } catch (error: any) {
+      const errorMessage = error.message || 'Failed to fetch columns. Please try again.';
+      setConnectionError(errorMessage);
+      setIsLoadingColumns(false);
+      console.error('Fetch columns error:', error);
+      return [];
+    }
+  };
+
+  const handleConnectAndNext = async () => {
+    // Validate connection fields
+    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 connection successful, fetch columns
+    const fetchedColumns = await handleFetchColumns();
+    
+    if (fetchedColumns && fetchedColumns.length > 0) {
+      // Successfully fetched columns, move to next step
+      setCurrentStep('columns');
+      setConnectionError(null);
+    } else {
+      // Column fetching failed, show error but keep connection success
+      // Error is already set in handleFetchColumns
+    }
+  };
+
+  const handleColumnToggle = (column: string, category: keyof ColumnSelection) => {
+    setColumnSelection((prev) => {
+      const currentColumns = prev[category];
+      const isSelected = currentColumns.includes(column);
+      
+      return {
+        ...prev,
+        [category]: isSelected
+          ? currentColumns.filter((c) => c !== column)
+          : [...currentColumns, column],
+      };
+    });
+  };
+
+  const handleSave = () => {
+    const config: DatabaseConfig = {
+      connection,
+      columnSelection,
+    };
+    
+    if (onSave) {
+      onSave(config);
+    }
+    
+    // Close modal and reset
+    setIsModalOpen(false);
+    setCurrentStep('connection');
+    setConnectionError(null);
+  };
+
+  const handleClose = () => {
+    setIsModalOpen(false);
+    setCurrentStep('connection');
+    setConnectionError(null);
+    setConnectionSuccess(false);
+    setAvailableColumns([]);
+    setColumnSelection({
+      embeddingColumns: [],
+      llmColumns: [],
+      chromaColumns: [],
+    });
+  };
+
+  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"
+      >
+        <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>
+        <span className="text-sm font-medium text-gray-700">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'}
+              </h2>
+              <button
+                onClick={handleClose}
+                className="text-gray-400 hover:text-gray-600 transition-colors"
+              >
+                <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>
+              </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 */}
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-3">
+                      Database Type
+                    </label>
+                    <div className="grid grid-cols-2 gap-4">
+                      <button
+                        onClick={() => handleDbTypeChange('mongodb')}
+                        className={clsx(
+                          'p-4 border-2 rounded-lg transition-all text-left',
+                          dbType === 'mongodb'
+                            ? 'border-blue-500 bg-blue-50'
+                            : 'border-gray-200 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>
+                      </button>
+                      <button
+                        onClick={() => handleDbTypeChange('postgres')}
+                        className={clsx(
+                          'p-4 border-2 rounded-lg transition-all text-left',
+                          dbType === 'postgres'
+                            ? 'border-blue-500 bg-blue-50'
+                            : 'border-gray-200 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>
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Connection Fields */}
+                  {dbType === 'mongodb' ? (
+                    <div className="space-y-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Connection String (Recommended)
+                        </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"
+                        />
+                        <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>
+                          <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"
+                          />
+                        </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>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="space-y-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) || 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"
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Database Name *
+                        </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"
+                        />
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            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"
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            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"
+                          />
+                        </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>
+                  )}
+                  {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>
+                  )}
+                </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.
+                        </p>
+                      </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>
+
+                      {/* 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) => (
+                              <label
+                                key={`llm-${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')}
+                                  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>
+
+                      {/* 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>
+                            ))
+                          )}
+                        </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>
+              )}
+            </div>
+
+            {/* Modal Footer */}
+            <div className="px-6 py-4 border-t border-gray-200 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"
+              >
+                {currentStep === 'columns' ? 'Back' : 'Cancel'}
+              </button>
+              <div className="flex gap-3">
+                {currentStep === 'connection' ? (
+                  <button
+                    onClick={handleConnectAndNext}
+                    disabled={isConnecting || isLoadingColumns}
+                    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'}
+                  </button>
+                ) : (
+                  <button
+                    onClick={handleSave}
+                    disabled={
+                      columnSelection.embeddingColumns.length === 0 &&
+                      columnSelection.llmColumns.length === 0 &&
+                      columnSelection.chromaColumns.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
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AdminSetup;