usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-01-22 11:25:32 -05:00
parent b84d45d967
commit 84e2d1d236
6 changed files with 126 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/upload_media.php
+26 -1
View File
@@ -82,7 +82,32 @@ try {
if (!move_uploaded_file($fileTmpPath, $uploadPath)) { if (!move_uploaded_file($fileTmpPath, $uploadPath)) {
throw new Exception('Error al guardar el archivo en el servidor'); throw new Exception('Error al guardar el archivo en el servidor');
} }
// Si es audio WebM, intentar convertir a OGG/Opus (formatos más compatibles con WhatsApp)
if (strpos($fileType, 'audio/webm') === 0) {
$ffmpeg = trim(@shell_exec('which ffmpeg 2>/dev/null'));
if ($ffmpeg) {
$convertedName = uniqid('media_', true) . '.ogg';
$convertedPath = $uploadDir . $convertedName;
// Convertir a Opus (bitrate moderado)
$cmd = escapeshellcmd($ffmpeg) . ' -y -i ' . escapeshellarg($uploadPath) . ' -c:a libopus -b:a 64000 ' . escapeshellarg($convertedPath) . ' 2>&1';
$out = shell_exec($cmd);
if (file_exists($convertedPath) && filesize($convertedPath) > 0) {
// Reemplazar archivo original por el convertido
@unlink($uploadPath);
$uploadPath = $convertedPath;
$uniqueName = $convertedName;
$fileType = 'audio/ogg';
error_log('upload_media.php - Audio convertido a OGG/Opus: ' . $convertedName);
error_log('upload_media.php - ffmpeg output: ' . substr($out, 0, 2000));
} else {
error_log('upload_media.php - Falló conversión con ffmpeg. Output: ' . substr($out, 0, 2000));
}
} else {
error_log('upload_media.php - ffmpeg no encontrado, no se puede convertir audio/webm.');
}
}
// Construir URL pública // Construir URL pública
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http'; $protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
$host = $_SERVER['HTTP_HOST']; $host = $_SERVER['HTTP_HOST'];
assets/css/styles.css
+12
View File
@@ -120,6 +120,18 @@ body {
text-align: center; text-align: center;
} }
/* Small badge placed inside sidebar items */
.sidebar-menu .nav-link .sidebar-badge {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 0.72rem;
padding: 0.12rem 0.36rem;
border-radius: 999px;
line-height: 1;
}
/* Divisor del sidebar */ /* Divisor del sidebar */
.sidebar-divider { .sidebar-divider {
margin: 10px 20px; margin: 10px 20px;
assets/js/app.js
+8
View File
@@ -193,6 +193,14 @@ class WhatsAppBotManager {
document.getElementById('conversations-today').textContent = stats.conversations_today || 0; document.getElementById('conversations-today').textContent = stats.conversations_today || 0;
document.getElementById('active-users').textContent = stats.active_users || 0; document.getElementById('active-users').textContent = stats.active_users || 0;
document.getElementById('total-conversations').textContent = stats.total_conversations || 0; document.getElementById('total-conversations').textContent = stats.total_conversations || 0;
// Actualizar badge de conversaciones en el menú lateral
const convBadge = document.getElementById('conversations-count');
if (convBadge) {
const val = stats.total_conversations || 0;
convBadge.textContent = val;
convBadge.style.display = val > 0 ? 'inline-block' : 'none';
}
} }
} }
assets/js/app_simple.js
+8
View File
@@ -273,6 +273,14 @@ class SimpleWhatsAppManager {
this.log(`Estadística actualizada: ${item.id} = ${item.value}`); this.log(`Estadística actualizada: ${item.id} = ${item.value}`);
} }
}); });
// Actualizar badge de conversaciones en el menú lateral (compatibilidad con versión simple)
const convBadge = document.getElementById('conversations-count');
if (convBadge) {
const val = stats.total_conversations || 0;
convBadge.textContent = val;
convBadge.style.display = val > 0 ? 'inline-block' : 'none';
}
} }
} }
chat_window.php
+68 -64
View File
@@ -25,19 +25,20 @@ if (empty($user_id)) {
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet"> <link href="assets/css/styles.css" rel="stylesheet">
<style> <style>
/* Más compacto: reducir la escala base y espacios para interfaces pequeñas */
body { body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 0.95rem; /* Igual que el resto de la app (base reducida) */ font-size: 0.88rem; /* más pequeño para toda la app */
} }
.chat-container { .chat-container {
background: white; background: white;
border-radius: 12px; border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12); box-shadow: 0 6px 16px rgba(0,0,0,0.10);
margin: 12px auto; margin: 10px auto;
max-width: 820px; /* un poco más estrecho */ max-width: 780px; /* ligeramente más estrecho */
height: calc(100vh - 36px); height: calc(100vh - 36px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -47,60 +48,60 @@ if (empty($user_id)) {
.chat-header { .chat-header {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white; color: white;
padding: 10px 14px; /* más compacto */ padding: 8px 10px; /* aún más compacto */
border-radius: 12px 12px 0 0; border-radius: 10px 10px 0 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 8px;
} }
.chat-conversations { .chat-conversations {
flex: 1; flex: 1;
padding: 12px; /* menos padding para caber más */ padding: 8px; /* menos padding para caber más */
overflow-y: auto; overflow-y: auto;
background: #f8f9fa; background: #f8f9fa;
} }
.chat-input { .chat-input {
padding: 12px; /* compacto */ padding: 8px; /* compacto */
background: white; background: white;
border-radius: 0 0 12px 12px; border-radius: 0 0 10px 10px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.message-bubble { .message-bubble {
margin: 8px 0; margin: 6px 0;
padding: 8px 12px; /* menos padding */ padding: 6px 10px; /* menos padding */
border-radius: 14px; border-radius: 12px;
max-width: 65%; max-width: 70%;
word-wrap: break-word; word-wrap: break-word;
font-size: 0.95rem; font-size: 0.88rem;
} }
/* Estilos para mensajes multimedia */ /* Estilos para mensajes multimedia */
.message-bubble img { .message-bubble img {
max-width: 260px; /* un poco más pequeño */ max-width: 220px; /* más pequeño */
max-height: 360px; max-height: 280px;
width: auto; width: auto;
height: auto; height: auto;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
display: block; display: block;
margin: 4px 0; margin: 4px 0;
} }
.message-bubble video { .message-bubble video {
max-width: 260px; max-width: 220px;
max-height: 360px; max-height: 280px;
border-radius: 8px; border-radius: 6px;
display: block; display: block;
margin: 4px 0; margin: 4px 0;
} }
.message-bubble audio { .message-bubble audio {
width: 200px; width: 160px;
height: 36px; height: 32px;
margin: 4px 0; margin: 4px 0;
display: block; display: block;
} }
@@ -108,9 +109,9 @@ if (empty($user_id)) {
.message-document { .message-document {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
padding: 10px 15px; padding: 8px 12px;
background: rgba(0,0,0,0.05); background: rgba(0,0,0,0.04);
border-radius: 8px; border-radius: 8px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@@ -118,11 +119,11 @@ if (empty($user_id)) {
} }
.message-document:hover { .message-document:hover {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.08);
} }
.message-document i { .message-document i {
font-size: 1.5rem; font-size: 1.25rem;
color: #25D366; color: #25D366;
} }
@@ -136,13 +137,13 @@ if (empty($user_id)) {
background: white; background: white;
margin-right: auto; margin-right: auto;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
} }
.message-time { .message-time {
font-size: 0.75rem; font-size: 0.7rem;
color: #999; color: #999;
margin-top: 5px; margin-top: 4px;
text-align: right; text-align: right;
} }
@@ -152,27 +153,29 @@ if (empty($user_id)) {
.typing-indicator { .typing-indicator {
display: none; display: none;
padding: 10px; padding: 8px;
font-style: italic; font-style: italic;
color: #666; color: #666;
} }
.input-group { .input-group {
border-radius: 25px; border-radius: 20px;
overflow: hidden; overflow: hidden;
} }
.form-control { .form-control {
border: none; border: none;
padding: 12px 20px; padding: 8px 14px;
font-size: 0.88rem;
} }
.btn-send { .btn-send {
background: #25D366; background: #25D366;
border: none; border: none;
color: white; color: white;
padding: 12px 20px; padding: 10px 14px;
border-radius: 0 25px 25px 0; border-radius: 0 20px 20px 0;
font-size: 0.9rem;
} }
.btn-send:hover { .btn-send:hover {
@@ -181,8 +184,8 @@ if (empty($user_id)) {
} }
.user-avatar { .user-avatar {
width: 36px; /* más pequeño */ width: 28px; /* más pequeño */
height: 36px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #25D366; background: #25D366;
display: flex; display: flex;
@@ -190,11 +193,11 @@ if (empty($user_id)) {
justify-content: center; justify-content: center;
color: white; color: white;
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.85rem;
} }
.status-indicator { .status-indicator {
font-size: 0.75rem; font-size: 0.65rem;
opacity: 0.85; opacity: 0.85;
} }
@@ -203,9 +206,9 @@ if (empty($user_id)) {
background: transparent; background: transparent;
border: none; border: none;
color: #666; color: #666;
padding: 12px 15px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
font-size: 1.2rem; font-size: 1rem;
} }
.attach-btn:hover { .attach-btn:hover {
@@ -213,22 +216,22 @@ if (empty($user_id)) {
} }
.media-preview { .media-preview {
padding: 10px; padding: 8px;
background: #f0f0f0; background: #f0f0f0;
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 8px;
display: none; display: none;
} }
.media-preview.show { .media-preview.show {
display: block; display: block;
animation: slideDown 0.3s ease-out; animation: slideDown 0.22s ease-out;
} }
@keyframes slideDown { @keyframes slideDown {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-10px); transform: translateY(-8px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -239,14 +242,14 @@ if (empty($user_id)) {
.media-preview-content { .media-preview-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
} }
.media-thumbnail { .media-thumbnail {
width: 60px; width: 48px;
height: 60px; height: 48px;
object-fit: cover; object-fit: cover;
border-radius: 5px; border-radius: 4px;
} }
.media-info { .media-info {
@@ -255,36 +258,36 @@ if (empty($user_id)) {
.media-filename { .media-filename {
font-weight: 500; font-weight: 500;
font-size: 0.9rem; font-size: 0.85rem;
color: #333; color: #333;
} }
.media-filesize { .media-filesize {
font-size: 0.8rem; font-size: 0.75rem;
color: #666; color: #666;
} }
.message-media { .message-media {
margin-top: 8px; margin-top: 6px;
} }
.message-media img, .message-media img,
.message-media video { .message-media video {
max-width: 100%; max-width: 100%;
border-radius: 8px; border-radius: 6px;
margin-top: 5px; margin-top: 4px;
} }
.message-media audio { .message-media audio {
width: 100%; width: 100%;
margin-top: 5px; margin-top: 4px;
} }
.message-document { .message-document {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 10px; padding: 8px;
background: #f0f0f0; background: #f0f0f0;
border-radius: 8px; border-radius: 8px;
margin-top: 5px; margin-top: 5px;
@@ -297,7 +300,7 @@ if (empty($user_id)) {
} }
.message-document i { .message-document i {
font-size: 1.5rem; font-size: 1.25rem;
color: #666; color: #666;
} }
@@ -305,9 +308,9 @@ if (empty($user_id)) {
background: transparent; background: transparent;
border: none; border: none;
color: #666; color: #666;
padding: 12px 15px; padding: 8px 10px;
cursor: pointer; cursor: pointer;
font-size: 1.2rem; font-size: 1rem;
} }
.mic-btn:hover { .mic-btn:hover {
@@ -326,12 +329,12 @@ if (empty($user_id)) {
.recording-indicator { .recording-indicator {
display: none; display: none;
padding: 10px; padding: 8px;
background: #fff3cd; background: #fff3cd;
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 8px;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
} }
.recording-indicator.show { .recording-indicator.show {
@@ -341,6 +344,7 @@ if (empty($user_id)) {
.recording-time { .recording-time {
font-weight: 500; font-weight: 500;
color: #dc3545; color: #dc3545;
font-size: 0.85rem;
} }
</style> </style>
</head> </head>
index.php
+4 -4
View File
@@ -37,8 +37,8 @@ try {
<title>WhatsApp Bot Manager</title> <title>WhatsApp Bot Manager</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./assets/css/styles.css?v=8" rel="stylesheet"> <link href="./assets/css/styles.css?v=9" rel="stylesheet">
<link href="./assets/css/diagnostic.css?v=8" rel="stylesheet"> <link href="./assets/css/diagnostic.css?v=9" rel="stylesheet">
</head> </head>
<body> <body>
@@ -49,7 +49,7 @@ try {
</div> </div>
<ul class="sidebar-menu"> <ul class="sidebar-menu">
<li><a href="#dashboard" class="nav-link active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> <li><a href="#dashboard" class="nav-link active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
<li><a href="#conversations" class="nav-link" data-tab="conversations"><i class="fas fa-comments"></i> Conversaciones</a></li> <li><a href="#conversations" class="nav-link" data-tab="conversations"><i class="fas fa-comments"></i> Conversaciones <span id="conversations-count" class="sidebar-badge badge bg-danger" style="display:none; font-size:0.72rem; padding:0.15rem 0.4rem;">0</span></a></li>
<li><a href="#users" class="nav-link" data-tab="users"><i class="fas fa-users"></i> Usuarios</a></li> <li><a href="#users" class="nav-link" data-tab="users"><i class="fas fa-users"></i> Usuarios</a></li>
<li><a href="#menus" class="nav-link" data-tab="menus"><i class="fas fa-list"></i> Menús</a></li> <li><a href="#menus" class="nav-link" data-tab="menus"><i class="fas fa-list"></i> Menús</a></li>
<li><a href="#send_message" class="nav-link" data-tab="send_message"><i class="fas fa-paper-plane"></i> Enviar Mensaje</a></li> <li><a href="#send_message" class="nav-link" data-tab="send_message"><i class="fas fa-paper-plane"></i> Enviar Mensaje</a></li>
@@ -664,7 +664,7 @@ try {
<!-- Scripts --> <!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./assets/js/app_simple.js?v=8"></script> <script src="./assets/js/app_simple.js?v=9"></script>
<script> <script>
// Función de diagnóstico mejorada // Función de diagnóstico mejorada
function runDiagnostic() { function runDiagnostic() {