[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","diegoravecca","name","faq-chatbot","path","main.ts","project",{"_22":46,"_11":12,"_33":47,"_48":-5,"_49":42,"_50":51,"_52":51,"_53":54,"_55":-5,"_56":57,"_58":25,"_59":32,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_13":45},"permalink","https://www.val.town/x/diegoravecca/faq-chatbot/code/main.ts","extension","id","20316d5a-17fe-4811-9ede-32184d9a1687","fileId","3dc18bf4-ae16-11f1-b07b-1607ee4eb77e","parentId","branchId","73555ffa-82f1-460d-966b-d6fe95aff5be","branchVersion",46,"latest",true,"createdAt",["D",1789230173942],"version",21,"fileType","http","content","// FAQ Chatbot — session-based: new visitors pick a personality, then chat.\nimport {\n loadFaq,\n llmAnswer,\n addMessage,\n getMessages,\n clearMessages,\n getSession,\n setSession,\n generateGreeting,\n PERSONALITIES,\n DEFAULT_PERSONALITY,\n} from \"./lib.ts\";\n\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { renderToStaticMarkup } from \"https://esm.sh/react-dom@18.2.0/server\";\n\nconst SESSION_COOKIE = \"faq_session\";\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const faq = await loadFaq();\n\n const sessionId = getCookie(req.headers.get(\"cookie\") ?? \"\", SESSION_COOKIE);\n const session = sessionId ? await getSession(sessionId) : null;\n\n // POST /api/chat → receive { text }, answer with the session's personality\n if (url.pathname === \"/api/chat\" && req.method === \"POST\") {\n if (!session) {\n return json({ error: \"no_session\" }, 401);\n }\n const body = await req.json().catch(() => ({}));\n const text = (body.text ?? \"\").toString().trim();\n const { text: reply } = await llmAnswer(text, faq, session.personality);\n await addMessage(session.convo, \"user\", text);\n await addMessage(session.convo, \"bot\", reply);\n const history = await getMessages(session.convo);\n return json({ reply, history });\n }\n\n // POST /api/clear → wipe the conversation\n if (url.pathname === \"/api/clear\" && req.method === \"POST\") {\n if (session) await clearMessages(session.convo);\n return json({});\n }\n\n // GET /choose?personality=X → bind session + redirect to the chat\n if (url.pathname === \"/choose\") {\n const personality = url.searchParams.get(\"personality\") ?? DEFAULT_PERSONALITY;\n const id = sessionId ?? crypto.randomUUID();\n await setSession(id, personality, id); // convo = session id\n // Start a fresh conversation with a greeting generated from the current FAQ.\n await clearMessages(id);\n await addMessage(id, \"bot\", await generateGreeting(personality, faq));\n return redirectWithCookie(\"/\", id);\n }\n\n // GET \"/\" → show personality picker (new user) or the chat (existing session)\n if (!session) {\n return new Response(buildChoosePage(), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n const history = await getMessages(session.convo);\n return new Response(buildChatPage(history, session.personality), {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n\n// ---------- Personality chooser (new users) ----------\nfunction buildChoosePage(): string {\n const buttons = Object.entries(PERSONALITIES).map(\n ([key, p]) =>\n `\n ${emojiOf(p.name)}\n ${escapeHtml(p.name)}\n `,\n ).join(\"\");\n\n return `\n\n\n \n \n FAQ Chatbot\n \n\n\n

🤖 Elegí con quién hablar

Un compañero distinto, una respuesta distinta.

${buttons}

\n ⚠️ Aviso: las respuestas se basan en material informativo proporcionado y pueden\n contener errores u omisiones; consultá siempre las fuentes oficiales.\n Los personajes son ficticios; cualquier parecido con la realidad es mera coincidencia.\n Esta página usa cookies para recordar tu personalidad elegida y tu conversación.\n

