\n \n \n \n\n","label",[155,64],"frontend","pulls","branches",1,"forks","envVars",{"_164":26,"_166":26},"connections",{"_164":26,"_165":26},"count","unfilledCount","emptyCount",{"_32":255,"_13":155,"_62":147,"_42":-5,"_34":35,"_148":256,"_149":84,"_36":257,"_38":26,"_65":252,"_151":-5,"_66":24,"_153":-5,"_185":258,"_17":259},{"_32":249,"_13":224,"_62":218,"_42":147,"_34":35,"_148":250,"_149":84,"_36":251,"_38":26,"_65":252,"_151":-5,"_66":24,"_153":-5,"_185":253,"_17":254},{"_32":241,"_13":242,"_62":243,"_42":218,"_34":35,"_148":244,"_149":84,"_36":245,"_38":26,"_65":193,"_151":246,"_66":24,"_153":-5,"_185":247,"_17":248},{"_32":233,"_13":234,"_62":235,"_42":218,"_34":35,"_148":236,"_149":84,"_36":237,"_38":26,"_65":193,"_151":238,"_66":24,"_153":-5,"_185":239,"_17":240},{"_32":225,"_13":226,"_62":227,"_42":218,"_34":35,"_148":228,"_149":84,"_36":229,"_38":26,"_65":193,"_151":230,"_66":24,"_153":-5,"_185":231,"_17":232},{"_32":215,"_13":216,"_62":217,"_42":218,"_34":35,"_148":219,"_149":84,"_36":220,"_38":26,"_65":193,"_151":221,"_66":24,"_153":-5,"_185":222,"_17":223},{"_32":146,"_13":64,"_62":63,"_42":147,"_34":35,"_148":39,"_149":84,"_36":212,"_38":26,"_65":21,"_151":152,"_66":24,"_153":-5,"_185":213,"_17":214},{"_32":204,"_13":205,"_62":206,"_42":147,"_34":35,"_148":207,"_149":84,"_36":208,"_38":26,"_65":193,"_151":209,"_66":24,"_153":-5,"_185":210,"_17":211},{"_32":197,"_13":198,"_62":199,"_42":-5,"_34":35,"_148":110,"_149":84,"_36":200,"_38":26,"_65":21,"_151":201,"_66":24,"_153":-5,"_185":202,"_17":203},{"_32":188,"_13":189,"_62":190,"_42":-5,"_34":35,"_148":191,"_149":84,"_36":192,"_38":26,"_65":193,"_151":194,"_66":24,"_153":-5,"_185":195,"_17":196},{"_32":178,"_13":179,"_62":82,"_42":-5,"_34":35,"_148":180,"_149":84,"_36":181,"_38":182,"_65":183,"_151":184,"_66":24,"_153":-5,"_185":186,"_17":187},"fca5d972-5352-11f1-b948-ee650bb23af1","main.ts",5,["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","children",[],[179],"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",[],[189],"2b528996-5353-11f1-be66-ee650bb23af1","README.md","2b528a40-5353-11f1-be66-ee650bb23af1",["D",1779175209931],"# 💬 Real-Time Support Chat\n\nA real-time chat application built on Val Town with persistent message storage and live updates.\n\n## Features\n\n- **Username-based login** — pick a name to join the chat\n- **Real-time messaging** — messages appear instantly via Server-Sent Events (SSE)\n- **Persistent storage** — messages are stored in SQLite and survive across sessions\n- **Multi-user sync** — open in two tabs to see messages sync in real-time\n- **Input validation** — prevents empty messages, enforces length limits\n- **Auto-reconnect** — SSE connection auto-recovers on disconnect\n\n## Architecture\n\n```mermaid\ngraph LR\n A[Browser 1] -->|POST /api/messages| B[Hono Server]\n A -->|SSE /api/messages/stream| B\n C[Browser 2] -->|POST /api/messages| B\n C -->|SSE /api/messages/stream| B\n B -->|Read/Write| D[(SQLite)]\n```\n\n## How It Works\n\n1. User enters a username to join\n2. Frontend loads recent messages from `GET /api/messages`\n3. Frontend opens an SSE connection to `GET /api/messages/stream?lastId=N`\n4. Server polls SQLite every 1s for new messages and pushes them via SSE\n5. When a user sends a message, `POST /api/messages` inserts it into SQLite\n6. All connected SSE streams pick up the new message within ~1 second\n\n## File Structure\n\n- `main.ts` — Hono HTTP server with API routes and SSE endpoint\n- `db.ts` — SQLite database helpers (init, get, add messages)\n- `frontend/` — React UI components\n - `index.html` — Entry HTML page\n - `index.tsx` — React mount point\n - `components/App.tsx` — Root component with username state\n - `components/UsernameForm.tsx` — Login form\n - `components/ChatRoom.tsx` — Chat UI with SSE connection\n - `components/MessageBubble.tsx` — Individual message display\n",[],[198],"00a18a30-5353-11f1-a245-ee650bb23af1","index.tsx","00a18aee-5353-11f1-a245-ee650bb23af1",7,["D",1779175138310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\ncreateRoot(root).render();\n",[],[155,205],["D",1779175137348],[],[155,64],"0c6e03ca-5353-11f1-b66e-ee650bb23af1","UsernameForm.tsx","0c6e046a-5353-11f1-b66e-ee650bb23af1","02427c78-5353-11f1-b3c0-ee650bb23af1",10,["D",1779175158102],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n onJoin: (username: string) => void;\n}\n\nexport function UsernameForm({ onJoin }: Props) {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const handleSubmit = (e: Event) => {\n e.preventDefault();\n const trimmed = name.trim();\n if (!trimmed) {\n setError(\"Please enter a username\");\n return;\n }\n if (trimmed.length > 30) {\n setError(\"Username must be 30 characters or less\");\n return;\n }\n if (!/^[a-zA-Z0-9_\\- ]+$/.test(trimmed)) {\n setError(\"Username can only contain letters, numbers, spaces, hyphens, and underscores\");\n return;\n }\n setError(\"\");\n onJoin(trimmed);\n };\n\n return (\n

