Allow canceling / reverting prompt enhancement - #1267
Conversation
🦋 Changeset detectedLatest commit: 4e3cbec The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
hassoncs
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for canceling and reverting prompt enhancements in the chat UI.
- Introduces
cancelEnhancementandrevertEnhancementlabels in all locales. - Updates
ChatTextAreato store original/enhanced prompt state and handle cancel/revert flows. - Adds unit and E2E tests covering enhancement, cancellation, and revert behaviors.
Reviewed Changes
Copilot reviewed 35 out of 35 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| webview-ui/src/i18n/locales/*/kilocode.json | Added enhancePrompt translations for all locales |
| webview-ui/src/components/chat/ChatTextArea.tsx | Implemented prompt cancellation and revert logic |
| webview-ui/src/components/chat/tests/ChatTextArea.spec.tsx | Added tests for cancel/revert prompt enhancement |
| apps/playwright-e2e/tests/enhance-prompt.test.ts | New E2E tests for prompt enhancement flows |
| apps/playwright-e2e/tests/chat-with-response-refactored.test.ts | New refactored chat E2E test |
| apps/playwright-e2e/playwright.config.ts | Adjusted retry settings |
| apps/playwright-e2e/helpers/test-setup-helpers.ts | Extracted shared test setup helper |
| apps/playwright-e2e/helpers/enhance-prompt-helpers.ts | Helper functions for E2E prompt enhancement tests |
| apps/playwright-e2e/helpers/chat-helpers.ts | Helper functions for E2E chat interactions |
Comments suppressed due to low confidence (1)
webview-ui/src/components/chat/ChatTextArea.tsx:1480
- The translation key namespace appears incorrect; verify whether it should be
t("chat:enhancePrompt.cancelEnhancement")instead oft("kilocode:chat.enhancePrompt.cancelEnhancement").
title={
14246b7 to
354d9d2
Compare
|
related? RooCodeInc/Roo-Code#5742 |
3f8688a to
d7a8933
Compare
|
@chrarnoldus, oh yeah! Looks like they built a rough version of this based on the native undo! I'll see what parts of this make sense to keep around |
473383d to
0a08647
Compare
91a0a89 to
81148d5
Compare
hassoncs
changed the title
8d22646 to
0d35e84
Compare
WalkthroughThis update introduces a reversible prompt enhancement feature in the chat interface. Users can now enhance, cancel, or revert prompt enhancements. The UI and logic for the enhance prompt button have been updated accordingly, including state management, localization, and comprehensive tests. Supporting Playwright helpers were added to facilitate end-to-end testing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ChatTextArea
participant VSCodeWebview
User->>ChatTextArea: Click "Enhance" button
ChatTextArea->>VSCodeWebview: Post message to enhance prompt
alt Enhancement in progress
User->>ChatTextArea: Click "Cancel" button
ChatTextArea->>VSCodeWebview: Cancel enhancement request
else Enhancement completed
VSCodeWebview-->>ChatTextArea: Send enhanced prompt
ChatTextArea->>User: Show enhanced prompt
User->>ChatTextArea: Click "Revert" button
ChatTextArea->>User: Restore original prompt
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/playwright-e2e/helpers/enhance-prompt-helpers.tsOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by webview-ui/src/components/chat/ChatTextArea.tsxOops! Something went wrong! :( ESLint: 9.28.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (26)
✅ Files skipped from review due to trivial changes (5)
🚧 Files skipped from review as they are similar to previous changes (21)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (6)
webview-ui/src/i18n/locales/en/kilocode.json (1)
55-56: Consider using Title Case for consistencyMost button-style labels in this file use Title Case (e.g., “Condense Conversation”).
Aligning with that convention would improve visual consistency:- "cancelEnhancement": "Cancel enhancement", - "revertEnhancement": "Revert to original prompt" + "cancelEnhancement": "Cancel Enhancement", + "revertEnhancement": "Revert to Original Prompt"webview-ui/src/i18n/locales/ca/kilocode.json (1)
61-63: Minor ordering nit – keep key order consistentMost locale files list
cancelEnhancementfirst, thenrevertEnhancement. This file reverses them.
Ordering has no runtime effect, but aligning all locale files reduces noisiness in diffs and makes bulk-edits easier.- "revertEnhancement": "Tornar a l'indicador original", - "cancelEnhancement": "Cancel·lar millora" + "cancelEnhancement": "Cancel·lar millora", + "revertEnhancement": "Tornar a l'indicador original".changeset/old-socks-decide.md (1)
7-9: Typo: “it's” → “its”Possessive its should not have an apostrophe.
-Once the prompt has been enhanced, the button will become a revert button, which returns the prompt to it's original text. +Once the prompt has been enhanced, the button will become a revert button, which returns the prompt to its original text.webview-ui/src/i18n/locales/pt-BR/kilocode.json (1)
53-57: Optional wording tweak: use “aprimoramento”.In Brazilian Portuguese the verb aprimorar is the usual counterpart to enhance in UI wording. “Cancelar melhoria” is understandable but a bit generic.
- "cancelEnhancement": "Cancelar melhoria", + "cancelEnhancement": "Cancelar aprimoramento",webview-ui/src/i18n/locales/id/kilocode.json (1)
53-57: Untranslated term “prompt”.
"Kembalikan ke prompt asli"keeps prompt in English while the rest of the file generally localises technical terms (“browser”, “tool” etc.). If you prefer full Bahasa, consider:- "revertEnhancement": "Kembalikan ke prompt asli" + "revertEnhancement": "Kembalikan ke perintah asli"If “prompt” is deliberately left in English across the product, ignore this.
webview-ui/src/i18n/locales/ko/kilocode.json (1)
54-56: Key order differs from other locales – keep consistency for diff hygiene.Other locales declare
"cancelEnhancement"first,"revertEnhancement"second; the Korean file reverses them. Functional-wise it’s harmless (JSON objects are unordered) but consistent ordering eases future bulk edits.No change required if you don’t care, just flagging.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (26)
.changeset/old-socks-decide.md(1 hunks)apps/playwright-e2e/helpers/enhance-prompt-helpers.ts(1 hunks)webview-ui/src/components/chat/ChatTextArea.tsx(9 hunks)webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx(6 hunks)webview-ui/src/i18n/locales/ar/kilocode.json(1 hunks)webview-ui/src/i18n/locales/ca/kilocode.json(1 hunks)webview-ui/src/i18n/locales/cs/kilocode.json(1 hunks)webview-ui/src/i18n/locales/de/kilocode.json(1 hunks)webview-ui/src/i18n/locales/en/kilocode.json(1 hunks)webview-ui/src/i18n/locales/es/kilocode.json(1 hunks)webview-ui/src/i18n/locales/fr/kilocode.json(1 hunks)webview-ui/src/i18n/locales/hi/kilocode.json(1 hunks)webview-ui/src/i18n/locales/id/kilocode.json(1 hunks)webview-ui/src/i18n/locales/it/kilocode.json(1 hunks)webview-ui/src/i18n/locales/ja/kilocode.json(1 hunks)webview-ui/src/i18n/locales/ko/kilocode.json(1 hunks)webview-ui/src/i18n/locales/nl/kilocode.json(1 hunks)webview-ui/src/i18n/locales/pl/kilocode.json(1 hunks)webview-ui/src/i18n/locales/pt-BR/kilocode.json(1 hunks)webview-ui/src/i18n/locales/ru/kilocode.json(1 hunks)webview-ui/src/i18n/locales/th/kilocode.json(1 hunks)webview-ui/src/i18n/locales/tr/kilocode.json(1 hunks)webview-ui/src/i18n/locales/uk/kilocode.json(1 hunks)webview-ui/src/i18n/locales/vi/kilocode.json(1 hunks)webview-ui/src/i18n/locales/zh-CN/kilocode.json(1 hunks)webview-ui/src/i18n/locales/zh-TW/kilocode.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/playwright-e2e/helpers/enhance-prompt-helpers.ts (2)
apps/playwright-e2e/helpers/webview-helpers.ts (1)
findWebview(12-18)apps/playwright-e2e/tests/playwright-base-test.ts (1)
expect(3-3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: storybook-playwright-snapshot
- GitHub Check: test-extension (windows-latest)
- GitHub Check: test-webview (windows-latest)
🔇 Additional comments (35)
webview-ui/src/i18n/locales/hi/kilocode.json (1)
54-56: Hindi localization looks goodThe new
enhancePromptkeys read naturally and match the intended meaning.webview-ui/src/i18n/locales/zh-CN/kilocode.json (1)
54-56: Chinese (Simplified) strings are accurateTranslations correctly reflect the feature’s intent and style.
webview-ui/src/i18n/locales/it/kilocode.json (1)
54-56: Italian translations OKWording is clear and consistent with the rest of the file.
webview-ui/src/i18n/locales/ar/kilocode.json (1)
54-56: New localisation keys look good
cancelEnhancement/revertEnhancementare added with clear, accurate Arabic translations and correct JSON structure. 👍webview-ui/src/i18n/locales/ru/kilocode.json (1)
54-56: Translation addition LGTM
Both new keys are present, translation wording is natural, and the surrounding commas/braces are correct. No issues spotted.webview-ui/src/i18n/locales/ja/kilocode.json (1)
54-56: Japanese strings read well
Wording matches existing style and JSON syntax is intact. Nothing further to do.webview-ui/src/i18n/locales/pl/kilocode.json (1)
54-56: Translation keys added correctly; JSON stays validKeys are well-named, alphabetically placed, and keep the file syntactically sound.
No further action needed.webview-ui/src/i18n/locales/es/kilocode.json (1)
54-56: Spanish strings added without issuesJSON structure and punctuation are intact; translations read naturally.
LGTM.webview-ui/src/i18n/locales/vi/kilocode.json (1)
54-56: Vietnamese additions look goodBoth keys are present, accents are correct, and no comma/brace problems found.
webview-ui/src/i18n/locales/uk/kilocode.json (1)
54-56: Ukrainian localisation OKTerminology matches UI intent; JSON remains valid.
webview-ui/src/i18n/locales/fr/kilocode.json (2)
54-56: French keys added correctlyStrings are clear, apostrophes escaped by using double-quotes, and object placement is consistent.
54-56: Locale coverage verified
Allkilocode.jsonlocale files include bothcancelEnhancementandrevertEnhancement. No missing translations detected.webview-ui/src/i18n/locales/cs/kilocode.json (1)
53-57: LGTM – translation reads naturally.Both strings are idiomatic and match the intended actions. No issues spotted.
webview-ui/src/i18n/locales/nl/kilocode.json (1)
54-57: LGTM! Dutch localization strings added correctly.The new
enhancePromptsection provides appropriate Dutch translations for the cancel and revert functionality. The translations are accurate and follow the existing localization structure.webview-ui/src/i18n/locales/th/kilocode.json (1)
54-57: LGTM! Thai localization strings added correctly.The new
enhancePromptsection provides Thai translations for the cancel and revert functionality. The JSON structure is consistent with the existing localization format.webview-ui/src/i18n/locales/de/kilocode.json (1)
54-57: LGTM! German localization strings added correctly.The new
enhancePromptsection provides accurate German translations for the cancel and revert functionality. The translations are linguistically correct and follow the existing localization structure.webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx (5)
45-47: Good fix! Button selector now uses stable test ID.The change from role-based selector to
data-testid="enhance-prompt-button"addresses the previous review feedback and provides a more reliable way to select the button across different states (enhance/cancel/revert).
189-214: Excellent improvement! Test now properly simulates user workflow.The test has been made asynchronous and now correctly simulates clicking the enhance button before dispatching the enhanced prompt event. This ensures the internal state (
originalPromptBeforeEnhancement) is properly set, making the test more realistic and reliable.
232-248: Good practice! Fallback test also updated with proper workflow simulation.The fallback test consistently follows the same pattern of clicking the enhance button first, ensuring all test scenarios properly simulate the user interaction flow.
282-301: Well-designed test! Properly verifies cancellation behavior.This test correctly simulates the cancellation workflow by clicking the enhance button twice (start then cancel) and verifies that the enhanced prompt is not applied when the enhancement was cancelled. This validates the state management logic.
303-328: Comprehensive test! Validates the complete revert workflow.This test properly simulates the full revert scenario: enhance → receive enhanced prompt → click revert button. It correctly verifies that the original prompt is restored, ensuring the revert functionality works as expected.
webview-ui/src/components/chat/ChatTextArea.tsx (8)
40-40: LGTM!The
RotateCcwimport is correctly added to support the revert button icon functionality.
158-161: LGTM!The new state variables are properly typed and initialized to support the prompt enhancement revert functionality.
181-184: LGTM!The enhanced message handler correctly guards against applying stale enhancements by checking
originalPromptBeforeEnhancementstate, and properly stores the enhanced text for revert functionality.
238-239: LGTM!The dependency array is correctly updated to include
originalPromptBeforeEnhancementsince the effect callback now references this state variable.
283-297: LGTM!The button state logic is well-structured with proper conditions for each state ("enhance", "cancel", "revert"). The use of
useCallbackanduseMemoprovides appropriate performance optimization.
306-336: LGTM!The enhanced
handleEnhancePromptfunction correctly handles all three scenarios (enhance, cancel, revert) with proper state management. The cancel logic cleverly usessetOriginalPromptBeforeEnhancement(null)to ignore pending responses.
700-708: LGTM!The dependency array is correctly updated to include all the new slash command related variables referenced in the callback.
585-621: LGTM!The button rendering logic properly handles all three states with appropriate tooltips, aria-labels, and icons. The spin animation for the cancel state provides good user feedback. The test ID will facilitate automated testing.
apps/playwright-e2e/helpers/enhance-prompt-helpers.ts (6)
1-4: LGTM!The imports and type definition are correct and align with the button states implemented in the ChatTextArea component.
12-17: LGTM!The
getEnhanceButtonfunction correctly uses the webview helper pattern and locates the button by its test ID with an appropriate timeout.
19-27: LGTM!The
waitForEnhanceButtonStatefunction is well-implemented with proper timeout handling and uses the accessible aria-label attribute for state detection.
29-40: LGTM!The
clickEnhanceButtonfunction provides a useful abstraction that combines clicking with optional state waiting, making tests more concise and readable.
42-47: LGTM!The
verifyEnhanceButtonReadyfunction provides comprehensive verification of the button's initial state, ensuring tests start from a consistent baseline.
6-10: ARIA-label constants match English locale translations
Verified that the hard-coded labels inapps/playwright-e2e/helpers/enhance-prompt-helpers.tscorrespond exactly to the English i18n entries:
- “Enhance prompt with additional context” ←
chat.enhancePromptinwebview-ui/src/i18n/locales/en/chat.json- “Cancel enhancement” ←
kilocode.cancelEnhancementinwebview-ui/src/i18n/locales/en/kilocode.json- “Revert to original prompt” ←
kilocode.revertToOriginalinwebview-ui/src/i18n/locales/en/kilocode.jsonThese helpers will work as expected under the English locale. To prevent breakages if tests run in other languages, either:
- Force Playwright to launch with
enlocale, or- Import the English JSON and derive the labels in code for consistency across locales
Adds functionality to revert an enhanced prompt to its original state and to cancel an ongoing enhancement process. - Introduces `originalPromptBeforeEnhancement` and `enhancedPromptText` states in `ChatTextArea` to manage prompt history. - Updates `handleEnhancePrompt` to support "cancel" and "revert" actions based on the current prompt state. - Changes the enhance button icon and aria-label dynamically to reflect "enhance", "cancel", or "revert" states. - Adds new helper functions and tests for Playwright E2E to verify the new prompt enhancement states and actions. - Includes new i18n strings for "cancel enhancement" and "revert to original prompt" across all supported languages.
Corrected a typo in the Traditional Chinese localization file for "cancel enhancement" from "取消增强功能" to "取消增強功能". Updated the dependency array in `ChatTextArea.tsx` to properly wrap kilocode-specific changes with `// kilocode_change start` and `// kilocode_change end` comments, ensuring better maintainability and conflict avoidance with upstream updates.
a126e62 to
4e3cbec
Compare
Allow canceling / reverting prompt enhancement!
Summary by CodeRabbit
New Features
Bug Fixes
Tests
Localization