Feat: Keep connection status during generating agent by drag and drop … (#10141)

### What problem does this PR solve?

About issue #10140

In version 0.20.1, we implemented the generation of new node through
mouse drag and drop. If we could create a workflow module like in Coze,
where there is not only a dropdown menu but also an intermediate node
(placeholder node) after the drag and drop is completed, this could
improve the user experience.

### Type of change

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

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

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import { NodeProps, Position } from '@xyflow/react';
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NodeHandleId, Operator } from '../../constant';
+import OperatorIcon from '../../operator-icon';
+import { CommonHandle } from './handle';
+import { LeftHandleStyle } from './handle-icon';
+import styles from './index.less';
+import { NodeWrapper } from './node-wrapper';
+
+function InnerPlaceholderNode({ data, id, selected }: NodeProps) {
+  const { t } = useTranslation();
+
+  return (
+    <NodeWrapper selected={selected}>
+      <CommonHandle
+        type="target"
+        position={Position.Left}
+        isConnectable
+        style={LeftHandleStyle}
+        nodeId={id}
+        id={NodeHandleId.End}
+      ></CommonHandle>
+
+      <section className="flex items-center gap-2">
+        <OperatorIcon name={data.label as Operator}></OperatorIcon>
+        <div className="truncate text-center font-semibold text-sm">
+          {t(`flow.placeholder`, 'Placeholder')}
+        </div>
+      </section>
+
+      <section
+        className={cn(styles.generateParameters, 'flex gap-2 flex-col mt-2')}
+      >
+        <Skeleton active paragraph={{ rows: 2 }} title={false} />
+        <div className="flex gap-2">
+          <Skeleton.Button active size="small" />
+          <Skeleton.Button active size="small" />
+        </div>
+      </section>
+    </NodeWrapper>
+  );
+}
+
+export const PlaceholderNode = memo(InnerPlaceholderNode);