\n \n \n \n\n",[],[76,111],"02427bb0-5353-11f1-b3c0-ee650bb23af1","components","02427c78-5353-11f1-b3c0-ee650bb23af1",8,["D",1779175141041],[125,126,127,128],[76,119],{"_36":153,"_13":154,"_39":155,"_41":120,"_42":43,"_44":156,"_46":47,"_48":157,"_17":64,"_51":65,"_53":158,"_55":56,"_57":-5,"_87":159,"_18":160},{"_36":145,"_13":146,"_39":147,"_41":120,"_42":43,"_44":148,"_46":47,"_48":149,"_17":64,"_51":65,"_53":150,"_55":56,"_57":-5,"_87":151,"_18":152},{"_36":137,"_13":138,"_39":139,"_41":120,"_42":43,"_44":140,"_46":47,"_48":141,"_17":64,"_51":65,"_53":142,"_55":56,"_57":-5,"_87":143,"_18":144},{"_36":129,"_13":130,"_39":131,"_41":120,"_42":43,"_44":132,"_46":47,"_48":133,"_17":64,"_51":65,"_53":134,"_55":56,"_57":-5,"_87":135,"_18":136},"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",[],[76,119,130],"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",[],[76,119,138],"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",[],[76,119,146],"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",[],[76,119,154],"1a5a0426-5352-11f1-891e-ee650bb23af1",["D",1779174751971],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Real-time support chat with SSE and SQLite persistence","imageUrl","userId","dc70a415-98fc-4458-af03-4a0a2fcdd97f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","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",{"_11":12,"_218":214},"org",{"_11":12,"_211":212,"_213":214,"_171":172,"_215":216,"_217":56},"branch",{"_17":71,"_13":16,"_36":43,"_203":161,"_204":-5,"_205":-5,"_206":-5,"_207":-5,"_208":-5,"_209":14,"_210":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Rosa Mehdili","avatar","https://lh3.googleusercontent.com/a/ACg8ocJ8XeitmhPVNCeJ8UWVE54OyNqLS99DYm_GzhyMTU_sHp_1mA=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":161,"_13":14,"_48":288,"_163":-5,"_164":56,"_165":166,"_167":166,"_168":169,"_170":-5,"_171":172,"_173":40,"_174":47,"_175":-5,"_176":-5,"_177":64,"_178":179,"_180":181,"_182":183,"_184":289,"_186":-5,"_187":188,"_189":188,"_190":191,"_192":191,"_193":191,"_194":188,"_195":188,"_196":290,"_198":291,"_200":292,"_202":56},[255,263,264,265],"files",[255,256,257,258,259,260,261,262,263,264,265],"counts",{"_245":64,"_246":247,"_248":64,"_31":249,"_250":251},[237,238,239,240],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":64,"_51":80,"_53":-5,"_55":56,"_57":-5,"_18":244},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":72,"_17":64,"_51":24,"_53":73,"_55":56,"_57":-5,"_18":243},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_18":242},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":241},[38],[60],[69],[76],"pulls","branches",1,"forks",{"_252":64,"_254":64},"connections",{"_252":64,"_253":64},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":64,"_51":80,"_53":-5,"_55":56,"_57":-5,"_87":286,"_18":287},{"_36":118,"_13":119,"_39":120,"_41":77,"_42":43,"_44":121,"_46":47,"_48":122,"_17":64,"_51":80,"_53":-5,"_55":56,"_57":-5,"_87":284,"_18":285},{"_36":153,"_13":154,"_39":155,"_41":120,"_42":43,"_44":156,"_46":47,"_48":157,"_17":64,"_51":65,"_53":158,"_55":56,"_57":-5,"_87":282,"_18":283},{"_36":145,"_13":146,"_39":147,"_41":120,"_42":43,"_44":148,"_46":47,"_48":149,"_17":64,"_51":65,"_53":150,"_55":56,"_57":-5,"_87":280,"_18":281},{"_36":137,"_13":138,"_39":139,"_41":120,"_42":43,"_44":140,"_46":47,"_48":141,"_17":64,"_51":65,"_53":142,"_55":56,"_57":-5,"_87":278,"_18":279},{"_36":129,"_13":130,"_39":131,"_41":120,"_42":43,"_44":132,"_46":47,"_48":133,"_17":64,"_51":65,"_53":134,"_55":56,"_57":-5,"_87":276,"_18":277},{"_36":110,"_13":111,"_39":112,"_41":77,"_42":43,"_44":113,"_46":47,"_48":114,"_17":64,"_51":24,"_53":115,"_55":56,"_57":-5,"_87":274,"_18":275},{"_36":102,"_13":103,"_39":104,"_41":77,"_42":43,"_44":105,"_46":47,"_48":106,"_17":64,"_51":65,"_53":107,"_55":56,"_57":-5,"_87":272,"_18":273},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":93,"_17":64,"_51":24,"_53":73,"_55":56,"_57":-5,"_87":270,"_18":271},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":90,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_87":268,"_18":269},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":266,"_18":267},[],[38],[],[60],[],[69],[],[76,103],[],[76,111],[],[76,119,130],[],[76,119,138],[],[76,119,146],[],[76,119,154],[257,258,259,260],[76,119],[256,261,262],[76],["D",1779174751971],["D",1789469441210],{"_11":12,"_218":214},{"_11":12,"_211":212,"_213":214,"_171":172,"_215":216,"_217":56},{"_17":71,"_13":16,"_36":43,"_203":161,"_204":-5,"_205":-5,"_206":-5,"_207":-5,"_208":-5,"_209":14,"_210":12},"ctx",{"_196":-5,"_234":326,"_327":328,"_329":330,"_331":56,"_332":56,"_333":56,"_334":47,"_335":-5,"_336":-7,"_337":-7,"_338":64,"_339":56,"_340":56,"_341":-5,"_342":56,"_343":56,"_344":56,"_345":-5},"ENV",{"_297":298,"_299":300,"_301":16,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325},"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"]