Slack Clone

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_178":179,"_180":181},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_132":-5,"_20":133,"_22":134,"_135":136,"_137":138,"_26":139,"_24":140,"_141":142,"_143":144,"_145":48,"_146":147,"_148":48,"_149":-5,"_150":-5,"_151":152},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":32,"_34":-5},"handle","jsumnersmith","name","townieIllustratorPrompt","branchName","main","version","path","main.tsx","project",{"_35":89,"_13":14,"_37":90,"_46":-5,"_91":64,"_49":50,"_92":50,"_93":-5,"_94":-5,"_95":96,"_97":-5,"_98":64,"_99":-5,"_100":-5,"_101":85,"_53":102,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":108,"_109":108,"_110":111,"_112":111,"_113":111,"_114":108,"_115":108,"_116":117,"_118":119,"_120":121,"_47":48},"tree",[74,75],"file",{"_35":56,"_13":19,"_57":58,"_59":-5,"_60":61,"_62":32,"_63":64,"_37":65,"_17":66,"_67":68,"_69":70,"_71":48,"_72":-5,"_18":73},"contents",[],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":32,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"pull","ahead",4,"behind","envVars","id","3c47006a-2523-11f0-b0e0-569c3dd06744","createdAt",["D",1745949371382],"updatedAt",["D",1737135071636],"projectId","3c46c334-2523-11f0-b0e0-569c3dd06744","forkedBranchId","forkedBranchVersion","lockfileKey","deletedAt","isOwned",false,"privacy","public","userHandle","charmaine","orgId","2019e55b-c541-4c51-bef0-008eef10ef88","projectName","78b49dfc-27a6-11f0-9edc-569c3dd06744","fileId","78a5ed02-27a6-11f0-9edc-569c3dd06744","parentId","branchId","78a342fa-27a6-11f0-9edc-569c3dd06744","branchVersion","latest",true,["D",1743425427398],3,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState(\"\");\n\n useEffect(() => {\n fetchMessages();\n }, []);\n\n async function fetchMessages() {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data);\n }\n\n async function sendMessage(e: React.FormEvent) {\n e.preventDefault();\n await fetch(\"/messages\", {\n method: \"POST\",\n body: JSON.stringify({ content: newMessage }),\n headers: { \"Content-Type\": \"application/json\" }\n });\n setNewMessage(\"\");\n fetchMessages();\n }\n\n return (\n

💬 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 = \"townieIllustratorPrompt\";\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};","deleted","label",[19],{"_35":80,"_13":81,"_57":82,"_59":-5,"_60":61,"_62":83,"_63":64,"_37":84,"_17":85,"_67":24,"_69":86,"_71":48,"_72":-5,"_77":87,"_18":88},{"_35":56,"_13":19,"_57":58,"_59":-5,"_60":61,"_62":32,"_63":64,"_37":76,"_17":66,"_67":68,"_69":70,"_71":48,"_72":-5,"_77":78,"_18":79},["D",1743425427398],"children",[],[19],"78a609f4-27a6-11f0-9edc-569c3dd06744","README.md","78a60a76-27a6-11f0-9edc-569c3dd06744",1,["D",1743425271823],0,"Add this to Townie's System prompt by going into Townie's `Settings`\n\n```\n—\n\nFirst ask a user what app they would like you to illustrate. Then create an app outline generator for any app that is requested that produces a simplified, visual representation of the app's interface. \n\nCore Functionality\n\n- Accept an app name as input (e.g., \"Zoom\", \"Slack\", \"Discord\")\n- Generate a single val that renders a minimal, branded mockup of the app's main interface\n- Allow the user to export a png screenshot with transparent background with rounded corners (8px radius)\n- Move the `html2canvas` import inside the `client()` function.\n- Wrap the `exportAsPNG` function in a `useEffect` hook to ensure it's only defined on the client-side.\n- Use dynamic import for `html2canvas` inside the `exportAsPNG` function.\n- Make sure html2canvas is only loaded and used on the client-side\n\nVisual Requirements\n\n- Match the app's primary brand colors (limit to 2-3 colors)\n- Do light or dark mode of the app depending on which is the default for that app\n- Use placeholder blocks in light gray (#E5E5E5) for text and controls\n- Include key structural elements specific to the app (e.g., sidebars, headers, content areas), refrain from including text\n- Use SVG for any icons or logos, built into the component, if needed.\n- Apply consistent spacing (16px grid)\n- Ensure the generated outline is compact (around 280x220 pixels) for easy sharing and quick visualization.\n```",[],[81],"78a2fec6-27a6-11f0-9edc-569c3dd06744",["D",1746225639046],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","ce5203d2-258d-4683-bd80-53bc17a82494","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","4ebd5ae2-a737-4a93-b79e-729096273304","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_131":127},"org",{"_11":12,"_125":-5,"_126":127,"_95":96,"_128":129,"_130":48},"branch",{"_17":32,"_13":16,"_35":61,"_41":89,"_43":36,"_44":85,"_122":50,"_123":42,"_124":54,"_55":14,"_51":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGVDbFhyMjBxM3ZoWVBacDlNbkFydHAxNUoifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":89,"_13":14,"_37":174,"_46":-5,"_91":64,"_49":50,"_92":50,"_93":-5,"_94":-5,"_95":96,"_97":-5,"_98":64,"_99":-5,"_100":-5,"_101":85,"_53":102,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":108,"_109":108,"_110":111,"_112":111,"_113":111,"_114":108,"_115":108,"_116":175,"_118":176,"_120":177,"_47":48},[168,169],"files",[168,169],"counts",{"_159":85,"_160":83,"_161":85,"_34":162,"_163":164},[],{"_35":56,"_60":61,"_57":58,"_13":19,"_69":70,"_67":68,"_17":66,"_59":-5,"_37":157,"_62":32,"_72":-5,"_18":158},"upstreamProject",{"_35":42,"_13":14,"_93":-5,"_94":-5,"_49":50,"_116":155},"upstreamBranch",{"_35":36,"_37":153,"_39":154,"_13":16,"_41":42,"_17":32,"_43":-5,"_44":-5,"_45":-5,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1745949371382],["D",1737135071636],{"_11":52,"_131":156},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ4cFpFME5pSXNZamJNd296dlZSYVJ0OVF1RSJ9",["D",1743425427398],[19],"pulls","branches","forks",{"_165":85,"_167":85},"connections",{"_165":85,"_166":85},"count","unfilledCount","emptyCount",{"_35":80,"_13":81,"_57":82,"_59":-5,"_60":61,"_62":83,"_63":64,"_37":84,"_17":85,"_67":24,"_69":86,"_71":48,"_72":-5,"_77":172,"_18":173},{"_35":56,"_13":19,"_57":58,"_59":-5,"_60":61,"_62":32,"_63":64,"_37":76,"_17":66,"_67":68,"_69":70,"_71":48,"_72":-5,"_77":170,"_18":171},[],[19],[],[81],["D",1746225639046],{"_11":12,"_131":127},{"_11":12,"_125":-5,"_126":127,"_95":96,"_128":129,"_130":48},{"_17":32,"_13":16,"_35":61,"_41":89,"_43":36,"_44":85,"_122":50,"_123":42,"_124":54,"_55":14,"_51":12},"ctx",{"_116":-5,"_150":211,"_212":213,"_214":215,"_216":48,"_217":48,"_218":48,"_219":64,"_220":-5,"_221":-7,"_222":-7,"_223":85,"_224":48,"_225":48,"_226":-5,"_227":48,"_228":48,"_229":48,"_230":-5},"ENV",{"_182":183,"_184":185,"_186":16,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210},"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"]