129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { AgentPresetPanelDark } from "./AgentPresetPanelDark";
|
|
import { AgentWorkflowPanelDark, type AgentWorkflowInputs } from "./AgentWorkflowPanelDark";
|
|
import { AgentGenerationWorkspaceDark } from "./AgentGenerationWorkspaceDark";
|
|
import {
|
|
createEmptyAgentWorkflowMaterialSelections,
|
|
normalizeAgentWorkflowMaterialSelections,
|
|
} from "@/lib/agents/workflow-material-config";
|
|
import { buildAgentWorkflowComposerContext } from "@/lib/agents/workflow-composer";
|
|
import type {
|
|
AgentWorkflowMaterialSelections,
|
|
AgentWorkflowStepKey,
|
|
} from "@/types/agent";
|
|
|
|
interface AgentPageDarkProps {
|
|
projectId: string;
|
|
initialStage?: "preset" | "workflow" | "generate";
|
|
initialPresetId?: string | null;
|
|
workflowConfig?: any;
|
|
}
|
|
|
|
export function AgentPageDark({
|
|
projectId,
|
|
initialStage = "preset",
|
|
initialPresetId = null,
|
|
workflowConfig,
|
|
}: AgentPageDarkProps) {
|
|
const [stage, setStage] = useState<"preset" | "workflow" | "generate">(initialStage);
|
|
const [selectedPresetId, setSelectedPresetId] = useState<string | null>(initialPresetId);
|
|
|
|
// Workflow state
|
|
const [workflowInputs, setWorkflowInputs] = useState<AgentWorkflowInputs>({
|
|
primarySku: "",
|
|
secondarySku: "",
|
|
brand: "",
|
|
store: "",
|
|
thirdCategory: "",
|
|
fourthCategory: "",
|
|
fifthCategory: "",
|
|
priceBand: "",
|
|
});
|
|
const [workflowMaterials, setWorkflowMaterials] = useState<AgentWorkflowMaterialSelections>(
|
|
createEmptyAgentWorkflowMaterialSelections()
|
|
);
|
|
const [workflowSelections, setWorkflowSelections] = useState<
|
|
Partial<Record<AgentWorkflowStepKey, string>>
|
|
>({});
|
|
|
|
// Handle preset selection
|
|
const handleSelectPreset = (presetId: string | null) => {
|
|
setSelectedPresetId(presetId);
|
|
if (presetId) {
|
|
setStage("generate");
|
|
}
|
|
};
|
|
|
|
// Build workflow context
|
|
const workflowContext = buildAgentWorkflowComposerContext({
|
|
config: workflowConfig,
|
|
inputs: workflowInputs,
|
|
materials: workflowMaterials,
|
|
selections: workflowSelections,
|
|
});
|
|
|
|
return (
|
|
<div className="bg-black min-h-screen">
|
|
<AnimatePresence mode="wait">
|
|
{stage === "preset" && (
|
|
<motion.div
|
|
key="preset"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0, x: -100 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<AgentPresetPanelDark
|
|
selectedPresetId={selectedPresetId}
|
|
onSelectPreset={handleSelectPreset}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
|
|
{stage === "workflow" && (
|
|
<motion.div
|
|
key="workflow"
|
|
initial={{ opacity: 0, x: 100 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -100 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<AgentWorkflowPanelDark
|
|
config={workflowConfig}
|
|
inputs={workflowInputs}
|
|
onInputsChange={setWorkflowInputs}
|
|
materials={workflowMaterials}
|
|
onMaterialsChange={setWorkflowMaterials}
|
|
selections={workflowSelections}
|
|
onSelectionsChange={setWorkflowSelections}
|
|
onNextStep={() => setStage("preset")}
|
|
onSkipStep={() => setStage("preset")}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
|
|
{stage === "generate" && (
|
|
<motion.div
|
|
key="generate"
|
|
initial={{ opacity: 0, x: 100 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -100 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<AgentGenerationWorkspaceDark
|
|
chatId={`canvas-${projectId}`}
|
|
projectId={projectId}
|
|
selectedAgentPresetId={selectedPresetId}
|
|
workflowContext={workflowContext}
|
|
onBack={() => setStage("preset")}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|