Update conversations.php

conversations.php

@@ -204,6 +204,25 @@
             margin-top: 5px;
         }
 
+        /* Diseño estilo ventana: timestamp oculto hasta hover */
+        .message-bubble {
+            position: relative;
+        }
+        .message-bubble .message-time {
+            position: absolute;
+            right: 8px;
+            bottom: 4px;
+            font-size: 10px;
+            color: #666;
+            opacity: 0;
+            transition: opacity 0.12s ease-in-out;
+            white-space: nowrap;
+        }
+        .message-bubble:hover .message-time,
+        .message-bubble:focus-within .message-time {
+            opacity: 1;
+        }
+
         .message-status {
             display: inline-block;
             margin-left: 5px;
@@ -747,6 +766,28 @@
                     this.sendMessage();
                 });
 
+                // Edit user name button
+                const editUserBtn = document.getElementById('edit-user-btn');
+                if (editUserBtn) editUserBtn.addEventListener('click', () => this.promptEditUser());
+
+                // Reply prompt helper: when user clicks reply on a message
+                this.promptReply = function(messageId) {
+                    const input = document.getElementById('message-input');
+                    if (!input) return;
+                    input.dataset.replyTo = messageId;
+                    input.focus();
+                    // Optionally show a small UI indicator (not implemented)
+                };
+
+                // React to message placeholder
+                this.reactToMessage = function(messageId) {
+                    // simple emoji picker or quick reaction; for now show a prompt
+                    const e = prompt('Reaccionar con emoji (ej: 👍):');
+                    if (!e) return;
+                    fetch('api/react_message.php', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({ message_id: messageId, emoji: e }) })
+                        .then(r => r.json()).then(j => { if (j && j.success) { this.loadconversations(this.currentUserId, false); } else { alert('Error reaccionando'); } }).catch(err => { console.error(err); alert('Error reaccionando'); });
+                };
+
                 // Message type (text/template)
                 const typeSelect = document.getElementById('message-type');
                 if (typeSelect) {
@@ -1517,7 +1558,7 @@
                         <div class="message ${msg.direction}">
                             <div class="message-bubble">
                                 ${replyHtml}
-                                ${content}
+                                <div class="message-content">${content}</div>
                                 ${reactionHtml}
                                 <div class="message-actions mt-1">
                                     <button class="btn btn-sm btn-link" onclick="chat.promptReply('${msg.message_id}')" title="Responder"><i class="fas fa-reply"></i></button>
@@ -1547,10 +1588,33 @@
             async loadQuickReplies() {
                 const container = document.getElementById('quick-replies');
                 container.innerHTML = '';
+                try {
+                    // Load autoresponses (text quick replies)
+                    const respText = await apiCall('get_autoresponses.php');
+                    if (respText && respText.success && Array.isArray(respText.data)) {
+                        respText.data.slice(0,6).forEach(r => {
+                            if (!r.is_active) return;
+                            const btn = document.createElement('button');
+                            btn.className = 'btn btn-sm btn-outline-primary';
+                            btn.style.marginRight = '6px';
+                            const text = (r.response_text || '').replace(/\n/g,' ');
+                            btn.textContent = text.length > 30 ? text.substring(0,30) + '...' : text;
+                            btn.title = r.response_text;
+                            btn.addEventListener('click', () => {
+                                // send as text message
+                                this.sendQuickReply(r.response_text);
+                            });
+                            container.appendChild(btn);
+                        });
+                    }
+                } catch (e) {
+                    console.error('Error loading quick replies (text)', e);
+                }
+
                 try {
                     const resp = await apiCall('get_templates.php?approved_only=1&limit=10');
                     if (resp && resp.success && Array.isArray(resp.data)) {
-                        resp.data.slice(0,6).forEach(t => {
+                        resp.data.slice(0,4).forEach(t => {
                             const btn = document.createElement('button');
                             btn.className = 'btn btn-sm btn-outline-secondary';
                             btn.style.marginRight = '6px';
@@ -1562,7 +1626,7 @@
                         });
                     }
                 } catch (e) {
-                    console.error('Error loading quick replies', e);
+                    console.error('Error loading quick replies (templates)', e);
                 }
 
                 // Also populate the template select