Skip to content

Conversation

@moon0326
Copy link
Contributor

@moon0326 moon0326 commented Jan 8, 2026

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1211787158133389/task/1212634445757993?focus=true

Description

This PR adds a new "Address Bar Mode" step as the final step in onboarding.
It allows users to choose between "Search & Duck.ai" and "Search Only".

Screen.Recording.2026-01-08.at.10.07.43.AM.mov

It also adds a new item, "Chat privately with AI Chatbots (optional)", to the onboarding comparison chart.

Screenshot 2026-01-08 at 10 13 50 AM

Note: I’ve submitted onboarding.json to Smartling. I’ll update the translation files as soon as translation files are ready.

Testing Steps

  1. Open https://deploy-preview-2157--content-scope-scripts.netlify.app/build/pages/onboarding/?page=addressBarMode
  2. Switch between Search & Duck.ai and Search Only
  3. In DevTools Console, verify a NotificationMessage is logged each time you toggle, with:
    context: specialPages
    featureName: onboarding
    method: setDuckAiInAddressBar
  4. Confirm params.enabled matches the selected option:
    "Search & Duck.ai" -> params: { enabled: true }
    "Search Only" -> params: { enabled: false }

Checklist

<!—
These questions are a friendly reminder to shipping code, if you're uncertain ask the AoR owners.
It's also totally appropriate to not check some of these boxes, if they don't apply to your change.
—>
Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

Note

Introduces a new final onboarding step to choose Address Bar Mode and wires it end-to-end across UI, state, messaging, tests, and content.

  • Adds addressBarMode step (v3 order) with AddressBarMode UI, AddressBarPreview, and ToggleButton components; supports dark mode and animations
  • Persists selection via update-system-value id address-bar-mode and new message setDuckAiInAddressBar; reducer updated to handle info step exec-complete
  • Updates flow logic so customize advances to next step when not last; new accept handling
  • Extends types (SystemValueId, ORDER_V3, steps), data definitions, and translations; adds icons v3/Ai-Chat-Color-24.svg, v3/Star-Color-24.svg
  • Comparison table: adds AI Chat row and icon
  • Minor: Stack supports className and Stack.gaps[0] string value; theme variables expanded
  • Integration tests updated to cover new step and flows

Written by Cursor Bugbot for commit 745e2fa. This will update automatically on new commits. Configure here.

@netlify
Copy link

netlify bot commented Jan 8, 2026

Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit 745e2fa
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/696003510acfc60008e376cd
😎 Deploy Preview https://deploy-preview-2157--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 8, 2026

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 8, 2026

[Beta] Generated file diff

Time updated: Thu, 08 Jan 2026 19:20:53 GMT

Apple
    - apple/pages/onboarding/dist/index.css
  • apple/pages/onboarding/dist/index.js
  • apple/pages/onboarding/locales/en/onboarding.json

File has changed

Integration
    - integration/pages/onboarding/dist/index.css
  • integration/pages/onboarding/dist/index.js
  • integration/pages/onboarding/locales/en/onboarding.json

File has changed

Windows
    - windows/pages/onboarding/dist/index.css
  • windows/pages/onboarding/dist/index.js
  • windows/pages/onboarding/locales/en/onboarding.json

File has changed

New Files
    - apple/pages/onboarding/assets/img/steps/v3/Ai-Chat-Color-24.svg
  • apple/pages/onboarding/assets/img/steps/v3/Star-Color-24.svg
  • integration/pages/onboarding/assets/img/steps/v3/Ai-Chat-Color-24.svg
  • integration/pages/onboarding/assets/img/steps/v3/Star-Color-24.svg
  • windows/pages/onboarding/assets/img/steps/v3/Ai-Chat-Color-24.svg
  • windows/pages/onboarding/assets/img/steps/v3/Star-Color-24.svg

❌ File only exists in new changeset

@moon0326 moon0326 changed the title Moon0326/onboarding/add duck ai step Onboarding: Add AddressBarMode step Jan 8, 2026
@moon0326 moon0326 marked this pull request as ready for review January 8, 2026 18:15
@moon0326 moon0326 requested review from a team, mgurgel and shakyShane as code owners January 8, 2026 18:15
* @param {boolean} props.isReduced - Whether the address bar is in reduced (search-only) mode
* @param {boolean} [props.isDarkMode=false] - Whether to render dark mode colors
*/
export function AddressBarPreview({ isReduced, isDarkMode = false }) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This component may look a bit complex, but it was necessary to implement a smooth transition between Search & Duck.ai and Search Only. It also replaces four separate SVG files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant