[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_211":212,"_213":214},"routes/_app.x.$handle.$name",{"_106":105,"_38":52,"_115":96,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":-5,"_128":-5,"_129":31,"_130":131,"_132":65,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",7,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","2e717954-564d-46f3-b7b1-19e22d06f2ab","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","6352efb8-623d-11f1-8461-1607ee4eb77e","name","index.ts","fileType","http","content","import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst GEMINI_KEY = Deno.env.get(\"GEMINI_API_KEY\");\nconst MODEL = \"gemini-2.0-flash\";\n\n// ---- DB setup ----\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages_v1 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n`);\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\nasync function getHistory(sessionId: string, limit = 30) {\n const r = await sqlite.execute({\n sql: \"SELECT role, content FROM messages_v1 WHERE session_id = ? ORDER BY id DESC LIMIT ?\",\n args: [sessionId, limit],\n });\n return r.rows.reverse().map((row: any) => ({\n role: row.role as string,\n content: row.content as string,\n }));\n}\n\nasync function saveMessage(sessionId: string, role: string, content: string) {\n await sqlite.execute({\n sql: \"INSERT INTO messages_v1 (session_id, role, content) VALUES (?, ?, ?)\",\n args: [sessionId, role, content],\n });\n}\n\nasync function callGemini(history: { role: string; content: string }[], imageBase64?: string, imageMime?: string) {\n if (!GEMINI_KEY) {\n return \"⚠️ Chưa cấu hình GEMINI_API_KEY. Hãy thêm khóa API Google Gemini trong phần Environment Variables.\";\n }\n\n const contents = history.map((m) => ({\n role: m.role === \"assistant\" ? \"model\" : \"user\",\n parts: [{ text: m.content && m.content.length ? m.content : \" \" }] as any[],\n }));\n\n // Đính kèm ảnh vào tin nhắn cuối cùng của người dùng (nếu có)\n if (imageBase64 && imageBase64.length > 0 && contents.length > 0) {\n // Loại bỏ tiền tố data URL nếu lỡ truyền vào (vd: \"data:image/png;base64,....\")\n const cleanBase64 = imageBase64.includes(\",\") ? imageBase64.split(\",\").pop()! : imageBase64;\n const last = contents[contents.length - 1];\n last.parts.push({\n inlineData: { mimeType: imageMime || \"image/jpeg\", data: cleanBase64 },\n });\n }\n\n const res = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent?key=${GEMINI_KEY}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n contents,\n systemInstruction: {\n parts: [{\n text: \"Bạn là một trợ lý AI thông minh, thân thiện, trả lời bằng tiếng Việt rõ ràng và hữu ích. Bạn có thể phân tích ảnh người dùng gửi.\",\n }],\n },\n }),\n },\n );\n\n if (!res.ok) {\n const err = await res.text();\n return `⚠️ Lỗi từ Gemini API (${res.status}): ${err.slice(0, 300)}`;\n }\n\n const data = await res.json();\n return data?.candidates?.[0]?.content?.parts?.map((p: any) => p.text).join(\"\") ?? \"(Không có phản hồi)\";\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // ---- API: gửi tin nhắn ----\n if (path === \"/api/chat\" && req.method === \"POST\") {\n try {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n const message = (body.message || \"\").trim();\n const imageBase64 = body.imageBase64;\n const imageMime = body.imageMime;\n\n if (!message && !imageBase64) return json({ error: \"Tin nhắn trống\" }, 400);\n\n await saveMessage(sessionId, \"user\", message || \"[Đã gửi một hình ảnh]\");\n const history = await getHistory(sessionId);\n const reply = await callGemini(history, imageBase64, imageMime);\n await saveMessage(sessionId, \"assistant\", reply);\n\n return json({ reply });\n } catch (e) {\n return json({ error: String(e) }, 500);\n }\n }\n\n // ---- API: lấy lịch sử ----\n if (path === \"/api/history\" && req.method === \"GET\") {\n const sessionId = url.searchParams.get(\"sessionId\") || \"default\";\n const history = await getHistory(sessionId, 100);\n return json({ history });\n }\n\n // ---- API: xóa lịch sử ----\n if (path === \"/api/clear\" && req.method === \"POST\") {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n await sqlite.execute({\n sql: \"DELETE FROM messages_v1 WHERE session_id = ?\",\n args: [sessionId],\n });\n return json({ ok: true });\n }\n\n // ---- Static frontend ----\n if (path === \"/\" || path === \"/index.html\") {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n if (path === \"/app.js\") {\n return serveFile(\"/frontend/app.js\", import.meta.url);\n }\n if (path === \"/style.css\") {\n return serveFile(\"/frontend/style.css\", import.meta.url);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n","import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst GEMINI_KEY = Deno.env.get(\"GEMINI_API_KEY\");\nconst MODEL = \"gemini-2.0-flash-lite\";\n\n// ---- DB setup ----\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages_v1 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n`);\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\nasync function getHistory(sessionId: string, limit = 30) {\n const r = await sqlite.execute({\n sql: \"SELECT role, content FROM messages_v1 WHERE session_id = ? ORDER BY id DESC LIMIT ?\",\n args: [sessionId, limit],\n });\n return r.rows.reverse().map((row: any) => ({\n role: row.role as string,\n content: row.content as string,\n }));\n}\n\nasync function saveMessage(sessionId: string, role: string, content: string) {\n await sqlite.execute({\n sql: \"INSERT INTO messages_v1 (session_id, role, content) VALUES (?, ?, ?)\",\n args: [sessionId, role, content],\n });\n}\n\nasync function callGemini(history: { role: string; content: string }[], imageBase64?: string, imageMime?: string) {\n if (!GEMINI_KEY) {\n return \"⚠️ Chưa cấu hình GEMINI_API_KEY. Hãy thêm khóa API Google Gemini trong phần Environment Variables.\";\n }\n\n const contents = history.map((m) => ({\n role: m.role === \"assistant\" ? \"model\" : \"user\",\n parts: [{ text: m.content && m.content.length ? m.content : \" \" }] as any[],\n }));\n\n // Đính kèm ảnh vào tin nhắn cuối cùng của người dùng (nếu có)\n if (imageBase64 && imageBase64.length > 0 && contents.length > 0) {\n // Loại bỏ tiền tố data URL nếu lỡ truyền vào (vd: \"data:image/png;base64,....\")\n const cleanBase64 = imageBase64.includes(\",\") ? imageBase64.split(\",\").pop()! : imageBase64;\n const last = contents[contents.length - 1];\n last.parts.push({\n inlineData: { mimeType: imageMime || \"image/jpeg\", data: cleanBase64 },\n });\n }\n\n const res = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/${MODEL}:generateContent?key=${GEMINI_KEY}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n contents,\n systemInstruction: {\n parts: [{\n text: \"Bạn là một trợ lý AI thông minh, thân thiện, trả lời bằng tiếng Việt rõ ràng và hữu ích. Bạn có thể phân tích ảnh người dùng gửi.\",\n }],\n },\n }),\n },\n );\n\n if (!res.ok) {\n const err = await res.text();\n return `⚠️ Lỗi từ Gemini API (${res.status}): ${err.slice(0, 300)}`;\n }\n\n const data = await res.json();\n return data?.candidates?.[0]?.content?.parts?.map((p: any) => p.text).join(\"\") ?? \"(Không có phản hồi)\";\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // ---- API: gửi tin nhắn ----\n if (path === \"/api/chat\" && req.method === \"POST\") {\n try {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n const message = (body.message || \"\").trim();\n const imageBase64 = body.imageBase64;\n const imageMime = body.imageMime;\n\n if (!message && !imageBase64) return json({ error: \"Tin nhắn trống\" }, 400);\n\n await saveMessage(sessionId, \"user\", message || \"[Đã gửi một hình ảnh]\");\n const history = await getHistory(sessionId);\n const reply = await callGemini(history, imageBase64, imageMime);\n await saveMessage(sessionId, \"assistant\", reply);\n\n return json({ reply });\n } catch (e) {\n return json({ error: String(e) }, 500);\n }\n }\n\n // ---- API: lấy lịch sử ----\n if (path === \"/api/history\" && req.method === \"GET\") {\n const sessionId = url.searchParams.get(\"sessionId\") || \"default\";\n const history = await getHistory(sessionId, 100);\n return json({ history });\n }\n\n // ---- API: xóa lịch sử ----\n if (path === \"/api/clear\" && req.method === \"POST\") {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n await sqlite.execute({\n sql: \"DELETE FROM messages_v1 WHERE session_id = ?\",\n args: [sessionId],\n });\n return json({ ok: true });\n }\n\n // ---- Static frontend ----\n if (path === \"/\" || path === \"/index.html\") {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n if (path === \"/app.js\") {\n return serveFile(\"/frontend/app.js\", import.meta.url);\n }\n if (path === \"/style.css\") {\n return serveFile(\"/frontend/style.css\", import.meta.url);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}\n","createdAt",["D",1780815550939],"branchVersion","branchId","00e099f3-1bc3-4c38-808c-760ba7db532b","id","f768a52c-c9cd-4df0-9e6a-7be2be1d159a","chatbot-ai",["D",1780815098832],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI chatbot dùng Google Gemini, giao diện đẹp, lưu lịch sử chat","imageUrl","9db02490-4cd5-437c-b593-535cda7a17e0","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ea0d9-142c-70ac-b3f1-84eb261a9da7","tursoName","f768a52cc9cd4df09e6a7be2be1d159a","tursoHostname","f768a52cc9cd4df09e6a7be2be1d159a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789515055826],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":62,"_111":112,"_113":31},"branch",{"_13":95,"_38":96,"_50":49,"_97":51,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":52,"_104":105},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","thanhtho","handle","displayName","Thanh Thảo","avatar","https://lh3.googleusercontent.com/a/ACg8ocKCmyO0iDA4VEBkHYA0vLAFtu_jjptM3tjHNFR7-9eo8ZP2teY=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":206,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":37,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":207,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":208,"_90":209,"_92":210,"_94":31},"tree",[165,167],"files",[165,166,167,168,169,170],"counts",{"_155":69,"_156":152,"_157":69,"_158":159,"_160":161},"contents",[137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":149,"_38":150,"_36":151,"_142":-5,"_48":49,"_47":152,"_144":65,"_45":153,"_13":69,"_40":146,"_42":-5,"_30":31,"_147":-5,"_33":154},{"_50":139,"_38":140,"_36":141,"_142":-5,"_48":49,"_47":143,"_144":65,"_45":145,"_13":69,"_40":146,"_42":-5,"_30":31,"_147":-5,"_33":148},"789493f0-86a6-4bc3-b853-0c148591f17f","frontend","a709f8fa-3505-479f-b5bf-88debd6bfa06","parentId",2,"latest",["D",1780815134987],"directory","label",[140],"1e7879f6-88f9-4163-ad24-b3a1aacf9687","backend","0529a446-7a84-44a6-ba19-2889fc3b67a5",1,["D",1780815122395],[150],"pulls","branches","forks","envVars",{"_162":152,"_164":69},"connections",{"_162":69,"_163":69},"count","unfilledCount","emptyCount",{"_50":149,"_38":150,"_36":151,"_142":-5,"_48":49,"_47":152,"_144":65,"_45":203,"_13":69,"_40":146,"_42":-5,"_30":31,"_147":-5,"_177":204,"_33":205},{"_50":199,"_38":39,"_36":37,"_142":151,"_48":49,"_47":14,"_144":31,"_45":200,"_13":174,"_40":41,"_42":44,"_30":31,"_147":-5,"_177":201,"_33":202},{"_50":139,"_38":140,"_36":141,"_142":-5,"_48":49,"_47":143,"_144":65,"_45":196,"_13":69,"_40":146,"_42":-5,"_30":31,"_147":-5,"_177":197,"_33":198},{"_50":187,"_38":188,"_36":189,"_142":141,"_48":49,"_47":190,"_144":65,"_45":191,"_13":69,"_40":192,"_42":193,"_30":31,"_147":-5,"_177":194,"_33":195},{"_50":180,"_38":181,"_36":182,"_142":141,"_48":49,"_47":143,"_144":65,"_45":183,"_13":69,"_40":26,"_42":184,"_30":31,"_147":-5,"_177":185,"_33":186},{"_50":171,"_38":172,"_36":173,"_142":141,"_48":49,"_47":174,"_144":65,"_45":175,"_13":69,"_40":26,"_42":176,"_30":31,"_147":-5,"_177":178,"_33":179},"d70a658b-cc12-4ed1-85aa-b93188b190e6","style.css","76ef502a-623d-11f1-a294-1607ee4eb77e",3,["D",1780815155300],":root {\n --bg: #0b0f1a;\n --panel: #131a2a;\n --panel-2: #1b2436;\n --accent: #6d8bff;\n --accent-2: #a06bff;\n --text: #e7ecf5;\n --muted: #8b96ad;\n --user: linear-gradient(135deg, #6d8bff, #a06bff);\n --border: #232c41;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: \"Inter\", system-ui, sans-serif;\n background: radial-gradient(1200px 600px at 70% -10%, #1d2540 0%, var(--bg) 55%);\n color: var(--text);\n height: 100vh;\n overflow: hidden;\n}\n\n.app {\n max-width: 860px;\n margin: 0 auto;\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--border);\n backdrop-filter: blur(8px);\n}\n\n.brand {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 700;\n font-size: 18px;\n}\n.logo { font-size: 22px; }\n\n.ghost-btn {\n background: var(--panel-2);\n color: var(--text);\n border: 1px solid var(--border);\n padding: 8px 14px;\n border-radius: 10px;\n cursor: pointer;\n font-size: 14px;\n transition: 0.2s;\n}\n.ghost-btn:hover { background: #2a3550; }\n\n.messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px 20px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n}\n\n.welcome {\n margin: auto;\n text-align: center;\n max-width: 520px;\n}\n.welcome h1 { font-size: 32px; margin-bottom: 10px; }\n.welcome p { color: var(--muted); margin-bottom: 24px; }\n.suggestions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }\n.chip {\n background: var(--panel);\n border: 1px solid var(--border);\n color: var(--text);\n padding: 10px 16px;\n border-radius: 999px;\n cursor: pointer;\n font-size: 14px;\n transition: 0.2s;\n}\n.chip:hover { border-color: var(--accent); transform: translateY(-2px); }\n\n.msg {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: fade 0.3s ease;\n}\n@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }\n\n.msg .avatar {\n width: 36px; height: 36px; border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px; flex-shrink: 0;\n}\n.msg.user { flex-direction: row-reverse; }\n.msg.user .avatar { background: var(--user); }\n.msg.assistant .avatar { background: var(--panel-2); border: 1px solid var(--border); }\n\n.bubble {\n padding: 12px 16px;\n border-radius: 16px;\n line-height: 1.6;\n white-space: pre-wrap;\n word-wrap: break-word;\n max-width: 78%;\n}\n.msg.user .bubble { background: var(--user); color: #fff; border-bottom-right-radius: 4px; }\n.msg.assistant .bubble { background: var(--panel); border: 1px solid var(--border); border-bottom-left-radius: 4px; }\n.bubble img { max-width: 220px; border-radius: 10px; margin-top: 8px; display: block; }\n\n.typing { display: inline-flex; gap: 4px; }\n.typing span {\n width: 8px; height: 8px; border-radius: 50%; background: var(--muted);\n animation: blink 1.2s infinite both;\n}\n.typing span:nth-child(2) { animation-delay: 0.2s; }\n.typing span:nth-child(3) { animation-delay: 0.4s; }\n@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }\n\n.composer {\n padding: 14px 20px 18px;\n border-top: 1px solid var(--border);\n}\n.image-preview {\n position: relative;\n display: inline-block;\n margin-bottom: 10px;\n}\n.image-preview img { max-height: 80px; border-radius: 10px; }\n.image-preview button {\n position: absolute; top: -8px; right: -8px;\n background: #ff5470; color: #fff; border: none;\n width: 22px; height: 22px; border-radius: 50%; cursor: pointer;\n}\n.hidden { display: none !important; }\n\n.input-row {\n display: flex;\n align-items: flex-end;\n gap: 10px;\n background: var(--panel);\n border: 1px solid var(--border);\n border-radius: 18px;\n padding: 8px 10px;\n}\n.input-row:focus-within { border-color: var(--accent); }\n\n.attach-btn {\n cursor: pointer; font-size: 20px;\n padding: 6px; border-radius: 10px; transition: 0.2s;\n}\n.attach-btn:hover { background: var(--panel-2); }\n\n#input {\n flex: 1;\n background: transparent;\n border: none;\n color: var(--text);\n font-size: 15px;\n resize: none;\n outline: none;\n max-height: 160px;\n font-family: inherit;\n padding: 8px 4px;\n}\n\n.send-btn {\n background: var(--user);\n border: none;\n color: #fff;\n width: 42px; height: 42px;\n border-radius: 12px;\n cursor: pointer;\n font-size: 18px;\n transition: 0.2s;\n}\n.send-btn:hover { transform: scale(1.05); }\n.send-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n.hint { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }\n\n::-webkit-scrollbar { width: 8px; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }\n","children",[],[140,172],"9fa51718-602d-40b8-90e1-e8caa2c9136a","index.html","6ad46258-623d-11f1-a294-1607ee4eb77e",["D",1780815134987],"\n\n\n \n \n AI Chatbot ✨\n \n \n \n\n\n

