LiveChat 💬

💬 LiveChat

Real-time groupchat — join the conversation

\n \n \n

\n \n

view source

\n\n \n\n \n \n\n \n\n\n",[],[97,115],"78c0d068-2ef8-11f1-9449-42dde27851f2","app.js","22d03c98-2ef8-11f1-8174-42dde27851f2",11,["D",1775178013768],"// ─── State ────────────────────────────────────────────────────────────────────\nlet currentUser = null;\nlet lastMessageId = 0;\nlet pollInterval = null;\nlet currentTab = \"login\";\nlet cachedToken = null;\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\nfunction formatTime(isoStr) {\n const d = new Date(isoStr.endsWith(\"Z\") ? isoStr : isoStr + \"Z\");\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nfunction escapeHtml(str) {\n return String(str)\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\n// ─── Tab switching ────────────────────────────────────────────────────────────\nwindow.showTab = function (tab) {\n currentTab = tab;\n document.getElementById(\"tab-login\").classList.toggle(\"active\", tab === \"login\");\n document.getElementById(\"tab-register\").classList.toggle(\"active\", tab === \"register\");\n document.getElementById(\"auth-submit\").textContent =\n tab === \"login\" ? \"Login\" : \"Create Account\";\n document.getElementById(\"auth-error\").style.display = \"none\";\n};\n\n// ─── Auth ─────────────────────────────────────────────────────────────────────\nwindow.submitAuth = async function (e) {\n e.preventDefault();\n const username = document.getElementById(\"auth-username\").value.trim();\n const password = document.getElementById(\"auth-password\").value;\n const errorEl = document.getElementById(\"auth-error\");\n errorEl.style.display = \"none\";\n\n const endpoint = currentTab === \"login\" ? \"/api/login\" : \"/api/register\";\n try {\n const res = await fetch(endpoint, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, password }),\n });\n const data = await res.json();\n if (!res.ok) {\n errorEl.textContent = data.error || \"Something went wrong\";\n errorEl.style.display = \"block\";\n return;\n }\n currentUser = data.user;\n showChat();\n } catch {\n errorEl.textContent = \"Network error. Try again.\";\n errorEl.style.display = \"block\";\n }\n};\n\nwindow.logout = async function () {\n await fetch(\"/api/logout\", { method: \"POST\" });\n currentUser = null;\n cachedToken = null;\n lastMessageId = 0;\n clearInterval(pollInterval);\n pollInterval = null;\n document.getElementById(\"chat-screen\").style.display = \"none\";\n document.getElementById(\"auth-screen\").style.display = \"flex\";\n document.getElementById(\"messages\").innerHTML = \"\";\n};\n\n// ─── Chat ─────────────────────────────────────────────────────────────────────\nfunction showChat() {\n document.getElementById(\"auth-screen\").style.display = \"none\";\n document.getElementById(\"chat-screen\").style.display = \"flex\";\n document.getElementById(\"header-user\").textContent = \"👤 \" + currentUser.username;\n loadMessages();\n pollInterval = setInterval(pollMessages, 1500);\n document.getElementById(\"msg-input\").focus();\n}\n\nfunction renderMessage(msg) {\n const isOwn = currentUser && msg.username === currentUser.username;\n const initial = msg.username[0].toUpperCase();\n const div = document.createElement(\"div\");\n div.className = \"msg\" + (isOwn ? \" own\" : \"\");\n div.dataset.id = msg.id;\n div.innerHTML = `\n

${initial}

