nextjs-chatbot-ui 1.1.0 → 1.1.1

package/components/AdminSetup.tsx

@@ -13,6 +13,7 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
   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);
 
@@ -52,52 +53,69 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     setConnectionError(null);
   };
 
-  const handleTestConnection = async () => {
+  const handleTestConnection = async (): Promise<boolean> => {
     if (!onTestConnection) {
       // Default test - just validate fields
       if (!connection.host || !connection.database) {
         setConnectionError('Please fill in all required fields');
-        return;
+        setConnectionSuccess(false);
+        return false;
       }
       setConnectionError(null);
-      return;
+      setConnectionSuccess(true);
+      return true;
     }
 
     setIsConnecting(true);
     setConnectionError(null);
+    setConnectionSuccess(false);
 
     try {
       const isValid = await onTestConnection(connection);
       if (isValid) {
         setConnectionError(null);
-        // Fetch columns after successful connection
-        await handleFetchColumns();
+        setConnectionSuccess(true);
+        return true;
       } else {
         setConnectionError('Connection failed. Please check your credentials.');
+        setConnectionSuccess(false);
+        return false;
       }
     } catch (error: any) {
       setConnectionError(error.message || 'Connection failed. Please try again.');
+      setConnectionSuccess(false);
+      return false;
     } finally {
       setIsConnecting(false);
     }
   };
 
-  const handleFetchColumns = async () => {
+  const handleFetchColumns = async (): Promise<string[]> => {
     if (!onFetchColumns) {
       // Mock columns for demo
-      setAvailableColumns(['id', 'title', 'content', 'description', 'category', 'tags', 'created_at', 'updated_at']);
+      const mockColumns = ['id', 'title', 'content', 'description', 'category', 'tags', 'created_at', 'updated_at'];
+      setAvailableColumns(mockColumns);
       setIsLoadingColumns(false);
-      return;
+      return mockColumns;
     }
 
     setIsLoadingColumns(true);
+    setConnectionError(null);
     try {
       const columns = await onFetchColumns(connection);
-      setAvailableColumns(columns);
+      if (columns && columns.length > 0) {
+        setAvailableColumns(columns);
+        setIsLoadingColumns(false);
+        return columns;
+      } else {
+        setConnectionError('No columns found in the database.');
+        setIsLoadingColumns(false);
+        return [];
+      }
     } catch (error: any) {
       setConnectionError(error.message || 'Failed to fetch columns');
-    } finally {
       setIsLoadingColumns(false);
+      return [];
     }
   };
 
@@ -106,21 +124,39 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     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;
       }
     }
 
-    // Test connection
-    await handleTestConnection();
+    // Clear previous errors
+    setConnectionError(null);
+    setConnectionSuccess(false);
+
+    // Test connection first
+    const connectionSuccess = await handleTestConnection();
     
-    // If no error, move to next step
-    if (!connectionError) {
+    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
     }
   };
 
@@ -158,6 +194,8 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
     setIsModalOpen(false);
     setCurrentStep('connection');
     setConnectionError(null);
+    setConnectionSuccess(false);
+    setAvailableColumns([]);
     setColumnSelection({
       embeddingColumns: [],
       llmColumns: [],
@@ -435,88 +473,131 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
                       <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 items-center justify-center py-8">
-                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+                    <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-4">
-                          Select which columns to use for embedding, LLM processing, and ChromaDB storage.
+                        <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-3">
-                          Embedding Columns
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Works with Embeddings
                         </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>
-                          ))}
+                        <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-3">
-                          LLM Columns
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Works with LLM
                         </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>
-                          ))}
+                        <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-3">
-                          ChromaDB Columns
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Works with ChromaDB
                         </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>
-                          ))}
+                        <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>
                     </>
                   )}
@@ -537,9 +618,12 @@ const AdminSetup: React.FC<AdminSetupProps> = ({
                   <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"
+                    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 ? 'Connecting...' : 'Connect & Next'}
+                    {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

package/package.json

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