up

api/send_media_message.php

@@ -66,9 +66,10 @@ if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
 }
 
 // Función auxiliar para enviar con media_id
-function sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename) {
+function sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename, $isVoice = false) {
     // Pasar skipAutoSave=true para evitar guardado duplicado (lo guardamos manualmente después)
-    return $whatsapp->sendMediaById($recipient, $mediaId, $mediaType, $caption, $filename, true);
+    // Para audio: pasar is_voice para determinar si es nota de voz o audio normal
+    return $whatsapp->sendMediaById($recipient, $mediaId, $mediaType, $caption, $filename, true, $isVoice);
 }
 
 // Función auxiliar para enviar con link
@@ -151,6 +152,12 @@ try {
     $mediaType = $input['media_type']; // image, video, audio, document
     $caption = $input['caption'] ?? null;
     $filename = $input['filename'] ?? null;
+    // Para audio: is_voice = true significa nota de voz (grabada desde micrófono)
+    // is_voice = false o ausente significa audio normal (archivo subido)
+    $isVoice = isset($input['is_voice']) ? (bool)$input['is_voice'] : false;
+    
+    error_log("send_media_message.php - is_voice: " . ($isVoice ? 'true' : 'false'));
+    smm_log("is_voice: " . ($isVoice ? 'true' : 'false'));
     
     // Inicializar servicio de WhatsApp
     $whatsapp = new WhatsAppService();
@@ -216,8 +223,8 @@ try {
                 error_log("send_media_message.php - Media ID obtenido: " . $mediaId);
                 smm_log("Media ID obtained: " . $mediaId);
                 
-                // Enviar mensaje usando media_id
+                // Enviar mensaje usando media_id (pasar isVoice para audio)
-                $response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename);
+                $response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $mediaId, $mediaType, $caption, $filename, $isVoice);
                 smm_log("Send media by id response: " . json_encode($response));
             } else {
                 smm_log("Upload did not return id: " . json_encode($uploadResult));
@@ -276,7 +283,7 @@ try {
                     if (isset($uploadResult['id'])) {
                         $uploaded_media_id = $uploadResult['id'];
                         smm_log('Uploaded downloaded audio to WhatsApp, media_id: ' . $uploaded_media_id);
-                        $response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $uploaded_media_id, $mediaType, $caption, $filename);
+                        $response = sendMediaByIdToWhatsApp($whatsapp, $recipient, $uploaded_media_id, $mediaType, $caption, $filename, $isVoice);
                     } else {
                         smm_log('Upload of downloaded audio did not return id, fallback to link.');
                         $response = sendMediaByLinkToWhatsApp($whatsapp, $recipient, $mediaUrl, $mediaType, $caption, $filename);

api/upload_media.php

@@ -108,11 +108,16 @@ try {
             if ($ffmpeg) {
                 try {
                     if (strpos($fileType, 'audio/webm') === 0) {
-                        // Audio WebM -> OGG/Opus
+                        // Audio WebM -> OGG/Opus (Compatible con WhatsApp Voice Messages)
                         $convertedName = uniqid('media_', true) . '.ogg';
                         $convertedPath = $uploadDir . $convertedName;
-                        // Convertir a Opus (bitrate moderado). Forzamos formato OGG, mono 48kHz y mapeamos la primera pista de audio.
+                        // Parámetros WhatsApp Voice:
-                        $cmd = escapeshellcmd($ffmpeg) . ' -y -i ' . escapeshellarg($uploadPath) . ' -map 0:a:0 -c:a libopus -b:a 64k -vbr on -ar 48000 -ac 1 -f ogg ' . escapeshellarg($convertedPath) . ' 2>&1';
+                        // -c:a libopus = códec OPUS (requerido para transcripción)
+                        // -b:a 32k = bitrate bajo para mantener archivo < 512KB (ícono play)
+                        // -ar 48000 = sample rate 48kHz (estándar OPUS)
+                        // -ac 1 = mono (reduce tamaño)
+                        // -vbr on = variable bitrate
+                        $cmd = escapeshellcmd($ffmpeg) . ' -y -i ' . escapeshellarg($uploadPath) . ' -map 0:a:0 -c:a libopus -b:a 32k -vbr on -ar 48000 -ac 1 -f ogg ' . escapeshellarg($convertedPath) . ' 2>&1';
                         $newType = 'audio/ogg';
                         $logType = 'Audio';
                     } else {

assets/js/chat-common.js

@@ -219,10 +219,16 @@ async function convertWebmToOgg(file) {
     if (_ffmpegInstance._fetchFile) data = await _ffmpegInstance._fetchFile(file);
     else data = new Uint8Array(await file.arrayBuffer());
     _ffmpegInstance.FS('writeFile', inName, data);
-    await _ffmpegInstance.run('-i', inName, '-c:a', 'libopus', '-b:a', '64k', outName);
+    // Parámetros compatibles con WhatsApp Voice Messages:
+    // -c:a libopus = códec OPUS (requerido)
+    // -b:a 32k = bitrate bajo para mantener archivo < 512KB (ícono play)
+    // -ar 48000 = sample rate 48kHz (estándar OPUS)
+    // -ac 1 = mono (reduce tamaño)
+    // -vbr on = variable bitrate para mejor calidad
+    await _ffmpegInstance.run('-i', inName, '-c:a', 'libopus', '-b:a', '32k', '-ar', '48000', '-ac', '1', '-vbr', 'on', outName);
     const outData = _ffmpegInstance.FS('readFile', outName);
-    const blob = new Blob([outData.buffer], { type: 'audio/ogg' });
+    const blob = new Blob([outData.buffer], { type: 'audio/ogg; codecs=opus' });
-    const newFile = new File([blob], (file.name || 'audio').replace(/\.[^/.]+$/, '') + '.ogg', { type: 'audio/ogg' });
+    const newFile = new File([blob], (file.name || 'audio').replace(/\.[^/.]+$/, '') + '.ogg', { type: 'audio/ogg; codecs=opus' });
     return newFile;
 }
 

conversations.php

@@ -704,6 +704,22 @@ if (!isset($_SESSION['user_id'])) {
             .quick-replies-panel { left: 8px; right: 8px; bottom: 56px; min-width: auto; }
         }
 
+        /* Indicador de nuevos mensajes */
+        #new-messages-indicator {
+            animation: bounceIn 0.4s ease, pulse 2s ease-in-out infinite;
+        }
+        
+        @keyframes bounceIn {
+            0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
+            60% { transform: translateX(-50%) translateY(-10px); opacity: 1; }
+            100% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
+        }
+        
+        @keyframes pulse {
+            0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35); }
+            50% { box-shadow: 0 6px 30px rgba(37, 211, 102, 0.55); }
+        }
+
         /* Recording controls: rectangular buttons and clearer contrast */
         #recording-indicator .btn {
             border-radius: 6px;
@@ -1197,44 +1213,25 @@ if (!isset($_SESSION['user_id'])) {
                             
                             // Si la conversación del mensaje es la actualmente abierta
                             if (this.currentUserId && String(this.currentUserId) === String(userId)) {
-                                console.log('♻️ Mensaje para conversación ACTIVA, procesando...');
+                                console.log('♻️ Mensaje para conversación ACTIVA');
                                 
-                                // Verificar si el usuario está al final del chat (dentro de 150px del final)
+                                // SOLUCIÓN: Siempre usar staged messages + indicador
-                                const container = document.getElementById('chat-conversations');
+                                // Esto evita el error que borra la pantalla al intentar recargar automáticamente
-                                const isAtBottom = container ? 
+                                if (!this._stagedMessages) this._stagedMessages = [];
-                                    (container.scrollHeight - container.scrollTop - container.clientHeight) < 150 : true;
+                                if (!this._stagedMessageIds) this._stagedMessageIds = new Set();
                                 
-                                console.log('📍 Posición scroll:', {
+                                // Crear key única para evitar duplicados
-                                    scrollHeight: container?.scrollHeight,
+                                const msgKey = data.message_id || data.id || `${data.created_at}_${data.content?.substring(0,20)}`;
-                                    scrollTop: container?.scrollTop,
-                                    clientHeight: container?.clientHeight,
-                                    distanceFromBottom: container ? (container.scrollHeight - container.scrollTop - container.clientHeight) : 0,
-                                    isAtBottom: isAtBottom
-                                });
                                 
-                                if (isAtBottom) {
+                                if (!this._stagedMessageIds.has(msgKey)) {
-                                    // Usuario está al final: agregar mensaje automáticamente con highlight
+                                    this._stagedMessageIds.add(msgKey);
-                                    console.log('✅ Usuario AL FINAL, recargando mensajes...');
-                                    
-                                    // Marcar que el próximo mensaje nuevo debe tener highlight
-                                    this._nextMessageUnread = true;
-                                    
-                                    // Recargar mensajes (esto hará el fetch y renderizará)
-                                    this.loadMessages(this.currentUserId, true, true).then(() => {
-                                        // Después de cargar, quitar el highlight después de 3 segundos
-                                        setTimeout(() => {
-                                            this._removeUnreadHighlights();
-                                        }, 3000);
-                                    });
-                                } else {
-                                    // Usuario está leyendo arriba: mostrar indicador de nuevos mensajes
-                                    console.log('⬆️ Usuario LEYENDO ARRIBA, mostrando indicador');
-                                    this.showNewMessagesIndicator(1);
-                                    
-                                    // Guardar mensaje en staging para agregarlo cuando el usuario baje
-                                    if (!this._stagedMessages) this._stagedMessages = [];
                                     this._stagedMessages.push(data);
-                                    console.log('💾 Mensaje guardado en staging. Total staged:', this._stagedMessages.length);
+                                    console.log('💾 Mensaje guardado en staging. Total:', this._stagedMessages.length);
+                                    
+                                    // Mostrar indicador de nuevos mensajes
+                                    this.showNewMessagesIndicator(this._stagedMessages.length);
+                                } else {
+                                    console.log('⏭️ Mensaje duplicado, omitiendo');
                                 }
                             } else {
                                 console.log('📋 Mensaje para OTRA conversación, solo actualizando lista');
@@ -4063,6 +4060,8 @@ if (!isset($_SESSION['user_id'])) {
 
                             // set as selected file and show preview
                             this.selectedFile = file;
+                            // Marcar como grabación de voz para enviar como nota de voz (ptt=true)
+                            this._isVoiceRecording = true;
                             this.showMediaPreview(file);
                             // restore mic UI to default (not recording)
                             try {
@@ -4184,28 +4183,51 @@ if (!isset($_SESSION['user_id'])) {
                         el.style.transform = 'translateX(-50%)';
                         el.style.bottom = '84px';
                         el.style.zIndex = '1500';
-                        el.className = 'btn btn-primary';
+                        el.className = 'btn btn-success';
-                        el.style.padding = '8px 14px';
+                        el.style.padding = '10px 18px';
-                        el.style.borderRadius = '20px';
+                        el.style.borderRadius = '24px';
-                        el.style.boxShadow = '0 6px 18px rgba(2,6,23,0.12)';
+                        el.style.boxShadow = '0 6px 20px rgba(37, 211, 102, 0.35)';
                         el.style.cursor = 'pointer';
+                        el.style.fontWeight = '600';
+                        el.style.fontSize = '14px';
+                        el.innerHTML = '<i class="fas fa-arrow-down me-2"></i>Nuevo mensaje';
                         el.onclick = async () => {
                             try {
-                                // Hide indicator immediately and suspend auto-refresh to avoid races
+                                console.log('🔄 Clic en indicador de nuevos mensajes');
-                                this.hideNewMessagesIndicator();
+                                
-                                this._suspendAutoRefresh = true;
+                                // Mostrar loading en el botón
-                                if (this.currentUserId) {
+                                el.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cargando...';
-                                    // Trigger a full load and follow to bottom
+                                el.style.pointerEvents = 'none';
-                                    await this.loadMessages(this.currentUserId, true, true);
+                                
-                                }
+                                // Limpiar staged messages
-                                // Clear staged messages since full load will include them
                                 this._stagedMessages = [];
                                 if (this._stagedMessageIds) this._stagedMessageIds.clear();
                                 this._stagedCount = 0;
+                                
+                                // Suspender auto-refresh para evitar conflictos
+                                this._suspendAutoRefresh = true;
+                                
+                                if (this.currentUserId) {
+                                    // Reset loading flag para permitir la carga
+                                    this.loadingMessages = false;
+                                    
+                                    // Cargar mensajes
+                                    await this.loadMessages(this.currentUserId, true, true);
+                                    
+                                    // Scroll al fondo
+                                    this.scrollToBottom();
+                                    console.log('✅ Mensajes cargados correctamente');
+                                }
+                                
+                                // Ocultar indicador
+                                this.hideNewMessagesIndicator();
+                                
                             } catch (e) {
-                                console.warn('Indicator click failed to load full conversation', e);
+                                console.error('❌ Error al cargar mensajes:', e);
+                                // En caso de error, intentar ocultar el indicador y restaurar estado
+                                this.hideNewMessagesIndicator();
                             } finally {
-                                try { this._suspendAutoRefresh = false; } catch(e) {}
+                                this._suspendAutoRefresh = false;
                             }
                         };
                         // subtle fade-in
@@ -4215,8 +4237,11 @@ if (!isset($_SESSION['user_id'])) {
                         setTimeout(() => { try { el.style.opacity = '1'; el.style.transform = 'translateX(-50%) translateY(-6px)'; } catch(e) {} }, 20);
                     }
                     const c = (typeof count === 'number') ? count : (this._stagedMessages ? this._stagedMessages.length : 0);
-                    el.textContent = (c && c > 1) ? `Nuevos mensajes (${c})` : 'Nuevo mensaje';
+                    el.innerHTML = (c && c > 1) 
+                        ? `<i class="fas fa-arrow-down me-2"></i>Nuevos mensajes (${c})` 
+                        : '<i class="fas fa-arrow-down me-2"></i>Nuevo mensaje';
                     el.style.display = 'inline-block';
+                    el.style.pointerEvents = 'auto'; // Restaurar por si estaba deshabilitado
                 } catch (e) { console.warn('showNewMessagesIndicator failed', e); }
             }
 
@@ -4257,28 +4282,37 @@ if (!isset($_SESSION['user_id'])) {
                     // Immediately hide indicator to provide instant feedback
                     this.hideNewMessagesIndicator();
 
-                    // Append staged messages to conversation model
                     const toApplyCount = this._stagedMessages.length;
-                    console.debug('applyStagedMessages: applying', toApplyCount, 'messages');
+                    console.log('✅ applyStagedMessages: aplicando', toApplyCount, 'mensajes');
-                    this._stagedMessages.forEach(m => { this.currentMessages.push(m); });
+                    
-
+                    // ENFOQUE SEGURO: En lugar de renderizar incrementalmente,
-                    // clear staged storage
+                    // simplemente recargar los mensajes desde el servidor.
+                    // Esto es más seguro y evita problemas de renderizado.
+                    const userId = this.currentUserId;
+                    
+                    // Limpiar staged messages primero
                     this._stagedMessages = [];
                     if (this._stagedMessageIds) this._stagedMessageIds.clear();
                     this._stagedCount = 0;
-
+                    
-                    // Render newly added messages and follow to bottom
+                    // Recargar mensajes de forma segura
-                    this.renderMessagesIncremental(false, 0, true);
+                    if (userId) {
-                    this.scrollToBottom();
+                        this.loadingMessages = false; // Reset flag para permitir la carga
-
+                        this.loadMessages(userId, true, true).then(() => {
-                    // Update latest timestamp
+                            console.log('✅ Mensajes recargados después de aplicar staged');
-                    try { const last = this.currentMessages[this.currentMessages.length - 1]; if (last && last.created_at) this._latestMessage = last.created_at; } catch(e){}
+                            this.scrollToBottom();
+                        }).catch(err => {
+                            console.error('❌ Error recargando mensajes:', err);
+                            // Fallback: intentar scroll al fondo de lo que ya hay
+                            this.scrollToBottom();
+                        });
+                    }
 
                 } catch (e) {
                     console.warn('applyStagedMessages failed', e);
                 } finally {
                     // allow indicator to show again for future arrivals after short delay
-                    setTimeout(() => { this._applyingStaged = false; }, 250);
+                    setTimeout(() => { this._applyingStaged = false; }, 500);
                 }
             }
 
@@ -4717,6 +4751,9 @@ if (!isset($_SESSION['user_id'])) {
                 const file = event.target.files[0];
                 if (!file) return;
                 
+                // NO es grabación de voz (es archivo subido)
+                this._isVoiceRecording = false;
+                
                 // Validar tamaño
                 const maxSize = this.getMaxFileSize(file.type);
                 if (file.size > maxSize) {
@@ -4849,7 +4886,10 @@ if (!isset($_SESSION['user_id'])) {
                             media_url: uploadResult.data.url,
                             media_type: uploadResult.data.type,
                             caption: caption || null,
-                            filename: this.selectedFile.name
+                            filename: this.selectedFile.name,
+                            // Para audio: is_voice = true si fue grabado desde micrófono (nota de voz)
+                            // is_voice = false si fue subido como archivo (audio normal)
+                            is_voice: (uploadResult.data.type === 'audio' && this._isVoiceRecording) ? true : false
                         })
                     });
 
@@ -4930,6 +4970,8 @@ if (!isset($_SESSION['user_id'])) {
                 document.getElementById('media-caption').value = '';
                 document.getElementById('file-input').value = '';
                 this.selectedFile = null;
+                // Limpiar flag de grabación de voz
+                this._isVoiceRecording = false;
                 
                 // Restaurar botón enviar
                 const sendBtn = document.getElementById('send-btn');

services/WhatsAppService.php

@@ -337,16 +337,30 @@ class WhatsAppService
 
     /**
      * Enviar audio
+     * @param string $to Número de destinatario
+     * @param string $audioUrl URL del audio
+     * @param bool $skipAutoSave Omitir guardado automático
+     * @param bool $isVoice True para enviar como nota de voz (requiere .ogg con códec OPUS)
      */
-    public function sendAudioMessage($to, $audioUrl, $skipAutoSave = false)
+    public function sendAudioMessage($to, $audioUrl, $skipAutoSave = false, $isVoice = false)
     {
+        $audioData = [
+            'link' => $audioUrl
+        ];
+        
+        // Si es nota de voz, agregar parámetro ptt (push-to-talk)
+        // Requiere archivo .ogg con códec OPUS
+        if ($isVoice) {
+            // NOTA: WhatsApp Cloud API no tiene parámetro 'ptt' directo para links.
+            // Para notas de voz se recomienda subir el archivo y usar sendMediaById con is_voice.
+            error_log('sendAudioMessage: is_voice=true pero usando link. Para notas de voz, subir archivo primero.');
+        }
+
         $data = [
             'messaging_product' => 'whatsapp',
             'to' => $this->formatPhoneNumber($to),
             'type' => 'audio',
-            'audio' => [
+            'audio' => $audioData
-                'link' => $audioUrl
-            ]
         ];
 
         if ($skipAutoSave) {
@@ -434,8 +448,15 @@ class WhatsAppService
 
     /**
      * Enviar mensaje usando media_id (archivo ya subido a WhatsApp)
+     * @param string $to Número de destinatario
+     * @param string $mediaId ID del archivo en WhatsApp
+     * @param string $mediaType Tipo: image, video, audio, document
+     * @param string|null $caption Texto opcional (no aplica para audio)
+     * @param string|null $filename Nombre archivo (solo document)
+     * @param bool $skipAutoSave Omitir guardado automático
+     * @param bool $isVoice Para audio: true = nota de voz con onda verde, false = audio normal
      */
-    public function sendMediaById($to, $mediaId, $mediaType, $caption = null, $filename = null, $skipAutoSave = false)
+    public function sendMediaById($to, $mediaId, $mediaType, $caption = null, $filename = null, $skipAutoSave = false, $isVoice = false)
     {
         $data = [
             'messaging_product' => 'whatsapp',
@@ -453,6 +474,15 @@ class WhatsAppService
             $mediaData['filename'] = $filename;
         }
         
+        // Para audio: agregar parámetro 'ptt' (push-to-talk) si es nota de voz
+        // Esto hace que aparezca con la onda verde característica de WhatsApp
+        if ($mediaType === 'audio' && $isVoice) {
+            // Según documentación de Meta: "ptt": true para mensajes de voz
+            // El archivo debe ser .ogg con códec OPUS
+            $mediaData['ptt'] = true;
+            error_log('sendMediaById: Enviando como nota de voz (ptt=true)');
+        }
+        
         $data[$mediaType] = $mediaData;
         
         // Marcar para evitar guardado automático si se solicita