\n \n \n \n\n",[18,67],"02427bb0-5353-11f1-b3c0-ee650bb23af1",["D",1779175141041],[18,91],"pulls","branches",1,"forks","envVars",{"_199":26,"_201":26},"connections",{"_199":26,"_200":26},"count","unfilledCount","emptyCount",{"_35":169,"_13":18,"_65":93,"_45":-5,"_37":38,"_170":171,"_172":24,"_39":279,"_41":26,"_68":92,"_174":-5,"_69":30,"_175":-5,"_220":280,"_17":281},{"_35":188,"_13":91,"_65":90,"_45":93,"_37":38,"_170":85,"_172":24,"_39":276,"_41":26,"_68":92,"_174":-5,"_69":30,"_175":-5,"_220":277,"_17":278},{"_35":268,"_13":269,"_65":270,"_45":90,"_37":38,"_170":271,"_172":24,"_39":272,"_41":26,"_68":82,"_174":273,"_69":30,"_175":-5,"_220":274,"_17":275},{"_35":260,"_13":261,"_65":262,"_45":90,"_37":38,"_170":263,"_172":24,"_39":264,"_41":26,"_68":82,"_174":265,"_69":30,"_175":-5,"_220":266,"_17":267},{"_35":252,"_13":253,"_65":254,"_45":90,"_37":38,"_170":255,"_172":24,"_39":256,"_41":26,"_68":82,"_174":257,"_69":30,"_175":-5,"_220":258,"_17":259},{"_35":244,"_13":245,"_65":246,"_45":90,"_37":38,"_170":247,"_172":24,"_39":248,"_41":26,"_68":82,"_174":249,"_69":30,"_175":-5,"_220":250,"_17":251},{"_35":184,"_13":67,"_65":66,"_45":93,"_37":38,"_170":42,"_172":24,"_39":241,"_41":26,"_68":21,"_174":186,"_69":30,"_175":-5,"_220":242,"_17":243},{"_35":180,"_13":81,"_65":80,"_45":93,"_37":38,"_170":75,"_172":24,"_39":238,"_41":26,"_68":82,"_174":182,"_69":30,"_175":-5,"_220":239,"_17":240},{"_35":231,"_13":232,"_65":233,"_45":-5,"_37":38,"_170":133,"_172":24,"_39":234,"_41":26,"_68":21,"_174":235,"_69":30,"_175":-5,"_220":236,"_17":237},{"_35":223,"_13":224,"_65":225,"_45":-5,"_37":38,"_170":226,"_172":24,"_39":227,"_41":26,"_68":82,"_174":228,"_69":30,"_175":-5,"_220":229,"_17":230},{"_35":213,"_13":214,"_65":106,"_45":-5,"_37":38,"_170":215,"_172":24,"_39":216,"_41":217,"_68":218,"_174":219,"_69":30,"_175":-5,"_220":221,"_17":222},"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",[],[214],"f4943102-5352-11f1-b71a-ee650bb23af1","db.ts","f49431b6-5352-11f1-b71a-ee650bb23af1",4,["D",1779175118089],"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",[],[224],"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",[],[232],["D",1779175138310],[],[18,81],["D",1779175137348],[],[18,67],"0c6e03ca-5353-11f1-b66e-ee650bb23af1","UsernameForm.tsx","0c6e046a-5353-11f1-b66e-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",[],[18,91,245],"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",[],[18,91,253],"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",[],[18,91,261],"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",[],[18,91,269],["D",1779175141041],[204,205,206,207],[18,91],["D",1779175108771],[203,208,209],[18],["D",1779174751971],["D",1789555877593],{"_11":12,"_147":72},{"_11":12,"_142":143,"_71":72,"_31":70,"_144":145,"_146":30},{"_41":133,"_13":16,"_35":38,"_134":95,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":14,"_141":12},"ctx",{"_55":-5,"_166":320,"_321":322,"_323":324,"_325":30,"_326":30,"_327":30,"_328":24,"_329":-5,"_330":-7,"_331":-7,"_332":26,"_333":30,"_334":30,"_335":-5,"_336":30,"_337":30,"_338":30,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":16,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"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 · frontend