From a7ab91615f04cbbd5f6cfbfe578316f4ae5cbdd2 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Fri, 3 Jul 2026 00:52:58 -0500
Subject: [PATCH] =?UTF-8?q?feat(chat-turnero):=20rich=20messaging=20UI=20?=
 =?UTF-8?q?=E2=80=94=20images,=20video,=20audio,=20reactions,=20emoji,=20t?=
 =?UTF-8?q?emplates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Attach button with file preview (image thumb for images, name+size for others)
- Audio recording via MediaRecorder API with live timer; sends as voice note
- Emoji panel with 35 common emojis (medical/comms focused)
- Reaction picker on message hover — sends via chat_react.php API
- Template modal (name, lang, JSON params) — sends via chat_send_message.php type=template
- buildBubble() now renders: inline images, <video> player, <audio> player, doc links with type icon
- Shows reaction_emoji below bubble and status tick on outgoing messages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 modules/turnero/views/chat.php | 415 +++++++++++++++++++++++++++++++--
 1 file changed, 401 insertions(+), 14 deletions(-)

diff --git a/modules/turnero/views/chat.php b/modules/turnero/views/chat.php
index 7f67583..0ac7df7 100644
--- a/modules/turnero/views/chat.php
+++ b/modules/turnero/views/chat.php
@@ -167,6 +167,90 @@ html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMa
 }
 .typing-indicator { font-size: .75rem; color: #888; padding: 2px 8px; }
 
+/* ── Botones extra en input ── */
+.input-extra-btn {
+    background: none; border: none; color: #888; font-size: 1.15rem;
+    cursor: pointer; padding: 6px; border-radius: 50%; transition: background .15s, color .15s;
+    flex-shrink: 0;
+}
+.input-extra-btn:hover { background: rgba(0,0,0,.06); color: #555; }
+
+/* ── Panel emoji ── */
+.emoji-panel {
+    position: absolute; bottom: 64px; left: 0;
+    background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
+    box-shadow: 0 6px 24px rgba(0,0,0,.15); padding: 10px;
+    display: none; flex-wrap: wrap; gap: 2px; width: 280px; z-index: 50;
+}
+.emoji-panel.show { display: flex; }
+.emoji-panel span { font-size: 1.3rem; cursor: pointer; padding: 4px; border-radius: 6px; }
+.emoji-panel span:hover { background: #f0f2f5; }
+
+/* ── Reaction picker ── */
+#reaction-picker {
+    position: fixed; display: none; z-index: 9000;
+    background: #fff; border-radius: 30px; padding: 6px 10px;
+    box-shadow: 0 4px 20px rgba(0,0,0,.18);
+    gap: 4px; align-items: center;
+}
+#reaction-picker.show { display: flex; }
+#reaction-picker span { font-size: 1.4rem; cursor: pointer; padding: 4px 6px; border-radius: 50%; transition: transform .1s; }
+#reaction-picker span:hover { transform: scale(1.3); }
+.msg-bubble { position: relative; }
+.msg-bubble:hover .react-btn { opacity: 1; }
+.react-btn {
+    position: absolute; top: 4px; opacity: 0; transition: opacity .15s;
+    background: #fff; border: 1px solid #e0e0e0; border-radius: 50%;
+    width: 24px; height: 24px; font-size: .75rem; cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    box-shadow: 0 1px 4px rgba(0,0,0,.12);
+}
+.msg-bubble.incoming .react-btn { right: -28px; }
+.msg-bubble.outgoing .react-btn { left: -28px; }
+.msg-reaction { font-size: .95rem; margin-top: 2px; }
+
+/* ── Preview adjunto ── */
+#attach-preview {
+    display: none; align-items: center; gap: 8px;
+    padding: 8px 12px; background: #e9f5fe;
+    border-top: 1px solid #bee3f8; font-size: .85rem;
+}
+#attach-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
+#attach-preview .attach-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#attach-preview .attach-remove { background: none; border: none; color: #e53e3e; cursor: pointer; font-size: 1rem; }
+
+/* ── Recording indicator ── */
+#recording-bar {
+    display: none; align-items: center; gap: 10px;
+    padding: 8px 14px; background: #fff0f0; border-top: 1px solid #fed7d7;
+    font-size: .85rem; color: #e53e3e;
+}
+#recording-bar .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #e53e3e; animation: blink 1s infinite; }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
+
+/* ── Modal plantilla ── */
+#template-modal {
+    display: none; position: fixed; inset: 0; z-index: 1000;
+    background: rgba(0,0,0,.4); align-items: center; justify-content: center;
+}
+#template-modal.show { display: flex; }
+.tpl-card { background: #fff; border-radius: 14px; padding: 24px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
+.tpl-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
+.tpl-field { margin-bottom: 12px; }
+.tpl-field label { font-size: .8rem; color: #555; font-weight: 600; display: block; margin-bottom: 4px; }
+.tpl-field input { width: 100%; padding: 8px 10px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: .9rem; outline: none; }
+.tpl-field input:focus { border-color: #25d366; }
+.tpl-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
+.btn-tpl-cancel { padding: 8px 16px; background: #f5f5f5; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; }
+.btn-tpl-send { padding: 8px 16px; background: #25d366; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; font-weight: 600; }
+
+/* ── Media en burbuja ── */
+.msg-img { max-width: 220px; max-height: 200px; border-radius: 8px; cursor: pointer; display: block; margin-bottom: 3px; }
+.msg-video { max-width: 220px; border-radius: 8px; display: block; margin-bottom: 3px; }
+.msg-audio { width: 200px; margin-bottom: 3px; }
+.msg-doc-link { display: flex; align-items: center; gap: 7px; font-size: .83rem; color: #1a73e8; text-decoration: none; padding: 4px 0; }
+.msg-doc-link:hover { text-decoration: underline; }
+
 .back-btn { display: none; background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; padding: 4px 8px; }
 
 @media (max-width: 680px) {
@@ -243,9 +327,34 @@ html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMa
 
             <div id="typingIndicator" class="typing-indicator" style="display:none">Escribiendo…</div>
 
-            <div class="chat-input-area">
+            <!-- Preview adjunto -->
+            <div id="attach-preview">
+                <img id="attachThumb" src="" alt="" style="display:none">
+                <span class="attach-name" id="attachName"></span>
+                <button class="attach-remove" onclick="clearAttach()">✕</button>
+            </div>
+
+            <!-- Barra de grabación -->
+            <div id="recording-bar">
+                <div class="rec-dot"></div>
+                <span>Grabando…</span>
+                <span id="recTimer" style="font-weight:700;min-width:32px">0:00</span>
+                <button onclick="stopRecording()" style="margin-left:auto;background:#e53e3e;color:#fff;border:none;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:.82rem">Enviar</button>
+                <button onclick="cancelRecording()" style="background:#f5f5f5;border:none;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.82rem">Cancelar</button>
+            </div>
+
+            <input type="file" id="fileInput" style="display:none"
+                accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.csv"
+                onchange="onFileSelected(event)">
+
+            <div class="chat-input-area" style="position:relative">
+                <div class="emoji-panel" id="emojiPanel"></div>
+                <button class="input-extra-btn" onclick="toggleEmojiPanel()" title="Emoji"><i class="fas fa-smile"></i></button>
+                <button class="input-extra-btn" onclick="document.getElementById('fileInput').click()" title="Adjuntar"><i class="fas fa-paperclip"></i></button>
+                <button class="input-extra-btn" id="micBtn" onclick="toggleRecording()" title="Grabar audio"><i class="fas fa-microphone"></i></button>
                 <textarea id="msgInput" rows="1" placeholder="Escribe un mensaje…"
                     onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
+                <button class="input-extra-btn" onclick="openTemplatePicker()" title="Plantilla"><i class="fas fa-file-alt"></i></button>
                 <button class="btn-send" id="btnSend" onclick="sendMessage()" <?= $turneroPhoneId ? '' : 'disabled' ?>>
                     <i class="fas fa-paper-plane"></i>
                 </button>
@@ -255,11 +364,43 @@ html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMa
     </div><!-- /chat-window -->
 </div><!-- /chat-shell -->
 
+<!-- ── Reaction picker ── -->
+<div id="reaction-picker">
+    <?php foreach (['👍','❤️','😂','😮','😢','🙏','🔥','👏'] as $em): ?>
+    <span onclick="sendReactionEmoji('<?= $em ?>')"><?= $em ?></span>
+    <?php endforeach; ?>
+</div>
+
+<!-- ── Modal plantilla ── -->
+<div id="template-modal">
+    <div class="tpl-card">
+        <h3><i class="fas fa-file-alt" style="color:#25d366;margin-right:6px"></i>Enviar Plantilla</h3>
+        <div class="tpl-field">
+            <label>Nombre de plantilla</label>
+            <input type="text" id="tplName" placeholder="ej: consentimiento_turno">
+        </div>
+        <div class="tpl-field">
+            <label>Idioma</label>
+            <input type="text" id="tplLang" value="es_CO" placeholder="es_CO">
+        </div>
+        <div class="tpl-field">
+            <label>Parámetros (JSON, opcional)</label>
+            <input type="text" id="tplParams" placeholder='[{"type":"text","text":"valor"}]'>
+        </div>
+        <div class="tpl-actions">
+            <button class="btn-tpl-cancel" onclick="closeTemplatePicker()">Cancelar</button>
+            <button class="btn-tpl-send" onclick="sendTemplate()">Enviar</button>
+        </div>
+    </div>
+</div>
+
 <script>
 const API_LIST     = 'modules/turnero/api/chat_get_list.php';
 const API_MESSAGES = 'modules/turnero/api/chat_get_messages.php';
 const API_SEND     = 'modules/turnero/api/chat_send_message.php';
 const API_READ     = 'modules/turnero/api/chat_mark_read.php';
+const API_MEDIA    = 'modules/turnero/api/chat_upload_media.php';
+const API_REACT    = 'modules/turnero/api/chat_react.php';
 const BASE         = (function() {
     const s = window.location.pathname;
     return s.replace(/\/erp\.php.*$/, '/') || '/';
@@ -476,33 +617,56 @@ function appendMessage(msg) {
 }
 
 function buildBubble(msg) {
-    const div  = document.createElement('div');
+    const div = document.createElement('div');
     div.className = 'msg-bubble ' + (msg.direction === 'outgoing' ? 'outgoing' : 'incoming');
-    div.dataset.msgId = msg.id;
+    div.dataset.msgId    = msg.id;
+    div.dataset.waId     = msg.message_id || '';
 
+    const mediaSrc = msg.local_file ? ('../' + msg.local_file) : (msg.media_url_external || null);
     let content = '';
 
-    if (msg.message_type === 'image' && (msg.local_file || msg.media_url_external)) {
-        const src = msg.local_file ? ('../' + msg.local_file) : msg.media_url_external;
-        content += `<img class="msg-media-thumb" src="${escHtml(src)}" onclick="window.open('${escHtml(src)}','_blank')" alt="imagen">`;
-        if (msg.content) content += `<div>${escHtml(msg.content)}</div>`;
-    } else if (['audio','video','document'].includes(msg.message_type) && (msg.local_file || msg.media_url_external)) {
-        const src  = msg.local_file ? ('../' + msg.local_file) : msg.media_url_external;
-        const icon = msg.message_type === 'audio' ? 'fa-file-audio' : msg.message_type === 'video' ? 'fa-file-video' : 'fa-file-alt';
-        content += `<a class="msg-media-link" href="${escHtml(src)}" target="_blank">
-            <i class="fas ${icon}"></i> ${escHtml(msg.filename || msg.message_type)}
+    if (msg.message_type === 'image' && mediaSrc) {
+        content = `<img class="msg-img" src="${escHtml(mediaSrc)}" loading="lazy"
+            onclick="window.open('${escHtml(mediaSrc)}','_blank')" alt="imagen">`;
+        if (msg.content) content += `<div style="font-size:.82rem;margin-top:2px">${escHtml(msg.content)}</div>`;
+    } else if (msg.message_type === 'video' && mediaSrc) {
+        content = `<video class="msg-video" src="${escHtml(mediaSrc)}" controls preload="metadata"></video>`;
+        if (msg.content) content += `<div style="font-size:.82rem;margin-top:2px">${escHtml(msg.content)}</div>`;
+    } else if (msg.message_type === 'audio' && mediaSrc) {
+        content = `<audio class="msg-audio" src="${escHtml(mediaSrc)}" controls preload="metadata"></audio>`;
+    } else if (msg.message_type === 'document' && mediaSrc) {
+        const icon = (msg.mime_type || '').includes('pdf') ? 'fa-file-pdf' :
+                     (msg.mime_type || '').includes('spreadsheet') || (msg.mime_type || '').includes('excel') ? 'fa-file-excel' :
+                     (msg.mime_type || '').includes('word') ? 'fa-file-word' : 'fa-file-alt';
+        content = `<a class="msg-doc-link" href="${escHtml(mediaSrc)}" target="_blank">
+            <i class="fas ${icon}" style="font-size:1.3rem"></i>
+            <span>${escHtml(msg.filename || 'Documento')}</span>
         </a>`;
     } else {
         content = nl2br(escHtml(msg.content || ''));
     }
 
     const time = msg.created_at ? formatTimeFull(msg.created_at) : '';
-    div.innerHTML = content + `<div class="msg-time">${time}</div>`;
+    const statusIcon = msg.direction === 'outgoing'
+        ? (msg.status === 'read' ? ' ✓✓' : msg.status === 'delivered' ? ' ✓✓' : ' ✓')
+        : '';
+
+    const reactBtn = msg.message_id
+        ? `<button class="react-btn" onclick="showReactionPicker(event, '${escHtml(msg.message_id)}')">😊</button>`
+        : '';
+
+    div.innerHTML = content
+        + `<div class="msg-time">${time}<span style="opacity:.7;font-size:.7rem">${statusIcon}</span></div>`
+        + (msg.reaction_emoji ? `<div class="msg-reaction">${escHtml(msg.reaction_emoji)}</div>` : '')
+        + reactBtn;
     return div;
 }
 
-// ── Enviar ────────────────────────────────────────────────────────────────────
+// ── Enviar texto ─────────────────────────────────────────────────────────────
 async function sendMessage() {
+    // Si hay archivo adjunto, enviar como media
+    if (attachFile) { await sendMedia(); return; }
+
     const input   = document.getElementById('msgInput');
     const message = input.value.trim();
     if (!message || !state.activeUserId) return;
@@ -534,6 +698,229 @@ async function sendMessage() {
     }
 }
 
+// ── Adjuntar archivo ──────────────────────────────────────────────────────────
+let attachFile = null;
+
+function onFileSelected(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    attachFile = file;
+    const prev = document.getElementById('attach-preview');
+    const thumb = document.getElementById('attachThumb');
+    const name  = document.getElementById('attachName');
+    name.textContent = file.name + ' (' + (file.size > 1048576 ? (file.size/1048576).toFixed(1) + ' MB' : Math.round(file.size/1024) + ' KB') + ')';
+    if (file.type.startsWith('image/')) {
+        thumb.src = URL.createObjectURL(file);
+        thumb.style.display = 'block';
+    } else {
+        thumb.style.display = 'none';
+    }
+    prev.style.display = 'flex';
+    e.target.value = '';
+}
+
+function clearAttach() {
+    attachFile = null;
+    document.getElementById('attach-preview').style.display = 'none';
+    document.getElementById('attachThumb').src = '';
+}
+
+async function sendMedia() {
+    if (!attachFile || !state.activeUserId) return;
+    const btn = document.getElementById('btnSend');
+    btn.disabled = true;
+    const caption = document.getElementById('msgInput').value.trim();
+
+    const fd = new FormData();
+    fd.append('user_id', state.activeUserId);
+    fd.append('file', attachFile);
+    if (caption) fd.append('caption', caption);
+
+    try {
+        const res  = await fetch(BASE + API_MEDIA, { method: 'POST', body: fd });
+        const json = await res.json();
+        if (!json.success) {
+            alert('Error al enviar archivo: ' + (json.error || 'desconocido'));
+        } else {
+            clearAttach();
+            document.getElementById('msgInput').value = '';
+            autoResize(document.getElementById('msgInput'));
+            await pollMessages();
+        }
+    } catch(e) {
+        alert('Error de red al enviar el archivo');
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+// ── Emoji picker ──────────────────────────────────────────────────────────────
+const EMOJI_LIST = ['😀','😂','😍','😎','😢','😡','🤔','👍','👎','❤️','🔥','✅','⭐','🎉','🙏','💪','🤣','😅','😊','🥰','😘','🤗','😴','🤒','😷','💊','🏥','👨‍⚕️','👩‍⚕️','📋','📞','📅','⏰','💉','🩺'];
+
+function toggleEmojiPanel() {
+    const panel = document.getElementById('emojiPanel');
+    if (!panel.classList.contains('show')) {
+        panel.innerHTML = EMOJI_LIST.map(e => `<span onclick="insertEmoji('${e}')">${e}</span>`).join('');
+    }
+    panel.classList.toggle('show');
+}
+
+function insertEmoji(em) {
+    const inp = document.getElementById('msgInput');
+    const pos = inp.selectionStart;
+    inp.value = inp.value.slice(0, pos) + em + inp.value.slice(pos);
+    inp.selectionStart = inp.selectionEnd = pos + em.length;
+    inp.focus();
+    autoResize(inp);
+    document.getElementById('emojiPanel').classList.remove('show');
+}
+
+document.addEventListener('click', e => {
+    const panel = document.getElementById('emojiPanel');
+    if (panel.classList.contains('show') && !e.target.closest('.chat-input-area')) {
+        panel.classList.remove('show');
+    }
+    const rp = document.getElementById('reaction-picker');
+    if (rp.classList.contains('show') && !e.target.closest('#reaction-picker') && !e.target.closest('.react-btn')) {
+        rp.classList.remove('show');
+    }
+});
+
+// ── Reacciones ────────────────────────────────────────────────────────────────
+let _reactionTarget = null;
+
+function showReactionPicker(e, waId) {
+    e.stopPropagation();
+    _reactionTarget = waId;
+    const rp = document.getElementById('reaction-picker');
+    rp.classList.add('show');
+    const rect = e.target.getBoundingClientRect();
+    rp.style.top  = (rect.top - 60) + 'px';
+    rp.style.left = Math.max(4, rect.left - 80) + 'px';
+}
+
+async function sendReactionEmoji(emoji) {
+    document.getElementById('reaction-picker').classList.remove('show');
+    if (!_reactionTarget || !state.activeUserId) return;
+    try {
+        await fetch(BASE + API_REACT, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ user_id: state.activeUserId, message_id: _reactionTarget, emoji })
+        });
+        await pollMessages();
+    } catch(e) { console.error('reaction:', e); }
+}
+
+// ── Grabación de audio ────────────────────────────────────────────────────────
+let mediaRecorder = null, audioChunks = [], recInterval = null, recSeconds = 0;
+
+async function toggleRecording() {
+    if (mediaRecorder && mediaRecorder.state === 'recording') {
+        stopRecording();
+    } else {
+        await startRecording();
+    }
+}
+
+async function startRecording() {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        audioChunks = [];
+        mediaRecorder = new MediaRecorder(stream, { mimeType: MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/ogg' });
+        mediaRecorder.ondataavailable = e => { if (e.data.size > 0) audioChunks.push(e.data); };
+        mediaRecorder.start(100);
+
+        recSeconds = 0;
+        document.getElementById('recording-bar').style.display = 'flex';
+        document.getElementById('recTimer').textContent = '0:00';
+        document.getElementById('micBtn').style.color = '#e53e3e';
+        recInterval = setInterval(() => {
+            recSeconds++;
+            const m = Math.floor(recSeconds/60), s = recSeconds%60;
+            document.getElementById('recTimer').textContent = m + ':' + String(s).padStart(2,'0');
+        }, 1000);
+    } catch(e) {
+        alert('No se pudo acceder al micrófono: ' + e.message);
+    }
+}
+
+async function stopRecording() {
+    if (!mediaRecorder) return;
+    clearInterval(recInterval);
+    document.getElementById('recording-bar').style.display = 'none';
+    document.getElementById('micBtn').style.color = '';
+
+    return new Promise(resolve => {
+        mediaRecorder.onstop = async () => {
+            const mime = mediaRecorder.mimeType || 'audio/webm';
+            const blob = new Blob(audioChunks, { type: mime });
+            const ext  = mime.includes('ogg') ? 'ogg' : 'webm';
+            const file = new File([blob], `audio_${Date.now()}.${ext}`, { type: mime });
+            mediaRecorder.stream.getTracks().forEach(t => t.stop());
+            mediaRecorder = null;
+
+            if (!state.activeUserId) { resolve(); return; }
+            const fd = new FormData();
+            fd.append('user_id', state.activeUserId);
+            fd.append('file', file);
+            fd.append('is_voice', '1');
+            try {
+                const res  = await fetch(BASE + API_MEDIA, { method: 'POST', body: fd });
+                const json = await res.json();
+                if (json.success) await pollMessages();
+                else alert('Error al enviar audio: ' + (json.error || ''));
+            } catch(e) { alert('Error de red al enviar audio'); }
+            resolve();
+        };
+        mediaRecorder.stop();
+    });
+}
+
+function cancelRecording() {
+    if (!mediaRecorder) return;
+    clearInterval(recInterval);
+    mediaRecorder.stream.getTracks().forEach(t => t.stop());
+    mediaRecorder = null;
+    audioChunks   = [];
+    document.getElementById('recording-bar').style.display = 'none';
+    document.getElementById('micBtn').style.color = '';
+}
+
+// ── Plantilla ─────────────────────────────────────────────────────────────────
+function openTemplatePicker() {
+    if (!state.activeUserId) return;
+    document.getElementById('template-modal').classList.add('show');
+    document.getElementById('tplName').focus();
+}
+function closeTemplatePicker() {
+    document.getElementById('template-modal').classList.remove('show');
+}
+
+async function sendTemplate() {
+    const name   = document.getElementById('tplName').value.trim();
+    const lang   = document.getElementById('tplLang').value.trim() || 'es_CO';
+    const rawP   = document.getElementById('tplParams').value.trim();
+    if (!name || !state.activeUserId) return alert('Ingresa el nombre de la plantilla');
+
+    let params = [];
+    if (rawP) {
+        try { params = JSON.parse(rawP); } catch(e) { return alert('Los parámetros no son JSON válido'); }
+    }
+
+    closeTemplatePicker();
+    try {
+        const res  = await fetch(BASE + API_SEND, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ user_id: state.activeUserId, type: 'template', template: name, lang, params })
+        });
+        const json = await res.json();
+        if (!json.success) alert('Error al enviar plantilla: ' + (json.error || ''));
+        else await pollMessages();
+    } catch(e) { alert('Error de red al enviar plantilla'); }
+}
+
 async function markRead(userId) {
     try {
         await fetch(BASE + API_READ, {