+
{data.name}
{icon}
diff --git a/web/src/pages/agent/hooks/use-add-node.ts b/web/src/pages/agent/hooks/use-add-node.ts
index e679c4171..58f487921 100644
--- a/web/src/pages/agent/hooks/use-add-node.ts
+++ b/web/src/pages/agent/hooks/use-add-node.ts
@@ -116,6 +116,7 @@ export const useInitializeOperatorParams = () => {
[Operator.UserFillUp]: initialUserFillUpValues,
[Operator.StringTransform]: initialStringTransformValues,
[Operator.TavilyExtract]: initialTavilyExtractValues,
+ [Operator.Placeholder]: {},
};
}, [llmId]);
diff --git a/web/src/pages/data-flow/canvas/index.tsx b/web/src/pages/data-flow/canvas/index.tsx
index edc998a69..07410897c 100644
--- a/web/src/pages/data-flow/canvas/index.tsx
+++ b/web/src/pages/data-flow/canvas/index.tsx
@@ -178,11 +178,17 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
};
const onConnectEnd: OnConnectEnd = (event, connectionState) => {
+ const target = event.target as HTMLElement;
const nodeId = connectionState.fromNode?.id;
+
// Events triggered by Handle are directly interrupted
- if (connectionState.toNode !== null || (nodeId && hasChildNode(nodeId))) {
+ if (
+ target?.classList.contains('react-flow__handle') ||
+ (nodeId && hasChildNode(nodeId))
+ ) {
return;
}
+
if ('clientX' in event && 'clientY' in event) {
const { clientX, clientY } = event;
setDropdownPosition({ x: clientX, y: clientY });
diff --git a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx b/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
index 2e9c95f26..6beadb7e8 100644
--- a/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
+++ b/web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx
@@ -52,31 +52,33 @@ function OperatorItemList({
const getNodeName = useGetNodeName();
const getNodeDescription = useGetNodeDescription();
- const handleClick = (operator: Operator) => {
- const contextData = handleContext || {
- nodeId: '',
- id: '',
- type: 'source' as const,
- position: Position.Right,
- isFromConnectionDrag: true,
+ const handleClick =
+ (operator: Operator): React.MouseEventHandler
=>
+ (e) => {
+ const contextData = handleContext || {
+ nodeId: '',
+ id: '',
+ type: 'source' as const,
+ position: Position.Right,
+ isFromConnectionDrag: true,
+ };
+
+ const mockEvent = mousePosition
+ ? {
+ clientX: mousePosition.x,
+ clientY: mousePosition.y,
+ }
+ : e;
+
+ const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
+
+ if (onNodeCreated && newNodeId) {
+ onNodeCreated(newNodeId);
+ }
+
+ hideModal?.();
};
- const mockEvent = mousePosition
- ? {
- clientX: mousePosition.x,
- clientY: mousePosition.y,
- }
- : undefined;
-
- const newNodeId = addCanvasNode(operator, contextData)(mockEvent);
-
- if (onNodeCreated && newNodeId) {
- onNodeCreated(newNodeId);
- }
-
- hideModal?.();
- };
-
const renderOperatorItem = (operator: Operator) => {
const commonContent = (
@@ -89,12 +91,12 @@ function OperatorItemList({
{isCustomDropdown ? (
- handleClick(operator)}>{commonContent}
+ {commonContent}
) : (
handleClick(operator)}
+ onClick={handleClick(operator)}
onSelect={() => hideModal?.()}
>