Repository navigation
fix(wework): overlay mode pill cancel icon - #1892
Merged
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughComposer mode pills now display semantic icons for plan and goal-draft modes. Cancel controls use absolute positioning and hover visibility, with tests and English/Chinese documentation updated accordingly. ChangesComposer mode indicators
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@wework/src/components/chat/composer/GoalDraftPill.tsx`:
- Line 85: The cancel icon button in GoalDraftPill uses the nonstandard h-5 w-5
size; update its sizing to the required h-8 w-8 compact icon-button dimensions,
or add an explicit documented exception if the h-7 pill layout cannot
accommodate it.
- Line 85: Update the cancel button styling in GoalDraftPill so it is reachable
without hover: use compact h-8 w-8 icon-button sizing, and make it visible on
keyboard focus and non-hover/touch devices while preserving hover behavior and
disabled styling. Ensure it is not an invisible tab stop when hidden.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e2170982-5812-40e9-a63c-3e7331e87b02
📒 Files selected for processing (6)
docs/en/developer-guide/wework-chat-state-sources.mddocs/zh/developer-guide/wework-chat-state-sources.mdwework/src/components/chat/ChatInput.test.tsxwework/src/components/chat/composer/CompactChatComposer.tsxwework/src/components/chat/composer/ComposerToolbar.tsxwework/src/components/chat/composer/GoalDraftPill.tsx
| }} | ||
| disabled={disabled} | ||
| className="pointer-events-none flex h-5 w-0 items-center justify-center overflow-hidden rounded-full bg-text-muted/15 text-text-muted opacity-0 transition-[width,margin,opacity,background-color,color] group-hover:pointer-events-auto group-hover:mr-1.5 group-hover:w-5 group-hover:bg-text-muted/15 group-hover:opacity-100 hover:bg-text-muted/30 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-0" | ||
| className="pointer-events-none absolute left-2 flex h-5 w-5 items-center justify-center rounded-full bg-text-muted/15 text-text-muted opacity-0 transition-[opacity,background-color,color] group-hover:pointer-events-auto group-hover:opacity-100 hover:bg-text-muted/30 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-0" |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use the required compact icon-button size or document an exception.
The cancel button uses h-5 w-5, which conflicts with the Wework control sizing rule requiring icon-only buttons to use h-8 w-8. If the pill’s h-7 layout requires the smaller control, document that exception explicitly.
As per coding guidelines: “Wework desktop workbench controls must use the compact sizing system: buttons h-8, icon-only buttons h-8 w-8.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@wework/src/components/chat/composer/GoalDraftPill.tsx` at line 85, The cancel
icon button in GoalDraftPill uses the nonstandard h-5 w-5 size; update its
sizing to the required h-8 w-8 compact icon-button dimensions, or add an
explicit documented exception if the h-7 pill layout cannot accommodate it.
Source: Coding guidelines
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the target file and nearby context
wc -l wework/src/components/chat/composer/GoalDraftPill.tsx
sed -n '1,220p' wework/src/components/chat/composer/GoalDraftPill.tsx
# Find where this component is used
rg -n "GoalDraftPill|ComposerModePill|CompactChatComposer" wework/src/components wework/src -g '*.ts' -g '*.tsx'
# Inspect the compact composer files mentioned by the review comment
fd -a "CompactChatComposer.tsx|ComposerModePill.tsx|GoalDraftPill.tsx" wework/srcRepository: wecode-ai/Wegent
Length of output: 7500
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,260p' wework/src/components/chat/composer/CompactChatComposer.tsx
printf '\n----\n'
sed -n '1,180p' wework/src/components/chat/composer/ComposerToolbar.tsx
printf '\n----\n'
rg -n "cancel-goal-draft-button|onCancelGoalDraft|cancel_goal_draft|workbench.cancel_mode" wework/src -g '*.ts' -g '*.tsx'Repository: wecode-ai/Wegent
Length of output: 15863
Make the cancel control reachable without hover.
This shared pill is used in the compact composer, so the cancel button can’t be used on touch devices and becomes an invisible tab stop on keyboard because it only appears on group-hover. Reveal it on focus/non-hover devices, and use the required compact h-8 w-8 icon-button sizing instead of h-5 w-5.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@wework/src/components/chat/composer/GoalDraftPill.tsx` at line 85, Update the
cancel button styling in GoalDraftPill so it is reachable without hover: use
compact h-8 w-8 icon-button sizing, and make it visible on keyboard focus and
non-hover/touch devices while preserving hover behavior and disabled styling.
Ensure it is not an invisible tab stop when hidden.
This was referenced Aug 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Root cause
The cancel affordance expanded within the pill, placing it next to the new mode icon and changing the pill width on hover.
Validation
pnpm exec vitest run src/components/chat/ChatInput.test.tsxpnpm typecheckSummary by CodeRabbit
New Features
Documentation
Tests