\n \n \n \n\n",[],[147,194],"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",[],[147,210,202],"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",[],[147,210,212],"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",[],[147,210,220],"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",[],[147,210,228],"02427bb0-5353-11f1-b3c0-ee650bb23af1",8,["D",1779175141041],[166,167,168,169],[147,210],["D",1779175108771],[165,170,171],[147],["D",1779174751971],["D",1789469441210],{"_16":17,"_87":83},{"_16":17,"_80":81,"_82":83,"_33":34,"_84":85,"_86":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_108":281,"_282":283,"_284":285,"_286":26,"_287":26,"_288":26,"_289":38,"_290":-5,"_291":-7,"_292":-7,"_293":42,"_294":26,"_295":26,"_296":-5,"_297":26,"_298":26,"_299":26,"_300":-5},"ENV",{"_252":253,"_254":255,"_256":70,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280},"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"]

Search