feat(agentflow): enhance typography and improve node palette drawer

[jocelynlin-wd]

• Add typography settings for h4, h5, and h6 in the theme configuration.
• Implement tests for typography to ensure consistency across light and dark modes.
• Refactor AddNodesDrawer to improve drag-and-drop functionality and integrate new NodeListItem component.
• Introduce useDrawerMaxHeight hook to dynamically calculate drawer height based on viewport.
• Clean up unused imports and optimize component structure for better performance.

screenshots:
agentflow v2 on the left, sdk on the right

before the fixes:

[gemini-code-assist]

Summary of Changes

Hello @jocelynlin-wd, 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 focuses on enhancing the user interface by standardizing typography for headings and significantly improving the AddNodesDrawer component. The drawer now boasts a more modular and maintainable structure, along with dynamic height adjustment, which collectively provides a more fluid and responsive user experience for node selection and interaction.

Highlights

• Typography Enhancements: New typography settings for h4, h5, and h6 have been added to the theme configuration, ensuring consistent styling across the application.
• Typography Testing: Unit tests were implemented for the new typography settings to verify their correct application and consistency in both light and dark modes.
• Node Palette Drawer Refactoring: The AddNodesDrawer component has been significantly refactored, extracting the rendering and interaction logic for individual nodes into a new NodeListItem component.
• Dynamic Drawer Height: A new useDrawerMaxHeight hook was introduced to dynamically calculate and adjust the maximum height of the node palette drawer based on the available viewport space.
• Improved Drag-and-Drop: The drag-and-drop functionality within the AddNodesDrawer was improved by centralizing data transfer logic within the new NodeListItem component.

Changelog

• packages/agentflow/src/core/theme/createAgentflowTheme.test.ts
  • Added new test suite for typography settings.
  • Included tests to verify font size and weight for h4, h5, and h6.
  • Ensured typography consistency between light and dark themes.
• packages/agentflow/src/core/theme/createAgentflowTheme.ts
  • Defined typography styles for h4, h5, h6, subtitle1, body1, and body2.
• packages/agentflow/src/features/node-palette/AddNodesDrawer.tsx
  • Removed several unused Material-UI components and imports.
  • Integrated the new NodeListItem component for rendering individual nodes.
  • Implemented the useDrawerMaxHeight hook to manage drawer height dynamically.
  • Adjusted Popper placement and offset for better positioning.
  • Updated styling for Paper and MainCard to support flexible height and overflow management.
  • Simplified handleDragStart by delegating data transfer to the NodeListItem.
• packages/agentflow/src/features/node-palette/NodeListItem.tsx
  • Created a new React component to encapsulate the display and interaction logic for each node in the palette.
  • Handles icon rendering, badge display, and drag-and-drop data transfer for nodes.
• packages/agentflow/src/features/node-palette/useDrawerMaxHeight.ts
  • Added a custom React hook to calculate the maximum available height for a drawer based on its position and viewport dimensions.

Activity

• No human activity (comments, reviews, etc.) has been recorded for this pull request yet.

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 typography enhancements and significantly refactors the AddNodesDrawer component. The changes include adding new typography settings with corresponding tests, extracting a NodeListItem component for better modularity, and implementing a useDrawerMaxHeight hook to make the drawer height responsive. Overall, these are great improvements to the structure and functionality of the agentflow UI. I've provided a few suggestions to further enhance the code, focusing on improving test coverage, performance, and code clarity.