Agentic UI: Show "What's New" - #4414
Conversation
…into stu-1988-port-whats-new-tour-to-agentic-ui # Conflicts: # apps/ui/src/components/onboarding-guide/index.tsx # apps/ui/src/components/onboarding-guide/style.module.css
katinthehatsite
left a comment
There was a problem hiding this comment.
Generally, it worked well: I tested in the dark and light modes as well as RTL. I am wondering if we can make the controls transition a bit smoother though as it feels somewhat abrupt:
Screen.Recording.2026-08-06.at.2.33.02.PM.mov
What do you think?
|
@katinthehatsite nice catch! |
Looking again |
| alreadyStarted: boolean; | ||
| } | ||
|
|
||
| // 'show' opens the announcements; 'mark-seen' records them without showing. |
There was a problem hiding this comment.
I think the type below is already self-explanatory
| if ( ! decision ) { | ||
| return; | ||
| } | ||
| // Mark started immediately so a dependency change can't schedule twice. |
There was a problem hiding this comment.
I think we can also clean this up as this seems to be a somewhat standard pattern
katinthehatsite
left a comment
There was a problem hiding this comment.
I think this looks good to go, I left a couple of minor comments regarding cleanup. Otherwise approving 👍
sejas
left a comment
There was a problem hiding this comment.
Looks good. I just found that the web version (studio ui) will show the what's new modal once. I wonder if this is a good opportunity to improve the logic.
I suggest using a positive integer instead of FORCE_SHOW_WHATS_NEW. So each time we want to display the modal we could bump that constant that would be saved in localStorage or appData to identify if that what's new modal was shown or not. But that could be a separate PR as this PR is currently working.
| /* The artwork is wider than the slot on a narrow viewport; crop rather than | ||
| letterbox so the header never shows bars. */ |
There was a problem hiding this comment.
We could consider removing some comments like this one.
| useEffect( () => { | ||
| return connector.onShowWhatsNew( () => { | ||
| openGuide( getWhatsNewGuide(), { | ||
| onEnd: () => saveLastSeenVersion.mutate( versionRef.current ?? 'browser' ), |
There was a problem hiding this comment.
We could re-use the BROWSER_VERSION constant.
| onEnd: () => saveLastSeenVersion.mutate( versionRef.current ?? 'browser' ), | |
| onEnd: () => saveLastSeenVersion.mutate( versionRef.current ?? BROWSER_VERSION ), |
| const saveLastSeenVersion = useSaveLastSeenVersion(); | ||
| const { isOpen, openGuide } = useOnboardingGuide(); | ||
|
|
||
| const currentVersion = appGlobals?.appVersion ?? BROWSER_VERSION; |
There was a problem hiding this comment.
I think having a fixed BROWSER_VERSION will display the What's new modal only once in the browser as new versions will still use the same fixed version browser. Maybe that's fine, but then we might need to set the correct expectations.
Related issues
How AI was used in this PR
Claude wrote the code, taking legacy UI as the baseline. I manually reviewed and tested it.
Proposed Changes
The "What's New" announcements now appear in the agentic UI.
Testing Instructions
~/.studio/app.jsonand removelastSeenVersionnpm startPre-merge Checklist