Slack Clone

💬 Slack Clone

\n {messages.map((msg, index) => (\n

\n {msg.content}\n

\n ))}\n

\n \n \n View Source\n \n

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

\n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst styles = {\n container: {\n fontFamily: 'system-ui, sans-serif',\n maxWidth: '600px',\n margin: '0 auto',\n height: '100vh',\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: '#f4f4f4'\n },\n header: {\n backgroundColor: '#4A154B',\n color: 'white',\n padding: '15px',\n textAlign: 'center',\n fontWeight: 'bold'\n },\n messageList: {\n flex: 1,\n overflowY: 'auto',\n padding: '10px'\n },\n message: {\n backgroundColor: 'white',\n borderRadius: '8px',\n padding: '10px',\n marginBottom: '10px',\n boxShadow: '0 1px 3px rgba(0,0,0,0.1)'\n },\n inputContainer: {\n display: 'flex',\n padding: '10px',\n backgroundColor: 'white',\n borderTop: '1px solid #e0e0e0'\n },\n input: {\n flex: 1,\n padding: '10px',\n borderRadius: '20px',\n border: '1px solid #e0e0e0',\n marginRight: '10px'\n },\n sendButton: {\n backgroundColor: '#4A154B',\n color: 'white',\n border: 'none',\n borderRadius: '50%',\n width: '40px',\n height: '40px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n },\n sourceLink: {\n position: 'absolute',\n bottom: '10px',\n right: '10px',\n color: '#4A154B',\n textDecoration: 'none'\n }\n};",["D",1743425427398],{"_133":176,"_135":177},"jsumnersmith","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGVDbFhyMjBxM3ZoWVBacDlNbkFydHAxNUoifQ",{"_117":115,"_133":134,"_102":103,"_121":122,"_179":-5},"prDisabledHint","latestEvaluation","jsumnersmith/townieIllustratorPrompt",[183,187,190,193],{"_119":184,"_121":122,"_185":186},["D",1743425427398],"n","1",{"_119":188,"_121":94,"_185":189},["D",1743425342224],"2",{"_119":191,"_121":125,"_185":192},["D",1743425320251],"3",{"_119":194,"_121":33,"_185":195},["D",1743425271823],"4","forksCount","valname","page",{"_117":115,"_102":103,"_133":134,"_12":100,"_121":122,"_104":105,"_138":-5,"_118":70,"_108":109,"_116":27,"_140":141},"routes/_app","actionData","errors"]