feat(spx-gui): reminder for mobile devices and old browsers

[cn0809]

close: #2650
close: #2557

[gemini-code-assist]

Summary of Changes

Hello @cn0809, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience by implementing a mobile device detection mechanism. Upon detecting a mobile device, the application now presents a dedicated 'Desktop Required' guide, informing users about the platform's desktop-only support and providing a quick way to copy the access URL for use on a desktop. This change addresses issue #2650, ensuring users are appropriately guided when accessing the application from unsupported devices.

Highlights

• Mobile Device Detection: Implemented robust logic to detect if the application is being accessed from a mobile device, considering user agent, touch capabilities, and screen width.
• Desktop Required Guide: Introduced a new component, DesktopRequiredGuide, which displays a user-friendly message indicating that the application is not supported on mobile devices.
• Conditional Application Rendering: The main application content is now conditionally rendered; if a mobile device is detected, the DesktopRequiredGuide is displayed instead, preventing unsupported mobile usage.
• Copy Access URL Functionality: The DesktopRequiredGuide includes a convenient button allowing users to copy the current access URL to their clipboard, facilitating a smooth transition to a desktop environment.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• spx-gui/src/App.vue
  • Added ref and onMounted imports from 'vue' for state management and lifecycle hooks.
  • Integrated DesktopRequiredGuide component import.
  • Implemented isMobile reactive variable to store device detection status.
  • Added an onMounted hook to perform mobile device detection using navigator.userAgent, ontouchstart property, navigator.maxTouchPoints, and window.matchMedia.
  • Modified the template to conditionally render DesktopRequiredGuide if isMobile is true, otherwise rendering the existing UIMessageProvider and its children.
• spx-gui/src/components/mobile/DesktopRequiredGuide.vue
  • New component added to display a 'Desktop Required' message.
  • Includes an image (desktop-required.png), a title, and a descriptive paragraph, all supporting internationalization (English and Chinese).
  • Features a 'Copy Access URL' button that copies the current URL to the clipboard.
  • Displays a 'Copied to clipboard!' success message temporarily after the URL is copied.
  • Styled with scoped SCSS to center content and provide a clear visual guide.

Activity

• No specific activity (comments, reviews, progress updates) has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a feature to display a guide for users on mobile devices, informing them that the application is intended for desktop use. The changes include adding mobile detection logic in the main App.vue component and creating a new DesktopRequiredGuide.vue component for the message.

My review focuses on improving code structure and robustness. I've suggested extracting the mobile detection logic into a reusable composable for better maintainability. I've also pointed out a potential issue in the new component where clipboard operations could fail silently, and I've provided a suggestion to make it more robust by adding error handling.

Overall, the changes are well-implemented to address the issue. The suggestions are aimed at improving the code quality further.

[Copilot]

Pull request overview

Adds user-agent based reminders in spx-gui to (1) block unsupported mobile usage with a dedicated screen and (2) warn users on older/unsupported browser versions.

Changes:

• Introduce src/utils/ua.ts for UA parsing, mobile detection, and browser version checks.
• Add MobileReminder full-page component and BrowserVersionReminder dialog, wiring both into App.vue.
• Add ua-parser-js dependency and associated lockfile updates.

Reviewed changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
spx-gui/src/utils/ua.ts	UA parsing utilities + browser version compatibility check logic.
spx-gui/src/components/ua/desktop-required.png	New image asset for the mobile reminder screen.
spx-gui/src/components/ua/MobileReminder.vue	Full-page “desktop required” reminder with copy-URL action.
spx-gui/src/components/ua/BrowserVersionReminder.vue	Modal dialog warning for unsupported/old browser versions.
spx-gui/src/App.vue	Integrates mobile gating + browser version reminder into the app root.
spx-gui/package.json	Adds ua-parser-js dependency.
spx-gui/package-lock.json	Locks ua-parser-js and transitive deps (incl. license metadata).

Files not reviewed (1)

• spx-gui/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cn0809]

/review

[xgopilot]

Code Review Summary

This PR successfully implements mobile device detection and browser version checking with clean UI components and proper i18n support. The implementation is functional and well-structured.

Strengths:

• Clean component architecture with proper Vue 3 Composition API usage
• Good UX with "Do not show again" functionality
• Proper i18n support for both English and Chinese
• Good use of v-radar directives for accessibility tracking

Key Recommendations:

1. Performance: Consider replacing ua-parser-js (~25KB) with a lightweight regex for mobile detection
2. Error handling: Add try-catch blocks around localStorage operations
3. Documentation: Add JSDoc for complex functions like checkBrowserVersion()
4. Optimization: Lazy-load the reminder components to reduce initial bundle size

No security vulnerabilities identified. The code follows secure practices with proper XSS protection through Vue's template syntax.