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

# Using npm
npm install livechat-widget

# Using yarn
yarn add livechat-widget

# Using pnpm
pnpm add livechat-widget

Usage

Basic Usage

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

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

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:

<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:

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

License

MIT