[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","ramyharoon","name","openai-gateway","path","public/app.ts","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":47,"_53":47,"_54":55,"_56":-5,"_57":58,"_59":60,"_61":34,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/ramyharoon/openai-gateway/code/public/app.ts","extension","id","2c10089c-e000-44b1-9f5e-0e106eef04b1","app.ts","fileId","0d200346-a6ea-11f1-bb4a-1607ee4eb77e","parentId","18048284-fd8c-4305-8780-d65116878ca7","branchId","7bdd8960-6221-4505-900d-d05422b73b8d","branchVersion",17,"latest",true,"createdAt",["D",1788366386984],"version",4,"fileType","script","content","/**\n * public/app.ts — client-side UI for the OpenAI-compatible gateway.\n * Served (transpiled) by main.ts via serveFile.\n */\nimport { marked } from \"https://esm.sh/marked@14.1.3\";\nimport hljs from \"https://esm.sh/highlight.js@11.10.0\";\n\nmarked.setOptions({ gfm: true, breaks: true });\n\ntype Msg = { role: string; content: string };\n\nconst state = {\n apiKey: \"\",\n baseUrl: \"\",\n model: \"gpt-5.4-nano\",\n messages: [] as Msg[],\n controller: null as AbortController | null,\n busy: false,\n t0: 0,\n usage: { prompt: 0, completion: 0 } as { prompt: number; completion: number },\n};\n\nconst $ = (s: string): HTMLElement => document.querySelector(s) as HTMLElement;\nconst $$ = (s: string): NodeListOf => document.querySelectorAll(s);\n\nfunction est(s: string): number {\n if (!s) return 0;\n return Math.max(1, Math.ceil(s.length / 3));\n}\nfunction scrollBottom(el: HTMLElement) {\n el.scrollTop = el.scrollHeight;\n}\nasync function copy(text: string) {\n try {\n await navigator.clipboard.writeText(text);\n } catch {\n const ta = document.createElement(\"textarea\");\n ta.value = text;\n document.body.appendChild(ta);\n ta.select();\n document.execCommand(\"copy\");\n ta.remove();\n }\n}\n\n// ---- Boot -----------------------------------------------------------------\nasync function init() {\n await loadConfig();\n fillSnippets();\n wire();\n renderMessages();\n updateMetrics();\n setInterval(checkHealth, 8000);\n}\n\nasync function loadConfig() {\n state.baseUrl = location.origin + \"/api/provider/v1\";\n try {\n const r = await fetch(\"/api/provider/config\");\n const c = await r.json();\n state.apiKey = c.apiKey || \"\";\n state.model = c.model || \"gpt-5.4-nano\";\n $(\"#key-display\").textContent = (c.maskedKey || state.apiKey);\n $(\"#key-display\").dataset.full = state.apiKey;\n $(\"#key-display\").dataset.masked = c.maskedKey || state.apiKey;\n $(\"#base-url\").textContent = state.baseUrl;\n $(\"#model-display\").textContent = state.model;\n const sel = $(\"#model\") as HTMLSelectElement;\n sel.value = state.model;\n if (!sel.value) {\n const opt = document.createElement(\"option\");\n opt.value = state.model;\n opt.textContent = state.model;\n opt.selected = true;\n sel.insertBefore(opt, sel.firstChild);\n }\n const eff = $(\"#effort\") as HTMLSelectElement;\n if (eff && !eff.value) eff.value = \"medium\";\n } catch (e) {\n $(\"#key-display\").textContent = \"غير متاح\";\n $(\"#base-url\").textContent = state.baseUrl;\n }\n}\n\nfunction fillSnippets() {\n const rep: Record = {\n \"{BASE_URL}\": state.baseUrl,\n \"{KEY}\": state.apiKey,\n \"{MODEL}\": state.model,\n };\n $$(\".pane code\").forEach((el) => {\n let t = el.textContent || \"\";\n for (const k in rep) t = t.split(k).join(rep[k]);\n el.textContent = t;\n });\n}\n\nasync function checkHealth() {\n const badge = $(\"#status-badge\");\n const label = $(\"#status-label\");\n try {\n const r = await fetch(state.baseUrl + \"/models\");\n if (r.ok) {\n badge.className = \"status-badge status-ok\";\n label.textContent = \"المزوّد متصل\";\n } else throw new Error(\"bad\");\n } catch {\n badge.className = \"status-badge status-bad\";\n label.textContent = \"غير متصل\";\n }\n}\n\n// ---- Rendering -------------------------------------------------------------\nfunction renderMessages() {\n const box = $(\"#messages\");\n box.innerHTML = \"\";\n box.appendChild(welcomeMsg());\n for (const m of state.messages) {\n box.appendChild(msgNode(m.role, m.content, false));\n }\n scrollBottom(box);\n}\n\nfunction welcomeMsg(): HTMLElement {\n const div = document.createElement(\"div\");\n div.className = \"msg msg-assistant\";\n div.innerHTML =\n `

🤖

مرحباً! أنا مشغّل عبر البوابة المتوافقة مع OpenAI، والمحرّك الداخلي هو Val Town. جرّب سؤالاً من الأسئلة المقترحة 👇

`;\n return div;\n}\n\nfunction msgNode(role: string, content: string, caret: boolean): HTMLElement {\n const wrap = document.createElement(\"div\");\n wrap.className = \"msg \" + (role === \"user\" ? \"msg-user\" : \"msg-assistant\");\n const avatar = document.createElement(\"div\");\n avatar.className = \"avatar\";\n avatar.textContent = role === \"user\" ? \"🧑\" : \"🤖\";\n const bubble = document.createElement(\"div\");\n bubble.className = \"bubble\";\n wrap.append(avatar, bubble);\n paint(bubble, content, caret);\n return wrap;\n}\n\nfunction paint(bubble: HTMLElement, md: string, caret: boolean) {\n const html = marked.parse(md || \"…\") as string;\n bubble.innerHTML = html + (caret ? '▍' : \"\");\n enhance(bubble);\n}\n\nfunction enhance(container: HTMLElement) {\n container.querySelectorAll(\"pre > code\").forEach((code) => {\n try {\n hljs.highlightElement(code as HTMLElement, { ignoreUnescaped: true });\n } catch { /* keep plain */ }\n const pre = code.parentElement as HTMLElement;\n const btn = document.createElement(\"button\");\n btn.className = \"copy-btn\";\n btn.textContent = \"نسخ\";\n btn.addEventListener(\"click\", async () => {\n await copy((code as HTMLElement).innerText);\n btn.textContent = \"✓\";\n setTimeout(() => (btn.textContent = \"نسخ\"), 1200);\n });\n pre.appendChild(btn);\n });\n}\n\n// ---- Send / stream ----------------------------------------------------------\nfunction addAssistantBubble(): HTMLElement {\n const box = $(\"#messages\");\n const n = msgNode(\"assistant\", \"\", false);\n box.appendChild(n);\n scrollBottom(box);\n return n.querySelector(\".bubble\") as HTMLElement;\n}\n\nasync function send(prompt?: string) {\n if (state.busy) return;\n const input = $(\"#input\") as HTMLTextAreaElement;\n const text = (prompt ?? input.value.trim()).trim();\n if (!text) return;\n input.value = \"\";\n state.messages.push({ role: \"user\", content: text });\n state.usage = { prompt: 0, completion: 0 };\n renderMessages();\n\n const sys = ($(\"#sys-prompt\") as HTMLTextAreaElement).value.trim();\n const temp = parseFloat(($(\"#temperature\") as HTMLInputElement).value);\n const maxTok = parseInt(($(\"#max-tokens\") as HTMLInputElement).value, 10) || 2048;\n const model = ($(\"#model\") as HTMLSelectElement).value || state.model;\n const effort = ($(\"#effort\") as HTMLSelectElement).value;\n\n const messages: Msg[] = [\n ...(sys ? [{ role: \"system\", content: sys }] : []),\n ...state.messages,\n ];\n const body: Record = {\n model,\n messages,\n temperature: Number.isFinite(temp) ? temp : 0.7,\n max_tokens: maxTok,\n stream: true,\n };\n // Pass reasoning effort for thinking models when the user chooses one.\n if (effort) {\n body.reasoning_effort = effort;\n body.effort = effort;\n }\n\n state.controller = new AbortController();\n state.busy = true;\n state.t0 = performance.now();\n const stopBtn = $(\"#stop-btn\");\n ( $(\"#send-btn\") as HTMLButtonElement ).style.display = \"none\";\n stopBtn.classList.remove(\"hidden\");\n\n const bubble = addAssistantBubble();\n let out = \"\";\n let failed = false;\n\n try {\n const res = await fetch(state.baseUrl + \"/chat/completions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", Authorization: `Bearer ${state.apiKey}` },\n body: JSON.stringify(body),\n signal: state.controller.signal,\n });\n if (!res.ok || !res.body) {\n const errText = await res.text().catch(() => \"\");\n failed = true;\n out = `**خطأ (${res.status})**\\n\\n\\`\\`\\`\\n${(errText || res.statusText || \"فشل الطلب\").slice(0, 2000)}\\n\\`\\`\\``;\n paint(bubble, out, false);\n } else {\n const reader = res.body.getReader();\n const dec = new TextDecoder();\n let buf = \"\";\n for (;;) {\n const { done, value } = await reader.read();\n if (done) break;\n buf += dec.decode(value, { stream: true });\n let idx: number;\n while ((idx = buf.indexOf(\"\\n\")) >= 0) {\n const line = buf.slice(0, idx).trim();\n buf = buf.slice(idx + 1);\n if (!line.startsWith(\"data:\")) continue;\n const data = line.slice(5).trim();\n if (data === \"[DONE]\") continue;\n try {\n const json = JSON.parse(data);\n if (json.error) {\n failed = true;\n out = `**خطأ من المحرك:** ${json.error.message || \"\"}`;\n paint(bubble, out, false);\n continue;\n }\n const delta = json.choices?.[0]?.delta?.content;\n if (typeof delta === \"string\") {\n out += delta;\n paint(bubble, out, true);\n }\n if (json.usage) state.usage = json.usage;\n } catch { /* partial/keepalive */ }\n }\n }\n // final paint (no caret)\n const finalNode = bubble;\n const html = marked.parse(out || \"(لا مخرجات)\") as string;\n finalNode.innerHTML = html;\n enhance(finalNode);\n }\n } catch (e) {\n const err = e as Error;\n if (err.name !== \"AbortError\") {\n failed = true;\n out = (out || \"\") + `\\n\\n**خطأ:** ${err.message || \"تعذّر الاتصال\"}`;\n }\n paint(bubble, out || \"(أوقفت الإرسال)\", false);\n } finally {\n state.messages.push({ role: \"assistant\", content: out });\n state.busy = false;\n state.controller = null;\n ( $(\"#send-btn\") as HTMLButtonElement ).style.display = \"\";\n stopBtn.classList.add(\"hidden\");\n state.usage.completion = state.usage.completion || est(out);\n updateMetrics();\n addLog(model, failed, maxTok, state.messages.length);\n renderMessages();\n }\n}\n\nfunction stop() {\n state.controller?.abort();\n}\n\n// ---- Activity + metrics ------------------------------------------------------\nfunction updateMetrics() {\n let prompt = 0;\n let completion = 0;\n for (const m of state.messages) {\n if (m.role === \"assistant\") completion += est(m.content);\n else prompt += est(m.content);\n }\n $(\"#m-prompt\").textContent = \"التحفيز: \" + prompt;\n $(\"#m-completion\").textContent = \"الإخراج: \" + completion;\n $(\"#m-total\").textContent = \"الإجمالي: \" + (prompt + completion);\n const ms = Math.round(performance.now() - state.t0);\n $(\"#m-time\").textContent = ms >= 0 && state.busy === false && state.messages.length > 0\n ? `${ms.toLocaleString(\"ar\")} ms`\n : \"—\";\n}\n\nfunction addLog(model: string, failed: boolean, maxTok: number, n: number) {\n const box = $(\"#activity\");\n const empty = box.querySelector(\".empty\");\n if (empty) empty.remove();\n const item = document.createElement(\"div\");\n item.className = \"log-item\";\n const now = new Date();\n item.innerHTML =\n `

${failed ? \"✖ فشل\" : \"✓ نجاح\"}${model}

` +\n `

SSE stream • max ${maxTok} tok • ${n} رسالة • ${now.toLocaleTimeString(\"ar\")}

`;\n box.prepend(item);\n while (box.children.length > 8) box.lastElementChild?.remove();\n}\n\n// ---- Export & save ------------------------------------------------------------\nfunction buildExport(fmt: string): string {\n const md = state.messages.map((m) => `**${m.role}:**\\n${m.content}`).join(\"\\n\\n---\\n\\n\");\n if (fmt === \"md\") return `# محادثة بوابة OpenAI\\n\\n${md}`;\n if (fmt === \"csv\") {\n const lines = [[\"role\", \"content\"].join(\"\")];\n return state.messages.map((m) => `${m.role},\"${m.content.replace(/\"/g, '\"\"').replace(/\\n/g, \" \")}\"`).join(\"\\n\");\n }\n if (fmt === \"curl\") {\n const msgs = JSON.stringify(state.messages.map((m) => ({ role: m.role, content: m.content })));\n return `curl ${state.baseUrl}/chat/completions -H \"Authorization: Bearer ${state.apiKey}\" -H \"Content-Type: application/json\" -d '{\"model\":\"${state.model}\",\"stream\":true,\"messages\":${msgs}}'`;\n }\n return md;\n}\n\nfunction download(name: string, content: string, type: string) {\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(new Blob([content], { type }));\n a.download = name;\n a.click();\n URL.revokeObjectURL(a.href);\n}\n\nfunction saveChat() {\n if (!state.messages.length) return;\n const key = \"saved-chats-\" + location.pathname;\n let list: string[] = [];\n try { list = JSON.parse(localStorage.getItem(key) || \"[]\"); } catch { list = []; }\n const title = (state.messages[0]?.content || \"محادثة\").slice(0, 30);\n list.unshift(JSON.stringify({ title, messages: state.messages }));\n list = list.slice(0, 8);\n localStorage.setItem(key, JSON.stringify(list));\n renderSaved();\n}\n\nfunction renderSaved() {\n const bar = $(\"#saved-bar\");\n bar.innerHTML = \"\";\n const key = \"saved-chats-\" + location.pathname;\n let list: string[] = [];\n try { list = JSON.parse(localStorage.getItem(key) || \"[]\"); } catch { list = []; }\n list.forEach((raw, i) => {\n let t = `محادثة ${i + 1}`;\n try { t = JSON.parse(raw).title as string; } catch { /* ignore */ }\n const b = document.createElement(\"button\");\n b.className = \"chip saved-chip\";\n b.textContent = \"💾 \" + t + \" ⤴\";\n b.addEventListener(\"click\", () => {\n try {\n state.messages = JSON.parse(raw).messages as Msg[];\n renderMessages();\n updateMetrics();\n } catch { /* ignore */ }\n });\n bar.appendChild(b);\n });\n}\n\n// ---- Wiring ----------------------------------------------------------------\nfunction wire() {\n $(\"#theme-toggle\").addEventListener(\"click\", () => {\n const cur = document.documentElement.getAttribute(\"data-theme\");\n const next = cur === \"dark\" ? \"light\" : \"dark\";\n document.documentElement.setAttribute(\"data-theme\", next);\n ($(\"#theme-toggle\") as HTMLButtonElement).textContent = next === \"dark\" ? \"☀️\" : \"🌙\";\n try { localStorage.setItem(\"theme\", next); } catch { /* ignore */ }\n });\n const savedTheme = (() => { try { return localStorage.getItem(\"theme\"); } catch { return null; } })();\n if (savedTheme) {\n document.documentElement.setAttribute(\"data-theme\", savedTheme);\n ($(\"#theme-toggle\") as HTMLButtonElement).textContent = savedTheme === \"dark\" ? \"☀️\" : \"🌙\";\n }\n\n $(\"#send-btn\").addEventListener(\"click\", () => send());\n $(\"#stop-btn\").addEventListener(\"click\", stop);\n const input = $(\"#input\") as HTMLTextAreaElement;\n input.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n send();\n }\n });\n\n $$(\".preset\").forEach((btn) =>\n btn.addEventListener(\"click\", () => send((btn as HTMLButtonElement).dataset.p)));\n\n $(\"#reveal-key\").addEventListener(\"click\", () => {\n const el = $(\"#key-display\");\n const full = el.dataset.full || \"\";\n el.textContent = el.textContent === full ? (el.dataset.masked || full) : full;\n });\n $(\"#copy-key\").addEventListener(\"click\", () => copy(state.apiKey));\n $(\"#copy-url\").addEventListener(\"click\", () => copy(state.baseUrl));\n $(\"#copy-model\").addEventListener(\"click\", () => copy(state.model));\n\n $(\"#save-chat\").addEventListener(\"click\", saveChat);\n renderSaved();\n\n $(\"#export-btn\").addEventListener(\"click\", (e) => {\n e.stopPropagation();\n const m = $(\"#export-menu\");\n m.classList.toggle(\"hidden\");\n });\n document.addEventListener(\"click\", () => $(\"#export-menu\").classList.add(\"hidden\"));\n $$(\"#export-menu button\").forEach((b) =>\n b.addEventListener(\"click\", () => {\n const fmt = (b as HTMLButtonElement).dataset.fmt || \"md\";\n const content = buildExport(fmt);\n download(`chat.${fmt === \"md\" ? \"md\" : fmt === \"csv\" ? \"csv\" : \"sh\"}`, content, \"text/plain\");\n $(\"#export-menu\").classList.add(\"hidden\");\n }));\n\n $$(\".tab\").forEach((t) =>\n t.addEventListener(\"click\", () => {\n $$(\".tab\").forEach((x) => x.classList.remove(\"active\"));\n t.classList.add(\"active\");\n const id = (t as HTMLButtonElement).dataset.t || \"\";\n $$(\".pane\").forEach((p) => p.classList.toggle(\"hidden\", p.id !== id));\n }));\n\n $$(\".conn-row\").forEach(() => { /* noop */ });\n}\n\ninit();\n","deleted",false,"label",[47,24],"public","c5347651-cad0-468b-999b-ff32cc6090ac",["D",1788365801329],"deletedAt","legacyEnvVars","privacy","httpPrivacy","description","OpenAI-compatible gateway on Val Town native AI, no keys needed","imageUrl","userId","eddd5cb5-78be-4114-98c9-70030a02faea","pinnedFileId","aeb5b076-a6e9-11f1-8b7e-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a062e4-8477-75ba-8a1d-30b57d9fb298","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_98":99,"_100":101,"_57":58,"_102":103,"_104":44},"branch",{"_37":88,"_11":89,"_22":30,"_90":48,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned",47,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","ramy haroon","avatar","https://lh3.googleusercontent.com/a/ACg8ocLJ5VsuqFGypcgPz5AldEDau-BsilRB9eIzAaaz2tVM1ucp3w=s96-c","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_81":-5,"_139":140,"_141":142,"_143":144,"_145":44,"_146":44,"_147":44,"_148":34,"_149":-5,"_150":-7,"_151":-7,"_152":65,"_153":44,"_154":44,"_155":-5,"_156":44,"_157":44,"_158":44,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":89,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"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"]