💬 Telegram Multi-Bot Live Chat System

A comprehensive live chat management system that allows multiple Telegram bots to connect with a centralized admin panel. Admins can manage multiple bots, handle conversations from different users simultaneously, and receive real-time notifications.

✨ Features

🤖 Multi-Bot Support

Multiple Telegram Bots: Manage and monitor several Telegram bots from one dashboard
Dynamic Bot Assignment: Assign specific bots to different admin users
Bot Status Management: Enable/disable bots on the fly
Webhook Configuration: Automatic webhook setup for Telegram integration

👥 User & Role Management

Role-Based Access Control: Super Admin and Admin roles with different permissions
User Assignment: Assign specific bots to different admin users
Secure Authentication: JWT-based authentication with bcrypt password hashing
Password Management: Built-in password change functionality

💬 Real-Time Chat Features

Live Chat Interface: WhatsApp-like chat interface for seamless communication
Multi-User Support: Handle multiple conversations simultaneously
Infinite Scroll: Efficient message pagination (20 messages per batch)
Message Search: Quick search functionality to find specific messages
Real-time Updates: WebSocket-powered instant message delivery
User Info Display: View user details and conversation metadata

📱 Mobile-Responsive Design

Fully Responsive: Optimized for desktop, tablet, and mobile devices
Touch-Friendly: Smooth scrolling with iOS webkit optimization
Adaptive Layouts: Clamp-based responsive sizing for all screen sizes
Mobile-First: Tables, forms, and buttons adapt perfectly to small screens

🔔 Telegram Notifications

Admin Notifications: Receive Telegram notifications when users send messages
Per-Bot Configuration: Set different Telegram notification IDs for each bot assignment
Easy Setup: Simple integration with @userinfobot for Telegram ID retrieval

🎨 Modern UI/UX

WhatsApp-Inspired Design: Familiar and intuitive interface
Dark Mode Support: Eye-friendly color scheme
Emoji Support: Tab navigation with emoji icons
Smooth Animations: Polished user experience with transitions

🛠️ Tech Stack

Backend

Framework: NestJS 10.4
Language: TypeScript 5.6
Database: PostgreSQL with TypeORM
Authentication: JWT + Passport
Real-time: Socket.IO + WebSockets
Telegram: Telegraf (nestjs-telegraf)
File Upload: Multer

Frontend

Framework: Remix 2.5 (React)
Language: TypeScript 5.3
Styling: CSS (with CSS-in-JS inline styles)
Real-time: Socket.IO Client
Build Tool: Vite 5.0

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js >= 18.0.0
npm or yarn
PostgreSQL >= 12
Telegram Bot Token(s) - Get from @BotFather
Public Domain/URL - For webhook configuration (ngrok for development)

🚀 Installation

1. Clone the Repository

git clone https://github.com/dhanisetiaji/livechatbot.git
cd livechatbot

2. Backend Setup

cd backend

# Install dependencies
npm install

# Create environment file
cp .env.example .env

Edit .env file with your configuration:

# Database
DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=your_password
DB_DATABASE=livechat_db

# JWT
JWT_SECRET=your-super-secret-jwt-key-change-this

# Server
PORT=3001

# Frontend URL (for CORS)
FRONTEND_URL=http://localhost:5173

# Webhook URL for Telegram bots (without trailing slash)
WEBHOOK_URL=https://yourdomain.com

# Node Environment (development/production)
NODE_ENV=development

# Timezone (leave as UTC for consistent timestamp handling)
TZ=UTC

Note: The backend uses UTC internally and converts to local time in the frontend. This ensures consistent timestamps across different server timezones.

3. Database Setup

# Create PostgreSQL database
createdb livechat_db

# Run migrations
npm run migration:run

# (Optional) Seed initial data
npm run seed

4. Frontend Setup

cd ../frontend

# Install dependencies
npm install

# Create environment file
cp .env.example .env

Edit frontend .env file:

# Backend API URL
VITE_API_URL=http://localhost:3001

# WebSocket URL (same as API URL)
VITE_WS_URL=http://localhost:3001

# Frontend Port
PORT=5173

# Base Path (use / for root, or /livechat for subdirectory)
VITE_BASE_PATH=/

