@avetti/chat-widget

A React chat widget component for customer-supplier communication with real-time messaging, file uploads, and unread message tracking.

Features

• 🚀 Real-time messaging with Socket.IO
• 👥 Customer & Supplier interfaces with different behaviors
• 📁 File upload support with image thumbnails
• 🔔 Unread message tracking with persistent read status
• 🎨 Modern UI with Tailwind CSS styling
• 📱 Responsive design for mobile and desktop
• 🔒 JWT authentication support
• ⚡ TypeScript support

Installation

npm install @avetti/chat-widget

Quick Start

1. Basic Customer Usage

import React from "react";
import { ChatWidget, ChatWidgetProvider } from "@avetti/chat-widget";

function App() {
  const customerUser = {
    id: "customer1",
    name: "John Customer",
    email: "[email protected]",
    userType: "customer",
    immutableId: "[email protected]",
    token: "your-jwt-token-here",
  };

  return (
    <ChatWidgetProvider serverUrl="https://your-chat-server.com">
      <ChatWidget
        user={customerUser}
        vendorId="supplier1"
        onClose={() => console.log("Chat closed")}
      />
    </ChatWidgetProvider>
  );
}

2. Basic Supplier Usage

import React from "react";
import { ChatWidget, ChatWidgetProvider } from "@avetti/chat-widget";

function App() {
  const supplierUser = {
    id: "supplier1",
    name: "Tech Support",
    email: "[email protected]",
    userType: "supplier",
    vendorId: "supplier1",
    immutableId: "supplier1",
    token: "your-jwt-token-here",
  };

  return (
    <ChatWidgetProvider serverUrl="https://your-chat-server.com">
      <ChatWidget
        user={supplierUser}
        onClose={() => console.log("Chat closed")}
      />
    </ChatWidgetProvider>
  );
}

API Reference

ChatWidgetProvider

Wrapper component that provides configuration to all ChatWidget components.

Props

| Prop | Type | Default | Description | | -------------- | ---------- | ------------------------- | -------------------------------- | | serverUrl | string | "http://localhost:5001" | URL of the chat server | | config | object | {} | Additional configuration options | | onError | function | undefined | Error callback | | onConnect | function | undefined | Connection callback | | onDisconnect | function | undefined | Disconnection callback |

ChatWidget

Main chat widget component.

Props

| Prop | Type | Required | Description | | -------------- | ---------- | -------- | ------------------------------------ | | user | object | ✅ | User object with authentication info | | vendorId | string | ❌ | Target vendor ID (for customers) | | onClose | function | ❌ | Callback when chat is closed | | onConnect | function | ❌ | Connection callback | | onDisconnect | function | ❌ | Disconnection callback | | onError | function | ❌ | Error callback | | serverUrl | string | ❌ | Override server URL | | config | object | ❌ | Additional configuration |

User Object Structure

interface User {
  id: string; // Unique user ID
  name: string; // Display name
  email: string; // User email
  userType: "customer" | "supplier";
  immutableId: string; // Email for customers, vendorId for suppliers
  token: string; // JWT authentication token
  vendorId?: string; // Required for suppliers
}

Configuration

Default Configuration

const defaultConfig = {
  serverUrl: "http://localhost:5001",
  reconnectAttempts: 5,
  reconnectDelay: 1000,
  uploadMaxSize: 10 * 1024 * 1024, // 10MB
  allowedFileTypes: [
    "image/jpeg",
    "image/png",
    "image/gif",
    "application/pdf",
    "text/plain",
  ],
};

Custom Configuration

<ChatWidgetProvider
  config={{
    uploadMaxSize: 5 * 1024 * 1024, // 5MB
    allowedFileTypes: ["image/jpeg", "image/png"],
  }}
>
  <ChatWidget user={user} />
</ChatWidgetProvider>

Server Requirements

The chat widget requires a compatible server with the following endpoints:

• POST /api/upload - File upload endpoint
• POST /api/messages/mark-read - Mark messages as read
• POST /api/cleanup-duplicates - Cleanup duplicate rooms
• POST /api/clear-all-data - Clear all data
• GET /api/health - Health check

Socket.IO events:

• join-chat - Join a chat room
• send-message - Send a message
• typing - Typing indicator
• stop-typing - Stop typing indicator

Styling

The component includes built-in Tailwind CSS styles. To customize the appearance, you can:

1. Override CSS classes in your application
2. Use CSS-in-JS solutions
3. Modify the component's className props

Browser Support

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

License

MIT

Support

For support and questions, please contact the Avetti team.