AI Agent Workflow

"use client";

import React from "react";
import { Check, Loader2, Play } from "lucide-react";

export default function AIAgentWorkflow() {
    const steps = [
        { title: "Query Parsing", status: "completed", detail: "Natural language intent identified" },
        { title: "Vector Search", status: "completed", detail: "Found 12 relevant documentation nodes" },
        { title: "Context Synthesis", status: "active", detail: "Merging nodes with current chat history" },
        { title: "Model Inference", status: "pending", detail: "Waiting for token generation" },
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center justify-between mb-6">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Workflow Execution</h3>
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-zinc-500 font-bold uppercase tracking-wider">
                    In Progress
                </span>
            </div>

            <div className="space-y-6 relative before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[1px] before:bg-zinc-100 dark:before:bg-zinc-800">
                {steps.map((step, i) => (
                    <div key={i} className="flex gap-4 relative">
                        <div className={`h-[22px] w-[22px] rounded-full flex items-center justify-center shrink-0 z-10 ${step.status === "completed"
                                ? "bg-emerald-500 text-white"
                                : step.status === "active"
                                    ? "bg-blue-500 text-white"
                                    : "bg-zinc-100 dark:bg-zinc-800 text-zinc-400 shadow-[0_0_0_4px_white] dark:shadow-[0_0_0_4px_#09090b]"
                            }`}>
                            {step.status === "completed" ? (
                                <Check className="h-3 w-3" />
                            ) : step.status === "active" ? (
                                <Loader2 className="h-3 w-3 animate-spin" />
                            ) : (
                                <Play className="h-2 w-2 ml-0.5" />
                            )}
                        </div>
                        <div>
                            <p className={`text-xs font-bold leading-none ${step.status === "pending" ? "text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
                                }`}>
                                {step.title}
                            </p>
                            <p className="text-[11px] text-zinc-500 mt-1.5 leading-relaxed">{step.detail}</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}