Spaces:
Sleeping
Sleeping
| /* Intyoza chat page. Needs common.js loaded first (t, getLang, setLang, setTheme, ...). */ | |
| let chatId = null, user = null, userInfo = null, guest = [], authMode = "login", allChats = []; | |
| const $ = id => document.getElementById(id); | |
| async function api(path, opts = {}) { | |
| try { | |
| const res = await fetch(path, { headers: { "Content-Type": "application/json" }, credentials: "include", ...opts }); | |
| return await res.json(); | |
| } catch (e) { | |
| return { ok: false, message: t("net_err") }; | |
| } | |
| } | |
| const initial = n => (n || "?")[0].toUpperCase(); | |
| const avatarMarkup = (n, a) => a ? `<img src="${a}" alt="">` : initial(n); | |
| const displayTitle = s => (s === "New chat" ? t("new_chat") : s); | |
| let toastTimer; | |
| function toast(msg) { | |
| let el = $("toast"); | |
| if (!el) { el = document.createElement("div"); el.id = "toast"; document.body.appendChild(el); } | |
| el.textContent = msg; | |
| el.classList.add("show"); | |
| clearTimeout(toastTimer); | |
| toastTimer = setTimeout(() => el.classList.remove("show"), 2200); | |
| } | |
| /* ---------- message formatting ---------- */ | |
| function escapeHtml(str) { | |
| return str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">"); | |
| } | |
| function formatMessage(text) { | |
| let safe = escapeHtml(text); | |
| safe = safe.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"); | |
| safe = safe.replace(/\*(.+?)\*/g, "<em>$1</em>"); | |
| // words with a circumflex = amasaku/ubutinde marks (any letters, apostrophes allowed) | |
| safe = safe.replace(/[\p{L}']*[âêîôûÂÊÎÔÛ][\p{L}']*/gu, '<span class="amasaku">$&</span>'); | |
| return safe; | |
| } | |
| /* ---------- icons ---------- */ | |
| const ICON = { | |
| copy: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`, | |
| check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`, | |
| del: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`, | |
| mark: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>`, | |
| }; | |
| /* ---------- messages ---------- */ | |
| function makeRow(id, role, text, imageUrl, isError, sources) { | |
| const row = document.createElement("div"); | |
| row.className = "row " + (role === "user" ? "user" : "bot"); | |
| if (id) row.dataset.id = id; | |
| const b = document.createElement("div"); | |
| b.className = "bubble" + (isError ? " err" : ""); | |
| if (imageUrl) { | |
| const img = document.createElement("img"); | |
| img.src = imageUrl; img.className = "bubble-image"; | |
| b.appendChild(img); | |
| } | |
| if (text) { | |
| const p = document.createElement("div"); | |
| p.innerHTML = formatMessage(text); | |
| b.appendChild(p); | |
| } | |
| const acts = document.createElement("div"); | |
| acts.className = "acts"; | |
| const mkBtn = (icon, titleKey) => { | |
| const el = document.createElement("button"); | |
| el.className = "act"; el.title = t(titleKey); el.dataset.titleKey = titleKey; | |
| el.innerHTML = icon; | |
| return el; | |
| }; | |
| const copy = mkBtn(ICON.copy, "copy"); | |
| copy.onclick = () => { | |
| navigator.clipboard.writeText(text || ""); | |
| copy.innerHTML = ICON.check; | |
| setTimeout(() => (copy.innerHTML = ICON.copy), 1400); | |
| }; | |
| acts.appendChild(copy); | |
| if (role !== "user" && !isError && text) { | |
| const mark = mkBtn(ICON.mark, "save_phrase"); | |
| mark.onclick = async () => { | |
| if (!user) { toast(t("saved_login")); return; } | |
| const d = await api("/api/saved", { method: "POST", body: JSON.stringify({ text }) }); | |
| if (d.ok) { mark.classList.add("on"); toast(t("saved_ok")); } | |
| }; | |
| acts.appendChild(mark); | |
| } | |
| const del = mkBtn(ICON.del, "del"); | |
| del.onclick = async () => { | |
| if (row.dataset.id) await api(`/api/messages/${row.dataset.id}`, { method: "DELETE" }); | |
| row.remove(); checkEmpty(); | |
| }; | |
| acts.appendChild(del); | |
| const src = renderSources(sources); | |
| if (src) row.append(b, src, acts); else row.append(b, acts); | |
| return row; | |
| } | |
| /* collapsible "Inkomoko (n)" list under a reply (news from igihe.com etc.) */ | |
| function renderSources(sources) { | |
| if (!sources || !sources.length) return null; | |
| const d = document.createElement("details"); | |
| d.className = "sources"; | |
| const sm = document.createElement("summary"); | |
| sm.textContent = `${t("sources_label")} (${sources.length})`; | |
| const ul = document.createElement("ul"); | |
| sources.forEach(s => { | |
| const li = document.createElement("li"); | |
| const a = document.createElement("a"); | |
| a.href = s.url; a.target = "_blank"; a.rel = "noopener noreferrer"; a.textContent = s.title; | |
| const host = document.createElement("small"); | |
| let h = ""; try { h = new URL(s.url).hostname.replace(/^www\./, ""); } catch (e) {} | |
| host.textContent = [h, s.section].filter(Boolean).join(" · "); | |
| li.append(a, host); | |
| ul.appendChild(li); | |
| }); | |
| d.append(sm, ul); | |
| return d; | |
| } | |
| /* suggested follow-up questions under the latest reply */ | |
| let suggestSeq = 0; | |
| function clearSuggestions() { suggestSeq++; document.querySelectorAll(".suggest").forEach(e => e.remove()); } | |
| function showSuggestions(list) { | |
| document.querySelectorAll(".suggest").forEach(e => e.remove()); | |
| if (!list || !list.length) return; | |
| const box = document.createElement("div"); | |
| box.className = "suggest"; | |
| const lab = document.createElement("p"); | |
| lab.className = "suggest-label"; lab.textContent = t("suggest_label"); | |
| box.appendChild(lab); | |
| list.forEach(q => { | |
| const b = document.createElement("button"); | |
| b.className = "suggest-chip"; b.textContent = q; | |
| b.onclick = () => { $("msg-box").value = q; send(); }; | |
| box.appendChild(b); | |
| }); | |
| $("chatbox").appendChild(box); | |
| $("chatbox").scrollTop = $("chatbox").scrollHeight; | |
| } | |
| async function fetchSuggestions(userText, reply, messageId) { | |
| const seq = ++suggestSeq; | |
| const d = await api("/api/suggest", { method: "POST", body: JSON.stringify({ user: userText, assistant: reply, message_id: messageId || null }) }); | |
| if (seq === suggestSeq && d.ok) showSuggestions(d.suggestions); | |
| } | |
| function checkEmpty() { | |
| const box = $("chatbox"); | |
| if (!box.querySelector(".row") && !box.querySelector("#empty-state")) renderEmptyState(); | |
| } | |
| function renderEmptyState() { | |
| $("chatbox").innerHTML = `<div id="empty-state" class="empty-state"> | |
| <div class="empty-orb"></div><h2 data-i18n="empty_h"></h2> | |
| <p data-i18n="empty_p"></p> | |
| <div class="chip-row"> | |
| <button class="chip" data-i18n="chip1"></button> | |
| <button class="chip" data-i18n="chip2"></button> | |
| <button class="chip" data-i18n="chip3"></button> | |
| <button class="chip" data-i18n="chip4"></button> | |
| </div></div>`; | |
| applyI18n(); | |
| bindChips(); | |
| } | |
| function bindChips() { | |
| document.querySelectorAll(".chip").forEach(c => c.onclick = () => { $("msg-box").value = c.textContent; send(); }); | |
| } | |
| function render(list) { | |
| const box = $("chatbox"); box.innerHTML = ""; | |
| if (!list.length) { renderEmptyState(); return; } | |
| list.forEach(m => box.appendChild(makeRow(m.id, m.role, m.content, null, false, m.sources))); | |
| const last = list[list.length - 1]; | |
| if (last && last.role !== "user" && last.suggestions && last.suggestions.length) showSuggestions(last.suggestions); | |
| box.scrollTop = box.scrollHeight; | |
| } | |
| /* ---------- thinking indicator (rotating simple phrases) ---------- */ | |
| let thinkTimer = null; | |
| function showTyping() { | |
| const r = document.createElement("div"); | |
| r.className = "row bot typing"; r.id = "typing"; | |
| r.innerHTML = `<div class="bubble"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="think-text"></span></div>`; | |
| $("chatbox").appendChild(r); | |
| $("chatbox").scrollTop = $("chatbox").scrollHeight; | |
| const el = r.querySelector(".think-text"); | |
| const phrases = t("think"); | |
| let i = 0; | |
| el.textContent = phrases[0]; | |
| thinkTimer = setInterval(() => { | |
| el.classList.add("fade"); | |
| setTimeout(() => { i = (i + 1) % phrases.length; el.textContent = phrases[i]; el.classList.remove("fade"); }, 260); | |
| }, 2600); | |
| } | |
| function hideTyping() { | |
| clearInterval(thinkTimer); thinkTimer = null; | |
| $("typing")?.remove(); | |
| } | |
| /* ---------- sidebar ---------- */ | |
| function closeMenus() { | |
| document.querySelectorAll(".menu.open").forEach(m => m.classList.remove("open")); | |
| document.querySelectorAll(".dots-btn.open").forEach(b => b.classList.remove("open")); | |
| } | |
| document.addEventListener("click", closeMenus); | |
| $("chat-list").addEventListener("scroll", closeMenus, { passive: true }); | |
| function paintChats(list) { | |
| const wrap = $("chat-list"); wrap.innerHTML = ""; | |
| $("chat-empty").classList.toggle("hidden", list.length > 0 || !user); | |
| list.forEach(c => { | |
| const row = document.createElement("div"); | |
| row.className = "chat-row" + (c.id === chatId ? " active" : ""); | |
| const name = document.createElement("div"); | |
| name.className = "chat-name"; name.textContent = displayTitle(c.title); name.title = displayTitle(c.title); | |
| name.onclick = () => openChat(c.id, c.title); | |
| const dots = document.createElement("button"); | |
| dots.className = "dots-btn"; | |
| dots.innerHTML = `<svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><circle cx="12" cy="5" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="12" cy="19" r="1.7"/></svg>`; | |
| const menu = document.createElement("div"); | |
| menu.className = "menu"; | |
| menu.innerHTML = ` | |
| <div class="menu-item" data-a="rename"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>${t("rename")}</div> | |
| <div class="menu-item danger" data-a="delete"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>${t("del")}</div>`; | |
| dots.onclick = e => { | |
| e.stopPropagation(); | |
| const wasOpen = menu.classList.contains("open"); | |
| closeMenus(); | |
| if (!wasOpen) { | |
| const r = dots.getBoundingClientRect(); | |
| menu.style.top = (r.bottom + 6) + "px"; | |
| menu.style.left = Math.min(r.left, window.innerWidth - 170) + "px"; | |
| menu.classList.add("open"); | |
| dots.classList.add("open"); | |
| } | |
| }; | |
| menu.querySelector('[data-a="rename"]').onclick = e => { e.stopPropagation(); closeMenus(); inlineRename(row, name, c); }; | |
| menu.querySelector('[data-a="delete"]').onclick = async e => { | |
| e.stopPropagation(); closeMenus(); | |
| await api(`/api/chats/${c.id}`, { method: "DELETE" }); | |
| const rest = await loadChats(); | |
| if (c.id === chatId) { rest.length ? openChat(rest[0].id, rest[0].title) : newChat(); } | |
| }; | |
| row.append(dots, name, menu); wrap.appendChild(row); | |
| }); | |
| } | |
| function inlineRename(row, name, c) { | |
| const inp = document.createElement("input"); | |
| inp.className = "rename-input"; inp.value = displayTitle(c.title); | |
| row.replaceChild(inp, name); inp.focus(); inp.select(); | |
| let done = false; | |
| const commit = async () => { | |
| if (done) return; done = true; | |
| const title = inp.value.trim() || "New chat"; | |
| await api(`/api/chats/${c.id}`, { method: "PATCH", body: JSON.stringify({ title }) }); | |
| if (c.id === chatId) $("chat-title").textContent = displayTitle(title); | |
| loadChats(); | |
| }; | |
| inp.onkeydown = e => { if (e.key === "Enter") inp.blur(); if (e.key === "Escape") { done = true; loadChats(); } }; | |
| inp.onblur = commit; | |
| inp.onclick = e => e.stopPropagation(); | |
| } | |
| async function loadChats() { | |
| const d = await api("/api/chats"); | |
| allChats = d.chats || []; | |
| applySearch(); | |
| return allChats; | |
| } | |
| function applySearch() { | |
| const q = $("chat-search").value.trim().toLowerCase(); | |
| paintChats(q ? allChats.filter(c => displayTitle(c.title).toLowerCase().includes(q)) : allChats); | |
| } | |
| $("chat-search").oninput = applySearch; | |
| async function openChat(id, title) { | |
| chatId = id; $("chat-title").textContent = displayTitle(title); | |
| const d = await api(`/api/chats/${id}/messages`); | |
| render(d.messages || []); applySearch(); | |
| } | |
| async function newChat() { | |
| if (!user) { chatId = null; guest = []; render([]); $("chat-title").textContent = t("new_chat"); return; } | |
| const d = await api("/api/chats", { method: "POST" }); | |
| if (d.ok) { chatId = d.id; $("chat-title").textContent = displayTitle(d.title); render([]); loadChats(); } | |
| } | |
| /* ---------- attach image ---------- */ | |
| let pendingImage = null; | |
| $("attach-btn").onclick = () => $("attach-input").click(); | |
| $("attach-input").onchange = e => { | |
| const f = e.target.files[0]; if (!f) return; | |
| if (f.size > 4_000_000) { alert(t("img_big")); return; } | |
| const r = new FileReader(); | |
| r.onload = () => { | |
| pendingImage = r.result; | |
| $("attach-thumb").src = pendingImage; | |
| $("attach-preview").classList.remove("hidden"); | |
| }; | |
| r.readAsDataURL(f); | |
| }; | |
| $("attach-remove").onclick = () => { | |
| pendingImage = null; | |
| $("attach-input").value = ""; | |
| $("attach-preview").classList.add("hidden"); | |
| }; | |
| /* ---------- microphone (Web Speech API) ---------- */ | |
| const SR = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| let recognizer = null, listening = false; | |
| if (SR) { | |
| recognizer = new SR(); | |
| recognizer.continuous = true; | |
| recognizer.interimResults = true; | |
| recognizer.onresult = e => { | |
| let transcript = ""; | |
| for (let i = 0; i < e.results.length; i++) transcript += e.results[i][0].transcript; | |
| $("msg-box").value = transcript; | |
| $("msg-box").dispatchEvent(new Event("input")); | |
| }; | |
| recognizer.onend = () => { listening = false; $("mic-btn").classList.remove("recording"); }; | |
| recognizer.onerror = e => { | |
| listening = false; $("mic-btn").classList.remove("recording"); | |
| if (e.error === "not-allowed") alert(t("mic_blocked")); | |
| if (e.error === "language-not-supported") toast(t("mic_lang")); | |
| }; | |
| } else { | |
| $("mic-btn").style.display = "none"; | |
| } | |
| $("mic-btn").onclick = () => { | |
| if (!recognizer) return; | |
| if (listening) { recognizer.stop(); return; } | |
| // Speech language follows the interface language (Kinyarwanda support depends on the browser). | |
| recognizer.lang = getLang() === "rw" ? "rw-RW" : "en-US"; | |
| try { recognizer.start(); listening = true; $("mic-btn").classList.add("recording"); } | |
| catch (e) { /* already running */ } | |
| }; | |
| /* ---------- send ---------- */ | |
| let activeController = null; | |
| const sendIconSVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>`; | |
| const stopIconSVG = `<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`; | |
| let thinking = false; | |
| function setThinking(on) { | |
| thinking = on; | |
| const btn = $("send-btn"); | |
| if (on) { | |
| btn.innerHTML = stopIconSVG; btn.title = t("stop"); | |
| btn.classList.add("stopping"); | |
| btn.onclick = () => { if (activeController) activeController.abort(); }; | |
| } else { | |
| btn.innerHTML = sendIconSVG; btn.title = t("send"); | |
| btn.classList.remove("stopping"); | |
| btn.onclick = send; | |
| } | |
| } | |
| function aiErrorText(d) { | |
| if (d.code === "rate_limited") return t("rate_limited"); | |
| if (d.code && I18N_HAS("err_" + d.code)) return t("err_" + d.code); | |
| return d.message || t("something_wrong"); | |
| } | |
| const I18N_HAS = k => t(k) !== k; | |
| async function send() { | |
| if (thinking) return; | |
| const box = $("msg-box"); | |
| const text = box.value.trim(); | |
| const imageToSend = pendingImage; | |
| if (!text && !imageToSend) return; | |
| if (listening && recognizer) recognizer.stop(); | |
| clearSuggestions(); | |
| box.value = ""; box.style.height = "auto"; | |
| $("empty-state")?.remove(); | |
| const userRow = makeRow(null, "user", text, imageToSend); | |
| $("chatbox").appendChild(userRow); | |
| $("chatbox").scrollTop = $("chatbox").scrollHeight; | |
| // No "mode" any more: the tutor adapts to the learner by itself on the server. | |
| const payload = { message: text }; | |
| if (imageToSend) payload.image = imageToSend; | |
| if (user && chatId) payload.chat_id = chatId; else payload.history = guest.slice(-20); | |
| pendingImage = null; $("attach-input").value = ""; $("attach-preview").classList.add("hidden"); | |
| showTyping(); | |
| setThinking(true); | |
| activeController = new AbortController(); | |
| let d; | |
| try { | |
| const res = await fetch("/api/message", { | |
| method: "POST", headers: { "Content-Type": "application/json" }, | |
| credentials: "include", body: JSON.stringify(payload), | |
| signal: activeController.signal, | |
| }); | |
| d = await res.json(); | |
| } catch (e) { | |
| if (e.name === "AbortError") { hideTyping(); setThinking(false); return; } | |
| d = { ok: false, message: t("net_err") }; | |
| } | |
| setThinking(false); | |
| hideTyping(); | |
| if (!d.ok) { | |
| $("chatbox").appendChild(makeRow(null, "bot", aiErrorText(d), null, true)); | |
| $("chatbox").scrollTop = $("chatbox").scrollHeight; | |
| return; | |
| } | |
| if (d.user_message_id) userRow.dataset.id = d.user_message_id; | |
| $("chatbox").appendChild(makeRow(d.assistant_message_id, "bot", d.reply, null, false, d.sources)); | |
| $("chatbox").scrollTop = $("chatbox").scrollHeight; | |
| fetchSuggestions(text, d.reply, d.assistant_message_id); | |
| if (d.new_title) { $("chat-title").textContent = displayTitle(d.new_title); loadChats(); } | |
| else if (user) loadChats(); | |
| if (!user) guest.push({ role: "user", content: text }, { role: "assistant", content: d.reply }); | |
| } | |
| /* ---------- auth ---------- */ | |
| function paintAuth() { | |
| const login = authMode === "login"; | |
| $("auth-title").textContent = t(login ? "auth_title_login" : "auth_title_signup"); | |
| $("auth-sub").textContent = t(login ? "auth_sub_login" : "auth_sub_signup"); | |
| $("auth-submit").querySelector(".btn-label").textContent = t(login ? "login" : "signup"); | |
| $("switch-text").textContent = t(login ? "new_here" : "have_acct"); | |
| $("auth-switch").textContent = t(login ? "create_acct" : "login_instead"); | |
| } | |
| function setAuthMode(m) { | |
| authMode = m; | |
| paintAuth(); | |
| $("auth-status").textContent = ""; $("auth-status").className = "status"; | |
| } | |
| function loading(on) { | |
| const b = $("auth-submit"); | |
| b.disabled = on; | |
| b.querySelector(".spinner").classList.toggle("hidden", !on); | |
| b.querySelector(".btn-label").style.opacity = on ? ".55" : "1"; | |
| } | |
| $("auth-switch").onclick = () => setAuthMode(authMode === "login" ? "signup" : "login"); | |
| $("login-nav-btn").onclick = () => { setAuthMode("login"); showAuth(); }; | |
| $("signup-nav-btn").onclick = () => { setAuthMode("signup"); showAuth(); }; | |
| function showAuth() { $("auth-view").classList.remove("hidden"); $("app-view").classList.add("hidden"); } | |
| function showApp() { $("auth-view").classList.add("hidden"); $("app-view").classList.remove("hidden"); } | |
| function authMessage(d) { | |
| if (d.code && I18N_HAS("err_" + d.code)) return t("err_" + d.code); | |
| return d.message || ""; | |
| } | |
| $("auth-submit").onclick = async () => { | |
| const username = $("auth-username").value.trim(); | |
| const password = $("auth-password").value; | |
| const st = $("auth-status"); | |
| if (!username || !password) { st.textContent = t("err_missing_fields"); st.className = "status error"; return; } | |
| loading(true); | |
| const path = authMode === "login" ? "/api/login" : "/api/signup"; | |
| const d = await api(path, { method: "POST", body: JSON.stringify({ username, password }) }); | |
| loading(false); | |
| st.textContent = d.ok ? "" : authMessage(d); | |
| st.className = "status " + (d.ok ? "ok" : "error"); | |
| if (d.ok && authMode === "login") { await refresh(); } | |
| else if (d.ok) { setAuthMode("login"); st.textContent = t("acct_created"); st.className = "status ok"; } | |
| }; | |
| $("auth-password").onkeydown = e => { if (e.key === "Enter") $("auth-submit").click(); }; | |
| document.querySelectorAll(".oauth-btn").forEach(b => { | |
| b.onclick = async () => { | |
| const p = b.dataset.provider; | |
| const s = await api("/api/oauth-status"); | |
| if (!s[p]) { | |
| const n = $("oauth-note"); | |
| n.textContent = t("oauth_unconf", { p: p === "google" ? "Google" : "GitHub" }); | |
| n.classList.remove("hidden"); | |
| return; | |
| } | |
| window.location.href = `/auth/${p}`; | |
| }; | |
| }); | |
| $("logout-btn").onclick = async () => { await api("/api/logout", { method: "POST" }); chatId = null; guest = []; closeDash(); await refresh(); }; | |
| /* ---------- dashboard ---------- */ | |
| function openDash() { | |
| if (!user) return; | |
| $("dash-modal").classList.remove("hidden"); | |
| $("dash-status").textContent = ""; | |
| fillDashHeader(); | |
| syncSegs(); | |
| $("set-name").value = userInfo?.display_name || user; | |
| $("pw-box").classList.toggle("hidden", !userInfo?.has_password); | |
| switchTab("overview"); | |
| loadDash(); | |
| } | |
| function closeDash() { $("dash-modal").classList.add("hidden"); } | |
| function fillDashHeader() { | |
| const shown = userInfo?.display_name || user; | |
| $("dash-name").textContent = shown; | |
| const d = userInfo?.created_at ? new Date(userInfo.created_at).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }) : ""; | |
| $("dash-sub").textContent = d ? t("joined", { d }) : "@" + user; | |
| $("modal-avatar").innerHTML = avatarMarkup(shown, userInfo?.avatar); | |
| } | |
| function switchTab(name) { | |
| document.querySelectorAll(".tab").forEach(b => b.classList.toggle("active", b.dataset.tab === name)); | |
| document.querySelectorAll(".tab-pane").forEach(p => p.classList.toggle("hidden", p.id !== "tab-" + name)); | |
| if (name === "saved") loadSaved(); | |
| if (name === "overview") loadDash(); | |
| } | |
| document.querySelectorAll(".tab").forEach(b => b.onclick = () => switchTab(b.dataset.tab)); | |
| $("profile-btn").onclick = openDash; | |
| $("dash-close").onclick = closeDash; | |
| $("modal-close").onclick = closeDash; | |
| $("dash-modal").addEventListener("click", e => { if (e.target === $("dash-modal")) closeDash(); }); | |
| document.addEventListener("keydown", e => { if (e.key === "Escape") closeDash(); }); | |
| async function loadDash() { | |
| const d = await api(`/api/dashboard?tz=${new Date().getTimezoneOffset()}`); | |
| if (!d.ok) return; | |
| $("st-chats").textContent = d.stats.chats; | |
| $("st-msgs").textContent = d.stats.messages; | |
| $("st-days").textContent = d.stats.active_days; | |
| $("st-streak").textContent = d.stats.streak; | |
| $("st-saved").textContent = d.stats.saved; | |
| const max = Math.max(1, ...d.activity.map(a => a.count)); | |
| const days = t("days"); | |
| $("chart").innerHTML = d.activity.map(a => { | |
| const wd = days[new Date(a.date + "T00:00:00").getDay()]; | |
| const h = a.count ? Math.max(8, Math.round(a.count / max * 100)) : 0; | |
| return `<div class="bar ${a.count ? "" : "empty"}" title="${a.count}"><i style="height:${h}%"></i><span>${wd}</span></div>`; | |
| }).join(""); | |
| } | |
| async function loadSaved() { | |
| const d = await api("/api/saved"); | |
| const list = $("saved-list"); | |
| list.innerHTML = ""; | |
| const items = d.saved || []; | |
| $("saved-empty").classList.toggle("hidden", items.length > 0); | |
| items.forEach(s => { | |
| const it = document.createElement("div"); | |
| it.className = "saved-item"; | |
| const p = document.createElement("div"); | |
| const txt = document.createElement("p"); txt.innerHTML = formatMessage(s.text); | |
| const sm = document.createElement("small"); sm.textContent = new Date(s.created_at).toLocaleDateString(); | |
| p.style.flex = "1"; p.append(txt, sm); | |
| const cp = document.createElement("button"); cp.className = "act"; cp.title = t("copy"); cp.innerHTML = ICON.copy; | |
| cp.onclick = () => { navigator.clipboard.writeText(s.text); toast(t("copy")); }; | |
| const rm = document.createElement("button"); rm.className = "act"; rm.title = t("del"); rm.innerHTML = ICON.del; | |
| rm.onclick = async () => { await api(`/api/saved/${s.id}`, { method: "DELETE" }); loadSaved(); loadDash(); }; | |
| it.append(p, cp, rm); | |
| list.appendChild(it); | |
| }); | |
| } | |
| function dashStatus(msg, ok) { | |
| const st = $("dash-status"); st.textContent = msg; st.className = "status " + (ok ? "ok" : "error"); | |
| } | |
| $("set-name-save").onclick = async () => { | |
| const name = $("set-name").value.trim(); | |
| if (!name) return; | |
| const d = await api("/api/profile", { method: "PATCH", body: JSON.stringify({ display_name: name }) }); | |
| if (d.ok) { | |
| userInfo.display_name = name; fillDashHeader(); paintNav(); paintWelcome(); | |
| dashStatus(t("name_saved"), true); | |
| } else dashStatus(authMessage(d), false); | |
| }; | |
| function syncSegs() { | |
| document.querySelectorAll("[data-theme-val]").forEach(b => b.classList.toggle("active", b.dataset.themeVal === getTheme())); | |
| document.querySelectorAll("[data-lang-val]").forEach(b => b.classList.toggle("active", b.dataset.langVal === getLang())); | |
| } | |
| document.querySelectorAll("[data-theme-val]").forEach(b => b.onclick = () => setTheme(b.dataset.themeVal)); | |
| document.querySelectorAll("[data-lang-val]").forEach(b => b.onclick = () => setLang(b.dataset.langVal)); | |
| $("pw-save").onclick = async () => { | |
| const d = await api("/api/profile/password", { method: "POST", body: JSON.stringify({ current: $("pw-cur").value, new: $("pw-new").value }) }); | |
| if (d.ok) { $("pw-cur").value = ""; $("pw-new").value = ""; dashStatus(t("pw_ok"), true); } | |
| else dashStatus(authMessage(d), false); | |
| }; | |
| $("export-btn").onclick = async () => { | |
| const res = await fetch("/api/export", { credentials: "include" }); | |
| const blob = await res.blob(); | |
| const a = document.createElement("a"); | |
| a.href = URL.createObjectURL(blob); a.download = "intyoza-export.json"; | |
| document.body.appendChild(a); a.click(); a.remove(); | |
| setTimeout(() => URL.revokeObjectURL(a.href), 2000); | |
| }; | |
| $("clear-btn").onclick = async () => { | |
| if (!confirm(t("confirm_clear"))) return; | |
| await api("/api/chats/clear", { method: "POST" }); | |
| chatId = null; closeDash(); await refresh(); | |
| }; | |
| $("delete-acct-btn").onclick = async () => { | |
| if (prompt(t("del_prompt")) !== "DELETE") return; | |
| const d = await api("/api/account", { method: "DELETE", body: JSON.stringify({ confirm: "DELETE" }) }); | |
| if (d.ok) { chatId = null; guest = []; closeDash(); await refresh(); } | |
| }; | |
| /* avatar: crop to a square and shrink before upload */ | |
| function resizeImage(file, size = 256) { | |
| return new Promise((resolve, reject) => { | |
| const img = new Image(); const url = URL.createObjectURL(file); | |
| img.onload = () => { | |
| const c = document.createElement("canvas"); c.width = c.height = size; | |
| const s = Math.min(img.width, img.height); | |
| c.getContext("2d").drawImage(img, (img.width - s) / 2, (img.height - s) / 2, s, s, 0, 0, size, size); | |
| URL.revokeObjectURL(url); resolve(c.toDataURL("image/jpeg", 0.86)); | |
| }; | |
| img.onerror = reject; img.src = url; | |
| }); | |
| } | |
| $("avatar-input").onchange = async e => { | |
| const f = e.target.files[0]; if (!f) return; | |
| try { | |
| const dataUrl = await resizeImage(f); | |
| const d = await api("/api/profile/avatar", { method: "POST", body: JSON.stringify({ avatar: dataUrl }) }); | |
| if (d.ok) { userInfo.avatar = d.avatar; fillDashHeader(); paintNav(); } | |
| } catch (err) { /* unreadable image: ignore */ } | |
| }; | |
| /* ---------- session + repaint ---------- */ | |
| function paintNav() { | |
| const shown = userInfo?.display_name || user; | |
| $("nav-name").textContent = shown; | |
| $("nav-avatar").innerHTML = avatarMarkup(shown, userInfo?.avatar); | |
| } | |
| function paintWelcome() { | |
| $("welcome-line").textContent = user ? t("welcome_back", { name: userInfo?.display_name || user }) : t("panel_sub"); | |
| } | |
| async function refresh() { | |
| const d = await api("/api/session"); | |
| user = d.username || null; | |
| userInfo = user ? d : null; | |
| if (user) { | |
| $("guest-nav").classList.add("hidden"); | |
| $("user-nav").classList.remove("hidden"); | |
| paintNav(); paintWelcome(); | |
| $("sidebar-hint").classList.add("hidden"); | |
| // Saved preferences follow the account; first time, push the local ones up. | |
| if (d.prefs && (d.prefs.lang || d.prefs.theme)) { | |
| if (d.prefs.theme && d.prefs.theme !== getTheme()) setTheme(d.prefs.theme, true); | |
| if (d.prefs.lang && d.prefs.lang !== getLang()) setLang(d.prefs.lang, true); | |
| } else { | |
| api("/api/profile", { method: "PATCH", body: JSON.stringify({ prefs: { theme: getTheme(), lang: getLang() } }) }); | |
| } | |
| const chats = await loadChats(); | |
| chats.length ? openChat(chats[0].id, chats[0].title) : await newChat(); | |
| } else { | |
| $("guest-nav").classList.remove("hidden"); | |
| $("user-nav").classList.add("hidden"); | |
| paintWelcome(); | |
| $("sidebar-hint").classList.remove("hidden"); | |
| $("chat-empty").classList.add("hidden"); | |
| $("chat-list").innerHTML = ""; | |
| $("chat-title").textContent = t("new_chat"); | |
| render(guest); | |
| } | |
| showApp(); | |
| } | |
| /* theme or language changed (from the header buttons, the dashboard, or the server) */ | |
| window.addEventListener("uichange", e => { | |
| paintAuth(); paintWelcome(); syncSegs(); | |
| setThinking(thinking); | |
| if (!$("dash-modal").classList.contains("hidden")) { fillDashHeader(); loadDash(); } | |
| if (!user && !$("chatbox").querySelector(".row")) $("chat-title").textContent = t("new_chat"); | |
| if (user) { | |
| applySearch(); | |
| const cur = allChats.find(c => c.id === chatId); | |
| if (cur) $("chat-title").textContent = displayTitle(cur.title); | |
| } | |
| document.querySelectorAll(".act[data-title-key]").forEach(b => { b.title = t(b.dataset.titleKey); }); | |
| if (user && !e.detail.fromServer) { | |
| api("/api/profile", { method: "PATCH", body: JSON.stringify({ prefs: { theme: e.detail.theme, lang: e.detail.lang } }) }); | |
| } | |
| }); | |
| /* ---------- misc ---------- */ | |
| $("new-chat-btn").onclick = newChat; | |
| $("msg-box").onkeydown = e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }; | |
| $("msg-box").oninput = function () { this.style.height = "auto"; this.style.height = Math.min(this.scrollHeight, 150) + "px"; }; | |
| if (new URLSearchParams(location.search).get("oauth_error")) { | |
| history.replaceState({}, "", "/chat"); | |
| } | |
| setAuthMode("login"); | |
| bindChips(); | |
| setThinking(false); | |
| syncSegs(); | |
| refresh(); |