Feature: Teams Collaborative Mode (Cloud/Enterprise)

[prd-hoang-doan]

Ticket:

Flowise Roadmap

Overview:

This pull request implements real-time collaborative editing functionality for the Flowise canvas, enabling multiple users to work on the same chatflow simultaneously. The implementation includes WebSocket infrastructure on both frontend and backend, with features like cursor tracking, node presence indicators, user avatars, and live state synchronization.

Changes:

• Adds WebSocket server infrastructure with Redis-based pub/sub for horizontal scaling.
• Implements real-time collaboration features including cursor tracking, node presence, and live editing.
• Adds comprehensive health monitoring, rate limiting, and connection pooling for WebSocket connections.
• Implemented CanvasWithPresence component for node presence synchronization.
• Added ConnectionStatusNotification and ConnectionStatusIndicator for real-time connection status.
• Introduced CursorOverlay to display user cursors in collaborative mode.
• Created NodePresenceOverlay to indicate users hovering or editing nodes.
• Developed WebSocketStatusBanner to show server health and connection issues.
• Enhanced Canvas component to manage collaborative state and user presence.
• Integrated throttling for cursor movement based on server health.
• Updated Vite configuration to support WebSocket connections.

Collaborative mode includes three layers:

Layer 1: Active users' presence

Layer 2: Live cursors

Layer 3: Node-level presence

Demo Recording

collaborative.mode.demo.mp4

Security

• Authentication: Bearer Token from Cookie.
• Authorization: Verifies the user has permission to access a specific chatflow, same organization.
• Data Sanitization: Username, User colors, Message.
• Rate Limiting

Deployment

• Environment

WS_PORT=3000
ENABLE_WEBSOCKET=true

• Standalone mode:

MODE=ws-only

• Run the standalone mode server instance

pnpm start-websocket  

[gemini-code-assist]

Summary of Changes

Hello @prd-hoang-doan, 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 delivers a significant new feature: real-time collaborative editing for the Flowise canvas. It establishes a dedicated WebSocket backend, leveraging Redis for scalable message broadcasting, and integrates a suite of frontend components to provide a rich, interactive collaborative environment. Users can now see each other's cursors, active presence on nodes, and live updates to the chatflow, all while ensuring secure and performant communication.

Highlights

• Real-time Collaborative Editing: Introduces a new feature allowing multiple users to simultaneously edit the Flowise canvas, with changes synchronized in real-time.
• WebSocket Infrastructure: Implements a robust WebSocket server with Redis-based pub/sub for horizontal scaling, supporting real-time communication between clients and the server.
• User Presence and Interaction Visualizations: Adds visual indicators for active users, live cursor tracking, and node-level presence (hovering/editing) to enhance the collaborative experience.
• Connection Management and Health Monitoring: Includes comprehensive features for WebSocket connection management, rate limiting, connection pooling, and health monitoring, with UI components to display connection status and server load.
• Security and Authorization: Incorporates Bearer Token authentication, chatflow-specific authorization, and data sanitization for WebSocket events to ensure secure collaboration.

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 major feature: real-time collaborative editing for the Flowise canvas. The implementation is extensive, covering both backend WebSocket infrastructure with Redis for scaling and a rich frontend experience with presence indicators, cursor tracking, and live state synchronization. The architecture is well-designed, with clear separation of concerns for connection management, room management, presence, and state synchronization. The code demonstrates good practices for security and scalability, such as rate limiting, connection pooling, and using Redis for pub/sub.

My review focuses on potential race conditions, performance bottlenecks, and security considerations. I've identified a few areas for improvement:

• A synchronous file operation that could block the event loop under load.
• A potential for silent data loss if a chatflow update lacks user information.
• A bug in handling duplicate WebSocket sessions that could lead to inconsistent client state.
• A client-side health check logic that might be too permissive.

All original comments have been retained as they do not contradict or align with the provided rules in a way that requires modification or dropping. Addressing these points will further enhance its robustness and reliability.

[HenryHengZJ]

This is crazy good!! We're in the middle of refractoring/rewriting the Canvas component, so there'll be some delay before this goes in.

CC @jocelynlin-wd @harshit-flowise

[prd-hoang-doan]

@HenryHengZJ It's great to hear that the feature will be on the roadmap.
Please let me know when the Canvas component is ready. I'm happy to continue contributing to the feature in the future.