livechat-widget/README.md

LiveChat Widget for Next.js applications

# LiveChat Widget

A customizable real-time chat widget for Next.js applications, built with React and TypeScript. This widget provides seamless integration for live chat functionality during streaming events.

## Features

- **Real-time messaging** - Instant message delivery via WebSockets
- **Customizable UI** - Easily adapt the widget to match your brand
- **Responsive design** - Works on desktop and mobile devices
- **Secure authentication** - Uses App ID for seamless authentication
- **Easy integration** - Simple to add to any Next.js application
- **Admin role support** - Special styling for admin messages
- **Tailwind CSS integration** - Use Tailwind classes for styling

## Installation

```bash
# Using npm
npm install livechat-widget

# Using yarn
yarn add livechat-widget

# Using pnpm
pnpm add livechat-widget
```

## Usage

### Basic Usage

```tsx
import { ChatWidgetClient } from 'livechat-widget';

function MyApp() {
  return (
    <div>
      <h1>My Streaming App</h1>
      
      <ChatWidgetClient 
        // Required props
        appId="your-app-id"
        roomCode="room-123"
        apiUrl="https://your-api-url.com"
        wsUrl="wss://your-websocket-url.com"
        userInfo={{
          username: "User123",
          profile_image: "/path/to/profile.png",
          role: "user" // 'admin' or 'user'
        }}
        userCode="user-123"
      />
    </div>
  );
}
```

### Advanced Configuration

```tsx
import { ChatWidgetClient } from 'livechat-widget';

function MyApp() {
  return (
    <ChatWidgetClient 
      // Required props
      appId="your-app-id"
      roomCode="room-123"
      roomName="Live Stream Chat"
      apiUrl="https://your-api-url.com"
      wsUrl="wss://your-websocket-url.com"
      userInfo={{
        username: "User123",
        profile_image: "/path/to/profile.png",
        role: "user" // 'admin' or 'user'
      }}
      userCode="user-123"
      // Customize appearance
      theme="dark"
      bgColor="#1a1a1a"
      textColor="#ffffff"
      bgInput="#2a2a2a"
      textInputColor="#ffffff"
      currentUserColor="#4caf50"
      adminColor="#9c27b0"
      // Tailwind CSS classes
      bgColorClass="bg-gray-900"
      textColorClass="text-white"
      bgInputClass="bg-gray-800"
      textInputColorClass="text-white"
      currentUserColorClass="text-green-500"
      adminColorClass="text-purple-500"
      buttonBgClass="bg-purple-500"
      // Customize dimensions
      width="400px"
      height="600px"
      // Customize border
      hasBorder={true}
      borderWidth="1px"
      borderColor="#333333"
      borderRadius="8px"
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `roomCode` | string | *Required* | Unique identifier for the chat room |
| `appId` | string | *Required* | Application ID for authentication |
| `roomName` | string | "Chat Room" | Display name for the chat room |
| `theme` | 'light' \| 'dark' | 'light' | Color theme of the widget |
| `bgColor` | string | - | Background color of the chat widget |
| `textColor` | string | - | Text color for messages |
| `bgInput` | string | - | Background color of the input field |
| `textInputColor` | string | - | Text color for the input field |
| `currentUserColor` | string | - | Color for the current user's name |
| `adminColor` | string | - | Color for admin user's name |
| `bgColorClass` | string | - | Tailwind class for background color |
| `textColorClass` | string | - | Tailwind class for text color |
| `bgInputClass` | string | - | Tailwind class for input background |
| `textInputColorClass` | string | - | Tailwind class for input text |
| `currentUserColorClass` | string | - | Tailwind class for current user's name |
| `adminColorClass` | string | - | Tailwind class for admin user's name |
| `buttonBgColor` | string | - | Background color for the send button |
| `buttonBgClass` | string | - | Tailwind class for send button background |
| `userInfo` | UserInfo | *Required* | User information object |
| `userCode` | string | *Required* | Unique identifier for the user |
| `width` | string \| number | "100%" | Width of the chat widget |
| `height` | string \| number | "400px" | Height of the chat widget |
| `hasBorder` | boolean | false | Whether to show border |
| `borderWidth` | string \| number | "1px" | Width of the border |
| `borderColor` | string | - | Color of the border |
| `borderRadius` | string \| number | "4px" | Border radius of the widget |
| `apiUrl` | string | *Required* | Base URL for the API endpoints |
| `wsUrl` | string | *Required* | WebSocket server URL |

## Types

```tsx
interface UserInfo {
  username: string;
  profile_image?: string;
  role?: 'admin' | 'user';
}

interface ChatMessage {
  id: string;
  room_code: string;
  app_id: string;
  user_code: string;
  user_info: UserInfo;
  content: string;
  created_at: string;
}
```

## Backend Requirements

This widget requires a compatible backend server that provides:

1. RESTful API endpoints for:
   - Creating/joining chat rooms
   - Fetching message history
   - User authentication

2. WebSocket server for real-time messaging

## Admin Features

The widget supports special styling for admin users:

1. Set `role: "admin"` in the userInfo object to designate a user as admin
2. Admin messages will be displayed with:
   - Different background color (purple by default)
   - Different text color
   - Visual distinction from regular user messages

Example of setting up an admin user:

```tsx
<ChatWidgetClient 
  appId="your-app-id"
  roomCode="room-123"
  userInfo={{
    username: "AdminUser",
    profile_image: "/admin.png",
    role: "admin"
  }}
  adminColor="#9c27b0"
  adminColorClass="text-purple-500"
/>
```

## Tailwind CSS Integration

You can use Tailwind CSS classes directly for styling:

```tsx
<ChatWidgetClient 
  bgColorClass="bg-gray-900"
  textColorClass="text-white"
  currentUserColorClass="text-green-500"
  adminColorClass="text-purple-500"
  buttonBgClass="bg-purple-500"
/>
```

## License

MIT