👋

Welcome to Chat

Enter a username to join the conversation

\n\n

\n );\n}\n",[],[155,224,216],"components","1bf5c206-5353-11f1-874c-ee650bb23af1","MessageBubble.tsx","1bf5c2f6-5353-11f1-874c-ee650bb23af1",12,["D",1779175184160],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\ninterface Props {\n message: ChatMessage;\n isOwn: boolean;\n}\n\nfunction formatTime(dateStr: string): string {\n try {\n const date = new Date(dateStr + \"Z\"); // SQLite stores in UTC\n return date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n } catch {\n return \"\";\n }\n}\n\n// Generate a consistent color for a username\nfunction getUserColor(username: string): string {\n const colors = [\n \"bg-blue-500\", \"bg-green-500\", \"bg-purple-500\", \"bg-pink-500\",\n \"bg-indigo-500\", \"bg-teal-500\", \"bg-orange-500\", \"bg-cyan-500\",\n ];\n let hash = 0;\n for (let i = 0; i < username.length; i++) {\n hash = username.charCodeAt(i) + ((hash << 5) - hash);\n }\n return colors[Math.abs(hash) % colors.length];\n}\n\nexport function MessageBubble({ message, isOwn }: Props) {\n const avatarColor = getUserColor(message.username);\n const initial = message.username[0].toUpperCase();\n\n return (\n

\n {/* Avatar */}\n \n {initial}\n

\n\n {/* Message bubble */}\n

\n {/* Username */}\n

\n {message.username}\n

\n\n \n

{message.message}

\n\n {/* Timestamp */}\n

\n {formatTime(message.created_at)}\n

