feat(components): add Merge Agent Handler bundle and docs#12020
feat(components): add Merge Agent Handler bundle and docs#12020pritak-merge wants to merge 2 commits intolangflow-ai:mainfrom
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis pull request introduces a new Merge bundle integration, adding backend components for MCP client communication with the Merge API, dynamic Pydantic model generation from JSON schemas, frontend icon components, comprehensive documentation, unit tests, and integration configuration across the platform. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Component as MergeAgentHandlerToolsComponent
participant Client as MergeAgentHandlerClient
participant API as Merge API
participant Schema as SchemaUtils
User->>Component: build_tool(api_key, tool_pack, user, dispatch_mode)
Component->>Component: Validate inputs
Component->>Client: get_tool_packs()
Client->>API: GET /tool-packs (paginated)
API-->>Client: Tool pack list
Client-->>Component: list[MergeToolPack]
Component->>Client: get_registered_users(is_test)
Client->>API: GET /registered-users (paginated)
API-->>Client: Registered users list
Client-->>Component: list[MergeRegisteredUser]
Component->>Component: Resolve IDs from labels
Component->>Client: list_mcp_tools(tool_pack_id, user_id)
Client->>API: POST /mcp (JSON-RPC 2.0 request)
API-->>Client: MCP tools list
Client-->>Component: list[McpTool]
alt dispatch_mode enabled
Component->>Schema: create_dispatch_schema(tool_names)
Schema-->>Component: Dispatch Pydantic model
Component->>Component: _build_dispatch_tool()
else individual tools mode
Component->>Schema: json_schema_to_pydantic_model(per tool)
Schema-->>Component: Per-tool Pydantic models
Component->>Component: _build_individual_tools()
end
Component-->>User: list[Tool]
Estimated code review effort🎯 4 (Complex) | ⏱️ ~75 minutes Important Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional. ❌ Failed checks (1 error, 3 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/frontend/src/utils/styleUtils.ts (1)
631-633:⚠️ Potential issue | 🟡 MinorLine 632 returns
CachedIcon | undefined, conflicting with declaredPromise<CachedIcon>return type.Under TypeScript strict mode (enabled in your tsconfig.json),
Map.get()returnsCachedIcon | undefined. Thehas()check on line 631 does not narrow the type for theget()call on line 632, causing the function to potentially returnPromise<CachedIcon | undefined>instead of the declaredPromise<CachedIcon>.Fix by storing the result in a variable and checking it:
Proposed fix
- if (iconCache.has(name)) { - return iconCache.get(name); - } + const cached = iconCache.get(name); + if (cached) { + return cached; + }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/frontend/src/utils/styleUtils.ts` around lines 631 - 633, The current code returns iconCache.get(name) which yields CachedIcon | undefined, violating the declared Promise<CachedIcon> return type; fix it in the function that uses iconCache by first assigning const cached = iconCache.get(name), then check if (cached !== undefined) return cached (or return Promise.resolve(cached) if the function is non-async), otherwise continue the existing logic to create/cache the icon; this ensures the returned value is strictly CachedIcon and not undefined. Reference the iconCache variable and its get/has calls in this function when making the change.
🧹 Nitpick comments (2)
src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.py (2)
15-17: Adopt the component test base contract for this bundle test class.This class does not inherit from a
ComponentTestBase*class and does not define the expected fixtures (component_class,default_kwargs,file_names_mapping).As per coding guidelines "Inherit from the correct
ComponentTestBasefamily class located insrc/backend/tests/base.py... Provide three required fixtures:component_class,default_kwargs, andfile_names_mapping."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.py` around lines 15 - 17, The test class TestMergeAgentHandlerToolsComponent must adopt the component test base contract: have it inherit from the appropriate ComponentTestBase family class and add the three required fixtures named component_class, default_kwargs, and file_names_mapping; implement component_class to point to the MergeAgentHandler tools component under test, default_kwargs to supply minimal constructor kwargs for that component, and file_names_mapping to map expected fixture file names to test assets so the base class can load them.
19-69: Expand coverage beyond helper formatting paths.Current tests mostly validate label/error formatting helpers. Please add coverage for component behavior such as
to_frontend_node()+update_build_config()and main build/validation flows.As per coding guidelines "Create comprehensive unit tests for all new backend components." and "Test component build config updates by calling
to_frontend_node()to get the node template, then callingupdate_build_config()to apply configuration changes".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.py` around lines 19 - 69, Add unit tests that exercise MergeAgentHandlerToolsComponent's behavior beyond formatting helpers by calling to_frontend_node() to obtain a node template, asserting expected node fields/options, then invoking update_build_config(node_template, build_config_changes) to apply changes and asserting the returned/updated build config reflects those changes; also add tests that run the component's main build and validation flows (e.g., create a minimal valid input payload, call the component build/validation entrypoints or methods used in production, and assert it returns a valid build config or raises expected validation errors). Target the methods MergeAgentHandlerToolsComponent.to_frontend_node, MergeAgentHandlerToolsComponent.update_build_config, and the component's build/validation entrypoints when adding these tests.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/docs/Components/bundles-merge.mdx`:
- Around line 1-4: The front matter block at the top (the YAML between the
leading --- markers containing title/slug) is missing required metadata; update
that front matter to include a descriptive `description` string and a numeric
`sidebar_position` field alongside the existing `title` and `slug` so the page
conforms to the docs guideline; edit the front matter in the current file to add
`description: "<short summary of the page>"` and `sidebar_position: <number>`
with appropriate values for ordering.
In `@src/frontend/src/icons/Merge/index.tsx`:
- Around line 6-11: Change the MergeIcon wrapper to use
React.PropsWithChildren<{}> as its generic prop type (instead of
React.SVGProps<SVGSVGElement>), read dark mode as a boolean from useDarkStore
(e.g., const isDark = useDarkStore(state => state.dark)), and pass that boolean
to the underlying MergeIconSVG via the isDark prop (rename isdark → isDark)
while forwarding ref and other props; update references to MergeIcon,
MergeIconSVG, and useDarkStore accordingly so the TypeScript contract and
dark-mode prop match the icon conventions.
In `@src/frontend/src/icons/Merge/MergeAgentHandlerIcon.jsx`:
- Around line 3-9: The MergeIcon component forwards a custom string prop
`isdark` to the DOM and uses the wrong casing; change to the `isDark` boolean
prop contract and stop forwarding it to the <svg>. In the forwardRef function
(MergeIcon) destructure props to pull out isDark (const { isDark, ...svgProps }
= props), use fill based on the boolean (e.g., fill={isDark ? "#ffffff" :
"#0A0A0A"}), and spread only svgProps into the <svg> so the custom isDark prop
is not forwarded to the DOM.
In `@src/lfx/src/lfx/components/merge/mcp_client.py`:
- Line 4: Replace the direct import of Self from typing with a compatibility
fallback that imports Self from typing if available else from typing_extensions
so Python 3.10 users don't crash; update the import statement in mcp_client.py
(the line currently importing "Self" alongside "TYPE_CHECKING, Any, cast") to
attempt to import Self from typing and fall back to typing_extensions, ensuring
all uses of Self in the file continue working.
In `@src/lfx/src/lfx/components/merge/merge_agent_handler_tool.py`:
- Around line 351-354: The dropdown labels built in
MergeAgentHandlerToolsComponent._summarize_option_items creation use truncated
tool_pack_id (tool_pack_id[:8]) to form the dict key `label`, causing silent
overwrites in the `options` dict when labels collide; fix by making labels
unique before inserting into `options` — e.g., detect existing `label`
collisions and disambiguate by appending more of `tool_pack_id` (or the full
id), a sequence number, or otherwise include a unique suffix (use the same
strategy for the other occurrence around lines building `label`/`options`), so
every `tool_pack_id` maps to a distinct key without losing entries.
---
Outside diff comments:
In `@src/frontend/src/utils/styleUtils.ts`:
- Around line 631-633: The current code returns iconCache.get(name) which yields
CachedIcon | undefined, violating the declared Promise<CachedIcon> return type;
fix it in the function that uses iconCache by first assigning const cached =
iconCache.get(name), then check if (cached !== undefined) return cached (or
return Promise.resolve(cached) if the function is non-async), otherwise continue
the existing logic to create/cache the icon; this ensures the returned value is
strictly CachedIcon and not undefined. Reference the iconCache variable and its
get/has calls in this function when making the change.
---
Nitpick comments:
In
`@src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.py`:
- Around line 15-17: The test class TestMergeAgentHandlerToolsComponent must
adopt the component test base contract: have it inherit from the appropriate
ComponentTestBase family class and add the three required fixtures named
component_class, default_kwargs, and file_names_mapping; implement
component_class to point to the MergeAgentHandler tools component under test,
default_kwargs to supply minimal constructor kwargs for that component, and
file_names_mapping to map expected fixture file names to test assets so the base
class can load them.
- Around line 19-69: Add unit tests that exercise
MergeAgentHandlerToolsComponent's behavior beyond formatting helpers by calling
to_frontend_node() to obtain a node template, asserting expected node
fields/options, then invoking update_build_config(node_template,
build_config_changes) to apply changes and asserting the returned/updated build
config reflects those changes; also add tests that run the component's main
build and validation flows (e.g., create a minimal valid input payload, call the
component build/validation entrypoints or methods used in production, and assert
it returns a valid build config or raises expected validation errors). Target
the methods MergeAgentHandlerToolsComponent.to_frontend_node,
MergeAgentHandlerToolsComponent.update_build_config, and the component's
build/validation entrypoints when adding these tests.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/frontend/src/icons/Merge/merge-agent-handler-icon.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
docs/docs/Components/bundles-merge.mdxdocs/sidebars.jssrc/backend/tests/unit/components/bundles/merge/__init__.pysrc/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.pysrc/frontend/src/icons/Merge/MergeAgentHandlerIcon.jsxsrc/frontend/src/icons/Merge/index.tsxsrc/frontend/src/icons/lazyIconImports.tssrc/frontend/src/utils/styleUtils.tssrc/lfx/src/lfx/components/__init__.pysrc/lfx/src/lfx/components/merge/__init__.pysrc/lfx/src/lfx/components/merge/mcp_client.pysrc/lfx/src/lfx/components/merge/merge_agent_handler_tool.pysrc/lfx/src/lfx/components/merge/schema_utils.pysrc/lfx/src/lfx/components/merge/types.py
feat(components): add Merge Agent Handler bundle and docs
What changed
Backend
mergebundle atsrc/lfx/src/lfx/components/merge/with:merge_agent_handler_tool.pymcp_client.pyschema_utils.pytypes.py__init__.pymergeinsrc/lfx/src/lfx/components/__init__.pyfor bundle discovery.Frontend
src/frontend/src/icons/Merge/.src/frontend/src/icons/lazyIconImports.ts(Merge -> MergeIcon).src/frontend/src/utils/styleUtils.ts:display_name: "Merge"name: "merge"icon: "Merge"Docs
docs/docs/Components/bundles-merge.mdx.docs/sidebars.js.Tests
src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.pyHow the integration works
This bundle provides Merge Agent Handler Tools for agent tool use in Langflow.
Toolsinput).api_key.environment.tools/listto discover available tools in the selected Tool Packtools/callto execute selected toolsTool Pack role
Registered User role
Example runtime path
tools/callwith selected Registered User contextWhy this design
User impact
Tools.Production/Test)Testing performed
Local commands
make initmake lint✅make unit_testssrc/backend/tests/unit/services/telemetry/test_component_inputs_splitting.py::test_property_split_never_exceeds_max_sizeuv run pytest -n 0 src/backend/tests/unit/components/bundles/merge/test_merge_agent_handler_tools.py -q✅ (4 passed)LFX_DEV=1 make backend✅ (/healthreturned{"status":"ok"})make frontend✅ (starts onhttp://localhost:3000, Node version warning present)cd docs && npm install && npm run build✅ (build success; existing broken-anchor warning unrelated to this bundle)Documentation added
bundles-mergepage includes:Screenshots
Please attach the following screenshots before merge:
Summary by CodeRabbit
Release Notes