livechat-widget v0.1.1

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

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 
        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"
        }}
      />
    </div>
  );
}

Advanced Configuration

You can customize the appearance and behavior of the chat widget:

import { ChatWidgetClient } from 'livechat-widget';

function MyApp() {
  return (
    <ChatWidgetClient 
      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"
      }}
      // Customize appearance
      theme="dark"
      bgColor="#1a1a1a"
      textColor="#ffffff"
      bgInput="#2a2a2a"
      textInputColor="#ffffff"
      currentUserColor="#4caf50"
      // Customize dimensions
      width="400px"
      height="600px"
      // Customize border
      hasBorder={true}
      borderWidth="1px"
      borderColor="#333333"
      borderRadius="8px"
    />
  );
}

Props

Types

interface UserInfo {
  username: string;
  profile_image?: string;
}

interface ChatMessage {
  id: string;
  room_code: string;
  app_id: string;
  user_code: string;
  username: string;
  profile_image?: string;
  message: 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

License

MIT