💬 Chat Widget System

A real-time chat widget system for customer support with supplier-customer matching. Built with React, Socket.IO, and MongoDB.

✨ Features

• Real-time messaging with Socket.IO
• Customer-Supplier matching via vendor IDs
• File uploads with image thumbnails
• Emoji support and reactions
• Message replies and threading
• Responsive design with multiple themes
• Customizable positioning and styling
• JWT authentication for security
• Rate limiting and CORS protection

🚀 Quick Start

Installation

npm install chat-widget-system

Basic Usage

import ChatWidgetSystem from "chat-widget-system";

function App() {
  const user = {
    id: "customer123",
    name: "John Doe",
    email: "[email protected]",
    token: "your_jwt_token_here",
  };

  return (
    <ChatWidgetSystem
      serverUrl="https://your-server.railway.app"
      userType="customer"
      user={user}
      supplierVendorId="support_team"
      onMessage={(message) => console.log("New message:", message)}
      onError={(error) => console.error("Chat error:", error)}
    />
  );
}

📱 Usage Examples

Customer Widget (Button Style)

import ChatWidgetSystem from "chat-widget-system";

function CustomerPage() {
  const [showChat, setShowChat] = useState(false);

  return (
    <div>
      {!showChat ? (
        <button onClick={() => setShowChat(true)}>Chat with Support</button>
      ) : (
        <ChatWidgetSystem
          serverUrl="https://your-server.railway.app"
          userType="customer"
          user={customerUser}
          supplierVendorId="support_team"
          onClose={() => setShowChat(false)}
          position="bottom-right"
          theme="default"
        />
      )}
    </div>
  );
}

Supplier Widget (Full Interface)

import ChatWidgetSystem from "chat-widget-system";

function SupplierDashboard() {
  return (
    <div>
      <h1>Customer Support Dashboard</h1>

      <ChatWidgetSystem
        serverUrl="https://your-server.railway.app"
        userType="supplier"
        user={supplierUser}
        roomId={null} // Join all rooms
        position="bottom-right"
        theme="dark"
        enableFileUpload={true}
        enableReactions={true}
        onMessage={(message) => {
          console.log("New customer message:", message);
        }}
      />
    </div>
  );
}

⚙️ Configuration

Props

| Prop | Type | Required | Default | Description | | ------------------ | ------------------------ | ------------- | -------------- | -------------------------------- | | serverUrl | string | ✅ | - | Your chat server URL | | userType | 'customer' | 'supplier' | ✅ | - | Type of user | | user | object | ✅ | - | User object with JWT token | | supplierVendorId | string | ✅ (customer) | - | Supplier vendor ID for customers | | roomId | string | null | ❌ | null | Room ID for suppliers | | position | string | ❌ | 'bottom-right' | Widget position | | theme | string | ❌ | 'default' | UI theme | | enableFileUpload | boolean | ❌ | true | Enable file uploads | | enableEmojis | boolean | ❌ | true | Enable emoji picker | | enableReactions | boolean | ❌ | true | Enable message reactions | | enableReplies | boolean | ❌ | true | Enable message replies | | maxFileSize | number | ❌ | 5MB | Maximum file size | | debug | boolean | ❌ | false | Enable debug mode |

User Object Structure

const user = {
  id: "user123", // Unique user ID
  name: "John Doe", // Display name
  email: "[email protected]", // Email address
  token: "jwt_token_here", // JWT authentication token
  // Additional fields can be included
  avatar: "https://example.com/avatar.jpg",
  role: "customer",
};

Callbacks

<ChatWidgetSystem
  // ... other props
  onMessage={(message) => {
    // Called when a new message is received
    console.log("New message:", message);
  }}
  onError={(error) => {
    // Called when an error occurs
    console.error("Chat error:", error);
  }}
  onClose={() => {
    // Called when chat is closed
    setShowChat(false);
  }}
  onFileUpload={(file) => {
    // Called when a file is uploaded
    console.log("File uploaded:", file);
  }}
  onEmojiSelect={(emoji) => {
    // Called when an emoji is selected
    console.log("Emoji selected:", emoji);
  }}
  onReactionAdd={(reaction) => {
    // Called when a reaction is added
    console.log("Reaction added:", reaction);
  }}
  onReplyTo={(message) => {
    // Called when replying to a message
    console.log("Replying to:", message);
  }}
/>

🎨 Themes and Styling

Built-in Themes

import ChatWidgetSystem, { themes } from 'chat-widget-system';

// Use predefined themes
<ChatWidgetSystem
  theme="dark"
  // ... other props
