feat(sticky-note): enhance sticky note functionality with color picker and resizers

[prd-hoang-doan]

Ticket:

Flowise Roadmap

Summary

Improves the sticky note component in both Chatflow and Agentflow canvases with two major new features: free resizing via drag handles and a color picker for visual customization.

Demo Recording

Youtube: Sticky Note Demo

[gemini-code-assist]

Summary of Changes

Hello, 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 significantly enhances the functionality of sticky notes within the application's canvases. Users can now dynamically resize sticky notes to fit their content and choose custom colors, providing greater flexibility and personalization for organizing information. These improvements aim to make sticky notes a more versatile and visually appealing tool for users.

Highlights

• Resizable Sticky Notes: Sticky notes can now be freely resized using drag handles, allowing users to adjust their dimensions as needed.
• Color Picker Integration: A color picker has been added to sticky notes, enabling users to customize their background and border colors for better visual organization.
• Unified Functionality: These enhancements have been applied consistently across both the Chatflow and Agentflow canvases, ensuring a uniform user experience.

Changelog

• packages/ui/src/views/agentflowsv2/StickyNote.jsx
  • Added NodeResizer, IconPalette, SketchPicker, Popover, and useEffect imports.
  • Introduced MIN_WIDTH and MIN_HEIGHT constants for sticky note dimensions.
  • Implemented state variables for toolbar visibility, color picker anchor, and sticky note width/height.
  • Added useEffect hook to manage toolbar visibility based on node selection.
  • Created handler functions for size changes, color picker opening/closing, and color selection.
  • Integrated the NodeResizer component to enable free resizing.
  • Included a 'Change Color' icon button in the node toolbar.
  • Updated CardWrapper styling to dynamically adjust width, height, and background color.
  • Added a Popover component containing the SketchPicker for color customization.
• packages/ui/src/views/canvas/StickyNote.jsx
  • Added NodeResizer, IconPalette, SketchPicker, Popover, and useRef imports.
  • Introduced MIN_WIDTH and MIN_HEIGHT constants for sticky note dimensions.
  • Implemented state variables for color picker anchor, sticky note width/height, and a content reference.
  • Created handler functions for color picker opening/closing, color selection, and size changes.
  • Adjusted getBorderColor and getBackgroundColor functions to utilize the selected nodeColor.
  • Integrated the NodeResizer component to enable free resizing.
  • Included a 'Change Color' icon button within the node tooltip.
  • Updated NodeCardWrapper styling to dynamically adjust width, height, and background color.
  • Modified the NodeTooltip's open prop logic to account for the color picker.
  • Added a Popover component containing the SketchPicker for color customization.

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 color picking and resizing capabilities to the sticky note components, which is a great enhancement. The implementation is mostly solid, but I've identified a few areas for improvement concerning React best practices and performance. Specifically, there are instances of direct prop mutation which should be avoided, and some event handling could be optimized. I've provided detailed comments and suggestions to address these points.