docs(webui): thinking-timer design for the chat message area

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-07-30 11:11:33 +08:00
parent 08aa0d0e05
commit c6efdaa13f
1 changed files with 31 additions and 0 deletions
@@ -0,0 +1,31 @@
+# 思考中计时器(ThinkingTimer)设计
+
+日期:2026-07-30
+状态:已批准
+
+## 背景与目标
+
+发消息后到 run 结束之间,消息区没有任何"对话仍在进行"的提示,用户不确定
+系统是在思考还是卡死。在消息区底部加一个计时指示:`● 思考中… 0:12`。
+
+非目标:不改 Stop 按钮;不做首 token 检测;不持久化计时。
+
+## 方案
+
+新增 `ThinkingTimer` 组件(`EvoScientist-WebUI/src/app/components/ChatInterface.tsx`,
+与 `GenerationParamSlider` 等页面内组件同级):
+
+- **挂载即计时**:`useEffect` 记录挂载时间,`setInterval` 每秒更新已逝秒数;
+  卸载清除 interval。父级 `{isLoading && <ThinkingTimer />}` 控制——
+  isLoading 翻 true 时挂载归零,结束/停止/报错时卸载。无父级状态。
+- **显示**:脉冲圆点(`size-2 animate-pulse rounded-full`,品牌色)+
+  `思考中…` + `m:ss` 计时(分钟可超 59,如 `74:03`)。
+- **位置**:消息滚动区底部、最后一条消息组之后(随内容滚动),
+  `text-xs text-muted-foreground`,`role="status"`。
+- **行为**:整个运行期间显示(含流式输出、工具调用、子代理);interrupt
+  (审批询问)时 isLoading 翻 false,计时器自然消失,恢复后重新计时。
+
+## 测试
+
+项目无组件测试设施:tsc + 全量 vitest + 浏览器手测(发消息 → 计时器出现、
+每秒走字 → 结束消失;Stop → 消失)。