From 71ae1cc9a47eb45bec2d687607c164e4ed659217 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Sat, 24 Jan 2026 01:23:50 -0500
Subject: [PATCH] Update conversations.php

---
 conversations.php | 111 +++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 94 insertions(+), 17 deletions(-)

diff --git a/conversations.php b/conversations.php
index ae7ac28..2229cea 100644
--- a/conversations.php
+++ b/conversations.php
@@ -797,8 +797,8 @@
 
                 <div class="chat-input" style="position:relative;">
                     <input type="file" id="file-input" accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" style="display: none;">
-                    <button class="btn" id="attach-btn" title="Opciones">
-                        <i class="fas fa-plus"></i>
+                    <button class="btn" id="attach-btn" title="Adjuntar">
+                        <i class="fas fa-paperclip" aria-hidden="true"></i>
                     </button>
                     <div id="attach-menu" class="attach-menu" style="display:none;">
                         <button class="attach-option" data-action="file">Enviar archivo</button>
@@ -817,7 +817,27 @@
                     <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">⚡️</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 style="padding:6px;">
+                                <input id="quick-replies-search" class="form-control form-control-sm" placeholder="Buscar respuestas o plantillas..." autocomplete="off" />
+                            </div>
+                            <div class="qr-sections" style="max-height:260px; overflow:auto; padding:6px;">
+                                <div class="qr-section">
+                                    <div style="display:flex; justify-content:space-between; align-items:center;">
+                                        <strong>Respuestas rápidas</strong>
+                                        <small id="qr-count" class="text-muted">0</small>
+                                    </div>
+                                    <div class="qr-list" style="display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;"></div>
+                                </div>
+                                <hr style="margin:8px 0; border-color:#eee;">
+                                <div class="tpl-section">
+                                    <div style="display:flex; justify-content:space-between; align-items:center;">
+                                        <strong>Plantillas</strong>
+                                        <small id="tpl-count" class="text-muted">0</small>
+                                    </div>
+                                    <div class="tpl-list" style="display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;"></div>
+                                </div>
+                            </div>
+                            <div class="text-muted" id="qr-empty" style="padding:8px; display:none;">No hay respuestas rápidas ni plantillas que coincidan.</div>
                         </div>
                     </div>
                     <button class="btn" id="mic-btn" title="Grabar audio" style="margin-left:6px;  border:1px solid #ddd;">
@@ -1234,10 +1254,44 @@
                         const isOpen = qrPanel.style.display === 'block';
                         qrPanel.style.display = isOpen ? 'none' : 'block';
                         qrToggle.setAttribute('aria-expanded', String(!isOpen));
+                        // Focus search when panel opens
+                        if (!isOpen) {
+                            setTimeout(() => {
+                                const s = document.getElementById('quick-replies-search');
+                                if (s) { s.value = ''; s.focus(); s.dispatchEvent(new Event('input')); }
+                            }, 80);
+                        }
                     });
 
                     qrPanel.addEventListener('click', (ev) => { ev.stopPropagation(); });
                     document.addEventListener('click', () => { qrPanel.style.display = 'none'; qrToggle.setAttribute('aria-expanded','false'); });
+
+                    // Quick replies search/filter behavior
+                    const qrSearch = document.getElementById('quick-replies-search');
+                    if (qrSearch) {
+                        const filterLists = () => {
+                            const q = (qrSearch.value || '').trim().toLowerCase();
+                            const qrList = qrPanel.querySelector('.qr-list');
+                            const tplList = qrPanel.querySelector('.tpl-list');
+                            let qrMatches = 0, tplMatches = 0;
+                            if (qrList) Array.from(qrList.children).forEach(b => {
+                                const t = (b.textContent || '').toLowerCase();
+                                const ok = q === '' || t.indexOf(q) !== -1;
+                                b.style.display = ok ? 'inline-block' : 'none';
+                                if (ok) qrMatches++;
+                            });
+                            if (tplList) Array.from(tplList.children).forEach(b => {
+                                const t = (b.textContent || '').toLowerCase();
+                                const ok = q === '' || t.indexOf(q) !== -1;
+                                b.style.display = ok ? 'inline-block' : 'none';
+                                if (ok) tplMatches++;
+                            });
+                            const qrCount = document.getElementById('qr-count'); if (qrCount) qrCount.textContent = qrMatches;
+                            const tplCount = document.getElementById('tpl-count'); if (tplCount) tplCount.textContent = tplMatches;
+                            const empty = document.getElementById('qr-empty'); if (empty) empty.style.display = (qrMatches + tplMatches) ? 'none' : 'block';
+                        };
+                        qrSearch.addEventListener('input', filterLists);
+                    }
                 }
 
                 // Mic / recording
