Collaboration in Workflow Editor

[perzeuss]

Self Checks

• [X] I have searched for existing issues search for existing issues, including closed ones.
• [X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• [X] Pleas do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing?

Currently, developing workflows in Dify involves individual effort, making it challenging to collaborate with team members, customers, or stakeholders in real-time. This leads to:

1. Inefficient Communication: Team members must rely on external communication tools, such as email or chat, to discuss workflow development, leading to miscommunication and delays.
2. Version Control Issues: When multiple users work on the same workflow, version control becomes a significant challenge, leading to conflicts and overwriting of changes.
3. Lack of Transparency: It's difficult for team members to understand each other's thought processes and design decisions, making it hard to provide feedback and iterate on the workflow.
4. Ineffective Feedback Loop: Feedback and iteration are hindered by the lack of real-time collaboration, leading to prolonged development cycles and decreased productivity.

2. Describe the feature you'd like to see

I want to introduce a collaboration feature in the workflow editor, allowing multiple users to work together on the same workflow in real-time. This feature will enable seamless collaboration, making it easier to work with team members, customers, or even anonymous users.

Motivation

Inspired by collaborative tools like Miro and Figma, I aim to bring a similar experience to the Dify workflow editor. This feature will enhance the overall user experience, facilitate knowledge sharing, and accelerate workflow development.

Phase 1: Core Collaboration Features

To achieve this, I plan to implement the following features in Phase 1:

Room Creation and User Management

• When a user visits the workflow editor, a room is created automatically.
• Each user who joins the room is assigned a random color.
• The user's mouse movements are streamed to all other users in the room.

Real-time Synchronization and Node Locking

• All changes made by a user are synced with others in real-time.
• When a user selects a node, it gets locked for others, and their name appears above the node, indicating that someone is editing it.
• If a locked node is closed, the changes are synced with others.
• Users can follow another user, entering read-only mode, and see what the editor is seeing, including:
  • React Flow position and zoom level
  • Node openings and changes
• Users can see who is in the room

Phase 2: Enhanced Collaboration Features

In Phase 2, I plan to add:

User Customization and Commenting System

• Users can change their assigned color.
• A commenting system allows users to add comments at any point in the workflow or on specific nodes.
• Users can mention others in the workspace, triggering email notifications for mentions and replies.
• Users can send invite codes to allow join the workflow editor and start collaborating without having to search the workflow and open it
• Users can disabe the cursor position of other users

Phase 2+ (Possible Enhancements)

Future enhancements may include:

• Allowing anonymous users to visit and edit the workflow.
• Recording and playback of workflow creation sessions, enabling:
  • Training and showcasing workflows
  • Reporting issues and seeking help
  • Sharing and jumping into specific workflow states

Implementation Plan

To implement this feature, I will:

1. Set up a WebSocket server to enable real-time collaboration.
2. Develop the room creation and user management system.
3. Implement real-time synchronization and node locking mechanisms.
4. Add user customization and commenting system features.
5. Integrate the WebSocket server with the React Flow UI.
6. Write documentation and extend the getting started guide

I will regularly coordinate with the dify team and provide updates on progress, as well as involve the team in design decisions.

3. How will this feature improve your workflow or experience?

The collaboration feature aims to address these challenges by providing a seamless, real-time collaboration experience within the Dify workflow editor. This feature will enable:

1. Real-time Feedback and Iteration: Team members can collaborate in real-time, providing instant feedback and iterating on the workflow together.
2. Transparent Decision-Making: Users can see each other's actions and decisions, promoting transparency and understanding throughout the development process.
3. Version Control Simplified: The collaboration feature will handle version control, ensuring that all users are working on the same version of the workflow.
4. Enhanced Communication: The feature will facilitate effective communication, reducing misunderstandings and miscommunication.

By addressing these challenges, the collaboration feature will significantly improve the workflow development experience, increasing productivity, and enhancing overall collaboration within Dify.

4. Additional context or comments

Design Requirements

I will need help from the Dify design team to design the UI elements for user presence, such as:

• Presence Indicators (Username with background color)
• Node locking and editing indicators
• Coursor to communicate cursor locations
• Room member list

Call to Action

I welcome any feature suggestions, changes, or ideas on this proposal. As I work on this feature in cooperation with the Dify team, I encourage you to share your thoughts and help shape this collaboration feature.

5. Can you help us with this feature?

• [X] I am interested in contributing to this feature.