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

npm install @your-org/react-chatbot

Usage

Basic Usage

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

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

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

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

<ChatBot
  config={{
    primaryColor: "#your-primary-color",
    secondaryColor: "#your-secondary-color",
    theme: "dark"
  }}
/>

2. Custom CSS Classes

<ChatBot className="your-custom-class" />

3. CSS Variables

You can override the CSS variables in your global stylesheet:

: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:

{
  "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:

npm install
npm run build

To watch for changes during development:

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