@wendongfly/myhi 1.3.53 → 1.3.54

package/dist/chat.html

@@ -664,7 +664,12 @@
     let outputBuffer = '';
     let outputTimer = null;
     const OUTPUT_DELAY = 600; // 输出合并延迟(ms)，越大越少DOM操作
-    const MAX_MESSAGES = 150; // 聊天区最大消息数
+    const MAX_MESSAGES = 500; // 聊天区最大消息数；用户主动向上翻历史时临时禁用 trim
+    // 历史分页加载（jsonl 是真相源；500 内存上限和 150 DOM 上限都不够长会话回顾）
+    let _historyOffset = 0;       // 已加载的最老消息距最新的偏移（含初次 agent:history 回放的）
+    let _historyHasMore = true;   // 后端还有更老消息
+    let _historyLoading = false;  // 防抖锁
+    let _userScrolledUp = false;  // 用户已主动往上翻 → 关掉 trim 防被自动删
 
     // 命令历史
     const cmdHistory = [];
@@ -1442,6 +1447,11 @@
       chatArea.innerHTML = '';
       endStream(); endToolGroup(); removeThinking();
 
+      // 重置历史分页状态：从最新一批开始算偏移
+      _historyOffset = history.length;
+      _historyHasMore = true;
+      _userScrolledUp = false;
+
       for (const msg of history) {
         endStream(); // 每条历史消息都是独立的，不要流式合并
         if (msg.type === 'user' && msg.content) {
@@ -1489,6 +1499,96 @@
       scrollToBottom();
     });
 
+    // ── 历史分页：向上滚动到顶部触发加载更老批次 ──
+    async function loadOlderHistory() {
+      if (_historyLoading || !_historyHasMore) return;
+      _historyLoading = true;
+      // 顶部插入"加载中"提示
+      const indicator = document.createElement('div');
+      indicator.className = 'msg msg-status';
+      indicator.id = '_hist_loading_indicator';
+      indicator.textContent = '— 加载更早的历史… —';
+      chatArea.insertBefore(indicator, chatArea.firstChild);
+      // 记录滚动锚点（保持视觉位置）
+      const prevScrollHeight = chatArea.scrollHeight;
+      const prevScrollTop = chatArea.scrollTop;
+      try {
+        const r = await fetch(`/api/agent/history/${SESSION_ID}?offset=${_historyOffset}&limit=50`);
+        const d = await r.json();
+        indicator.remove();
+        if (!d.ok || !d.messages?.length) {
+          _historyHasMore = false;
+          const end = document.createElement('div');
+          end.className = 'msg msg-status';
+          end.textContent = '— 已到最早 —';
+          chatArea.insertBefore(end, chatArea.firstChild);
+          return;
+        }
+        // 准备 fragment，按 history 渲染逻辑创建 DOM，然后整体 prepend
+        const frag = document.createDocumentFragment();
+        for (const msg of d.messages) {
+          if (msg.type === 'user' && msg.content) {
+            const el = document.createElement('div');
+            el.className = 'msg msg-input';
+            el.innerHTML = `<div><div class="bubble">${escHtml(msg.content)}</div><div class="meta">${msg.timestamp ? new Date(msg.timestamp).toLocaleString('zh-CN') : ''}</div></div>`;
+            frag.appendChild(el);
+          } else if (msg.type === 'assistant' && msg.message?.content) {
+            const texts = [], tools = [];
+            for (const block of msg.message.content) {
+              if (block.type === 'text' && block.text) texts.push(block.text);
+              else if (block.type === 'tool_use') tools.push({ name: block.name || '工具', input: block.input || {} });
+            }
+            if (texts.length) {
+              const el = document.createElement('div');
+              el.className = 'msg msg-assistant';
+              const content = document.createElement('div');
+              content.className = 'content';
+              content.innerHTML = renderMarkdown(texts.join('\n\n'));
+              el.appendChild(content);
+              frag.appendChild(el);
+            }
+            // 历史里工具卡简化为状态行：用户翻历史主要看对话文本，不需要交互
+            for (const t of tools) {
+              const el = document.createElement('div');
+              el.className = 'msg msg-status';
+              el.textContent = '— 🔧 ' + t.name + ' —';
+              frag.appendChild(el);
+            }
+          } else if (msg.type === 'result') {
+            const el = document.createElement('div');
+            el.className = 'msg msg-status';
+            const cost = msg.total_cost_usd ? ` ($${msg.total_cost_usd.toFixed(4)})` : '';
+            el.textContent = '— 完成' + cost + ' —';
+            frag.appendChild(el);
+          }
+        }
+        chatArea.insertBefore(frag, chatArea.firstChild);
+        _historyOffset += d.messages.length;
+        _historyHasMore = d.hasMore;
+        // 保持滚动位置：新内容在顶部插入后，scrollTop 加上新增高度
+        chatArea.scrollTop = prevScrollTop + (chatArea.scrollHeight - prevScrollHeight);
+      } catch (e) {
+        indicator.textContent = '— 加载失败: ' + e.message + ' —';
+        setTimeout(() => indicator.remove(), 3000);
+      } finally {
+        _historyLoading = false;
+      }
+    }
+
+    chatArea.addEventListener('scroll', () => {
+      // 用户主动往上翻 → 禁用自动 trim，避免被删
+      if (chatArea.scrollTop < chatArea.scrollHeight - chatArea.clientHeight - 100) {
+        _userScrolledUp = true;
+      } else if (chatArea.scrollTop > chatArea.scrollHeight - chatArea.clientHeight - 20) {
+        // 回到接近底部 → 恢复 trim
+        _userScrolledUp = false;
+      }
+      // 接近顶部 100px → 拉更老历史
+      if (chatArea.scrollTop < 100 && _historyHasMore && !_historyLoading) {
+        loadOlderHistory();
+      }
+    });
+
     socket.on('agent:busy', (busy) => {
       if (busy) { showThinking(); setWorkState('thinking'); }
       else { removeThinking(); setWorkState('idle'); }
@@ -1952,6 +2052,7 @@
     window.goBack = function() { window.location.href = '/'; };
     function scrollToBottom() { requestAnimationFrame(() => { chatArea.scrollTop = chatArea.scrollHeight; }); }
     function trimMessages() {
+      if (_userScrolledUp) return; // 用户在往上翻历史，禁用自动删
       const msgs = chatArea.querySelectorAll('.msg');
       if (msgs.length > MAX_MESSAGES) {
         const remove = msgs.length - MAX_MESSAGES;