\n \n\n

Xin chào 👋

Mình là trợ lý AI. Hỏi mình bất cứ điều gì, hoặc gửi ảnh để mình phân tích nhé!

\n \n \n \n

\n\n \n

\n\n \n\n\n",[],[140,181],"72ee8431-5cab-443b-befb-62de211a485b","app.js","81269882-623d-11f1-8f6a-1607ee4eb77e",4,["D",1780815172441],"script","const messagesEl = document.getElementById(\"messages\");\nconst inputEl = document.getElementById(\"input\");\nconst sendBtn = document.getElementById(\"sendBtn\");\nconst clearBtn = document.getElementById(\"clearBtn\");\nconst imageInput = document.getElementById(\"imageInput\");\nconst imagePreview = document.getElementById(\"imagePreview\");\nconst previewImg = document.getElementById(\"previewImg\");\nconst removeImg = document.getElementById(\"removeImg\");\n\n// Mỗi trình duyệt có 1 session riêng (lưu trong localStorage)\nlet sessionId = localStorage.getItem(\"sessionId\");\nif (!sessionId) {\n sessionId = \"s_\" + Math.random().toString(36).slice(2) + Date.now().toString(36);\n localStorage.setItem(\"sessionId\", sessionId);\n}\n\nlet pendingImage = null; // { base64, mime }\n\nfunction clearWelcome() {\n const w = messagesEl.querySelector(\".welcome\");\n if (w) w.remove();\n}\n\nfunction addMessage(role, content, imageDataUrl) {\n clearWelcome();\n const msg = document.createElement(\"div\");\n msg.className = `msg ${role}`;\n\n const avatar = document.createElement(\"div\");\n avatar.className = \"avatar\";\n avatar.textContent = role === \"user\" ? \"🧑\" : \"🤖\";\n\n const bubble = document.createElement(\"div\");\n bubble.className = \"bubble\";\n bubble.textContent = content;\n if (imageDataUrl) {\n const img = document.createElement(\"img\");\n img.src = imageDataUrl;\n bubble.appendChild(img);\n }\n\n msg.appendChild(avatar);\n msg.appendChild(bubble);\n messagesEl.appendChild(msg);\n messagesEl.scrollTop = messagesEl.scrollHeight;\n return bubble;\n}\n\nfunction addTyping() {\n clearWelcome();\n const msg = document.createElement(\"div\");\n msg.className = \"msg assistant\";\n msg.id = \"typing-msg\";\n msg.innerHTML = `

🤖

`;\n messagesEl.appendChild(msg);\n messagesEl.scrollTop = messagesEl.scrollHeight;\n}\nfunction removeTyping() {\n document.getElementById(\"typing-msg\")?.remove();\n}\n\nasync function loadHistory() {\n try {\n const res = await fetch(`/api/history?sessionId=${sessionId}`);\n const data = await res.json();\n if (data.history && data.history.length) {\n data.history.forEach((m) => addMessage(m.role, m.content));\n }\n } catch (e) { console.error(e); }\n}\n\nasync function send() {\n const text = inputEl.value.trim();\n if (!text && !pendingImage) return;\n\n const imgDataUrl = pendingImage ? `data:${pendingImage.mime};base64,${pendingImage.base64}` : null;\n addMessage(\"user\", text || \"[Hình ảnh]\", imgDataUrl);\n\n inputEl.value = \"\";\n inputEl.style.height = \"auto\";\n sendBtn.disabled = true;\n\n const payload = { sessionId, message: text };\n if (pendingImage) {\n payload.imageBase64 = pendingImage.base64;\n payload.imageMime = pendingImage.mime;\n }\n clearImage();\n\n addTyping();\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n const data = await res.json();\n removeTyping();\n addMessage(\"assistant\", data.reply || data.error || \"Có lỗi xảy ra.\");\n } catch (e) {\n removeTyping();\n addMessage(\"assistant\", \"⚠️ Không kết nối được máy chủ: \" + e);\n }\n sendBtn.disabled = false;\n}\n\nfunction clearImage() {\n pendingImage = null;\n imageInput.value = \"\";\n imagePreview.classList.add(\"hidden\");\n}\n\nimageInput.addEventListener(\"change\", () => {\n const file = imageInput.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n const dataUrl = reader.result;\n const base64 = dataUrl.split(\",\")[1];\n pendingImage = { base64, mime: file.type };\n previewImg.src = dataUrl;\n imagePreview.classList.remove(\"hidden\");\n };\n reader.readAsDataURL(file);\n});\nremoveImg.addEventListener(\"click\", clearImage);\n\nsendBtn.addEventListener(\"click\", send);\ninputEl.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n send();\n }\n});\ninputEl.addEventListener(\"input\", () => {\n inputEl.style.height = \"auto\";\n inputEl.style.height = Math.min(inputEl.scrollHeight, 160) + \"px\";\n});\n\nclearBtn.addEventListener(\"click\", async () => {\n if (!confirm(\"Xóa toàn bộ cuộc trò chuyện?\")) return;\n await fetch(\"/api/clear\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ sessionId }),\n });\n messagesEl.innerHTML = \"\";\n location.reload();\n});\n\ndocument.querySelectorAll(\".chip\").forEach((chip) => {\n chip.addEventListener(\"click\", () => {\n inputEl.value = chip.dataset.q;\n send();\n });\n});\n\nloadHistory();\n",[],[140,188],["D",1780815134987],[168,169,170],[140],"6f2334c9-5195-4ea8-b2d6-585ad9f462fd",["D",1780815550939],[],[150,39],["D",1780815122395],[166],[150],["D",1780815098832],["D",1789515055826],{"_106":105,"_114":110},{"_106":105,"_107":108,"_109":110,"_19":62,"_111":112,"_113":31},{"_13":95,"_38":96,"_50":49,"_97":51,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":52,"_104":105},"ctx",{"_88":-5,"_134":244,"_245":246,"_247":248,"_249":31,"_250":31,"_251":31,"_252":65,"_253":-5,"_254":-7,"_255":-7,"_256":69,"_257":31,"_258":31,"_259":-5,"_260":31,"_261":31,"_262":31,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":96,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"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"]

Diff · v7