@liguoshuai/pi-web-chat 2.17.8 → 2.19.1

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/@liguoshuai/pi-web-chat.svg)](https://www.npmjs.com/package/@liguoshuai/pi-web-chat)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-brightgreen.svg)](https://nodejs.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D20-brightgreen.svg)](https://nodejs.org/)
 
 一个 [pi](https://pi.dev) 编程代理的 Web 界面，风格参考 ChatGPT / Gemini ——
 左侧历史会话侧边栏 + 右侧对话区 + 底部输入框。底层通过 pi 的 **RPC 模式**
@@ -35,7 +35,7 @@
 ## 🚀 快速开始
 
 ### 1. 环境准备
-- **Node.js**: `>= 18.0.0`
+- **Node.js**: `>= 20.0.0`
 - **操作系统**: Linux / macOS / WSL (Windows)
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "2.17.8",
+  "version": "2.19.1",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -37,13 +37,13 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "dependencies": {
     "express": "^4.21.2",
     "ws": "^8.18.0",
-    "@liguoshuai/pi-chat-protocol": "2.17.8",
-    "@liguoshuai/pi-chat-server": "2.17.8"
+    "@liguoshuai/pi-chat-protocol": "2.19.1",
+    "@liguoshuai/pi-chat-server": "2.19.1"
   },
   "scripts": {
     "build": "node --check server.js && node --check bin/pi-web-chat.js && node --check public/markdown.js && node --check public/app.js",

package/public/app.js

@@ -168,8 +168,17 @@ async function loadServerConfig() {
     }
     if (data.version) {
       state.version = data.version;
-      const verEl = $("#appVersion");
-      if (verEl) verEl.textContent = `v${data.version}`;
+    }
+    if (data.piVersion) {
+      state.piVersion = data.piVersion;
+    }
+    const piVerEl = $("#piVersion");
+    if (piVerEl) {
+      piVerEl.textContent = state.piVersion ? ` v${state.piVersion}` : "";
+    }
+    const verEl = $("#appVersion");
+    if (verEl) {
+      verEl.textContent = state.version ? ` v${state.version}` : "";
     }
     if (data.defaultModel) {
       state.defaultModel = data.defaultModel;
@@ -372,13 +381,7 @@ function startStreamingTimer() {
         el.style.display = "";
       }
     });
-    const liveTools = document.querySelectorAll(".tool-duration.live");
-    liveTools.forEach((el) => {
-      if (el._startedAt) {
-        el.textContent = formatDuration(now - el._startedAt);
-        el.style.display = "";
-      }
-    });
+
     // Live update for the thinking placeholder spinner label before first delta arrives
     const placeholder = document.querySelector(".thinking-placeholder");
     if (placeholder && state.turnStartedAt) {
@@ -393,7 +396,7 @@ function startStreamingTimer() {
         }
       }
     }
-  }, 100);
+  }, 200);
 }
 
 function stopStreamingTimer() {
@@ -763,6 +766,7 @@ function reconstructFromEntries(entries, timing = null) {
       lastUserTs = msgTs;
       turnIndex++;
       thinkingIdx = 0;          // reset thinking index for the new turn
+      const isSteer = Boolean(m.isSteer || e.isSteer || e.customType === "steer" || m.customType === "steer");
       // Extract optional images from user message content array
       let images = [];
       if (Array.isArray(m.content)) {
@@ -774,7 +778,7 @@ function reconstructFromEntries(entries, timing = null) {
             url: c.data ? `data:${c.mimeType || "image/png"};base64,${c.data}` : (c.url || "")
           }));
       }
-      out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs });
+      out.push({ role: "user", text: extractContentText(m.content), images, ts: msgTs, isSteer });
     } else if (m.role === "assistant") {
       let turnDurationMs = null;
       // Try timing data first, then fall back to timestamp heuristic.
@@ -842,10 +846,19 @@ function extractContentText(content) {
     .join("\n\n");
 }
 
-function appendSystemNotice(text) {
+function appendSystemNotice(text, replaceIfLast = true) {
   if (!text) return;
   const chatInner = $("#chat-inner");
   if (!chatInner) return;
+  const lastChild = chatInner.lastElementChild;
+  if (replaceIfLast && lastChild && lastChild.classList.contains("system-notice-divider")) {
+    const textEl = lastChild.querySelector(".system-notice-text");
+    if (textEl) {
+      textEl.textContent = text;
+      scrollBottom();
+      return;
+    }
+  }
   const node = el("div", { class: "system-notice-divider" }, [
     el("span", { class: "system-notice-text", text })
   ]);
@@ -1657,6 +1670,9 @@ function refreshStreamingContent() {
           el("span", { class: "thinking-spinner" }),
           el("span", { class: "thinking-label", text: "正在思考中…" })
         ]));
+        content.appendChild(el("div", { class: "streaming-cursor-row" }, [
+          el("span", { class: "typing-cursor" })
+        ]));
       }
     }
     scrollBottom();
