refactor(backend): 启动环境初始化与资源项目化（零跨项目依赖）
- main.py：uv run main.py 一键启动——读取 backend/.env、TORCH_HOME/NLTK_DATA 指向项目内缓存、certifi SSL + NO_PROXY 网络直连、默认开启 s2s，启动横幅 - vendor/：补丁后 s2s 云化栈移入项目（backend/vendor/s2s-cloud），pyproject sources 改相对路径 - .gitignore：忽略 .torch-cache / nltk_data 缓存 - AGENTS.md：进程管理铁律（AI 不启动/重启服务，由用户操作）
This commit is contained in:
Pine
+189
@@ -0,0 +1,189 @@
|
||||
// @ts-check
|
||||
/**
|
||||
* Account — the HF login chip and the daily-limit modal.
|
||||
*
|
||||
* Reads `/api/me` to learn the current tier (anonymous / signed-in / PRO) and
|
||||
* remaining daily talk-time, renders a sign-in pill or a signed-in chip with a
|
||||
* small popover (tier, remaining, sign out, upgrade), and shows the limit modal
|
||||
* when a conversation is refused or cut. The time metering itself lives in
|
||||
* main.js (heartbeat loop) + the server; this module is just the surface.
|
||||
*
|
||||
* Inert unless the deploy is in LB mode (`/api/me` → `{enabled:true}`).
|
||||
*/
|
||||
|
||||
import { $, escHtml } from "./dom.js";
|
||||
|
||||
const PRO_URL = "https://huggingface.co/subscribe/pro";
|
||||
|
||||
// Official multi-color Hugging Face logo, used in the badge + sign-in CTA.
|
||||
const HF_MARK = `<svg class="hf-logo" viewBox="0 0 95 88" fill="none" aria-hidden="true"><path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z"/><path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"/><path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd"/><path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"/><path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"/><path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"/><path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"/></svg>`;
|
||||
|
||||
/** @param {number} sec @returns {string} "m:ss" */
|
||||
function fmt(sec) {
|
||||
const s = Math.max(0, Math.round(sec));
|
||||
return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
export class Account {
|
||||
constructor() {
|
||||
/** @type {HTMLElement} */
|
||||
this._root = $("#account");
|
||||
/** @type {HTMLDialogElement} */
|
||||
this._modal = $("#limit-modal");
|
||||
this._modalTitle = $("#limit-title");
|
||||
this._modalMsg = $("#limit-msg");
|
||||
this._modalNote = $("#limit-note");
|
||||
/** @type {HTMLAnchorElement} */
|
||||
this._modalCta = /** @type {any} */ ($("#limit-cta"));
|
||||
|
||||
/** @type {{enabled:boolean, auth?:boolean, loggedIn?:boolean, username?:string, avatar?:string, tier?:string, remainingSec?:number|null, limitSec?:number|null, loginUrl?:string|null, logoutUrl?:string|null}} */
|
||||
this._me = { enabled: false };
|
||||
this._popoverOpen = false;
|
||||
|
||||
$("#limit-close").addEventListener("click", () => this._modal.close());
|
||||
this._modal.addEventListener("click", (e) => {
|
||||
if (e.target === this._modal) this._modal.close();
|
||||
});
|
||||
// Close the popover on an outside click.
|
||||
document.addEventListener("click", (e) => {
|
||||
if (this._popoverOpen && !this._root.contains(/** @type {Node} */ (e.target))) {
|
||||
this._closePopover();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get tier() {
|
||||
return this._me.tier || "anon";
|
||||
}
|
||||
|
||||
/** Fetch `/api/me` and (re)render the chip. Safe to call repeatedly (load,
|
||||
* after the OAuth redirect, after a conversation ends). */
|
||||
async refresh() {
|
||||
try {
|
||||
const res = await fetch("api/me");
|
||||
this._me = res.ok ? await res.json() : { enabled: false };
|
||||
} catch {
|
||||
this._me = { enabled: false };
|
||||
}
|
||||
this._render();
|
||||
}
|
||||
|
||||
_render() {
|
||||
const me = this._me;
|
||||
if (!me.enabled) {
|
||||
this._root.hidden = true;
|
||||
this._root.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
this._root.hidden = false;
|
||||
|
||||
if (!me.loggedIn) {
|
||||
// Signed-out: a sign-in pill (only when OAuth is actually available).
|
||||
if (me.auth && me.loginUrl) {
|
||||
this._root.innerHTML = `<a class="signin-pill" href="${escHtml(me.loginUrl)}" title="Sign in for more time"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg><span>Sign in</span></a>`;
|
||||
} else {
|
||||
this._root.innerHTML = "";
|
||||
this._root.hidden = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Signed-in: avatar + handle chip that toggles a popover.
|
||||
const isPro = me.tier === "pro";
|
||||
// Org members get unlimited usage too, but aren't PRO — don't brand them so.
|
||||
const isUnlimited = isPro || me.tier === "org";
|
||||
const avatar = me.avatar
|
||||
? `<img class="account-avatar" src="${escHtml(me.avatar)}" alt="" />`
|
||||
: `<span class="account-avatar account-avatar-fallback">${escHtml((me.username || "?")[0].toUpperCase())}</span>`;
|
||||
const remaining =
|
||||
isUnlimited || me.remainingSec == null
|
||||
? "Unlimited"
|
||||
: `${fmt(me.remainingSec)} left today`;
|
||||
const tierLabel = isPro ? "PRO" : isUnlimited ? "Team" : "Free";
|
||||
|
||||
this._root.innerHTML = `
|
||||
<button id="account-chip" class="account-chip" aria-haspopup="true" aria-expanded="false">
|
||||
${avatar}
|
||||
<span class="account-handle">${escHtml(me.username || "you")}</span>
|
||||
${isPro
|
||||
? '<span class="account-pro">PRO</span>'
|
||||
: me.tier === "org"
|
||||
? '<span class="account-pro account-team">TEAM</span>'
|
||||
: ""}
|
||||
</button>
|
||||
<div id="account-pop" class="account-pop" hidden>
|
||||
<div class="account-pop-row account-pop-name">${escHtml(me.username || "you")}</div>
|
||||
<div class="account-pop-row account-pop-meta">
|
||||
<span class="account-tier">${tierLabel}</span>
|
||||
<span class="account-remaining">${escHtml(remaining)}</span>
|
||||
</div>
|
||||
${isUnlimited ? "" : `<a class="account-pop-link" href="${PRO_URL}" target="_blank" rel="noopener">Upgrade to PRO</a>`}
|
||||
<a class="account-pop-link account-signout" href="${escHtml(me.logoutUrl || "#")}">Sign out</a>
|
||||
</div>`;
|
||||
|
||||
const chip = $("#account-chip");
|
||||
chip.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
this._popoverOpen ? this._closePopover() : this._openPopover();
|
||||
});
|
||||
}
|
||||
|
||||
_openPopover() {
|
||||
const pop = document.getElementById("account-pop");
|
||||
const chip = document.getElementById("account-chip");
|
||||
if (!pop || !chip) return;
|
||||
pop.hidden = false;
|
||||
chip.setAttribute("aria-expanded", "true");
|
||||
this._popoverOpen = true;
|
||||
}
|
||||
|
||||
_closePopover() {
|
||||
const pop = document.getElementById("account-pop");
|
||||
const chip = document.getElementById("account-chip");
|
||||
if (pop) pop.hidden = true;
|
||||
if (chip) chip.setAttribute("aria-expanded", "false");
|
||||
this._popoverOpen = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the limit modal for a tier — used both when a conversation is refused
|
||||
* at start (402) and when a live one is cut (heartbeat `expired`).
|
||||
* @param {string} [tier]
|
||||
*/
|
||||
showLimit(tier = this.tier) {
|
||||
const canSignIn = this._me.auth && this._me.loginUrl;
|
||||
this._modalTitle.textContent = "Thanks for chatting!";
|
||||
if (tier === "anon") {
|
||||
this._modalMsg.textContent =
|
||||
"Guest conversations run for 5 minutes. Sign in with Hugging Face to get 10 minutes a day for free, and PRO members chat with no limit at all.";
|
||||
this._modalNote.textContent = "Your free minutes refresh tomorrow.";
|
||||
if (canSignIn) {
|
||||
this._modalCta.innerHTML = `${HF_MARK}<span>Sign in with Hugging Face</span>`;
|
||||
this._modalCta.href = /** @type {string} */ (this._me.loginUrl);
|
||||
this._modalCta.hidden = false;
|
||||
} else {
|
||||
this._modalCta.hidden = true;
|
||||
}
|
||||
} else {
|
||||
// Signed-in, non-PRO.
|
||||
this._modalMsg.textContent =
|
||||
"You've enjoyed your 10 minutes for today. Go PRO for unlimited conversations and to support open source AI.";
|
||||
this._modalNote.textContent = "Or come back tomorrow. Your minutes reset daily.";
|
||||
this._modalCta.innerHTML = "<span>Upgrade to PRO</span>";
|
||||
this._modalCta.href = PRO_URL;
|
||||
this._modalCta.hidden = false;
|
||||
}
|
||||
if (!this._modal.open) this._modal.showModal();
|
||||
}
|
||||
|
||||
/** Show a warm "we're at capacity" message when even the waiting line is full.
|
||||
* Reuses the limit modal shell; no call-to-action, just reassurance. */
|
||||
showBusy() {
|
||||
this._modalTitle.textContent = "Hugged to the limit 🤗";
|
||||
this._modalMsg.textContent =
|
||||
"Every slot and the whole line are full right now. Too much love! Grab a coffee and pop back in a minute.";
|
||||
this._modalNote.textContent = "A spot usually opens up within a few minutes.";
|
||||
this._modalCta.hidden = true;
|
||||
if (!this._modal.open) this._modal.showModal();
|
||||
}
|
||||
}
|
||||
+422
@@ -0,0 +1,422 @@
|
||||
// @ts-check
|
||||
/**
|
||||
* ChatView — owns the whole conversation surface: the slide-in history panel,
|
||||
* the ephemeral on-orb bubbles, and all the transcript/tool/streaming
|
||||
* bookkeeping. main.js wires the realtime client's events straight to the
|
||||
* `on*` methods here and otherwise doesn't touch chat state.
|
||||
*
|
||||
* Two parallel surfaces share one shape (see `_buildMessageEl`):
|
||||
* - ephemeral bubbles (`.bubble` / `.bubble-*`) fade on a timer
|
||||
* - persistent history (`.hist-msg` / `.hist-*`) the durable panel log
|
||||
*
|
||||
* Keying:
|
||||
* - user transcripts by the server's `item_id` — a speculative continuation
|
||||
* REUSES it, so both segments land in one row/bubble; deltas are CUMULATIVE
|
||||
* (each carries the full sentence so far), so we replace text wholesale.
|
||||
* - assistant transcripts by `response_id`, so a cancelled speculative reply
|
||||
* can be marked interrupted without erasing what was already shown.
|
||||
*/
|
||||
|
||||
import { $, escHtml, DEBUG } from "./dom.js";
|
||||
|
||||
const WRENCH_PATH = `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>`;
|
||||
const CHAT_BUBBLE_SVG = `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
|
||||
const EMPTY_STATE_HTML = `<div id="chat-empty" class="chat-empty">${CHAT_BUBBLE_SVG}<span class="chat-empty-title">No messages yet</span><span class="chat-empty-hint">Tap the orb and start talking</span></div>`;
|
||||
|
||||
export class ChatView {
|
||||
constructor() {
|
||||
/** @type {HTMLButtonElement} */
|
||||
this._chatBtn = $("#chat-btn");
|
||||
/** @type {HTMLSpanElement} */
|
||||
this._chatBadge = $("#chat-badge");
|
||||
/** @type {HTMLDivElement} */
|
||||
this._chatPanel = $("#chat-panel");
|
||||
/** @type {HTMLDivElement} */
|
||||
this._chatPanelBackdrop = $("#chat-panel-backdrop");
|
||||
/** @type {HTMLButtonElement} */
|
||||
this._chatPanelClose = $("#chat-panel-close");
|
||||
/** @type {HTMLDivElement} */
|
||||
this._chatHistory = $("#chat-history");
|
||||
/** @type {HTMLDivElement} */
|
||||
this._bubbleStack = $("#bubble-stack");
|
||||
|
||||
this._panelOpen = false;
|
||||
this._scrollQueued = false;
|
||||
|
||||
// ── User transcript state (keyed by item_id) ───────────────────────────
|
||||
/** @type {Map<string, HTMLElement>} */
|
||||
this._userHistByItem = new Map();
|
||||
/** @type {HTMLElement | null} */
|
||||
this._activeUserBubble = null;
|
||||
this._activeUserItemId = "";
|
||||
// Monotonic counter for synthesizing unique keys when the server omits an
|
||||
// item_id / response_id, so id-less messages never collapse onto each other.
|
||||
this._anonSeq = 0;
|
||||
|
||||
// ── Assistant transcript state (keyed by response_id) ──────────────────
|
||||
/** @type {Map<string, { bubble: HTMLElement, hist: HTMLElement }>} */
|
||||
this._asstByResp = new Map();
|
||||
|
||||
// ── Ephemeral bubble auto-dismiss ──────────────────────────────────────
|
||||
// Per-element expiry (epoch ms). A bubble fades once its expiry passes —
|
||||
// but only in stack order (see _reapBubbles). Refreshing the expiry keeps a
|
||||
// bubble alive while it updates (e.g. the live user utterance).
|
||||
/** @type {WeakMap<HTMLElement, number>} */
|
||||
this._bubbleExpiry = new WeakMap();
|
||||
// Single pending reaper handle: one timer for the whole stack (not one per
|
||||
// bubble) so dismissal is strictly oldest-first regardless of per-bubble delays.
|
||||
this._reaperHandle = 0;
|
||||
|
||||
this._chatBtn.addEventListener("click", () => (this._panelOpen ? this._closePanel() : this._openPanel()));
|
||||
this._chatPanelClose.addEventListener("click", () => this._closePanel());
|
||||
this._chatPanelBackdrop.addEventListener("click", () => this._closePanel());
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape" && this._panelOpen) this._closePanel();
|
||||
});
|
||||
}
|
||||
|
||||
// ── Panel ───────────────────────────────────────────────────────────────
|
||||
|
||||
_openPanel() {
|
||||
this._panelOpen = true;
|
||||
this._chatPanel.classList.add("open");
|
||||
this._chatBadge.classList.remove("visible");
|
||||
this._scrollToBottom();
|
||||
}
|
||||
|
||||
_closePanel() {
|
||||
this._panelOpen = false;
|
||||
this._chatPanel.classList.remove("open");
|
||||
}
|
||||
|
||||
// Coalesce scroll-to-bottom: a burst of cumulative transcript deltas would
|
||||
// otherwise queue one rAF per delta, all writing the same scrollTop.
|
||||
_scrollToBottom() {
|
||||
if (!this._panelOpen || this._scrollQueued) return;
|
||||
this._scrollQueued = true;
|
||||
requestAnimationFrame(() => {
|
||||
this._scrollQueued = false;
|
||||
this._chatHistory.scrollTop = this._chatHistory.scrollHeight;
|
||||
});
|
||||
}
|
||||
|
||||
_markUnread() {
|
||||
if (this._panelOpen) {
|
||||
this._scrollToBottom();
|
||||
return;
|
||||
}
|
||||
this._chatBadge.classList.add("visible");
|
||||
}
|
||||
|
||||
// ── Shared rendering ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Build a role-labelled message element. Ephemeral bubbles and persistent
|
||||
* history rows share the same shape and differ only in their class prefix
|
||||
* (`bubble`/`bubble-*` vs `hist-msg`/`hist-*`).
|
||||
* @param {{ container: string, prefix: string, role: "user"|"assistant", text: string, partial?: boolean }} o
|
||||
* @returns {HTMLElement}
|
||||
*/
|
||||
_buildMessageEl({ container, prefix, role, text, partial = false }) {
|
||||
const el = document.createElement("div");
|
||||
el.className = `${container} ${role}`;
|
||||
const label = role === "user" ? "You" : "Assistant";
|
||||
el.innerHTML = `<div class="${prefix}-role">${label}</div><div class="${prefix}-body${partial ? " partial" : ""}">${escHtml(text)}</div>`;
|
||||
return el;
|
||||
}
|
||||
|
||||
// ── Ephemeral bubbles ───────────────────────────────────────────────────
|
||||
|
||||
/** @param {"user"|"assistant"|"tool"} role @param {string} text @returns {HTMLElement} */
|
||||
_spawnBubble(role, text) {
|
||||
let el;
|
||||
if (role === "tool") {
|
||||
el = document.createElement("div");
|
||||
el.className = "bubble tool";
|
||||
el.innerHTML = `<svg class="bubble-tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${WRENCH_PATH}</svg><span class="bubble-tool-text">${escHtml(text)}</span>`;
|
||||
} else {
|
||||
el = this._buildMessageEl({ container: "bubble", prefix: "bubble", role, text });
|
||||
}
|
||||
this._bubbleStack.appendChild(el);
|
||||
// Cap the stack at 8, but never evict the bubble the caller is still
|
||||
// actively updating (the live user bubble) — drop the next-oldest instead.
|
||||
const visible = /** @type {HTMLElement[]} */ ([...this._bubbleStack.querySelectorAll(".bubble:not(.out)")]);
|
||||
if (visible.length > 8) {
|
||||
this._dismissBubble(visible.find((b) => b !== this._activeUserBubble) ?? visible[0]);
|
||||
}
|
||||
requestAnimationFrame(() => el.classList.add("in"));
|
||||
return el;
|
||||
}
|
||||
|
||||
/** @param {HTMLElement} el @param {string} text */
|
||||
_updateBubbleText(el, text) {
|
||||
const t = el.querySelector(".bubble-body");
|
||||
if (t) t.textContent = text;
|
||||
}
|
||||
|
||||
/** @param {HTMLElement} el */
|
||||
_dismissBubble(el) {
|
||||
if (!el || el.classList.contains("out")) return; // idempotent
|
||||
this._bubbleExpiry.delete(el);
|
||||
el.classList.remove("in");
|
||||
el.classList.add("out");
|
||||
const remove = () => el.remove();
|
||||
el.addEventListener("transitionend", remove, { once: true });
|
||||
// Fallback: transitionend never fires if the bubble's visual state didn't
|
||||
// change (dismissed pre-paint) or the tab is backgrounded. The transition
|
||||
// is 0.3s, so force removal a little after.
|
||||
setTimeout(remove, 400);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fade bubbles whose expiry has passed — strictly oldest-first. We walk the
|
||||
* stack top (oldest) to bottom (newest) and stop at the first bubble still
|
||||
* alive: nothing newer may leave while an older bubble is still on screen. A
|
||||
* bubble that keeps updating pushes its own expiry forward, so it (and
|
||||
* everything behind it) stays put until it finally goes quiet.
|
||||
*/
|
||||
_reapBubbles() {
|
||||
this._reaperHandle = 0;
|
||||
const now = Date.now();
|
||||
const visible = /** @type {HTMLElement[]} */ ([...this._bubbleStack.querySelectorAll(".bubble:not(.out)")]);
|
||||
let nextWake = Infinity;
|
||||
for (const el of visible) {
|
||||
const exp = this._bubbleExpiry.get(el) ?? now; // no expiry recorded → treat as due
|
||||
if (exp <= now) {
|
||||
this._dismissBubble(el);
|
||||
} else {
|
||||
// Oldest survivor isn't due yet; stop so nothing newer leaves before it.
|
||||
nextWake = exp;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (nextWake !== Infinity) {
|
||||
this._reaperHandle = setTimeout(() => this._reapBubbles(), Math.max(50, nextWake - Date.now()));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* (Re)arm a bubble's auto-dismiss by pushing its expiry out by `delay`.
|
||||
* Calling it again resets the countdown — so a bubble that keeps updating
|
||||
* stays on screen and only fades once it goes quiet. Removal is ordered by the
|
||||
* shared reaper, so the oldest bubble always disappears first.
|
||||
* @param {HTMLElement} el @param {number} [delay]
|
||||
*/
|
||||
_bumpDismiss(el, delay = 4000) {
|
||||
this._bubbleExpiry.set(el, Date.now() + delay);
|
||||
if (!this._reaperHandle) this._reaperHandle = setTimeout(() => this._reapBubbles(), delay);
|
||||
}
|
||||
|
||||
// ── History ───────────────────────────────────────────────────────────────
|
||||
|
||||
/** Render the empty-state placeholder into the history panel. */
|
||||
renderEmptyState() {
|
||||
this._chatHistory.innerHTML = EMPTY_STATE_HTML;
|
||||
}
|
||||
|
||||
/** Reset the panel to the empty state and clear the unread badge. */
|
||||
clear() {
|
||||
this.renderEmptyState();
|
||||
this._chatBadge.classList.remove("visible");
|
||||
}
|
||||
|
||||
/** @param {"user"|"assistant"} role @param {string} text @param {boolean} partial @returns {HTMLElement} */
|
||||
_appendHistMsg(role, text, partial) {
|
||||
const empty = this._chatHistory.querySelector(".chat-empty");
|
||||
if (empty) empty.remove();
|
||||
const el = this._buildMessageEl({ container: "hist-msg", prefix: "hist", role, text, partial });
|
||||
this._chatHistory.appendChild(el);
|
||||
this._scrollToBottom();
|
||||
return el;
|
||||
}
|
||||
|
||||
/** @param {HTMLElement | null} el @param {string} text @param {boolean} partial */
|
||||
_updateHistMsg(el, text, partial) {
|
||||
if (!el) return;
|
||||
const body = /** @type {HTMLElement | null} */ (el.querySelector(".hist-body"));
|
||||
if (!body) return;
|
||||
body.textContent = text;
|
||||
body.classList.toggle("partial", partial);
|
||||
this._scrollToBottom();
|
||||
}
|
||||
|
||||
/**
|
||||
* Append a tool-call row to the conversation. We only add it once the tool
|
||||
* has run, so the expandable toggle carries BOTH the call input and its result.
|
||||
* @param {string} name @param {string} argsJson @param {string} output
|
||||
*/
|
||||
_appendHistTool(name, argsJson, output) {
|
||||
const empty = this._chatHistory.querySelector(".chat-empty");
|
||||
if (empty) empty.remove();
|
||||
let pretty = argsJson;
|
||||
try { pretty = JSON.stringify(JSON.parse(argsJson), null, 2); } catch {}
|
||||
const el = document.createElement("div");
|
||||
el.className = "hist-msg tool";
|
||||
el.innerHTML = `
|
||||
<div class="hist-role">Tool call</div>
|
||||
<button class="hist-tool-header" aria-expanded="false">
|
||||
<svg class="hist-tool-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${WRENCH_PATH}</svg>
|
||||
<span class="hist-tool-name">${escHtml(name)}</span>
|
||||
<svg class="hist-tool-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div class="hist-tool-body">
|
||||
<div class="hist-tool-label">Input</div>
|
||||
<div class="hist-tool-block">${escHtml(pretty)}</div>
|
||||
<div class="hist-tool-label">Output</div>
|
||||
<div class="hist-tool-block hist-tool-output">${escHtml(output || "(no output)")}</div>
|
||||
</div>
|
||||
`;
|
||||
const header = /** @type {HTMLButtonElement} */ (el.querySelector(".hist-tool-header"));
|
||||
const body = /** @type {HTMLDivElement} */ (el.querySelector(".hist-tool-body"));
|
||||
header.addEventListener("click", () => {
|
||||
const expanded = header.getAttribute("aria-expanded") === "true";
|
||||
header.setAttribute("aria-expanded", String(!expanded));
|
||||
body.classList.toggle("open", !expanded);
|
||||
});
|
||||
this._chatHistory.appendChild(el);
|
||||
this._scrollToBottom();
|
||||
}
|
||||
|
||||
/** Tag an assistant history row as interrupted (user barged in mid-reply).
|
||||
* @param {HTMLElement | null} hist */
|
||||
_markHistInterrupted(hist) {
|
||||
if (!hist || hist.querySelector(".hist-note")) return;
|
||||
hist.classList.add("interrupted");
|
||||
const note = document.createElement("div");
|
||||
note.className = "hist-note";
|
||||
note.textContent = "Interrupted";
|
||||
hist.appendChild(note);
|
||||
}
|
||||
|
||||
/** Render a captured webcam frame in the transcript (the camera tool result).
|
||||
* @param {string} dataUrl */
|
||||
_appendHistImage(dataUrl) {
|
||||
const empty = this._chatHistory.querySelector(".chat-empty");
|
||||
if (empty) empty.remove();
|
||||
const el = document.createElement("div");
|
||||
el.className = "hist-msg tool";
|
||||
el.innerHTML = `<div class="hist-role">Snapshot</div><img class="hist-image" alt="Webcam snapshot sent to the model" />`;
|
||||
const img = /** @type {HTMLImageElement} */ (el.querySelector("img"));
|
||||
img.src = dataUrl;
|
||||
this._chatHistory.appendChild(el);
|
||||
this._scrollToBottom();
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset all streaming bookkeeping for session start / teardown. Pass
|
||||
* `dismiss` to also fade any bubbles still on screen.
|
||||
* @param {{ dismiss?: boolean }} [opts]
|
||||
*/
|
||||
reset(opts) {
|
||||
if (opts?.dismiss) {
|
||||
if (this._activeUserBubble) this._dismissBubble(this._activeUserBubble);
|
||||
for (const { bubble } of this._asstByResp.values()) this._dismissBubble(bubble);
|
||||
}
|
||||
this._userHistByItem.clear();
|
||||
this._activeUserBubble = null;
|
||||
this._activeUserItemId = "";
|
||||
this._asstByResp.clear();
|
||||
}
|
||||
|
||||
// ── Client event handlers ─────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* A streamed transcript delta (user or assistant).
|
||||
* @param {{ role: "user" | "assistant"; text: string; partial: boolean; itemId?: string; responseId?: string }} d
|
||||
*/
|
||||
onTranscript(d) {
|
||||
if (DEBUG) console.debug(`[ui] transcript role=${d.role} partial=${d.partial} item=${d.itemId} resp=${d.responseId} text=${JSON.stringify(d.text)}`);
|
||||
|
||||
if (d.role === "user") {
|
||||
// Group by item_id: a speculative continuation reuses the same id, so it
|
||||
// updates the same row/bubble. A missing id falls back to the active item
|
||||
// (same utterance) or a fresh unique key, never a shared sentinel that
|
||||
// would collapse distinct turns into one row.
|
||||
const id = d.itemId || this._activeUserItemId || `_u${++this._anonSeq}`;
|
||||
const text = d.text;
|
||||
|
||||
let hist = this._userHistByItem.get(id);
|
||||
if (!hist) {
|
||||
hist = this._appendHistMsg("user", text, d.partial);
|
||||
this._userHistByItem.set(id, hist);
|
||||
} else {
|
||||
this._updateHistMsg(hist, text, d.partial);
|
||||
}
|
||||
|
||||
// One ephemeral bubble per active item. Purely timer-based: the timer is
|
||||
// refreshed on every delta, so it stays while the user keeps talking and
|
||||
// fades a few seconds after they stop — no dependency on a response ever
|
||||
// arriving, so it can never get stuck.
|
||||
if (this._activeUserItemId !== id || !this._activeUserBubble) {
|
||||
this._activeUserBubble = this._spawnBubble("user", text);
|
||||
this._activeUserItemId = id;
|
||||
} else {
|
||||
this._updateBubbleText(this._activeUserBubble, text);
|
||||
}
|
||||
this._markUnread();
|
||||
} else if (d.role === "assistant") {
|
||||
// Assistant transcript arrives once, as the full text, keyed by
|
||||
// response_id so a cancelled speculative response can be removed later. A
|
||||
// missing id gets a unique key so two id-less replies never collide.
|
||||
const rid = d.responseId || `_a${++this._anonSeq}`;
|
||||
const entry = this._asstByResp.get(rid);
|
||||
if (!entry) {
|
||||
const bubble = this._spawnBubble("assistant", d.text);
|
||||
this._asstByResp.set(rid, { bubble, hist: this._appendHistMsg("assistant", d.text, false) });
|
||||
} else {
|
||||
this._updateBubbleText(entry.bubble, d.text);
|
||||
this._updateHistMsg(entry.hist, d.text, false);
|
||||
}
|
||||
this._markUnread();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A response closed (completed or cancelled).
|
||||
* @param {{ responseId: string; status: string; audible?: boolean; transcript?: string }} detail
|
||||
*/
|
||||
onResponseFinished(detail) {
|
||||
const { responseId, status, audible, transcript } = detail;
|
||||
if (DEBUG) console.debug(`[ui] response-finished resp=${responseId} status=${status} audible=${audible} known=${this._asstByResp.has(responseId)}`);
|
||||
// Without an id we can't target a specific response; the bubble will
|
||||
// auto-dismiss on its own timer regardless.
|
||||
if (!responseId) return;
|
||||
const entry = this._asstByResp.get(responseId);
|
||||
|
||||
if (status === "cancelled") {
|
||||
// Keep every transcript that was received — mark it interrupted rather
|
||||
// than erasing it. If the `*.transcript.done` never fired, build the row
|
||||
// from the text carried in response.done.
|
||||
let hist = entry?.hist ?? null;
|
||||
if (!hist && transcript) {
|
||||
hist = this._appendHistMsg("assistant", transcript, false);
|
||||
} else if (hist && transcript) {
|
||||
this._updateHistMsg(hist, transcript, false);
|
||||
}
|
||||
if (hist) this._markHistInterrupted(hist);
|
||||
this._asstByResp.delete(responseId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Any other terminal close (completed / failed / incomplete / …): just
|
||||
// release the map entry. The bubble already auto-dismisses on its timer and
|
||||
// the history row persists as the conversation log. Crucially we do NOT
|
||||
// touch user state here — that lifecycle is fully independent.
|
||||
this._asstByResp.delete(responseId);
|
||||
}
|
||||
|
||||
/** The model called a tool — show an ephemeral "running" bubble.
|
||||
* @param {string} name */
|
||||
onToolCall(name) {
|
||||
this._bumpDismiss(this._spawnBubble("tool", name));
|
||||
this._markUnread();
|
||||
}
|
||||
|
||||
/** The tool finished — append its call+result row (and any captured image).
|
||||
* @param {string} name @param {string} argsJson @param {string} output @param {string} [image] */
|
||||
onToolResult(name, argsJson, output, image) {
|
||||
this._appendHistTool(name, argsJson, output);
|
||||
if (image) this._appendHistImage(image); // show the captured frame below the call
|
||||
this._markUnread();
|
||||
}
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
// @ts-check
|
||||
/** Small shared helpers used across the UI modules: a strict query selector,
|
||||
* HTML escaping for text we drop into innerHTML, error-string trimming, and
|
||||
* the opt-in debug flag. */
|
||||
|
||||
/** Opt-in tracing: `localStorage.setItem("s2s.debug", "1")` then reload. */
|
||||
export const DEBUG = (() => {
|
||||
try {
|
||||
return localStorage.getItem("s2s.debug") === "1";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* Query a single element, throwing if it's missing (so a broken selector fails
|
||||
* loudly at startup rather than as a later null-deref).
|
||||
* @template {HTMLElement} T
|
||||
* @param {string} selector
|
||||
* @returns {T}
|
||||
*/
|
||||
export function $(selector) {
|
||||
const el = document.querySelector(selector);
|
||||
if (!el) throw new Error(`Missing element: ${selector}`);
|
||||
return /** @type {T} */ (el);
|
||||
}
|
||||
|
||||
/** @param {string} s @returns {string} */
|
||||
export function escHtml(s) {
|
||||
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
}
|
||||
|
||||
/** Trim a long error message to fit the orb caption. @param {string} text */
|
||||
export function truncateError(text) {
|
||||
if (text.length <= 90) return text;
|
||||
return text.slice(0, 87) + "…";
|
||||
}
|
||||
Reference in New Issue
Block a user