@liguoshuai/pi-web-chat 1.8.4 → 1.8.5

package/docs/ARCHITECTURE.md

@@ -1,6 +1,6 @@
 # 架构设计文档
 
-> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.4 版本）。
+> pi-web-chat 的技术架构、数据流、关键设计决策与扩展点说明（对应 v1.8.5 版本）。
 
 ---
 

package/docs/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.8.5] - 2026-08-23
+
+### Fixed
+- **中止/终止生成按钮逻辑修复 (Abort Button Logic & UX Fix)**：
+  - 修复生成过程中点击终止按钮（`■`）时，因输入框为空触发提前返回（`if (!text) return`）导致无法发出 `abort` 信号的问题。
+  - 抽离独立的 `abortGeneration()` 统一处理中断生成流程，确保点击停止按钮无条件触发任务终止。
+  - 修复输入框有草稿时点击停止按钮误触发 `steer`（插入指令）的问题，明确区分停止按钮与插入指令按钮职责。
+  - 新增中止中即时视觉反馈（按钮变为等待状态 `⏳`，输入框边缘高亮变红，提示文字变更为“中止当前任务中…”），并在底层 `agent_settled` 或 `abort` 响应后安全恢复。
+  - 支持在生成过程中按 `Escape` 键快速中止当前任务（模态框或菜单打开时除外）。
+  - 在新建会话及切换会话时，若当前任务正在运行中，自动先行中断当前流式任务以避免后台状态错乱。
+
+---
+
 ## [1.8.4] - 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",

package/public/app.js

@@ -42,6 +42,7 @@ const state = {
   thinkingLevel: "medium",
   sessionId: null,
   isBackfilling: false,
+  aborting: false,
 };
 
 let toastTimer = null;