\n\n`;\n}\n\nfunction emojiOf(name: string): string {\n // Grab the trailing emoji cluster from names like \"Delegada 😠\" or \"Profe 👩🏫\".\n const m = name.match(/[\\p{Extended_Pictographic}](?:\\u{200D}[\\p{Extended_Pictographic}])*[\\u{FE0F}]?$/u);\n return m ? m[0] : \"🙂\";\n}\n\n// ---------- Chat (returning users) ----------\nfunction buildChatPage(\n history: { role: string; text: string; created_at: number }[],\n personality: string,\n): string {\n const personas = Object.entries(PERSONALITIES).map(([key, p]) =>\n ``,\n ).join(\"\");\n\n const bubbles = history\n .map((m) => {\n const side = m.role === \"user\" ? \"user\" : \"bot\";\n const when = new Date(Number(m.created_at)).toLocaleTimeString(\"es-AR\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n return `

${escapeHtml(m.text)}${when}

`;\n })\n .join(\"\");\n\n const page = renderToStaticMarkup(\n React.createElement(\n \"html\",\n null,\n React.createElement(\"head\", null,\n React.createElement(\"meta\", { charSet: \"utf-8\" }),\n React.createElement(\"title\", null, \"FAQ Chatbot\"),\n React.createElement(\"meta\", { name: \"viewport\", content: \"width=device-width, initial-scale=1\" }),\n React.createElement(\"style\", null, CHAT_CSS),\n ),\n React.createElement(\"body\", null,\n React.createElement(\"div\", { id: \"app\" },\n React.createElement(\"header\", null,\n React.createElement(\"h1\", null, \"🤖 FAQ Chatbot\"),\n React.createElement(\"select\", { id: \"personality\", dangerouslySetInnerHTML: { __html: personas } }),\n React.createElement(\"button\", { id: \"clear\", className: \"clear\" }, \"🧹\"),\n ),\n React.createElement(\"div\", { id: \"messages\", dangerouslySetInnerHTML: { __html: bubbles } }),\n React.createElement(\"div\", { id: \"inputbar\" },\n React.createElement(\"input\", { id: \"input\", placeholder: \"Escribí tu pregunta…\", autocomplete: \"off\" }),\n React.createElement(\"button\", { id: \"send\" }, \"➤\"),\n ),\n ),\n React.createElement(\"script\", {\n dangerouslySetInnerHTML: {\n __html: \"window.__config = { history: \" + JSON.stringify(history) + \" };\",\n },\n }),\n React.createElement(\"script\", { dangerouslySetInnerHTML: { __html: CLIENT_JS } }),\n ),\n ),\n );\n\n return \"\\n\" + page;\n}\n\n// ---------- helpers ----------\nfunction getCookie(header: string, name: string): string | null {\n for (const part of header.split(\";\")) {\n const eq = part.indexOf(\"=\");\n if (eq === -1) continue;\n const k = part.slice(0, eq).trim();\n if (k === name) return decodeURIComponent(part.slice(eq + 1).trim());\n }\n return null;\n}\n\nfunction redirectWithCookie(path: string, sessionId: string): Response {\n const res = new Response(null, { status: 302, headers: { location: path } });\n res.headers.set(\n \"Set-Cookie\",\n `${SESSION_COOKIE}=${encodeURIComponent(sessionId)}; Path=/; HttpOnly; SameSite=Lax; Max-Age=2592000`,\n );\n return res;\n}\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"content-type\": \"application/json\" },\n });\n}\n\nfunction escapeHtml(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nconst CHAT_CSS = `\n * { box-sizing: border-box; }\n body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #e5ddd5; }\n #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 720px; margin: 0 auto; background: #efe7dd; border-left: 1px solid #d5cdc5; border-right: 1px solid #d5cdc5; }\n header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #075e54; color: #fff; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }\n header h1 { font-size: 17px; flex: 1; margin: 0; }\n header select { padding: 6px 8px; border-radius: 6px; border: none; font-size: 14px; }\n header .clear { background: rgba(255,255,255,.2); color: #fff; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 15px; }\n #messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 4px; }\n .row { display: flex; width: 100%; }\n .row.user { justify-content: flex-end; }\n .row.bot { justify-content: flex-start; }\n .bubble { max-width: 78%; padding: 8px 12px; border-radius: 10px; font-size: 15px; line-height: 1.4; position: relative; box-shadow: 0 1px 1px rgba(0,0,0,.08); white-space: pre-wrap; }\n .bubble.user { background: #dcf8c6; border-bottom-right-radius: 2px; }\n .bubble.bot { background: #fff; border-bottom-left-radius: 2px; }\n .bubble .time { float: right; margin-left: 8px; margin-top: 6px; font-size: 11px; color: #999; }\n .bubble.typing { padding: 14px 18px; }\n .bubble.typing span { display: inline-block; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: #999; animation: typing 1.2s infinite ease-in-out; }\n .bubble.typing span:nth-child(2) { animation-delay: .2s; }\n .bubble.typing span:nth-child(3) { animation-delay: .4s; }\n @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }\n #inputbar { display: flex; gap: 8px; padding: 10px 14px; background: #f0f0f0; border-top: 1px solid #ddd; }\n #inputbar input { flex: 1; padding: 12px 14px; font-size: 16px; border: none; border-radius: 24px; outline: none; background: #fff; }\n #inputbar button { width: 46px; height: 46px; border-radius: 50%; border: none; background: #075e54; color: #fff; font-size: 18px; cursor: pointer; }\n`;\n\nconst CLIENT_JS = `\n const history = window.__config.history || [];\n const messages = document.getElementById(\"messages\");\n const input = document.getElementById(\"input\");\n const send = document.getElementById(\"send\");\n const clearBtn = document.getElementById(\"clear\");\n const persona = document.getElementById(\"personality\");\n\n function scrollBottom() { messages.scrollTop = messages.scrollHeight; }\n\n function bubbleHTML(m) {\n const side = m.role === \"user\" ? \"user\" : \"bot\";\n const when = new Date(Number(m.created_at)).toLocaleTimeString(\"es-AR\", { hour: \"2-digit\", minute: \"2-digit\" });\n return '

