fix: Implement LanguageModel connection flow

[Cristhianzl]

This pull request introduces improvements to the dropdown component and the add component hook, primarily to support a new "connect other models" workflow that streamlines how users add LanguageModel components. The changes add a new state flag to coordinate UI and logic when connecting models, reset filters appropriately, and ensure consistent behavior across the dropdown and sidebar components. Additionally, there are minor code cleanups for consistency.

Dropdown and Add Component enhancements for LanguageModel workflow:

• Added the awaitInputAgentModel state to utilityStore, and integrated its usage into the dropdown component (index.tsx) to trigger UI and logic changes when the "connect_other_models" option is selected. This ensures the UI highlights compatible handles and prepares for adding a LanguageModel component. [1] [2] [3]
• Updated the use-add-component hook to check for the awaitInputAgentModel flag when adding components. If set, it automatically selects the LanguageModel output, resets all filters, and clears the flag after the component is added. This creates a seamless workflow for connecting models. [1] [2]

Code consistency and cleanup:

• Removed unnecessary trailing commas and standardized function argument formatting for better readability and consistency in the dropdown and sidebar components. [1] [2] [3] [4]
• Updated array and object handling to ensure correct dependencies and prevent subtle bugs in memoization and callbacks. [1] [2]

Dropdown component logic refinements:

• Improved filtering and metadata handling for dropdown options, ensuring custom values and metadata are preserved and correctly displayed. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

Sidebar component minor improvements:

• Applied minor fixes for array and object handling, and standardized callback dependencies in the flow sidebar component for improved maintainability. [1] [2] [3] [4]

These changes collectively improve the user experience when connecting LanguageModel components and ensure the codebase remains clean and consistent.

https://www.loom.com/share/51c4ff1c893b4ed7bddcbc7c22573c8c?sid=70e3f05d-f641-42e7-91d4-d7aab2471853

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch cz/fix-llm-filter-agent

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This pull request implements a new LanguageModel connection flow to streamline how users add and connect LanguageModel components. The changes introduce a coordinated workflow between the dropdown component and add component hook to automatically configure LanguageModel outputs when connecting models.

• Adds awaitInputAgentModel state to coordinate UI highlighting and automatic component configuration
• Implements automatic LanguageModel output selection and filter reset in the add component hook
• Includes code consistency improvements with trailing comma cleanup and formatting standardization

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/frontend/src/types/zustand/utility/index.ts	Adds type definition for new awaitInputAgentModel state flag
src/frontend/src/stores/utilityStore.ts	Implements the awaitInputAgentModel state and setter in utility store
src/frontend/src/hooks/use-add-component.ts	Adds logic to automatically select LanguageModel output and reset filters when adding components
src/frontend/src/components/core/dropdownComponent/index.tsx	Integrates awaitInputAgentModel state into dropdown for "connect_other_models" workflow
src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx	Code cleanup with trailing comma removal and filter name logic improvements

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[lucaseduoli]

Can we make this more generic, allowing for other components to be selected depending on the component that has the Dropdown, not just the Agent?

[Cristhianzl]

Can we make this more generic, allowing for other components to be selected depending on the component that has the Dropdown, not just the Agent?

done! thanks!!

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Cristhianzl]

follow this PR #9787