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",[],[154,209],"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",[],[154,217],["D",1775177821530],[188,189,190],[154],"1b66a71e-2efb-11f1-b457-42dde27851f2","queries.ts","009ca616-2ef8-11f1-8561-42dde27851f2",17,["D",1775179145640],"script","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { createHmac, randomBytes } from \"node:crypto\";\n\nconst SECRET_KEY = Deno.env.get(\"CHAT_SECRET_KEY\") || \"default-secret-key-change-me\";\n\n// ─── Password Hashing ─────────────────────────────────────────────────────────\nexport function hashPassword(password: string): string {\n return createHmac(\"sha256\", SECRET_KEY).update(password).digest(\"hex\");\n}\nexport function verifyPassword(password: string, hash: string): boolean {\n return hashPassword(password) === hash;\n}\n\n// ─── Users ────────────────────────────────────────────────────────────────────\nexport async function createUser(\n username: string,\n password: string,\n): Promise<{ id: number; username: string; avatar_color: string } | null> {\n const colors = [\"#6366f1\", \"#ec4899\", \"#f59e0b\", \"#10b981\", \"#3b82f6\", \"#ef4444\", \"#8b5cf6\", \"#14b8a6\"];\n const color = colors[Math.floor(Math.random() * colors.length)];\n const hash = hashPassword(password);\n try {\n const result = await sqlite.execute({\n sql: `INSERT INTO users (username, password_hash, avatar_color) VALUES (?, ?, ?)`,\n args: [username, hash, color],\n });\n return { id: Number(result.lastInsertRowid), username, avatar_color: color };\n } catch {\n return null;\n }\n}\n\nexport async function getUserByCredentials(username: string, password: string) {\n const result = await sqlite.execute({\n sql: `SELECT id, username, avatar_color, password_hash FROM users WHERE username = ?`,\n args: [username],\n });\n if (!result.rows.length) return null;\n const user = result.rows[0] as { id: number; username: string; avatar_color: string; password_hash: string };\n if (!verifyPassword(password, user.password_hash)) return null;\n return { id: user.id, username: user.username, avatar_color: user.avatar_color };\n}\n\n// ─── Sessions ─────────────────────────────────────────────────────────────────\nexport async function createSession(userId: number): Promise {\n const sessionId = randomBytes(32).toString(\"hex\");\n const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString();\n await sqlite.execute({\n sql: `INSERT INTO sessions (id, user_id, expires_at) VALUES (?, ?, ?)`,\n args: [sessionId, userId, expiresAt],\n });\n return sessionId;\n}\n\nexport async function getSessionUser(sessionId: string) {\n const result = await sqlite.execute({\n sql: `SELECT u.id, u.username, u.avatar_color FROM sessions s\n JOIN users u ON u.id = s.user_id\n WHERE s.id = ? AND s.expires_at > datetime('now')`,\n args: [sessionId],\n });\n if (!result.rows.length) return null;\n return result.rows[0] as { id: number; username: string; avatar_color: string };\n}\n\nexport async function deleteSession(sessionId: string) {\n await sqlite.execute({ sql: `DELETE FROM sessions WHERE id = ?`, args: [sessionId] });\n}\n\n// ─── API Tokens ───────────────────────────────────────────────────────────────\nexport async function createApiToken(userId: number): Promise {\n const token = randomBytes(40).toString(\"hex\");\n await sqlite.execute({\n sql: `INSERT INTO api_tokens (token, user_id) VALUES (?, ?)`,\n args: [token, userId],\n });\n return token;\n}\n\nexport async function getUserByToken(token: string) {\n const result = await sqlite.execute({\n sql: `SELECT u.id, u.username, u.avatar_color FROM api_tokens t\n JOIN users u ON u.id = t.user_id WHERE t.token = ?`,\n args: [token],\n });\n if (!result.rows.length) return null;\n return result.rows[0] as { id: number; username: string; avatar_color: string };\n}\n\n// ─── Messages ─────────────────────────────────────────────────────────────────\nexport async function saveMessage(\n userId: number, username: string, avatarColor: string, content: string,\n): Promise {\n const result = await sqlite.execute({\n sql: `INSERT INTO messages (user_id, username, avatar_color, content) VALUES (?, ?, ?, ?)`,\n args: [userId, username, avatarColor, content],\n });\n return Number(result.lastInsertRowid);\n}\n\n/** Last N messages, only from the past 24 hours, oldest first */\nexport async function getRecentMessages(limit = 20) {\n const result = await sqlite.execute({\n sql: `SELECT id, username, avatar_color, content, created_at\n FROM messages\n WHERE created_at > datetime('now', '-24 hours')\n ORDER BY id DESC LIMIT ?`,\n args: [limit],\n });\n return (result.rows as {\n id: number; username: string; avatar_color: string; content: string; created_at: string;\n }[]).reverse();\n}\n\n/** New messages since lastId, only within 24 hours */\nexport async function getMessagesSince(lastId: number) {\n const result = await sqlite.execute({\n sql: `SELECT id, username, avatar_color, content, created_at\n FROM messages\n WHERE id > ? AND created_at > datetime('now', '-24 hours')\n ORDER BY id ASC`,\n args: [lastId],\n });\n return result.rows as {\n id: number; username: string; avatar_color: string; content: string; created_at: string;\n }[];\n}\n\n/** Delete messages older than 24 hours — call from a cleanup cron */\nexport async function deleteExpiredMessages() {\n const result = await sqlite.execute(\n `DELETE FROM messages WHERE created_at <= datetime('now', '-24 hours')`\n );\n return result.rowsAffected;\n}\n",[],[161,228],"606766a8-2ef8-11f1-a3f4-42dde27851f2","migrations.ts","f8f999f0-2ef7-11f1-a3d8-42dde27851f2",9,["D",1775177972912],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE,\n password_hash TEXT NOT NULL,\n avatar_color TEXT NOT NULL DEFAULT '#6366f1',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n expires_at TEXT NOT NULL,\n FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE\n )\n `);\n\n // Long-lived tokens for bookmarklets / external API clients\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS api_tokens (\n token TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now')),\n FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL DEFAULT 0,\n username TEXT NOT NULL,\n avatar_color TEXT NOT NULL DEFAULT '#94a3b8',\n content TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}\n",[],[161,237],["D",1775177799201],[185,186],[161],"4e7ab42a-2efa-11f1-a773-42dde27851f2","source.js","382c7858-2ef9-11f1-977e-42dde27851f2",16,["D",1775178801845],"// =============================================================\n// LiveChat — All-in-One Bookmarklet (readable source)\n// Minified version ready to paste as a bookmark URL is at EOF.\n// =============================================================\n(function () {\n var BASE = 'https://MJK--2cb58f1a2ef811f1946342dde27851f2.web.val.run';\n var ID = '__lc';\n\n // ── Toggle: click again to close ─────────────────────────\n if (document.getElementById(ID)) { document.getElementById(ID).remove(); return; }\n\n // ── Persistent state via localStorage ────────────────────\n // Token + username survive page reloads and browser restarts.\n // No login prompt until the token actually fails.\n var token = localStorage.getItem('__lc_tok') || null;\n var me = localStorage.getItem('__lc_me') || null;\n var lastId = 0, timer = null, authTab = 'login';\n\n // ── Build the panel shell ─────────────────────────────────\n var panel = document.createElement('div');\n panel.id = ID;\n\n // Restore saved position/size, or use defaults\n var savedW = parseInt(localStorage.getItem('__lc_w') || '330');\n var savedH = parseInt(localStorage.getItem('__lc_h') || '480');\n var savedX = parseInt(localStorage.getItem('__lc_x') || (window.innerWidth - savedW - 20));\n var savedY = parseInt(localStorage.getItem('__lc_y') || (window.innerHeight - savedH - 20));\n\n panel.style.cssText = [\n 'all:initial',\n 'position:fixed',\n 'left:' + savedX + 'px',\n 'top:' + savedY + 'px',\n 'width:' + savedW + 'px',\n 'height:' + savedH + 'px',\n 'min-width:260px',\n 'min-height:300px',\n 'background:#1a1a24',\n 'border:1px solid #2e2e3e',\n 'border-radius:14px',\n 'z-index:2147483647',\n 'display:flex',\n 'flex-direction:column',\n 'box-shadow:0 12px 40px rgba(0,0,0,.75)',\n 'font-family:system-ui,sans-serif',\n 'overflow:hidden',\n 'resize:both', // native CSS resize handle (bottom-right corner)\n 'user-select:none',\n ].join(';');\n\n document.body.appendChild(panel);\n\n // ── Helper: create element ────────────────────────────────\n function h(tag, css, html, attrs) {\n var n = document.createElement(tag);\n if (css) n.style.cssText = css;\n if (html) n.innerHTML = html;\n if (attrs) Object.assign(n, attrs);\n return n;\n }\n\n // ── Header (drag handle) ──────────────────────────────────\n var hdr = h('div',\n 'background:#23232f;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2e2e3e;flex-shrink:0;cursor:grab;',\n '💬 LiveChat'\n );\n var closeBtn = h('button',\n 'background:none;border:none;color:#888;font-size:22px;cursor:pointer;line-height:1;padding:0;',\n '×'\n );\n closeBtn.onclick = function () { clearInterval(timer); panel.remove(); };\n hdr.appendChild(closeBtn);\n panel.appendChild(hdr);\n\n // ── Drag logic (mouse) ────────────────────────────────────\n var dragging = false, dragStartX, dragStartY, panelStartX, panelStartY;\n hdr.addEventListener('mousedown', function (e) {\n if (e.target === closeBtn) return;\n dragging = true;\n dragStartX = e.clientX; dragStartY = e.clientY;\n panelStartX = panel.offsetLeft; panelStartY = panel.offsetTop;\n hdr.style.cursor = 'grabbing';\n e.preventDefault();\n });\n document.addEventListener('mousemove', function (e) {\n if (!dragging) return;\n var nx = panelStartX + (e.clientX - dragStartX);\n var ny = panelStartY + (e.clientY - dragStartY);\n // clamp inside viewport\n nx = Math.max(0, Math.min(nx, window.innerWidth - panel.offsetWidth));\n ny = Math.max(0, Math.min(ny, 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.style.cursor = 'grab';\n localStorage.setItem('__lc_x', panel.offsetLeft);\n localStorage.setItem('__lc_y', panel.offsetTop);\n });\n\n // ── Track resize via ResizeObserver ──────────────────────\n if (window.ResizeObserver) {\n new ResizeObserver(function () {\n localStorage.setItem('__lc_w', panel.offsetWidth);\n localStorage.setItem('__lc_h', panel.offsetHeight);\n }).observe(panel);\n }\n\n // ── Body slot ─────────────────────────────────────────────\n var body = h('div', 'display:flex;flex-direction:column;flex:1;overflow:hidden;');\n panel.appendChild(body);\n\n // ═══════════════════════════════════════════════════════════\n // AUTH SCREEN\n // ═══════════════════════════════════════════════════════════\n function showAuth() {\n clearInterval(timer);\n body.innerHTML = '';\n var wrap = h('div', 'display:flex;flex-direction:column;gap:10px;padding:24px 18px;flex:1;justify-content:center;');\n body.appendChild(wrap);\n\n wrap.appendChild(h('div', 'color:#f1f1f5;font-size:15px;font-weight:700;text-align:center;margin-bottom:4px;', '💬 LiveChat'));\n\n var tabs = h('div', 'display:flex;background:#0f0f13;border-radius:8px;padding:3px;gap:3px;');\n var tLogin = h('button', 'flex:1;padding:6px;border:none;border-radius:6px;background:#6366f1;color:#fff;cursor:pointer;font-size:13px;font-weight:600;', 'Login');\n var tReg = h('button', 'flex:1;padding:6px;border:none;border-radius:6px;background:transparent;color:#888;cursor:pointer;font-size:13px;font-weight:600;', 'Register');\n tabs.appendChild(tLogin); tabs.appendChild(tReg);\n wrap.appendChild(tabs);\n\n var inpU = h('input', 'padding:9px 12px;border-radius:8px;border:1px solid #2e2e3e;background:#0f0f13;color:#f1f1f5;font-size:14px;outline:none;width:100%;', '', { placeholder: 'Username', type: 'text' });\n var inpP = h('input', 'padding:9px 12px;border-radius:8px;border:1px solid #2e2e3e;background:#0f0f13;color:#f1f1f5;font-size:14px;outline:none;width:100%;', '', { placeholder: 'Password', type: 'password' });\n var errEl = h('div', 'color:#ef4444;font-size:12px;text-align:center;min-height:14px;', '');\n var subBtn = h('button', 'padding:9px;border-radius:8px;border:none;background:#6366f1;color:#fff;font-size:14px;font-weight:700;cursor:pointer;width:100%;', 'Login');\n\n [inpU, inpP, errEl, subBtn].forEach(function (n) { wrap.appendChild(n); });\n setTimeout(function () { inpU.focus(); }, 50);\n\n tLogin.onclick = function () {\n authTab = 'login';\n tLogin.style.background = '#6366f1'; tLogin.style.color = '#fff';\n tReg.style.background = 'transparent'; tReg.style.color = '#888';\n subBtn.textContent = 'Login'; errEl.textContent = '';\n };\n tReg.onclick = function () {\n authTab = 'register';\n tReg.style.background = '#6366f1'; tReg.style.color = '#fff';\n tLogin.style.background = 'transparent'; tLogin.style.color = '#888';\n subBtn.textContent = 'Create Account'; errEl.textContent = '';\n };\n inpP.onkeydown = 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 comes back directly in the login/register response — no cookie needed\n token = d.token;\n 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 // Logged-in bar\n var logbar = h('div',\n 'display:flex;justify-content:space-between;align-items:center;padding:5px 14px;background:#23232f;font-size:11px;color:#888;flex-shrink:0;border-bottom:1px solid #2e2e3e;'\n );\n logbar.innerHTML = 'Chatting as ' + me + '';\n var loBtn = h('button', 'background:none;border:none;color:#555;cursor:pointer;font-size:11px;', 'logout');\n loBtn.onclick = doLogout;\n logbar.appendChild(loBtn);\n body.appendChild(logbar);\n\n // Messages list\n var msgs = h('div', 'flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px;scroll-behavior:smooth;');\n msgs.innerHTML = '

Loading…

';\n body.appendChild(msgs);\n\n // Input row\n var footer = h('div', 'padding:8px;border-top:1px solid #2e2e3e;display:flex;gap:6px;flex-shrink:0;');\n var inp = h('input',\n 'flex:1;background:#0f0f13;border:1px solid #2e2e3e;border-radius:8px;padding:7px 10px;color:#f1f1f5;font-size:13px;outline:none;',\n '', { placeholder: 'Type a message…', maxLength: 500, type: 'text' }\n );\n var sendBtn = h('button',\n 'background:#6366f1;border:none;border-radius:8px;padding:7px 14px;color:#fff;cursor:pointer;font-weight:700;font-size:13px;',\n 'Send'\n );\n footer.appendChild(inp); footer.appendChild(sendBtn);\n body.appendChild(footer);\n setTimeout(function () { inp.focus(); }, 50);\n\n function addMsg(m) {\n var empty = msgs.querySelector('[data-empty]');\n if (empty) empty.remove();\n var isOwn = m.username === me;\n var d = h('div',\n 'font-size:12px;padding:6px 9px;border-radius:8px;color:#f1f1f5;line-height:1.5;word-break:break-word;background:' + (isOwn ? '#4f46e5' : '#23232f') + ';'\n );\n d.innerHTML = '' + m.username + ': ' + m.content.replace(/

🔑 Your API Token

Diff · v18