mlogclub
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { XIcon } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
|
|
|
|
import { NodeConfigPanel } from "./node-config-panel"
|
|
import {
|
|
getAvailableVariables,
|
|
type WorkflowNodeData,
|
|
} from "./workflow-utils"
|
|
|
|
export function WorkflowConfigPanel({
|
|
definition,
|
|
nodeSpecs,
|
|
selectedNodeId,
|
|
onClose,
|
|
onChangeNodeData,
|
|
onDeleteNode,
|
|
}: {
|
|
definition: AIWorkflowDefinition
|
|
nodeSpecs: AIWorkflowNodeSpec[]
|
|
selectedNodeId: string
|
|
onClose: () => void
|
|
onChangeNodeData: (nodeId: string, data: WorkflowNodeData) => void
|
|
onDeleteNode: (nodeId: string) => void
|
|
}) {
|
|
const selectedNode = definition.nodes.find((node) => node.id === selectedNodeId) ?? null
|
|
const selectedNodeSpec = selectedNode
|
|
? nodeSpecs.find((spec) => spec.type === selectedNode.type)
|
|
: undefined
|
|
const availableVariables = selectedNode
|
|
? getAvailableVariables(definition, selectedNode.id, nodeSpecs)
|
|
: []
|
|
|
|
if (!selectedNode) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="pointer-events-none absolute inset-y-3 right-3 z-50 flex w-[360px] max-w-[calc(100%-1.5rem)]">
|
|
<section className="pointer-events-auto flex min-h-0 w-full flex-col overflow-hidden rounded-lg border bg-background shadow-2xl">
|
|
<div className="flex shrink-0 items-start justify-between gap-3 border-b px-4 py-3">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium">属性</div>
|
|
<div className="mt-0.5 truncate text-xs text-muted-foreground">
|
|
{selectedNode.data?.title || selectedNodeSpec?.title || selectedNode.type}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-8 shrink-0 text-muted-foreground"
|
|
aria-label="关闭属性面板"
|
|
onClick={onClose}
|
|
>
|
|
<XIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="min-h-0 flex-1">
|
|
<NodeConfigPanel
|
|
node={selectedNode}
|
|
nodeSpec={selectedNodeSpec}
|
|
nodes={definition.nodes}
|
|
availableVariables={availableVariables}
|
|
showHeader={false}
|
|
onChange={onChangeNodeData}
|
|
onDelete={onDeleteNode}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|