Feat:Can directly generate an agent node by dragging and dropping the connecting line (#9226) (#9357)

…e connecting line (#9226)

### What problem does this PR solve?

Can directly generate an agent node by dragging and dropping the
connecting line (#9226)

### Type of change

- [ ] Bug Fix (non-breaking change which fixes an issue)
- [x] New Feature (non-breaking change which adds functionality)
- [ ] Documentation Update
- [ ] Refactoring
- [ ] Performance Improvement
- [ ] Other (please describe):

web/src/pages/agent/canvas/node/handle.tsx

@@ -4,6 +4,7 @@ import { Handle, HandleProps } from '@xyflow/react';
 import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
 import { HandleContext } from '../../context';
+import { useDropdownManager } from '../context';
 import { InnerNextStepDropdown } from './dropdown/next-step-dropdown';
 
 export function CommonHandle({
@@ -13,12 +14,16 @@ export function CommonHandle({
 }: HandleProps & { nodeId: string }) {
   const { visible, hideModal, showModal } = useSetModalState();
 
+  const { canShowDropdown, setActiveDropdown, clearActiveDropdown } =
+    useDropdownManager();
+
   const value = useMemo(
     () => ({
       nodeId,
-      id: props.id,
+      id: props.id || undefined,
       type: props.type,
       position: props.position,
+      isFromConnectionDrag: false,
     }),
     [nodeId, props.id, props.position, props.type],
   );
@@ -33,12 +38,23 @@ export function CommonHandle({
         )}
         onClick={(e) => {
           e.stopPropagation();
+
+          if (!canShowDropdown()) {
+            return;
+          }
+
+          setActiveDropdown('handle');
           showModal();
         }}
       >
         <Plus className="size-3 pointer-events-none text-text-title-invert" />
         {visible && (
-          <InnerNextStepDropdown hideModal={hideModal}>
+          <InnerNextStepDropdown
+            hideModal={() => {
+              hideModal();
+              clearActiveDropdown();
+            }}
+          >
             <span></span>
           </InnerNextStepDropdown>
         )}