feat(web): 增加任务和流程图CRUD
This commit is contained in:
113
service-web/client/src/components/flow/FlowChecker.test.tsx
Normal file
113
service-web/client/src/components/flow/FlowChecker.test.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import {type Connection, type Node} from '@xyflow/react'
|
||||
import {uuid} from 'licia'
|
||||
import {expect, test} from 'vitest'
|
||||
import {
|
||||
atLeastOneEndNodeError,
|
||||
atLeastOneStartNodeError,
|
||||
checkAddConnection,
|
||||
checkAddNode,
|
||||
checkSave,
|
||||
hasCycleError,
|
||||
hasRedundantEdgeError,
|
||||
multiEndNodeError,
|
||||
multiStartNodeError,
|
||||
nodeToSelfError,
|
||||
sourceNodeNotFoundError,
|
||||
startNodeToEndNodeError,
|
||||
targetNodeNotFoundError,
|
||||
} from './FlowChecker.tsx'
|
||||
|
||||
const createNode = (id: string, type: string): Node => {
|
||||
return {
|
||||
data: {},
|
||||
position: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
id,
|
||||
type,
|
||||
}
|
||||
}
|
||||
|
||||
const createStartNode = (id: string): Node => createNode(id, 'start-node')
|
||||
const createEndNode = (id: string): Node => createNode(id, 'end-node')
|
||||
|
||||
const createConnection = function (source: string, target: string, sourceHandle: string | null = null, targetHandle: string | null = null): Connection {
|
||||
return {
|
||||
source,
|
||||
target,
|
||||
sourceHandle,
|
||||
targetHandle,
|
||||
}
|
||||
}
|
||||
|
||||
/* check add node */
|
||||
|
||||
test(multiStartNodeError().message, () => {
|
||||
expect(() => checkAddNode('start-node', [createStartNode(uuid())], [])).toThrowError(multiStartNodeError())
|
||||
})
|
||||
|
||||
test(multiEndNodeError().message, () => {
|
||||
expect(() => checkAddNode('end-node', [createEndNode(uuid())], [])).toThrowError(multiEndNodeError())
|
||||
})
|
||||
|
||||
/* check add connection */
|
||||
test(sourceNodeNotFoundError().message, () => {
|
||||
expect(() => checkAddConnection(createConnection('a', 'b'), [], []))
|
||||
})
|
||||
|
||||
test(targetNodeNotFoundError().message, () => {
|
||||
expect(() => checkAddConnection(createConnection('a', 'b'), [createStartNode('a')], []))
|
||||
})
|
||||
|
||||
test(startNodeToEndNodeError().message, () => {
|
||||
expect(() => checkAddConnection(
|
||||
createConnection('a', 'b'),
|
||||
[createStartNode('a'), createEndNode('b')],
|
||||
[]
|
||||
))
|
||||
})
|
||||
|
||||
test(nodeToSelfError().message, () => {
|
||||
expect(() => {
|
||||
// language=JSON
|
||||
const {
|
||||
nodes,
|
||||
edges
|
||||
} = JSON.parse('{\n "nodes": [\n {\n "id": "P14abHl4uY",\n "type": "start-node",\n "position": {\n "x": 100,\n "y": 100\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 82\n }\n },\n {\n "id": "3YDRebKqCX",\n "type": "end-node",\n "position": {\n "x": 773.3027344262372,\n "y": 101.42648884412338\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 74\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "YXJ91nHVaz",\n "type": "llm-node",\n "position": {\n "x": 430.94541183662506,\n "y": 101.42648884412338\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 74\n },\n "selected": true,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "P14abHl4uY",\n "target": "YXJ91nHVaz",\n "id": "xy-edge__P14abHl4uY-YXJ91nHVaz"\n },\n {\n "source": "YXJ91nHVaz",\n "target": "3YDRebKqCX",\n "id": "xy-edge__YXJ91nHVaz-3YDRebKqCX"\n }\n ],\n "data": {}\n}')
|
||||
checkAddConnection(createConnection('YXJ91nHVaz', 'YXJ91nHVaz'), nodes, edges)
|
||||
}).toThrowError(nodeToSelfError())
|
||||
})
|
||||
|
||||
test(hasCycleError().message, () => {
|
||||
expect(() => {
|
||||
// language=JSON
|
||||
const {
|
||||
nodes,
|
||||
edges,
|
||||
} = JSON.parse('{\n "nodes": [\n {\n "id": "-DKfXm7r3f",\n "type": "start-node",\n "position": {\n "x": -75.45812782717618,\n "y": 14.410669352596976\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 82\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "2uL3Hw2CAW",\n "type": "end-node",\n "position": {\n "x": 734.7875356349059,\n "y": -1.2807079327602473\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 74\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "yp-yYfKUzC",\n "type": "llm-node",\n "position": {\n "x": 338.2236369686051,\n "y": -92.5759939566568\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 74\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "N4HQPN-NYZ",\n "type": "llm-node",\n "position": {\n "x": 332.51768159211156,\n "y": 114.26488844123382\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 74\n },\n "selected": true,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "-DKfXm7r3f",\n "target": "yp-yYfKUzC",\n "id": "xy-edge__-DKfXm7r3f-yp-yYfKUzC"\n },\n {\n "source": "yp-yYfKUzC",\n "target": "2uL3Hw2CAW",\n "id": "xy-edge__yp-yYfKUzC-2uL3Hw2CAW"\n },\n {\n "source": "-DKfXm7r3f",\n "target": "N4HQPN-NYZ",\n "id": "xy-edge__-DKfXm7r3f-N4HQPN-NYZ"\n },\n {\n "source": "N4HQPN-NYZ",\n "target": "yp-yYfKUzC",\n "id": "xy-edge__N4HQPN-NYZ-yp-yYfKUzC"\n }\n ],\n "data": {}\n}')
|
||||
// language=JSON
|
||||
checkAddConnection(JSON.parse('{\n "source": "yp-yYfKUzC",\n "sourceHandle": null,\n "target": "N4HQPN-NYZ",\n "targetHandle": null\n}'), nodes, edges)
|
||||
}).toThrowError(hasCycleError())
|
||||
})
|
||||
|
||||
test(hasRedundantEdgeError().message, () => {
|
||||
expect(() => {
|
||||
// language=JSON
|
||||
const {
|
||||
nodes,
|
||||
edges,
|
||||
} = JSON.parse('{\n "nodes": [\n {\n "id": "TCxPixrdkI",\n "type": "start-node",\n "position": {\n "x": -256,\n "y": 109.5\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 83\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "tGs78_ietp",\n "type": "llm-node",\n "position": {\n "x": 108,\n "y": -2.5\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 105\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "OeZdaU7LpY",\n "type": "llm-node",\n "position": {\n "x": 111,\n "y": 196\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 105\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "LjfoCYZo-E",\n "type": "knowledge-node",\n "position": {\n "x": 497.62196259607214,\n "y": -10.792497317791003\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": true,\n "dragging": false\n },\n {\n "id": "sQM_22GYB5",\n "type": "end-node",\n "position": {\n "x": 874.3164534765615,\n "y": 151.70316541496913\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n },\n {\n "id": "KpMH_xc3ZZ",\n "type": "llm-node",\n "position": {\n "x": 529.6286840434341,\n "y": 150.4721376669937\n },\n "data": {},\n "measured": {\n "width": 256,\n "height": 75\n },\n "selected": false,\n "dragging": false\n }\n ],\n "edges": [\n {\n "source": "TCxPixrdkI",\n "sourceHandle": "source",\n "target": "tGs78_ietp",\n "targetHandle": "target",\n "id": "xy-edge__TCxPixrdkIsource-tGs78_ietptarget"\n },\n {\n "source": "TCxPixrdkI",\n "sourceHandle": "source",\n "target": "OeZdaU7LpY",\n "targetHandle": "target",\n "id": "xy-edge__TCxPixrdkIsource-OeZdaU7LpYtarget"\n },\n {\n "source": "tGs78_ietp",\n "sourceHandle": "source",\n "target": "LjfoCYZo-E",\n "targetHandle": "target",\n "id": "xy-edge__tGs78_ietpsource-LjfoCYZo-Etarget"\n },\n {\n "source": "LjfoCYZo-E",\n "sourceHandle": "source",\n "target": "KpMH_xc3ZZ",\n "targetHandle": "target",\n "id": "xy-edge__LjfoCYZo-Esource-KpMH_xc3ZZtarget"\n },\n {\n "source": "OeZdaU7LpY",\n "sourceHandle": "source",\n "target": "KpMH_xc3ZZ",\n "targetHandle": "target",\n "id": "xy-edge__OeZdaU7LpYsource-KpMH_xc3ZZtarget"\n },\n {\n "source": "KpMH_xc3ZZ",\n "sourceHandle": "source",\n "target": "sQM_22GYB5",\n "targetHandle": "target",\n "id": "xy-edge__KpMH_xc3ZZsource-sQM_22GYB5target"\n }\n ],\n "data": {\n "tGs78_ietp": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你是个聪明人"\n },\n "OeZdaU7LpY": {\n "model": "qwen3",\n "outputs": {\n "text": {\n "type": "string"\n }\n },\n "systemPrompt": "你也是个聪明人"\n }\n }\n}')
|
||||
// language=JSON
|
||||
checkAddConnection(JSON.parse('{\n "source": "OeZdaU7LpY",\n "sourceHandle": "source",\n "target": "LjfoCYZo-E",\n "targetHandle": "target"\n}'), nodes, edges)
|
||||
}).toThrowError(hasRedundantEdgeError())
|
||||
})
|
||||
|
||||
/* check save */
|
||||
test(atLeastOneStartNodeError().message, () => {
|
||||
expect(() => checkSave([], [], {})).toThrowError(atLeastOneStartNodeError())
|
||||
})
|
||||
|
||||
test(atLeastOneEndNodeError().message, () => {
|
||||
expect(() => checkSave([createStartNode(uuid())], [], {})).toThrowError(atLeastOneEndNodeError())
|
||||
})
|
||||
274
service-web/client/src/components/flow/FlowChecker.tsx
Normal file
274
service-web/client/src/components/flow/FlowChecker.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
import {type Connection, type Edge, getConnectedEdges, getIncomers, getOutgoers, type Node} from '@xyflow/react'
|
||||
import {clone, find, findIdx, isEqual, lpad, toStr, uuid} from 'licia'
|
||||
|
||||
export class CheckError extends Error {
|
||||
readonly id: string
|
||||
|
||||
constructor(
|
||||
id: number,
|
||||
message: string,
|
||||
) {
|
||||
super(message)
|
||||
this.id = `E${lpad(toStr(id), 6, '0')}`
|
||||
}
|
||||
|
||||
public toString(): string {
|
||||
return `${this.id}: ${this.message}`
|
||||
}
|
||||
}
|
||||
|
||||
export const multiStartNodeError = () => new CheckError(100, '只能存在1个开始节点')
|
||||
export const multiEndNodeError = () => new CheckError(101, '只能存在1个结束节点')
|
||||
|
||||
const getNodeById = (id: string, nodes: Node[]) => find(nodes, (n: Node) => isEqual(n.id, id))
|
||||
|
||||
// @ts-ignore
|
||||
export const checkAddNode: (type: string, nodes: Node[], edges: Edge[]) => void = (type, nodes, edges) => {
|
||||
if (isEqual(type, 'start-node') && findIdx(nodes, (node: Node) => isEqual(type, node.type)) > -1) {
|
||||
throw multiStartNodeError()
|
||||
}
|
||||
if (isEqual(type, 'end-node') && findIdx(nodes, (node: Node) => isEqual(type, node.type)) > -1) {
|
||||
throw multiEndNodeError()
|
||||
}
|
||||
}
|
||||
|
||||
export const sourceNodeNotFoundError = () => new CheckError(200, '连线起始节点未找到')
|
||||
export const targetNodeNotFoundError = () => new CheckError(201, '连线目标节点未找到')
|
||||
export const startNodeToEndNodeError = () => new CheckError(202, '开始节点不能直连结束节点')
|
||||
export const nodeToSelfError = () => new CheckError(203, '节点不能直连自身')
|
||||
export const hasCycleError = () => new CheckError(204, '禁止流程循环')
|
||||
export const nodeNotOnlyToEndNode = () => new CheckError(206, '直连结束节点的节点不允许连接其他节点')
|
||||
export const hasRedundantEdgeError = () => new CheckError(207, '禁止出现冗余边')
|
||||
|
||||
const hasCycle = (sourceNode: Node, targetNode: Node, nodes: Node[], edges: Edge[], visited = new Set<string>()) => {
|
||||
if (visited.has(targetNode.id)) return false
|
||||
visited.add(targetNode.id)
|
||||
for (const outgoer of getOutgoers(targetNode, nodes, edges)) {
|
||||
if (isEqual(outgoer.id, sourceNode.id)) return true
|
||||
if (hasCycle(sourceNode, outgoer, nodes, edges, visited)) return true
|
||||
}
|
||||
}
|
||||
|
||||
/* 摘自Dify的流程合法性判断 */
|
||||
|
||||
type ParallelInfoItem = {
|
||||
parallelNodeId: string
|
||||
depth: number
|
||||
isBranch?: boolean
|
||||
}
|
||||
|
||||
type NodeParallelInfo = {
|
||||
parallelNodeId: string
|
||||
edgeHandleId: string
|
||||
depth: number
|
||||
}
|
||||
|
||||
type NodeHandle = {
|
||||
node: Node
|
||||
handle: string
|
||||
}
|
||||
|
||||
type NodeStreamInfo = {
|
||||
upstreamNodes: Set<string>
|
||||
downstreamEdges: Set<string>
|
||||
}
|
||||
|
||||
const groupBy = (array: Record<string, any>[], iteratee: string) => {
|
||||
const result: Record<string, any[]> = {}
|
||||
for (const item of array) {
|
||||
// 获取属性值并转换为字符串键
|
||||
const key = item[iteratee]
|
||||
if (!result[key]) {
|
||||
result[key] = []
|
||||
}
|
||||
result[key].push(item)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
export const getParallelInfo = (nodes: Node[], edges: Edge[], parentNodeId?: string) => {
|
||||
// 等到有子图的时候再考虑
|
||||
/*if (parentNodeId) {
|
||||
const parentNode = nodes.find(node => node.id === parentNodeId)
|
||||
if (!parentNode)
|
||||
throw new Error('Parent node not found')
|
||||
|
||||
startNode = nodes.find(node => node.id === (parentNode.data as (IterationNodeType | LoopNodeType)).start_node_id)
|
||||
}
|
||||
else {
|
||||
startNode = nodes.find(node => isEqual(node.type, 'start_node'))
|
||||
}*/
|
||||
let startNode = nodes.find(node => isEqual(node.type, 'start-node'))
|
||||
if (!startNode)
|
||||
throw new Error('Start node not found')
|
||||
|
||||
const parallelList = [] as ParallelInfoItem[]
|
||||
const nextNodeHandles = [{node: startNode, handle: 'source'}]
|
||||
let hasAbnormalEdges = false
|
||||
|
||||
const traverse = (firstNodeHandle: NodeHandle) => {
|
||||
const nodeEdgesSet = {} as Record<string, Set<string>>
|
||||
const totalEdgesSet = new Set<string>()
|
||||
const nextHandles = [firstNodeHandle]
|
||||
const streamInfo = {} as Record<string, NodeStreamInfo>
|
||||
const parallelListItem = {
|
||||
parallelNodeId: '',
|
||||
depth: 0,
|
||||
} as ParallelInfoItem
|
||||
const nodeParallelInfoMap = {} as Record<string, NodeParallelInfo>
|
||||
nodeParallelInfoMap[firstNodeHandle.node.id] = {
|
||||
parallelNodeId: '',
|
||||
edgeHandleId: '',
|
||||
depth: 0,
|
||||
}
|
||||
|
||||
while (nextHandles.length) {
|
||||
const currentNodeHandle = nextHandles.shift()!
|
||||
const {node: currentNode, handle: currentHandle = 'source'} = currentNodeHandle
|
||||
const currentNodeHandleKey = currentNode.id
|
||||
const connectedEdges = edges.filter(edge => edge.source === currentNode.id && edge.sourceHandle === currentHandle)
|
||||
const connectedEdgesLength = connectedEdges.length
|
||||
const outgoers = nodes.filter(node => connectedEdges.some(edge => edge.target === node.id))
|
||||
const incomers = getIncomers(currentNode, nodes, edges)
|
||||
|
||||
if (!streamInfo[currentNodeHandleKey]) {
|
||||
streamInfo[currentNodeHandleKey] = {
|
||||
upstreamNodes: new Set<string>(),
|
||||
downstreamEdges: new Set<string>(),
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeEdgesSet[currentNodeHandleKey]?.size > 0 && incomers.length > 1) {
|
||||
const newSet = new Set<string>()
|
||||
for (const item of totalEdgesSet) {
|
||||
if (!streamInfo[currentNodeHandleKey].downstreamEdges.has(item))
|
||||
newSet.add(item)
|
||||
}
|
||||
if (isEqual(nodeEdgesSet[currentNodeHandleKey], newSet)) {
|
||||
parallelListItem.depth = nodeParallelInfoMap[currentNode.id].depth
|
||||
nextNodeHandles.push({node: currentNode, handle: currentHandle})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeParallelInfoMap[currentNode.id].depth > parallelListItem.depth)
|
||||
parallelListItem.depth = nodeParallelInfoMap[currentNode.id].depth
|
||||
|
||||
outgoers.forEach((outgoer) => {
|
||||
const outgoerConnectedEdges = getConnectedEdges([outgoer], edges).filter(edge => edge.source === outgoer.id)
|
||||
const sourceEdgesGroup = groupBy(outgoerConnectedEdges, 'sourceHandle')
|
||||
const incomers = getIncomers(outgoer, nodes, edges)
|
||||
|
||||
if (outgoers.length > 1 && incomers.length > 1)
|
||||
hasAbnormalEdges = true
|
||||
|
||||
Object.keys(sourceEdgesGroup).forEach((sourceHandle) => {
|
||||
nextHandles.push({node: outgoer, handle: sourceHandle})
|
||||
})
|
||||
if (!outgoerConnectedEdges.length)
|
||||
nextHandles.push({node: outgoer, handle: 'source'})
|
||||
|
||||
const outgoerKey = outgoer.id
|
||||
if (!nodeEdgesSet[outgoerKey])
|
||||
nodeEdgesSet[outgoerKey] = new Set<string>()
|
||||
|
||||
if (nodeEdgesSet[currentNodeHandleKey]) {
|
||||
for (const item of nodeEdgesSet[currentNodeHandleKey])
|
||||
nodeEdgesSet[outgoerKey].add(item)
|
||||
}
|
||||
|
||||
if (!streamInfo[outgoerKey]) {
|
||||
streamInfo[outgoerKey] = {
|
||||
upstreamNodes: new Set<string>(),
|
||||
downstreamEdges: new Set<string>(),
|
||||
}
|
||||
}
|
||||
|
||||
if (!nodeParallelInfoMap[outgoer.id]) {
|
||||
nodeParallelInfoMap[outgoer.id] = {
|
||||
...nodeParallelInfoMap[currentNode.id],
|
||||
}
|
||||
}
|
||||
|
||||
if (connectedEdgesLength > 1) {
|
||||
const edge = connectedEdges.find(edge => edge.target === outgoer.id)!
|
||||
nodeEdgesSet[outgoerKey].add(edge.id)
|
||||
totalEdgesSet.add(edge.id)
|
||||
|
||||
streamInfo[currentNodeHandleKey].downstreamEdges.add(edge.id)
|
||||
streamInfo[outgoerKey].upstreamNodes.add(currentNodeHandleKey)
|
||||
|
||||
for (const item of streamInfo[currentNodeHandleKey].upstreamNodes)
|
||||
streamInfo[item].downstreamEdges.add(edge.id)
|
||||
|
||||
if (!parallelListItem.parallelNodeId)
|
||||
parallelListItem.parallelNodeId = currentNode.id
|
||||
|
||||
const prevDepth = nodeParallelInfoMap[currentNode.id].depth + 1
|
||||
const currentDepth = nodeParallelInfoMap[outgoer.id].depth
|
||||
|
||||
nodeParallelInfoMap[outgoer.id].depth = Math.max(prevDepth, currentDepth)
|
||||
} else {
|
||||
for (const item of streamInfo[currentNodeHandleKey].upstreamNodes)
|
||||
streamInfo[outgoerKey].upstreamNodes.add(item)
|
||||
|
||||
nodeParallelInfoMap[outgoer.id].depth = nodeParallelInfoMap[currentNode.id].depth
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
parallelList.push(parallelListItem)
|
||||
}
|
||||
|
||||
while (nextNodeHandles.length) {
|
||||
const nodeHandle = nextNodeHandles.shift()!
|
||||
traverse(nodeHandle)
|
||||
}
|
||||
|
||||
return {
|
||||
parallelList,
|
||||
hasAbnormalEdges,
|
||||
}
|
||||
}
|
||||
|
||||
export const checkAddConnection: (connection: Connection, nodes: Node[], edges: Edge[]) => void = (connection, nodes, edges) => {
|
||||
let sourceNode = getNodeById(connection.source, nodes)
|
||||
if (!sourceNode) {
|
||||
throw sourceNodeNotFoundError()
|
||||
}
|
||||
let targetNode = getNodeById(connection.target, nodes)
|
||||
if (!targetNode) {
|
||||
throw targetNodeNotFoundError()
|
||||
}
|
||||
// 禁止短路整个流程
|
||||
if (isEqual('start-node', sourceNode.type) && isEqual('end-node', targetNode.type)) {
|
||||
throw startNodeToEndNodeError()
|
||||
}
|
||||
|
||||
// 禁止流程出现环，必须是有向无环图
|
||||
if (isEqual(sourceNode.id, targetNode.id)) {
|
||||
throw nodeToSelfError()
|
||||
} else if (hasCycle(sourceNode, targetNode, nodes, edges)) {
|
||||
throw hasCycleError()
|
||||
}
|
||||
|
||||
let newEdges = [...clone(edges), {...connection, id: uuid()}]
|
||||
let {hasAbnormalEdges} = getParallelInfo(nodes, newEdges)
|
||||
if (hasAbnormalEdges) {
|
||||
throw hasRedundantEdgeError()
|
||||
}
|
||||
}
|
||||
|
||||
export const atLeastOneStartNodeError = () => new CheckError(300, '至少存在1个开始节点')
|
||||
export const atLeastOneEndNodeError = () => new CheckError(301, '至少存在1个结束节点')
|
||||
|
||||
// @ts-ignore
|
||||
export const checkSave: (nodes: Node[], edges: Edge[], data: any) => void = (nodes, edges, data) => {
|
||||
if (nodes.filter(n => isEqual('start-node', n.type)).length < 1) {
|
||||
throw atLeastOneStartNodeError()
|
||||
}
|
||||
if (nodes.filter(n => isEqual('end-node', n.type)).length < 1) {
|
||||
throw atLeastOneEndNodeError()
|
||||
}
|
||||
}
|
||||
311
service-web/client/src/components/flow/FlowEditor.tsx
Normal file
311
service-web/client/src/components/flow/FlowEditor.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
|
||||
import {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
Controls,
|
||||
type Edge,
|
||||
MiniMap,
|
||||
type Node,
|
||||
type NodeProps,
|
||||
ReactFlow
|
||||
} from '@xyflow/react'
|
||||
import {useMount} from 'ahooks'
|
||||
import type {Schema} from 'amis'
|
||||
import {Button, Drawer, Dropdown, message, Space} from 'antd'
|
||||
import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
|
||||
import {type JSX, type MemoExoticComponent, useState} from 'react'
|
||||
import styled from 'styled-components'
|
||||
import '@xyflow/react/dist/style.css'
|
||||
import {amisRender, commonInfo, horizontalFormOptions} from '../../util/amis.tsx'
|
||||
import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
|
||||
import CodeNode from './node/CodeNode.tsx'
|
||||
import EndNode from './node/EndNode.tsx'
|
||||
import KnowledgeNode from './node/KnowledgeNode.tsx'
|
||||
import LlmNode from './node/LlmNode.tsx'
|
||||
import StartNode from './node/StartNode.tsx'
|
||||
import SwitchNode from './node/SwitchNode.tsx'
|
||||
import {useDataStore} from './store/DataStore.ts'
|
||||
import {useFlowStore} from './store/FlowStore.ts'
|
||||
|
||||
const FlowableDiv = styled.div`
|
||||
height: 100%;
|
||||
|
||||
.react-flow__node.selectable {
|
||||
&:focus {
|
||||
box-shadow: 0 0 20px 1px #e8e8e8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.react-flow__handle.connectionindicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8e8e8;
|
||||
border: 1px solid #c6c6c6;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.node-card {
|
||||
cursor: default;
|
||||
|
||||
.card-container {
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export type GraphData = { nodes: Node[], edges: Edge[], data: any }
|
||||
|
||||
export type FlowEditorProps = {
|
||||
graphData: GraphData,
|
||||
onGraphDataChange: (graphData: GraphData) => void,
|
||||
}
|
||||
|
||||
function FlowEditor(props: FlowEditorProps) {
|
||||
const [messageApi, contextHolder] = message.useMessage()
|
||||
const [nodeDef] = useState<{
|
||||
key: string,
|
||||
name: string,
|
||||
component: MemoExoticComponent<(props: NodeProps) => JSX.Element>
|
||||
}[]>([
|
||||
{
|
||||
key: 'start-node',
|
||||
name: '开始',
|
||||
component: StartNode,
|
||||
},
|
||||
{
|
||||
key: 'end-node',
|
||||
name: '结束',
|
||||
component: EndNode,
|
||||
},
|
||||
{
|
||||
key: 'llm-node',
|
||||
name: '大模型',
|
||||
component: LlmNode,
|
||||
},
|
||||
{
|
||||
key: 'knowledge-node',
|
||||
name: '知识库',
|
||||
component: KnowledgeNode,
|
||||
},
|
||||
{
|
||||
key: 'code-node',
|
||||
name: '代码执行',
|
||||
component: CodeNode,
|
||||
},
|
||||
{
|
||||
key: 'switch-node',
|
||||
name: '条件分支',
|
||||
component: SwitchNode,
|
||||
},
|
||||
])
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const {data, setData, getDataById, setDataById} = useDataStore()
|
||||
const {
|
||||
nodes,
|
||||
addNode,
|
||||
removeNode,
|
||||
setNodes,
|
||||
onNodesChange,
|
||||
edges,
|
||||
setEdges,
|
||||
onEdgesChange,
|
||||
onConnect,
|
||||
} = useFlowStore()
|
||||
|
||||
const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
|
||||
const editNode = (id: string, columnSchema?: Schema[]) => {
|
||||
if (!isNil(columnSchema)) {
|
||||
setCurrentNodeForm(
|
||||
amisRender(
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
debug: commonInfo.debug,
|
||||
type: 'form',
|
||||
...horizontalFormOptions(),
|
||||
wrapWithPanel: false,
|
||||
onEvent: {
|
||||
submitSucc: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'custom',
|
||||
// @ts-ignore
|
||||
script: (context, action, event) => {
|
||||
setDataById(id, context.props.data)
|
||||
setOpen(false)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
body: [
|
||||
...(columnSchema ?? []),
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
className: 'space-x-2 text-right',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
label: '取消',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'custom',
|
||||
// @ts-ignore
|
||||
script: (context, action, event) => {
|
||||
setOpen(false)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'submit',
|
||||
label: '保存',
|
||||
level: 'primary',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
getDataById(id),
|
||||
),
|
||||
)
|
||||
setOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 用于透传node操作到主流程
|
||||
const initialNodeHandlers = {
|
||||
getDataById,
|
||||
setDataById,
|
||||
removeNode,
|
||||
editNode,
|
||||
}
|
||||
|
||||
useMount(() => {
|
||||
// language=JSON
|
||||
// let initialData = JSON.parse('{"nodes":[{"id":"TCxPixrdkI","type":"start-node","position":{"x":-256,"y":109.5},"data":{},"measured":{"width":256,"height":83},"selected":false,"dragging":false},{"id":"tGs78_ietp","type":"llm-node","position":{"x":108,"y":-2.5},"data":{},"measured":{"width":256,"height":105},"selected":false,"dragging":false},{"id":"OeZdaU7LpY","type":"llm-node","position":{"x":111,"y":196},"data":{},"measured":{"width":256,"height":105},"selected":false,"dragging":false},{"id":"LjfoCYZo-E","type":"knowledge-node","position":{"x":497.62196259607214,"y":-10.792497317791003},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"sQM_22GYB5","type":"end-node","position":{"x":874.3164534765615,"y":151.70316541496913},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"KpMH_xc3ZZ","type":"llm-node","position":{"x":529.6286840434341,"y":150.4721376669937},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"pOrR6EMVbe","type":"switch-node","position":{"x":110.33793030183864,"y":373.9551529987239},"data":{},"measured":{"width":256,"height":157},"selected":false,"dragging":false}],"edges":[{"source":"TCxPixrdkI","sourceHandle":"source","target":"tGs78_ietp","targetHandle":"target","id":"xy-edge__TCxPixrdkIsource-tGs78_ietptarget"},{"source":"TCxPixrdkI","sourceHandle":"source","target":"OeZdaU7LpY","targetHandle":"target","id":"xy-edge__TCxPixrdkIsource-OeZdaU7LpYtarget"},{"source":"tGs78_ietp","sourceHandle":"source","target":"LjfoCYZo-E","targetHandle":"target","id":"xy-edge__tGs78_ietpsource-LjfoCYZo-Etarget"},{"source":"LjfoCYZo-E","sourceHandle":"source","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__LjfoCYZo-Esource-KpMH_xc3ZZtarget"},{"source":"OeZdaU7LpY","sourceHandle":"source","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__OeZdaU7LpYsource-KpMH_xc3ZZtarget"},{"source":"KpMH_xc3ZZ","sourceHandle":"source","target":"sQM_22GYB5","targetHandle":"target","id":"xy-edge__KpMH_xc3ZZsource-sQM_22GYB5target"},{"source":"TCxPixrdkI","sourceHandle":"source","target":"pOrR6EMVbe","id":"xy-edge__TCxPixrdkIsource-pOrR6EMVbe"},{"source":"pOrR6EMVbe","sourceHandle":"3","target":"sQM_22GYB5","targetHandle":"target","id":"xy-edge__pOrR6EMVbe3-sQM_22GYB5target"},{"source":"pOrR6EMVbe","sourceHandle":"1","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__pOrR6EMVbe1-KpMH_xc3ZZtarget"}],"data":{"tGs78_ietp":{"model":"qwen3","outputs":{"text":{"type":"string"}},"systemPrompt":"你是个聪明人"},"OeZdaU7LpY":{"model":"qwen3","outputs":{"text":{"type":"string"}},"systemPrompt":"你也是个聪明人"}}}')
|
||||
// let initialData: any = {}
|
||||
let initialNodes = props.graphData?.nodes ?? []
|
||||
let initialEdges = props.graphData?.edges ?? []
|
||||
|
||||
let initialNodeData = props.graphData?.data ?? {}
|
||||
setData(initialNodeData)
|
||||
|
||||
for (let node of initialNodes) {
|
||||
node.data = initialNodeHandlers
|
||||
}
|
||||
setNodes(initialNodes)
|
||||
setEdges(initialEdges)
|
||||
})
|
||||
|
||||
return (
|
||||
<FlowableDiv>
|
||||
{contextHolder}
|
||||
<Space className="toolbar">
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: nodeDef.map(def => ({key: def.key, label: def.name})),
|
||||
onClick: ({key}) => {
|
||||
try {
|
||||
if (commonInfo.debug) {
|
||||
console.info('Add', key, JSON.stringify({nodes, edges, data}))
|
||||
}
|
||||
checkAddNode(key, nodes, edges)
|
||||
addNode({
|
||||
id: randomId(10),
|
||||
type: key,
|
||||
position: {x: 100, y: 100},
|
||||
data: initialNodeHandlers,
|
||||
})
|
||||
} catch (e) {
|
||||
// @ts-ignore
|
||||
messageApi.error(e.toString())
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="default">
|
||||
<PlusCircleFilled/>
|
||||
新增节点
|
||||
</Button>
|
||||
</Dropdown>
|
||||
<Button type="primary" onClick={() => {
|
||||
try {
|
||||
if (commonInfo.debug) {
|
||||
console.info('Save', JSON.stringify({nodes, edges, data}))
|
||||
}
|
||||
checkSave(nodes, edges, data)
|
||||
props.onGraphDataChange({nodes, edges, data})
|
||||
} catch (e) {
|
||||
// @ts-ignore
|
||||
messageApi.error(e.toString())
|
||||
}
|
||||
}}>
|
||||
<SaveFilled/>
|
||||
保存
|
||||
</Button>
|
||||
</Space>
|
||||
<Drawer
|
||||
title="节点编辑"
|
||||
open={open}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
destroyOnHidden
|
||||
size="large"
|
||||
>
|
||||
{currentNodeForm}
|
||||
</Drawer>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={(connection) => {
|
||||
try {
|
||||
if (commonInfo.debug) {
|
||||
console.info('Connection', JSON.stringify(connection), JSON.stringify({nodes, edges, data}))
|
||||
}
|
||||
checkAddConnection(connection, nodes, edges)
|
||||
onConnect(connection)
|
||||
} catch (e) {
|
||||
// @ts-ignore
|
||||
messageApi.error(e.toString())
|
||||
}
|
||||
}}
|
||||
// @ts-ignore
|
||||
nodeTypes={arrToMap(
|
||||
nodeDef.map(def => def.key),
|
||||
key => find(nodeDef, def => isEqual(key, def.key))!.component)
|
||||
}
|
||||
fitView
|
||||
>
|
||||
<Controls/>
|
||||
<MiniMap/>
|
||||
<Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
|
||||
</ReactFlow>
|
||||
</FlowableDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default FlowEditor
|
||||
199
service-web/client/src/components/flow/node/AmisNode.tsx
Normal file
199
service-web/client/src/components/flow/node/AmisNode.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import {DeleteFilled, EditFilled} from '@ant-design/icons'
|
||||
import {Handle, type HandleProps, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
|
||||
import type {Schema} from 'amis'
|
||||
import {Card, Dropdown} from 'antd'
|
||||
import {isEmpty, isEqual, isNil} from 'licia'
|
||||
import {type JSX} from 'react'
|
||||
import {horizontalFormOptions} from '../../../util/amis.tsx'
|
||||
|
||||
export type AmisNodeType = 'normal' | 'start' | 'end'
|
||||
|
||||
export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
|
||||
return [
|
||||
{
|
||||
type: 'input-kvs',
|
||||
name: 'inputs',
|
||||
label: '输入变量',
|
||||
value: preload,
|
||||
addButtonText: '新增输入',
|
||||
draggable: false,
|
||||
keyItem: {
|
||||
...horizontalFormOptions(),
|
||||
label: '参数名称',
|
||||
},
|
||||
required: required,
|
||||
valueItems: [
|
||||
{
|
||||
...horizontalFormOptions(),
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '变量',
|
||||
required: true,
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
|
||||
return [
|
||||
{
|
||||
disabled: !editable,
|
||||
type: 'input-kvs',
|
||||
name: 'outputs',
|
||||
label: '输出变量',
|
||||
value: preload,
|
||||
addButtonText: '新增输出',
|
||||
draggable: false,
|
||||
keyItem: {
|
||||
...horizontalFormOptions(),
|
||||
label: '参数名称',
|
||||
},
|
||||
required: required,
|
||||
valueItems: [
|
||||
{
|
||||
...horizontalFormOptions(),
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '参数',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: [
|
||||
{
|
||||
label: '文本',
|
||||
value: 'string',
|
||||
},
|
||||
{
|
||||
label: '数字',
|
||||
value: 'number',
|
||||
},
|
||||
{
|
||||
label: '文本数组',
|
||||
value: 'array-string',
|
||||
},
|
||||
{
|
||||
label: '对象数组',
|
||||
value: 'array-object',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
export const LimitHandler = (props: HandleProps & { limit: number }) => {
|
||||
const connections = useNodeConnections({
|
||||
handleType: props.type,
|
||||
})
|
||||
return (
|
||||
<Handle
|
||||
{...props}
|
||||
isConnectable={connections.length < props.limit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type AmisNodeProps = {
|
||||
nodeProps: NodeProps
|
||||
type: AmisNodeType
|
||||
defaultNodeName: String
|
||||
defaultNodeDescription?: String
|
||||
extraNodeDescription?: (nodeData: any) => JSX.Element
|
||||
handlers?: (nodeData: any) => JSX.Element
|
||||
columnSchema?: Schema[]
|
||||
}
|
||||
|
||||
const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
|
||||
nodeProps,
|
||||
type,
|
||||
defaultNodeName,
|
||||
defaultNodeDescription,
|
||||
extraNodeDescription,
|
||||
handlers,
|
||||
columnSchema,
|
||||
}) => {
|
||||
const {id, data} = nodeProps
|
||||
const {getDataById, removeNode, editNode} = data
|
||||
// @ts-ignore
|
||||
const nodeData = getDataById(id)
|
||||
const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
|
||||
const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
|
||||
return (
|
||||
<div className="w-64">
|
||||
<Dropdown
|
||||
className="card-container"
|
||||
trigger={['contextMenu']}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'edit',
|
||||
label: '编辑',
|
||||
icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
|
||||
},
|
||||
{
|
||||
key: 'remove',
|
||||
label: '删除',
|
||||
icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
|
||||
},
|
||||
],
|
||||
onClick: menu => {
|
||||
switch (menu.key) {
|
||||
case 'edit':
|
||||
// @ts-ignore
|
||||
editNode(
|
||||
id,
|
||||
[
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'node.name',
|
||||
label: '节点名称',
|
||||
placeholder: nodeName,
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'node.description',
|
||||
label: '节点描述',
|
||||
placeholder: nodeDescription,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...(columnSchema ?? []),
|
||||
],
|
||||
)
|
||||
break
|
||||
case 'remove':
|
||||
// @ts-ignore
|
||||
removeNode(id)
|
||||
break
|
||||
}
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
className="node-card"
|
||||
title={nodeName}
|
||||
extra={<span className="text-gray-300 text-xs">{id}</span>}
|
||||
size="small"
|
||||
>
|
||||
<div className="card-description p-2 text-secondary text-sm">
|
||||
{nodeDescription}
|
||||
{extraNodeDescription?.(nodeData)}
|
||||
</div>
|
||||
</Card>
|
||||
</Dropdown>
|
||||
{isNil(handlers)
|
||||
? <>
|
||||
{isEqual(type, 'start') || isEqual(type, 'normal')
|
||||
? <Handle type="source" position={Position.Right} id="source"/> : undefined}
|
||||
{isEqual(type, 'end') || isEqual(type, 'normal')
|
||||
? <Handle type="target" position={Position.Left} id="target"/> : undefined}
|
||||
</>
|
||||
: handlers?.(nodeData)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AmisNode
|
||||
52
service-web/client/src/components/flow/node/CodeNode.tsx
Normal file
52
service-web/client/src/components/flow/node/CodeNode.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import type {NodeProps} from '@xyflow/react'
|
||||
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||
import React from 'react'
|
||||
|
||||
const CodeNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'normal',
|
||||
defaultNodeName: '代码执行',
|
||||
defaultNodeDescription: '执行自定义的处理代码',
|
||||
columnSchema: [
|
||||
...inputsFormColumns(),
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '代码类型',
|
||||
required: true,
|
||||
options: [
|
||||
{
|
||||
value: 'javascript',
|
||||
label: 'JavaScript',
|
||||
},
|
||||
{
|
||||
value: 'python',
|
||||
label: 'Python',
|
||||
},
|
||||
{
|
||||
value: 'lua',
|
||||
label: 'Lua',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'editor',
|
||||
required: true,
|
||||
label: '代码内容',
|
||||
name: 'content',
|
||||
language: '${type}',
|
||||
options: {
|
||||
wordWrap: 'bounded',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...outputsFormColumns(true, true, {result: {type: 'string'}}),
|
||||
],
|
||||
})
|
||||
|
||||
export default React.memo(CodeNode)
|
||||
13
service-web/client/src/components/flow/node/EndNode.tsx
Normal file
13
service-web/client/src/components/flow/node/EndNode.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import type {NodeProps} from '@xyflow/react'
|
||||
import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
|
||||
import React from 'react'
|
||||
|
||||
const EndNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'end',
|
||||
defaultNodeName: '结束节点',
|
||||
defaultNodeDescription: '定义输出变量',
|
||||
columnSchema: outputsFormColumns(true),
|
||||
})
|
||||
|
||||
export default React.memo(EndNode)
|
||||
@@ -0,0 +1,66 @@
|
||||
import type {NodeProps} from '@xyflow/react'
|
||||
import {commonInfo} from '../../../util/amis.tsx'
|
||||
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||
import React from 'react'
|
||||
|
||||
const KnowledgeNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'normal',
|
||||
defaultNodeName: '知识库',
|
||||
defaultNodeDescription: '查询知识库获取外部知识',
|
||||
columnSchema: [
|
||||
...inputsFormColumns(),
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'knowledgeId',
|
||||
label: '知识库',
|
||||
required: true,
|
||||
options: [],
|
||||
source: {
|
||||
method: 'get',
|
||||
url: `${commonInfo.baseAiUrl}/knowledge/list`,
|
||||
// @ts-ignore
|
||||
adaptor: (payload, response, api, context) => {
|
||||
return {
|
||||
...payload,
|
||||
data: {
|
||||
items: payload.data.items.map((item: any) => ({value: item['id'], label: item['name']})),
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'query',
|
||||
label: '查询文本',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'input-range',
|
||||
name: 'count',
|
||||
label: '返回数量',
|
||||
required: true,
|
||||
value: 3,
|
||||
max: 10,
|
||||
},
|
||||
{
|
||||
type: 'input-range',
|
||||
name: 'score',
|
||||
label: '匹配阀值',
|
||||
required: true,
|
||||
value: 0.6,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
|
||||
],
|
||||
})
|
||||
|
||||
export default React.memo(KnowledgeNode)
|
||||
51
service-web/client/src/components/flow/node/LlmNode.tsx
Normal file
51
service-web/client/src/components/flow/node/LlmNode.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import type {NodeProps} from '@xyflow/react'
|
||||
import {Tag} from 'antd'
|
||||
import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
|
||||
import React from 'react'
|
||||
|
||||
const modelMap: Record<string, string> = {
|
||||
qwen3: 'Qwen3',
|
||||
deepseek: 'Deepseek',
|
||||
}
|
||||
|
||||
const LlmNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'normal',
|
||||
defaultNodeName: '大模型',
|
||||
defaultNodeDescription: '使用大模型对话',
|
||||
extraNodeDescription: nodeData => {
|
||||
const model = nodeData?.model as string | undefined
|
||||
return model
|
||||
? <div className="mt-2 flex justify-between">
|
||||
<span>大模型</span>
|
||||
<Tag className="m-0" color="blue">{modelMap[model]}</Tag>
|
||||
</div>
|
||||
: <></>
|
||||
},
|
||||
columnSchema: [
|
||||
...inputsFormColumns(),
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'model',
|
||||
label: '大模型',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: Object.keys(modelMap).map(key => ({label: modelMap[key], value: key})),
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'systemPrompt',
|
||||
label: '系统提示词',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...outputsFormColumns(false, true, {text: {type: 'string'}}),
|
||||
],
|
||||
})
|
||||
|
||||
export default React.memo(LlmNode)
|
||||
68
service-web/client/src/components/flow/node/StartNode.tsx
Normal file
68
service-web/client/src/components/flow/node/StartNode.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import type {NodeProps} from '@xyflow/react'
|
||||
import {Tag} from 'antd'
|
||||
import {each} from 'licia'
|
||||
import React, {type JSX} from 'react'
|
||||
import {horizontalFormOptions} from '../../../util/amis.tsx'
|
||||
import AmisNode from './AmisNode.tsx'
|
||||
|
||||
const typeMap: Record<string, string> = {
|
||||
text: '文本',
|
||||
number: '数字',
|
||||
files: '文件',
|
||||
}
|
||||
|
||||
const StartNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'start',
|
||||
defaultNodeName: '开始节点',
|
||||
defaultNodeDescription: '定义输入变量',
|
||||
extraNodeDescription: nodeData => {
|
||||
const variables: JSX.Element[] = []
|
||||
const inputs = (nodeData?.inputs ?? {}) as Record<string, { type: string, description: string }>
|
||||
each(inputs, (value, key) => {
|
||||
variables.push(
|
||||
<div className="mt-1 flex justify-between" key={key}>
|
||||
<span>{key}</span>
|
||||
<Tag className="m-0" color="blue">{typeMap[value.type]}</Tag>
|
||||
</div>,
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className="mt-2">
|
||||
{...variables}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
columnSchema: [
|
||||
{
|
||||
type: 'input-kvs',
|
||||
name: 'inputs',
|
||||
label: '输入变量',
|
||||
addButtonText: '新增入参',
|
||||
draggable: false,
|
||||
keyItem: {
|
||||
label: '参数名称',
|
||||
...horizontalFormOptions(),
|
||||
},
|
||||
valueItems: [
|
||||
{
|
||||
...horizontalFormOptions(),
|
||||
type: 'input-text',
|
||||
name: 'description',
|
||||
label: '参数描述',
|
||||
},
|
||||
{
|
||||
...horizontalFormOptions(),
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '参数类型',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default React.memo(StartNode)
|
||||
55
service-web/client/src/components/flow/node/SwitchNode.tsx
Normal file
55
service-web/client/src/components/flow/node/SwitchNode.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import {Handle, type NodeProps, Position} from '@xyflow/react'
|
||||
import {Tag} from 'antd'
|
||||
import React from 'react'
|
||||
import AmisNode from './AmisNode.tsx'
|
||||
|
||||
const cases = [
|
||||
{
|
||||
index: 1,
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
},
|
||||
]
|
||||
|
||||
const SwitchNode = (props: NodeProps) => AmisNode({
|
||||
nodeProps: props,
|
||||
type: 'normal',
|
||||
defaultNodeName: '分支节点',
|
||||
defaultNodeDescription: '根据不同的情况前往不同的分支',
|
||||
columnSchema: [],
|
||||
// @ts-ignore
|
||||
extraNodeDescription: nodeData => {
|
||||
return (
|
||||
<div className="mt-2">
|
||||
{cases.map(item => (
|
||||
<div key={item.index} className="mt-1">
|
||||
<Tag className="m-0" color="blue">分支 {item.index}</Tag>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
// @ts-ignore
|
||||
handlers: nodeData => {
|
||||
return (
|
||||
<>
|
||||
<Handle type="target" position={Position.Left}/>
|
||||
{cases.map((item, index) => (
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
key={item.index}
|
||||
id={`${item.index}`}
|
||||
style={{top: 85 + (25 * index)}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(SwitchNode)
|
||||
23
service-web/client/src/components/flow/store/DataStore.ts
Normal file
23
service-web/client/src/components/flow/store/DataStore.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import {create} from 'zustand/react'
|
||||
|
||||
export const useDataStore = create<{
|
||||
data: Record<string, any>,
|
||||
getData: () => Record<string, any>,
|
||||
setData: (data: Record<string, any>) => void,
|
||||
getDataById: (id: string) => any,
|
||||
setDataById: (id: string, data: any) => void,
|
||||
}>((set, get) => ({
|
||||
data: {},
|
||||
getData: () => get().data,
|
||||
setData: (data) => set({
|
||||
data: data
|
||||
}),
|
||||
getDataById: id => get().data[id],
|
||||
setDataById: (id, data) => {
|
||||
let updateData = get().data
|
||||
updateData[id] = data
|
||||
set({
|
||||
data: updateData,
|
||||
})
|
||||
},
|
||||
}))
|
||||
56
service-web/client/src/components/flow/store/FlowStore.ts
Normal file
56
service-web/client/src/components/flow/store/FlowStore.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import {
|
||||
addEdge,
|
||||
applyEdgeChanges,
|
||||
applyNodeChanges,
|
||||
type Edge,
|
||||
type Node,
|
||||
type OnConnect,
|
||||
type OnEdgesChange,
|
||||
type OnNodesChange,
|
||||
} from '@xyflow/react'
|
||||
import {filter, find, isEqual} from 'licia'
|
||||
import {create} from 'zustand/react'
|
||||
|
||||
export const useFlowStore = create<{
|
||||
nodes: Node[],
|
||||
onNodesChange: OnNodesChange,
|
||||
getNodeById: (id: string) => Node | undefined,
|
||||
addNode: (node: Node) => void,
|
||||
removeNode: (id: string) => void,
|
||||
setNodes: (nodes: Node[]) => void,
|
||||
|
||||
edges: Edge[],
|
||||
onEdgesChange: OnEdgesChange,
|
||||
setEdges: (edges: Edge[]) => void,
|
||||
|
||||
onConnect: OnConnect,
|
||||
}>((set, get) => ({
|
||||
nodes: [],
|
||||
onNodesChange: changes => {
|
||||
set({
|
||||
nodes: applyNodeChanges(changes, get().nodes),
|
||||
})
|
||||
},
|
||||
getNodeById: (id: string) => find(get().nodes, node => isEqual(node.id, id)),
|
||||
addNode: node => set({nodes: get().nodes.concat(node)}),
|
||||
removeNode: id => {
|
||||
set({
|
||||
nodes: filter(get().nodes, node => !isEqual(node.id, id)),
|
||||
})
|
||||
},
|
||||
setNodes: nodes => set({nodes}),
|
||||
|
||||
edges: [],
|
||||
onEdgesChange: changes => {
|
||||
set({
|
||||
edges: applyEdgeChanges(changes, get().edges),
|
||||
})
|
||||
},
|
||||
setEdges: edges => set({edges}),
|
||||
|
||||
onConnect: connection => {
|
||||
set({
|
||||
edges: addEdge(connection, get().edges),
|
||||
})
|
||||
},
|
||||
}))
|
||||
Reference in New Issue
Block a user