nextjs-chatbot-ui 1.1.1 → 1.2.0

package/README.md

@@ -405,16 +405,20 @@ Your backend should provide:
 
 1. **Test Connection Endpoint** (`POST /api/database/test`)
    - Accepts `DatabaseConnection` object
-   - Returns success/failure status
+   - Returns `{ success: boolean, message?: string }`
+   - Example response: `{ success: true }` or `{ success: false, message: "Connection failed" }`
 
 2. **Fetch Columns Endpoint** (`POST /api/database/columns`)
    - Accepts `DatabaseConnection` object
-   - Returns array of column names
+   - Returns `{ columns: string[] }` or `{ columnNames: string[] }`
+   - Example response: `{ columns: ["id", "title", "content", "description"] }`
 
 3. **Save Configuration Endpoint** (your implementation)
    - Accepts `DatabaseConfig` object
    - Saves configuration to your storage
 
+**Note**: If you don't provide `onTestConnection` and `onFetchColumns` handlers, the component will automatically try to call `/api/database/test` and `/api/database/columns` endpoints. See `example-api-routes.md` for complete implementation examples.
+
 ## Troubleshooting
 
 ### Component not rendering or styles not working
@@ -459,6 +463,43 @@ If you see TypeScript errors:
 - Check CORS settings if making cross-origin requests
 - Verify the API response format matches the expected structure (see Backend API Requirements)
 
+### Database Connection Not Working
+
+If the database connection is not establishing:
+
+1. **Check if API endpoints exist**: The component tries to call `/api/database/test` and `/api/database/columns` by default. Make sure these endpoints are implemented in your Next.js app.
+
+2. **Implement the endpoints**: See `example-api-routes.md` for complete implementation examples for both App Router and Pages Router.
+
+3. **Provide custom handlers**: You can also provide `onTestConnection` and `onFetchColumns` props to handle the connection logic yourself:
+
+   ```javascript
+   <AdminSetup
+     onTestConnection={async (connection) => {
+       const response = await fetch('/your-api/test', {
+         method: 'POST',
+         headers: { 'Content-Type': 'application/json' },
+         body: JSON.stringify(connection),
+       });
+       const data = await response.json();
+       return data.success === true;
+     }}
+     onFetchColumns={async (connection) => {
+       const response = await fetch('/your-api/columns', {
+         method: 'POST',
+         headers: { 'Content-Type': 'application/json' },
+         body: JSON.stringify(connection),
+       });
+       const data = await response.json();
+       return data.columns || [];
+     }}
+   />
+   ```
+
+4. **Check browser console**: Open browser DevTools console to see detailed error messages about connection failures.
+
+5. **Verify database credentials**: Ensure your database host, port, username, password, and database name are correct.
+
 ## License
 
 MIT