Real-Time Support Chat

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_198":199,"_200":201},"routes/_app.x.$handle.$name",{"_104":103,"_37":49,"_113":94,"_32":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":30,"_128":129,"_130":63,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":30},"version",6,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","c1b36a2d-7b51-4780-b7a1-ea50da4003a1","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":26,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","00106956-5353-11f1-b948-ee650bb23af1","name","index.html","fileType","content","\n\n \n \n \n Real-Time Support Chat\n \n 💬\">\n \n \n

\n \n \n \n\n","createdAt",["D",1779175137348],"branchVersion","branchId","1a5ab0b0-5352-11f1-891e-ee650bb23af1","id","1a5a0426-5352-11f1-891e-ee650bb23af1","RT",["D",1779174751971],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Real-time support chat with SSE and SQLite persistence","imageUrl","dc70a415-98fc-4458-af03-4a0a2fcdd97f","pinnedFileId","1a5ce9ac-5352-11f1-891e-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e3ee4-0082-71fa-8b22-d78f0174634f","tursoName","1a5a0426535211f1891eee650bb23af1","tursoHostname","1a5a0426535211f1891eee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789469441210],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_19":59,"_109":110,"_111":30},"branch",{"_13":93,"_37":94,"_47":46,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","rosamehdili","handle","displayName","Rosa Mehdili","avatar","https://lh3.googleusercontent.com/a/ACg8ocJ8XeitmhPVNCeJ8UWVE54OyNqLS99DYm_GzhyMTU_sHp_1mA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":193,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":194,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":195,"_88":196,"_90":197,"_92":30},"tree",[175,177,178],"files",[175,176,177,178],"counts",{"_164":67,"_165":166,"_167":67,"_168":169,"_170":171},"contents",[135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":157,"_37":158,"_35":159,"_140":-5,"_45":46,"_44":160,"_142":63,"_42":161,"_13":67,"_39":162,"_40":-5,"_29":30,"_147":-5,"_32":163},{"_47":149,"_37":150,"_35":151,"_140":-5,"_45":46,"_44":152,"_142":63,"_42":153,"_13":67,"_39":154,"_40":155,"_29":30,"_147":-5,"_32":156},{"_47":138,"_37":139,"_35":61,"_140":-5,"_45":46,"_44":141,"_142":63,"_42":143,"_13":144,"_39":145,"_40":146,"_29":30,"_147":-5,"_32":148},"fca5d972-5352-11f1-b948-ee650bb23af1","main.ts","parentId",5,"latest",["D",1779175131623],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { initDB, getMessages, getMessagesSince, addMessage } from \"./db.ts\";\n\nconst app = new Hono();\n\n// Initialize DB on first request\nlet dbReady = false;\napp.use(\"*\", async (c, next) => {\n if (!dbReady) {\n await initDB();\n dbReady = true;\n }\n await next();\n});\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── API Routes ───────────────────────────────────────────\n\n// GET /api/messages - Fetch recent messages\napp.get(\"/api/messages\", async (c) => {\n const messages = await getMessages();\n return c.json({ messages });\n});\n\n// POST /api/messages - Send a new message\napp.post(\"/api/messages\", async (c) => {\n const body = await c.req.json();\n const { username, message } = body;\n\n if (!username || typeof username !== \"string\" || username.trim().length === 0) {\n return c.json({ error: \"Username is required\" }, 400);\n }\n if (!message || typeof message !== \"string\" || message.trim().length === 0) {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n if (username.trim().length > 30) {\n return c.json({ error: \"Username too long (max 30 chars)\" }, 400);\n }\n if (message.trim().length > 500) {\n return c.json({ error: \"Message too long (max 500 chars)\" }, 400);\n }\n\n const newMsg = await addMessage(username.trim(), message.trim());\n return c.json({ message: newMsg });\n});\n\n// GET /api/messages/stream - SSE endpoint for real-time updates\napp.get(\"/api/messages/stream\", async (c) => {\n const lastIdParam = c.req.query(\"lastId\");\n let lastId = lastIdParam ? parseInt(lastIdParam, 10) : 0;\n\n // Use ReadableStream for SSE\n const stream = new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n\n const send = (data: string) => {\n controller.enqueue(encoder.encode(`data: ${data}\\n\\n`));\n };\n\n // Send initial keepalive\n send(JSON.stringify({ type: \"connected\" }));\n\n // Poll for new messages every 1 second (up to ~55 seconds for Val Town timeout)\n let iterations = 0;\n const maxIterations = 55; // ~55 seconds before closing\n\n while (iterations < maxIterations) {\n try {\n const newMessages = await getMessagesSince(lastId);\n if (newMessages.length > 0) {\n lastId = newMessages[newMessages.length - 1].id;\n send(JSON.stringify({ type: \"messages\", messages: newMessages }));\n }\n } catch {\n // DB error, send keepalive instead\n }\n\n // Send keepalive every 15 seconds to prevent timeout\n if (iterations > 0 && iterations % 15 === 0) {\n send(JSON.stringify({ type: \"keepalive\" }));\n }\n\n // Wait 1 second between polls\n await new Promise((r) => setTimeout(r, 1000));\n iterations++;\n }\n\n // Close cleanly so client reconnects\n send(JSON.stringify({ type: \"reconnect\" }));\n controller.close();\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\n },\n });\n});\n\n// Error handler\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[139],"f4943102-5352-11f1-b71a-ee650bb23af1","db.ts","f49431b6-5352-11f1-b71a-ee650bb23af1",4,["D",1779175118089],"script","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// Initialize chat messages table\nexport async function initDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS chat_messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}\n\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\n// Get recent messages (last 50)\nexport async function getMessages(limit = 50): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT id, username, message, created_at FROM chat_messages ORDER BY id DESC LIMIT ?\",\n args: [limit],\n });\n // Reverse so oldest is first\n return (result.rows as unknown as ChatMessage[]).reverse();\n}\n\n// Get messages after a specific ID (for polling/SSE)\nexport async function getMessagesSince(lastId: number): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT id, username, message, created_at FROM chat_messages WHERE id > ? ORDER BY id ASC\",\n args: [lastId],\n });\n return result.rows as unknown as ChatMessage[];\n}\n\n// Insert a new message, returns the new message\nexport async function addMessage(username: string, message: string): Promise {\n const result = await sqlite.execute({\n sql: \"INSERT INTO chat_messages (username, message) VALUES (?, ?)\",\n args: [username, message],\n });\n const id = Number(result.lastInsertRowid);\n const rows = await sqlite.execute({\n sql: \"SELECT id, username, message, created_at FROM chat_messages WHERE id = ?\",\n args: [id],\n });\n return (rows.rows as unknown as ChatMessage[])[0];\n}\n",[150],"ef062786-5352-11f1-b948-ee650bb23af1","frontend","ef062830-5352-11f1-b948-ee650bb23af1",3,["D",1779175108771],"directory",[158],"pulls","branches",1,"forks","envVars",{"_172":67,"_174":67},"connections",{"_172":67,"_173":67},"count","unfilledCount","emptyCount",{"_47":157,"_37":158,"_35":159,"_140":-5,"_45":46,"_44":160,"_142":63,"_42":190,"_13":67,"_39":162,"_40":-5,"_29":30,"_147":-5,"_180":191,"_32":192},{"_47":186,"_37":38,"_35":36,"_140":159,"_45":46,"_44":14,"_142":63,"_42":187,"_13":67,"_39":26,"_40":41,"_29":30,"_147":-5,"_180":188,"_32":189},{"_47":149,"_37":150,"_35":151,"_140":-5,"_45":46,"_44":152,"_142":63,"_42":183,"_13":67,"_39":154,"_40":155,"_29":30,"_147":-5,"_180":184,"_32":185},{"_47":138,"_37":139,"_35":61,"_140":-5,"_45":46,"_44":141,"_142":63,"_42":179,"_13":144,"_39":145,"_40":146,"_29":30,"_147":-5,"_180":181,"_32":182},["D",1779175131623],"children",[],[139],["D",1779175118089],[],[150],"0010688e-5353-11f1-b948-ee650bb23af1",["D",1779175137348],[],[158,38],["D",1779175108771],[176],[158],["D",1779174751971],["D",1789469441210],{"_104":103,"_112":108},{"_104":103,"_105":106,"_107":108,"_19":59,"_109":110,"_111":30},{"_13":93,"_37":94,"_47":46,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"ctx",{"_86":-5,"_132":231,"_232":233,"_234":235,"_236":30,"_237":30,"_238":30,"_239":63,"_240":-5,"_241":-7,"_242":-7,"_243":67,"_244":30,"_245":30,"_246":-5,"_247":30,"_248":30,"_249":30,"_250":-5},"ENV",{"_202":203,"_204":205,"_206":94,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"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"]

Diff · v6