\n ${isOwn ? \"You\" : escapeHtml(msg.username)}\n ${formatTime(msg.created_at)}\n

${escapeHtml(msg.content)}

`;\n return div;\n}\n\nasync function loadMessages() {\n const res = await fetch(\"/api/messages?limit=20\");\n const data = await res.json();\n const container = document.getElementById(\"messages\");\n container.innerHTML = \"\";\n if (!data.messages.length) {\n container.innerHTML = '

No messages yet. Say hello! 👋

';\n } else {\n data.messages.forEach((m) => container.appendChild(renderMessage(m)));\n lastMessageId = data.messages[data.messages.length - 1].id;\n }\n container.scrollTop = container.scrollHeight;\n}\n\nasync function pollMessages() {\n if (!currentUser) return;\n try {\n const res = await fetch(`/api/messages/poll?since=${lastMessageId}`);\n if (!res.ok) return;\n const data = await res.json();\n if (data.messages?.length) {\n const container = document.getElementById(\"messages\");\n const wasAtBottom =\n container.scrollHeight - container.scrollTop - container.clientHeight < 80;\n const placeholder = container.querySelector(\".system-msg\");\n if (placeholder) placeholder.remove();\n data.messages.forEach((m) => container.appendChild(renderMessage(m)));\n lastMessageId = data.messages[data.messages.length - 1].id;\n if (wasAtBottom) container.scrollTop = container.scrollHeight;\n }\n } catch { /* ignore polling errors */ }\n}\n\nwindow.sendMessage = async function (e) {\n e.preventDefault();\n const input = document.getElementById(\"msg-input\");\n const content = input.value.trim();\n if (!content) return;\n input.value = \"\";\n try {\n await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content }),\n });\n await pollMessages();\n } catch {\n input.value = content;\n }\n};\n\n// ─── API Token modal ──────────────────────────────────────────────────────────\nconst BASE_URL = window.location.origin;\n\nwindow.showTokenModal = async function () {\n const modal = document.getElementById(\"token-modal\");\n modal.style.display = \"flex\";\n const display = document.getElementById(\"token-display\");\n\n if (cachedToken) {\n display.textContent = cachedToken;\n updateBookmarklet(cachedToken);\n return;\n }\n\n display.textContent = \"Generating…\";\n try {\n const res = await fetch(\"/api/token\", { method: \"POST\" });\n const data = await res.json();\n cachedToken = data.token;\n display.textContent = cachedToken;\n updateBookmarklet(cachedToken);\n } catch {\n display.textContent = \"Error generating token. Try again.\";\n }\n};\n\nfunction updateBookmarklet(token) {\n const code = document.getElementById(\"bookmarklet-code\");\n const snippet = `// Paste in browser console or use as bookmarklet:\nfetch(\"${BASE_URL}/api/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Bearer ${token}\"\n },\n body: JSON.stringify({ content: \"Hello from my bookmarklet!\" })\n}).then(r => r.json()).then(console.log);`;\n code.textContent = snippet;\n}\n\nwindow.copyToken = function () {\n if (!cachedToken) return;\n navigator.clipboard.writeText(cachedToken).then(() => {\n const btn = document.querySelector(\".copy-btn\");\n btn.textContent = \"Copied ✓\";\n setTimeout(() => (btn.textContent = \"Copy\"), 2000);\n });\n};\n\nwindow.closeTokenModal = function (e) {\n if (!e || e.target.id === \"token-modal\") {\n document.getElementById(\"token-modal\").style.display = \"none\";\n }\n};\n\n// ─── Init — check if already logged in ────────────────────────────────────────\n(async () => {\n try {\n const res = await fetch(\"/api/me\");\n if (res.ok) {\n const data = await res.json();\n currentUser = data.user;\n showChat();\n }\n } catch { /* not logged in */ }\n})();\n",[],[97,123],["D",1775177799201],[133,134],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":138,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":139,"_18":140},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":135,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":136,"_18":137},["D",1775179145640],[],[19,37],["D",1775177972912],[],[19,60],"382ce5d6-2ef9-11f1-977e-42dde27851f2","bookmarklet","761c320d-60c7-4a68-9911-89597f56de08",13,["D",1775178334898],[148],[142],{"_35":149,"_13":150,"_38":151,"_40":143,"_42":43,"_44":152,"_46":47,"_48":153,"_17":99,"_51":24,"_53":154,"_55":56,"_57":-5,"_84":155,"_18":156},"4ef2d0a8-2efb-11f1-9398-42dde27851f2","source.js","382c7858-2ef9-11f1-977e-42dde27851f2",19,["D",1775179232123],"// =============================================================\n// LiveChat — All-in-One Bookmarklet (readable source)\n// Uses Shadow DOM for full style isolation from the host page.\n// Custom resize grip so overflow:hidden doesn't break it.\n// Double-send prevention via sending flag.\n// Messages: others LEFT, yours RIGHT (standard chat layout).\n// Token persisted in localStorage — no re-login needed.\n// =============================================================\n(function () {\n var BASE = 'https://MJK--2cb58f1a2ef811f1946342dde27851f2.web.val.run';\n var HOST_ID = '__lc_host';\n\n // ── Toggle ───────────────────────────────────────────────\n if (document.getElementById(HOST_ID)) {\n document.getElementById(HOST_ID).remove();\n return;\n }\n\n // ── Persistent state ─────────────────────────────────────\n var token = localStorage.getItem('__lc_tok') || null;\n var me = localStorage.getItem('__lc_me') || null;\n var lastId = 0, pollTimer = null, authTab = 'login', sending = false;\n\n // Saved geometry\n var W = Math.max(280, parseInt(localStorage.getItem('__lc_w') || '320'));\n var H = Math.max(300, parseInt(localStorage.getItem('__lc_h') || '460'));\n var PX = parseInt(localStorage.getItem('__lc_x') || String(window.innerWidth - W - 24));\n var PY = parseInt(localStorage.getItem('__lc_y') || String(window.innerHeight - H - 24));\n\n // ── Host element (shadow root attached here) ─────────────\n var host = document.createElement('div');\n host.id = HOST_ID;\n // Host sits outside the page flow; all real layout is inside shadow DOM\n host.style.cssText = 'all:initial;position:fixed;left:0;top:0;width:0;height:0;z-index:2147483647;';\n document.body.appendChild(host);\n\n var shadow = host.attachShadow({ mode: 'open' });\n\n // ── Shadow DOM styles ─────────────────────────────────────\n var styleEl = document.createElement('style');\n styleEl.textContent = `\n :host { all: initial; }\n\n #panel {\n position: fixed;\n left: ${PX}px; top: ${PY}px;\n width: ${W}px; height: ${H}px;\n min-width: 260px; min-height: 300px;\n background: #1a1a24;\n border: 1px solid #2e2e3e;\n border-radius: 14px;\n box-shadow: 0 12px 40px rgba(0,0,0,.75);\n font-family: system-ui, sans-serif;\n font-size: 14px;\n color: #f1f1f5;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* NO resize:both — we use a custom grip so overflow:hidden doesn't eat it */\n }\n\n /* ── Header / drag bar ── */\n #hdr {\n background: #23232f;\n padding: 10px 14px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid #2e2e3e;\n flex-shrink: 0;\n cursor: grab;\n user-select: none;\n }\n #hdr.grabbing { cursor: grabbing; }\n #hdr-title { color: #f1f1f5; font-weight: 700; font-size: 14px; pointer-events: none; }\n #close-btn {\n background: none; border: none; color: #888;\n font-size: 22px; cursor: pointer; line-height: 1; padding: 0; flex-shrink: 0;\n }\n #close-btn:hover { color: #f1f1f5; }\n\n /* ── Body ── */\n #body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }\n\n /* ── Auth ── */\n #auth-wrap {\n display: flex; flex-direction: column; gap: 10px;\n padding: 24px 18px; flex: 1; justify-content: center;\n }\n .auth-title { color: #f1f1f5; font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 4px; }\n .tab-row { display: flex; background: #0f0f13; border-radius: 8px; padding: 3px; gap: 3px; }\n .tab {\n flex: 1; padding: 6px; border: none; border-radius: 6px;\n background: transparent; color: #888; cursor: pointer; font-size: 13px; font-weight: 600;\n }\n .tab.active { background: #6366f1; color: #fff; }\n .lc-input {\n padding: 9px 12px; border-radius: 8px; border: 1px solid #2e2e3e;\n background: #0f0f13; color: #f1f1f5; font-size: 14px; outline: none; width: 100%;\n box-sizing: border-box;\n }\n .lc-input:focus { border-color: #6366f1; }\n .err { color: #ef4444; font-size: 12px; text-align: center; min-height: 14px; }\n .primary-btn {\n padding: 9px; border-radius: 8px; border: none;\n background: #6366f1; color: #fff; font-size: 14px;\n font-weight: 700; cursor: pointer; width: 100%;\n }\n .primary-btn:hover { background: #4f46e5; }\n .primary-btn:disabled { opacity: 0.6; cursor: default; }\n\n /* ── Chat logbar ── */\n #logbar {\n display: flex; justify-content: space-between; align-items: center;\n padding: 5px 14px; background: #23232f; font-size: 11px; color: #888;\n flex-shrink: 0; border-bottom: 1px solid #2e2e3e;\n }\n #logbar span { color: #a5b4fc; font-weight: 700; margin-left: 4px; }\n #logout-btn {\n background: none; border: none; color: #555; cursor: pointer; font-size: 11px;\n }\n #logout-btn:hover { color: #ef4444; }\n\n /* ── Messages ── */\n #msgs {\n flex: 1; overflow-y: auto; padding: 10px 12px;\n display: flex; flex-direction: column; gap: 6px;\n }\n #msgs::-webkit-scrollbar { width: 4px; }\n #msgs::-webkit-scrollbar-thumb { background: #2e2e3e; border-radius: 2px; }\n\n .msg-row {\n display: flex;\n flex-direction: column;\n max-width: 80%;\n }\n .msg-row.mine { align-self: flex-end; align-items: flex-end; }\n .msg-row.theirs { align-self: flex-start; align-items: flex-start; }\n\n .msg-name {\n font-size: 10px; font-weight: 700; margin-bottom: 2px;\n color: #a5b4fc;\n }\n .msg-row.mine .msg-name { color: #c7d2fe; }\n\n .msg-bubble {\n font-size: 12px; padding: 7px 10px; border-radius: 12px;\n line-height: 1.5; word-break: break-word; max-width: 100%;\n }\n .msg-row.theirs .msg-bubble {\n background: #23232f; border-radius: 2px 12px 12px 12px;\n }\n .msg-row.mine .msg-bubble {\n background: #4f46e5; border-radius: 12px 2px 12px 12px;\n }\n\n .empty-msg { color: #555; font-size: 12px; text-align: center; margin: auto; }\n\n /* ── Footer input ── */\n #footer {\n padding: 8px; border-top: 1px solid #2e2e3e;\n display: flex; gap: 6px; flex-shrink: 0;\n }\n #msg-inp {\n flex: 1; background: #0f0f13; border: 1px solid #2e2e3e;\n border-radius: 8px; padding: 7px 10px; color: #f1f1f5;\n font-size: 13px; outline: none; box-sizing: border-box;\n }\n #msg-inp:focus { border-color: #6366f1; }\n #send-btn {\n background: #6366f1; border: none; border-radius: 8px;\n padding: 7px 14px; color: #fff; cursor: pointer;\n font-weight: 700; font-size: 13px; flex-shrink: 0;\n }\n #send-btn:hover { background: #4f46e5; }\n\n /* ── Custom resize grip (bottom-right corner) ── */\n #grip {\n position: absolute;\n bottom: 0; right: 0;\n width: 18px; height: 18px;\n cursor: nwse-resize;\n z-index: 10;\n /* visual triangle indicator */\n background: linear-gradient(135deg, transparent 50%, #444 50%);\n border-radius: 0 0 14px 0;\n opacity: 0.5;\n }\n #grip:hover { opacity: 1; }\n `;\n shadow.appendChild(styleEl);\n\n // ── Panel ─────────────────────────────────────────────────\n var panel = document.createElement('div');\n panel.id = 'panel';\n shadow.appendChild(panel);\n\n // ── Header ────────────────────────────────────────────────\n var hdr = document.createElement('div');\n hdr.id = 'hdr';\n hdr.innerHTML = '💬 LiveChat';\n var closeBtn = document.createElement('button');\n closeBtn.id = 'close-btn';\n closeBtn.textContent = '×';\n closeBtn.onclick = function () { clearInterval(pollTimer); host.remove(); };\n hdr.appendChild(closeBtn);\n panel.appendChild(hdr);\n\n // ── Body ──────────────────────────────────────────────────\n var body = document.createElement('div');\n body.id = 'body';\n panel.appendChild(body);\n\n // ── Resize grip ───────────────────────────────────────────\n var grip = document.createElement('div');\n grip.id = 'grip';\n panel.appendChild(grip);\n\n // ── Drag (header) ─────────────────────────────────────────\n var dragging = false, dSX, dSY, pSX, pSY;\n hdr.addEventListener('mousedown', function (e) {\n if (e.target === closeBtn) return;\n dragging = true;\n dSX = e.clientX; dSY = e.clientY;\n pSX = parseInt(panel.style.left); pSY = parseInt(panel.style.top);\n hdr.classList.add('grabbing');\n e.preventDefault();\n });\n document.addEventListener('mousemove', function (e) {\n if (!dragging) return;\n var nx = Math.max(0, Math.min(pSX + e.clientX - dSX, window.innerWidth - panel.offsetWidth));\n var ny = Math.max(0, Math.min(pSY + e.clientY - dSY, window.innerHeight - panel.offsetHeight));\n panel.style.left = nx + 'px';\n panel.style.top = ny + 'px';\n });\n document.addEventListener('mouseup', function () {\n if (!dragging) return;\n dragging = false;\n hdr.classList.remove('grabbing');\n localStorage.setItem('__lc_x', parseInt(panel.style.left));\n localStorage.setItem('__lc_y', parseInt(panel.style.top));\n });\n\n // ── Custom resize grip ────────────────────────────────────\n var resizing = false, rSX, rSY, rSW, rSH;\n grip.addEventListener('mousedown', function (e) {\n resizing = true;\n rSX = e.clientX; rSY = e.clientY;\n rSW = panel.offsetWidth; rSH = panel.offsetHeight;\n e.preventDefault();\n e.stopPropagation();\n });\n document.addEventListener('mousemove', function (e) {\n if (!resizing) return;\n var nw = Math.max(260, rSW + e.clientX - rSX);\n var nh = Math.max(300, rSH + e.clientY - rSY);\n panel.style.width = nw + 'px';\n panel.style.height = nh + 'px';\n });\n document.addEventListener('mouseup', function () {\n if (!resizing) return;\n resizing = false;\n localStorage.setItem('__lc_w', panel.offsetWidth);\n localStorage.setItem('__lc_h', panel.offsetHeight);\n });\n\n // ═══════════════════════════════════════════════════════════\n // AUTH SCREEN\n // ═══════════════════════════════════════════════════════════\n function showAuth() {\n clearInterval(pollTimer);\n body.innerHTML = '';\n\n var wrap = document.createElement('div');\n wrap.id = 'auth-wrap';\n\n var title = document.createElement('div');\n title.className = 'auth-title';\n title.textContent = '💬 LiveChat';\n wrap.appendChild(title);\n\n var tabRow = document.createElement('div');\n tabRow.className = 'tab-row';\n var tLogin = document.createElement('button');\n tLogin.className = 'tab active'; tLogin.textContent = 'Login';\n var tReg = document.createElement('button');\n tReg.className = 'tab'; tReg.textContent = 'Register';\n tabRow.appendChild(tLogin); tabRow.appendChild(tReg);\n wrap.appendChild(tabRow);\n\n var inpU = document.createElement('input');\n inpU.className = 'lc-input'; inpU.placeholder = 'Username'; inpU.type = 'text';\n var inpP = document.createElement('input');\n inpP.className = 'lc-input'; inpP.placeholder = 'Password'; inpP.type = 'password';\n var errEl = document.createElement('div');\n errEl.className = 'err';\n var subBtn = document.createElement('button');\n subBtn.className = 'primary-btn'; subBtn.textContent = 'Login';\n\n [inpU, inpP, errEl, subBtn].forEach(function (n) { wrap.appendChild(n); });\n body.appendChild(wrap);\n setTimeout(function () { inpU.focus(); }, 60);\n\n tLogin.onclick = function () {\n authTab = 'login';\n tLogin.classList.add('active'); tReg.classList.remove('active');\n subBtn.textContent = 'Login'; errEl.textContent = '';\n };\n tReg.onclick = function () {\n authTab = 'register';\n tReg.classList.add('active'); tLogin.classList.remove('active');\n subBtn.textContent = 'Create Account'; errEl.textContent = '';\n };\n inpP.addEventListener('keydown', function (e) { if (e.key === 'Enter') doAuth(); });\n subBtn.onclick = doAuth;\n\n async function doAuth() {\n var u = inpU.value.trim(), p = inpP.value;\n errEl.textContent = '';\n if (!u || !p) { errEl.textContent = 'Fill in both fields'; return; }\n subBtn.textContent = '…'; subBtn.disabled = true;\n try {\n var r = await fetch(BASE + '/api/' + authTab, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ username: u, password: p }),\n });\n var d = await r.json();\n if (!r.ok) {\n errEl.textContent = d.error || 'Error';\n subBtn.textContent = authTab === 'login' ? 'Login' : 'Create Account';\n subBtn.disabled = false;\n return;\n }\n token = d.token; me = d.user.username;\n localStorage.setItem('__lc_tok', token);\n localStorage.setItem('__lc_me', me);\n showChat();\n } catch (e) {\n errEl.textContent = 'Network error';\n subBtn.textContent = authTab === 'login' ? 'Login' : 'Create Account';\n subBtn.disabled = false;\n }\n }\n }\n\n // ═══════════════════════════════════════════════════════════\n // CHAT SCREEN\n // ═══════════════════════════════════════════════════════════\n function showChat() {\n body.innerHTML = '';\n\n // Logbar\n var logbar = document.createElement('div'); logbar.id = 'logbar';\n logbar.innerHTML = 'Chatting as ' + me + '';\n var loBtn = document.createElement('button'); loBtn.id = 'logout-btn'; loBtn.textContent = 'logout';\n loBtn.onclick = doLogout;\n logbar.appendChild(loBtn);\n body.appendChild(logbar);\n\n // Messages\n var msgs = document.createElement('div'); msgs.id = 'msgs';\n var loadingEl = document.createElement('div');\n loadingEl.className = 'empty-msg'; loadingEl.textContent = 'Loading…';\n msgs.appendChild(loadingEl);\n body.appendChild(msgs);\n\n // Footer\n var footer = document.createElement('div'); footer.id = 'footer';\n var inp = document.createElement('input');\n inp.id = 'msg-inp'; inp.placeholder = 'Type a message…'; inp.maxLength = 500; inp.type = 'text';\n var sendBtn = document.createElement('button'); sendBtn.id = 'send-btn'; sendBtn.textContent = 'Send';\n footer.appendChild(inp); footer.appendChild(sendBtn);\n body.appendChild(footer);\n setTimeout(function () { inp.focus(); }, 60);\n\n // ── Render a message bubble ──────────────────────────────\n function addMsg(m) {\n var empty = msgs.querySelector('.empty-msg');\n if (empty) empty.remove();\n var isOwn = m.username === me;\n\n var row = document.createElement('div');\n row.className = 'msg-row ' + (isOwn ? 'mine' : 'theirs');\n\n var name = document.createElement('div');\n name.className = 'msg-name';\n name.textContent = isOwn ? 'You' : m.username;\n\n var bubble = document.createElement('div');\n bubble.className = 'msg-bubble';\n bubble.textContent = m.content; // textContent — safe, no XSS\n\n row.appendChild(name);\n row.appendChild(bubble);\n msgs.appendChild(row);\n msgs.scrollTop = msgs.scrollHeight;\n }\n\n // ── Load initial messages ────────────────────────────────\n async function load() {\n try {\n var r = await fetch(BASE + '/api/messages?limit=20');\n var d = await r.json();\n msgs.innerHTML = '';\n if (!d.messages || !d.messages.length) {\n var e = document.createElement('div');\n e.className = 'empty-msg'; e.textContent = 'No messages yet. Say hello! 👋';\n msgs.appendChild(e);\n } else {\n d.messages.forEach(addMsg);\n lastId = d.messages[d.messages.length - 1].id;\n }\n } catch (e) {}\n }\n\n // ── Poll for new messages ────────────────────────────────\n async function poll() {\n try {\n var r = await fetch(BASE + '/api/messages/poll?since=' + lastId, {\n headers: { 'Authorization': 'Bearer ' + token }\n });\n if (!r.ok) return;\n var d = await r.json();\n if (d.messages && d.messages.length) {\n d.messages.forEach(function (m) { addMsg(m); lastId = m.id; });\n }\n } catch (e) {}\n }\n\n // ── Send (with double-send guard) ────────────────────────\n async function send() {\n if (sending) return; // ← prevents double-send\n var c = inp.value.trim();\n if (!c) return;\n sending = true;\n inp.value = '';\n try {\n var r = await fetch(BASE + '/api/messages', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },\n body: JSON.stringify({ content: c }),\n });\n if (r.ok) {\n await poll();\n } else {\n inp.value = c; // restore on failure\n }\n } catch (e) {\n inp.value = c;\n } finally {\n sending = false;\n }\n }\n\n // ── Wire up events ───────────────────────────────────────\n sendBtn.addEventListener('click', send);\n inp.addEventListener('keydown', function (e) {\n if (e.key === 'Enter') {\n e.preventDefault(); // prevent form submit / button click propagation\n send();\n }\n });\n\n load();\n pollTimer = setInterval(poll, 2000);\n }\n\n // ── Logout ────────────────────────────────────────────────\n function doLogout() {\n clearInterval(pollTimer);\n token = null; me = null; lastId = 0; sending = false;\n localStorage.removeItem('__lc_tok');\n localStorage.removeItem('__lc_me');\n fetch(BASE + '/api/logout', { method: 'POST' }).catch(function () {});\n showAuth();\n }\n\n // ── Boot ──────────────────────────────────────────────────\n if (token && me) {\n fetch(BASE + '/api/me', { headers: { 'Authorization': 'Bearer ' + token } })\n .then(function (r) { r.ok ? showChat() : showAuth(); })\n .catch(function () { showAuth(); });\n } else {\n showAuth();\n }\n})();\n",[],[142,150],"f42a4ed8-2ef7-11f1-ab55-42dde27851f2",["D",1775177791326],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Live groupchat with user auth and secure data storage","imageUrl","userId","019d50d6-6e5e-72f9-bffe-0f2f8a74be8e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d50d6-6e5e-72f9-bffe-12eb0819d881","tursoName","f42a4ed82ef711f1ab5542dde27851f2","tursoHostname","f42a4ed82ef711f1ab5542dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789516253896],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_213":209},"org",{"_11":12,"_207":-5,"_208":209,"_167":168,"_210":211,"_212":56},"branch",{"_17":152,"_13":16,"_35":43,"_199":157,"_200":-5,"_201":-5,"_202":-5,"_203":-5,"_204":-5,"_205":14,"_206":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNCcEVmOEdvazVHU1JjUXNpbkJpOUpRVFE1YSJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":157,"_13":14,"_48":281,"_159":-5,"_160":56,"_161":162,"_163":162,"_164":165,"_166":-5,"_167":168,"_169":-5,"_170":56,"_171":-5,"_172":-5,"_173":69,"_174":175,"_176":177,"_178":179,"_180":282,"_182":-5,"_183":184,"_185":184,"_186":187,"_188":187,"_189":187,"_190":184,"_191":184,"_192":283,"_194":284,"_196":285,"_198":56},[248,250,253,257,258],"files",[248,249,250,251,252,253,254,255,256,257,258],"counts",{"_239":69,"_240":64,"_241":69,"_32":242,"_243":244},[235,236],{"_35":67,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":64,"_46":47,"_48":233,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_18":234},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1775177799201],[19],{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_18":238},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":237},[19,37],[19,60],"pulls","branches","forks",{"_245":69,"_247":69},"connections",{"_245":69,"_246":69},"count","unfilledCount","emptyCount",{"_35":141,"_13":142,"_38":143,"_40":-5,"_42":43,"_44":144,"_46":47,"_48":145,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_84":279,"_18":280},{"_35":149,"_13":150,"_38":151,"_40":143,"_42":43,"_44":152,"_46":47,"_48":153,"_17":99,"_51":24,"_53":154,"_55":56,"_57":-5,"_84":277,"_18":278},{"_35":67,"_13":19,"_38":41,"_40":-5,"_42":43,"_44":64,"_46":47,"_48":130,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_84":275,"_18":276},{"_35":59,"_13":60,"_38":61,"_40":41,"_42":43,"_44":62,"_46":47,"_48":138,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_84":273,"_18":274},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":135,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_84":271,"_18":272},{"_35":96,"_13":97,"_38":98,"_40":-5,"_42":43,"_44":99,"_46":47,"_48":100,"_17":69,"_51":68,"_53":-5,"_55":56,"_57":-5,"_84":269,"_18":270},{"_35":122,"_13":123,"_38":124,"_40":98,"_42":43,"_44":125,"_46":47,"_48":126,"_17":64,"_51":24,"_53":127,"_55":56,"_57":-5,"_84":267,"_18":268},{"_35":114,"_13":115,"_38":116,"_40":98,"_42":43,"_44":117,"_46":47,"_48":118,"_17":64,"_51":24,"_53":119,"_55":56,"_57":-5,"_84":265,"_18":266},{"_35":106,"_13":107,"_38":108,"_40":98,"_42":43,"_44":109,"_46":47,"_48":110,"_17":64,"_51":24,"_53":111,"_55":56,"_57":-5,"_84":263,"_18":264},{"_35":87,"_13":88,"_38":89,"_40":-5,"_42":43,"_44":90,"_46":47,"_48":91,"_17":69,"_51":92,"_53":93,"_55":56,"_57":-5,"_84":261,"_18":262},{"_35":77,"_13":78,"_38":79,"_40":-5,"_42":43,"_44":80,"_46":47,"_48":81,"_17":50,"_51":82,"_53":83,"_55":56,"_57":-5,"_84":259,"_18":260},[],[78],[],[88],[],[97,107],[],[97,115],[],[97,123],[254,255,256],[97],[],[19,37],[],[19,60],[251,252],[19],[],[142,150],[249],[142],["D",1775177791326],["D",1789516253896],{"_11":12,"_213":209},{"_11":12,"_207":-5,"_208":209,"_167":168,"_210":211,"_212":56},{"_17":152,"_13":16,"_35":43,"_199":157,"_200":-5,"_201":-5,"_202":-5,"_203":-5,"_204":-5,"_205":14,"_206":12},"ctx",{"_192":-5,"_230":319,"_320":321,"_322":323,"_324":56,"_325":56,"_326":56,"_327":47,"_328":-5,"_329":-7,"_330":-7,"_331":69,"_332":56,"_333":56,"_334":-5,"_335":56,"_336":56,"_337":56,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":16,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

🔑 Your API Token