Repository navigation
fix(minimax-bot): fold the background job queue behind one line, separate the reply bubbles - #51
Conversation
The task strip had no way to shrink a busy queue: the rows kept the official shape, but thirty jobs filled the whole strip and the last ones were only reachable by scrolling inside it. The rows stay the ones the official build draws, in its order. What is new is a layer on top: the first five rows stay in the open, the rest fold into one line that says how many jobs are left, and a click brings them back. The button sits below the rows' own scroll area, so it stays reachable however long the queue is, and the strip keeps the height budget the official one had.
Three matches the number the folded reply bubbles keep, and it leaves the transcript more room when a queue is long.
The task strip fold is a build of its own on top of the merged 0.7.5.
The fold took a long reply's earlier bubbles behind a summary line. The queue of background jobs was the thing that needed folding, so the bubbles go back to the flat layout the official build draws: one bubble per recorded part, in the order it records them. What was missing there was a gap between them. One reply with many parts drew its bubbles flush against each other, so they read as one block of text; a small gap, the one the task rows use, tells them apart.
hetaoBackend
left a comment
There was a problem hiding this comment.
结论:可以合并,没有阻塞问题。 按 AGENTS.md 的三条门槛看:manifest 通过 npm run check(plugins/minimax-ai/minimax-bot: OK);改动只涉及前端渲染和版本号,不碰文件、网络或子进程,伤不到 Host 或用户数据;README 基本和实际行为一致,少了一处说明(见第 5 点)。插件自己的 205 个测试全部通过。下面都是建议。
值得修的问题
1. 点折叠按钮后键盘焦点会丢(可访问性)
renderHelpers() 每次都会把 .helper-more 删掉再新建。用户按 Enter / 空格触发后,旧按钮被移除,焦点落回 body,键盘用户没法连续切换展开和收起。30 秒的 setInterval 也会调用 renderHelpers(),焦点停在按钮上时同样会丢。
建议复用已有按钮节点,只更新文字和 aria-expanded;或者重建后如果原来有焦点就重新 focus()。停止按钮也有同样的问题,不过那是之前就有的。
2. 正在运行的任务可能被折叠掉
items = [...state.helpers, ...state.tasks] 之后直接 slice(0, 3)。如果某个 chat 里有 3 个以上排队中的 helper,state.tasks 里正在跑的任务就会被藏到"还有 N 个任务"后面,最需要看到的那一行反而看不见。
建议截取前先按状态排序(running → waiting_for_tasks → queued),或者 running 行永远不折叠。
3. gap: 4px 的影响范围比描述的大
.bubble-wrap 里不只有回复气泡,还有用户消息的附件、投递状态、.msg-tools 操作行、shimmer、事件行,私聊和群聊都用它。加了 gap 后这些元素之间都多出 4px,比如操作行和气泡的距离从 margin-top: 2px 变成实际 6px,附件下方从 4px 变成 8px。
如果只想分开相邻气泡,可以收窄成:
.bubble-wrap > .bubble + .bubble { margin-top: 4px; }对应的测试断言也要跟着改。
小问题和建议
- 展开状态会被带到后面:
helpersExpanded只在mountChat时重置。队列缩到 3 行以内、之后又变长时,会直接以展开状态出现。建议在items.length <= HELPER_ROWS_PREVIEW时重置为false。 - README 没写任务条折叠:这次只改了 "Working messages" 那条,新的折叠行为没写进 Background work 段落("Running jobs are shown above the chat input…")。建议补一句"超过 3 个任务时折叠,可展开"。
- 重复条件:
hidden > 0 || (helpersExpanded && items.length > HELPER_ROWS_PREVIEW)写了两遍,可以提成一个const foldable。 - commit 历史前后矛盾:
011c418写的是 "first five rows",后来c85ddf8改成 3,理由是 "matches the number the folded reply bubbles keep",但045eade把气泡折叠整个删了,这个理由已不成立。建议 squash 合并或改一下 message。 - 硬编码的按钮高度:
.helpers.has-fold .helper-rows的calc(40vh - 32px)里 32px 是按钮高度加间距,以后改.btn.sm尺寸容易对不上。影响很小。
验证
npm run check:通过,minimax-bot 无 error / warning。node --test tests/*.test.mjs(plugins/minimax-ai/minimax-bot):205/205 通过。- 未在真实 MiniMax Code 中打开界面验证,第 1、3 点来自读代码。
…tton The fold of the job queue had three rough edges. The button was removed and rebuilt on every render, so the keyboard focus fell back to the body as soon as the queue changed or the clock ticked. The same node is kept now; only its text and its state follow the queue. Which rows stayed in the open was decided by the order the jobs arrived in, so a job that was already working could be the row that folded away, behind a queue of jobs that had not started yet. The rows that stay in the open are chosen by status now, the working one first, while the rows themselves keep the order the official build gives them. An open queue stayed open after it shrank to a few jobs. It ends with the queue now, and the next busy chat starts folded again. The gap between the bubbles of one reply belongs to the bubbles alone. The rule names them instead of the whole column, so the action row, the notes and the event lines keep the spacing the official build gave them. The height budget of the strip and the row the fold button takes from it are two variables now.
The README described the working messages of a reply but not the strip above the composer, so the fold of a long queue was left undocumented.
|
谢谢评审。第 1、2、3、4、5、6、8 点已经在上面两笔提交里改掉,逐条回一下。 1. 折叠按钮的焦点:按钮现在跨重绘复用同一个节点,只有文案和 2. 正在跑的任务被折掉:留在外面的三行改成按状态挑, 3. 4. 展开状态被带过去:展开的队列跟着队列一起结束,缩到 3 个任务时折叠按钮消失,下一个忙的会话重新从收起开始。 5. README:Background work 那段补上了折叠的说明——超过 3 个任务时,正在跑的留在外面,其余折成一行,行下面一个按钮展开完整队列。 6. 重复条件:收成一个 7. commit 历史:说得对, 8. 写死的 32px:任务条的高度预算和折叠按钮占的那一行现在是两个变量( 测试: |
MyPrototypeWhat
left a comment
There was a problem hiding this comment.
Thanks for the quick turnaround, and thanks @hetaoBackend for the careful review. I re-reviewed 045eade..e030957 (f296610, e030957) against hetaoBackend's points.
Fixes checked
- Focus on the fold button.
.helper-moreis now created once and reused. Each render only updatestextContentandaria-expanded, so focus survives a click, the elapsed-time refresh and new jobs arriving. The test focuses the button, re-emitshelpers.changed, and asserts both node identity anddocument.activeElement. The stop buttons are still rebuilt on every render; that was already the case before this PR and is out of scope here. - Running jobs folded away.
visibleHelperRows()ranks by status (running → waiting_for_tasks → queued) to pick which three rows stay open, then filters the originalitems. The visible rows therefore keep the official order; the stable sort only decides the selection, so there is no reordering of rows and the official look holds. The test adds a running task behind four queued helpers and asserts that it is visible and that the queued rows give way. gap: 4pxtoo broad. The column no longer carries a gap. The new.bubble-wrap > .bubble + .bubble { margin-top: 4px }only affects bubbles that follow each other. The test asserts the column rule has nogap:, that the sibling rule exists, and that the 13-bubble reply has 12.bubble + .bubblepairs, i.e. the flat bubbles really are adjacent siblings and the rule reaches all of them. The action row, notes and event lines keep their official spacing.- Expanded state carried over.
helpersExpandednow resets when the queue drops to three or fewer and when it empties. The test shrinks the queue to three (the button disappears), grows it back, and sees "4 more tasks" again. - README. The Background work paragraph now describes the fold.
- Duplicated condition. It is now a single
foldable = items.length > HELPER_ROWS_PREVIEW. - Commit history. This is moot under squash merge.
- Hard-coded 32px. It now lives in
--helper-rows-max/--helper-fold-rowon.helpers. The computed values are unchanged (280px, and 248px with the fold).
No regressions found. Strings, theme vars and the rest of the plugin are unchanged.
Tiny wording nit (non-blocking)
README says "when more than three are queued". The fold actually triggers on more than three jobs in total, running or queued. "when more than three jobs are listed" would be exact.
Results
npm run checkat repo root (Node 22.14.0): pass;plugins/minimax-ai/minimax-bot: OK, contract tests 69/69.node --test testsinplugins/minimax-ai/minimax-bot(Node 20.19.2, Linux): 205/205 pass, including the extended task-strip test and both bubble tests. None of the four Windows failures you mention reproduce here, so there was nothing to compare against main.
Version
The bump to 0.7.6 is fine. #49 also bumps, so whichever of #49 / #51 merges later bumps again.
LGTM, approving.
hetaoBackend
left a comment
There was a problem hiding this comment.
行内意见见各条评论,总评见上一条 review。另外一条无法挂到代码行上:
[小问题] commit 历史前后矛盾:011c418 写的是 "first five rows",后来 c85ddf8 改成 3,理由是 "matches the number the folded reply bubbles keep",但 045eade 把气泡折叠整个删了,这个理由已不成立。建议 squash 合并或改一下 message。
| ui.helpers.classList.toggle('has-fold', hidden > 0 || (helpersExpanded && items.length > HELPER_ROWS_PREVIEW)); | ||
| // `replaceChildren` renders a null argument as the text "null", so the fold button is appended | ||
| // on its own, and only when there is something to fold. | ||
| ui.helpers.querySelector('.helper-more')?.remove(); |
There was a problem hiding this comment.
[建议修] 点折叠按钮后键盘焦点会丢(可访问性)
这里每次都把 .helper-more 删掉再新建。用户按 Enter / 空格触发后,旧按钮被移除,焦点落回 body,键盘用户没法连续切换展开和收起。30 秒的 setInterval 也会调用 renderHelpers(),焦点停在按钮上时同样会丢。
建议复用已有按钮节点,只更新文字和 aria-expanded;或者重建后如果原来有焦点就重新 focus()。(停止按钮也有同样的问题,不过那是之前就有的。)
| // The rows are the ones the official build draws, in the order it draws them. A busy chat | ||
| // keeps the first few in the open and folds the rest into one line, so the strip never | ||
| // grows into a wall of rows. | ||
| const preview = helpersExpanded ? items : items.slice(0, HELPER_ROWS_PREVIEW); |
There was a problem hiding this comment.
[建议修] 正在运行的任务可能被折叠掉
items = [...state.helpers, ...state.tasks] 之后直接 slice(0, 3)。如果某个 chat 里有 3 个以上排队中的 helper,state.tasks 里正在跑的任务就会被藏到"还有 N 个任务"后面,最需要看到的那一行反而看不见。
建议截取前先按状态排序(running → waiting_for_tasks → queued),或者 running 行永远不折叠。
| align-items: flex-start; | ||
| /* One reply can carry many bubbles, one per recorded part. Without a gap between them they | ||
| read as one block of text; a small one tells them apart, the way the task rows do. */ | ||
| gap: 4px; |
There was a problem hiding this comment.
[建议修] gap: 4px 的影响范围比描述的大
.bubble-wrap 里不只有回复气泡,还有用户消息的附件、投递状态、.msg-tools 操作行、shimmer、事件行,私聊和群聊都用它。加了 gap 后这些元素之间都多出 4px,比如操作行和气泡的距离从 margin-top: 2px 变成实际 6px,附件下方从 4px 变成 8px。
如果只想分开相邻气泡,可以收窄成:
.bubble-wrap > .bubble + .bubble { margin-top: 4px; }对应的测试断言也要跟着改。
|
|
||
| /** How many job rows stay in the open before the rest folds into one line. */ | ||
| const HELPER_ROWS_PREVIEW = 3; | ||
| let helpersExpanded = false; |
There was a problem hiding this comment.
[小问题] 展开状态会被带到后面
helpersExpanded 只在 mountChat 时重置。队列缩到 3 行以内、之后又变长时,会直接以展开状态出现,用户并没有点过。建议在 items.length <= HELPER_ROWS_PREVIEW 时重置为 false。
| ); | ||
| }), | ||
| ); | ||
| ui.helpers.classList.toggle('has-fold', hidden > 0 || (helpersExpanded && items.length > HELPER_ROWS_PREVIEW)); |
There was a problem hiding this comment.
[小问题] 重复条件
hidden > 0 || (helpersExpanded && items.length > HELPER_ROWS_PREVIEW) 在这里和下面 if 里写了两遍,可以提成一个 const foldable。
| /* The fold button sits below the scroll area and takes a row of its own, so the strip keeps | ||
| the height budget the official one had. */ | ||
| .helpers.has-fold .helper-rows { | ||
| max-height: min(248px, calc(40vh - 32px)); |
There was a problem hiding this comment.
[小问题] 硬编码的按钮高度
calc(40vh - 32px) 里的 32px 是按钮高度加间距,以后改 .btn.sm 尺寸容易对不上。影响很小。
| - **Reactions**: react to finished Bot replies in private and group chats. The quick bar offers 👍 ❤️ 🙌 😂 😭 😮, and more emoji can be browsed by category or searched in English or Chinese. Each message holds one reaction: picking a new one replaces it, and picking the same one again removes it. Reactions are saved locally, survive refreshes and restarts, and sync to other open windows. They do not trigger a Bot reply and are not sent to the model. | ||
| - **Reply actions**: the reaction, copy, quote-reply and open-session buttons sit at the bottom-left of a reply, under its last line. A long reply therefore keeps its actions within reach at the end of the text instead of pushing them off the top of the message. The reaction indicator sits directly above that row and is painted with the app's own tag colours, so it follows the light and dark themes. | ||
| - **Folded working messages**: the Host records a text part for every turn a Bot takes between two tool calls, so a reply that worked for a while arrives with many parts. The newest three bubbles stay in the open, exactly where the flat layout put them, the answer among them. The earlier ones keep their own shape but move into a folded area above them: one line says how many of them there are, and opening it shows them in a fixed height area with its own scrollbar, so the conversation above stays in reach. Hovering a bubble of such a reply tells what that bubble said, the way the task rows and the attachments do. | ||
| - **Working messages of one reply**: the Host records a text part for every turn a Bot takes between two tool calls, so a reply that worked for a while arrives with many parts, and the page draws one bubble per part. The bubbles keep the official shape and order, and a small gap between them tells them apart instead of letting them read as one block of text. |
There was a problem hiding this comment.
[小问题] README 没写任务条折叠
这次只改了这条 "Working messages",新的任务条折叠行为没写进 Background work 段落(第 17 行 "Running jobs are shown above the chat input…")。建议在那里补一句"超过 3 个任务时折叠,可展开"。
This is the follow-up to #48. The reply actions #48 moved to the bottom-left of a reply and the themed reaction badge stay as they are. What this pull request adds is the piece that was still missing: the strip of background jobs folds a long queue behind one line, and the working messages of one reply keep the official flat layout with a small gap between the bubbles.
The first review round pointed at four rough edges in that fold. They are fixed in the two commits on top of the original ones:
What changed
Test environment and results
npm run checkin the repository root reports no errors and no warnings, and the 69 contract tests pass.EBUSY: resource busy or locked, rmdirwhile the test removed its temporary directory. It clears when the file runs on its own.Unverified
这是 #48 的后续。#48 把回复操作按钮移到左下角、把反应徽章主题化,这两处保持不动。这个 PR 补上的是之前还缺的一块:后台任务条把长队列折成一行,一次回复的过程消息回到官方平铺形态,气泡之间留出小间隔。
第一轮评审指出这个折叠还有四处毛刺,已经在上面两笔提交里修掉:
改了什么
测试环境与结果
npm run check无错误无警告,69 条契约用例通过。EBUSY: resource busy or locked, rmdir,单独跑该文件时不会出现。未验证