/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function App() { const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [username, setUsername] = useState(localStorage.getItem("chatUsername") || ""); const darkPurple = "#1a0829"; const accentPink = "#ff2e97"; const gradientPurple = "#430098"; const cyberBlue = "#0ff"; useEffect(() => { fetchMessages(); }, []); const fetchMessages = async () => { const response = await fetch("/messages"); const data = await response.json(); setMessages(data); }; const handleSubmit = async (e) => { e.preventDefault(); if (!username) { alert("Please enter a username"); return; } localStorage.setItem("chatUsername", username); await fetch("/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: newMessage, name: username, }), }); setNewMessage(""); fetchMessages(); }; const formatTimestamp = (timestamp) => { const date = new Date(timestamp); return date.toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", }); }; return (

Val Chat

setUsername(e.target.value)} placeholder="Your Username" style={{ flex: 1, padding: "10px", borderRadius: "5px", border: `1px solid ${cyberBlue}`, backgroundColor: darkPurple, color: cyberBlue, }} />

{messages.map((msg) => (

{msg.name} {formatTimestamp(msg.timestamp)}

{msg.content}

))}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 2; // Increment schema version to create new table await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, content TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); if (request.method === "GET" && new URL(request.url).pathname === "/messages") { const result = await sqlite.execute(` SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 50 `); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/messages") { const { content, name } = await request.json(); await sqlite.execute( ` INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (name, content) VALUES (?, ?) `, [name, content], ); return new Response("Message sent", { status: 200 }); } return new Response( ` Cyber Chat

`, { headers: { "Content-Type": "text/html" }, }, ); }

simpleChatAPI