Feat: A pipeline's child node can only have one node #9869 (#10695)

### What problem does this PR solve?

Feat: A pipeline's child node can only have one node #9869
### Type of change


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

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

@@ -5,6 +5,8 @@ import { Plus } from 'lucide-react';
 import { useMemo } from 'react';
 import { NodeHandleId } from '../../constant';
 import { HandleContext } from '../../context';
+import { useIsPipeline } from '../../hooks/use-is-pipeline';
+import useGraphStore from '../../store';
 import { useDropdownManager } from '../context';
 import { NextStepDropdown } from './dropdown/next-step-dropdown';
 
@@ -14,9 +16,12 @@ export function CommonHandle({
   ...props
 }: HandleProps & { nodeId: string }) {
   const { visible, hideModal, showModal } = useSetModalState();
-
   const { canShowDropdown, setActiveDropdown, clearActiveDropdown } =
     useDropdownManager();
+  const { hasChildNode } = useGraphStore((state) => state);
+  const isPipeline = useIsPipeline();
+
+  const isConnectable = !(isPipeline && hasChildNode(nodeId)); // Using useMemo will cause isConnectable to not be updated when the subsequent connection line is deleted
 
   const value = useMemo(
     () => ({
@@ -33,6 +38,7 @@ export function CommonHandle({
     <HandleContext.Provider value={value}>
       <Handle
         {...props}
+        isConnectable={isConnectable}
         className={cn(
           'inline-flex justify-center items-center !bg-accent-primary !border-none group-hover:!size-4 group-hover:!rounded-sm',
           className,
@@ -40,6 +46,10 @@ export function CommonHandle({
         onClick={(e) => {
           e.stopPropagation();
 
+          if (!isConnectable) {
+            return;
+          }
+
           if (!canShowDropdown()) {
             return;
           }