up

chat_window.php

@@ -200,6 +200,35 @@ if (empty($user_id)) {
             font-size: 0.65rem;
             opacity: 0.85;
         }
+
+        /* Mensajes que requieren atención (asesor) */
+        .message-alert {
+            background: #fff7f7 !important;
+            border-left: 4px solid #dc3545 !important;
+            color: #6b0000;
+        }
+
+        .header-advisor-badge {
+            display: inline-block;
+            background: #dc3545;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            margin-left: 8px;
+        }
+
+        .conversation-attention {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background: #dc3545;
+            color: white;
+            font-size: 0.9rem;
+        }
         
         /* Estilos para multimedia */
         .attach-btn {
@@ -358,11 +387,11 @@ if (empty($user_id)) {
                         <i class="fas fa-user"></i>
                     </div>
                     <div>
-                        <h5 class="mb-0" id="userName">Cargando...</h5>
+                        <h5 class="mb-0" id="userName">Cargando... <span id="advisorBadge" style="display:none;" class="header-advisor-badge">¡Atención!</span></h5>
                         <small class="status-indicator" id="userStatus">
                             <i class="fas fa-circle text-success"></i> En línea
                         </small>
-                    </div>
+                    </div> 
                 </div>
                 <div class="d-flex align-items-center">
                     <button id="attendBtn" class="btn btn-outline-light btn-sm me-2" onclick="toggleAttend()" title="Atender/Finalizar">
@@ -696,6 +725,16 @@ if (empty($user_id)) {
                     document.getElementById('userAvatar').innerHTML = 
                         `<span>${(currentUser.name || 'U').charAt(0).toUpperCase()}</span>`;
                     
+                    // Mostrar badge de atención si existe
+                    try {
+                        const advisorBadge = document.getElementById('advisorBadge');
+                        if (advisorBadge) {
+                            advisorBadge.style.display = currentUser.advisor_requested ? 'inline-block' : 'none';
+                        }
+                    } catch (e) {
+                        // ignore
+                    }
+
                     // Estado de atención
                     renderAttendControls();
                     
@@ -735,7 +774,7 @@ if (empty($user_id)) {
             let html = '';
             conversations.forEach(msg => {
                 const isOutgoing = msg.direction === 'outgoing';
-                const messageClass = isOutgoing ? 'message-outgoing' : 'message-incoming';
+                let messageClass = isOutgoing ? 'message-outgoing' : 'message-incoming';
                 
                 // Debug: ver todos los datos del mensaje (prioriza media_url_external y valida URLs)
                 const has_media_external = isValidMediaUrl(msg.media_url_external);
@@ -923,7 +962,26 @@ if (empty($user_id)) {
                     }
                 } else {
                     // Mensaje de texto normal
-                    contentHtml = escapeHtml(msg.content) || '<em>Sin contenido</em>';
+                    // Detectar mensajes 'system' embebidos en content (JSON)
+                    let alertInfo = null;
+                    try {
+                        const parsed = JSON.parse(msg.content || '');
+                        if (parsed && parsed.system) {
+                            alertInfo = parsed;
+                        }
+                    } catch (e) {
+                        // No es JSON, seguir
+                    }
+
+                    if (alertInfo) {
+                        contentHtml = `<div class="fw-bold">${escapeHtml(alertInfo.text || '[Atención]')}</div>`;
+                        // Añadir clase especial a la burbuja
+                        // marca el mensaje como requiring attention mediante messageClass
+                        // we'll append an additional class later
+                        messageClass += ' message-alert';
+                    } else {
+                        contentHtml = escapeHtml(msg.content) || '<em>Sin contenido</em>';
+                    }
                 }
                 
                 const messageTime = escapeHtml(msg.time || '');