@@ -1252,12 +1306,16 @@
                     }
                 } catch (e) { /* ignore */ }
 
+                // Use lexical captured self to avoid 'this' binding issues in event handlers
+                const self = this;
+
                 if (micBtn) {
-                    micBtn.addEventListener('click', () => {
-                        if (this._mediaRecorder && this._mediaRecorder.state === 'recording') {
-                            this.stopRecording();
+                    micBtn.addEventListener('click', (ev) => {
+                        ev.preventDefault();
+                        if (self._mediaRecorder && self._mediaRecorder.state === 'recording') {
+                            self.stopRecording();
                         } else {
-                            this.startRecording();
+                            self.startRecording();
                         }
                     });
                 }
@@ -2353,12 +2411,22 @@
             async loadQuickReplies() {
                 const panel = document.getElementById('quick-replies-panel');
                 if (!panel) return;
-                panel.innerHTML = '';
+                // Clear both lists
+                const qrList = panel.querySelector('.qr-list');
+                const tplList = panel.querySelector('.tpl-list');
+                const qrCount = panel.querySelector('#qr-count');
+                const tplCount = panel.querySelector('#tpl-count');
+                if (qrList) qrList.innerHTML = '';
+                if (tplList) tplList.innerHTML = '';
+                if (qrCount) qrCount.textContent = '0';
+                if (tplCount) tplCount.textContent = '0';
+
                 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 => {
+                        let added = 0;
+                        respText.data.forEach(r => {
                             if (!r.is_active) return;
                             const btn = document.createElement('button');
                             btn.className = 'btn btn-sm btn-outline-primary';
@@ -2372,17 +2440,20 @@
                                 panel.style.display = 'none';
                                 document.getElementById('quick-replies-toggle').setAttribute('aria-expanded','false');
                             });
-                            panel.appendChild(btn);
+                            if (qrList) qrList.appendChild(btn);
+                            added++;
                         });
+                        if (qrCount) qrCount.textContent = String(added);
                     }
                 } catch (e) {
                     console.error('Error loading quick replies (text)', e);
                 }
 
                 try {
-                    const resp = await apiCall('get_templates.php?approved_only=1&limit=10');
+                    const resp = await apiCall('get_templates.php?approved_only=1&limit=30');
                     if (resp && resp.success && Array.isArray(resp.data)) {
-                        resp.data.slice(0,4).forEach(t => {
+                        let added = 0;
+                        resp.data.forEach(t => {
                             const btn = document.createElement('button');
                             btn.className = 'btn btn-sm btn-outline-secondary';
                             let text = (t.body_text || t.name || t.template_name || '').replace(/\n/g,' ');
@@ -2390,8 +2461,10 @@
                             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'); panel.style.display='none'; document.getElementById('quick-replies-toggle').setAttribute('aria-expanded','false'); });
-                            panel.appendChild(btn);
+                            if (tplList) tplList.appendChild(btn);
+                            added++;
                         });
+                        if (tplCount) tplCount.textContent = String(added);
                     }
                 } catch (e) {
                     console.error('Error loading quick replies (templates)', e);
@@ -2400,10 +2473,14 @@
                 // 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>';
-                }
+                // Show a small hint if there are no quick replies and no templates
+                const empty = panel.querySelector('#qr-empty');
+                const total = (qrList ? qrList.children.length : 0) + (tplList ? tplList.children.length : 0);
+                if (empty) empty.style.display = total ? 'none' : 'block';
+
+                // Trigger an initial filter (useful when search has an active value)
+                const sq = panel.querySelector('#quick-replies-search'); if (sq) sq.dispatchEvent(new Event('input'));
+
             }
 
             async sendTemplateQuick(templateName, language) {