\n \n\n\n",[],[76,102],"3ee3db98-3857-11f1-8e2a-42b51c65c3df","app.tsx","3ee3dc88-3857-11f1-8e2a-42b51c65c3df",10,["D",1776208279354],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface Message {\n role: \"user\" | \"assistant\";\n content: string;\n}\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n async function sendMessage(e: React.FormEvent) {\n e.preventDefault();\n const text = input.trim();\n if (!text || loading) return;\n\n setInput(\"\");\n setMessages((prev) => [...prev, { role: \"user\", content: text }]);\n setLoading(true);\n\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: text }),\n });\n const data = await res.json();\n setMessages((prev) => [...prev, { role: \"assistant\", content: data.response }]);\n } catch (err) {\n setMessages((prev) => [\n ...prev,\n { role: \"assistant\", content: \"Sorry, something went wrong. Please try again.\" },\n ]);\n } finally {\n setLoading(false);\n inputRef.current?.focus();\n }\n }\n\n const suggestions = [\n \"What time is it in Tokyo?\",\n \"Calculate 42 * 17 + 3\",\n \"Pick a random number 1-100\",\n \"What can you do?\",\n ];\n\n return (\n

\n {/* Header */}\n

\n 🤖\n

Sample Agent

\n \n view source\n \n

\n\n {/* Messages area */}\n

\n {messages.length === 0 && (\n

🤖

Hi! I'm a sample agent.

\n I can tell time in any timezone, do math, and generate random numbers. Try asking me something!\n

\n {suggestions.map((s) => (\n {\n setInput(s);\n inputRef.current?.focus();\n }}\n className=\"px-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded-full text-sm text-gray-300 transition-colors\"\n >\n {s}\n \n ))}\n

\n )}\n\n {messages.map((msg, i) => (\n \n \n {msg.content}\n

\n ))}\n\n {loading && (\n

\n \n \n \n

\n )}\n\n

\n\n {/* Input area */}\n \n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[76,110],"ec7fd59a-f8fb-11f0-bc42-42dde27851f2",["D",1769242133636],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","019bef07-c64e-732f-a4cf-141aa7329fae","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019bef07-c64e-732f-a4cf-18f8ca4e30e3","tursoName","ec7fd59af8fb11f0bc4242dde27851f2","tursoHostname","ec7fd59af8fb11f0bc4242dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789530055570],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_172":168},"org",{"_11":12,"_166":-5,"_167":168,"_126":127,"_169":170,"_171":56},"branch",{"_17":71,"_13":16,"_36":43,"_158":117,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":-5,"_164":14,"_165":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM4aEJFekg1ZGVzcFVGZ1FrMmVjcE1BQjdHRiJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":117,"_13":14,"_48":227,"_119":-5,"_120":56,"_121":122,"_123":122,"_124":-5,"_125":-5,"_126":127,"_128":-5,"_129":56,"_130":-5,"_131":-5,"_132":64,"_133":134,"_135":136,"_137":138,"_139":228,"_141":-5,"_142":143,"_144":143,"_145":146,"_147":146,"_148":146,"_149":143,"_150":143,"_151":229,"_153":230,"_155":231,"_157":56},[209,212,213,214],"files",[209,210,211,212,213,214],"counts",{"_199":64,"_200":201,"_202":64,"_31":203,"_204":205},[191,192,193,194],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":64,"_51":80,"_53":-5,"_55":56,"_57":-5,"_18":198},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":72,"_17":64,"_51":24,"_53":73,"_55":56,"_57":-5,"_18":197},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_18":196},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":195},[38],[60],[69],[76],"pulls","branches",1,"forks",{"_206":64,"_208":64},"connections",{"_206":64,"_207":64},"count","unfilledCount","emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":96,"_17":64,"_51":80,"_53":-5,"_55":56,"_57":-5,"_87":225,"_18":226},{"_36":109,"_13":110,"_39":111,"_41":77,"_42":43,"_44":112,"_46":47,"_48":113,"_17":64,"_51":65,"_53":114,"_55":56,"_57":-5,"_87":223,"_18":224},{"_36":101,"_13":102,"_39":103,"_41":77,"_42":43,"_44":104,"_46":47,"_48":105,"_17":64,"_51":24,"_53":106,"_55":56,"_57":-5,"_87":221,"_18":222},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":93,"_17":64,"_51":24,"_53":73,"_55":56,"_57":-5,"_87":219,"_18":220},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":90,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_87":217,"_18":218},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":215,"_18":216},[],[38],[],[60],[],[69],[],[76,102],[],[76,110],[210,211],[76],["D",1769242133636],["D",1789530055570],{"_11":12,"_172":168},{"_11":12,"_166":-5,"_167":168,"_126":127,"_169":170,"_171":56},{"_17":71,"_13":16,"_36":43,"_158":117,"_159":-5,"_160":-5,"_161":-5,"_162":-5,"_163":-5,"_164":14,"_165":12},"ctx",{"_151":-5,"_188":265,"_266":267,"_268":269,"_270":56,"_271":56,"_272":56,"_273":47,"_274":-5,"_275":-7,"_276":-7,"_277":64,"_278":56,"_279":56,"_280":-5,"_281":56,"_282":56,"_283":56,"_284":-5},"ENV",{"_236":237,"_238":239,"_240":16,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264},"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"]

Code