'use client'; import React, { useState, useEffect, useCallback, useRef } from 'react'; import { io, Socket } from 'socket.io-client'; import { Smartphone, QrCode, Plus, Trash2, Wifi, WifiOff, RefreshCw, Link2, Cloud, Settings, LogOut, Copy, Check, ChevronDown, Loader2, AlertCircle, CheckCircle2, XCircle, Key, Shield, MessageSquare, Send, ExternalLink, Info, Server, Zap } from 'lucide-react'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from '@/components/ui/dialog'; import { ScrollArea } from '@/components/ui/scroll-area'; import { Separator } from '@/components/ui/separator'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Alert, AlertDescription, AlertTitle, } from '@/components/ui/alert'; import { useToast } from '@/hooks/use-toast'; // ── Types ────────────────────────────────────────────────────────────────── interface Device { id: string; body: string; name: string | null; status: string; webhook: string | null; connectionDriver: string; metaBusinessAccountId: string | null; metaPhoneNumberId: string | null; metaAccessToken: string | null; metaWebhookVerifyToken: string | null; metaBusinessName: string | null; metaDisplayPhoneNumber: string | null; metaVerifiedName: string | null; metaConnectedAt: string | null; messageSent: number; createdAt: string; updatedAt: string; } type ViewMode = 'devices' | 'scan' | 'meta-connect'; // ── Constants ────────────────────────────────────────────────────────────── const WA_GATEWAY_PORT = 3100; /** * Socket.IO & Gateway Connection Configuration for cPanel Node.js Hosting * * FIX for "timeout" & "xhr poll error": * 1. WebSocket transport ONLY — prevents "xhr poll error" on cPanel/Apache * 2. Extended connection timeout — shared hosting has higher latency * 3. Auto-retry with exponential backoff * 4. Ping/pong keepalive to maintain connection through proxy * * In dev mode: connects directly to gateway port 3100 * In cPanel/prod mode: connects through Caddy proxy using XTransformPort */ /** * Detect if we're in development mode (direct connection to gateway) * or production/cPanel mode (connection through proxy) */ function isDevMode() { if (typeof window === 'undefined') return false; const hostname = window.location.hostname; // Development: localhost or direct IP access on port 3000 return hostname === 'localhost' || hostname === '127.0.0.1'; } function getSocketConfig() { const dev = isDevMode(); // In development, connect directly to the gateway on port 3100 // In production (cPanel), connect through Caddy proxy using XTransformPort const url = dev ? `http://localhost:${WA_GATEWAY_PORT}` : undefined; return { // Direct connection URL (dev only) ...(url ? { url } : {}), // Use WebSocket ONLY to prevent "xhr poll error" on cPanel transports: ['websocket'], path: '/socket.io/', // Extended timeouts for shared hosting timeout: 45000, // 45s connection timeout (was 20s) reconnection: true, reconnectionAttempts: 10, reconnectionDelay: 1000, reconnectionDelayMax: 10000, forceNew: true, upgrade: false, // Don't try to upgrade — already on WebSocket rememberUpgrade: false, // Query params for Caddy proxy routing (production only) ...(!dev ? { query: { XTransformPort: String(WA_GATEWAY_PORT) } } : {}), }; } /** * Build URL for gateway REST API requests * In dev: direct connection to gateway port * In prod: through Caddy proxy using XTransformPort */ function getGatewayApiUrl(endpoint) { if (isDevMode()) { return `http://localhost:${WA_GATEWAY_PORT}${endpoint}`; } const separator = endpoint.includes('?') ? '&' : '?'; return `${endpoint}${separator}XTransformPort=${WA_GATEWAY_PORT}`; } // ── Main Component ───────────────────────────────────────────────────────── export default function WhatsAppGateway() { const [devices, setDevices] = useState([]); const [loading, setLoading] = useState(true); const [viewMode, setViewMode] = useState('devices'); const [selectedDevice, setSelectedDevice] = useState(null); const [addDialogOpen, setAddDialogOpen] = useState(false); const [metaDialogOpen, setMetaDialogOpen] = useState(false); const { toast } = useToast(); // Fetch devices const fetchDevices = useCallback(async () => { try { const res = await fetch('/api/devices'); const data = await res.json(); if (data.devices) { setDevices(data.devices); } } catch (err) { console.error('Failed to fetch devices:', err); } finally { setLoading(false); } }, []); useEffect(() => { fetchDevices(); }, [fetchDevices]); // Add device const [newDeviceBody, setNewDeviceBody] = useState(''); const [newDeviceName, setNewDeviceName] = useState(''); const [newDeviceDriver, setNewDeviceDriver] = useState('baileys'); const [adding, setAdding] = useState(false); const handleAddDevice = async () => { if (!newDeviceBody.trim()) return; setAdding(true); try { const res = await fetch('/api/devices', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ body: newDeviceBody.trim(), name: newDeviceName.trim() || newDeviceBody.trim(), connectionDriver: newDeviceDriver, }), }); const data = await res.json(); if (data.device) { toast({ title: 'Device Added', description: `${newDeviceBody} has been added successfully.` }); setNewDeviceBody(''); setNewDeviceName(''); setAddDialogOpen(false); fetchDevices(); } else { toast({ title: 'Error', description: data.error || 'Failed to add device', variant: 'destructive' }); } } catch (err) { toast({ title: 'Error', description: 'Failed to add device', variant: 'destructive' }); } finally { setAdding(false); } }; // Delete device const handleDeleteDevice = async (id: string, body: string) => { if (!confirm(`Delete device ${body}? This will also disconnect it.`)) return; try { const res = await fetch(`/api/devices/${id}`, { method: 'DELETE' }); if (res.ok) { toast({ title: 'Device Deleted', description: `${body} has been removed.` }); fetchDevices(); if (selectedDevice?.id === id) { setViewMode('devices'); setSelectedDevice(null); } } } catch (err) { toast({ title: 'Error', description: 'Failed to delete device', variant: 'destructive' }); } }; // ── Render ───────────────────────────────────────────────────────────── return (
{/* Header */}

