nextjs-chatbot-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,317 @@
+# 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
+
+## Installation
+
+```bash
+npm install nextjs-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-nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-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-nextjs-chatbot-ui';
+import type { ChatbotConfig } from 'nextjs-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-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-nextjs-chatbot-ui';
+import type { DatabaseConfig, DatabaseConnection } from 'nextjs-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.