Feat: Initialize the data pipeline canvas. #9869 (#9870)

### What problem does this PR solve?
Feat: Initialize the data pipeline canvas. #9869

### Type of change


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

web/src/pages/data-flow/utils/build-output-list.ts

@@ -0,0 +1,8 @@
+import { OutputType } from '../form/components/output';
+
+export function buildOutputList(outputs: Record<string, Record<string, any>>) {
+  return Object.entries(outputs).reduce<OutputType[]>((pre, [key, val]) => {
+    pre.push({ title: key, type: val.type });
+    return pre;
+  }, []);
+}

web/src/pages/data-flow/utils/chat.ts

@@ -0,0 +1,21 @@
+import { MessageType } from '@/constants/chat';
+import { IReference } from '@/interfaces/database/chat';
+import { IMessage } from '@/pages/chat/interface';
+import { isEmpty } from 'lodash';
+
+export const buildAgentMessageItemReference = (
+  conversation: { message: IMessage[]; reference: IReference[] },
+  message: IMessage,
+) => {
+  const assistantMessages = conversation.message?.filter(
+    (x) => x.role === MessageType.Assistant,
+  );
+  const referenceIndex = assistantMessages.findIndex(
+    (x) => x.id === message.id,
+  );
+  const reference = !isEmpty(message?.reference)
+    ? message?.reference
+    : (conversation?.reference ?? [])[referenceIndex];
+
+  return reference ?? { doc_aggs: [], chunks: [], total: 0 };
+};

web/src/pages/data-flow/utils/delete-node.ts

@@ -0,0 +1,34 @@
+import { Edge } from '@xyflow/react';
+import { filterAllDownstreamAgentAndToolNodeIds } from './filter-downstream-nodes';
+
+// Delete all downstream agent and tool operators of the current agent operator
+export function deleteAllDownstreamAgentsAndTool(
+  nodeId: string,
+  edges: Edge[],
+) {
+  const downstreamAgentAndToolNodeIds = filterAllDownstreamAgentAndToolNodeIds(
+    edges,
+    [nodeId],
+  );
+
+  const downstreamAgentAndToolEdges = downstreamAgentAndToolNodeIds.reduce<
+    Edge[]
+  >((pre, cur) => {
+    const relatedEdges = edges.filter(
+      (x) => x.source === cur || x.target === cur,
+    );
+
+    relatedEdges.forEach((x) => {
+      if (!pre.some((y) => y.id !== x.id)) {
+        pre.push(x);
+      }
+    });
+
+    return pre;
+  }, []);
+
+  return {
+    downstreamAgentAndToolNodeIds,
+    downstreamAgentAndToolEdges,
+  };
+}

web/src/pages/data-flow/utils/filter-downstream-nodes.ts

@@ -0,0 +1,63 @@
+import { Edge } from '@xyflow/react';
+import { NodeHandleId } from '../constant';
+
+// Get all downstream node ids
+export function filterAllDownstreamNodeIds(
+  edges: Edge[],
+  nodeIds: string[],
+  predicate: (edge: Edge) => boolean,
+) {
+  return nodeIds.reduce<string[]>((pre, nodeId) => {
+    const currentEdges = edges.filter(
+      (x) => x.source === nodeId && predicate(x),
+    );
+
+    const downstreamNodeIds: string[] = currentEdges.map((x) => x.target);
+
+    const ids = downstreamNodeIds.concat(
+      filterAllDownstreamNodeIds(edges, downstreamNodeIds, predicate),
+    );
+
+    ids.forEach((x) => {
+      if (pre.every((y) => y !== x)) {
+        pre.push(x);
+      }
+    });
+
+    return pre;
+  }, []);
+}
+
+// Get all downstream agent and tool operators of the current agent operator
+export function filterAllDownstreamAgentAndToolNodeIds(
+  edges: Edge[],
+  nodeIds: string[],
+) {
+  return filterAllDownstreamNodeIds(
+    edges,
+    nodeIds,
+    (edge: Edge) =>
+      edge.sourceHandle === NodeHandleId.AgentBottom ||
+      edge.sourceHandle === NodeHandleId.Tool,
+  );
+}
+
+// Get all downstream agent operators of the current agent operator
+export function filterAllDownstreamAgentNodeIds(
+  edges: Edge[],
+  nodeIds: string[],
+) {
+  return filterAllDownstreamNodeIds(
+    edges,
+    nodeIds,
+    (edge: Edge) => edge.sourceHandle === NodeHandleId.AgentBottom,
+  );
+}
+// The direct child agent node of the current node
+export function filterDownstreamAgentNodeIds(edges: Edge[], nodeId?: string) {
+  return edges
+    .filter(
+      (x) => x.source === nodeId && x.sourceHandle === NodeHandleId.AgentBottom,
+    )
+    .map((x) => x.target);
+}