[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","AyanAfzal","name","Fix","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","cfd67ee9-963a-4c9d-b453-cd595b10d973","main.ts","fileId","4a039c8a-aaf2-11f1-845b-1607ee4eb77e","parentId","branchId","209d6934-d542-47a8-8e73-7a7cd4e4debb","branchVersion",6,"latest",true,"createdAt",["D",1788809554799],5,"fileType","http","content","/* ============================================================\n BOOKSHOP BOT — WhatsApp + Website widget\n v7 — adds /bind to force Meta's message subscription\n\n THREE ENDPOINTS\n / Meta's WhatsApp webhook (GET verify, POST messages)\n /chat JSON endpoint the website widget talks to\n /widget.js the widget itself, served from here\n\n TO PUT IT ON THE CLIENT'S SITE\n They paste this one line before :\n\n \n\n That's it. No files to host, no build step. Changing the book\n list here updates both WhatsApp and the website at once.\n ============================================================ */\n\nconst SHOP_NAME = \"Chapter One Books\";\n\n// Type this same string into Meta's \"Verify token\" box. Lowercase, no\n// spaces. Change it if you like, just keep both sides identical.\nconst VERIFY_TOKEN = \"ayan9823\";\n\nconst BOOKS = `\nPiranesi | Susanna Clarke | Fantasy | PKR 1,850\nProject Hail Mary | Andy Weir | Science fiction | PKR 2,100\nEducated | Tara Westover | Memoir | PKR 1,950\nThe Secret History | Donna Tartt | Thriller | PKR 2,200\nSapiens | Yuval Noah Harari | History | PKR 2,300\nNormal People | Sally Rooney | Contemporary | PKR 1,600\nThe Remains of the Day | Kazuo Ishiguro | Literary fiction | PKR 1,700\nKlara and the Sun | Kazuo Ishiguro | Science fiction | PKR 1,900\nThe Overstory | Richard Powers | Literary fiction | PKR 2,400\nBraiding Sweetgrass | Robin Wall Kimmerer | Nature | PKR 2,050\n`;\n\n// Which sites may use the widget. Lock this to your client's domain\n// before launch, or anyone can embed it and spend your credits.\n// \"*\" allows any site — fine for testing only.\nconst ALLOWED_ORIGINS = [\"*\"];\n\n/* ============================================================\n Nothing below here needs editing.\n ============================================================ */\n\nconst MODEL = \"claude-haiku-4-5-20251001\";\nconst MAX_TOKENS = 200;\nconst CLAUDE_TIMEOUT_MS = 12000;\nconst MAX_HISTORY = 8;\nconst MAX_CUSTOMERS = 300;\nconst RATE_LIMIT = 20; // web messages per IP per hour\n\nconst SYSTEM_PROMPT =\n `You work the floor at ${SHOP_NAME}, a bookshop, talking to a customer.\n\nLENGTH IS THE MOST IMPORTANT RULE:\n- One or two sentences. Never three.\n- No bullet points, lists, or line breaks. One short paragraph.\n- No padding like \"Great question!\" or \"I'd be happy to help.\"\n\nRecommending:\n- Only recommend books from the list below. Never invent a title, author or price.\n- Two suggestions maximum. One is often better.\n- Include the price when you name a book.\n- If they haven't said what they like, ask one short question instead of guessing.\n- If you don't stock what they want, say so in one sentence and offer the nearest thing.\n\nYou cannot take payment or place orders. If they want to buy, say to come in or that someone will follow up.\n\nBOOKS IN STOCK:\n${BOOKS.trim()}`;\n\nconst history = new Map>();\nconst seen = new Set();\nconst rates = new Map();\n\nfunction env(name: string): string {\n const value = Deno.env.get(name);\n if (!value) throw new Error(`Missing environment variable: ${name}`);\n return value;\n}\n\nfunction corsHeaders(origin: string | null): Record {\n const allowed = ALLOWED_ORIGINS.includes(\"*\")\n ? \"*\"\n : ALLOWED_ORIGINS.includes(origin ?? \"\")\n ? (origin ?? \"\")\n : \"\";\n return {\n \"access-control-allow-origin\": allowed,\n \"access-control-allow-methods\": \"POST, OPTIONS\",\n \"access-control-allow-headers\": \"content-type\",\n };\n}\n\n/** Crude per-IP hourly cap so a bored visitor cannot drain your credits. */\nfunction rateLimited(ip: string): boolean {\n const now = Date.now();\n const entry = rates.get(ip);\n\n if (!entry || now > entry.resetAt) {\n rates.set(ip, { count: 1, resetAt: now + 3600_000 });\n if (rates.size > 5000) rates.clear();\n return false;\n }\n\n entry.count += 1;\n return entry.count > RATE_LIMIT;\n}\n\n/** Shared brain. Both WhatsApp and the website come through here. */\nasync function ask(sessionId: string, text: string): Promise {\n const past = history.get(sessionId) ?? [];\n\n const abort = new AbortController();\n const timer = setTimeout(() => abort.abort(), CLAUDE_TIMEOUT_MS);\n\n let res: Response;\n try {\n res = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n signal: abort.signal,\n headers: {\n \"content-type\": \"application/json\",\n \"x-api-key\": env(\"ANTHROPIC_API_KEY\"),\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: MODEL,\n max_tokens: MAX_TOKENS,\n system: [\n {\n type: \"text\",\n text: SYSTEM_PROMPT,\n cache_control: { type: \"ephemeral\" },\n },\n ],\n messages: [...past, { role: \"user\", content: text }],\n }),\n });\n } catch (err) {\n console.error(\"Claude request failed:\", err);\n return \"Sorry, having a technical moment. Try again in a minute?\";\n } finally {\n clearTimeout(timer);\n }\n\n if (!res.ok) {\n console.error(\"Claude:\", res.status, await res.text());\n return \"Sorry, having a technical moment. Try again in a minute?\";\n }\n\n const data = await res.json();\n const answer = (data?.content ?? []).map((c: any) => c?.text ?? \"\").join(\"\")\n .trim();\n if (!answer) return \"Sorry, I didn't catch that. Could you rephrase?\";\n\n past.push({ role: \"user\", content: text });\n past.push({ role: \"assistant\", content: answer });\n history.set(sessionId, past.slice(-MAX_HISTORY));\n\n if (history.size > MAX_CUSTOMERS) {\n const oldest = history.keys().next().value;\n if (oldest) history.delete(oldest);\n }\n\n return answer;\n}\n\nasync function sendWhatsApp(to: string, text: string) {\n const res = await fetch(\n `https://graph.facebook.com/v21.0/${env(\"PHONE_NUMBER_ID\")}/messages`,\n {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n authorization: `Bearer ${env(\"WHATSAPP_TOKEN\")}`,\n },\n body: JSON.stringify({\n messaging_product: \"whatsapp\",\n to,\n type: \"text\",\n text: { body: text.slice(0, 4000) },\n }),\n },\n );\n if (!res.ok) console.error(\"WhatsApp send:\", res.status, await res.text());\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const origin = req.headers.get(\"origin\");\n\n // ---- TEMPORARY TEST ROUTE ---------------------------------------\n // Open /test to see which variables are set.\n // Open /test?to=92XXXXXXXXXX to also send yourself a WhatsApp.\n // Delete this whole block once everything works.\n if (url.pathname === \"/test\") {\n const out: Record = {\n ANTHROPIC_API_KEY: Deno.env.get(\"ANTHROPIC_API_KEY\") ? \"set\" : \"MISSING\",\n WHATSAPP_TOKEN: Deno.env.get(\"WHATSAPP_TOKEN\") ? \"set\" : \"MISSING\",\n PHONE_NUMBER_ID: Deno.env.get(\"PHONE_NUMBER_ID\") ? \"set\" : \"MISSING\",\n VERIFY_TOKEN: `hardcoded as \"${VERIFY_TOKEN}\"`,\n };\n\n try {\n out.claude = await ask(\"test:selfcheck\", \"Say: working\");\n } catch (err) {\n out.claude = `FAILED — ${err}`;\n }\n\n const to = url.searchParams.get(\"to\");\n if (to) {\n try {\n await sendWhatsApp(to, \"Test from your bookshop bot.\");\n out.whatsapp = \"sent — check your phone\";\n } catch (err) {\n out.whatsapp = `FAILED — ${err}`;\n }\n } else {\n out.whatsapp = \"add ?to=92XXXXXXXXXX to test sending\";\n }\n\n return Response.json(out);\n }\n // ---- END TEST ROUTE ---------------------------------------------\n\n // ---- ONE-TIME FIX: force Meta to bind this webhook to your WhatsApp\n // account. Meta's dashboard toggle often verifies the URL without\n // actually subscribing the app to message events. Open /bind once.\n if (url.pathname === \"/bind\") {\n const WABA_ID = \"1045634534767303\";\n const token = Deno.env.get(\"WHATSAPP_TOKEN\") ?? \"\";\n\n const post = await fetch(\n `https://graph.facebook.com/v21.0/${WABA_ID}/subscribed_apps`,\n { method: \"POST\", headers: { authorization: `Bearer ${token}` } },\n );\n const bindResult = await post.text();\n\n const get = await fetch(\n `https://graph.facebook.com/v21.0/${WABA_ID}/subscribed_apps`,\n { headers: { authorization: `Bearer ${token}` } },\n );\n\n return new Response(\n `BIND: ${bindResult}\\n\\nSUBSCRIBED APPS: ${await get.text()}`,\n { headers: { \"content-type\": \"text/plain\" } },\n );\n }\n\n // Browsers ask for this automatically; answering quietly keeps the logs\n // readable instead of filling them with 403s.\n if (url.pathname === \"/favicon.ico\") {\n return new Response(null, { status: 204 });\n }\n\n // ---------------------------------------------------- widget script\n if (url.pathname === \"/widget.js\") {\n return new Response(WIDGET_JS.replace(\"__API__\", url.origin + \"/chat\"), {\n headers: {\n \"content-type\": \"application/javascript\",\n \"cache-control\": \"public, max-age=300\",\n },\n });\n }\n\n // ------------------------------------------------------ website chat\n if (url.pathname === \"/chat\") {\n if (req.method === \"OPTIONS\") {\n return new Response(null, { headers: corsHeaders(origin) });\n }\n\n const ip = req.headers.get(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ??\n \"unknown\";\n if (rateLimited(ip)) {\n return Response.json(\n {\n reply:\n \"You've sent a lot of messages. Try again later, or pop into the shop.\",\n },\n { headers: corsHeaders(origin) },\n );\n }\n\n const body = await req.json().catch(() => null);\n const text = String(body?.message ?? \"\").slice(0, 1000).trim();\n const session = String(body?.session ?? \"\").slice(0, 64) || `web:${ip}`;\n\n if (!text) {\n return Response.json({ reply: \"Say something and I'll help.\" }, {\n headers: corsHeaders(origin),\n });\n }\n\n const reply = await ask(`web:${session}`, text);\n return Response.json({ reply }, { headers: corsHeaders(origin) });\n }\n\n // --------------------------------------------------- whatsapp webhook\n if (req.method === \"GET\") {\n // Hardcoded on purpose. This is not a secret — it only proves to Meta\n // that the URL belongs to you. Keeping it here removes any chance of a\n // whitespace or capitalisation mismatch with an environment variable.\n // Type this exact string into Meta's \"Verify token\" box.\n if (url.searchParams.get(\"hub.verify_token\") === VERIFY_TOKEN) {\n return new Response(url.searchParams.get(\"hub.challenge\") ?? \"\");\n }\n // Not Meta — probably you, opening the URL in a browser.\n if (!url.searchParams.has(\"hub.verify_token\")) {\n return new Response(\n \"Bookshop bot is running. This URL is the WhatsApp webhook.\\n\" +\n \"Visit /test to check your keys.\",\n { headers: { \"content-type\": \"text/plain\" } },\n );\n }\n return new Response(\"Forbidden\", { status: 403 });\n }\n\n const body = await req.json().catch(() => null);\n const messages = body?.entry?.[0]?.changes?.[0]?.value?.messages ?? [];\n\n for (const msg of messages) {\n if (!msg?.id || seen.has(msg.id)) continue;\n seen.add(msg.id);\n if (seen.size > 1000) seen.clear();\n\n try {\n if (msg.type === \"text\" && msg.text?.body) {\n await sendWhatsApp(\n msg.from,\n await ask(`wa:${msg.from}`, msg.text.body),\n );\n } else {\n await sendWhatsApp(\n msg.from,\n \"Sorry, I can only read text messages. What are you after?\",\n );\n }\n } catch (err) {\n console.error(\"handling failed:\", err);\n }\n }\n\n return new Response(\"OK\");\n}\n\n/* ============================================================\n The widget. Plain JS, no framework, injected into the page.\n ============================================================ */\n\nconst WIDGET_JS = `(function () {\n var API = \"__API__\";\n var session = Math.random().toString(36).slice(2);\n var open = false;\n\n var css = document.createElement(\"style\");\n css.textContent = [\n \".bb-btn{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;\",\n \"background:#1c1c1e;color:#fff;border:none;cursor:pointer;font-size:24px;z-index:99998;\",\n \"box-shadow:0 4px 16px rgba(0,0,0,.25)}\",\n \".bb-panel{position:fixed;bottom:88px;right:20px;width:340px;max-width:calc(100vw - 40px);\",\n \"height:460px;max-height:calc(100vh - 120px);background:#fff;border-radius:14px;display:none;\",\n \"flex-direction:column;overflow:hidden;z-index:99999;box-shadow:0 8px 32px rgba(0,0,0,.2);\",\n \"font-family:system-ui,-apple-system,sans-serif}\",\n \".bb-panel.open{display:flex}\",\n \".bb-head{padding:14px 16px;background:#1c1c1e;color:#fff;font-weight:600;font-size:15px}\",\n \".bb-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}\",\n \".bb-msg{max-width:80%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45}\",\n \".bb-them{background:#f1f1f3;color:#111;align-self:flex-start}\",\n \".bb-you{background:#1c1c1e;color:#fff;align-self:flex-end}\",\n \".bb-foot{display:flex;border-top:1px solid #e8e8ea;padding:8px}\",\n \".bb-in{flex:1;border:none;outline:none;padding:9px;font-size:14px;font-family:inherit}\",\n \".bb-send{border:none;background:none;color:#1c1c1e;font-weight:600;cursor:pointer;padding:0 10px}\"\n ].join(\"\");\n document.head.appendChild(css);\n\n var btn = document.createElement(\"button\");\n btn.className = \"bb-btn\";\n btn.innerHTML = \"💬\";\n btn.setAttribute(\"aria-label\", \"Chat about books\");\n\n var panel = document.createElement(\"div\");\n panel.className = \"bb-panel\";\n panel.innerHTML = [\n '

Ask about books

',\n '

',\n '',\n '',\n '

'\n ].join(\"\");\n\n document.body.appendChild(btn);\n document.body.appendChild(panel);\n\n var log = panel.querySelector(\".bb-log\");\n var input = panel.querySelector(\".bb-in\");\n var send = panel.querySelector(\".bb-send\");\n\n function add(text, who) {\n var el = document.createElement(\"div\");\n el.className = \"bb-msg \" + (who === \"you\" ? \"bb-you\" : \"bb-them\");\n el.textContent = text;\n log.appendChild(el);\n log.scrollTop = log.scrollHeight;\n return el;\n }\n\n btn.onclick = function () {\n open = !open;\n panel.classList.toggle(\"open\", open);\n if (open) {\n if (!log.children.length) add(\"Hi. What kind of book are you after?\", \"them\");\n input.focus();\n }\n };\n\n function submit() {\n var text = input.value.trim();\n if (!text) return;\n input.value = \"\";\n add(text, \"you\");\n var pending = add(\"...\", \"them\");\n\n fetch(API, {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ message: text, session: session })\n })\n .then(function (r) { return r.json(); })\n .then(function (d) { pending.textContent = d.reply || \"Sorry, try again.\"; })\n .catch(function () { pending.textContent = \"Connection problem. Try again.\"; });\n }\n\n send.onclick = submit;\n input.onkeydown = function (e) { if (e.key === \"Enter\") submit(); };\n})();`;","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1788809554799],"children",[],[35],"54cc38cb-3501-44e9-a50b-1cda32309ae7",["D",1788809302512],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","47eaf13b-b72f-4418-ae2f-ebe9fff309ae","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0783d-81e8-754f-ad5a-c8c2fb0c005f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Rayan Bhatti","avatar","https://lh3.googleusercontent.com/a/ACg8ocLHYtPrlNBVkdnNY7c7Sp49jHoTN9_El-TKpOlHxwIPQn6Saw=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":149,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":150,"_95":151,"_97":152,"_99":53},[146],"files",[146],"counts",{"_136":77,"_137":138,"_139":77,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":135},[35],"pulls","branches",1,"forks",{"_143":77,"_145":77},"connections",{"_143":77,"_144":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":147,"_18":148},[],[35],["D",1788809302512],{"_11":12,"_115":111},{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_131":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":77,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"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