npm package: @qwertyrioup/gentaur-chatbot
Description: A customizable React ChatBot component with Socket.IO support - Tailwind v4 compatible
Author: Your Name
Latest version: 1.2.1

# React ChatBot Component

A customizable React ChatBot component with Socket.IO support, built with TypeScript and Tailwind CSS.

## Features

- 🎨 Fully customizable styling and theming
- 🔌 Socket.IO integration for real-time messaging
- 📱 Responsive design with mobile support
- 🌙 Dark/Light mode support
- ⚙️ Configurable through props or server config
- 🎯 TypeScript support
- 💬 Typing indicators
- 🏠 Home screen with company branding
- 📧 Feedback collection for offline scenarios
- 🔤 Geist Sans font for modern typography

## Installation

```bash
npm install @your-org/react-chatbot
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import { ChatBot } from '@your-org/react-chatbot';

function App() {
  return (
    <div className="App">
      <ChatBot
        UID="your-bot-unique-id"
        config={{
          companyName: "Your Company",
          botName: "Support Bot",
          primaryColor: "#003299",
          secondaryColor: "#efb100",
          welcomeMessage: "Hello! How can I help you today?",
          placeholder: "Type your message...",
          position: "bottom-right"
        }}
        onMessageSent={(message) => console.log('Sent:', message)}
        onMessageReceived={(message) => console.log('Received:', message)}
        onConnect={() => console.log('Connected')}
        onDisconnect={() => console.log('Disconnected')}
      />
    </div>
  );
}

export default App;
```

### With Custom Styling

```tsx
import { ChatBot } from '@your-org/react-chatbot';

<ChatBot
  UID="your-bot-id"
  config={{
    companyName: "Acme Corp",
    botName: "Acme Assistant",
    primaryColor: "#ff6b6b",
    secondaryColor: "#4ecdc4",
    width: "400px",
    height: "600px",
    position: "bottom-left",
    theme: "dark"
  }}
  className="custom-chatbot"
/>
```

## Configuration Options

### ChatbotConfig Interface

```typescript
interface ChatbotConfig {
  socketUrl?: string;                    // WebSocket server URL
  companyName?: string;                  // Your company name
  botName?: string;                      // Bot display name
  botAvatar?: string;                    // Bot avatar image URL
  userAvatar?: string;                   // User avatar image URL
  theme?: 'light' | 'dark' | 'auto';    // Color theme
  homeScreenMessage?: string;            // Message on home screen
  presentationMessage?: string;          // Bot introduction message
  primaryColor?: string;                 // Primary theme color (hex)
  secondaryColor?: string;               // Secondary theme color (hex)
  placeholder?: string;                  // Input placeholder text
  height?: string | number;              // Widget height
  width?: string | number;               // Widget width
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  welcomeMessage?: string;               // First message from bot
  autoConnect?: boolean;                 // Auto-connect to socket
  showTypingIndicator?: boolean;         // Show typing animation
}
```

### Props Interface

```typescript
interface ChatbotProps {
  UID?: string;                          // Unique identifier for bot config
  config?: ChatbotConfig;                // Configuration options
  onMessageSent?: (message: string) => void;
  onMessageReceived?: (message: Message) => void;
  onConnect?: () => void;
  onDisconnect?: () => void;
  className?: string;                    // Additional CSS classes
}
```

## Styling

The component uses Tailwind CSS for styling. You have several options for customization:

### 1. Using Config Props

```tsx
<ChatBot
  config={{
    primaryColor: "#your-primary-color",
    secondaryColor: "#your-secondary-color",
    theme: "dark"
  }}
/>
```

### 2. Custom CSS Classes

```tsx
<ChatBot className="your-custom-class" />
```

### 3. CSS Variables

You can override the CSS variables in your global stylesheet:

```css
:root {
  --chatbot-primary: #your-color;
  --chatbot-secondary: #your-color;
  --chatbot-background: #your-color;
}
```

## Server Integration

The component can fetch configuration from a server endpoint:

```
GET /bot-config/{UID}
```

Expected response format:

```json
{
  "companyName": "Your Company",
  "botName": "Support Bot",
  "primaryColor": "#003299",
  "secondaryColor": "#efb100",
  "welcomeMessage": "Hello! How can I help you?",
  "autoConnect": true,
  "showTypingIndicator": true
}
```

## Socket.IO Events

The component listens for and emits the following Socket.IO events:

### Incoming Events
- `message` - Receive messages from server/admin
- `typing` - Typing indicator updates
- `guest:joined` - Confirmation of chat session creation

### Outgoing Events
- `guest:join` - Initialize guest chat session
- `guest:message` - Send user messages

## Development

To build the package locally:

```bash
npm install
npm run build
```

To watch for changes during development:

```bash
npm run build:watch
```

## Requirements

- React >= 16.8.0
- React DOM >= 16.8.0

## Typography

The ChatBot component uses **Geist Sans** font for modern, clean typography. The font is automatically loaded when the component is rendered, ensuring consistent appearance across different applications.

## Dependencies

The component includes these dependencies:
- socket.io-client
- lucide-react (for icons)
- @radix-ui/react-avatar
- @radix-ui/react-slot
- class-variance-authority
- clsx
- tailwind-merge
- geist (font package)

## License

MIT