feat: add AI workflow editor

2026-06-22 00:26:16 +08:00
parent df7b199c18
commit 14f50e064f
19 changed files with 1588 additions and 1 deletions
@@ -0,0 +1,87 @@
+"use client"
+
+import { useState } from "react"
+import type { Node } from "@xyflow/react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+type WorkflowNodeData = Record<string, unknown> & {
+  nodeType?: string
+  name?: string
+  config?: Record<string, unknown>
+}
+
+export function NodeConfigPanel({
+  node,
+  onChange,
+}: {
+  node: Node<WorkflowNodeData> | null
+  onChange: (nodeId: string, data: WorkflowNodeData) => void
+}) {
+  if (!node) {
+    return (
+      <div className="flex h-full items-center justify-center px-4 text-sm text-muted-foreground">
+        Select a node to edit its properties.
+      </div>
+    )
+  }
+
+  return <NodeConfigForm key={node.id} node={node} onChange={onChange} />
+}
+
+function NodeConfigForm({
+  node,
+  onChange,
+}: {
+  node: Node<WorkflowNodeData>
+  onChange: (nodeId: string, data: WorkflowNodeData) => void
+}) {
+  const [name, setName] = useState(node.data.name ?? "")
+  const [configText, setConfigText] = useState(JSON.stringify(node.data.config ?? {}, null, 2))
+  const [error, setError] = useState("")
+
+  const handleApply = () => {
+    try {
+      const parsed = JSON.parse(configText || "{}") as Record<string, unknown>
+      setError("")
+      onChange(node.id, {
+        ...node.data,
+        name: name.trim() || node.data.nodeType || node.id,
+        config: parsed,
+      })
+    } catch {
+      setError("Config must be valid JSON.")
+    }
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4 p-4">
+      <div>
+        <div className="text-sm font-medium">{node.data.nodeType ?? node.id}</div>
+        <div className="mt-1 text-xs text-muted-foreground">{node.id}</div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="workflow-node-name">Name</Label>
+        <Input
+          id="workflow-node-name"
+          value={name}
+          onChange={(event) => setName(event.target.value)}
+        />
+      </div>
+      <div className="min-h-0 flex-1 space-y-2">
+        <Label htmlFor="workflow-node-config">Config JSON</Label>
+        <Textarea
+          id="workflow-node-config"
+          className="h-64 font-mono text-xs"
+          value={configText}
+          onChange={(event) => setConfigText(event.target.value)}
+        />
+      </div>
+      {error ? <div className="text-xs text-destructive">{error}</div> : null}
+      <Button onClick={handleApply}>Apply</Button>
+    </div>
+  )
+}