From 702423d2ae66949c5d98316feaad5edb89b60c0e Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 23 Jan 2026 23:38:52 -0500
Subject: [PATCH] Update conversations.php

---
 conversations.php | 83 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 73 insertions(+), 10 deletions(-)

diff --git a/conversations.php b/conversations.php
index 8e59afd..f247cc9 100644
--- a/conversations.php
+++ b/conversations.php
@@ -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) {