Native data AI application framework based on AWEL+AGENT (#1152)

Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
Co-authored-by: lcx01800250 <lcx01800250@alibaba-inc.com>
Co-authored-by: licunxing <864255598@qq.com>
Co-authored-by: Aralhi <xiaoping0501@gmail.com>
Co-authored-by: xuyuan23 <643854343@qq.com>
Co-authored-by: aries_ckt <916701291@qq.com>
Co-authored-by: hzh97 <2976151305@qq.com>

web/components/flow/button-edge.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getBezierPath, EdgeProps, BaseEdge, useReactFlow } from 'reactflow';
+
+const ButtonEdge: React.FC<EdgeProps> = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, markerEnd }) => {
+  const [edgePath, edgeCenterX, edgeCenterY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  const reactFlow = useReactFlow();
+
+  function onEdgeClick(event: React.MouseEvent, id: string) {
+    event.stopPropagation();
+    reactFlow.setEdges(reactFlow.getEdges().filter((edge) => edge.id !== id));
+  }
+  return (
+    <>
+      <BaseEdge id={id} style={style} path={edgePath} markerEnd={markerEnd} />
+      <foreignObject
+        width={40}
+        height={40}
+        x={edgeCenterX - 40 / 2}
+        y={edgeCenterY - 40 / 2}
+        className="bg-transparent w-10 h-10 relative"
+        requiredExtensions="http://www.w3.org/1999/xhtml"
+      >
+        <button
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-stone-400 dark:bg-zinc-700 cursor-pointer text-sm"
+          onClick={(event) => onEdgeClick(event, id)}
+        >
+          ×
+        </button>
+      </foreignObject>
+    </>
+  );
+};
+
+export default ButtonEdge;