Note: If deploying to a subdirectory (e.g., https://yourdomain.com/livechat), set:

VITE_BASE_PATH=/livechat

🏃 Running the Application

Development Mode

Terminal 1 - Backend:

cd backend
npm run start:dev

Backend will run on http://localhost:3001

Terminal 2 - Frontend:

cd frontend
npm run dev

Frontend will run on http://localhost:5173 (or the PORT specified in .env)

Production Mode

Backend:

cd backend

# Set NODE_ENV to production in .env
# NODE_ENV=production

npm run build
npm run start:prod

Frontend:

cd frontend

# Update .env with production URLs
# VITE_API_URL=https://your-api-domain.com
# VITE_WS_URL=https://your-api-domain.com
# PORT=3000 (or your preferred port)

npm run build

# Start with .env file (reads PORT from .env)
npm start

# OR start with custom port
npm run start:prod

⚠️ Production Notes:

Backend automatically disables database query logging when NODE_ENV=production
Database synchronize is disabled in production (use migrations instead)
Ensure all environment variables are properly set
Use process managers like PM2 for production deployments
Configure proper SSL certificates for HTTPS

Deploying to Subdirectory

If deploying frontend to a subdirectory (e.g., https://yourdomain.com/livechat):

Set Base Path in .env:

VITE_BASE_PATH=/livechat

Rebuild the application:

npm run build

Configure your web server (Nginx example):

# Frontend at /livechat
location /livechat {
    alias /path/to/your/frontend/build/client;
    try_files $uri $uri/ /livechat/index.html;
}

# API requests
location /api {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

# WebSocket
location /socket.io {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

For Apache (.htaccess):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /livechat/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /livechat/index.html [L]
</IfModule>

⚙️ Configuration

Setting Up Telegram Bots

Create Bot with BotFather
- Open Telegram and search for @BotFather
- Send /newbot and follow instructions
- Copy the bot token
Add Bot in Admin Panel
- Log in to admin panel
- Navigate to "Bot Management" tab
- Click "Add Bot"
- Enter bot name and token
- Activate the bot
Configure Webhook
- Set your WEBHOOK_URL in backend .env
- Restart backend server
- Bot will automatically register webhook

Getting Telegram Notification ID

Open Telegram and message @userinfobot
Copy your Telegram ID
In Admin Panel → User Management → Assign Bots
Enter your Telegram ID in the notification field
You'll now receive notifications when users message your bot

📁 Project Structure

livechatbot/
├── backend/
│   ├── src/
│   │   ├── auth/              # Authentication module
│   │   ├── chat/              # Chat & messaging logic
│   │   ├── telegram/          # Telegram bot handlers
│   │   ├── user-management/   # User & bot management
│   │   ├── config/            # Configuration files
│   │   ├── entities/          # TypeORM entities
│   │   └── main.ts            # Application entry point
│   ├── .env.example
│   └── package.json
│
├── frontend/
│   ├── app/
│   │   ├── routes/
│   │   │   ├── _index.tsx     # Chat interface
│   │   │   ├── admin.tsx      # Admin panel
│   │   │   └── login.tsx      # Login page
│   │   ├── services/          # API services
│   │   ├── styles/            # Global styles
│   │   └── root.tsx           # Root component
│   └── package.json
│
└── README.md

🔐 Default Credentials

After running the seed script, you can log in with:

Super Admin:

Username: superadmin
Password: `admin123``

⚠️ Important: Change these credentials immediately in production!

🌐 API Endpoints

Authentication

POST /auth/login - User login
POST /auth/change-password - Change user password

User Management

GET /user-management/users - Get all users
POST /user-management/users - Create new user
PATCH /user-management/users/:id - Update user
DELETE /user-management/users/:id - Delete user

Bot Management

GET /user-management/bots - Get all bots
POST /user-management/bots - Create new bot
PATCH /user-management/bots/:id - Update bot
DELETE /user-management/bots/:id - Delete bot
POST /user-management/assign-bots - Assign bots to user

Chat

GET /chat/users - Get all chat users
GET /chat/users/:userId/messages - Get user messages (with pagination)
POST /chat/send - Send message to user
POST /chat/upload - Upload file/media

WebSocket Events

connection - Client connects
message - New message received
disconnect - Client disconnects

📱 Usage

Admin Panel

Login
- Navigate to /login
- Enter credentials
- Access admin panel or chat
Manage Bots
- Go to "Bot Management" tab
- Add/Edit/Delete bots
- Toggle bot status
Manage Users
- Go to "User Management" tab
- Create admin users
- Assign bots to users
- Set Telegram notification IDs
Handle Chats
- Click "💬 Chat" button
- Select user from list
- View message history
- Send replies in real-time
- Search messages

Features Walkthrough

Infinite Scroll:

Chat loads 20 messages initially
Scroll to top to load older messages
Or click "Load older messages" button

Search Messages:

Type in search box to filter messages
Search works across entire conversation
Results update in real-time

Notifications:

Set your Telegram ID in admin settings
Receive instant notifications when users message
Each bot can have different notification settings

🔧 Troubleshooting

Webhook Issues

If bots don't receive messages:

# Check webhook status
curl https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getWebhookInfo

# Delete existing webhook
curl https://api.telegram.org/bot<YOUR_BOT_TOKEN>/deleteWebhook

# Restart backend to re-register webhook

Database Connection

If you get database connection errors:

# Verify PostgreSQL is running
pg_isready

# Check connection settings in .env
# Ensure database exists
psql -l | grep livechat_db

CORS Issues

If frontend can't connect to backend:

Verify FRONTEND_URL in backend .env
Check that ports match (default: frontend=5173, backend=3001)
Ensure both services are running

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

NestJS - Backend framework
Remix - Frontend framework
Telegraf - Telegram bot framework
TypeORM - ORM for TypeScript
Socket.IO - Real-time communication

📧 Support

For support, email your-email@example.com or open an issue in the repository.

Made with ❤️ for seamless Telegram customer support

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
backend		backend
frontend		frontend
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

💬 Telegram Multi-Bot Live Chat System

✨ Features

🤖 Multi-Bot Support

👥 User & Role Management

💬 Real-Time Chat Features

📱 Mobile-Responsive Design

🔔 Telegram Notifications

🎨 Modern UI/UX

🛠️ Tech Stack

Backend

Frontend

📋 Prerequisites

🚀 Installation

1. Clone the Repository

2. Backend Setup

3. Database Setup

4. Frontend Setup

🏃 Running the Application

Development Mode

Production Mode

Deploying to Subdirectory

⚙️ Configuration

Setting Up Telegram Bots

Getting Telegram Notification ID

📁 Project Structure

🔐 Default Credentials

🌐 API Endpoints

Authentication

User Management

Bot Management

Chat

WebSocket Events

📱 Usage

Admin Panel

Features Walkthrough

🔧 Troubleshooting

Webhook Issues

Database Connection

CORS Issues

🤝 Contributing

📝 License

🙏 Acknowledgments

📧 Support

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages