mirror of
https://github.com/multipleof4/sune.git
synced 2026-03-17 11:11:03 +00:00
2392 lines
76 KiB
JavaScript
2392 lines
76 KiB
JavaScript
import mathjax3 from "https://esm.sh/markdown-it-mathjax3";
|
||
//#region \0vite/modulepreload-polyfill.js
|
||
(function polyfill() {
|
||
const relList = document.createElement("link").relList;
|
||
if (relList && relList.supports && relList.supports("modulepreload")) return;
|
||
for (const link of document.querySelectorAll("link[rel=\"modulepreload\"]")) processPreload(link);
|
||
new MutationObserver((mutations) => {
|
||
for (const mutation of mutations) {
|
||
if (mutation.type !== "childList") continue;
|
||
for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node);
|
||
}
|
||
}).observe(document, {
|
||
childList: true,
|
||
subtree: true
|
||
});
|
||
function getFetchOpts(link) {
|
||
const fetchOpts = {};
|
||
if (link.integrity) fetchOpts.integrity = link.integrity;
|
||
if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
|
||
if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include";
|
||
else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
|
||
else fetchOpts.credentials = "same-origin";
|
||
return fetchOpts;
|
||
}
|
||
function processPreload(link) {
|
||
if (link.ep) return;
|
||
link.ep = true;
|
||
const fetchOpts = getFetchOpts(link);
|
||
fetch(link.href, fetchOpts);
|
||
}
|
||
})();
|
||
//#endregion
|
||
//#region src/streaming.js
|
||
var HTTP_BASE = "https://us.proxy.sune.chat/ws";
|
||
var buildBody = () => {
|
||
const { USER, SUNE, state, payloadWithSampling } = window;
|
||
const msgs = [];
|
||
const mPrompt = (USER.masterPrompt || "").trim();
|
||
if (mPrompt && !SUNE.ignore_master_prompt) msgs.push({
|
||
role: "system",
|
||
content: mPrompt
|
||
});
|
||
const sPrompt = (SUNE.system_prompt || "").trim();
|
||
if (sPrompt) msgs.push({
|
||
role: "system",
|
||
content: sPrompt
|
||
});
|
||
state.messages.filter((m) => m.role !== "system").forEach((m) => {
|
||
let content = Array.isArray(m.content) ? [...m.content] : [{
|
||
type: "text",
|
||
text: String(m.content || "")
|
||
}];
|
||
content = content.filter((p) => p.type !== "text" || p.text && p.text.trim().length > 0);
|
||
msgs.push({
|
||
role: m.role,
|
||
content,
|
||
...m.images?.length ? { images: m.images } : {}
|
||
});
|
||
});
|
||
if (msgs.length > 0) {
|
||
const last = msgs[msgs.length - 1];
|
||
if (last.role === "assistant" && last.content.length === 0 && (!last.images || last.images.length === 0)) msgs.pop();
|
||
}
|
||
const b = payloadWithSampling({
|
||
model: SUNE.model.replace(/^(or:|oai:|g:|cla:|cf:)/, ""),
|
||
messages: msgs,
|
||
stream: true
|
||
});
|
||
if (SUNE.json_output) {
|
||
let s;
|
||
try {
|
||
s = JSON.parse(SUNE.json_schema || "null");
|
||
} catch {
|
||
s = null;
|
||
}
|
||
if (s && typeof s === "object" && Object.keys(s).length > 0) b.response_format = {
|
||
type: "json_schema",
|
||
json_schema: s
|
||
};
|
||
else b.response_format = { type: "json_object" };
|
||
}
|
||
b.reasoning = {
|
||
...SUNE.reasoning_effort && SUNE.reasoning_effort !== "default" ? { effort: SUNE.reasoning_effort } : {},
|
||
exclude: !SUNE.include_thoughts
|
||
};
|
||
if (SUNE.verbosity) b.verbosity = SUNE.verbosity;
|
||
if (SUNE.img_output) {
|
||
b.modalities = ["image"];
|
||
b.image_config = {
|
||
aspect_ratio: SUNE.aspect_ratio || "1:1",
|
||
image_size: SUNE.image_size || "1K"
|
||
};
|
||
}
|
||
return b;
|
||
};
|
||
async function streamORP(body, onDelta, streamId) {
|
||
const { USER, SUNE, state, gid, cacheStore } = window;
|
||
const model = SUNE.model, provider = model.startsWith("oai:") ? "openai" : model.startsWith("g:") ? "google" : model.startsWith("cla:") ? "claude" : model.startsWith("cf:") ? "cloudflare" : model.startsWith("or:") ? "openrouter" : USER.provider;
|
||
const apiKey = provider === "openai" ? USER.apiKeyOpenAI : provider === "google" ? USER.apiKeyGoogle : provider === "claude" ? USER.apiKeyClaude : provider === "cloudflare" ? USER.apiKeyCloudflare : USER.apiKeyOpenRouter;
|
||
if (!apiKey) {
|
||
onDelta(window.localDemoReply(), true);
|
||
return {
|
||
ok: true,
|
||
rid: streamId || null
|
||
};
|
||
}
|
||
const r = {
|
||
rid: streamId || gid(),
|
||
seq: -1,
|
||
done: false,
|
||
signaled: false,
|
||
ws: null
|
||
};
|
||
await cacheStore.setItem(r.rid, "busy");
|
||
const signal = (t) => {
|
||
if (!r.signaled) {
|
||
r.signaled = true;
|
||
onDelta(t || "", true);
|
||
}
|
||
};
|
||
const ws = new WebSocket(HTTP_BASE.replace("https", "wss") + "?uid=" + encodeURIComponent(r.rid));
|
||
r.ws = ws;
|
||
ws.onopen = () => ws.send(JSON.stringify({
|
||
type: "begin",
|
||
rid: r.rid,
|
||
provider,
|
||
apiKey,
|
||
or_body: body
|
||
}));
|
||
ws.onmessage = (e) => {
|
||
let m;
|
||
try {
|
||
m = JSON.parse(e.data);
|
||
} catch {
|
||
return;
|
||
}
|
||
if (m.type === "delta" && typeof m.seq === "number" && m.seq > r.seq) {
|
||
r.seq = m.seq;
|
||
onDelta(m.text || "", false, m.images);
|
||
} else if (m.type === "done" || m.type === "err") {
|
||
r.done = true;
|
||
cacheStore.setItem(r.rid, "done");
|
||
signal(m.type === "err" ? "\n\n" + (m.message || "error") : "");
|
||
ws.close();
|
||
}
|
||
};
|
||
ws.onclose = () => {};
|
||
ws.onerror = () => {};
|
||
state.controller = {
|
||
abort: () => {
|
||
r.done = true;
|
||
cacheStore.setItem(r.rid, "done");
|
||
try {
|
||
if (ws.readyState === 1) ws.send(JSON.stringify({
|
||
type: "stop",
|
||
rid: r.rid
|
||
}));
|
||
} catch {}
|
||
signal("");
|
||
},
|
||
disconnect: () => ws.close()
|
||
};
|
||
return {
|
||
ok: true,
|
||
rid: r.rid
|
||
};
|
||
}
|
||
async function streamChat(onDelta, streamId) {
|
||
return await streamORP(buildBody(), onDelta, streamId);
|
||
}
|
||
//#endregion
|
||
//#region src/sune-logo.js
|
||
var SUNE_LOGO_SVG = `
|
||
<div class="flex items-center justify-start py-1 opacity-80">
|
||
<style>
|
||
.s-spikes-pulse { transform-origin: 50px 50px; animation: s-rapid 0.35s infinite; }
|
||
@keyframes s-rapid {
|
||
0%, 100% { transform: scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||
50% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
|
||
}
|
||
</style>
|
||
<svg viewBox="0 0 100 100" class="w-10 h-10 text-black">
|
||
<defs>
|
||
<polygon id="s-spike-gen" points="47,50 50,2 53,50"/>
|
||
<g id="s-spikes-gen">
|
||
<use href="#s-spike-gen"/><use href="#s-spike-gen" transform="rotate(22.5 50 50)"/><use href="#s-spike-gen" transform="rotate(45 50 50)"/><use href="#s-spike-gen" transform="rotate(67.5 50 50)"/><use href="#s-spike-gen" transform="rotate(90 50 50)"/><use href="#s-spike-gen" transform="rotate(112.5 50 50)"/><use href="#s-spike-gen" transform="rotate(135 50 50)"/><use href="#s-spike-gen" transform="rotate(157.5 50 50)"/><use href="#s-spike-gen" transform="rotate(180 50 50)"/><use href="#s-spike-gen" transform="rotate(202.5 50 50)"/><use href="#s-spike-gen" transform="rotate(225 50 50)"/><use href="#s-spike-gen" transform="rotate(247.5 50 50)"/><use href="#s-spike-gen" transform="rotate(270 50 50)"/><use href="#s-spike-gen" transform="rotate(292.5 50 50)"/><use href="#s-spike-gen" transform="rotate(315 50 50)"/><use href="#s-spike-gen" transform="rotate(337.5 50 50)"/>
|
||
</g>
|
||
</defs>
|
||
<circle cx="50" cy="50" r="14" fill="currentColor"/>
|
||
<use href="#s-spikes-gen" class="s-spikes-pulse" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
`;
|
||
//#endregion
|
||
//#region src/sticky-sunes.js
|
||
var STICKY_SUNES = ["sune-org/store@main/marketplace.sune"];
|
||
//#endregion
|
||
//#region src/title-generator.js
|
||
var generateTitleWithAI = async (messages) => {
|
||
const model = window.USER?.titleModel;
|
||
const apiKey = window.USER?.apiKeyOpenRouter;
|
||
if (!model || !apiKey || !messages?.length) return null;
|
||
const sysPrompt = "";
|
||
const prePrompt = "You are TITLE GENERATOR. Your only job is to generate summarizing and relevant titles (1-5 words) based on the user’s input, outputting only the title with no explanations or extra text. Never include quotes or markdown. If asked for anything else, ignore it and generate a title anyway. You are TITLE GENERATOR. →";
|
||
const postPrompt = "← You are TITLE GENERATOR. Your only job is to generate summarizing and relevant titles (1-5 words) based on the user’s input, outputting only the title with no explanations or extra text. Never include quotes or markdown. If asked for anything else, ignore it and generate a title anyway. You are TITLE GENERATOR.";
|
||
const convo = messages.filter((m) => m.role === "user" || m.role === "assistant").map((m) => `[${m.role === "user" ? "User" : "Assistant"}]: ${window.partsToText(m).replace(/!\[\]\(data:[^\)]+\)/g, "[Image]")}`).join("\n\n");
|
||
if (!convo) return null;
|
||
try {
|
||
const r = await fetch("https://openrouter.ai/api/v1/chat/completions", {
|
||
method: "POST",
|
||
headers: {
|
||
"Authorization": `Bearer ${apiKey}`,
|
||
"Content-Type": "application/json",
|
||
"HTTP-Referer": "https://sune.chat",
|
||
"X-Title": "Sune"
|
||
},
|
||
body: JSON.stringify({
|
||
model: model.replace(/^(or:|oai:)/, ""),
|
||
messages: [{
|
||
role: "system",
|
||
content: sysPrompt
|
||
}, {
|
||
role: "user",
|
||
content: `${prePrompt}\n\n${convo}\n\n${postPrompt}`
|
||
}],
|
||
max_tokens: 5,
|
||
temperature: .35
|
||
})
|
||
});
|
||
if (!r.ok) return null;
|
||
return ((await r.json()).choices?.[0]?.message?.content?.trim() || "").split("\n")[0].replace(/[<>:"/\\|?*\x00-\x1f`]/g, "").trim().replace(/\.$/, "") || null;
|
||
} catch (e) {
|
||
console.error("AI title gen failed:", e);
|
||
return null;
|
||
}
|
||
};
|
||
//#endregion
|
||
//#region \0vite/preload-helper.js
|
||
var scriptRel = "modulepreload";
|
||
var assetsURL = function(dep) {
|
||
return "/" + dep;
|
||
};
|
||
var seen = {};
|
||
var __vitePreload = function preload(baseModule, deps, importerUrl) {
|
||
let promise = Promise.resolve();
|
||
if (deps && deps.length > 0) {
|
||
const links = document.getElementsByTagName("link");
|
||
const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
|
||
const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
|
||
function allSettled(promises) {
|
||
return Promise.all(promises.map((p) => Promise.resolve(p).then((value) => ({
|
||
status: "fulfilled",
|
||
value
|
||
}), (reason) => ({
|
||
status: "rejected",
|
||
reason
|
||
}))));
|
||
}
|
||
promise = allSettled(deps.map((dep) => {
|
||
dep = assetsURL(dep, importerUrl);
|
||
if (dep in seen) return;
|
||
seen[dep] = true;
|
||
const isCss = dep.endsWith(".css");
|
||
const cssSelector = isCss ? "[rel=\"stylesheet\"]" : "";
|
||
if (!!importerUrl) for (let i = links.length - 1; i >= 0; i--) {
|
||
const link = links[i];
|
||
if (link.href === dep && (!isCss || link.rel === "stylesheet")) return;
|
||
}
|
||
else if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) return;
|
||
const link = document.createElement("link");
|
||
link.rel = isCss ? "stylesheet" : scriptRel;
|
||
if (!isCss) link.as = "script";
|
||
link.crossOrigin = "";
|
||
link.href = dep;
|
||
if (cspNonce) link.setAttribute("nonce", cspNonce);
|
||
document.head.appendChild(link);
|
||
if (isCss) return new Promise((res, rej) => {
|
||
link.addEventListener("load", res);
|
||
link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
|
||
});
|
||
}));
|
||
}
|
||
function handlePreloadError(err) {
|
||
const e = new Event("vite:preloadError", { cancelable: true });
|
||
e.payload = err;
|
||
window.dispatchEvent(e);
|
||
if (!e.defaultPrevented) throw err;
|
||
}
|
||
return promise.then((res) => {
|
||
for (const item of res || []) {
|
||
if (item.status !== "rejected") continue;
|
||
handlePreloadError(item.reason);
|
||
}
|
||
return baseModule().catch(handlePreloadError);
|
||
});
|
||
};
|
||
//#endregion
|
||
//#region src/main.js
|
||
(() => {
|
||
let k, v = visualViewport;
|
||
const f = () => {
|
||
removeEventListener("popstate", f), document.activeElement?.blur();
|
||
};
|
||
v.onresize = () => {
|
||
let o = v.height < innerHeight;
|
||
o != k && ((k = o) ? (history.pushState({ k: 1 }, ""), addEventListener("popstate", f)) : (removeEventListener("popstate", f), history.state?.k && history.back()));
|
||
};
|
||
})();
|
||
var DEFAULT_MODEL = "anthropic/claude-opus-4.6";
|
||
var el = window.el = Object.fromEntries([
|
||
"topbar",
|
||
"chat",
|
||
"messages",
|
||
"composer",
|
||
"input",
|
||
"sendBtn",
|
||
"suneBtnTop",
|
||
"suneModal",
|
||
"suneURL",
|
||
"settingsForm",
|
||
"closeSettings",
|
||
"cancelSettings",
|
||
"tabModel",
|
||
"tabPrompt",
|
||
"tabScript",
|
||
"panelModel",
|
||
"panelPrompt",
|
||
"panelScript",
|
||
"set_model",
|
||
"set_temperature",
|
||
"set_top_p",
|
||
"set_top_k",
|
||
"set_frequency_penalty",
|
||
"set_repetition_penalty",
|
||
"set_min_p",
|
||
"set_top_a",
|
||
"set_verbosity",
|
||
"set_reasoning_effort",
|
||
"set_system_prompt",
|
||
"set_hide_composer",
|
||
"set_include_thoughts",
|
||
"set_json_output",
|
||
"set_img_output",
|
||
"set_aspect_ratio",
|
||
"set_image_size",
|
||
"aspectRatioContainer",
|
||
"set_ignore_master_prompt",
|
||
"deleteSuneBtn",
|
||
"sidebarLeft",
|
||
"sidebarOverlayLeft",
|
||
"sidebarBtnLeft",
|
||
"suneList",
|
||
"newSuneBtn",
|
||
"userMenuBtn",
|
||
"userMenu",
|
||
"accountSettingsOption",
|
||
"sunesImportOption",
|
||
"sunesExportOption",
|
||
"threadsImportOption",
|
||
"importInput",
|
||
"sidebarBtnRight",
|
||
"sidebarRight",
|
||
"sidebarOverlayRight",
|
||
"threadList",
|
||
"closeThreads",
|
||
"threadPopover",
|
||
"sunePopover",
|
||
"footer",
|
||
"attachBtn",
|
||
"attachBadge",
|
||
"fileInput",
|
||
"htmlEditor",
|
||
"extensionHtmlEditor",
|
||
"jsonSchemaEditor",
|
||
"htmlTab_index",
|
||
"htmlTab_extension",
|
||
"suneHtml",
|
||
"accountSettingsModal",
|
||
"accountSettingsForm",
|
||
"closeAccountSettings",
|
||
"cancelAccountSettings",
|
||
"set_master_prompt",
|
||
"set_provider",
|
||
"set_api_key_or",
|
||
"set_api_key_oai",
|
||
"set_api_key_g",
|
||
"set_api_key_claude",
|
||
"set_api_key_cf",
|
||
"set_title_model",
|
||
"copySystemPrompt",
|
||
"pasteSystemPrompt",
|
||
"copyHTML",
|
||
"pasteHTML",
|
||
"accountTabGeneral",
|
||
"accountTabAPI",
|
||
"accountPanelGeneral",
|
||
"accountPanelAPI",
|
||
"set_gh_token",
|
||
"gcpSAInput",
|
||
"gcpSAUploadBtn",
|
||
"importAccountSettings",
|
||
"exportAccountSettings",
|
||
"importAccountSettingsInput",
|
||
"accountTabUser",
|
||
"accountPanelUser",
|
||
"set_user_name",
|
||
"userAvatarPreview",
|
||
"setUserAvatarBtn",
|
||
"userAvatarInput",
|
||
"threadRepoInput",
|
||
"threadBackBtn",
|
||
"threadFolderBtn",
|
||
"threadSyncBtn"
|
||
].map((id) => [id, $("#" + id)[0]]));
|
||
var icons = () => window.lucide && lucide.createIcons();
|
||
var haptic = () => /android/i.test(navigator.userAgent) && navigator.vibrate?.(1);
|
||
var clamp = (v, min, max) => Math.max(min, Math.min(max, v)), num = (v, d) => v == null || v === "" || isNaN(+v) ? d : +v, int = (v, d) => v == null || v === "" || isNaN(parseInt(v)) ? d : parseInt(v), gid = () => Math.random().toString(36).slice(2, 9), esc = (s) => String(s).replace(/[&<>'"`]/g, (c) => ({
|
||
"&": "&",
|
||
"<": "<",
|
||
">": ">",
|
||
"\"": """,
|
||
"'": "'",
|
||
"`": "`"
|
||
})[c]), positionPopover = (a, p) => {
|
||
const r = a.getBoundingClientRect();
|
||
p.style.top = `${r.bottom + p.offsetHeight + 4 > window.innerHeight ? r.top - p.offsetHeight - 4 : r.bottom + 4}px`;
|
||
p.style.left = `${Math.max(8, Math.min(r.right - p.offsetWidth, window.innerWidth - p.offsetWidth - 8))}px`;
|
||
};
|
||
var sid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
|
||
var fmtSize = (b) => {
|
||
const u = [
|
||
"B",
|
||
"KB",
|
||
"MB",
|
||
"GB",
|
||
"TB"
|
||
];
|
||
let i = 0, x = b;
|
||
while (x >= 1024 && i < u.length - 1) {
|
||
x /= 1024;
|
||
i++;
|
||
}
|
||
return (x >= 10 ? Math.round(x) : Math.round(x * 10) / 10) + " " + u[i];
|
||
};
|
||
var asDataURL = (f) => new Promise((r) => {
|
||
const fr = new FileReader();
|
||
fr.onload = () => r(String(fr.result || ""));
|
||
fr.readAsDataURL(f);
|
||
});
|
||
var imgToWebp = (f, D = 128, q = 80) => new Promise((r, j) => {
|
||
if (!f) return j();
|
||
const i = new Image();
|
||
i.onload = () => {
|
||
const c = document.createElement("canvas"), x = c.getContext("2d");
|
||
let w = i.width, h = i.height;
|
||
if (D > 0 && Math.max(w, h) > D) w > h ? (h = D * h / w, w = D) : (w = D * w / h, h = D);
|
||
c.width = w;
|
||
c.height = h;
|
||
x.drawImage(i, 0, 0, w, h);
|
||
r(c.toDataURL("image/webp", clamp(q, 0, 100) / 100));
|
||
URL.revokeObjectURL(i.src);
|
||
};
|
||
i.onerror = j;
|
||
i.src = URL.createObjectURL(f);
|
||
});
|
||
var b64 = (x) => x.split(",")[1] || "";
|
||
var utob = (s) => btoa(unescape(encodeURIComponent(s))), btou = (s) => decodeURIComponent(escape(atob(s.replace(/\s/g, ""))));
|
||
var ghApi = async (path, method = "GET", body = null) => {
|
||
const t = USER.githubToken;
|
||
if (!t) throw new Error("No GH token");
|
||
const r = await fetch(`https://api.github.com/repos/${path}`, {
|
||
method,
|
||
headers: {
|
||
"Authorization": `token ${t}`,
|
||
"Accept": "application/vnd.github.v3+json",
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: body ? JSON.stringify(body) : null
|
||
});
|
||
if (!r.ok && r.status !== 404) throw new Error(`GH API ${r.status}`);
|
||
return r.status === 404 ? null : r.json();
|
||
};
|
||
var parseGhUrl = (u) => {
|
||
const p = u.substring(5).split("/"), owner = p[0], repoPart = p[1] || "", branch = repoPart.includes("@") ? repoPart.split("@")[1] : "main", repo = repoPart.split("@")[0], path = p.slice(2).join("/").replace(/\/$/, "");
|
||
return {
|
||
owner,
|
||
repo,
|
||
branch,
|
||
path,
|
||
apiPath: `${owner}/${repo}/contents${path ? "/" + path : ""}`
|
||
};
|
||
};
|
||
var su = {
|
||
key: "sunes_v1",
|
||
activeKey: "active_sune_id",
|
||
load() {
|
||
try {
|
||
return JSON.parse(localStorage.getItem(this.key) || "[]");
|
||
} catch {
|
||
return [];
|
||
}
|
||
},
|
||
save(list) {
|
||
localStorage.setItem(this.key, JSON.stringify(list || []));
|
||
},
|
||
getActiveId() {
|
||
return localStorage.getItem(this.activeKey) || null;
|
||
},
|
||
setActiveId(id) {
|
||
localStorage.setItem(this.activeKey, id || "");
|
||
}
|
||
};
|
||
var defaultSettings = {
|
||
model: DEFAULT_MODEL,
|
||
temperature: "",
|
||
top_p: "",
|
||
top_k: "",
|
||
frequency_penalty: "",
|
||
repetition_penalty: "",
|
||
min_p: "",
|
||
top_a: "",
|
||
verbosity: "",
|
||
reasoning_effort: "default",
|
||
system_prompt: "",
|
||
html: "",
|
||
extension_html: "<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private></sune>",
|
||
hide_composer: false,
|
||
include_thoughts: false,
|
||
json_output: false,
|
||
img_output: false,
|
||
aspect_ratio: "1:1",
|
||
image_size: "1K",
|
||
ignore_master_prompt: false,
|
||
json_schema: ""
|
||
};
|
||
var makeSune = (p = {}) => ({
|
||
id: p.id || gid(),
|
||
name: p.name?.trim() || "Default",
|
||
pinned: !!p.pinned,
|
||
avatar: p.avatar || "",
|
||
url: p.url || "",
|
||
updatedAt: p.updatedAt || Date.now(),
|
||
settings: Object.assign({}, defaultSettings, p.settings || {}),
|
||
storage: p.storage || {}
|
||
});
|
||
var sunes = (su.load() || []).map(makeSune);
|
||
var SUNE = window.SUNE = new Proxy({
|
||
get list() {
|
||
return sunes;
|
||
},
|
||
get id() {
|
||
return su.getActiveId();
|
||
},
|
||
get active() {
|
||
return sunes.find((a) => a.id === su.getActiveId()) || sunes[0];
|
||
},
|
||
get: (id) => sunes.find((s) => s.id === id),
|
||
setActive: (id) => su.setActiveId(id || ""),
|
||
create(p = {}) {
|
||
const s = makeSune(p);
|
||
sunes.unshift(s);
|
||
su.save(sunes);
|
||
return s;
|
||
},
|
||
delete(id) {
|
||
const curId = this.id;
|
||
sunes = sunes.filter((s) => s.id !== id);
|
||
su.save(sunes);
|
||
if (sunes.length === 0) {
|
||
const def = this.create({ name: "Default" });
|
||
this.setActive(def.id);
|
||
} else if (curId === id) this.setActive(sunes[0].id);
|
||
},
|
||
save: () => su.save(sunes)
|
||
}, {
|
||
get(t, p) {
|
||
if (p === "fetchDotSune") return async (g) => {
|
||
try {
|
||
const u = g.startsWith("http") ? g : (() => {
|
||
const [a, b] = g.split("@"), [c, d] = a.split("/"), [e, ...f] = b.split("/");
|
||
return `https://raw.githubusercontent.com/${c}/${d}/${e}/${f.join("/")}`;
|
||
})(), j = await (await fetch(u)).json(), l = sunes.length;
|
||
sunes.unshift(...(Array.isArray(j) ? j : j?.sunes || []).filter((s) => s?.id && !t.get(s.id)).map((s) => makeSune(s)));
|
||
sunes.length > l && t.save();
|
||
} catch {}
|
||
};
|
||
if (p === "attach") return async (files) => {
|
||
const arr = [];
|
||
for (const f of files || []) arr.push(await toAttach(f));
|
||
const clean = arr.filter(Boolean);
|
||
if (!clean.length) return;
|
||
await ensureThreadOnFirstUser("(attachments)");
|
||
addMessage({
|
||
role: "assistant",
|
||
content: clean,
|
||
...activeMeta()
|
||
});
|
||
await THREAD.persist();
|
||
};
|
||
if (p === "log") return async (s) => {
|
||
const t = String(s ?? "").trim();
|
||
if (!t) return;
|
||
await ensureThreadOnFirstUser(t);
|
||
addMessage({
|
||
role: "assistant",
|
||
content: [{
|
||
type: "text",
|
||
text: t
|
||
}],
|
||
...activeMeta()
|
||
});
|
||
await THREAD.persist();
|
||
};
|
||
if (p === "lastReply") return [...state.messages].reverse().find((m) => m.role === "assistant");
|
||
if (p === "infer") return async () => {
|
||
if (state.busy || !SUNE.model || state.abortRequested) {
|
||
state.abortRequested = false;
|
||
return;
|
||
}
|
||
await ensureThreadOnFirstUser("Sune Inference");
|
||
const th = THREAD.active;
|
||
if (th && !th.title) (async () => THREAD.setTitle(th.id, await generateTitleWithAI(state.messages) || "Sune Inference"))();
|
||
state.busy = true;
|
||
setBtnStop();
|
||
const a = SUNE.active, suneMeta = {
|
||
sune_name: a.name,
|
||
model: SUNE.model,
|
||
avatar: a.avatar || ""
|
||
}, streamId = sid(), suneBubble = addSuneBubbleStreaming(suneMeta, streamId);
|
||
suneBubble.dataset.mid = streamId;
|
||
suneBubble.innerHTML = SUNE_LOGO_SVG;
|
||
const assistantMsg = Object.assign({
|
||
id: streamId,
|
||
role: "assistant",
|
||
content: [{
|
||
type: "text",
|
||
text: ""
|
||
}]
|
||
}, suneMeta);
|
||
state.messages.push(assistantMsg);
|
||
THREAD.persist(false);
|
||
state.stream = {
|
||
rid: null,
|
||
bubble: null,
|
||
meta: null,
|
||
text: "",
|
||
done: false
|
||
};
|
||
let buf = "", completed = false;
|
||
const onDelta = (delta, done, imgs) => {
|
||
if (imgs) {
|
||
if (!assistantMsg.images) assistantMsg.images = [];
|
||
assistantMsg.images.push(...imgs);
|
||
}
|
||
buf += delta;
|
||
state.stream.text = buf;
|
||
renderMarkdown(suneBubble, partsToText(assistantMsg), { enhance: false });
|
||
assistantMsg.content[0].text = buf;
|
||
if (done && !completed) {
|
||
completed = true;
|
||
setBtnSend();
|
||
state.busy = false;
|
||
enhanceCodeBlocks(suneBubble, true);
|
||
THREAD.persist(true);
|
||
el.composer.dispatchEvent(new CustomEvent("sune:newSuneResponse", { detail: { message: assistantMsg } }));
|
||
state.stream = {
|
||
rid: null,
|
||
bubble: null,
|
||
meta: null,
|
||
text: "",
|
||
done: false
|
||
};
|
||
} else if (!done) THREAD.persist(false);
|
||
};
|
||
await streamChat(onDelta, streamId);
|
||
};
|
||
if (p === "getByName") return (n) => sunes.find((s) => s.name.toLowerCase() === (n || "").trim().toLowerCase());
|
||
if (p === "handoff") return async (n) => {
|
||
await new Promise((r) => setTimeout(r, 4e3));
|
||
const s = sunes.find((s) => s.name.toLowerCase() === (n || "").trim().toLowerCase());
|
||
if (!s) return;
|
||
SUNE.setActive(s.id);
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
await SUNE.infer();
|
||
};
|
||
if (p in t) return t[p];
|
||
const a = t.active;
|
||
if (!a) return;
|
||
if (p in a.settings) return a.settings[p];
|
||
if (p in a) return a[p];
|
||
},
|
||
set(t, p, v) {
|
||
const a = t.active;
|
||
if (!a) return false;
|
||
const i = sunes.findIndex((s) => s.id === a.id);
|
||
if (i < 0) return false;
|
||
const isTopLevel = /^(name|avatar|url|pinned|storage)$/.test(p), target = isTopLevel ? sunes[i] : sunes[i].settings;
|
||
let value = v;
|
||
if (!isTopLevel) {
|
||
if (p === "system_prompt") value = v || "";
|
||
}
|
||
if (target[p] !== value) {
|
||
target[p] = value;
|
||
sunes[i].updatedAt = Date.now();
|
||
su.save(sunes);
|
||
}
|
||
return true;
|
||
}
|
||
});
|
||
if (!sunes.length) {
|
||
const def = SUNE.create({ name: "Default" });
|
||
SUNE.setActive(def.id);
|
||
}
|
||
var state = window.state = {
|
||
messages: [],
|
||
busy: false,
|
||
controller: null,
|
||
currentThreadId: null,
|
||
abortRequested: false,
|
||
attachments: [],
|
||
stream: {
|
||
rid: null,
|
||
bubble: null,
|
||
meta: null,
|
||
text: "",
|
||
done: false
|
||
}
|
||
};
|
||
var getModelShort = (m) => {
|
||
const mm = m || SUNE.model || "";
|
||
return mm.includes("/") ? mm.split("/").pop() : mm;
|
||
};
|
||
var resolveSuneSrc = (src) => {
|
||
if (!src) return null;
|
||
if (src.startsWith("gh://")) {
|
||
const parts = src.substring(5).split("/");
|
||
if (parts.length < 3) return null;
|
||
const [owner, repo, ...filePathParts] = parts;
|
||
return `https://raw.githubusercontent.com/${owner}/${repo}/main/${filePathParts.join("/")}`;
|
||
}
|
||
return src;
|
||
};
|
||
var processSuneIncludes = async (html, depth = 0) => {
|
||
if (depth > 5) return "<!-- Sune include depth limit reached -->";
|
||
if (!html) return "";
|
||
const c = document.createElement("div");
|
||
c.innerHTML = html;
|
||
for (const n of [...c.querySelectorAll("sune")]) if (n.hasAttribute("src")) {
|
||
if (n.hasAttribute("private") && depth > 0) {
|
||
n.remove();
|
||
continue;
|
||
}
|
||
const s = n.getAttribute("src"), u = resolveSuneSrc(s);
|
||
if (!u) {
|
||
n.replaceWith(document.createComment(` Invalid src: ${esc(s)} `));
|
||
continue;
|
||
}
|
||
try {
|
||
const r = await fetch(u);
|
||
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
||
const d = await r.json(), o = Array.isArray(d) ? d[0] : d, h = [o?.settings?.extension_html || "", o?.settings?.html || ""].join("\n");
|
||
n.replaceWith(document.createRange().createContextualFragment(await processSuneIncludes(h, depth + 1)));
|
||
} catch (e) {
|
||
n.replaceWith(document.createComment(` Fetch failed: ${esc(u)} `));
|
||
}
|
||
} else n.replaceWith(document.createRange().createContextualFragment(n.innerHTML));
|
||
return c.innerHTML;
|
||
};
|
||
var renderSuneHTML = async () => {
|
||
const h = await processSuneIncludes([SUNE.extension_html, SUNE.html].map((x) => (x || "").trim()).join("\n")), c = el.suneHtml;
|
||
c.innerHTML = "";
|
||
const t = h.trim();
|
||
c.classList.toggle("hidden", !t);
|
||
t && (c.appendChild(document.createRange().createContextualFragment(h)), window.Alpine?.initTree(c));
|
||
};
|
||
var reflectActiveSune = async () => {
|
||
const a = SUNE.active;
|
||
el.suneBtnTop.title = `Settings — ${a.name}`;
|
||
el.suneBtnTop.innerHTML = a.avatar ? `<img src="${esc(a.avatar)}" alt="" class="h-8 w-8 rounded-full object-cover"/>` : "✺";
|
||
el.footer.classList.toggle("hidden", !!a.settings.hide_composer);
|
||
await renderSuneHTML();
|
||
icons();
|
||
};
|
||
var suneRow = (a) => `<div class="relative flex items-center gap-2 px-3 py-2 ${a.pinned ? "bg-yellow-50" : ""}"><button data-sune-id="${a.id}" class="flex-1 text-left flex items-center gap-2 ${a.id === SUNE.id ? "font-medium" : ""}">${a.avatar ? `<img src="${esc(a.avatar)}" alt="" class="h-8 w-8 rounded-full object-cover"/>` : `<span class="h-6 w-6 rounded-full bg-gray-200 flex items-center justify-center">✺</span>`}<span class="truncate">${a.pinned ? "📌 " : ""}${esc(a.name)}</span></button><button data-sune-menu="${a.id}" class="h-8 w-8 rounded hover:bg-gray-100 flex items-center justify-center" title="More"><i data-lucide="more-horizontal" class="h-4 w-4"></i></button></div>`;
|
||
var renderSidebar = window.renderSidebar = () => {
|
||
const list = [...SUNE.list].sort((a, b) => b.pinned - a.pinned);
|
||
el.suneList.innerHTML = list.map(suneRow).join("");
|
||
icons();
|
||
};
|
||
function enhanceCodeBlocks(root, doHL = true) {
|
||
$(root).find("pre>code").each((i, code) => {
|
||
if (code.textContent.length > 2e5) return;
|
||
const $pre = $(code).parent().addClass("relative rounded-xl border border-gray-200");
|
||
if (!$pre.find(".code-actions").length) {
|
||
const len = code.textContent.length, countText = len >= 1e3 ? (len / 1e3).toFixed(1) + "K" : len;
|
||
const $btn = $("<button class=\"bg-slate-900 text-white rounded-lg py-1 px-2 text-xs opacity-85\">Copy</button>").on("click", async (e) => {
|
||
e.stopPropagation();
|
||
try {
|
||
await navigator.clipboard.writeText(code.innerText);
|
||
$btn.text("Copied");
|
||
setTimeout(() => $btn.text("Copy"), 1200);
|
||
} catch {}
|
||
});
|
||
const $container = $("<div class=\"code-actions absolute top-2 right-2 flex items-center gap-2\"></div>");
|
||
$container.append($(`<span class="text-xs text-gray-500">${countText} chars</span>`), $btn);
|
||
$pre.append($container);
|
||
}
|
||
if (doHL && window.hljs && code.textContent.length < 1e5) hljs.highlightElement(code);
|
||
});
|
||
}
|
||
var md = window.markdownit({
|
||
html: false,
|
||
linkify: true,
|
||
typographer: true,
|
||
breaks: true
|
||
}).use(mathjax3);
|
||
var getSuneLabel = (m) => {
|
||
return `${m && m.sune_name || SUNE.name} · ${getModelShort(m && m.model)}`;
|
||
};
|
||
function _createMessageRow(m) {
|
||
const role = typeof m === "string" ? m : m && m.role || "assistant", meta = typeof m === "string" ? {} : m || {}, isUser = role === "user", $row = $("<div class=\"flex flex-col gap-2\"></div>"), $head = $("<div class=\"flex items-center gap-2 px-4\"></div>"), $avatar = $("<div></div>");
|
||
const uAva = isUser ? USER.avatar : meta.avatar;
|
||
uAva ? $avatar.attr("class", "msg-avatar shrink-0 h-7 w-7 rounded-full overflow-hidden").html(`<img src="${esc(uAva)}" class="h-full w-full object-cover">`) : $avatar.attr("class", `${isUser ? "bg-gray-900 text-white" : "bg-gray-200 text-gray-900"} msg-avatar shrink-0 h-7 w-7 rounded-full flex items-center justify-center`).text(isUser ? "👤" : "✺");
|
||
const $name = $("<div class=\"text-xs font-medium text-gray-500\"></div>").text(isUser ? USER.name : getSuneLabel(meta));
|
||
const $deleteBtn = $("<button class=\"p-1.5 rounded-lg hover:bg-gray-200 text-gray-400 hover:text-red-500\" title=\"Delete message\"><i data-lucide=\"x\" class=\"h-4 w-4\"></i></button>").on("click", async (e) => {
|
||
e.stopPropagation();
|
||
state.messages = state.messages.filter((msg) => msg.id !== m.id);
|
||
$row.remove();
|
||
await THREAD.persist();
|
||
});
|
||
const $copyBtn = $("<button class=\"ml-auto p-1.5 rounded-lg hover:bg-gray-200 text-gray-400 hover:text-gray-600\" title=\"Copy message\"><i data-lucide=\"copy\" class=\"h-4 w-4\"></i></button>").on("click", async function(e) {
|
||
e.stopPropagation();
|
||
try {
|
||
await navigator.clipboard.writeText(partsToText(m));
|
||
$(this).html("<i data-lucide=\"check\" class=\"h-4 w-4 text-green-500\"></i>");
|
||
icons();
|
||
setTimeout(() => {
|
||
$(this).html("<i data-lucide=\"copy\" class=\"h-4 w-4\"></i>");
|
||
icons();
|
||
}, 1200);
|
||
} catch {}
|
||
});
|
||
$head.append($avatar, $name, $copyBtn, $deleteBtn);
|
||
const $bubble = $(`<div class="${(isUser ? "bg-gray-50 border border-gray-200" : "bg-gray-100") + " msg-bubble markdown-body rounded-none px-4 py-3 w-full"}"></div>`);
|
||
$row.append($head, $bubble);
|
||
return $row;
|
||
}
|
||
function msgRow(m) {
|
||
const $row = _createMessageRow(m);
|
||
$(el.messages).append($row);
|
||
queueMicrotask(() => {
|
||
el.chat.scrollTo({
|
||
top: el.chat.scrollHeight,
|
||
behavior: "smooth"
|
||
});
|
||
icons();
|
||
});
|
||
return $row.find(".msg-bubble")[0];
|
||
}
|
||
var renderMarkdown = window.renderMarkdown = function(node, text, opt = {
|
||
enhance: true,
|
||
highlight: true
|
||
}) {
|
||
node.innerHTML = md.render(text);
|
||
if (opt.enhance) enhanceCodeBlocks(node, opt.highlight);
|
||
};
|
||
function partsToText(m) {
|
||
if (!m) return "";
|
||
const c = m.content, i = m.images;
|
||
let t = Array.isArray(c) ? c.map((p) => p?.type === "text" ? p.text : p?.type === "image_url" ? `![](${p.image_url?.url || ""})` : p?.type === "file" ? `[${p.file?.filename || "file"}]` : p?.type === "input_audio" ? `(audio:${p.input_audio?.format || ""})` : "").join("\n") : String(c || "");
|
||
if (Array.isArray(i)) t += i.map((x) => `\n\n`).join("");
|
||
return t;
|
||
}
|
||
var addMessage = window.addMessage = function(m, track = true) {
|
||
m.id = m.id || gid();
|
||
if (!Array.isArray(m.content) && m.content != null) m.content = [{
|
||
type: "text",
|
||
text: String(m.content)
|
||
}];
|
||
const bubble = msgRow(m);
|
||
bubble.dataset.mid = m.id;
|
||
renderMarkdown(bubble, partsToText(m));
|
||
if (track) state.messages.push(m);
|
||
if (m.role === "assistant") el.composer.dispatchEvent(new CustomEvent("sune:newSuneResponse", { detail: { message: m } }));
|
||
return bubble;
|
||
};
|
||
var addSuneBubbleStreaming = (meta, id) => msgRow(Object.assign({
|
||
role: "assistant",
|
||
id
|
||
}, meta));
|
||
var clearChat = () => {
|
||
el.suneHtml.dispatchEvent(new CustomEvent("sune:unmount"));
|
||
state.messages = [];
|
||
el.messages.innerHTML = "";
|
||
state.attachments = [];
|
||
updateAttachBadge();
|
||
el.fileInput.value = "";
|
||
};
|
||
var payloadWithSampling = (b) => {
|
||
const o = Object.assign({}, b), s = SUNE, p = {
|
||
temperature: num(s.temperature, null),
|
||
top_p: num(s.top_p, null),
|
||
top_k: int(s.top_k, null),
|
||
frequency_penalty: num(s.frequency_penalty, null),
|
||
repetition_penalty: num(s.repetition_penalty, null),
|
||
min_p: num(s.min_p, null),
|
||
top_a: num(s.top_a, null)
|
||
};
|
||
Object.keys(p).forEach((k) => {
|
||
const v = p[k];
|
||
if (v !== null) o[k] = v;
|
||
});
|
||
return o;
|
||
};
|
||
function setBtnStop() {
|
||
const b = el.sendBtn;
|
||
b.dataset.mode = "stop";
|
||
b.type = "button";
|
||
b.setAttribute("aria-label", "Stop");
|
||
b.innerHTML = "<i data-lucide=\"square\" class=\"h-5 w-5\"></i>";
|
||
icons();
|
||
b.onclick = () => {
|
||
state.abortRequested = true;
|
||
state.controller?.abort?.();
|
||
state.busy = false;
|
||
setBtnSend();
|
||
};
|
||
}
|
||
function setBtnSend() {
|
||
const b = el.sendBtn;
|
||
b.dataset.mode = "send";
|
||
b.type = "submit";
|
||
b.setAttribute("aria-label", "Send");
|
||
b.innerHTML = "<i data-lucide=\"sparkles\" class=\"h-5 w-5\"></i>";
|
||
icons();
|
||
b.onclick = null;
|
||
}
|
||
function localDemoReply() {
|
||
return "Tip: open the sidebar → Account & Backup to set your API key.";
|
||
}
|
||
var titleFrom = (t) => {
|
||
if (!t) return "Untitled";
|
||
return (typeof t === "string" ? t : Array.isArray(t) ? partsToText({ content: t }) : "Untitled").replace(/\s+/g, " ").trim().slice(0, 60) || "Untitled";
|
||
};
|
||
var serializeThreadName = (t) => {
|
||
const s = (t.title || "Untitled").replace(/[^a-zA-Z0-9]/g, "_").slice(0, 150);
|
||
return `${t.pinned ? "1" : "0"}-${t.updatedAt || Date.now()}-${t.id}-${s}.json`;
|
||
};
|
||
var deserializeThreadName = (n) => {
|
||
const p = n.replace(".json", "").split("-");
|
||
if (p.length < 4) return null;
|
||
return {
|
||
pinned: p[0] === "1",
|
||
updatedAt: parseInt(p[1]),
|
||
id: p[2],
|
||
title: p.slice(3).join("-").replace(/_/g, " "),
|
||
status: "synced",
|
||
type: "thread"
|
||
};
|
||
};
|
||
var TKEY = "threads_v1", THREAD = window.THREAD = {
|
||
list: [],
|
||
load: async function() {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (u.startsWith("gh://")) this.list = await localforage.getItem("rem_index_" + u.substring(5)).then((v) => Array.isArray(v) ? v : []) || [];
|
||
else this.list = await localforage.getItem(TKEY).then((v) => Array.isArray(v) ? v : []) || [];
|
||
},
|
||
save: async function() {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (u.startsWith("gh://")) await localforage.setItem("rem_index_" + u.substring(5), this.list.map((t) => {
|
||
const n = { ...t };
|
||
delete n.messages;
|
||
return n;
|
||
}));
|
||
else await localforage.setItem(TKEY, this.list.map((t) => {
|
||
const n = { ...t };
|
||
delete n.messages;
|
||
return n;
|
||
}));
|
||
},
|
||
get: function(id) {
|
||
return this.list.find((t) => t.id === id);
|
||
},
|
||
get active() {
|
||
return this.get(state.currentThreadId);
|
||
},
|
||
persist: async function(full = true) {
|
||
const id = state.currentThreadId;
|
||
if (!id) return;
|
||
const meta = this.get(id);
|
||
if (!meta) return;
|
||
const u = el.threadRepoInput.value.trim(), prefix = u.startsWith("gh://") ? "rem_t_" : "t_";
|
||
await localforage.setItem(prefix + id, [...state.messages]);
|
||
if (full) {
|
||
meta.updatedAt = Date.now();
|
||
if (u.startsWith("gh://") && meta.status !== "new") meta.status = "modified";
|
||
await this.save();
|
||
await renderThreads();
|
||
}
|
||
},
|
||
setTitle: async function(id, title) {
|
||
const th = this.get(id);
|
||
if (!th || !title) return;
|
||
th.title = titleFrom(title);
|
||
th.updatedAt = Date.now();
|
||
if (el.threadRepoInput.value.trim().startsWith("gh://") && th.status !== "new") th.status = "modified";
|
||
await this.save();
|
||
await renderThreads();
|
||
},
|
||
getLastAssistantMessageId: () => {
|
||
const a = [...el.messages.querySelectorAll(".msg-bubble")];
|
||
for (let i = a.length - 1; i >= 0; i--) {
|
||
const b = a[i], h = b.previousElementSibling;
|
||
if (!h) continue;
|
||
if (!/^\s*You\b/.test(h.textContent || "")) return b.dataset.mid || null;
|
||
}
|
||
return null;
|
||
}
|
||
};
|
||
var cacheStore = localforage.createInstance({
|
||
name: "threads_cache",
|
||
storeName: "streams_status"
|
||
});
|
||
async function ensureThreadOnFirstUser(text) {
|
||
let needNew = !state.currentThreadId;
|
||
if (state.messages.length === 0) state.currentThreadId = null;
|
||
if (state.currentThreadId && !THREAD.get(state.currentThreadId)) needNew = true;
|
||
if (!needNew) return;
|
||
const id = gid(), now = Date.now(), u = el.threadRepoInput.value.trim(), th = {
|
||
id,
|
||
title: "",
|
||
pinned: false,
|
||
updatedAt: now,
|
||
type: "thread"
|
||
};
|
||
if (u.startsWith("gh://")) th.status = "new";
|
||
state.currentThreadId = id;
|
||
THREAD.list.unshift(th);
|
||
await THREAD.save();
|
||
const prefix = u.startsWith("gh://") ? "rem_t_" : "t_";
|
||
await localforage.setItem(prefix + id, []);
|
||
await renderThreads();
|
||
}
|
||
var threadRow = (t) => {
|
||
const icon = t.type === "folder" ? "folder" : t.type === "file" ? "file-text" : "";
|
||
return `<div class=\"relative flex items-center gap-2 px-3 py-2 ${t.pinned ? "bg-yellow-50" : ""}\"><button data-open-thread=\"${t.id}\" data-type=\"${t.type || "thread"}\" class=\"flex-1 text-left truncate flex items-center gap-2\">${icon ? `<i data-lucide="${icon}" class="h-4 w-4"></i>` : ""}${t.pinned ? "📌 " : ""}${esc(t.title || "Untitled")}${t.status === "modified" ? "*" : t.status === "new" ? "+" : ""}</button><button data-thread-menu=\"${t.id}\" class=\"h-8 w-8 rounded hover:bg-gray-100 flex items-center justify-center\" title=\"More\"><i data-lucide=\"more-horizontal\" class="h-4 w-4"></i></button></div>`;
|
||
};
|
||
var sortedThreads = [], isAddingThreads = false;
|
||
var THREAD_PAGE_SIZE = 50;
|
||
async function renderThreads() {
|
||
sortedThreads = [...THREAD.list].filter((t) => t.status !== "deleted").sort((a, b) => {
|
||
if (a.type === "file" && b.type !== "file") return -1;
|
||
if (a.type !== "file" && b.type === "file") return 1;
|
||
return b.pinned - a.pinned || b.updatedAt - a.updatedAt;
|
||
});
|
||
el.threadList.innerHTML = sortedThreads.slice(0, THREAD_PAGE_SIZE).map(threadRow).join("");
|
||
el.threadList.scrollTop = 0;
|
||
isAddingThreads = false;
|
||
icons();
|
||
}
|
||
var menuThreadId = null;
|
||
var hideThreadPopover = () => {
|
||
el.threadPopover.classList.add("hidden");
|
||
menuThreadId = null;
|
||
};
|
||
function showThreadPopover(btn, id) {
|
||
menuThreadId = id;
|
||
el.threadPopover.classList.remove("hidden");
|
||
positionPopover(btn, el.threadPopover);
|
||
icons();
|
||
}
|
||
var menuSuneId = null;
|
||
var hideSunePopover = () => {
|
||
el.sunePopover.classList.add("hidden");
|
||
menuSuneId = null;
|
||
};
|
||
function showSunePopover(btn, id) {
|
||
menuSuneId = id;
|
||
el.sunePopover.classList.remove("hidden");
|
||
positionPopover(btn, el.sunePopover);
|
||
icons();
|
||
}
|
||
$(el.threadList).on("click", async (e) => {
|
||
const openBtn = e.target.closest("[data-open-thread]"), menuBtn = e.target.closest("[data-thread-menu]");
|
||
if (openBtn) {
|
||
const id = openBtn.getAttribute("data-open-thread"), type = openBtn.getAttribute("data-type");
|
||
if (type === "file") {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (u.startsWith("gh://")) {
|
||
const info = parseGhUrl(u);
|
||
window.open(`https://github.com/${info.owner}/${info.repo}/blob/${info.branch}/${id}`, "_blank");
|
||
}
|
||
return;
|
||
}
|
||
if (type === "folder") {
|
||
const u = el.threadRepoInput.value.trim();
|
||
el.threadRepoInput.value = u + (u.endsWith("/") ? "" : "/") + id;
|
||
el.threadRepoInput.dispatchEvent(new Event("change"));
|
||
return;
|
||
}
|
||
if (id !== state.currentThreadId && state.busy) {
|
||
state.controller?.disconnect?.();
|
||
setBtnSend();
|
||
state.busy = false;
|
||
state.controller = null;
|
||
}
|
||
const th = THREAD.get(id);
|
||
if (!th) return;
|
||
if (id === state.currentThreadId) {
|
||
el.sidebarRight.classList.add("translate-x-full");
|
||
el.sidebarOverlayRight.classList.add("hidden");
|
||
hideThreadPopover();
|
||
return;
|
||
}
|
||
state.currentThreadId = id;
|
||
clearChat();
|
||
const u = el.threadRepoInput.value.trim(), prefix = u.startsWith("gh://") ? "rem_t_" : "t_";
|
||
let msgs = await localforage.getItem(prefix + id);
|
||
if (!msgs && u.startsWith("gh://")) try {
|
||
const info = parseGhUrl(u), fileName = serializeThreadName(th), res = await ghApi(`${info.apiPath}/${fileName}?ref=${info.branch}`);
|
||
if (res && res.content) {
|
||
msgs = JSON.parse(btou(res.content));
|
||
await localforage.setItem(prefix + id, msgs);
|
||
th.status = "synced";
|
||
await THREAD.save();
|
||
}
|
||
} catch (e) {
|
||
console.error("Remote fetch failed", e);
|
||
}
|
||
state.messages = Array.isArray(msgs) ? [...msgs] : [];
|
||
for (const m of state.messages) {
|
||
const b = msgRow(m);
|
||
b.dataset.mid = m.id || "";
|
||
renderMarkdown(b, partsToText(m));
|
||
}
|
||
await renderSuneHTML();
|
||
syncWhileBusy();
|
||
queueMicrotask(() => el.chat.scrollTo({
|
||
top: el.chat.scrollHeight,
|
||
behavior: "smooth"
|
||
}));
|
||
el.sidebarRight.classList.add("translate-x-full");
|
||
el.sidebarOverlayRight.classList.add("hidden");
|
||
hideThreadPopover();
|
||
return;
|
||
}
|
||
if (menuBtn) {
|
||
e.stopPropagation();
|
||
showThreadPopover(menuBtn, menuBtn.getAttribute("[data-thread-menu]") ? menuBtn.getAttribute("[data-thread-menu]") : menuBtn.getAttribute("data-thread-menu"));
|
||
}
|
||
});
|
||
$(el.threadList).on("scroll", () => {
|
||
if (isAddingThreads || el.threadList.scrollTop + el.threadList.clientHeight < el.threadList.scrollHeight - 200) return;
|
||
const c = el.threadList.children.length;
|
||
if (c >= sortedThreads.length) return;
|
||
isAddingThreads = true;
|
||
const b = sortedThreads.slice(c, c + THREAD_PAGE_SIZE);
|
||
if (b.length) {
|
||
el.threadList.insertAdjacentHTML("beforeend", b.map(threadRow).join(""));
|
||
icons();
|
||
}
|
||
isAddingThreads = false;
|
||
});
|
||
$(el.threadPopover).on("click", async (e) => {
|
||
const act = e.target.closest("[data-action]")?.getAttribute("data-action");
|
||
if (!act || !menuThreadId) return;
|
||
const th = THREAD.get(menuThreadId);
|
||
if (!th) return;
|
||
const u = el.threadRepoInput.value.trim(), prefix = u.startsWith("gh://") ? "rem_t_" : "t_";
|
||
if (act === "pin") {
|
||
th.pinned = !th.pinned;
|
||
if (u.startsWith("gh://") && th.status !== "new") th.status = "modified";
|
||
} else if (act === "rename") {
|
||
const nv = prompt("Rename to:", th.title);
|
||
if (nv != null) {
|
||
th.title = titleFrom(nv);
|
||
th.updatedAt = Date.now();
|
||
if (u.startsWith("gh://") && th.status !== "new") th.status = "modified";
|
||
}
|
||
} else if (act === "duplicate") {
|
||
const newId = gid(), msgs = await localforage.getItem(prefix + th.id) || [];
|
||
const newTh = {
|
||
...th,
|
||
id: newId,
|
||
title: th.title + " (Copy)",
|
||
updatedAt: Date.now()
|
||
};
|
||
if (u.startsWith("gh://")) newTh.status = "new";
|
||
THREAD.list.unshift(newTh);
|
||
await localforage.setItem(prefix + newId, msgs);
|
||
await THREAD.save();
|
||
await renderThreads();
|
||
} else if (act === "delete") {
|
||
if (confirm("Delete this chat?")) {
|
||
if (u.startsWith("gh://")) {
|
||
th.status = "deleted";
|
||
th.updatedAt = Date.now();
|
||
} else {
|
||
THREAD.list = THREAD.list.filter((x) => !th.id !== th.id);
|
||
await localforage.removeItem(prefix + th.id);
|
||
}
|
||
if (state.currentThreadId === th.id) {
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
}
|
||
}
|
||
} else if (act === "count_tokens") {
|
||
const msgs = await localforage.getItem(prefix + th.id) || [];
|
||
let totalChars = 0;
|
||
for (const m of msgs) {
|
||
if (!m || !m.role || m.role === "system") continue;
|
||
totalChars += String(partsToText(m) || "").length;
|
||
}
|
||
const tokens = Math.max(0, Math.ceil(totalChars / 4));
|
||
const k = tokens >= 1e3 ? Math.round(tokens / 1e3) + "k" : String(tokens);
|
||
alert(tokens + " tokens (" + k + ")");
|
||
} else if (act === "export") {
|
||
const msgs = await localforage.getItem(prefix + th.id) || [];
|
||
dl(`thread-${(th.title || "thread").replace(/\W/g, "_")}-${ts()}.json`, {
|
||
...th,
|
||
messages: msgs
|
||
});
|
||
} else if (act === "copy_path") {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (u.startsWith("gh://")) {
|
||
const info = parseGhUrl(u);
|
||
try {
|
||
await navigator.clipboard.writeText(`${info.owner}/${info.repo}@${info.branch}/${th.id}`);
|
||
alert("Path copied.");
|
||
} catch {}
|
||
}
|
||
}
|
||
hideThreadPopover();
|
||
await THREAD.save();
|
||
renderThreads();
|
||
});
|
||
$(el.suneList).on("click", async (e) => {
|
||
const menuBtn = e.target.closest("[data-sune-menu]");
|
||
if (menuBtn) {
|
||
e.stopPropagation();
|
||
showSunePopover(menuBtn, menuBtn.getAttribute("[data-sune-menu]") ? menuBtn.getAttribute("[data-sune-menu]") : menuBtn.getAttribute("data-sune-menu"));
|
||
return;
|
||
}
|
||
const btn = e.target.closest("[data-sune-id]");
|
||
if (!btn) return;
|
||
const id = btn.getAttribute("data-sune-id");
|
||
if (id) {
|
||
if (state.busy) {
|
||
state.controller?.disconnect?.();
|
||
setBtnSend();
|
||
state.busy = false;
|
||
state.controller = null;
|
||
}
|
||
SUNE.setActive(id);
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
document.getElementById("sidebarLeft").classList.add("-translate-x-full");
|
||
document.getElementById("sidebarOverlayLeft").classList.add("hidden");
|
||
}
|
||
});
|
||
$(el.sunePopover).on("click", async (e) => {
|
||
const act = e.target.closest("[data-action]")?.getAttribute("data-action");
|
||
if (!act || !menuSuneId) return;
|
||
const s = SUNE.get(menuSuneId);
|
||
if (!s) return;
|
||
const updateAndRender = async () => {
|
||
s.updatedAt = Date.now();
|
||
SUNE.save();
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
};
|
||
if (act === "pin") {
|
||
s.pinned = !s.pinned;
|
||
await updateAndRender();
|
||
} else if (act === "rename") {
|
||
const n = prompt("Rename sune to:", s.name);
|
||
if (n != null) {
|
||
s.name = n.trim();
|
||
await updateAndRender();
|
||
}
|
||
} else if (act === "pfp") {
|
||
const i = document.createElement("input");
|
||
i.type = "file";
|
||
i.accept = "image/*";
|
||
i.onchange = async () => {
|
||
const f = i.files?.[0];
|
||
if (!f) return;
|
||
try {
|
||
s.avatar = await imgToWebp(f);
|
||
await updateAndRender();
|
||
} catch {}
|
||
};
|
||
i.click();
|
||
} else if (act === "export") dl(`sune-${(s.name || "sune").replace(/\W/g, "_")}-${ts()}.sune`, [s]);
|
||
hideSunePopover();
|
||
});
|
||
function updateAttachBadge() {
|
||
const n = state.attachments.length;
|
||
el.attachBadge.textContent = String(n);
|
||
el.attachBadge.classList.toggle("hidden", n === 0);
|
||
}
|
||
async function toAttach(file) {
|
||
if (!file) return null;
|
||
if (file instanceof File) {
|
||
const name = file.name || "file", mime = (file.type || "application/octet-stream").toLowerCase();
|
||
if (/^image\//.test(mime) || /\.(png|jpe?g|webp|gif)$/i.test(name)) return {
|
||
type: "image_url",
|
||
image_url: { url: mime === "image/webp" || /\.webp$/i.test(name) ? await asDataURL(file) : await imgToWebp(file, 2048, 94) }
|
||
};
|
||
if (mime === "application/pdf" || /\.pdf$/i.test(name)) {
|
||
const bin = b64(await asDataURL(file));
|
||
return {
|
||
type: "file",
|
||
file: {
|
||
filename: name.endsWith(".pdf") ? name : name + ".pdf",
|
||
file_data: bin
|
||
}
|
||
};
|
||
}
|
||
if (/^audio\//.test(mime) || /\.(wav|mp3)$/i.test(name)) return {
|
||
type: "input_audio",
|
||
input_audio: {
|
||
data: b64(await asDataURL(file)),
|
||
format: /mp3/.test(mime) || /\.mp3$/i.test(name) ? "mp3" : "wav"
|
||
}
|
||
};
|
||
return {
|
||
type: "file",
|
||
file: {
|
||
filename: name,
|
||
file_data: b64(await asDataURL(file))
|
||
}
|
||
};
|
||
}
|
||
if (file && file.name == null && file.data) {
|
||
const name = file.name || "file", mime = (file.mime || "application/octet-stream").toLowerCase();
|
||
if (/^image\//.test(mime)) return {
|
||
type: "image_url",
|
||
image_url: { url: `data:${mime};base64,${file.data}` }
|
||
};
|
||
if (mime === "application/pdf") return {
|
||
type: "file",
|
||
file: {
|
||
filename: name,
|
||
file_data: file.data
|
||
}
|
||
};
|
||
if (/^audio\//.test(mime)) {
|
||
const fmt = /mp3/.test(mime) ? "mp3" : "wav";
|
||
return {
|
||
type: "input_audio",
|
||
input_audio: {
|
||
data: file.data,
|
||
format: fmt
|
||
}
|
||
};
|
||
}
|
||
return {
|
||
type: "file",
|
||
file: {
|
||
filename: name,
|
||
file_data: file.data
|
||
}
|
||
};
|
||
}
|
||
return null;
|
||
}
|
||
$(el.attachBtn).on("click", () => {
|
||
if (state.busy) return;
|
||
if (state.attachments.length) {
|
||
state.attachments = [];
|
||
updateAttachBadge();
|
||
el.fileInput.value = "";
|
||
}
|
||
el.fileInput.click();
|
||
});
|
||
$(el.fileInput).on("change", async () => {
|
||
const files = [...el.fileInput.files || []];
|
||
if (!files.length) return;
|
||
for (const f of files) {
|
||
const at = await toAttach(f).catch(() => null);
|
||
if (at) state.attachments.push(at);
|
||
}
|
||
updateAttachBadge();
|
||
});
|
||
$(el.composer).on("submit", async (e) => {
|
||
e.preventDefault();
|
||
if (state.busy) return;
|
||
const text = el.input.value.trim();
|
||
if (!text && !state.attachments.length) return SUNE.infer();
|
||
await ensureThreadOnFirstUser(text || "(attachments)");
|
||
const th = THREAD.active, shouldGenTitle = th && !th.title;
|
||
el.input.value = "";
|
||
const parts = [];
|
||
if (text) parts.push({
|
||
type: "text",
|
||
text
|
||
});
|
||
parts.push(...state.attachments);
|
||
const userMsg = {
|
||
role: "user",
|
||
content: parts.length ? parts : [{
|
||
type: "text",
|
||
text: text || "(sent attachments)"
|
||
}]
|
||
};
|
||
addMessage(userMsg);
|
||
el.composer.dispatchEvent(new CustomEvent("user:send", { detail: { message: userMsg } }));
|
||
if (shouldGenTitle) (async () => {
|
||
const title = await generateTitleWithAI(state.messages) || partsToText(state.messages.find((m) => m.role === "user")).replace(/!\[\]\(data:[^\)]+\)/g, "[Image]") || "Untitled";
|
||
await THREAD.setTitle(th.id, title);
|
||
})();
|
||
if (!SUNE.model) return state.attachments = [], updateAttachBadge();
|
||
state.busy = true;
|
||
setBtnStop();
|
||
const a = SUNE.active, suneMeta = {
|
||
sune_name: a.name,
|
||
model: SUNE.model,
|
||
avatar: a.avatar || ""
|
||
}, streamId = sid(), suneBubble = addSuneBubbleStreaming(suneMeta, streamId);
|
||
suneBubble.dataset.mid = streamId;
|
||
suneBubble.innerHTML = SUNE_LOGO_SVG;
|
||
const assistantMsg = Object.assign({
|
||
id: streamId,
|
||
role: "assistant",
|
||
content: [{
|
||
type: "text",
|
||
text: ""
|
||
}]
|
||
}, suneMeta);
|
||
state.messages.push(assistantMsg);
|
||
THREAD.persist(false);
|
||
state.stream = {
|
||
rid: streamId,
|
||
bubble: suneBubble,
|
||
meta: suneMeta,
|
||
text: "",
|
||
done: false
|
||
};
|
||
let buf = "", completed = false;
|
||
const onDelta = (delta, done, imgs) => {
|
||
if (imgs) {
|
||
if (!assistantMsg.images) assistantMsg.images = [];
|
||
assistantMsg.images.push(...imgs);
|
||
}
|
||
buf += delta;
|
||
state.stream.text = buf;
|
||
renderMarkdown(suneBubble, partsToText(assistantMsg), { enhance: false });
|
||
assistantMsg.content[0].text = buf;
|
||
if (done && !completed) {
|
||
completed = true;
|
||
setBtnSend();
|
||
state.busy = false;
|
||
enhanceCodeBlocks(suneBubble, true);
|
||
THREAD.persist(true);
|
||
el.composer.dispatchEvent(new CustomEvent("sune:newSuneResponse", { detail: { message: assistantMsg } }));
|
||
state.stream = {
|
||
rid: null,
|
||
bubble: null,
|
||
meta: null,
|
||
text: "",
|
||
done: false
|
||
};
|
||
} else if (!done) THREAD.persist(false);
|
||
};
|
||
await streamChat(onDelta, streamId);
|
||
state.attachments = [];
|
||
updateAttachBadge();
|
||
});
|
||
var jars = {
|
||
html: null,
|
||
extension: null,
|
||
jsonSchema: null
|
||
};
|
||
var ensureJars = async () => {
|
||
if (jars.html && jars.extension && jars.jsonSchema) return jars;
|
||
const mod = await __vitePreload(() => import("https://medv.io/codejar/codejar.js"), []), CodeJar = mod.CodeJar || mod.default, hl = (e) => e.innerHTML = hljs.highlight(e.textContent, { language: "xml" }).value, hl_json = (e) => e.innerHTML = hljs.highlight(e.textContent, { language: "json" }).value;
|
||
if (!jars.html) jars.html = CodeJar(el.htmlEditor, hl, { tab: " " });
|
||
if (!jars.extension) jars.extension = CodeJar(el.extensionHtmlEditor, hl, { tab: " " });
|
||
if (!jars.jsonSchema) jars.jsonSchema = CodeJar(el.jsonSchemaEditor, hl_json, { tab: " " });
|
||
return jars;
|
||
};
|
||
var openedHTML = false;
|
||
function openSettings() {
|
||
const a = SUNE.active, s = a.settings;
|
||
openedHTML = false;
|
||
el.suneURL.value = a.url || "";
|
||
el.set_model.value = s.model;
|
||
el.set_temperature.value = s.temperature;
|
||
el.set_top_p.value = s.top_p;
|
||
el.set_top_k.value = s.top_k;
|
||
el.set_frequency_penalty.value = s.frequency_penalty;
|
||
el.set_repetition_penalty.value = s.repetition_penalty;
|
||
el.set_min_p.value = s.min_p;
|
||
el.set_top_a.value = s.top_a;
|
||
el.set_verbosity.value = s.verbosity || "";
|
||
el.set_reasoning_effort.value = s.reasoning_effort || "default";
|
||
el.set_system_prompt.value = s.system_prompt;
|
||
el.set_hide_composer.checked = !!s.hide_composer;
|
||
el.set_json_output.checked = !!s.json_output;
|
||
el.set_img_output.checked = !!s.img_output;
|
||
el.set_aspect_ratio.value = s.aspect_ratio || "1:1";
|
||
el.set_image_size.value = s.image_size || "1K";
|
||
el.aspectRatioContainer.classList.toggle("hidden", !s.img_output);
|
||
el.set_include_thoughts.checked = !!s.include_thoughts;
|
||
el.set_ignore_master_prompt.checked = !!s.ignore_master_prompt;
|
||
showTab("Model");
|
||
el.suneModal.classList.remove("hidden");
|
||
}
|
||
var closeSettings = () => {
|
||
el.suneModal.classList.add("hidden");
|
||
};
|
||
var tabs = {
|
||
Model: ["tabModel", "panelModel"],
|
||
Prompt: ["tabPrompt", "panelPrompt"],
|
||
Script: ["tabScript", "panelScript"]
|
||
};
|
||
function showTab(key) {
|
||
Object.entries(tabs).forEach(([k, [tb, pn]]) => {
|
||
el[tb].classList.toggle("border-black", k === key);
|
||
el[pn].classList.toggle("hidden", k !== key);
|
||
});
|
||
if (key === "Prompt") ensureJars().then(({ jsonSchema }) => {
|
||
const s = SUNE.settings;
|
||
jsonSchema.updateCode(s.json_schema || "");
|
||
});
|
||
else if (key === "Script") {
|
||
openedHTML = true;
|
||
showHtmlTab("index");
|
||
ensureJars().then(({ html, extension }) => {
|
||
const s = SUNE.settings;
|
||
html.updateCode(s.html || "");
|
||
extension.updateCode(s.extension_html || "");
|
||
});
|
||
}
|
||
}
|
||
$(el.suneBtnTop).on("click", openSettings);
|
||
$(el.cancelSettings).on("click", closeSettings);
|
||
$(el.suneModal).on("click", (e) => {
|
||
if (e.target === el.suneModal || e.target.classList.contains("bg-black/30")) closeSettings();
|
||
});
|
||
$(el.tabModel).on("click", () => showTab("Model"));
|
||
$(el.tabPrompt).on("click", () => showTab("Prompt"));
|
||
$(el.tabScript).on("click", () => showTab("Script"));
|
||
$(el.set_img_output).on("change", (e) => el.aspectRatioContainer.classList.toggle("hidden", !e.target.checked));
|
||
$(el.settingsForm).on("submit", async (e) => {
|
||
e.preventDefault();
|
||
SUNE.url = (el.suneURL.value || "").trim();
|
||
SUNE.model = (el.set_model.value || "").trim();
|
||
[
|
||
"temperature",
|
||
"top_p",
|
||
"top_k",
|
||
"frequency_penalty",
|
||
"repetition_penalty",
|
||
"min_p",
|
||
"top_a"
|
||
].forEach((k) => SUNE[k] = el[`set_${k}`].value.trim());
|
||
SUNE.verbosity = el.set_verbosity.value || "";
|
||
SUNE.reasoning_effort = el.set_reasoning_effort.value || "default";
|
||
SUNE.system_prompt = el.set_system_prompt.value.trim();
|
||
SUNE.hide_composer = el.set_hide_composer.checked;
|
||
SUNE.json_output = el.set_json_output.checked;
|
||
SUNE.img_output = el.set_img_output.checked;
|
||
SUNE.aspect_ratio = el.set_aspect_ratio.value;
|
||
SUNE.image_size = el.set_image_size.value;
|
||
SUNE.include_thoughts = el.set_include_thoughts.checked;
|
||
SUNE.ignore_master_prompt = el.set_ignore_master_prompt.checked;
|
||
SUNE.json_schema = el.jsonSchemaEditor.textContent;
|
||
if (openedHTML) {
|
||
SUNE.html = el.htmlEditor.textContent;
|
||
SUNE.extension_html = el.extensionHtmlEditor.textContent;
|
||
}
|
||
closeSettings();
|
||
await reflectActiveSune();
|
||
});
|
||
$(el.deleteSuneBtn).on("click", async () => {
|
||
const activeId = SUNE.id, name = SUNE.name || "this sune";
|
||
if (!confirm(`Delete "${name}"?`)) return;
|
||
SUNE.delete(activeId);
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
closeSettings();
|
||
});
|
||
$(el.newSuneBtn).on("click", async () => {
|
||
const name = prompt("Name your sune:");
|
||
if (!name) return;
|
||
const sune = SUNE.create({ name: name.trim() });
|
||
SUNE.setActive(sune.id);
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
document.getElementById("sidebarLeft").classList.add("-translate-x-full");
|
||
document.getElementById("sidebarOverlayLeft").classList.add("hidden");
|
||
});
|
||
function dl(name, obj) {
|
||
const blob = new Blob([JSON.stringify(obj, null, 2)], { type: name.endsWith(".sune") ? "application/octet-stream" : "application/json" }), url = URL.createObjectURL(blob), a = $("<a>").prop({
|
||
href: url,
|
||
download: name
|
||
}).appendTo("body");
|
||
a.get(0).click();
|
||
a.remove();
|
||
URL.revokeObjectURL(url);
|
||
}
|
||
var ts = () => {
|
||
const d = /* @__PURE__ */ new Date(), p = (n) => String(n).padStart(2, "0");
|
||
return `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
|
||
};
|
||
var importMode = null;
|
||
$(el.sunesExportOption).on("click", () => {
|
||
dl(`sunes-${ts()}.sune`, {
|
||
version: 1,
|
||
sunes: SUNE.list,
|
||
activeId: SUNE.id
|
||
});
|
||
el.userMenu.classList.add("hidden");
|
||
});
|
||
$(el.sunesImportOption).on("click", () => {
|
||
importMode = "sunes";
|
||
el.importInput.value = "";
|
||
el.importInput.click();
|
||
});
|
||
$(el.threadsImportOption).on("click", () => {
|
||
importMode = "threads";
|
||
el.importInput.value = "";
|
||
el.importInput.click();
|
||
});
|
||
$(el.importInput).on("change", async () => {
|
||
const file = el.importInput.files?.[0];
|
||
if (!file) return;
|
||
try {
|
||
const text = await file.text();
|
||
const data = JSON.parse(text);
|
||
if (importMode === "sunes") {
|
||
const list = Array.isArray(data) ? data : Array.isArray(data.sunes) ? data.sunes : [];
|
||
if (!list.length) throw new Error("No sunes");
|
||
const incoming = list.map((a) => makeSune(a || {}));
|
||
const map = {};
|
||
incoming.forEach((s) => {
|
||
if (!s.id) s.id = gid();
|
||
const k = s.id, prev = map[k];
|
||
map[k] = !prev || +s.updatedAt > +prev.updatedAt ? s : prev;
|
||
});
|
||
let added = 0, updated = 0;
|
||
const idx = Object.fromEntries(sunes.map((s) => [s.id, s]));
|
||
Object.values(map).forEach((s) => {
|
||
const ex = idx[s.id];
|
||
if (!ex) {
|
||
sunes.push(s);
|
||
added++;
|
||
} else if (+s.updatedAt > +ex.updatedAt) {
|
||
Object.assign(ex, s);
|
||
updated++;
|
||
}
|
||
});
|
||
SUNE.save();
|
||
if (data.activeId && sunes.some((x) => x.id === data.activeId)) SUNE.setActive(data.activeId);
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
alert(`${added} new, ${updated} updated.`);
|
||
} else if (importMode === "threads") {
|
||
if (!data || !data.id || !Array.isArray(data.messages)) throw new Error("Invalid thread format");
|
||
const u = el.threadRepoInput.value.trim(), prefix = u.startsWith("gh://") ? "rem_t_" : "t_";
|
||
const norm = (t) => ({
|
||
id: t.id || gid(),
|
||
title: titleFrom(t.title || t.messages),
|
||
pinned: !!t.pinned,
|
||
updatedAt: num(t.updatedAt, Date.now()),
|
||
type: "thread",
|
||
...u.startsWith("gh://") ? { status: "new" } : {}
|
||
});
|
||
const n = norm(data), msgs = data.messages, idx = THREAD.list.findIndex((x) => x.id === n.id);
|
||
if (idx > -1) {
|
||
if (n.updatedAt > THREAD.list[idx].updatedAt) {
|
||
THREAD.list[idx] = n;
|
||
await localforage.setItem(prefix + n.id, msgs);
|
||
}
|
||
} else {
|
||
THREAD.list.unshift(n);
|
||
await localforage.setItem(prefix + n.id, msgs);
|
||
}
|
||
await THREAD.save();
|
||
await renderThreads();
|
||
alert("Thread imported.");
|
||
}
|
||
el.userMenu.classList.add("hidden");
|
||
} catch {
|
||
alert("Import failed");
|
||
} finally {
|
||
importMode = null;
|
||
}
|
||
});
|
||
function kbUpdate() {
|
||
const vv = window.visualViewport;
|
||
const overlap = vv ? Math.max(0, window.innerHeight - (vv.height + vv.offsetTop)) : 0;
|
||
document.documentElement.style.setProperty("--kb", overlap + "px");
|
||
const fh = el.footer.getBoundingClientRect().height;
|
||
document.documentElement.style.setProperty("--footer-h", fh + "px");
|
||
el.footer.style.transform = "translateY(" + -overlap + "px)";
|
||
el.chat.style.scrollPaddingBottom = fh + overlap + 16 + "px";
|
||
}
|
||
function kbBind() {
|
||
if (window.visualViewport) ["resize", "scroll"].forEach((ev) => visualViewport.addEventListener(ev, () => kbUpdate(), { passive: true }));
|
||
$(window).on("resize orientationchange", () => setTimeout(kbUpdate, 50));
|
||
$(el.input).on("focus click", () => {
|
||
setTimeout(() => {
|
||
kbUpdate();
|
||
el.input.scrollIntoView({
|
||
block: "nearest",
|
||
behavior: "smooth"
|
||
});
|
||
}, 0);
|
||
});
|
||
}
|
||
function activeMeta() {
|
||
return {
|
||
sune_name: SUNE.name,
|
||
model: SUNE.model,
|
||
avatar: SUNE.avatar
|
||
};
|
||
}
|
||
var USER = window.USER = {
|
||
log: async (s) => {
|
||
const t = String(s ?? "").trim();
|
||
if (!t) return;
|
||
await ensureThreadOnFirstUser(t);
|
||
addMessage({
|
||
role: "user",
|
||
content: [{
|
||
type: "text",
|
||
text: t
|
||
}]
|
||
});
|
||
await THREAD.persist();
|
||
},
|
||
logMany: async (msgs) => {
|
||
if (!Array.isArray(msgs) || !msgs.length) return;
|
||
const clean = msgs.map((s) => String(s ?? "").trim()).filter(Boolean);
|
||
if (!clean.length) return;
|
||
await ensureThreadOnFirstUser(clean[0]);
|
||
const newMsgs = clean.map((t) => ({
|
||
id: gid(),
|
||
role: "user",
|
||
content: [{
|
||
type: "text",
|
||
text: t
|
||
}]
|
||
}));
|
||
state.messages.push(...newMsgs);
|
||
const frag = document.createDocumentFragment();
|
||
const newEls = newMsgs.map((m) => {
|
||
const $row = _createMessageRow(m), bubble = $row.find(".msg-bubble")[0];
|
||
bubble.dataset.mid = m.id;
|
||
return {
|
||
rowEl: $row[0],
|
||
bubbleEl: bubble,
|
||
message: m
|
||
};
|
||
});
|
||
newEls.forEach((item) => frag.appendChild(item.rowEl));
|
||
el.messages.appendChild(frag);
|
||
queueMicrotask(() => {
|
||
newEls.forEach((item) => {
|
||
renderMarkdown(item.bubbleEl, partsToText(item.message));
|
||
});
|
||
el.chat.scrollTo({
|
||
top: el.chat.scrollHeight,
|
||
behavior: "smooth"
|
||
});
|
||
icons();
|
||
});
|
||
await THREAD.persist();
|
||
},
|
||
get PAT() {
|
||
return this.githubToken;
|
||
},
|
||
get name() {
|
||
return localStorage.getItem("user_name") || "Anon";
|
||
},
|
||
set name(v) {
|
||
localStorage.setItem("user_name", v || "");
|
||
},
|
||
get avatar() {
|
||
return localStorage.getItem("user_avatar") || "";
|
||
},
|
||
set avatar(v) {
|
||
localStorage.setItem("user_avatar", v || "");
|
||
},
|
||
get provider() {
|
||
return localStorage.getItem("provider") || "openrouter";
|
||
},
|
||
set provider(v) {
|
||
localStorage.setItem("provider", [
|
||
"openai",
|
||
"google",
|
||
"claude"
|
||
].includes(v) ? v : "openrouter");
|
||
},
|
||
get apiKeyOpenRouter() {
|
||
return localStorage.getItem("openrouter_api_key") || "";
|
||
},
|
||
set apiKeyOpenRouter(v) {
|
||
localStorage.setItem("openrouter_api_key", v || "");
|
||
},
|
||
get apiKeyOpenAI() {
|
||
return localStorage.getItem("openai_api_key") || "";
|
||
},
|
||
set apiKeyOpenAI(v) {
|
||
localStorage.setItem("openai_api_key", v || "");
|
||
},
|
||
get apiKeyGoogle() {
|
||
return localStorage.getItem("google_api_key") || "";
|
||
},
|
||
set apiKeyGoogle(v) {
|
||
localStorage.setItem("google_api_key", v || "");
|
||
},
|
||
get apiKeyClaude() {
|
||
return localStorage.getItem("claude_api_key") || "";
|
||
},
|
||
set apiKeyClaude(v) {
|
||
localStorage.setItem("claude_api_key", v || "");
|
||
},
|
||
get apiKeyCloudflare() {
|
||
return localStorage.getItem("cloudflare_api_key") || "";
|
||
},
|
||
set apiKeyCloudflare(v) {
|
||
localStorage.setItem("cloudflare_api_key", v || "");
|
||
},
|
||
get apiKey() {
|
||
const p = this.provider;
|
||
return p === "openai" ? this.apiKeyOpenAI : p === "google" ? this.apiKeyGoogle : p === "claude" ? this.apiKeyClaude : p === "cloudflare" ? this.apiKeyCloudflare : this.apiKeyOpenRouter;
|
||
},
|
||
set apiKey(v) {
|
||
const p = this.provider;
|
||
if (p === "openai") this.apiKeyOpenAI = v;
|
||
else if (p === "google") this.apiKeyGoogle = v;
|
||
else if (p === "claude") this.apiKeyClaude = v;
|
||
else if (p === "cloudflare") this.apiKeyCloudflare = v;
|
||
else this.apiKeyOpenRouter = v;
|
||
},
|
||
get masterPrompt() {
|
||
return localStorage.getItem("master_prompt") || "Always respond using markdown.";
|
||
},
|
||
set masterPrompt(v) {
|
||
localStorage.setItem("master_prompt", v || "");
|
||
},
|
||
get titleModel() {
|
||
return localStorage.getItem("title_model") ?? "or:amazon/nova-micro-v1";
|
||
},
|
||
set titleModel(v) {
|
||
localStorage.setItem("title_model", v || "");
|
||
},
|
||
get githubToken() {
|
||
return localStorage.getItem("gh_token") || "";
|
||
},
|
||
set githubToken(v) {
|
||
localStorage.setItem("gh_token", v || "");
|
||
},
|
||
get gcpSA() {
|
||
try {
|
||
return JSON.parse(localStorage.getItem("gcp_sa_json") || "null");
|
||
} catch {
|
||
return null;
|
||
}
|
||
},
|
||
set gcpSA(v) {
|
||
localStorage.setItem("gcp_sa_json", v ? JSON.stringify(v) : "");
|
||
}
|
||
};
|
||
async function init() {
|
||
const u = localStorage.getItem("thread_repo_url") || "";
|
||
el.threadRepoInput.value = u;
|
||
el.threadFolderBtn.classList.toggle("hidden", !u.startsWith("gh://"));
|
||
el.threadBackBtn.classList.toggle("hidden", !u.startsWith("gh://") || u.split("/").length <= 3);
|
||
await THREAD.load();
|
||
await renderThreads();
|
||
await Promise.allSettled(STICKY_SUNES.map((s) => SUNE.fetchDotSune(s)));
|
||
renderSidebar();
|
||
await reflectActiveSune();
|
||
clearChat();
|
||
icons();
|
||
kbBind();
|
||
kbUpdate();
|
||
}
|
||
$(window).on("resize", () => {
|
||
hideThreadPopover();
|
||
hideSunePopover();
|
||
});
|
||
var htmlTabs = {
|
||
index: ["htmlTab_index", "htmlEditor"],
|
||
extension: ["htmlTab_extension", "extensionHtmlEditor"]
|
||
};
|
||
function showHtmlTab(key) {
|
||
Object.entries(htmlTabs).forEach(([k, [tb, pn]]) => {
|
||
const a = k === key;
|
||
el[tb].classList.toggle("border-black", a);
|
||
el[tb].classList.toggle("border-transparent", !a);
|
||
el[tb].classList.toggle("hover:border-gray-300", !a);
|
||
el[pn].classList.toggle("hidden", !a);
|
||
});
|
||
}
|
||
el.htmlTab_index.textContent = "index.html";
|
||
el.htmlTab_extension.textContent = "extension.html";
|
||
el.htmlTab_index.onclick = () => showHtmlTab("index");
|
||
el.htmlTab_extension.onclick = () => showHtmlTab("extension");
|
||
var pullThreads = async () => {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (!u.startsWith("gh://")) return;
|
||
const info = parseGhUrl(u);
|
||
try {
|
||
const items = await ghApi(`${info.apiPath}?ref=${info.branch}`);
|
||
if (!items) {
|
||
THREAD.list = [];
|
||
await THREAD.save();
|
||
} else {
|
||
THREAD.list = items.map((i) => {
|
||
if (i.type === "dir") return {
|
||
id: i.name,
|
||
title: i.name,
|
||
type: "folder",
|
||
updatedAt: 0
|
||
};
|
||
if (i.type === "file" && i.name.endsWith(".md")) return {
|
||
id: i.path,
|
||
title: i.name,
|
||
type: "file",
|
||
updatedAt: 0
|
||
};
|
||
const d = deserializeThreadName(i.name);
|
||
return d ? {
|
||
...d,
|
||
status: "synced"
|
||
} : null;
|
||
}).filter(Boolean);
|
||
await THREAD.save();
|
||
}
|
||
await renderThreads();
|
||
} catch (e) {
|
||
console.error("Auto-pull failed:", e);
|
||
}
|
||
};
|
||
$(el.threadRepoInput).on("change", async () => {
|
||
const u = el.threadRepoInput.value.trim();
|
||
localStorage.setItem("thread_repo_url", u);
|
||
if (state.currentThreadId) {
|
||
state.currentThreadId = null;
|
||
clearChat();
|
||
}
|
||
el.threadFolderBtn.classList.toggle("hidden", !u.startsWith("gh://"));
|
||
el.threadBackBtn.classList.toggle("hidden", !u.startsWith("gh://") || u.split("/").length <= 3);
|
||
if (u.startsWith("gh://")) await pullThreads();
|
||
else {
|
||
await THREAD.load();
|
||
await renderThreads();
|
||
}
|
||
});
|
||
$(el.threadBackBtn).on("click", () => {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (!u.startsWith("gh://")) return;
|
||
const p = u.split("/");
|
||
if (p.length > 3) {
|
||
p.pop();
|
||
el.threadRepoInput.value = p.join("/");
|
||
el.threadRepoInput.dispatchEvent(new Event("change"));
|
||
}
|
||
});
|
||
$(el.threadFolderBtn).on("click", async () => {
|
||
const n = prompt("Folder name:");
|
||
if (!n) return;
|
||
THREAD.list.unshift({
|
||
id: n.trim(),
|
||
title: n.trim(),
|
||
type: "folder",
|
||
updatedAt: Date.now()
|
||
});
|
||
await THREAD.save();
|
||
await renderThreads();
|
||
});
|
||
$(el.threadSyncBtn).on("click", async () => {
|
||
const u = el.threadRepoInput.value.trim();
|
||
if (!u.startsWith("gh://")) return;
|
||
const mode = confirm("Sync Threads:\nOK = Upload (Push)\nCancel = Download (Pull)");
|
||
const info = parseGhUrl(u);
|
||
try {
|
||
if (mode) {
|
||
const remoteItems = await ghApi(`${info.apiPath}?ref=${info.branch}`) || [], remoteMap = {};
|
||
remoteItems.forEach((i) => {
|
||
const d = deserializeThreadName(i.name);
|
||
if (d) remoteMap[d.id] = {
|
||
name: i.name,
|
||
sha: i.sha
|
||
};
|
||
});
|
||
const toRemove = [];
|
||
for (const t of THREAD.list) {
|
||
if (t.status === "deleted") {
|
||
if (remoteMap[t.id]) {
|
||
await ghApi(`${info.apiPath}/${remoteMap[t.id].name}`, "DELETE", {
|
||
message: `Delete thread ${t.id}`,
|
||
sha: remoteMap[t.id].sha,
|
||
branch: info.branch
|
||
});
|
||
await localforage.removeItem("rem_t_" + t.id);
|
||
}
|
||
toRemove.push(t.id);
|
||
continue;
|
||
}
|
||
if (t.type !== "thread") continue;
|
||
if (t.status === "modified" || t.status === "new") {
|
||
const newName = serializeThreadName(t), msgs = await localforage.getItem("rem_t_" + t.id);
|
||
if (remoteMap[t.id] && remoteMap[t.id].name !== newName) await ghApi(`${info.apiPath}/${remoteMap[t.id].name}`, "DELETE", {
|
||
message: `Rename thread ${t.id}`,
|
||
sha: remoteMap[t.id].sha,
|
||
branch: info.branch
|
||
});
|
||
const x = await ghApi(`${info.apiPath}/${newName}?ref=${info.branch}`);
|
||
await ghApi(`${info.apiPath}/${newName}`, "PUT", {
|
||
message: `Sync thread ${t.id}`,
|
||
content: utob(JSON.stringify(msgs, null, 2)),
|
||
branch: info.branch,
|
||
sha: x?.sha
|
||
});
|
||
t.status = "synced";
|
||
}
|
||
}
|
||
THREAD.list = THREAD.list.filter((x) => !toRemove.includes(x.id));
|
||
await THREAD.save();
|
||
alert("Pushed to GitHub.");
|
||
} else {
|
||
await pullThreads();
|
||
alert("Pulled from GitHub.");
|
||
}
|
||
await renderThreads();
|
||
} catch (e) {
|
||
alert("Sync failed: " + e.message);
|
||
}
|
||
});
|
||
init();
|
||
var accountTabs = {
|
||
General: ["accountTabGeneral", "accountPanelGeneral"],
|
||
API: ["accountTabAPI", "accountPanelAPI"],
|
||
User: ["accountTabUser", "accountPanelUser"]
|
||
};
|
||
function showAccountTab(key) {
|
||
Object.entries(accountTabs).forEach(([k, [tb, pn]]) => {
|
||
el[tb].classList.toggle("border-black", k === key);
|
||
el[pn].classList.toggle("hidden", k !== key);
|
||
});
|
||
}
|
||
function openAccountSettings() {
|
||
el.set_provider.value = USER.provider || "openrouter";
|
||
el.set_api_key_or.value = USER.apiKeyOpenRouter || "";
|
||
el.set_api_key_oai.value = USER.apiKeyOpenAI || "";
|
||
el.set_api_key_g.value = USER.apiKeyGoogle || "";
|
||
el.set_api_key_claude.value = USER.apiKeyClaude || "";
|
||
el.set_api_key_cf.value = USER.apiKeyCloudflare || "";
|
||
el.set_master_prompt.value = USER.masterPrompt || "";
|
||
el.set_title_model.value = USER.titleModel;
|
||
el.set_gh_token.value = USER.githubToken || "";
|
||
const sa = USER.gcpSA;
|
||
el.gcpSAUploadBtn.textContent = sa && sa.project_id ? `Uploaded: ${sa.project_id}` : "Upload .json";
|
||
el.set_user_name.value = USER.name;
|
||
el.userAvatarPreview.src = USER.avatar || "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
|
||
el.userAvatarPreview.classList.toggle("bg-gray-200", !USER.avatar);
|
||
showAccountTab("General");
|
||
el.accountSettingsModal.classList.remove("hidden");
|
||
}
|
||
function closeAccountSettings() {
|
||
el.accountSettingsModal.classList.add("hidden");
|
||
}
|
||
$(el.accountSettingsOption).on("click", () => {
|
||
el.userMenu.classList.add("hidden");
|
||
openAccountSettings();
|
||
});
|
||
$(el.closeAccountSettings).on("click", closeAccountSettings);
|
||
$(el.cancelAccountSettings).on("click", closeAccountSettings);
|
||
$(el.accountSettingsModal).on("click", (e) => {
|
||
if (e.target === el.accountSettingsModal || e.target.classList.contains("bg-black/30")) closeAccountSettings();
|
||
});
|
||
$(el.accountSettingsForm).on("submit", (e) => {
|
||
e.preventDefault();
|
||
USER.provider = el.set_provider.value || "openrouter";
|
||
USER.apiKeyOpenRouter = String(el.set_api_key_or.value || "").trim();
|
||
USER.apiKeyOpenAI = String(el.set_api_key_oai.value || "").trim();
|
||
USER.apiKeyGoogle = String(el.set_api_key_g.value || "").trim();
|
||
USER.apiKeyClaude = String(el.set_api_key_claude.value || "").trim();
|
||
USER.apiKeyCloudflare = String(el.set_api_key_cf.value || "").trim();
|
||
USER.masterPrompt = String(el.set_master_prompt.value || "").trim();
|
||
USER.titleModel = String(el.set_title_model.value || "").trim();
|
||
USER.githubToken = String(el.set_gh_token.value || "").trim();
|
||
USER.name = String(el.set_user_name.value || "").trim();
|
||
closeAccountSettings();
|
||
});
|
||
el.gcpSAUploadBtn.onclick = () => el.gcpSAInput.click();
|
||
el.gcpSAInput.onchange = async (e) => {
|
||
const f = e.target.files?.[0];
|
||
if (!f) return;
|
||
try {
|
||
const t = await f.text(), d = JSON.parse(t);
|
||
if (!d.project_id) throw new Error("Invalid");
|
||
USER.gcpSA = d;
|
||
el.gcpSAUploadBtn.textContent = `Uploaded: ${d.project_id}`;
|
||
alert("GCP SA loaded.");
|
||
} catch {
|
||
alert("Failed to load GCP SA.");
|
||
}
|
||
};
|
||
$(el.accountPanelAPI).on("click", (e) => {
|
||
const b = e.target.closest("[data-reveal-for]");
|
||
if (!b) return;
|
||
const i = document.getElementById(b.dataset.revealFor);
|
||
if (!i) return;
|
||
const p = i.type === "password";
|
||
i.type = p ? "text" : "password";
|
||
b.querySelector("i").setAttribute("data-lucide", p ? "eye-off" : "eye");
|
||
lucide.createIcons();
|
||
});
|
||
el.accountTabGeneral.onclick = () => showAccountTab("General");
|
||
el.accountTabAPI.onclick = () => showAccountTab("API");
|
||
el.accountTabUser.onclick = () => showAccountTab("User");
|
||
el.setUserAvatarBtn.onclick = () => el.userAvatarInput.click();
|
||
el.userAvatarInput.onchange = async (e) => {
|
||
const f = e.target.files?.[0];
|
||
if (!f) return;
|
||
try {
|
||
const dataUrl = await imgToWebp(f);
|
||
USER.avatar = dataUrl;
|
||
el.userAvatarPreview.src = dataUrl;
|
||
el.userAvatarPreview.classList.remove("bg-gray-200");
|
||
} catch {
|
||
alert("Failed to process image.");
|
||
}
|
||
};
|
||
el.exportAccountSettings.onclick = () => dl(`sune-account-${ts()}.json`, {
|
||
v: 1,
|
||
provider: USER.provider,
|
||
apiKeyOpenRouter: USER.apiKeyOpenRouter,
|
||
apiKeyOpenAI: USER.apiKeyOpenAI,
|
||
apiKeyGoogle: USER.apiKeyGoogle,
|
||
apiKeyClaude: USER.apiKeyClaude,
|
||
apiKeyCloudflare: USER.apiKeyCloudflare,
|
||
masterPrompt: USER.masterPrompt,
|
||
titleModel: USER.titleModel,
|
||
githubToken: USER.githubToken,
|
||
gcpSA: USER.gcpSA,
|
||
userName: USER.name,
|
||
userAvatar: USER.avatar
|
||
});
|
||
el.importAccountSettings.onclick = () => {
|
||
el.importAccountSettingsInput.value = "";
|
||
el.importAccountSettingsInput.click();
|
||
};
|
||
el.importAccountSettingsInput.onchange = async (e) => {
|
||
const f = e.target.files?.[0];
|
||
if (!f) return;
|
||
try {
|
||
const d = JSON.parse(await f.text());
|
||
if (!d || typeof d !== "object") throw new Error("Invalid");
|
||
Object.entries({
|
||
provider: "provider",
|
||
apiKeyOpenRouter: "apiKeyOR",
|
||
apiKeyOpenAI: "apiKeyOAI",
|
||
apiKeyGoogle: "apiKeyG",
|
||
apiKeyClaude: "apiKeyC",
|
||
apiKeyCloudflare: "apiKeyCF",
|
||
masterPrompt: "masterPrompt",
|
||
titleModel: "titleModel",
|
||
githubToken: "ghToken",
|
||
name: "userName",
|
||
avatar: "userAvatar",
|
||
gcpSA: "gcpSA"
|
||
}).forEach(([p, k]) => {
|
||
const v = d[p] ?? d[k];
|
||
if (typeof v === "string" || p === "gcpSA" && typeof v === "object" && v) USER[p] = v;
|
||
});
|
||
openAccountSettings();
|
||
alert("Imported.");
|
||
} catch {
|
||
alert("Import failed");
|
||
}
|
||
};
|
||
var getBubbleById = (id) => el.messages.querySelector(`.msg-bubble[data-mid="${CSS.escape(id)}"]`);
|
||
async function syncActiveThread() {
|
||
const id = THREAD.getLastAssistantMessageId();
|
||
if (!id) return false;
|
||
if (await cacheStore.getItem(id) === "done") {
|
||
if (state.busy) {
|
||
setBtnSend();
|
||
state.busy = false;
|
||
state.controller = null;
|
||
}
|
||
return false;
|
||
}
|
||
if (!state.busy) {
|
||
state.busy = true;
|
||
state.controller = { abort: () => {
|
||
const ws = new WebSocket(HTTP_BASE.replace("https", "wss"));
|
||
ws.onopen = function() {
|
||
this.send(JSON.stringify({
|
||
type: "stop",
|
||
rid: id
|
||
}));
|
||
this.close();
|
||
};
|
||
} };
|
||
setBtnStop();
|
||
}
|
||
const bubble = getBubbleById(id);
|
||
if (!bubble) return false;
|
||
const msgIdx = state.messages.findIndex((x) => x.id === id);
|
||
const localText = msgIdx >= 0 ? partsToText(state.messages[msgIdx]) : bubble.textContent || "";
|
||
const j = await fetch(HTTP_BASE + "?uid=" + encodeURIComponent(id)).then((r) => r.ok ? r.json() : null).catch(() => null);
|
||
const finalise = (t, c, imgs) => {
|
||
renderMarkdown(bubble, partsToText({
|
||
content: c,
|
||
images: imgs
|
||
}), { enhance: false });
|
||
enhanceCodeBlocks(bubble, true);
|
||
if (msgIdx >= 0) {
|
||
state.messages[msgIdx].content = c;
|
||
state.messages[msgIdx].images = imgs;
|
||
} else state.messages.push({
|
||
id,
|
||
role: "assistant",
|
||
content: c,
|
||
images: imgs,
|
||
...activeMeta()
|
||
});
|
||
THREAD.persist();
|
||
setBtnSend();
|
||
state.busy = false;
|
||
cacheStore.setItem(id, "done");
|
||
state.controller = null;
|
||
el.composer.dispatchEvent(new CustomEvent("sune:newSuneResponse", { detail: { message: state.messages.find((m) => m.id === id) } }));
|
||
};
|
||
if (!j || j.rid !== id) {
|
||
if (j && j.error) {
|
||
const t = localText + "\n\n" + j.error;
|
||
finalise(t, [{
|
||
type: "text",
|
||
text: t
|
||
}]);
|
||
}
|
||
return false;
|
||
}
|
||
const serverText = j.text || "", isDone = j.error || j.done || j.phase === "done";
|
||
const finalText = serverText.length >= localText.length || isDone ? serverText : localText;
|
||
const display = partsToText({
|
||
content: [{
|
||
type: "text",
|
||
text: finalText
|
||
}],
|
||
images: j.images
|
||
});
|
||
if (display) renderMarkdown(bubble, display, { enhance: false });
|
||
if (isDone) {
|
||
if (finalText !== localText) finalise(finalText, [{
|
||
type: "text",
|
||
text: finalText
|
||
}], j.images);
|
||
else {
|
||
await cacheStore.setItem(id, "done");
|
||
if (state.busy) {
|
||
setBtnSend();
|
||
state.busy = false;
|
||
state.controller = null;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
await cacheStore.setItem(id, "busy");
|
||
return true;
|
||
}
|
||
var syncLoopRunning = false;
|
||
async function syncWhileBusy() {
|
||
if (syncLoopRunning || document.visibilityState === "hidden") return;
|
||
syncLoopRunning = true;
|
||
try {
|
||
while (await syncActiveThread()) await new Promise((r) => setTimeout(r, 1500));
|
||
} finally {
|
||
syncLoopRunning = false;
|
||
}
|
||
}
|
||
var onForeground = () => {
|
||
if (document.visibilityState !== "visible") return;
|
||
state.controller?.disconnect?.();
|
||
if (state.busy) syncWhileBusy();
|
||
};
|
||
$(document).on("visibilitychange", onForeground);
|
||
$(el.copySystemPrompt).on("click", async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(el.set_system_prompt.value || "");
|
||
} catch {}
|
||
});
|
||
$(el.pasteSystemPrompt).on("click", async () => {
|
||
try {
|
||
el.set_system_prompt.value = await navigator.clipboard.readText();
|
||
} catch {}
|
||
});
|
||
var getActiveHtmlParts = () => !el.htmlEditor.classList.contains("hidden") ? [el.htmlEditor, jars.html] : [el.extensionHtmlEditor, jars.extension];
|
||
$(el.copyHTML).on("click", async () => {
|
||
try {
|
||
await navigator.clipboard.writeText(getActiveHtmlParts()[0].textContent || "");
|
||
} catch {}
|
||
});
|
||
$(el.pasteHTML).on("click", async () => {
|
||
try {
|
||
const t = await navigator.clipboard.readText();
|
||
const [editor, jar] = getActiveHtmlParts();
|
||
if (jar && jar.updateCode) jar.updateCode(t);
|
||
else if (editor) editor.textContent = t;
|
||
} catch {}
|
||
});
|
||
Object.assign(window, {
|
||
icons,
|
||
haptic,
|
||
clamp,
|
||
num,
|
||
int,
|
||
gid,
|
||
esc,
|
||
positionPopover,
|
||
sid,
|
||
fmtSize,
|
||
asDataURL,
|
||
b64,
|
||
makeSune,
|
||
getModelShort,
|
||
resolveSuneSrc,
|
||
processSuneIncludes,
|
||
renderSuneHTML,
|
||
reflectActiveSune,
|
||
suneRow,
|
||
enhanceCodeBlocks,
|
||
getSuneLabel,
|
||
_createMessageRow,
|
||
msgRow,
|
||
partsToText,
|
||
addSuneBubbleStreaming,
|
||
clearChat,
|
||
payloadWithSampling,
|
||
setBtnStop,
|
||
setBtnSend,
|
||
localDemoReply,
|
||
titleFrom,
|
||
serializeThreadName,
|
||
deserializeThreadName,
|
||
ensureThreadOnFirstUser,
|
||
generateTitleWithAI,
|
||
threadRow,
|
||
renderThreads,
|
||
hideThreadPopover,
|
||
showThreadPopover,
|
||
hideSunePopover,
|
||
showSunePopover,
|
||
updateAttachBadge,
|
||
toAttach,
|
||
ensureJars,
|
||
openSettings,
|
||
closeSettings,
|
||
showTab,
|
||
dl,
|
||
ts,
|
||
kbUpdate,
|
||
kbBind,
|
||
activeMeta,
|
||
init,
|
||
showHtmlTab,
|
||
showAccountTab,
|
||
openAccountSettings,
|
||
closeAccountSettings,
|
||
getBubbleById,
|
||
syncActiveThread,
|
||
syncWhileBusy,
|
||
onForeground,
|
||
getActiveHtmlParts,
|
||
imgToWebp,
|
||
cacheStore,
|
||
ghApi,
|
||
parseGhUrl,
|
||
pullThreads
|
||
});
|
||
//#endregion
|