"use client"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { Play, RotateCcw, CheckCircle2, XCircle, AlertTriangle, ArrowRight, RefreshCw } from "lucide-react"; import { useTranslations, useLocale } from "next-intl"; import { getLocaleField, type ChainScenario, type ChainStep } from "./locales"; const scenarioIcons: Record = { success: CheckCircle2, retry: RefreshCw, fallback: AlertTriangle, }; type StepStatus = "pending" | "running" | "success" | "failed" | "retrying" | "fallback"; interface Step { id: string; name: string; status: StepStatus; output?: string; error?: string; attempt?: number; } export function ChainErrorDemo() { const [selectedScenario, setSelectedScenario] = useState("success"); const [isRunning, setIsRunning] = useState(false); const t = useTranslations("book.interactive"); const locale = useLocale(); const scenarios = getLocaleField(locale, "scenarios"); const initialSteps = getLocaleField(locale, "steps") as Step[]; const [steps, setSteps] = useState(initialSteps); const resetSteps = () => { setSteps(getLocaleField(locale, "steps") as Step[]); }; const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); const updateStep = (id: string, updates: Partial) => { setSteps(prev => prev.map(s => s.id === id ? { ...s, ...updates } : s)); }; const runScenario = async () => { setIsRunning(true); resetSteps(); await delay(300); if (selectedScenario === "success") { // Happy path - all steps succeed updateStep("extract", { status: "running" }); await delay(800); updateStep("extract", { status: "success", output: '{"name": "John", "email": "john@example.com"}' }); updateStep("validate", { status: "running" }); await delay(600); updateStep("validate", { status: "success", output: "VALID - All fields present" }); updateStep("transform", { status: "running" }); await delay(700); updateStep("transform", { status: "success", output: "Formatted for database" }); updateStep("output", { status: "running" }); await delay(500); updateStep("output", { status: "success", output: "✓ Record saved successfully" }); } else if (selectedScenario === "retry") { // Retry scenario - extraction fails once, then succeeds updateStep("extract", { status: "running", attempt: 1 }); await delay(800); updateStep("extract", { status: "failed", error: "Malformed JSON response", attempt: 1 }); await delay(600); updateStep("extract", { status: "retrying", attempt: 2 }); await delay(1000); updateStep("extract", { status: "success", output: '{"name": "John", "email": "john@example.com"}', attempt: 2 }); updateStep("validate", { status: "running" }); await delay(600); updateStep("validate", { status: "success", output: "VALID - All fields present" }); updateStep("transform", { status: "running" }); await delay(700); updateStep("transform", { status: "success", output: "Formatted for database" }); updateStep("output", { status: "running" }); await delay(500); updateStep("output", { status: "success", output: "✓ Record saved successfully" }); } else if (selectedScenario === "fallback") { // Fallback scenario - complex extraction fails, fallback to simple updateStep("extract", { status: "running" }); await delay(800); updateStep("extract", { status: "failed", error: "Complex extraction failed" }); await delay(500); updateStep("extract", { status: "fallback", output: "Using simple regex extraction..." }); await delay(800); updateStep("extract", { status: "success", output: '{"name": "John"} (partial data)' }); updateStep("validate", { status: "running" }); await delay(600); updateStep("validate", { status: "success", output: "VALID - Minimum fields present" }); updateStep("transform", { status: "running" }); await delay(700); updateStep("transform", { status: "success", output: "Formatted with defaults" }); updateStep("output", { status: "running" }); await delay(500); updateStep("output", { status: "success", output: "✓ Record saved (partial)" }); } setIsRunning(false); }; const getStatusIcon = (status: StepStatus) => { switch (status) { case "pending": return

; case "running": return

; case "success": return ; case "failed": return ; case "retrying": return ; case "fallback": return ; } }; const getStatusBg = (status: StepStatus) => { switch (status) { case "pending": return "bg-muted/50"; case "running": return "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800"; case "success": return "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800"; case "failed": return "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800"; case "retrying": return "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800"; case "fallback": return "bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800"; } }; return (

{t("chainErrorHandlingDemo")}

{/* Scenario Selector */}

{scenarios.map(scenario => { const Icon = scenarioIcons[scenario.id]; return ( ); })}

{/* Chain Visualization */}

{steps.map((step, index) => (

{getStatusIcon(step.status)}

{index < steps.length - 1 && (

)}

{step.name} {step.attempt && step.attempt > 1 && ( {t("attempt")} {step.attempt} )}

{step.error && (

{step.error}

)} {step.output && (

{step.output}

)} {step.status === "retrying" && (

{t("retryingWithFeedback")}

)} {step.status === "fallback" && (

{t("switchingToFallback")}

)}

))}

{/* Legend */}

{t("success")}

{t("failed")}

{t("retry")}

{t("fallback")}

); }