Mirza Chat Box

A standalone JavaScript chat widget that can be easily integrated into any website with a simple script tag.

Features

1. Socket Connection

   • Real-time communication with WebSocket
   • Automatic reconnection
   • Event-based messaging

2. Authentication System

   • Login/signup functionality
   • Token validation and storage
   • Authentication state management

3. Support Mode Management

   • Human support request/cancel functionality
   • Support mode state management
   • Persistence in localStorage

4. Message Rating System

   • Message rating UI and functionality
   • Optimistic updates and server responses

5. Typing Indicator

   • Real-time typing status
   • Socket events for typing status

6. Error Handling

   • Comprehensive error handling
   • User-friendly error messages

7. UI Improvements

   • Message rendering with proper formatting
   • Support for system messages
   • Styling and animations

8. Localization Support

   • Support for RTL languages
   • Proper text direction

9. Debug Mode

   • Optional debug information
   • Developer tools

10. Performance Optimization

    • Efficient message rendering
    • Optimized DOM updates

Integration with jsDelivr CDN

You can easily integrate Mirza Chat Box into your website using jsDelivr CDN:

<!-- Add this to your HTML file -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mirza-chat-box.js"></script>
<script>
  // Initialize the chat widget
  window.addEventListener('DOMContentLoaded', function() {
    MirzaChat.init({
      apiUrl: 'https://your-api-url.com',
      websiteId: 'your-website-id',
      primaryColor: '#0066FF',
      companyName: 'Your Company Name'
    });
  });
</script>

Using Data Attributes

You can also configure the chat widget using data attributes on the script tag:

<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mirza-chat-box.js"
  data-api-url="https://your-api-url.com"
  data-website-id="your-website-id"
  data-primary-color="#0066FF"
  data-company-name="Your Company Name"
  data-position="bottom-right"
  data-initial-message="Hello! How can I help you today?"
></script>

Using Global Configuration Variable

Another option is to set a global configuration variable before loading the script:

<script>
  window.MIRZA_CHAT_CONFIG = {
    apiUrl: 'https://your-api-url.com',
    websiteId: 'your-website-id',
    primaryColor: '#0066FF',
    companyName: 'Your Company Name'
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mirza-chat-box.js"></script>

Usage

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mirza-chat-box.js"></script>
<script>
  const chatBox = new MirzaChatBox({
    apiUrl: 'https://api.example.com',
    websiteId: 'your-website-id',
    primaryColor: '#0066FF',
    companyName: 'پشتیبان میرزا'
  });
  
  chatBox.init();
</script>

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiUrl | string | - | API endpoint for the chat service | | websiteId | string | - | Unique identifier for your website | | primaryColor | string | '#0066FF' | Primary color for the chat widget | | secondaryColor | string | '#E8F1FF' | Secondary color for the chat widget | | companyName | string | 'پشتیبان میرزا' | Company name displayed in the chat header | | position | string | 'bottom-right' | Position of the chat widget ('bottom-right' or 'bottom-left') | | initialMessage | string | 'سلام 😊 من میرزا چت هستم. چطور میتونم کمکتون کنم؟ 🤖' | Initial message shown when chat is opened |

API Methods

Once initialized, you can control the chat widget programmatically:

// Open the chat widget
MirzaChat.openChat();

// Close the chat widget
MirzaChat.closeChat();

// Update configuration dynamically
MirzaChat.updateConfig({
  primaryColor: '#FF0000',
  companyName: 'New Company Name'
});

Development

# Install dependencies
npm install

# Build for production
npm run build

# Development with hot reload
npm run dev

License

MIT