Feat: Add a child operator node by clicking the operator node anchor point #3221 (#8309)

### What problem does this PR solve?

Feat: Add a child operator node by clicking the operator node anchor
point #3221

### Type of change


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

web/src/pages/agent/canvas/node/begin-node.tsx

@@ -17,7 +17,7 @@ import styles from './index.less';
 import { NodeWrapper } from './node-wrapper';
 
 // TODO: do not allow other nodes to connect to this node
-function InnerBeginNode({ data }: NodeProps<IBeginNode>) {
+function InnerBeginNode({ data, id }: NodeProps<IBeginNode>) {
   const { t } = useTranslation();
   const query: BeginQuery[] = get(data, 'form.query', []);
 
@@ -29,14 +29,15 @@ function InnerBeginNode({ data }: NodeProps<IBeginNode>) {
         isConnectable
         className={styles.handle}
         style={RightHandleStyle}
+        nodeId={id}
       ></CommonHandle>
 
-      <Flex align="center" justify={'center'} gap={10}>
+      <section className="flex items-center justify-center gap-2">
         <OperatorIcon name={data.label as Operator}></OperatorIcon>
         <div className="truncate text-center font-semibold text-sm">
           {t(`flow.begin`)}
         </div>
-      </Flex>
+      </section>
       <Flex gap={8} vertical className={styles.generateParameters}>
         {query.map((x, idx) => {
           const Icon = BeginQueryTypeIconMap[x.type as BeginQueryType];