perf(webui): /chat/history 分段懒加载 + lean 瘦身模式

问题:/api/v1/chat/history 无分页返回全量 1.26MB(200条),移动端/弱网首屏很慢。
实测体积构成:tool_calls args/result 占 71.8%,reasoning_content 11.6%,content 仅 3.4%。

后端 handler.go:
- 新增查询参数 limit(1..maxChatHistory)/ before(游标)/ lean(瘦身)
- 全部可选,省略时返回全量 → 向后兼容旧客户端
- 响应加 total/offset/has_more,供前端判断能否继续向上加载
- lean=1 裁剪 tool_calls 的 args/result 并置 truncated 标记、省略 reasoning_content
- ChatToolCall 新增 Truncated 字段(前端可显示'详情需展开加载'而非误判执行失败)

前端 WebUI + GUI(两端同步):
- 首屏只拉最新 40 条(CHAT_PAGE_SIZE),1.26MB → 48.5KB(lean 26KB)
- 新增 loadOlderChat():滚动触顶(<60px)自动拉上一页,插入后按 scrollHeight 差值补偿
  滚动位置避免视口跳动
- state 新增 chatOffset/chatTotal/chatHasMore
- syncChatFromHistory 改用重叠区对齐(分段后不能再用长度比较判断新增),
  找不到重叠点安全退化为全量刷新最新页

实测:无参数 1287.9KB / limit=40 48.5KB / limit=40&lean=1 26.0KB;
before 游标翻页、limit 越界/非法值、before=0 等边界均正确
This commit is contained in:
JianFeeeee
2026-08-28 23:21:13 +08:00
parent 5fccc31afc
commit a0f7c9b5eb
3 changed files with 283 additions and 43 deletions

View File