/>

// Custom theme
<ChatWidgetSystem
  customStyles={{
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
    background: '#2C3E50',
    text: '#ECF0F1'
  }}
  // ... other props
/>

Available Themes

• default - Clean, modern design
• dark - Dark mode with blue accents
• minimal - Simple, minimal design

Positioning

import ChatWidgetSystem, { positions } from 'chat-widget-system';

// Use predefined positions
<ChatWidgetSystem
  position="bottom-left"
  // ... other props
/>

// Custom position
<ChatWidgetSystem
  customStyles={{
    position: 'fixed',
    bottom: '2rem',
    left: '2rem',
    zIndex: 1000
  }}
  // ... other props
/>

Available Positions

• bottom-right - Bottom right corner
• bottom-left - Bottom left corner
• top-right - Top right corner
• top-left - Top left corner

🔧 Advanced Configuration

Configuration Helpers

import ChatWidgetSystem, {
  createCustomerConfig,
  createSupplierConfig,
} from "chat-widget-system";

// Customer configuration
const customerConfig = createCustomerConfig("support_team", {
  theme: "dark",
  position: "bottom-left",
  enableFileUpload: true,
  maxFileSize: 10 * 1024 * 1024, // 10MB
});

// Supplier configuration
const supplierConfig = createSupplierConfig("room456", {
  theme: "minimal",
  position: "top-right",
  enableReactions: true,
});

function App() {
  return (
    <div>
      <ChatWidgetSystem
        serverUrl="https://your-server.railway.app"
        userType="customer"
        user={customerUser}
        supplierVendorId="support_team"
        {...customerConfig}
      />

      <ChatWidgetSystem
        serverUrl="https://your-server.railway.app"
        userType="supplier"
        user={supplierUser}
        roomId="room456"
        {...supplierConfig}
      />
    </div>
  );
}

Feature Flags

<ChatWidgetSystem
  // ... other props
  enableFileUpload={false} // Disable file uploads
  enableEmojis={false} // Disable emoji picker
  enableReactions={false} // Disable reactions
  enableReplies={false} // Disable replies
  maxFileSize={2 * 1024 * 1024} // 2MB file limit
/>

Debug Mode

<ChatWidgetSystem
  // ... other props
  debug={true}
  onError={(error) => {
    console.error("Chat Widget Error:", error);
    // Send to error tracking service
    analytics.track("chat_error", error);
  }}
/>

🔐 Security

JWT Authentication

The widget requires a valid JWT token for authentication. The token should be obtained from your backend and include:

• User ID
• User type (customer/supplier)
• Vendor ID (for customers)
• Expiration time

Environment Variables

# In your client app
REACT_APP_CHAT_SERVER_URL=https://your-server.railway.app
REACT_APP_CHAT_DEBUG=false

🚀 Deployment

Server Deployment

1. Railway (Recommended - Free tier)
2. Render (Free tier)
3. Heroku ($7/month)

See DEPLOYMENT.md for detailed instructions.

Environment Variables

# Required
MONGODB_URI=mongodb+srv://username:[email protected]/database
JWT_SECRET=your_super_secret_jwt_key_here
NODE_ENV=production

# Optional
CORS_ORIGIN=https://yourdomain.com
RATE_LIMIT_MAX=100
MAX_FILE_SIZE=5242880

📊 Monitoring

Error Tracking

<ChatWidgetSystem
  // ... other props
  onError={(error) => {
    // Send to error tracking service
    Sentry.captureException(error);

    // Track in analytics
    analytics.track("chat_error", {
      error: error.message,
      userType: "customer",
      timestamp: new Date(),
    });
  }}
/>

Analytics

<ChatWidgetSystem
  // ... other props
  onMessage={(message) => {
    // Track message analytics
    analytics.track("chat_message_sent", {
      userType: "customer",
      messageType: message.messageType,
      timestamp: new Date(),
    });
  }}
/>

🔧 Troubleshooting

Common Issues

1. CORS Errors: Check server CORS configuration
2. Connection Timeouts: Verify server URL and network
3. JWT Errors: Check token expiration and secret
4. File Upload Failures: Verify file size limits and types

Debug Mode

Enable debug mode to see detailed logs:

<ChatWidgetSystem
  // ... other props
  debug={true}
/>

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🆘 Support

• Documentation: DEPLOYMENT.md
• Issues: GitHub Issues
• Discussions: GitHub Discussions

🔗 Links

• NPM Package
• GitHub Repository
• Live Demo