WhatsApp Gateway

Multi-Device • Meta Cloud API v23.0 • cPanel Ready

{devices.filter(d => d.status === 'Connected').length} Online Add New Device Add a WhatsApp number to connect via QR scan or Meta Cloud API.
setNewDeviceBody(e.target.value)} />

Country code + number, no + or spaces

setNewDeviceName(e.target.value)} />

QR Scan uses Baileys library. Meta Cloud API uses official WhatsApp Business API.

{/* Main Content */}
{viewMode === 'devices' && ( { setSelectedDevice(device); setViewMode('scan'); }} onMetaConnect={(device) => { setSelectedDevice(device); setMetaDialogOpen(true); }} onDelete={(id, body) => handleDeleteDevice(id, body)} onRefresh={fetchDevices} /> )} {viewMode === 'scan' && selectedDevice && ( { setViewMode('devices'); setSelectedDevice(null); fetchDevices(); }} onConnected={() => fetchDevices()} /> )}
{/* Meta Connect Dialog */} {selectedDevice && ( { setMetaDialogOpen(open); if (!open) fetchDevices(); }} onSave={async (metaData) => { try { const res = await fetch(`/api/devices/${selectedDevice.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...metaData, connectionDriver: 'meta_cloud_api', status: 'Connected', metaConnectedAt: new Date().toISOString(), }), }); if (res.ok) { toast({ title: 'Meta API Connected', description: 'Device configured with Meta Cloud API.' }); setMetaDialogOpen(false); fetchDevices(); } } catch (err) { toast({ title: 'Error', description: 'Failed to save Meta configuration', variant: 'destructive' }); } }} /> )} {/* Footer */}
WhatsApp Gateway v3.0 • Meta Cloud API v23.0 • Baileys 7.x WebSocket Transport • cPanel Compatible
); } // ── Device List Component ────────────────────────────────────────────────── function DeviceList({ devices, loading, onScan, onMetaConnect, onDelete, onRefresh, }: { devices: Device[]; loading: boolean; onScan: (device: Device) => void; onMetaConnect: (device: Device) => void; onDelete: (id: string, body: string) => void; onRefresh: () => void; }) { if (loading) { return (
); } if (devices.length === 0) { return (

No Devices Yet

Add a WhatsApp number to get started. You can connect via QR scan or Meta Cloud API.

cPanel Compatible — Fixed WebSocket-only transport prevents "xhr poll error" and "timeout" errors that occur on cPanel/Apache hosting. No HTTP long-polling is used. ); } return (

Devices ({devices.length})

{devices.map((device) => ( {/* Status indicator bar */}
{device.status === 'Connected' ? : }

{device.name || device.body}

{device.body}

{device.status}
{device.connectionDriver === 'meta_cloud_api' ? ( <> Meta API ) : ( <> Baileys )} {device.messageSent > 0 && ( {device.messageSent} )}
{device.connectionDriver === 'baileys' ? ( ) : ( )}
))}
); } // ── QR Scan View Component ───────────────────────────────────────────────── function QRScanView({ device, onBack, onConnected, }: { device: Device; onBack: () => void; onConnected: () => void; }) { const [socket, setSocket] = useState(null); const [connected, setConnected] = useState(false); const [qrCode, setQrCode] = useState(null); const [statusMessage, setStatusMessage] = useState('Connecting to gateway...'); const [statusType, setStatusType] = useState<'loading' | 'info' | 'success' | 'error' | 'warning'>('loading'); const [logs, setLogs] = useState([]); const [userInfo, setUserInfo] = useState<{ name?: string; number?: string; ppUrl?: string }>({}); const [retryCount, setRetryCount] = useState(0); const [transportType, setTransportType] = useState(''); const [gatewayOnline, setGatewayOnline] = useState(false); const maxRetries = 10; const socketRef = useRef(null); const keepaliveRef = useRef(null); const appendLog = useCallback((text: string) => { const ts = new Date().toLocaleTimeString(); setLogs(prev => [...prev.slice(-50), `${ts} - ${text}`]); }, []); const disconnectSocket = useCallback(() => { // Stop keepalive ping if (keepaliveRef.current) { clearInterval(keepaliveRef.current); keepaliveRef.current = null; } if (socketRef.current) { try { socketRef.current.removeAllListeners(); } catch {} try { socketRef.current.disconnect(); } catch {} socketRef.current = null; } }, []); // Check gateway health before connecting const checkGatewayHealth = useCallback(async () => { try { const res = await fetch(getGatewayApiUrl('/api/health'), { signal: AbortSignal.timeout(5000), }); if (res.ok) { const data = await res.json(); setGatewayOnline(true); appendLog(`[Gateway] Online — v${data.version}, transport: ${data.transport_mode}`); return true; } } catch (err) { appendLog('[Gateway] Health check failed — gateway may be offline'); } setGatewayOnline(false); return false; }, [appendLog]); const initScan = useCallback(() => { disconnectSocket(); setQrCode(null); setConnected(false); setStatusMessage('Connecting to gateway...'); setStatusType('loading'); appendLog('[Scan] Initializing WebSocket connection...'); // ── KEY FIX: Socket.IO Connection for cPanel ──────────────────── // // ROOT CAUSE of "timeout" & "xhr poll error": // - cPanel/Apache doesn't properly forward Socket.IO HTTP long-polling // - The polling transport causes "xhr poll error" because Apache strips // or corrupts the polling requests/responses // - When polling fails, Socket.IO never upgrades to WebSocket, causing // a "timeout" as the connection never completes // // SOLUTION: // - Use WebSocket transport ONLY (no polling at all) // - WebSocket connections work through Apache/cPanel proxy correctly // - Extended timeout (45s) for shared hosting latency // - Auto-reconnect with increasing delay // - Keepalive ping/pong to prevent idle disconnection // const config = getSocketConfig(); const newSocket = io(config); socketRef.current = newSocket; setSocket(newSocket); // ── Connection timeout ───────────────────────────────────────────── const connectTimeout = setTimeout(() => { if (!newSocket.connected) { appendLog('[Timeout] No response within 45s — gateway may be offline'); setStatusMessage('Connection timed out. Check if the gateway service is running.'); setStatusType('error'); if (retryCount < maxRetries) { setRetryCount(prev => prev + 1); } } }, 45000); // ── Socket Events ────────────────────────────────────────────────── newSocket.on('connect', () => { clearTimeout(connectTimeout); setRetryCount(0); const transport = newSocket.io.engine.transport.name; setTransportType(transport); appendLog(`[Socket] ✅ Connected (sid: ${newSocket.id}, transport: ${transport})`); setStatusMessage('Socket connected. Starting WhatsApp connection...'); setStatusType('info'); // Start WhatsApp connection newSocket.emit('StartConnection', device.body); appendLog('[Scan] StartConnection sent'); // ── Keepalive: Ping gateway every 20s ────────────────────────── if (keepaliveRef.current) clearInterval(keepaliveRef.current); keepaliveRef.current = setInterval(() => { if (newSocket.connected) { newSocket.emit('ping-gateway'); } }, 20000); }); // Track transport upgrades newSocket.io.engine.on('upgrade', (t: any) => { setTransportType(t.name); appendLog(`[Socket] Transport upgraded to: ${t.name}`); }); newSocket.on('pong-gateway', (data: { timestamp: number; transport: string }) => { const latency = Date.now() - data.timestamp; appendLog(`[Keepalive] Pong received (${latency}ms, transport: ${data.transport})`); }); newSocket.on('qrcode', (r: { token: string; data: string; message: string }) => { if (r.token === device.body) { setQrCode(r.data); setStatusMessage(r.message || 'Scan this QR code with your WhatsApp'); setStatusType('warning'); appendLog('[QR] ✅ QR code received. Please scan with WhatsApp.'); } }); newSocket.on('connection-open', (r: { token: string; user: any; ppUrl: string }) => { if (r.token === device.body) { setConnected(true); setQrCode(null); setStatusMessage('Device connected successfully!'); setStatusType('success'); setUserInfo({ name: r.user?.name || r.user?.id?.split('@')[0] || 'Unknown', number: r.token, ppUrl: r.ppUrl || '', }); appendLog('[Connected] ✅ Device connected successfully!'); // Update device status in DB fetch(`/api/devices/${device.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'Connected' }), }).catch(() => {}); onConnected(); } }); newSocket.on('pairing-code', (r: { token: string; code: string }) => { if (r.token === device.body) { appendLog(`[Pairing Code] ${r.code}`); setStatusMessage(`Pairing code: ${r.code}`); setStatusType('info'); } }); newSocket.on('Unauthorized', (r: { token: string }) => { if (r.token === device.body) { setStatusMessage('Unauthorized access'); setStatusType('error'); appendLog('[Error] Unauthorized'); } }); newSocket.on('message', (r: { token: string; message: string }) => { if (r.token === device.body) { appendLog(r.message); if (r.message.includes('Connection closed') || r.message.includes('logged out')) { setConnected(false); setStatusMessage(r.message); setStatusType('error'); } else { setStatusMessage(r.message); setStatusType('info'); } } }); newSocket.on('disconnect', (reason: string) => { clearTimeout(connectTimeout); appendLog(`[Socket] Disconnected: ${reason}`); if (!connected) { setStatusMessage('Connection lost. Click retry to reconnect.'); setStatusType('error'); } }); newSocket.on('connect_error', (err: Error) => { clearTimeout(connectTimeout); const errMsg = err.message; // More descriptive error messages let userMessage = errMsg; if (errMsg.includes('timeout') || errMsg.includes('Transport unknown')) { userMessage = 'Connection timed out — gateway may be offline or port is blocked'; } else if (errMsg.includes('xhr poll error')) { userMessage = 'HTTP polling failed — WebSocket is required. Check your proxy configuration.'; } else if (errMsg.includes('Transport unknown') || errMsg.includes('websocket')) { userMessage = 'WebSocket connection failed — ensure the gateway port is accessible'; } appendLog(`[Socket] ❌ Error: ${errMsg}`); setStatusMessage(userMessage); setStatusType('error'); setRetryCount(prev => { const newCount = prev + 1; if (newCount >= maxRetries) { appendLog(`[Error] Max retries (${maxRetries}) reached. Please check the gateway service.`); } return newCount; }); }); }, [device.body, device.id, disconnectSocket, appendLog, retryCount, onConnected, connected]); useEffect(() => { // Check gateway health first, then connect checkGatewayHealth().then(() => { initScan(); }); return () => { disconnectSocket(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const handleRetry = () => { setRetryCount(0); checkGatewayHealth().then(() => initScan()); }; const handleLogout = () => { if (socketRef.current) { socketRef.current.emit('LogoutDevice', device.body); appendLog('[Logout] Logging out...'); setConnected(false); setQrCode(null); setUserInfo({}); // Update device status fetch(`/api/devices/${device.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'Disconnect' }), }).catch(() => {}); } }; const handleConnectViaCode = () => { if (socketRef.current) { socketRef.current.emit('ConnectViaCode', device.body); appendLog('[Pairing] Requesting pairing code...'); setStatusMessage('Requesting pairing code...'); setStatusType('loading'); } }; return (
{/* Back button + header */}

{device.name || device.body}

{device.body}

{gatewayOnline && ( Gateway Online )} {transportType && ( {transportType} )} {connected ? : } {connected ? 'Connected' : 'Disconnected'}
{/* QR Code / Status */}
{/* Status indicator */} {statusType === 'loading' && !qrCode && (

{statusMessage}

{retryCount > 0 && (

Retry attempt {retryCount}/{maxRetries}

)} {!gatewayOnline && ( Gateway Offline The WhatsApp Gateway service (port {WA_GATEWAY_PORT}) is not responding. Please make sure the Node.js service is running on your cPanel hosting. )}
)} {/* QR Code */} {qrCode && !connected && (
WhatsApp QR Code

{statusMessage}

Open WhatsApp → Linked Devices → Link a device

)} {/* Connected */} {connected && (

Device Connected!

{userInfo.name}

)} {/* Error */} {statusType === 'error' && !qrCode && !connected && (

{statusMessage}

)}
{/* Sidebar: Info + Logs */}
{/* Connection Info */} WhatsApp Info
{userInfo.ppUrl ? ( Profile ) : (
)}
Name {userInfo.name || 'N/A'}
Number {userInfo.number || 'N/A'}
Driver Baileys
Transport WebSocket
{/* Actions */} {!connected && ( )} {/* Logs */} Connection Logs 
                  {logs.length > 0 ? logs.join('\n') : 'Waiting for logs...'}
{/* Fix Notice */} cPanel Compatible — Fixed WebSocket-only transport prevents "xhr poll error" and "timeout". No HTTP long-polling — works through Apache/cPanel proxy. Current transport: {transportType || 'connecting...'}
); } // ── Meta Cloud API Connect Dialog ────────────────────────────────────────── function MetaConnectDialog({ device, open, onOpenChange, onSave, }: { device: Device; open: boolean; onOpenChange: (open: boolean) => void; onSave: (metaData: Record) => Promise; }) { const [metaBusinessAccountId, setMetaBusinessAccountId] = useState(device.metaBusinessAccountId || ''); const [metaPhoneNumberId, setMetaPhoneNumberId] = useState(device.metaPhoneNumberId || ''); const [metaAccessToken, setMetaAccessToken] = useState(device.metaAccessToken || ''); const [metaWebhookVerifyToken, setMetaWebhookVerifyToken] = useState(device.metaWebhookVerifyToken || ''); const [saving, setSaving] = useState(false); const [testing, setTesting] = useState(false); const [testResult, setTestResult] = useState<{ ok: boolean; msg: string } | null>(null); const { toast } = useToast(); useEffect(() => { setMetaBusinessAccountId(device.metaBusinessAccountId || ''); setMetaPhoneNumberId(device.metaPhoneNumberId || ''); setMetaAccessToken(device.metaAccessToken || ''); setMetaWebhookVerifyToken(device.metaWebhookVerifyToken || ''); }, [device]); const handleTest = async () => { if (!metaAccessToken || !metaPhoneNumberId) { toast({ title: 'Error', description: 'Access Token and Phone Number ID are required', variant: 'destructive' }); return; } setTesting(true); setTestResult(null); try { const res = await fetch(getGatewayApiUrl(`/api/meta/phone-number/${metaPhoneNumberId}?accessToken=${encodeURIComponent(metaAccessToken)}`)); const data = await res.json(); if (data.status) { setTestResult({ ok: true, msg: `Verified: ${data.data?.verified_name || data.data?.display_phone_number || 'OK'}` }); } else { setTestResult({ ok: false, msg: data.data?.error?.message || 'Verification failed' }); } } catch (err: any) { setTestResult({ ok: false, msg: err.message }); } finally { setTesting(false); } }; const handleSave = async () => { if (!metaBusinessAccountId || !metaPhoneNumberId || !metaAccessToken) { toast({ title: 'Error', description: 'All required fields must be filled', variant: 'destructive' }); return; } setSaving(true); try { await onSave({ metaBusinessAccountId, metaPhoneNumberId, metaAccessToken, metaWebhookVerifyToken: metaWebhookVerifyToken || `verify_${Date.now()}`, }); } finally { setSaving(false); } }; return ( Meta Cloud API Configuration Configure WhatsApp Business API (Meta Cloud API v23.0) for this device.
Prerequisites
  • Meta App with WhatsApp product at developers.facebook.com
  • Phone Number ID and WhatsApp Business Account ID
  • Permanent or System User access token
setMetaBusinessAccountId(e.target.value)} />
setMetaPhoneNumberId(e.target.value)} />