${message.username}

` : ''}\n

${escapeHtml(message.content)}

${formatTimestamp(message.createdAt)}

\n `;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Add a system message to the chat\nfunction addSystemMessage(text) {\n const messageElement = document.createElement('div');\n messageElement.className = 'message-bubble system-message';\n messageElement.textContent = text;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Show the chat screen\nfunction showChatScreen() {\n console.log('Showing chat screen');\n \n if (!loginScreen || !chatScreen) {\n console.error('Login or chat screen elements not found!', {\n loginScreen: !!loginScreen,\n chatScreen: !!chatScreen\n });\n alert('Error loading chat interface. Please refresh the page.');\n return;\n }\n \n loginScreen.classList.add('hidden');\n chatScreen.classList.remove('hidden');\n \n if (currentUserSpan) {\n currentUserSpan.textContent = username;\n }\n \n if (messageInput) {\n messageInput.focus();\n }\n \n console.log('Chat screen should now be visible');\n}\n\n// Utility: Scroll to the bottom of the messages container\nfunction scrollToBottom() {\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n}\n\n// Utility: Format timestamp\nfunction formatTimestamp(timestamp) {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n}\n\n// Utility: Escape HTML to prevent XSS\nfunction escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n// Initialize the app when the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM content loaded, initializing app...');\n init();\n});",[],[106,116],"672f6512-30ed-11f0-b6cf-569c3dd06744","index.html","73354b52-30ec-11f0-9261-569c3dd06744",17,["D",1747245664492],"\n\n\n \n \n Real-Time Chat\n \n \n \n\n\n

\n \n \n\n \n

Real-Time Chat

Logged in as:

\n\n

\n \n

\n\n \n

\n \n \n

\n Error!\n JavaScript is not working properly. Please try refreshing the page or check your browser settings.\n

\n\n \n \n\n \n \n \n \n\n",[],[106,125],"84b6bdac-30ec-11f0-aeee-569c3dd06744","84b6be56-30ec-11f0-aeee-569c3dd06744",10,["D",1747245284541],"# Frontend for Real-Time Chat\n\nThis directory contains the frontend code for the real-time chat application.\n\n## Components\n\n- `index.html`: Main HTML template with the chat UI\n- `index.js`: Frontend JavaScript for handling WebSocket communication and UI updates\n\n## Features\n\n- Real-time message updates using WebSockets\n- User authentication with username\n- Message history display\n- Responsive design with Tailwind CSS",[],[106,61],["D",1747245189189],[142,143,144],[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":151,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_87":152,"_18":153},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":148,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_87":149,"_18":150},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":145,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_87":146,"_18":147},["D",1747245708914],[],[19,38],["D",1747245206486],[],[19,61],["D",1747245189189],[154,155],[19,69],{"_36":164,"_13":165,"_39":166,"_41":70,"_43":44,"_45":71,"_47":48,"_49":167,"_17":65,"_52":101,"_54":168,"_56":57,"_58":-5,"_87":169,"_18":170},{"_36":156,"_13":157,"_39":158,"_41":70,"_43":44,"_45":159,"_47":48,"_49":160,"_17":65,"_52":101,"_54":161,"_56":57,"_58":-5,"_87":162,"_18":163},"528b7f8e-30ec-11f0-afc4-569c3dd06744","queries.ts","528b8038-30ec-11f0-afc4-569c3dd06744",4,["D",1747245200370],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, User } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, USERS_TABLE } from \"./migrations.ts\";\n\n// User queries\nexport async function createUser(username: string): Promise {\n const now = new Date().toISOString();\n \n const result = await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (username, created_at) VALUES (?, ?) RETURNING id, username, created_at`,\n [username, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create user\");\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\nexport async function getUserByUsername(username: string): Promise {\n const result = await sqlite.execute(\n `SELECT id, username, created_at FROM ${USERS_TABLE} WHERE username = ?`,\n [username]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\n// Message queries\nexport async function createMessage(userId: number, content: string): Promise {\n const now = new Date().toISOString();\n \n // First get the username\n const userResult = await sqlite.execute(\n `SELECT username FROM ${USERS_TABLE} WHERE id = ?`,\n [userId]\n );\n \n if (userResult.rows.length === 0) {\n throw new Error(\"User not found\");\n }\n \n const username = userResult.rows[0][0] as string;\n \n // Then create the message\n const result = await sqlite.execute(\n `INSERT INTO ${MESSAGES_TABLE} (user_id, content, created_at) VALUES (?, ?, ?) RETURNING id`,\n [userId, content, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create message\");\n }\n \n return {\n id: result.rows[0][0] as number,\n userId,\n username,\n content,\n createdAt: now\n };\n}\n\nexport async function getRecentMessages(limit = 50): Promise {\n const result = await sqlite.execute(\n `SELECT m.id, m.user_id, u.username, m.content, m.created_at \n FROM ${MESSAGES_TABLE} m\n JOIN ${USERS_TABLE} u ON m.user_id = u.id\n ORDER BY m.created_at DESC\n LIMIT ?`,\n [limit]\n );\n \n return result.rows.map(row => ({\n id: row[0] as number,\n userId: row[1] as number,\n username: row[2] as string,\n content: row[3] as string,\n createdAt: row[4] as string\n })).reverse(); // Reverse to get oldest first\n}",[],[19,69,157],"4be5ea3e-30ec-11f0-be93-569c3dd06744","migrations.ts","4be5eb06-30ec-11f0-be93-569c3dd06744",["D",1747245189189],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names - change these when modifying schema\nexport const USERS_TABLE = 'chat_users';\nexport const MESSAGES_TABLE = 'chat_messages';\n\nexport async function runMigrations() {\n // Create users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT NOT NULL,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id)\n )\n `);\n}",[],[19,69,165],"0b8a871a-30ec-11f0-a9be-569c3dd06744",["D",1747245081250],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","e8917520-30eb-11f0-9ec7-71254960a09e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","5a1594bd-e38a-4c55-b44c-9982260951e3","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_223":219},"org",{"_11":12,"_217":-5,"_218":219,"_180":181,"_220":221,"_222":57},"branch",{"_17":46,"_13":16,"_36":44,"_209":171,"_210":-5,"_211":-5,"_212":-5,"_213":-5,"_214":-5,"_215":14,"_216":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeDY0Nlg2NjU2dUpmZzByOWJ1Z2lidElGeHYifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":171,"_13":14,"_49":298,"_173":-5,"_174":57,"_175":176,"_177":176,"_178":-5,"_179":-5,"_180":181,"_182":40,"_183":48,"_184":48,"_185":-5,"_186":65,"_187":188,"_189":-5,"_190":-5,"_191":-5,"_192":-5,"_193":194,"_195":194,"_196":197,"_198":197,"_199":197,"_200":194,"_201":194,"_202":299,"_204":300,"_206":301,"_208":57},[259,265,269,271],"files",[259,260,261,262,263,264,265,266,267,268,269,270,271],"counts",{"_250":65,"_251":84,"_252":65,"_32":253,"_254":255},[244,245,246],{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":71,"_47":48,"_49":76,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":243},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":72,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_18":249},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":64,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_18":248},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_18":247},[19,38],[19,61],[19,69],"pulls","branches","forks",{"_256":65,"_258":65},"connections",{"_256":65,"_257":65},"count","unfilledCount","emptyCount",{"_36":75,"_13":19,"_39":42,"_41":-5,"_43":44,"_45":71,"_47":48,"_49":139,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_87":296,"_18":297},{"_36":68,"_13":69,"_39":70,"_41":42,"_43":44,"_45":71,"_47":48,"_49":151,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_87":294,"_18":295},{"_36":164,"_13":165,"_39":166,"_41":70,"_43":44,"_45":71,"_47":48,"_49":167,"_17":65,"_52":101,"_54":168,"_56":57,"_58":-5,"_87":292,"_18":293},{"_36":156,"_13":157,"_39":158,"_41":70,"_43":44,"_45":159,"_47":48,"_49":160,"_17":65,"_52":101,"_54":161,"_56":57,"_58":-5,"_87":290,"_18":291},{"_36":60,"_13":61,"_39":62,"_41":42,"_43":44,"_45":63,"_47":48,"_49":148,"_17":65,"_52":24,"_54":66,"_56":57,"_58":-5,"_87":288,"_18":289},{"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":145,"_17":51,"_52":53,"_54":55,"_56":57,"_58":-5,"_87":286,"_18":287},{"_36":105,"_13":106,"_39":107,"_41":-5,"_43":44,"_45":108,"_47":48,"_49":109,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_87":284,"_18":285},{"_36":132,"_13":61,"_39":133,"_41":107,"_43":44,"_45":134,"_47":48,"_49":135,"_17":65,"_52":24,"_54":136,"_56":57,"_58":-5,"_87":282,"_18":283},{"_36":124,"_13":125,"_39":126,"_41":107,"_43":44,"_45":127,"_47":48,"_49":128,"_17":84,"_52":24,"_54":129,"_56":57,"_58":-5,"_87":280,"_18":281},{"_36":115,"_13":116,"_39":117,"_41":107,"_43":44,"_45":118,"_47":48,"_49":119,"_17":120,"_52":101,"_54":121,"_56":57,"_58":-5,"_87":278,"_18":279},{"_36":90,"_13":91,"_39":92,"_41":-5,"_43":44,"_45":51,"_47":48,"_49":93,"_17":65,"_52":73,"_54":-5,"_56":57,"_58":-5,"_87":276,"_18":277},{"_36":97,"_13":98,"_39":99,"_41":92,"_43":44,"_45":51,"_47":48,"_49":100,"_17":65,"_52":101,"_54":102,"_56":57,"_58":-5,"_87":274,"_18":275},{"_36":82,"_13":61,"_39":83,"_41":-5,"_43":44,"_45":84,"_47":48,"_49":85,"_17":65,"_52":24,"_54":86,"_56":57,"_58":-5,"_87":272,"_18":273},[],[61],[],[91,98],[270],[91],[],[106,116],[],[106,125],[],[106,61],[266,267,268],[106],[],[19,38],[],[19,61],[],[19,69,157],[],[19,69,165],[261,262],[19,69],[260,263,264],[19],["D",1747245081250],{"_11":12,"_223":219},{"_11":12,"_217":-5,"_218":219,"_180":181,"_220":221,"_222":57},{"_17":46,"_13":16,"_36":44,"_209":171,"_210":-5,"_211":-5,"_212":-5,"_213":-5,"_214":-5,"_215":14,"_216":12},"ctx",{"_202":-5,"_240":335,"_336":337,"_338":339,"_340":57,"_341":57,"_342":57,"_343":48,"_344":-5,"_345":-7,"_346":-7,"_347":65,"_348":57,"_349":57,"_350":-5,"_351":57,"_352":57,"_353":57,"_354":-5},"ENV",{"_306":307,"_308":309,"_310":16,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

Join the Chat