Update conversations.php
This commit is contained in:
Lizandro Guarnizo
+73
-10
@@ -470,6 +470,44 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Quick replies compact panel */
|
||||
.quick-replies-wrapper { position: relative; }
|
||||
.quick-replies-panel {
|
||||
display: none;
|
||||
background: #fff;
|
||||
border: 1px solid #e6eef5;
|
||||
box-shadow: 0 8px 20px rgba(2,6,23,0.06);
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.quick-replies-panel .btn { min-width: 80px; max-width: 180px; font-size: 12px; }
|
||||
#quick-replies-toggle { background: transparent; border-radius: 20px; }
|
||||
@media (max-width: 768px) {
|
||||
.quick-replies-panel { left: 8px; right: 8px; bottom: 56px; min-width: auto; }
|
||||
}
|
||||
|
||||
/* Make mic button more visible */
|
||||
#mic-btn {
|
||||
margin-left: 6px;
|
||||
background: var(--whatsapp-green);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(3, 102, 80, 0.12);
|
||||
}
|
||||
#mic-btn.recording { background: #c0392b; color: white; }
|
||||
#mic-btn i { font-size: 14px; }
|
||||
|
||||
.chat-conversations {
|
||||
background-repeat: repeat;
|
||||
background-color: #e9efe9;
|
||||
@@ -672,8 +710,11 @@
|
||||
<option value="">Seleccionar plantilla...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="quick-replies" id="quick-replies" style="display:flex;gap:6px;align-items:center;">
|
||||
<!-- Quick replies buttons inserted dynamically -->
|
||||
<div class="quick-replies-wrapper" style="position:relative;">
|
||||
<button id="quick-replies-toggle" class="btn btn-sm btn-outline-secondary" title="Respuestas rápidas" aria-expanded="false">💡 Respuestas</button>
|
||||
<div id="quick-replies-panel" class="quick-replies-panel" style="display:none; position:absolute; bottom:48px; left:0; z-index:1200; min-width:220px; max-width:420px;">
|
||||
<!-- Quick replies buttons inserted dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn" id="mic-btn" title="Grabar audio" style="margin-left:6px; background:#f8f9fa; border:1px solid #ddd;">
|
||||
<i class="fas fa-microphone"></i>
|
||||
@@ -912,6 +953,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Quick replies toggle behavior: close on outside click
|
||||
const qrToggle = document.getElementById('quick-replies-toggle');
|
||||
const qrPanel = document.getElementById('quick-replies-panel');
|
||||
if (qrToggle && qrPanel) {
|
||||
qrToggle.addEventListener('click', (ev) => {
|
||||
ev.stopPropagation();
|
||||
const isOpen = qrPanel.style.display === 'block';
|
||||
qrPanel.style.display = isOpen ? 'none' : 'block';
|
||||
qrToggle.setAttribute('aria-expanded', String(!isOpen));
|
||||
});
|
||||
|
||||
qrPanel.addEventListener('click', (ev) => { ev.stopPropagation(); });
|
||||
document.addEventListener('click', () => { qrPanel.style.display = 'none'; qrToggle.setAttribute('aria-expanded','false'); });
|
||||
}
|
||||
|
||||
// Mic / recording
|
||||
const micBtn = document.getElementById('mic-btn');
|
||||
if (micBtn) {
|
||||
@@ -1720,8 +1776,9 @@
|
||||
}
|
||||
|
||||
async loadQuickReplies() {
|
||||
const container = document.getElementById('quick-replies');
|
||||
container.innerHTML = '';
|
||||
const panel = document.getElementById('quick-replies-panel');
|
||||
if (!panel) return;
|
||||
panel.innerHTML = '';
|
||||
try {
|
||||
// Load autoresponses (text quick replies)
|
||||
const respText = await apiCall('get_autoresponses.php');
|
||||
@@ -1730,15 +1787,16 @@
|
||||
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
|
||||
// send as text message and close panel
|
||||
this.sendQuickReply(r.response_text);
|
||||
panel.style.display = 'none';
|
||||
document.getElementById('quick-replies-toggle').setAttribute('aria-expanded','false');
|
||||
});
|
||||
container.appendChild(btn);
|
||||
panel.appendChild(btn);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -1751,12 +1809,11 @@
|
||||
resp.data.slice(0,4).forEach(t => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'btn btn-sm btn-outline-secondary';
|
||||
btn.style.marginRight = '6px';
|
||||
const text = (t.body_text || t.name || t.template_name || '').replace(/\n/g,' ');
|
||||
btn.textContent = text.length > 30 ? text.substring(0,30) + '...' : text;
|
||||
btn.title = t.name;
|
||||
btn.addEventListener('click', () => this.sendTemplateQuick(t.template_name, t.language_code || 'es'));
|
||||
container.appendChild(btn);
|
||||
btn.addEventListener('click', () => { this.sendTemplateQuick(t.template_name, t.language_code || 'es'); panel.style.display='none'; document.getElementById('quick-replies-toggle').setAttribute('aria-expanded','false'); });
|
||||
panel.appendChild(btn);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -1765,6 +1822,12 @@
|
||||
|
||||
// Also populate the template select
|
||||
try { await loadTemplatesInto('#templateSelect'); } catch(e){console.warn('Could not load templates into select', e);}
|
||||
|
||||
// Show a small hint if there are no quick replies
|
||||
if (!panel.children.length) {
|
||||
panel.innerHTML = '<div class="text-muted" style="padding:8px; font-size:13px;">No hay respuestas rápidas</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async sendTemplateQuick(templateName, language) {
|
||||
|
||||
Reference in New Issue
Block a user