Skip to content

feat(frontend): Add onboarding widget with modular components #3509

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
mmabrouk wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

feat(frontend): Add onboarding widget with modular components #3509

mmabrouk wants to merge 5 commits into from

Conversation

@mmabrouk
Copy link
Member

@mmabrouk mmabrouk commented Jan 19, 2026 •
edited
Loading

Summary

  • Add OnboardingWidget component for new user onboarding checklist
  • Extract WidgetSection and WidgetSectionItem for modular component design
  • Add Jotai-based state management with localStorage persistence
  • Add sidebar "Get Started Guide" link for reopening widget after dismissal

Changes

New Components

  • OnboardingWidget - Main widget container with minimize/close functionality
  • WidgetSection - Collapsible section with progress tracking (memoized)
  • WidgetSectionItem - Individual task item with completion state (memoized)

State Management

  • Widget state atoms (onboardingWidgetStatusAtom, onboardingWidgetUIStateAtom)
  • Completion tracking via onboardingWidgetCompletionAtom
  • Section expansion state with onboardingWidgetExpandedSectionsAtom
  • All persisted to localStorage with agenta:onboarding:* keys

Sidebar Integration

  • "Get Started Guide" link shows for new users who dismissed the widget
  • widgetClosedTour guides users to the sidebar link on first close
CleanShot.2026-01-19.at.14.07.43.mp4

@mmabrouk
feat(frontend): add onboarding widget with modular components
f55cac5 
- Add OnboardingWidget component for new user onboarding checklist
- Extract WidgetSection and WidgetSectionItem for modularity
- Add widget state management with Jotai atoms (persisted to localStorage)
- Add sidebar 'Get Started Guide' link for reopening widget
- Add widgetClosedTour to guide users to sidebar after closing
- Use Tailwind theme tokens instead of hardcoded hex colors
- Track analytics events for widget interactions
@vercel
Copy link

vercel bot commented Jan 19, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
agenta-documentation Ready Ready Preview, Comment Jan 22, 2026 9:48am

Request Review

@dosubot dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Jan 19, 2026
@dosubot dosubot bot added the feature label Jan 19, 2026
@mmabrouk mmabrouk requested review from ardaerzin and bekossy January 19, 2026 14:16
@mmabrouk mmabrouk marked this pull request as draft January 19, 2026 14:16
@mmabrouk
fix(frontend): fix walkthrough tooltip selector for sidebar item
12a0651 
- Change selector from data-menu-id to #sidebar-get-started-guide
- Add ID to icon wrapper span for reliable targeting
- Increase retry attempts for element detection
@mmabrouk
Copy link
Member Author

mmabrouk commented Jan 19, 2026 •
edited by bekossy
Loading

QA Request for @bekossy

Please test the following onboarding widget functionality:

Test Items

  1. Widget Display

    • Widget appears for new users after login
    • Widget sections are collapsed by default
    • Sections expand/collapse when clicking on them

  2. Minimize/Expand

    • Clicking the caret down (↓) button minimizes the widget to just the header
    • Clicking the caret up (↑) button expands the widget back
    • Widget state persists across page refreshes

  3. Close & Tooltip (Important)

    • Clicking the X button dismisses the widget completely
    • First time closing: A walkthrough tooltip should appear pointing to the "Get Started Guide" item in the sidebar
    • The tooltip should say "Need help getting started? You can always reopen the onboarding guide by clicking here in the sidebar."
    • Clicking "Got it!" dismisses the tooltip
    • Subsequent closes should NOT show the tooltip again

  4. Sidebar Integration

    • "Get Started Guide" item appears in the sidebar (below "Invite Teammate")
    • Clicking it reopens the widget in expanded state

Test Setup

To reset and test the tooltip behavior fresh, clear these localStorage keys:

localStorage.removeItem('agenta:onboarding:widget-seen-close-tooltip')
localStorage.removeItem('agenta:onboarding:widget-status')
localStorage.removeItem('agenta:onboarding:widget-ui')

Note

The tooltip uses NextStepJS with the selector #sidebar-get-started-guide. If the tooltip doesn't appear or points to the wrong place, please note the browser console for any errors.

bekossy
bekossy approved these changes Jan 20, 2026
View reviewed changes
Copy link
Member

@bekossy bekossy left a comment

Choose a reason for hiding this comment

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

Thanks for the PR @mmabrouk! Approved based on QA. Tested main onboarding paths and UI behavior, all working as expected from my side

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bekossy bekossy bekossy approved these changes

@ardaerzin ardaerzin Awaiting requested review from ardaerzin

Assignees

No one assigned

Labels

feature lgtm This PR has been approved by a maintainer size:XL This PR changes 500-999 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mmabrouk @bekossy