\n \n \n );\n}\n",[],[155,224,226],"174b6954-5353-11f1-a8ee-ee650bb23af1","ChatRoom.tsx","174b6a08-5353-11f1-a8ee-ee650bb23af1",11,["D",1779175176332],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { MessageBubble } from \"./MessageBubble.tsx\";\n\ninterface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\ninterface Props {\n username: string;\n}\n\nexport function ChatRoom({ username }: Props) {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [sending, setSending] = useState(false);\n const [connected, setConnected] = useState(false);\n const [error, setError] = useState(\"\");\n const messagesEndRef = useRef(null);\n const lastIdRef = useRef(0);\n\n // Auto-scroll to bottom when new messages arrive\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n // Load initial messages\n useEffect(() => {\n fetch(\"/api/messages\")\n .then((r) => r.json())\n .then((data) => {\n setMessages(data.messages);\n if (data.messages.length > 0) {\n lastIdRef.current = data.messages[data.messages.length - 1].id;\n }\n })\n .catch(() => setError(\"Failed to load messages\"));\n }, []);\n\n // SSE connection for real-time updates\n useEffect(() => {\n let eventSource: EventSource | null = null;\n let reconnectTimer: number | null = null;\n\n const connect = () => {\n eventSource = new EventSource(`/api/messages/stream?lastId=${lastIdRef.current}`);\n\n eventSource.onmessage = (event) => {\n try {\n const data = JSON.parse(event.data);\n\n if (data.type === \"connected\") {\n setConnected(true);\n setError(\"\");\n } else if (data.type === \"messages\") {\n setMessages((prev) => {\n const existingIds = new Set(prev.map((m) => m.id));\n const newMsgs = data.messages.filter(\n (m: ChatMessage) => !existingIds.has(m.id)\n );\n if (newMsgs.length === 0) return prev;\n const updated = [...prev, ...newMsgs];\n lastIdRef.current = updated[updated.length - 1].id;\n return updated;\n });\n } else if (data.type === \"reconnect\") {\n // Server told us to reconnect\n eventSource?.close();\n reconnectTimer = setTimeout(connect, 500) as unknown as number;\n }\n } catch {\n // ignore parse errors\n }\n };\n\n eventSource.onerror = () => {\n setConnected(false);\n eventSource?.close();\n // Reconnect after 2 seconds\n reconnectTimer = setTimeout(connect, 2000) as unknown as number;\n };\n };\n\n connect();\n\n return () => {\n eventSource?.close();\n if (reconnectTimer) clearTimeout(reconnectTimer);\n };\n }, []);\n\n // Send message\n const handleSend = async (e: Event) => {\n e.preventDefault();\n const trimmed = input.trim();\n if (!trimmed || sending) return;\n\n setSending(true);\n setError(\"\");\n\n try {\n const res = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, message: trimmed }),\n });\n\n if (!res.ok) {\n const data = await res.json();\n setError(data.error || \"Failed to send message\");\n return;\n }\n\n setInput(\"\");\n } catch {\n setError(\"Failed to send message. Check your connection.\");\n } finally {\n setSending(false);\n }\n };\n\n return (\n

\n {/* Connection status */}\n

\n \n \n {connected ? \"Connected — messages update in real-time\" : \"Connecting...\"}\n \n

\n\n {/* Messages area */}\n

\n {messages.length === 0 ? (\n

🗨️

No messages yet. Start the conversation!

\n ) : (\n messages.map((msg) => (\n \n ))\n )}\n

\n\n {/* Error display */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Input area */}\n

\n );\n}\n",[],[155,224,234],"07d98992-5353-11f1-b3c0-ee650bb23af1","App.tsx","07d98a5a-5353-11f1-b3c0-ee650bb23af1",9,["D",1779175150414],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { UsernameForm } from \"./UsernameForm.tsx\";\nimport { ChatRoom } from \"./ChatRoom.tsx\";\n\nexport function App() {\n const [username, setUsername] = useState(() => {\n try {\n return sessionStorage.getItem(\"chat_username\");\n } catch {\n return null;\n }\n });\n\n const handleJoin = (name: string) => {\n setUsername(name);\n try {\n sessionStorage.setItem(\"chat_username\", name);\n } catch {\n // ignore\n }\n };\n\n const handleLeave = () => {\n setUsername(null);\n try {\n sessionStorage.removeItem(\"chat_username\");\n } catch {\n // ignore\n }\n };\n\n return (\n

\n 💬\n

Real-Time Support Chat

\n {username && (\n

\n \n Signed in as {username}\n \n \n Leave\n \n

\n )}\n \n view source\n \n

\n\n

\n {username ? (\n \n ) : (\n \n )}\n

\n );\n}\n",[],[155,224,242],"02427bb0-5353-11f1-b3c0-ee650bb23af1",8,["D",1779175141041],"directory",[169,170,171,172],[155,224],"ef062786-5352-11f1-b948-ee650bb23af1",3,["D",1779175108771],[168,173,174],[155],["D",1779174751971],["D",1789469441210],{"_11":12,"_124":69},{"_11":12,"_119":120,"_68":69,"_30":67,"_121":122,"_123":24},{"_38":110,"_13":16,"_32":35,"_111":71,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":14,"_118":12},"ctx",{"_52":-5,"_143":298,"_299":300,"_301":302,"_303":24,"_304":24,"_305":24,"_306":84,"_307":-5,"_308":-7,"_309":-7,"_310":26,"_311":24,"_312":24,"_313":-5,"_314":24,"_315":24,"_316":24,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"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"]

History · index.html