feat(onboarding flow): implements a comprehensive onboarding system#5854
feat(onboarding flow): implements a comprehensive onboarding system#5854prd-hoang-doan wants to merge 1 commit into
Conversation
* Added complete onboarding UI system with welcome page, quick-start cards * Implemented overlay guide framework with spotlight masks, tooltips, and step-by-step navigation for interactive tutorials * Integrated onboarding hooks and navigation triggers across canvas, marketplace, document stores, and chat interfaces
Summary of ChangesHello @prd-hoang-doan, I'm Gemini Code Assist1! 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 significantly enhances the user experience for new Flowise users by introducing a comprehensive onboarding system. It provides interactive, step-by-step guides for core functionalities like creating chatflows, building agent flows, managing document stores, and exploring marketplace templates. The system is designed to be intuitive, leveraging visual cues and dynamic content to facilitate learning and accelerate user adoption, ensuring that new users can quickly become proficient with the platform's capabilities. Highlights
Changelog
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive onboarding system, including an interactive guide framework and a welcome page. The implementation is extensive, touching many parts of the UI to integrate the new overlay guides. The overall structure is well-thought-out, with a clear separation of concerns for the overlay provider, guide definitions, and state management. However, I've identified a few areas for improvement regarding the robustness of the implementation. Specifically, some CSS selectors used for targeting guide steps are fragile and could break with minor UI changes. Additionally, there's a reliance on arbitrary setTimeout calls, one of which is particularly long and could lead to a poor user experience or race conditions. Finally, the logic for detecting when a chatflow is fully connected in the guide is not robust for all graph structures. Addressing these points will improve the maintainability and reliability of this new feature.
|
I would propose installing Flowise via npx with one command (instead of Docker) and onboarding via CLI with the most essential things only for a beginner to get started. Which should result in an automatically created first flow, that should reassemble the Agent, such as OpenClaw. OpenClaw showed what people liked: a simple agent for personalized use. Flowise should adopt these things that made OpenClaw popular - simplicity, personalization, run CLI commands in a shell, and installation with one command. Personalized Essentials such as:
|
|
thank you @prd-hoang-doan this is really helpful! we'll take a look and make some suggestions |
|
Great work on this feature, @prd-hoang-doan! We’re going to have our UX designer take a look and share some suggestions in the next few weeks. Thanks again for the solid contribution. |
|
@HenryHengZJ @harshit-flowise I'm glad the contribution is helpful. I’d be happy to continue improving it based on suggestions. Looking forward to the feedback and happy to help refine the onboarding flow further. |
4 participants
Ticket
Flowise Roadmap
Overview
This PR implements a comprehensive onboarding system for Flowise, introducing an interactive guide framework to help new users learn the platform. The implementation includes a welcome page with quick-start cards, an overlay guide system with spotlight masks and tooltips, and deep integration across major features like canvas workflows, marketplace templates, document stores, and chat interfaces.
Changes
Demo Recording
Youtube: Flowise Onboarding flow