nextjs-chatbot-ui 1.0.0

package/components/AdminSetup.tsx

@@ -0,0 +1,566 @@
+'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;