Feat: Solved the conflict between the Handle click and drag events of the canvas node #3221 (#8413)

### What problem does this PR solve?

Feat: Solved the conflict between the Handle click and drag events of
the canvas node #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

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

@@ -1,3 +1,4 @@
+import { useSetModalState } from '@/hooks/common-hooks';
 import { cn } from '@/lib/utils';
 import { Handle, HandleProps } from '@xyflow/react';
 import { Plus } from 'lucide-react';
@@ -10,6 +11,8 @@ export function CommonHandle({
   nodeId,
   ...props
 }: HandleProps & { nodeId: string }) {
+  const { visible, hideModal, showModal } = useSetModalState();
+
   const value = useMemo(
     () => ({
       nodeId,
@@ -22,20 +25,24 @@ export function CommonHandle({
 
   return (
     <HandleContext.Provider value={value}>
-      <NextStepDropdown>
-        <Handle
-          {...props}
-          className={cn(
-            'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
-            className,
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          <Plus className="size-3 pointer-events-none" />
-        </Handle>
-      </NextStepDropdown>
+      <Handle
+        {...props}
+        className={cn(
+          'inline-flex justify-center items-center !bg-background-checked !size-4 !rounded-sm !border-none ',
+          className,
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          showModal();
+        }}
+      >
+        <Plus className="size-3 pointer-events-none" />
+        {visible && (
+          <NextStepDropdown hideModal={hideModal}>
+            <span></span>
+          </NextStepDropdown>
+        )}
+      </Handle>
     </HandleContext.Provider>
   );
 }