' + esc(m.text) + '' + when + '

';\n }\n\n function render(hist) {\n messages.innerHTML = (hist || []).map(bubbleHTML).join(\"\");\n scrollBottom();\n }\n\n function showTyping() {\n messages.insertAdjacentHTML(\"beforeend\",\n '

');\n scrollBottom();\n }\n\n function esc(s) {\n return (s || \"\").replace(/&/g, \"&\").replace(//g, \">\");\n }\n\n async function sendMessage() {\n const text = input.value.trim();\n if (!text) return;\n input.value = \"\";\n render((window.__hist || []).concat([{ role: \"user\", text: text, created_at: Date.now() }]));\n showTyping();\n const res = await fetch(\"/api/chat\", { method: \"POST\", headers: { \"content-type\": \"application/json\" }, body: JSON.stringify({ text }) });\n const data = await res.json();\n window.__hist = data.history;\n render(data.history);\n }\n\n send.addEventListener(\"click\", sendMessage);\n input.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\") sendMessage(); });\n // Changing personality updates the session cookie, then clears the visible chat.\n persona.addEventListener(\"change\", () => {\n window.location.href = \"/choose?personality=\" + persona.value;\n });\n clearBtn.addEventListener(\"click\", async () => {\n await fetch(\"/api/clear\", { method: \"POST\" });\n window.__hist = [];\n render([]);\n });\n\n window.__hist = history;\n render(history);\n`;\n","deleted",false,"label","primeroprimera",[14],"fa71ddb1-4d13-45e3-a4b2-9fb14ebe52e9",["D",1789154591216],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","FAQ chatbot reading from a Google Sheet CSV","imageUrl","userId","19ccde2f-c4b0-46a6-82af-561e6df89055","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a091ea-ed57-7183-b991-f2c54fa7bd7e","tursoName","fa71ddb14d1345e3a4b29fb14ebe52e9","tursoHostname","fa71ddb14d1345e3a4b29fb14ebe52e9-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789503703835],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_106":102},"org",{"_9":10,"_99":100,"_101":102,"_56":57,"_103":104,"_105":42},"branch",{"_35":89,"_11":90,"_22":28,"_91":46,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",49,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Diego Ravecca","avatar","https://lh3.googleusercontent.com/a/ACg8ocJdEvC5DSZOpC-To6ZUw6Oc_ZfdazqGtQfI9BhzAz_txuHSM_Sw=s96-c","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_140":141,"_142":143,"_144":145,"_146":42,"_147":42,"_148":42,"_149":32,"_150":-5,"_151":-7,"_152":-7,"_153":63,"_154":42,"_155":42,"_156":-5,"_157":42,"_158":42,"_159":42,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":90,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]