Add walkthrough button and enable quick wins for new users #5047
Conversation
🦋 Changeset detectedLatest commit: 5594ad4 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 |
There was a problem hiding this comment.
Pull Request Overview
This PR implements a "Take a Tour" walkthrough feature for new users by adding a walkthrough button that appears when users have minimal task history. The purpose is to improve onboarding and help new users get started with the application.
- Add new
openWalkthroughRPC method to enable launching guided tours - Enable quick wins display for users with fewer than 3 completed tasks
- Add a "Take a Tour" button in the home header when quick wins are shown
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| proto/ui.proto | Adds new openWalkthrough RPC method definition |
| webview-ui/src/components/welcome/HomeHeader.tsx | Adds walkthrough button and handler with conditional rendering |
| webview-ui/src/components/chat/chat-view/components/layout/WelcomeSection.tsx | Passes quick wins prop to HomeHeader component |
| webview-ui/src/components/chat/ChatView.tsx | Enables quick wins logic and defines threshold constant |
| .changeset/stupid-jars-explain.md | Documents the change for release notes |
Comments suppressed due to low confidence (1)
webview-ui/src/components/welcome/HomeHeader.tsx:11
- The walkthrough functionality lacks test coverage. Consider adding tests to verify the button renders conditionally and the RPC call is made correctly when clicked.
const handleTakeATour = async () => {
Coverage ReportExtension CoverageBase branch: 47% PR branch: 48% ✅ Coverage increased or remained the same Webview CoverageBase branch: 17% PR branch: 17% Consider adding tests to cover your changes. Overall AssessmentPlease consider adding tests to maintain or improve coverage. Last updated: 2025-08-06T06:39:38.981524 |
39a33bc to
44b88c4
Compare
8e27619 to
d70d0c3
Compare
8a7a118 to
e434c00
Compare
- Add openWalkthrough RPC method to ui.proto - Enable quick wins display for users with <3 tasks in history - Add "Take a Tour" button in HomeHeader when quick wins are shown - Update WelcomeSection to pass shouldShowQuickWins prop to HomeHeader
e434c00 to
9c8f6fa
Compare
There was a problem hiding this comment.
When i have chat history:
When I cleared my chat history, i can see the quick wins UI. Clicking on the "Take a Tour" opens the welcome walkthrough:
Clicking on one of the quick wins will start a new task, but because im using openrouter without a valid API key the task failed as expected:
Non-blocking feedback: Adding a step for users to sign in to cline might be helpful here.
Approving on the eng side - not sure if we need products' feedback on the UI
So on a totally new setup flow that's the recommendation
@trupix and @pashpashpash approved this too |
Description
Test Procedure
Find the code for
const shouldShowQuickWins = !taskHistory || taskHistory.length < QUICK_WINS_HISTORY_THRESHOLDchange it to
const shouldShowQuickWins = trueAnd you will see
And clicking on take a tour will open a walkthrough
Type of Change
Pre-flight Checklist
npm test) and code is formatted and linted (npm run format && npm run lint)npm run changeset(required for user-facing changes)Screenshots
Additional Notes
Important
Adds walkthrough button and quick wins for new users, enhancing onboarding experience.
openWalkthroughRPC method toui.prototo open a walkthrough.ChatView.tsx.HomeHeaderwhen quick wins are shown.WelcomeSectionto passshouldShowQuickWinsprop toHomeHeader.QuickWinCardandSuggestedTasksto display quick win tasks.quickWinTasks.tsfor clarity.This description was created by
for 5594ad4. You can customize this summary. It will automatically update as commits are pushed.