feat: add WorkflowLineAddButton and WorkflowLineNodePanel components for enhanced workflow editing

web/app/dashboard/ai-workflows/_components/flowgram-editor-provider.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)