mlogclub
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import type { ReactNode } from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import type { AIWorkflowNodeSpec } from "@/lib/api/admin"
|
|
import { getWorkflowNodeAccentClass, getWorkflowNodeMeta } from "./workflow-node-meta"
|
|
import { WorkflowNodeIcon } from "./workflow-node-icon"
|
|
|
|
export function WorkflowNodeCard({
|
|
nodeType,
|
|
title,
|
|
spec,
|
|
selected,
|
|
width = "normal",
|
|
children,
|
|
}: {
|
|
nodeType: string
|
|
title: string
|
|
spec?: AIWorkflowNodeSpec
|
|
selected: boolean
|
|
width?: "normal" | "wide"
|
|
children: ReactNode
|
|
}) {
|
|
const meta = getWorkflowNodeMeta(nodeType)
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group relative rounded-2xl border bg-background p-0.5 transition-all",
|
|
width === "wide" ? "w-[320px]" : "w-[280px]",
|
|
selected
|
|
? "border-[var(--g-selection-background)] shadow-[0_8px_24px_rgba(20,24,38,0.14)]"
|
|
: "border-border/80 shadow-sm hover:border-border hover:shadow-md"
|
|
)}
|
|
>
|
|
<div className="overflow-hidden rounded-[15px] border border-transparent bg-background">
|
|
<div className="flex items-center gap-2 px-3 pb-2 pt-3">
|
|
<WorkflowNodeIcon type={nodeType} tone={meta.tone} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-semibold leading-5 text-foreground">
|
|
{title}
|
|
</div>
|
|
<div className="mt-0.5 flex items-center gap-1.5">
|
|
<span
|
|
className={cn(
|
|
"inline-flex h-4 shrink-0 items-center rounded-md border px-1.5 text-[10px] font-medium leading-none",
|
|
getWorkflowNodeAccentClass(meta.tone)
|
|
)}
|
|
>
|
|
{meta.label}
|
|
</span>
|
|
<span className="min-w-0 truncate text-[11px] leading-4 text-muted-foreground">
|
|
{nodeType}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{spec?.description ? (
|
|
<div className="mx-3 mb-2 line-clamp-2 rounded-lg bg-muted/45 px-2 py-1.5 text-xs leading-4 text-muted-foreground">
|
|
{spec.description}
|
|
</div>
|
|
) : null}
|
|
<div className="border-t bg-muted/20 px-3 py-2.5">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|