Skip to content

Enhance GraphChatPage with Frame Nesting, Node Grouping, Layout Engine, and UI Improvements#50

Merged
navidshad merged 7 commits into
mainfrom
dev
Apr 10, 2026
Merged

Enhance GraphChatPage with Frame Nesting, Node Grouping, Layout Engine, and UI Improvements#50
navidshad merged 7 commits into
mainfrom
dev

Conversation

@navidshad
Copy link
Copy Markdown
Owner

@navidshad navidshad commented Apr 10, 2026

🏷️ PR Title:
Enhance GraphChatPage with Frame Nesting, Node Grouping, Layout Engine, and UI Improvements

📋 Summary

This PR introduces several key features and improvements to the GraphChatPage and related components:

  • Refactored frame nesting logic to use absolute computed positions for accurate coordinate calculations and improved deletion handling.
  • Implemented frame-based node grouping with interactive drag-to-create functionality.
  • Added a graph layout engine and UI components for thread visualization to improve graph readability.
  • Introduced a floating mode switcher to toggle between pan and selection tools in the GraphChatPage.
  • Persisted node detail visibility state across graph sessions using store metadata for better user experience.
  • Updated VueFlow configuration and enhanced code formatting for maintainability.
  • Added image attachment preview functionality with a full-screen modal in the ConversationNode component.

🔗 Related Tasks

#18ed530 - Refactor frame nesting logic to use absolute computed positions for coordinate calculations and improve deletion handling
#b559578 - Implement frame-based node grouping with interactive drag-to-create functionality
#276c88f - Implement graph layout engine and UI components for thread visualization
#24569ee - Add floating mode switcher to toggle between pan and selection tools in GraphChatPage
#fc181d4 - Persist node detail visibility state across graph sessions using store metadata
#f2c6a70 - Update VueFlow configuration and improve code formatting in GraphChatPage
#225c329 - Add image attachment preview functionality with full-screen modal in ConversationNode

📝 Additional Details

These enhancements collectively improve the usability, interaction, and visual clarity of the graph interface, facilitating more intuitive user workflows and persistent state management. The image preview modal enriches content interaction within conversation nodes.

📜 Commit List

18ed530 refactor: update frame nesting logic to use absolute computed positions for coordinate calculations and improve deletion handling
b559578 feat: implement frame-based node grouping with interactive drag-to-create functionality
276c88f feat: implement graph layout engine and UI components for thread visualization
24569ee feat: add floating mode switcher to toggle between pan and selection tools in GraphChatPage
fc181d4 feat: persist node detail visibility state across graph sessions using store metadata
f2c6a70 refactor: update VueFlow configuration and improve code formatting in GraphChatPage
225c329 feat: add image attachment preview functionality with full-screen modal in ConversationNode

@navidshad navidshad changed the title Dev Enhance GraphChatPage with Frame Nesting, Node Grouping, Layout Engine, and UI Improvements Apr 10, 2026
@navidshad navidshad merged commit 0b9b4b6 into main Apr 10, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant