npm package: @faruksina/chat-widget
Description: A React chat widget component for customer-supplier communication
Author: Avetti
Latest version: 1.2.6

# @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

```bash
npm install @avetti/chat-widget
```

## Quick Start

### 1. Basic Customer Usage

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

function App() {
  const customerUser = {
    id: "customer1",
    name: "John Customer",
    email: "john@example.com",
    userType: "customer",
    immutableId: "john@example.com",
    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

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

function App() {
  const supplierUser = {
    id: "supplier1",
    name: "Tech Support",
    email: "support@tech.com",
    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

```typescript
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

```javascript
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

```jsx
<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.