Skip to content

Conversation

brunobergher
Copy link
Collaborator

@brunobergher brunobergher commented Sep 10, 2025

Description

Adds in-app upsells for Roo Code Cloud.
Introduces a new DismissibleUpsell React component, which ensures messages are displayed in a consistent way and enforces dismissal logic, so we don't annoy users. The dismissal state is persisted in the VS Code extension's global state, ensuring they do not reappear after a user has closed them.

Key implementation details include:

  • A shared DismissibleUpsell component
  • A centralized CloudUpsellDialog component, which is called from different places
  • Integration of these upsell CTAs into several key user workflows:
    • On the extion home page.
    • Within the "AutoApprove" settings menu.
    • After a long-running task runs for a while.
  • CloudUpsellDialog is also used in the "Share Task" and "Cloud View" screens, reducing duplication
  • Robust state management to handle component mounting/unmounting and prevent common issues like race conditions or memory leaks during asynchronous operations.

Test Procedure

The functionality was tested via a combination of new unit tests and manual verification.

Unit Tests:

Comprehensive tests were added for the DismissibleUpsell component, covering its variants, dismissal logic, and various edge cases such as rapid dismissals and state updates on unmounted components.
Tests for the auto-approve upsell functionality were also created and fixed.

Manual Testing:

To verify the changes, reviewers can perform the following steps:

  1. Navigate to the Roo Code home page and confirm the new CTA is visible.
  2. Open the "AutoApprove" menu and enable several options
  3. Run a task that takes a significant amount of time and check that the upsell appears after a while
  4. Dismiss one of the upsells, then restart the extension to ensure it remains dismissed.
  5. Verify that all new UI text has been correctly internationalized.

Screenshots


Important

Introduces in-app dismissible upsells for Roo Code Cloud with new React components, state management, and internationalization support.

  • Behavior:
    • Adds DismissibleUpsell React component for consistent message display and dismissal logic.
    • Integrates upsells into workflows: extension home page, "AutoApprove" settings, long-running tasks, "Share Task", and "Cloud View".
    • Uses CloudUpsellDialog to reduce duplication in "Share Task" and "Cloud View".
    • Persists dismissal state in VS Code extension's global state.
  • State Management:
    • Manages component mounting/unmounting to prevent race conditions and memory leaks.
  • Testing:
    • Adds unit tests for DismissibleUpsell covering variants, dismissal logic, and edge cases.
    • Tests auto-approve upsell functionality.
    • Manual testing includes verifying CTA visibility, dismissal persistence, and internationalization.
  • Internationalization:
    • Updates translations in multiple languages to support new upsell messages.

This description was created by Ellipsis for 9610626. You can customize this summary. It will automatically update as commits are pushed.

brunobergher and others added 25 commits September 8, 2025 16:28
…#7783)

Fixes #7703 - CodeBlock language dropdown and copy button were appearing above popovers due to z-index: 100. Reduced to z-index: 40 to maintain proper layering hierarchy while keeping buttons functional.
…or chat messages (#7790)

* feat: add click-to-edit, ESC-to-cancel, and fix padding consistency

- Enable click-to-edit for past messages by making message text clickable
- Add ESC key handler to cancel edit mode in ChatTextArea
- Fix padding consistency between past and queued message editors
- Adjust right padding for edit mode to accommodate cancel button

Fixes #7788

* fix: adjust padding and layout for ChatTextArea in edit mode

* refactor: replace hardcoded pr-[72px] with standard Tailwind pr-20 class

---------

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Hannes Rudolph <[email protected]>
Co-authored-by: daniel-lxs <[email protected]>
Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
Co-authored-by: Bruno Bergher <[email protected]>
Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Hannes Rudolph <[email protected]>
Co-authored-by: daniel-lxs <[email protected]>
feat: add taskSyncEnabled to userSettingsConfigSchema

Co-authored-by: Roo Code <[email protected]>
chore: bump version to v1.75.0
- Created DismissibleUpsell component with variant support (banner/default)
- Added dismissedUpsells to GlobalState for persistence
- Implemented message handlers for dismissing and retrieving dismissed upsells
- Added comprehensive tests for the component
- Uses VSCode extension globalState for persistent storage
- Changed from className to separate 'id' and 'className' props for better semantics
- Added i18n support for accessibility labels (aria-label and title)
- Fixed memory leak by adding mounted flag to prevent state updates after unmount
- Fixed race condition by sending dismiss message before hiding component
- Fixed inefficient array operations in webviewMessageHandler
- Added comprehensive test coverage for edge cases including:
  - Multiple rapid dismissals
  - Component unmounting during async operations
  - Invalid/malformed message handling
  - Proper message sending before unmount
- Added null checks for message data to handle edge cases gracefully
Copy link

@roomote roomote bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution! I've reviewed the changes and found some issues that need attention. The implementation of dismissible upsells is well-structured overall with good test coverage, but there are a few important items to address.

<tool>gh pr checkout [PR_NUMBER] --force</tool>
<tool>git fetch origin main</tool>
<tool>git rebase origin/main</tool>
<tool>GIT_EDITOR=true git rebase origin/main</tool>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes to the merge resolver rules appear unrelated to the upsell feature. Could you remove these files from this PR to keep it focused on the dismissible upsells implementation?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no idea how they ended up here. If a reviewer has any thoughts, I'm all ears.

jr added 2 commits September 10, 2025 12:12
- Keep both cloudUrlPillLabel and upsell sections
- Merge conflicts resolved in all cloud.json files across all locales
@jr jr merged commit 469a70f into main Sep 10, 2025
15 of 16 checks passed
@jr jr deleted the feat/rcc-upsells branch September 10, 2025 20:06
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Sep 10, 2025
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Sep 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request lgtm This PR has been approved by a maintainer PR - Needs Review size:XXL This PR changes 1000+ lines, ignoring generated files.
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

7 participants