@ -44,6 +44,9 @@ const state = {
pendingTools: [],
eventSource: null,
chatFinalIdx: -1,
chatOffset: 0, // 分段历史:当前已加载消息在服务端全量中的起始下标
chatTotal: 0, // 服务端历史总条数
chatHasMore: false, // 是否还有更早历史可向上加载
sseLastEventID: "", // 最近一次 SSE 事件 id断线重连时随 Last-Event-ID 头回传
lang: localStorage.getItem("ha-lang") || "zh",
connections: [],
@ -1340,6 +1343,10 @@ function renderChat() {
() => {
state.chatStick =
msgsEl.scrollHeight - msgsEl.scrollTop - msgsEl.clientHeight < 80;
// 触顶(近顶部 60px且服务端还有更早历史 → 向上懒加载下一页
if (msgsEl.scrollTop < 60 && state.chatHasMore) {
loadOlderChat();
}
},
{ passive: true },
);
@ -2351,13 +2358,26 @@ function switchChatPanel(tab, el) {
if (tab === "knowledge") searchKnowledgeChat();
}
// 首屏分段加载条数:只拉最新 N 条,向上滚动触顶时再拉更早的。
var CHAT_PAGE_SIZE = 40;
async function loadChatHistory() {
try {
var data = await api("/chat/history");
var data = await api("/chat/history?limit=" + CHAT_PAGE_SIZE);
if (data && data.messages) {
state.messages = data.messages;
state.chatOffset = typeof data.offset === "number" ? data.offset : 0;
state.chatTotal =
typeof data.total === "number" ? data.total : data.messages.length;
state.chatHasMore = !!data.has_more;
if (window.homeagent && window.homeagent.log)
window.homeagent.log("history: loaded " + data.messages.length);
window.homeagent.log(
"history: loaded " +
data.messages.length +
"/" +
state.chatTotal +
(state.chatHasMore ? " (has more)" : ""),
);
} else if (window.homeagent && window.homeagent.log) {
window.homeagent.log("history: no messages field");
}
@ -2367,35 +2387,101 @@ async function loadChatHistory() {
}
}
// loadOlderChat 向上翻页:拉 offset 之前的一页,前置到 messages 头部。
// 保持滚动位置补偿,避免视口跳动。
var _loadingOlder = false;
async function loadOlderChat() {
if (_loadingOlder || !state.chatHasMore) return;
_loadingOlder = true;
var msgsEl = document.getElementById("chat-msgs");
var prevH = msgsEl ? msgsEl.scrollHeight : 0;
var prevTop = msgsEl ? msgsEl.scrollTop : 0;
try {
var before = state.chatOffset || 0;
if (before <= 0) {
state.chatHasMore = false;
return;
}
var data = await api(
"/chat/history?limit=" + CHAT_PAGE_SIZE + "&before=" + before,
);
if (data && data.messages && data.messages.length) {
state.messages = data.messages.concat(state.messages);
state.chatOffset =
typeof data.offset === "number" ? data.offset : 0;
state.chatHasMore = !!data.has_more;
state.chatStick = false;
rerenderChatIfActive();
if (msgsEl) {
msgsEl.scrollTop = prevTop + (msgsEl.scrollHeight - prevH);
}
if (window.homeagent && window.homeagent.log)
window.homeagent.log(
"history: older " + data.messages.length + " (offset=" + state.chatOffset + ")",
);
} else {
state.chatHasMore = false;
}
} catch (e) {
} finally {
_loadingOlder = false;
}
}
// syncChatFromHistory 增量同步:对比服务端历史,仅追加新消息 DOM 节点,
// 不重建已有消息 → 无闪烁。用于 SSE 断连恢复期间的轮询兜底(跨渠道消息补偿)。
function syncChatFromHistory() {
return api("/chat/history").then(function (data) {
if (!data || !data.messages || data.messages.length === 0) return;
var serverMsgs = data.messages;
var localMsgs = state.messages;
if (localMsgs.length === 0) {
state.messages = serverMsgs;
rerenderChatIfActive();
return;
}
if (serverMsgs.length <= localMsgs.length) {
return api("/chat/history?limit=" + CHAT_PAGE_SIZE)
.then(function (data) {
if (!data || !data.messages || data.messages.length === 0) return;
var serverMsgs = data.messages;
var localMsgs = state.messages;
// 首次加载(空列表)→ 全量赋值
if (localMsgs.length === 0) {
state.messages = serverMsgs;
state.chatOffset = typeof data.offset === "number" ? data.offset : 0;
state.chatHasMore = !!data.has_more;
rerenderChatIfActive();
return;
}
// 分段拉取只回传最新页,本地可能已向上翻页加载更多,
// 因此不能用长度比较,改用末尾内容比对 + 重叠区对齐。
var lastLocal = localMsgs[localMsgs.length - 1];
var lastServer = serverMsgs[serverMsgs.length - 1];
var localContent = lastLocal.content || lastLocal.Content || "";
var serverContent = lastServer.content || lastServer.Content || "";
if (lastServer.role === "assistant" && localContent !== serverContent && serverContent) {
lastLocal.content = serverContent;
if (lastServer.ReasoningContent) lastLocal.reasoning_content = lastServer.ReasoningContent;
// 末尾一致 → 无新增
if (localContent === serverContent) return;
// 寻找重叠点(本地末尾 k 条在服务端页中的位置)
var overlap = -1;
var maxK = Math.min(3, serverMsgs.length - 1, localMsgs.length - 1);
for (var k = maxK; k >= 1; k--) {
var sMsg = serverMsgs[serverMsgs.length - 1 - k];
var lMsg = localMsgs[localMsgs.length - 1 - k];
if (
lMsg &&
sMsg &&
(lMsg.content || "") === (sMsg.content || "") &&
lMsg.role === sMsg.role
) {
overlap = k;
break;
}
}
if (overlap >= 0) {
var newMsgs = serverMsgs.slice(serverMsgs.length - overlap);
if (newMsgs.length === 0) return;
Array.prototype.push.apply(state.messages, newMsgs);
rerenderChatIfActive();
} else {
// 无重叠点(本地领先过多/已失同步)→ 安全退化为全量刷新最新页
state.messages = serverMsgs;
state.chatOffset = typeof data.offset === "number" ? data.offset : 0;
state.chatHasMore = !!data.has_more;
rerenderChatIfActive();
}
return;
}
// 服务端消息更多 → 仅追加新消息对象(不重建已有 DOM
var newMsgs = serverMsgs.slice(localMsgs.length);
Array.prototype.push.apply(state.messages, newMsgs);
rerenderChatIfActive();
}).catch(function () {});
})
.catch(function () {});
}
async function loadTerminals() {