nextjs-chatbot-ui 1.0.0 → 1.1.0

package/README.md

@@ -1,317 +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
-
-## 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.
+# 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/package.json

@@ -1,62 +1,68 @@
-{
-  "name": "nextjs-chatbot-ui",
-  
-  "version": "1.0.0",
-  "description": "A configurable chatbot UI component for Next.js with Tailwind CSS",
-  "main": "./index.tsx",
-  "types": "./types/index.ts",
-  "exports": {
-    ".": {
-      "import": "./index.tsx",
-      "require": "./index.tsx",
-      "types": "./types/index.ts"
-    },
-    "./components/Chatbot": {
-      "import": "./components/Chatbot.tsx",
-      "require": "./components/Chatbot.tsx"
-    },
-    "./types": {
-      "import": "./types/index.ts",
-      "require": "./types/index.ts",
-      "types": "./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"
-  },
-  "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.0",
+  "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"
+  }
+}