feat(frontend): add onboarding UX - welcome modal, getting started ca… - #41
feat(frontend): add onboarding UX - welcome modal, getting started ca…#41saraiyakush wants to merge 2 commits into
Conversation
…rd, smart agent defaults
|
Warning Review limit reached
Next review available in: 42 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis change adds frontend onboarding state and UI. It shows a first-visit welcome modal, adds a project getting-started card, updates agent and empty-state guidance, and adds hook and Playwright coverage for persistence and onboarding behavior. ChangesFrontend onboarding
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant useOnboarding
participant localStorage
participant WelcomeModal
User->>App: open application
App->>useOnboarding: read onboarding state
useOnboarding->>localStorage: load welcome flag
localStorage-->>useOnboarding: welcome flag
useOnboarding-->>App: hasSeenWelcome
App->>WelcomeModal: show when not seen
User->>WelcomeModal: click Get Started
WelcomeModal->>App: onClose
App->>useOnboarding: markWelcomeSeen
useOnboarding->>localStorage: persist welcome flag
sequenceDiagram
participant User
participant KnowledgeBaseLanding
participant useOnboarding
participant GettingStartedCard
participant localStorage
User->>KnowledgeBaseLanding: open project
KnowledgeBaseLanding->>useOnboarding: check card visibility with project state
useOnboarding->>localStorage: load project dismissal
localStorage-->>useOnboarding: dismissal state
useOnboarding-->>KnowledgeBaseLanding: show or hide card
KnowledgeBaseLanding->>GettingStartedCard: render steps and progress
User->>GettingStartedCard: dismiss card
GettingStartedCard->>KnowledgeBaseLanding: onDismiss
KnowledgeBaseLanding->>useOnboarding: dismissGettingStarted(projectId)
useOnboarding->>localStorage: persist dismissal
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@frontend/src/components/WelcomeModal.tsx`:
- Line 31: Update the Dialog’s onOpenChange handler in WelcomeModal so it
accepts nextOpen and calls onClose whenever nextOpen is false, while leaving
open-state behavior unchanged.
🪄 Autofix
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 Plus
Run ID: b316752f-863e-4ad6-a85f-9726a166dae9
📒 Files selected for processing (12)
frontend/e2e/onboarding.spec.tsfrontend/e2e/support/fixtures.tsfrontend/src/App.tsxfrontend/src/__tests__/hooks/useOnboarding.test.tsxfrontend/src/components/AgentsTab.tsxfrontend/src/components/FilesTab.tsxfrontend/src/components/GettingStartedCard.tsxfrontend/src/components/KnowledgeBaseLanding.tsxfrontend/src/components/WelcomeModal.tsxfrontend/src/components/ui/empty-state.tsxfrontend/src/hooks/useOnboarding.tsfrontend/tsconfig.e2e.json
1 participant
Summary
Adds first-time user onboarding to guide new users through the Project → Documents → Agent → Chat workflow with a
welcome modal, progress tracker, and smart defaults.
Changes
useOnboardinghook for localStorage-based onboarding state managementsubtitleprop to EmptyState component for additional contexttsconfig.e2e.jsonto include DOM types for Playwright'spage.evaluate()callsType
Test plan
useOnboardinghook (all 82 unit tests pass)E2E tests pass)
Getting Started card → dismiss or complete steps → card hides
Screenshots (UI changes)
Welcome Modal (first visit):
Getting Started Card (inside project):
Agent Form with Smart Defaults:
Checklist
ruff check .passes inbackend/(no backend changes)npm run buildpasses infrontend/Summary by CodeRabbit
New Features
Tests