@@ -576,8 +577,12 @@ async function syncSessionHistory(file, force = false) {
 }
 
 async function loadSession(file) {
+  if (state.streaming) {
+    abortGeneration();
+  }
   state.currentSessionFile = file;
   state.streaming = false;
+  state.aborting = false;
   state.streamingItems = [];
   state.streamingMsg = null;
   state.activeToolCalls.clear();
@@ -1295,6 +1300,9 @@ function handlePiMessage(obj) {
         renderThinkingPill();
         updateEmptyStateModelInfo();
       }
+    } else if (obj.command === "abort") {
+      state.aborting = false;
+      setComposerAborting(false);
     }
     else if (obj.command === "switch_session" && obj.success) {
       // ask pi for current state so we can get session id, name
@@ -1329,6 +1337,7 @@ function handlePiMessage(obj) {
       break;
     case "agent_start":
       state.streaming = true;
+      state.aborting = false;
       setComposerAborting(true);
       ensureStreamingMsg();
       refreshStreamingContent();
@@ -1340,6 +1349,7 @@ function handlePiMessage(obj) {
     case "agent_settled":
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       sendWs({ type: "get_state" });
       refreshSessions(); // titles may have changed
@@ -1465,6 +1475,7 @@ function handlePiMessage(obj) {
     case "pi_exit":
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       $("#connDot").style.color = "var(--danger)";
       break;
@@ -1560,6 +1571,7 @@ function updateState(d) {
     } else if (state.streaming) {
       finalizeStreamingMsg();
       state.streaming = false;
+      state.aborting = false;
       setComposerAborting(false);
       if (state.currentSessionFile) {
         syncSessionHistory(state.currentSessionFile, true);
@@ -2064,8 +2076,24 @@ function updateComposerUI() {
   const text = ta ? ta.value.trim() : "";
   const sendBtn = $("#sendBtn");
   const steerBtn = $("#steerBtn");
+  const inner = $("#composerInner");
 
-  if (state.streaming) {
+  if (inner) {
+    inner.classList.toggle("aborting", !!state.aborting);
+  }
+
+  if (state.aborting) {
+    if (sendBtn) {
+      sendBtn.classList.add("stop");
+      sendBtn.disabled = true;
+      sendBtn.textContent = "⏳";
+      sendBtn.title = "中止中…";
+    }
+    if (steerBtn) {
+      steerBtn.style.display = "none";
+    }
+    if (ta) ta.placeholder = "正在中止当前任务…";
+  } else if (state.streaming) {
     if (sendBtn) {
       sendBtn.classList.add("stop");
       sendBtn.disabled = !state.wsConnected;
@@ -2096,10 +2124,34 @@ function updateComposerUI() {
 }
 
 function setComposerAborting(yes) {
+  if (!yes) {
+    state.aborting = false;
+    const inner = $("#composerInner");
+    if (inner) inner.classList.remove("aborting");
+    const hint = $(".composer-hint");
+    if (hint && hint.textContent.includes("中止")) {
+      hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。";
+    }
+  }
   updateComposerUI();
   renderModelPill();
 }
 
+function abortGeneration() {
+  if (!state.streaming && !state.aborting) return;
+  if (!state.wsConnected) {
+    const hint = $(".composer-hint");
+    if (hint) hint.textContent = "操作失败：WebSocket 未连接。正在尝试重连…";
+    scheduleReconnect(0);
+    return;
+  }
+  state.aborting = true;
+  updateComposerUI();
+  const hint = $(".composer-hint");
+  if (hint) hint.textContent = "中止当前任务中…";
+  sendWs({ type: "abort" });
+}
+
 function submitSteer() {
   const ta = $("#composer");
   const text = ta.value.trim();
@@ -2126,8 +2178,19 @@ function submitSteer() {
 }
 
 function submitPrompt() {
+  if (state.streaming) {
+    const ta = $("#composer");
+    const text = ta ? ta.value.trim() : "";
+    if (text) {
+      submitSteer();
+    } else {
+      abortGeneration();
+    }
+    return;
+  }
+
   const ta = $("#composer");
-  const text = ta.value.trim();
+  const text = ta ? ta.value.trim() : "";
   const hint = $(".composer-hint");
   if (!text) return;
   if (!state.wsConnected) {
@@ -2137,16 +2200,7 @@ function submitPrompt() {
     if (box) { box.style.boxShadow = "0 0 0 2px var(--danger)"; setTimeout(() => { box.style.boxShadow = ""; }, 350); }
     return;
   }
-  if (state.streaming) {
-    if (text) {
-      submitSteer();
-      return;
-    }
-    if (hint) hint.textContent = "中止当前生成中…";
-    sendWs({ type: "abort" });
-    return;
-  }
-  
+
   if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。"; // restore default
   // Render the user's message locally for instant feedback.
   appendMessageNode("user", { text });
@@ -2154,6 +2208,7 @@ function submitPrompt() {
   autoResize();
 
   state.streaming = true;
+  state.aborting = false;
   setComposerAborting(true);
   ensureStreamingMsg();
   refreshStreamingContent();
@@ -2183,7 +2238,7 @@ async function init() {
   $("#btnNew").addEventListener("click", () => {
     if (state.streaming) {
       if (!confirm("正在生成中，新建会话会终止当前操作，确定吗？")) return;
-      sendWs({ type: "abort" });
+      abortGeneration();
     }
     clearChat();
     showEmptyState(true);
@@ -2200,12 +2255,7 @@ async function init() {
 
   $("#sendBtn").addEventListener("click", () => {
     if (state.streaming) {
-      const ta = $("#composer");
-      if (ta && ta.value.trim()) {
-        submitSteer();
-      } else {
-        submitPrompt();
-      }
+      abortGeneration();
     } else {
       submitPrompt();
     }
@@ -2259,11 +2309,17 @@ async function init() {
     });
   }
 
-  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector
+  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector, Escape to abort if streaming
   window.addEventListener("keydown", (e) => {
     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m") {
       e.preventDefault();
       toggleModelMenu();
+    } else if (e.key === "Escape" && state.streaming) {
+      const isMenuOpen = $("#modelMenu")?.classList.contains("open") || $("#thinkingMenu")?.classList.contains("open");
+      const isModalOpen = $("#cwdModal")?.style.display === "flex";
+      if (!isMenuOpen && !isModalOpen) {
+        abortGeneration();
+      }
     }
   });
 

package/public/style.css

@@ -708,7 +708,10 @@ body {
   transition: border-color .15s;
 }
 .composer-inner:focus-within { border-color: var(--text-dim); }
-.composer-inner.aborting { border-color: var(--danger); }
+.composer-inner.aborting {
+  border-color: var(--danger);
+  box-shadow: 0 0 0 1px var(--danger);
+}
 .composer textarea {
   flex: 1; background: transparent; border: none; outline: none; resize: none;
   color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5;
@@ -717,10 +720,12 @@ body {
 .composer .send-btn {
   width: 36px; height: 32px; border-radius: 18px; border: none; cursor: pointer;
   background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0; transition: background .15s, opacity .15s;
+  flex-shrink: 0; transition: background .15s, opacity .15s, transform .1s;
 }
 .composer .send-btn:disabled { background: #3a3a3a; color: #6f6f6f; cursor: not-allowed; }
 .composer .send-btn.stop { background: var(--danger); }
+.composer .send-btn.stop:hover:not(:disabled) { background: #f87171; }
+.composer .send-btn.stop:active:not(:disabled) { transform: scale(0.95); }
 .composer .steer-btn {
   display: inline-flex;
   align-items: center;