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)) {
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
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http';
$host = $_SERVER['HTTP_HOST'];
assets/css/styles.css
+12
View File
@@ -120,6 +120,18 @@ body {
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 */
.sidebar-divider {
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('active-users').textContent = stats.active_users || 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}`);
}
});
// 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="assets/css/styles.css" rel="stylesheet">
<style>
/* Más compacto: reducir la escala base y espacios para interfaces pequeñas */
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
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 {
background: white;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
margin: 12px auto;
max-width: 820px; /* un poco más estrecho */
border-radius: 10px;
box-shadow: 0 6px 16px rgba(0,0,0,0.10);
margin: 10px auto;
max-width: 780px; /* ligeramente más estrecho */
height: calc(100vh - 36px);
display: flex;
flex-direction: column;
@@ -47,60 +48,60 @@ if (empty($user_id)) {
.chat-header {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: white;
padding: 10px 14px; /* más compacto */
border-radius: 12px 12px 0 0;
padding: 8px 10px; /* aún más compacto */
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
gap: 8px;
}
.chat-conversations {
flex: 1;
padding: 12px; /* menos padding para caber más */
padding: 8px; /* menos padding para caber más */
overflow-y: auto;
background: #f8f9fa;
}
.chat-input {
padding: 12px; /* compacto */
padding: 8px; /* compacto */
background: white;
border-radius: 0 0 12px 12px;
border-radius: 0 0 10px 10px;
border-top: 1px solid #eee;
}
.message-bubble {
margin: 8px 0;
padding: 8px 12px; /* menos padding */
border-radius: 14px;
max-width: 65%;
margin: 6px 0;
padding: 6px 10px; /* menos padding */
border-radius: 12px;
max-width: 70%;
word-wrap: break-word;
font-size: 0.95rem;
font-size: 0.88rem;
}
/* Estilos para mensajes multimedia */
.message-bubble img {
max-width: 260px; /* un poco más pequeño */
max-height: 360px;
max-width: 220px; /* más pequeño */
max-height: 280px;
width: auto;
height: auto;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
display: block;
margin: 4px 0;
}
.message-bubble video {
max-width: 260px;
max-height: 360px;
border-radius: 8px;
max-width: 220px;
max-height: 280px;
border-radius: 6px;
display: block;
margin: 4px 0;
}
.message-bubble audio {
width: 200px;
height: 36px;
width: 160px;
height: 32px;
margin: 4px 0;
display: block;
}
@@ -108,9 +109,9 @@ if (empty($user_id)) {
.message-document {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: rgba(0,0,0,0.05);
gap: 8px;
padding: 8px 12px;
background: rgba(0,0,0,0.04);
border-radius: 8px;
text-decoration: none;
color: inherit;
@@ -118,11 +119,11 @@ if (empty($user_id)) {
}
.message-document:hover {
background: rgba(0,0,0,0.1);
background: rgba(0,0,0,0.08);
}
.message-document i {
font-size: 1.5rem;
font-size: 1.25rem;
color: #25D366;
}
@@ -136,13 +137,13 @@ if (empty($user_id)) {
background: white;
margin-right: auto;
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 {
font-size: 0.75rem;
font-size: 0.7rem;
color: #999;
margin-top: 5px;
margin-top: 4px;
text-align: right;
}
@@ -152,27 +153,29 @@ if (empty($user_id)) {
.typing-indicator {
display: none;
padding: 10px;
padding: 8px;
font-style: italic;
color: #666;
}
.input-group {
border-radius: 25px;
border-radius: 20px;
overflow: hidden;
}
.form-control {
border: none;
padding: 12px 20px;
padding: 8px 14px;
font-size: 0.88rem;
}
.btn-send {
background: #25D366;
border: none;
color: white;
padding: 12px 20px;
border-radius: 0 25px 25px 0;
padding: 10px 14px;
border-radius: 0 20px 20px 0;
font-size: 0.9rem;
}
.btn-send:hover {
@@ -181,8 +184,8 @@ if (empty($user_id)) {
}
.user-avatar {
width: 36px; /* más pequeño */
height: 36px;
width: 28px; /* más pequeño */
height: 28px;
border-radius: 50%;
background: #25D366;
display: flex;
@@ -190,11 +193,11 @@ if (empty($user_id)) {
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.95rem;
font-size: 0.85rem;
}
.status-indicator {
font-size: 0.75rem;
font-size: 0.65rem;
opacity: 0.85;
}
@@ -203,9 +206,9 @@ if (empty($user_id)) {
background: transparent;
border: none;
color: #666;
padding: 12px 15px;
padding: 8px 10px;
cursor: pointer;
font-size: 1.2rem;
font-size: 1rem;
}
.attach-btn:hover {
@@ -213,22 +216,22 @@ if (empty($user_id)) {
}
.media-preview {
padding: 10px;
padding: 8px;
background: #f0f0f0;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
display: none;
}
.media-preview.show {
display: block;
animation: slideDown 0.3s ease-out;
animation: slideDown 0.22s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
transform: translateY(-8px);
}
to {
opacity: 1;
@@ -239,14 +242,14 @@ if (empty($user_id)) {
.media-preview-content {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
}
.media-thumbnail {
width: 60px;
height: 60px;
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 5px;
border-radius: 4px;
}
.media-info {
@@ -255,36 +258,36 @@ if (empty($user_id)) {
.media-filename {
font-weight: 500;
font-size: 0.9rem;
font-size: 0.85rem;
color: #333;
}
.media-filesize {
font-size: 0.8rem;
font-size: 0.75rem;
color: #666;
}
.message-media {
margin-top: 8px;
margin-top: 6px;
}
.message-media img,
.message-media video {
max-width: 100%;
border-radius: 8px;
margin-top: 5px;
border-radius: 6px;
margin-top: 4px;
}
.message-media audio {
width: 100%;
margin-top: 5px;
margin-top: 4px;
}
.message-document {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
padding: 8px;
background: #f0f0f0;
border-radius: 8px;
margin-top: 5px;
@@ -297,7 +300,7 @@ if (empty($user_id)) {
}
.message-document i {
font-size: 1.5rem;
font-size: 1.25rem;
color: #666;
}
@@ -305,9 +308,9 @@ if (empty($user_id)) {
background: transparent;
border: none;
color: #666;
padding: 12px 15px;
padding: 8px 10px;
cursor: pointer;
font-size: 1.2rem;
font-size: 1rem;
}
.mic-btn:hover {
@@ -326,12 +329,12 @@ if (empty($user_id)) {
.recording-indicator {
display: none;
padding: 10px;
padding: 8px;
background: #fff3cd;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
align-items: center;
gap: 10px;
gap: 8px;
}
.recording-indicator.show {
@@ -341,6 +344,7 @@ if (empty($user_id)) {
.recording-time {
font-weight: 500;
color: #dc3545;
font-size: 0.85rem;
}
</style>
</head>
index.php
+4 -4
View File
@@ -37,8 +37,8 @@ try {
<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://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/diagnostic.css?v=8" rel="stylesheet">
<link href="./assets/css/styles.css?v=9" rel="stylesheet">
<link href="./assets/css/diagnostic.css?v=9" rel="stylesheet">
</head>
<body>
@@ -49,7 +49,7 @@ try {
</div>
<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="#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="#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>
@@ -664,7 +664,7 @@ try {
<!-- 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/chart.js"></script>
<script src="./assets/js/app_simple.js?v=8"></script>
<script src="./assets/js/app_simple.js?v=9"></script>
<script>
// Función de diagnóstico mejorada
function runDiagnostic() {