' + label + '' + esc(prev) + '
'\n}\n\nfunction metaHTML(m) {\n let t = ''\n if (m.mine) {\n if (m.status === 'pending') t = '' + TICK.pending + ''\n else if (m.status === 'sent') t = '' + TICK.sent + ''\n else if (m.status === 'delivered') t = '' + TICK.two + ''\n else if (m.status === 'read') t = '' + TICK.two + ''\n }\n return ''\n}\n\nfunction reactHTML(m) {\n const ks = Object.keys(m.reactions || {})\n if (!ks.length) return ''\n return '' + ks.map((k) => '' + k + '').join('') + ''\n}\n\nfunction bodyHTML(m) {\n const cap = m.body || m.caption || ''\n const capH = cap ? '' + esc(cap) + '
' : ''\n if (m.kind === 'image') return '' + capH\n if (m.kind === 'sticker') return ''\n if (m.kind === 'video') return '' + capH\n if (m.kind === 'document') return '' + IC.doc + '' + IC.down + '
' + capH\n if (m.kind === 'audio') {\n const bb = bars(m.id, 34).map((h) => '').join('')\n return '' + mmss(m.durSec || 0) + '
'\n }\n if (m.kind === 'system') return '' + esc(cap) + '
'\n return '' + esc(cap) + '
'\n}\n\nfunction bubbleHTML(m, st, name) {\n if (m.kind === 'system') return '' + esc(m.body) + '
' +\n '
'\n}\n\nfunction threadHTML(msgs, st, name) {\n let out = '' +\n '
' + quoteHTML(m.replyTo) + bodyHTML(m) + metaHTML(m) + reactHTML(m) + '
' +\n '' + menu +\n '' + IC.lock + '' + T.encrypted + '
'\n if (!msgs.length) {\n out += '' + IC.smile + '
' + T.emptyT + 'Escribe abajo para empezar a hablar con ' + esc(name) + '.' + T.today + '
'\n for (const m of msgs) out += bubbleHTML(m, st, name)\n if (st.bellaTyping) out += '' +\n\n '' +\n\n (st.debugOpen ? debugHTML(st) : '') +\n (st.lightbox ? '![](\"')
' : '') +\n '' +\n '
'\n },\n\n mounted(d2, root) {\n if (!d2.state.msgs) d2.setState({ msgs: [], log: [], presence: 'idle', lastSeen: 'últ. vez hoy a las ' + hhmm(Date.now()) })\n ensureAudio(d2)\n\n d2.on('#cin', 'input', (e, el) => { draft = el.value; syncDraft(d2) })\n d2.on('#cin', 'keydown', (e, el) => {\n if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); draft = el.value; sendText(d2) }\n })\n d2.on('#btn-send', 'click', () => sendText(d2))\n d2.on('#btn-emoji', 'click', () => { d2.state.attachOpen = false; d2.state.emojiOpen = !d2.state.emojiOpen })\n d2.on('#btn-attach', 'click', () => { d2.state.emojiOpen = false; d2.state.attachOpen = !d2.state.attachOpen })\n d2.on('.ec', 'click', (e, el) => {\n const ta = d2.$('#cin')\n draft = (ta ? ta.value : draft) + el.dataset.emo\n if (ta) { ta.value = draft; ta.focus() }\n syncDraft(d2)\n })\n d2.on('#scrim', 'click', () => d2.setState({ emojiOpen: false, attachOpen: false, menuFor: '' }))\n\n d2.on('.mitem[data-att]', 'click', (e, el) => {\n const fin = d2.$('#fin')\n if (!fin) return\n fin.accept = el.dataset.att === 'media' ? 'image/*,video/*' : ''\n d2.state.attachOpen = false\n fin.click()\n })\n d2.on('#fin', 'change', (e, el) => { const f = el.files && el.files[0]; el.value = ''; if (f) sendFile(d2, f) })\n\n d2.on('#btn-mic', 'click', () => startRec(d2))\n d2.on('#rec-send', 'click', () => stopRec(d2, true))\n d2.on('#rec-cancel', 'click', () => stopRec(d2, false))\n\n d2.on('.bmb', 'click', (e, el) => { e.stopPropagation(); d2.setState({ emojiOpen: false, attachOpen: false, menuFor: d2.state.menuFor === el.dataset.menu ? '' : el.dataset.menu }) })\n d2.on('.qr', 'click', (e, el) => {\n const id = el.dataset.react, emo = el.dataset.emo\n d2.state.msgs = (d2.state.msgs || []).map((m) => {\n if (m.id !== id) return m\n const r = Object.assign({}, m.reactions || {})\n if (r[emo]) delete r[emo]; else r[emo] = 1\n return Object.assign({}, m, { reactions: r })\n })\n d2.state.menuFor = ''\n })\n d2.on('.mitem[data-replyto]', 'click', (e, el) => {\n const m = (d2.state.msgs || []).find((x) => x.id === el.dataset.replyto)\n if (!m) return\n d2.setState({\n menuFor: '',\n replyTo: { id: m.id, mine: m.mine, author: d2.param('bellaName') || 'Bella', kind: m.kind, preview: (m.body || m.caption || m.fname || '').slice(0, 90) }\n })\n const ta = d2.$('#cin'); if (ta) ta.focus()\n })\n d2.on('#reply-x', 'click', () => { d2.state.replyTo = null })\n\n d2.on('.img', 'click', (e, el) => { if (el.dataset.open) d2.state.lightbox = el.dataset.open })\n d2.on('#lightbox', 'click', () => { d2.state.lightbox = '' })\n\n d2.on('.apl', 'click', (e, el) => {\n const id = el.dataset.play, src = el.dataset.src\n if (!ensureAudio(d2)) return\n if (d2.state.playingId === id) { audioEl.pause(); d2.state.playingId = ''; return }\n if (audioEl.src !== src) { audioEl.src = src; audioEl.currentTime = 0 }\n audioEl.play().catch(() => {})\n d2.state.playingId = id\n })\n d2.on('.abars', 'click', (e, el) => {\n if (!audioEl || d2.state.playingId !== el.dataset.seek || !audioEl.duration) return\n const r = el.getBoundingClientRect()\n audioEl.currentTime = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * audioEl.duration\n paintAudio(d2)\n })\n\n d2.on('#dbg-open', 'click', () => { d2.state.debugOpen = true })\n d2.on('#dbg-close', 'click', () => { d2.state.debugOpen = false })\n\n d2.on('#thread', 'scroll', (e, el) => {\n stick = el.scrollHeight - el.scrollTop - el.clientHeight < 60\n mirrorScroll(d2)\n })\n\n d2.onUnmount(() => {\n try { if (audioEl) audioEl.pause() } catch (x) {}\n if (recTimer) clearInterval(recTimer)\n try { if (rec && rec.state === 'recording') rec.stream.getTracks().forEach((t) => t.stop()) } catch (x) {}\n blobs.forEach((u) => { try { URL.revokeObjectURL(u) } catch (x) {} })\n blobs = []\n })\n },\n\n updated(d2) {\n const ta = d2.$('#cin')\n if (ta && draft && !ta.value) ta.value = draft\n syncDraft(d2)\n paintAudio(d2)\n const th = d2.$('#thread'), pt = d2.$('#pthread')\n if (stick) {\n if (th) th.scrollTop = th.scrollHeight\n if (pt) pt.scrollTop = pt.scrollHeight\n } else {\n mirrorScroll(d2)\n }\n }\n}\n\n/* ---------------------------------- inspector ---------------------------------- */\nfunction debugHTML(st) {\n const log = st.log || []\n const body = !log.length\n ? '' +\n '' +\n\n '' +\n ' ' +\n '
' +\n\n '' +\n '
' +\n\n '' + esc(name) + '' + esc(status) + '
' +\n '' + thread + '
' +\n\n (st.replyTo ? '' : '') +\n\n '' +\n (st.recording\n ? '' +\n '' +\n ''\n : '' +\n '' +\n '' +\n '' +\n '') +\n\n (st.emojiOpen ? '' : '') +\n (st.attachOpen ? '' : '') +\n '
' +\n\n (overlay ? '' : '') +\n (d2.param('debugEnabled') !== false && !st.debugOpen ? '' : '') +\n '' + EMO.map((e) => '').join('') + '
' +\n '' +\n '
' + clock + '5G
' +\n '' + IC.back + '' +\n '
' +\n '' + esc(name) + '' + esc(status) + '
' +\n '' + IC.video + IC.phone + '
' + thread + '
' +\n '' + IC.emoji + '' + T.composerPh + '' + IC.clip + '
' +\n '' + IC.mic + '' + T.dbgEmpty + '
'\n : log.slice().reverse().map((e) =>\n '' + (e.error ? 'ERROR' : 'OK') + '' + hhmm(e.t) + '' + e.ms + ' ms
' +\n 'Petición
' + esc(JSON.stringify(e.request, null, 2)) + '
' +\n (e.error\n ? 'Error
' + esc(e.error) + '
'\n : 'Respuesta
' + esc(JSON.stringify(e.response, null, 2)) + '
') +\n '' + IC.bug + 'Inspector
' + body + '