wlw/ai-agent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add WorkflowLineAddButton and WorkflowLineNodePanel components for enhanced workflow editing

Browse Source
This commit is contained in:
mlogclub
2026-06-28 20:22:18 +08:00
parent 47660c9f1d
commit eaffca5bad
5 changed files with 203 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx
+15
View File
@@ -8,6 +8,8 @@ import {
type WorkflowNodeEntity,
type WorkflowJSON,
} from "@flowgram.ai/free-layout-editor"
import { createFreeLinesPlugin } from "@flowgram.ai/free-lines-plugin"
import { createFreeNodePanelPlugin } from "@flowgram.ai/free-node-panel-plugin"
import { createFreeSnapPlugin } from "@flowgram.ai/free-snap-plugin"
import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin"
@@ -15,6 +17,8 @@ import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
import { FlowgramNodeRenderer } from "./flowgram-node-renderer"
import { buildFlowgramNodeRegistries } from "./flowgram-node-registries"
import { WorkflowLineAddButton } from "./workflow-line-add-button"
import { WorkflowLineNodePanel } from "./workflow-line-node-panel"
import {
normalizeConditionPortsForFlowgram,
syncConditionBranchTargetsFromEdges,
@@ -84,6 +88,17 @@ export function useFlowgramEditorProps({
}
},
plugins: () => [
createFreeLinesPlugin({
renderInsideLine: WorkflowLineAddButton,
}),
createFreeNodePanelPlugin({
renderer: (props) => (
<WorkflowLineNodePanel
{...props}
nodeSpecs={nodeSpecs}
/>
),
}),
createMinimapPlugin({
disableLayer: true,
}),
web/app/dashboard/ai-workflows/_components/workflow-line-add-button.tsx
+68
View File
@@ -0,0 +1,68 @@
"use client"
import { useCallback } from "react"
import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
import { WorkflowNodePanelService } from "@flowgram.ai/free-node-panel-plugin"
import { PlusIcon } from "lucide-react"
import { usePlayground, useService } from "@flowgram.ai/free-layout-editor"
export function WorkflowLineAddButton({
line,
selected,
hovered,
color,
}: LineRenderProps) {
const playground = usePlayground()
const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService)
const { fromPort, toPort } = line
const visible = !line.disposed && !playground.config.readonly && (selected || hovered)
const openNodePanel = useCallback(() => {
if (!fromPort || !toPort) {
return
}
void nodePanelService.call({
panelPosition: {
x: line.center.labelX,
y: line.center.labelY,
},
fromPort,
toPort,
panelProps: {
fromPort,
},
enableBuildLine: true,
enableAutoOffset: true,
afterAddNode: (node) => {
if (node && !line.disposed) {
line.dispose()
}
},
})
}, [fromPort, line, nodePanelService, toPort])
if (!visible) {
return null
}
return (
<button
type="button"
className="absolute flex size-6 items-center justify-center rounded-full border border-white bg-white text-[#2575FC] shadow-sm transition-transform hover:scale-105"
style={{
transform: `translate(-50%, -50%) translate(${line.center.labelX}px, ${line.center.labelY}px)`,
color,
pointerEvents: "all",
}}
aria-label="添加节点"
data-line-id={line.id}
onClick={(event) => {
event.stopPropagation()
openNodePanel()
}}
>
<PlusIcon className="size-3.5" strokeWidth={2.4} />
</button>
)
}
web/app/dashboard/ai-workflows/_components/workflow-line-node-panel.tsx
+94
View File
@@ -0,0 +1,94 @@
"use client"
import { useEffect, useMemo, useRef } from "react"
import type { NodePanelRenderProps } from "@flowgram.ai/free-node-panel-plugin"
import { useClientContext } from "@flowgram.ai/free-layout-editor"
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
import { WorkflowNodeIcon } from "./workflow-node-icon"
import { createWorkflowNodeFromSpec } from "./workflow-utils"
export function WorkflowLineNodePanel({
position,
onSelect,
onClose,
nodeSpecs,
}: NodePanelRenderProps & {
nodeSpecs: AIWorkflowNodeSpec[]
}) {
const context = useClientContext()
const panelRef = useRef<HTMLDivElement>(null)
const insertableNodeSpecs = useMemo(
() => nodeSpecs.filter((spec) => spec.type !== "start" && spec.type !== "end"),
[nodeSpecs]
)
useEffect(() => {
const closeOnPointerDown = (event: PointerEvent) => {
const target = event.target
if (target instanceof Node && panelRef.current?.contains(target)) {
return
}
onClose()
}
const closeOnEscape = (event: KeyboardEvent) => {
if (event.key === "Escape") {
onClose()
}
}
window.addEventListener("pointerdown", closeOnPointerDown)
window.addEventListener("keydown", closeOnEscape)
return () => {
window.removeEventListener("pointerdown", closeOnPointerDown)
window.removeEventListener("keydown", closeOnEscape)
}
}, [onClose])
return (
<div
ref={panelRef}
className="absolute z-[9999] w-60 overflow-hidden rounded-lg border border-slate-200 bg-white py-1.5 shadow-[0_14px_35px_rgba(15,23,42,0.16)]"
style={{
left: position.x + 16,
top: position.y - 8,
}}
onPointerDown={(event) => event.stopPropagation()}
>
<div className="border-b border-slate-100 px-3 pb-2 pt-1 text-xs font-medium text-slate-500">
插入节点
</div>
<div className="max-h-80 overflow-y-auto p-1.5">
{insertableNodeSpecs.map((spec) => (
<button
key={spec.type}
type="button"
className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-slate-50"
onClick={(event) => {
event.stopPropagation()
const definition = context.document.toJSON() as AIWorkflowDefinition
const nodeJSON = createWorkflowNodeFromSpec(spec, definition.nodes ?? [], position)
onSelect({
nodeType: spec.type,
nodeJSON,
selectEvent: event,
})
}}
>
<WorkflowNodeIcon icon={spec.icon} size="sm" className="mt-0.5" />
<span className="min-w-0">
<span className="block truncate font-medium text-slate-900">
{spec.title || spec.type}
</span>
{spec.description ? (
<span className="line-clamp-2 text-xs text-slate-500">
{spec.description}
</span>
) : null}
</span>
</button>
))}
</div>
</div>
)
}
web/package.json
+2
View File
@@ -17,6 +17,8 @@
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@flowgram.ai/free-layout-editor": "1.0.11",
"@flowgram.ai/free-lines-plugin": "1.0.11",
"@flowgram.ai/free-node-panel-plugin": "1.0.11",
"@flowgram.ai/free-snap-plugin": "1.0.11",
"@flowgram.ai/minimap-plugin": "1.0.11",
"@hookform/resolvers": "^5.2.2",
web/pnpm-lock.yaml
Generated
+24
View File
@@ -26,6 +26,12 @@ importers:
'@flowgram.ai/free-layout-editor':
specifier: 1.0.11
version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
'@flowgram.ai/free-lines-plugin':
specifier: 1.0.11
version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
'@flowgram.ai/free-node-panel-plugin':
specifier: 1.0.11
version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/free-snap-plugin':
specifier: 1.0.11
version: 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
@@ -619,6 +625,12 @@ packages:
react-dom: '>=16.8'
styled-components: '>=5'
'@flowgram.ai/free-node-panel-plugin@1.0.11':
resolution: {integrity: sha512-1XqzHZhimJLK6G3zUhHUKBHgLlnWNRmWYmpCci0e9yKzOBduS6xZTfMSgc7bl5TeaG9u++nooTqirx6xP5kwXQ==}
peerDependencies:
react: '>=16.8'
react-dom: '>=16.8'
'@flowgram.ai/free-snap-plugin@1.0.11':
resolution: {integrity: sha512-6YPtxwIYkUgj2BBBQgJvIPeSgDZQJpHSDl9r6FyJyalAdQKHeKniCBAR8b3tgaQf/oKR1v/8zt01h+IzMFhodQ==}
peerDependencies:
@@ -5260,6 +5272,18 @@ snapshots:
reflect-metadata: 0.2.2
styled-components: 6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/free-node-panel-plugin@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
dependencies:
'@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/document': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/free-history-plugin': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/free-layout-core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
'@flowgram.ai/utils': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
inversify: 6.2.2(reflect-metadata@0.2.2)
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
reflect-metadata: 0.2.2
'@flowgram.ai/free-snap-plugin@1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(styled-components@6.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3))':
dependencies:
'@flowgram.ai/core': 1.0.11(react-dom@19.2.3(react@19.2.3))(react@19.2.3)