@@ -1669,7 +1685,7 @@ function refreshStreamingContent() {
     const lastItem = items[items.length - 1];
     if (lastItem.type === "text") {
       const lastEl = content.lastElementChild;
-      if (lastEl && !lastEl.classList.contains("thinking-block") && !lastEl.classList.contains("tool-block")) {
+      if (lastEl && !lastEl.classList.contains("thinking-block") && !lastEl.classList.contains("tool-block") && !lastEl.classList.contains("streaming-cursor-row")) {
         const showCursor = state.streaming;
         lastEl.innerHTML = renderMarkdown(lastItem.text) + (showCursor ? '<span class="typing-cursor"></span>' : "");
         scrollBottom();
@@ -1681,6 +1697,7 @@ function refreshStreamingContent() {
   // Full rebuild (new items added or structure changed)
   content.innerHTML = "";
   const lastIdx = items.length - 1;
+  let hasText = false;
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const isLast = (i === lastIdx);
@@ -1690,10 +1707,16 @@ function refreshStreamingContent() {
     } else if (item.type === "tool") {
       if (item.tc?.block) content.appendChild(item.tc.block);
     } else if (item.type === "text") {
+      hasText = true;
       const showCursor = state.streaming && isLast;
       content.appendChild(el("div", { html: renderMarkdown(item.text) + (showCursor ? '<span class="typing-cursor"></span>' : "") }));
     }
   }
+  if (state.streaming && !hasText) {
+    content.appendChild(el("div", { class: "streaming-cursor-row" }, [
+      el("span", { class: "typing-cursor" })
+    ]));
+  }
   lastRenderedItemCount = items.length;
   scrollBottom();
 }
@@ -3077,6 +3100,13 @@ function submitSteer() {
     return;
   }
 
+  // If there was an active streaming assistant block before steering, finalize it
+  // so that subsequent assistant chunks render in a new block below this steer message!
+  if (state.streamingMsg) {
+    finalizeStreamingMsg();
+    state.streaming = true; // resume streaming flag for subsequent response
+  }
+
   appendMessageNode("user", { text, isSteer: true, ts: Date.now() });
   ta.value = "";
   autoResize();
@@ -3144,7 +3174,7 @@ function submitPrompt() {
   if (state.streamingWatchdog) clearTimeout(state.streamingWatchdog);
   state.streamingWatchdog = setTimeout(() => {
     if (state.streaming) {
-      toast("生成超时（5 分钟无响应），已自动结束。", "warn");
+      showToast("生成超时（5 分钟无响应），已自动结束。");
       finalizeStreamingMsg();
     }
   }, 5 * 60 * 1000);

package/public/index.html

@@ -30,11 +30,10 @@
         <div id="connStatus" class="conn-status" title="点击可重新连接"><span id="connDot" style="color: var(--danger);">●</span>&nbsp;<span id="connLabel">连接中…</span></div>
         <div class="sidebar-bottom-meta">
           <div class="sidebar-bottom-links">
-            <a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a>
+            <a href="https://pi.dev" target="_blank" rel="noopener">pi<span id="piVersion"></span></a>
             <span class="sidebar-link-sep">·</span>
-            <a href="https://github.com/liguoshuai-1990/pi-web-chat" target="_blank" rel="noopener">pi-web-chat</a>
+            <a href="https://github.com/liguoshuai-1990/pi-chat" target="_blank" rel="noopener">pi-chat<span id="appVersion"></span></a>
           </div>
-          <span id="appVersion" class="app-version" title="pi-web-chat 版本"></span>
         </div>
       </div>
       <div class="sidebar-resizer" id="sidebarResizer" title="拖拽调整侧边栏宽度，双击恢复默认"></div>

package/public/style.css

@@ -342,7 +342,6 @@ body {
   margin-top: 6px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
 }
 .sidebar-bottom-links {
@@ -928,6 +927,13 @@ body {
   to { opacity: 1; transform: scale(1.25); }
 }
 
+.streaming-cursor-row {
+  margin-top: 6px;
+  line-height: 1;
+}
+.streaming-cursor-row .typing-cursor::after {
+  margin-left: 0;
+}
 .typing-cursor::after {
   content: "▋"; display: inline-block; margin-left: 2px;
   animation: blink 1s steps(2) infinite; color: var(--accent);