84 lines
3.4 KiB
TypeScript
84 lines
3.4 KiB
TypeScript
import { Boxes, Wand2 } from 'lucide-react'
|
|
|
|
import type { WorkflowNodeDefinition } from '../../api/workflows'
|
|
import type { WorkflowGraphFamily } from './workflowNodeLibrary'
|
|
import { getWorkflowAuthoringPlan } from './workflowAuthoringGuidance'
|
|
import type { WorkflowModuleBundleId } from './workflowModuleBundles'
|
|
|
|
type WorkflowModuleBundlePanelProps = {
|
|
definitions: WorkflowNodeDefinition[]
|
|
graphFamily: WorkflowGraphFamily
|
|
activeSteps: string[]
|
|
onInsertModule?: (bundleId: WorkflowModuleBundleId) => void
|
|
}
|
|
|
|
export function WorkflowModuleBundlePanel({
|
|
definitions,
|
|
graphFamily,
|
|
activeSteps,
|
|
onInsertModule,
|
|
}: WorkflowModuleBundlePanelProps) {
|
|
const { moduleBundles } = getWorkflowAuthoringPlan(definitions, graphFamily, activeSteps)
|
|
|
|
if (moduleBundles.length === 0) return null
|
|
|
|
return (
|
|
<div className="space-y-2 rounded-2xl border border-border-default bg-surface-hover/30 p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<Boxes size={14} className="text-accent" />
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-content-secondary">
|
|
Production Modules
|
|
</p>
|
|
</div>
|
|
<p className="mt-1 text-xs text-content-muted">
|
|
Insert reusable subgraphs for core production stages instead of assembling every node from scratch.
|
|
</p>
|
|
</div>
|
|
<span className="rounded-full border border-border-default bg-surface px-2 py-0.5 text-[11px] text-content-muted">
|
|
{moduleBundles.length} bundles
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{moduleBundles.map(bundle => (
|
|
<div
|
|
key={bundle.id}
|
|
className="rounded-2xl border border-border-default bg-surface px-3 py-3"
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<p className="text-sm font-semibold text-content">{bundle.label}</p>
|
|
<span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] font-medium text-content-secondary">
|
|
{bundle.stage}
|
|
</span>
|
|
<span className="rounded-full bg-surface-hover px-2 py-0.5 text-[11px] text-content-muted">
|
|
{bundle.presentCount}/{bundle.totalCount} present
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-content-muted">{bundle.description}</p>
|
|
<p className="text-[11px] text-content-muted">
|
|
{bundle.stepIds.join(' -> ')}
|
|
</p>
|
|
</div>
|
|
{onInsertModule ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onInsertModule(bundle.id)}
|
|
aria-label={`Insert ${bundle.label}`}
|
|
className="inline-flex items-center gap-1 rounded-xl bg-accent px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-accent-hover"
|
|
>
|
|
<Wand2 size={12} />
|
|
Insert
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|