nextjs-chatbot-ui 1.0.1 → 1.1.1

package/README.md

@@ -1,330 +1,468 @@
-# Chatbot UI Component
-
-A beautiful, configurable chatbot UI component for Next.js applications with Tailwind CSS. Inspired by Sendbird's modern chat interface.
-
-## Features
-
-- 🎨 Modern, Sendbird-inspired UI design
-- ⚙️ Fully configurable (labels, position, colors, backend URL)
-- 📱 Responsive and mobile-friendly
-- 🎯 TypeScript support
-- 🚀 Easy to integrate
-- 💬 Real-time messaging support
-- 🎭 Customizable user and bot avatars
-- ⏰ Optional timestamp display
-
-## Compatibility Requirements
-
-This package requires:
-- **Next.js 14+** (with App Router or Pages Router support)
-- **React 18+**
-- **TypeScript 5+** (for TypeScript projects)
-- **Tailwind CSS 3+** (must be configured in your project)
-
-**Important Notes:**
-- The package exports TypeScript source files directly, which Next.js will compile automatically
-- Make sure your `tailwind.config.js` includes the package path in the `content` array (see setup instructions)
-- This package uses the `'use client'` directive and requires client-side rendering
-
-## Installation
-
-```bash
-npm install nextjs-chatbot-ui
-```
-
-## Usage
-
-### Basic Setup
-
-1. **Configure Tailwind CSS** - Make sure your `tailwind.config.js` includes the component:
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  content: [
-    './node_modules/nextjs-chatbot-ui/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  // ... rest of your config
-}
-```
-
-2. **Import the component and types**:
-
-```javascript
-import { Chatbot } from 'nextjs-chatbot-ui';
-import type { ChatbotConfig } from 'nextjs-chatbot-ui';
-```
-
-2. Configure and use the component:
-
-```javascript
-const config: ChatbotConfig = {
-  backendUrl: 'https://your-backend-api.com/chat',
-  labels: {
-    title: 'Support Chat',
-    placeholder: 'Type your message...',
-    sendButton: 'Send',
-    welcomeMessage: 'Hello! How can I help you?',
-  },
-  position: 'bottom-right',
-  botInfo: {
-    name: 'Support Bot',
-    avatar: 'https://example.com/bot-avatar.png',
-  },
-  userInfo: {
-    name: 'User',
-    avatar: 'https://example.com/user-avatar.png',
-  },
-  primaryColor: '#0ea5e9',
-  autoOpen: false,
-  showTimestamp: true,
-};
-
-export default function Page() {
-  return <Chatbot config={config} />;
-}
-```
-
-### Configuration Options
-
-#### `ChatbotConfig` Interface
-
-```typescript
-interface ChatbotConfig {
-  // Required
-  backendUrl: string; // Your backend API endpoint for handling messages
-
-  // Optional Labels
-  labels?: {
-    title?: string;              // Chat header title (default: "Chat Support")
-    placeholder?: string;         // Input placeholder (default: "Type your message...")
-    sendButton?: string;          // Send button text (default: "Send")
-    typingIndicator?: string;     // Loading message (default: "Typing...")
-    welcomeMessage?: string;      // Initial bot message (default: "Hello! How can I help you today?")
-    errorMessage?: string;        // Error message (default: "Sorry, something went wrong. Please try again.")
-  };
-
-  // Position
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; // Default: 'bottom-right'
-
-  // User Information
-  userInfo?: {
-    name?: string;    // User name
-    avatar?: string;  // User avatar URL
-  };
-
-  // Bot Information
-  botInfo?: {
-    name?: string;    // Bot name (default: uses title)
-    avatar?: string;  // Bot avatar URL
-  };
-
-  // Styling
-  primaryColor?: string;      // Primary color (hex code)
-  backgroundColor?: string;   // Chat background color (hex code)
-
-  // Behavior
-  autoOpen?: boolean;         // Auto-open chat on load (default: false)
-  showTimestamp?: boolean;    // Show message timestamps (default: false)
-  showDateSeparator?: boolean; // Show date separators between messages (default: false)
-  poweredByText?: string;     // Footer text (e.g., "Powered by sendbird")
-}
-```
-
-### Backend API Requirements
-
-Your backend should accept POST requests with the following format:
-
-**Request:**
-```json
-{
-  "message": "User's message text",
-  "userInfo": {
-    "name": "User",
-    "avatar": "https://example.com/avatar.png"
-  }
-}
-```
-
-**Response:**
-```json
-{
-  "message": "Bot's response text",
-  "suggestedReplies": ["Option 1", "Option 2", "Option 3"]
-}
-```
-
-or
-
-```json
-{
-  "response": "Bot's response text",
-  "suggestions": ["Option 1", "Option 2", "Option 3"]
-}
-```
-
-**Note:** The `suggestedReplies` or `suggestions` field is optional and will display as clickable buttons below the bot's message, similar to Sendbird's interface.
-
-### Example Implementation
-
-```javascript
-// pages/index.js or app/page.js
-'use client';
-
-import { Chatbot } from 'nextjs-chatbot-ui';
-import type { ChatbotConfig } from 'nextjs-chatbot-ui';
-
-export default function Home() {
-  const chatbotConfig: ChatbotConfig = {
-    backendUrl: 'https://api.example.com/chat',
-    labels: {
-      title: 'Customer Support',
-      placeholder: 'Ask us anything...',
-      sendButton: 'Send',
-      welcomeMessage: 'Welcome! We\'re here to help.',
-    },
-    position: 'bottom-right',
-    botInfo: {
-      name: 'Support Assistant',
-      avatar: '/bot-avatar.png',
-    },
-    userInfo: {
-      name: 'Guest User',
-    },
-    primaryColor: '#6B46C1', // Purple like Sendbird
-    autoOpen: false,
-    showTimestamp: true,
-    showDateSeparator: true,
-    poweredByText: 'Powered by nextjs-chatbot-ui',
-  };
-
-  return (
-    <div>
-      <h1>My Website</h1>
-      <Chatbot config={chatbotConfig} />
-    </div>
-  );
-}
-```
-
-### Tailwind CSS Setup
-
-Make sure you have Tailwind CSS configured in your Next.js project. The component uses Tailwind classes, so ensure your `tailwind.config.js` includes the component:
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  content: [
-    './node_modules/nextjs-chatbot-ui/**/*.{js,ts,jsx,tsx}',
-    // ... your other paths
-  ],
-  // ... rest of your config
-}
-```
-
-## Development
-
-To develop or modify this package:
-
-```bash
-# Install dependencies
-npm install
-
-# Run development server
-npm run dev
-
-# Build for production
-npm run build
-```
-
-## Admin Setup Component
-
-The package also includes an `AdminSetup` component for configuring database connections in your admin panel.
-
-### Usage
-
-```javascript
-import { AdminSetup } from 'nextjs-chatbot-ui';
-import type { DatabaseConfig, DatabaseConnection } from 'nextjs-chatbot-ui';
-
-function AdminPanel() {
-  const handleSave = (config: DatabaseConfig) => {
-    // Save configuration to your backend
-    console.log('Config:', config);
-  };
-
-  const handleTestConnection = async (connection: DatabaseConnection) => {
-    // Test database connection
-    const response = await fetch('/api/database/test', {
-      method: 'POST',
-      body: JSON.stringify(connection),
-    });
-    return response.ok;
-  };
-
-  const handleFetchColumns = async (connection: DatabaseConnection) => {
-    // Fetch columns from database
-    const response = await fetch('/api/database/columns', {
-      method: 'POST',
-      body: JSON.stringify(connection),
-    });
-    const data = await response.json();
-    return data.columns || [];
-  };
-
-  return (
-    <aside className="sidebar">
-      <AdminSetup
-        onSave={handleSave}
-        onTestConnection={handleTestConnection}
-        onFetchColumns={handleFetchColumns}
-      />
-    </aside>
-  );
-}
-```
-
-### Features
-
-- **Database Selection**: Choose between MongoDB and PostgreSQL
-- **Connection Configuration**: Configure all necessary connection parameters
-- **Connection Testing**: Test database connection before proceeding
-- **Column Selection**: Select columns for:
-  - Embedding processing
-  - LLM processing
-  - ChromaDB storage
-- **Modal Interface**: Clean, step-by-step modal interface
-- **Sidebar Integration**: Ready to integrate into admin panel sidebars
-
-### Database Configuration
-
-The component supports:
-- **MongoDB**: Connection string or individual fields (host, port, database, SSL)
-- **PostgreSQL**: Host, port, database, username, password, SSL
-
-### Backend API Requirements
-
-Your backend should provide:
-
-1. **Test Connection Endpoint** (`POST /api/database/test`)
-   - Accepts `DatabaseConnection` object
-   - Returns success/failure status
-
-2. **Fetch Columns Endpoint** (`POST /api/database/columns`)
-   - Accepts `DatabaseConnection` object
-   - Returns array of column names
-
-3. **Save Configuration Endpoint** (your implementation)
-   - Accepts `DatabaseConfig` object
-   - Saves configuration to your storage
-
-## License
-
-MIT
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
+# Chatbot UI Component
+
+A beautiful, configurable chatbot UI component for Next.js applications with Tailwind CSS. Inspired by Sendbird's modern chat interface.
+
+## Features
+
+- 🎨 Modern, Sendbird-inspired UI design
+- ⚙️ Fully configurable (labels, position, colors, backend URL)
+- 📱 Responsive and mobile-friendly
+- 🎯 TypeScript support
+- 🚀 Easy to integrate
+- 💬 Real-time messaging support
+- 🎭 Customizable user and bot avatars
+- ⏰ Optional timestamp display
+
+## Compatibility Requirements
+
+This package requires:
+- **Next.js 13+** (with App Router or Pages Router support)
+- **React 18+**
+- **TypeScript** (optional, but recommended)
+- **Tailwind CSS 3+** (must be configured in your project)
+
+**Important Notes:**
+- The package exports TypeScript source files directly, which Next.js will compile automatically
+- Make sure your `tailwind.config.js` includes the package path in the `content` array
+- This package uses the `'use client'` directive and requires client-side rendering
+- Works with both **App Router** (`app/` directory) and **Pages Router** (`pages/` directory)
+
+## Installation
+
+```bash
+npm install nextjs-chatbot-ui
+```
+
+## Usage
+
+### Basic Setup
+
+**Step 1: Configure Next.js** - Add the package to your `next.config.js`:
+
+```javascript
+// next.config.js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['nextjs-chatbot-ui'],
+  // ... your other config
+}
+
+module.exports = nextConfig
+```
+
+**Step 2: Configure Tailwind CSS** - Make sure your `tailwind.config.js` includes the component:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    './node_modules/nextjs-chatbot-ui/**/*.{js,ts,jsx,tsx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  // ... rest of your config
+}
+```
+
+**Step 3: Import and use the component**:
+
+For **App Router** (app directory):
+```javascript
+// app/page.tsx or app/any-page.tsx
+'use client'; // Required for App Router
+
+import { Chatbot } from 'nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-chatbot-ui';
+```
+
+For **Pages Router** (pages directory):
+```javascript
+// pages/index.js or pages/any-page.js
+import { Chatbot } from 'nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-chatbot-ui';
+```
+
+**Step 4: Configure and use the component**:
+
+```javascript
+const config: ChatbotConfig = {
+  backendUrl: 'https://your-backend-api.com/chat',
+  labels: {
+    title: 'Support Chat',
+    placeholder: 'Type your message...',
+    sendButton: 'Send',
+    welcomeMessage: 'Hello! How can I help you?',
+  },
+  position: 'bottom-right',
+  botInfo: {
+    name: 'Support Bot',
+    avatar: 'https://example.com/bot-avatar.png',
+  },
+  userInfo: {
+    name: 'User',
+    avatar: 'https://example.com/user-avatar.png',
+  },
+  primaryColor: '#0ea5e9',
+  autoOpen: false,
+  showTimestamp: true,
+};
+
+export default function Page() {
+  return (
+    <div>
+      <h1>My Website</h1>
+      <Chatbot config={config} />
+    </div>
+  );
+}
+```
+
+### Complete Example (App Router)
+
+```javascript
+// app/page.tsx
+'use client';
+
+import { Chatbot } from 'nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  const config: ChatbotConfig = {
+    backendUrl: 'https://api.example.com/chat',
+    labels: {
+      title: 'Support Chat',
+      placeholder: 'Type your message...',
+      sendButton: 'Send',
+      welcomeMessage: 'Hello! How can I help you today?',
+    },
+    position: 'bottom-right',
+    botInfo: {
+      name: 'Support Bot',
+    },
+    userInfo: {
+      name: 'User',
+    },
+    primaryColor: '#6B46C1',
+    autoOpen: false,
+    showTimestamp: true,
+  };
+
+  return (
+    <main>
+      <h1>Welcome to My Site</h1>
+      <Chatbot config={config} />
+    </main>
+  );
+}
+```
+
+### Complete Example (Pages Router)
+
+```javascript
+// pages/index.js
+import { Chatbot } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  const config = {
+    backendUrl: 'https://api.example.com/chat',
+    labels: {
+      title: 'Support Chat',
+      placeholder: 'Type your message...',
+    },
+    position: 'bottom-right',
+  };
+
+  return (
+    <div>
+      <h1>Welcome to My Site</h1>
+      <Chatbot config={config} />
+    </div>
+  );
+}
+```
+
+### Configuration Options
+
+#### `ChatbotConfig` Interface
+
+```typescript
+interface ChatbotConfig {
+  // Required
+  backendUrl: string; // Your backend API endpoint for handling messages
+
+  // Optional Labels
+  labels?: {
+    title?: string;              // Chat header title (default: "Chat Support")
+    placeholder?: string;         // Input placeholder (default: "Type your message...")
+    sendButton?: string;          // Send button text (default: "Send")
+    typingIndicator?: string;     // Loading message (default: "Typing...")
+    welcomeMessage?: string;      // Initial bot message (default: "Hello! How can I help you today?")
+    errorMessage?: string;        // Error message (default: "Sorry, something went wrong. Please try again.")
+  };
+
+  // Position
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'; // Default: 'bottom-right'
+
+  // User Information
+  userInfo?: {
+    name?: string;    // User name
+    avatar?: string;  // User avatar URL
+  };
+
+  // Bot Information
+  botInfo?: {
+    name?: string;    // Bot name (default: uses title)
+    avatar?: string;  // Bot avatar URL
+  };
+
+  // Styling
+  primaryColor?: string;      // Primary color (hex code)
+  backgroundColor?: string;   // Chat background color (hex code)
+
+  // Behavior
+  autoOpen?: boolean;         // Auto-open chat on load (default: false)
+  showTimestamp?: boolean;    // Show message timestamps (default: false)
+  showDateSeparator?: boolean; // Show date separators between messages (default: false)
+  poweredByText?: string;     // Footer text (e.g., "Powered by sendbird")
+}
+```
+
+### Backend API Requirements
+
+Your backend should accept POST requests with the following format:
+
+**Request:**
+```json
+{
+  "message": "User's message text",
+  "userInfo": {
+    "name": "User",
+    "avatar": "https://example.com/avatar.png"
+  }
+}
+```
+
+**Response:**
+```json
+{
+  "message": "Bot's response text",
+  "suggestedReplies": ["Option 1", "Option 2", "Option 3"]
+}
+```
+
+or
+
+```json
+{
+  "response": "Bot's response text",
+  "suggestions": ["Option 1", "Option 2", "Option 3"]
+}
+```
+
+**Note:** The `suggestedReplies` or `suggestions` field is optional and will display as clickable buttons below the bot's message, similar to Sendbird's interface.
+
+### Example Implementation
+
+```javascript
+// pages/index.js or app/page.js
+'use client';
+
+import { Chatbot } from 'nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-chatbot-ui';
+
+export default function Home() {
+  const chatbotConfig: ChatbotConfig = {
+    backendUrl: 'https://api.example.com/chat',
+    labels: {
+      title: 'Customer Support',
+      placeholder: 'Ask us anything...',
+      sendButton: 'Send',
+      welcomeMessage: 'Welcome! We\'re here to help.',
+    },
+    position: 'bottom-right',
+    botInfo: {
+      name: 'Support Assistant',
+      avatar: '/bot-avatar.png',
+    },
+    userInfo: {
+      name: 'Guest User',
+    },
+    primaryColor: '#6B46C1', // Purple like Sendbird
+    autoOpen: false,
+    showTimestamp: true,
+    showDateSeparator: true,
+    poweredByText: 'Powered by nextjs-chatbot-ui',
+  };
+
+  return (
+    <div>
+      <h1>My Website</h1>
+      <Chatbot config={chatbotConfig} />
+    </div>
+  );
+}
+```
+
+### Tailwind CSS Setup
+
+Make sure you have Tailwind CSS configured in your Next.js project. The component uses Tailwind classes, so ensure your `tailwind.config.js` includes the component:
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: [
+    './node_modules/nextjs-chatbot-ui/**/*.{js,ts,jsx,tsx}',
+    // ... your other paths
+  ],
+  // ... rest of your config
+}
+```
+
+## Development
+
+To develop or modify this package:
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## Admin Setup Component
+
+The package also includes an `AdminSetup` component for configuring database connections in your admin panel.
+
+### Usage
+
+```javascript
+import { AdminSetup } from 'nextjs-chatbot-ui';
+import type { DatabaseConfig, DatabaseConnection } from 'nextjs-chatbot-ui';
+
+function AdminPanel() {
+  const handleSave = (config: DatabaseConfig) => {
+    // Save configuration to your backend
+    console.log('Config:', config);
+  };
+
+  const handleTestConnection = async (connection: DatabaseConnection) => {
+    // Test database connection
+    const response = await fetch('/api/database/test', {
+      method: 'POST',
+      body: JSON.stringify(connection),
+    });
+    return response.ok;
+  };
+
+  const handleFetchColumns = async (connection: DatabaseConnection) => {
+    // Fetch columns from database
+    const response = await fetch('/api/database/columns', {
+      method: 'POST',
+      body: JSON.stringify(connection),
+    });
+    const data = await response.json();
+    return data.columns || [];
+  };
+
+  return (
+    <aside className="sidebar">
+      <AdminSetup
+        onSave={handleSave}
+        onTestConnection={handleTestConnection}
+        onFetchColumns={handleFetchColumns}
+      />
+    </aside>
+  );
+}
+```
+
+### Features
+
+- **Database Selection**: Choose between MongoDB and PostgreSQL
+- **Connection Configuration**: Configure all necessary connection parameters
+- **Connection Testing**: Test database connection before proceeding
+- **Column Selection**: Select columns for:
+  - Embedding processing
+  - LLM processing
+  - ChromaDB storage
+- **Modal Interface**: Clean, step-by-step modal interface
+- **Sidebar Integration**: Ready to integrate into admin panel sidebars
+
+### Database Configuration
+
+The component supports:
+- **MongoDB**: Connection string or individual fields (host, port, database, SSL)
+- **PostgreSQL**: Host, port, database, username, password, SSL
+
+### Backend API Requirements
+
+Your backend should provide:
+
+1. **Test Connection Endpoint** (`POST /api/database/test`)
+   - Accepts `DatabaseConnection` object
+   - Returns success/failure status
+
+2. **Fetch Columns Endpoint** (`POST /api/database/columns`)
+   - Accepts `DatabaseConnection` object
+   - Returns array of column names
+
+3. **Save Configuration Endpoint** (your implementation)
+   - Accepts `DatabaseConfig` object
+   - Saves configuration to your storage
+
+## Troubleshooting
+
+### Component not rendering or styles not working
+
+1. **Check Tailwind Configuration**: Make sure `nextjs-chatbot-ui` is in your `tailwind.config.js` content array:
+   ```javascript
+   content: [
+     './node_modules/nextjs-chatbot-ui/**/*.{js,ts,jsx,tsx}',
+     // ... other paths
+   ]
+   ```
+
+2. **Check Next.js Configuration**: Ensure `transpilePackages` is set in `next.config.js`:
+   ```javascript
+   transpilePackages: ['nextjs-chatbot-ui']
+   ```
+
+3. **Restart Development Server**: After configuration changes, restart your Next.js dev server.
+
+### TypeScript Errors
+
+If you see TypeScript errors:
+- Make sure you're using TypeScript 5+ (optional but recommended)
+- The package includes type definitions, so TypeScript should work out of the box
+- If using JavaScript, you can ignore type imports: `import { Chatbot } from 'nextjs-chatbot-ui';`
+
+### "Module not found" or Import Errors
+
+1. **Verify Installation**: Run `npm install nextjs-chatbot-ui` again
+2. **Check Node Modules**: Ensure the package exists in `node_modules/nextjs-chatbot-ui`
+3. **Clear Cache**: Try deleting `.next` folder and `node_modules`, then reinstall
+
+### Component not appearing
+
+- Make sure you're using `'use client'` directive in App Router
+- Check that the component is not hidden by CSS (z-index, overflow, etc.)
+- Verify the `position` prop is set correctly
+
+### Backend API Issues
+
+- Ensure your backend URL is correct and accessible
+- Check CORS settings if making cross-origin requests
+- Verify the API response format matches the expected structure (see Backend API Requirements)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

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,68 +1,68 @@
-{
-  "name": "nextjs-chatbot-ui",
-  
-  "version": "1.0.1",
-  "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
-  "main": "./index.tsx",
-  "module": "./index.tsx",
-  "types": "./types/index.ts",
-  "exports": {
-    ".": {
-      "types": "./types/index.ts",
-      "import": "./index.tsx",
-      "require": "./index.tsx",
-      "default": "./index.tsx"
-    },
-    "./components/Chatbot": {
-      "types": "./types/index.ts",
-      "import": "./components/Chatbot.tsx",
-      "require": "./components/Chatbot.tsx",
-      "default": "./components/Chatbot.tsx"
-    },
-    "./types": {
-      "types": "./types/index.ts",
-      "import": "./types/index.ts",
-      "require": "./types/index.ts",
-      "default": "./types/index.ts"
-    }
-  },
-  "files": [
-    "components",
-    "types",
-    "index.tsx",
-    "README.md"
-  ],
-  "scripts": {
-    "build": "echo 'Package is ready to use. Source files are included.'",
-    "dev": "next dev",
-    "prepare": "npm run build",
-    "type-check": "tsc --noEmit"
-  },
-  "keywords": [
-    "chatbot",
-    "ui",
-    "component",
-    "nextjs",
-    "tailwind",
-    "react"
-  ],
-  "author": "",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "next": "^14.0.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "nextjs-chatbot-ui",
+  
+  "version": "1.1.1",
+  "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
+  "main": "./index.tsx",
+  "module": "./index.tsx",
+  "types": "./types/index.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.ts",
+      "import": "./index.tsx",
+      "require": "./index.tsx",
+      "default": "./index.tsx"
+    },
+    "./components/Chatbot": {
+      "types": "./types/index.ts",
+      "import": "./components/Chatbot.tsx",
+      "require": "./components/Chatbot.tsx",
+      "default": "./components/Chatbot.tsx"
+    },
+    "./types": {
+      "types": "./types/index.ts",
+      "import": "./types/index.ts",
+      "require": "./types/index.ts",
+      "default": "./types/index.ts"
+    }
+  },
+  "files": [
+    "components",
+    "types",
+    "index.tsx",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "echo 'Package is ready to use. Source files are included.'",
+    "dev": "next dev",
+    "prepare": "npm run build",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "chatbot",
+    "ui",
+    "component",
+    "nextjs",
+    "tailwind",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^13.0.0 || ^14.0.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3"
+  }
+}