feat(frontend): Add agent creation checklist in CoPilot chat

Co-authored-by: itsababseh <36419647+itsababseh@users.noreply.github.com>

autogpt_platform/backend/backend/api/features/chat/tools/models.py

@@ -40,6 +40,8 @@ class ResponseType(str, Enum):
     OPERATION_IN_PROGRESS = "operation_in_progress"
     # Input validation
     INPUT_VALIDATION_ERROR = "input_validation_error"
+    # Agent creation steps
+    AGENT_CREATION_STEPS = "agent_creation_steps"
 
 
 # Base response model
@@ -286,6 +288,21 @@ class ClarificationNeededResponse(ToolResponseBase):
     questions: list[ClarifyingQuestion] = Field(default_factory=list)
 
 
+class AgentCreationStep(BaseModel):
+    """A single step in the agent creation process."""
+
+    title: str
+    description: str
+    status: str = "pending"  # pending, in_progress, completed
+
+
+class AgentCreationStepsResponse(ToolResponseBase):
+    """Response showing the steps for agent creation as a checklist."""
+
+    type: ResponseType = ResponseType.AGENT_CREATION_STEPS
+    steps: list[AgentCreationStep] = Field(default_factory=list)
+
+
 # Documentation search models
 class DocSearchResult(BaseModel):
     """A single documentation search result."""

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx

@@ -16,6 +16,10 @@ import {
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
 import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import {
+  AgentCreationChecklistCard,
+  AgentCreationChecklistStep,
+} from "./components/AgentCreationChecklistCard";
 import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
@@ -153,6 +157,9 @@ export function CreateAgentTool({ part }: Props) {
         <ToolAccordion {...getAccordionMeta(output)}>
           {isOperating && (
             <ContentGrid>
+              <AgentCreationChecklistCard
+                steps={getAgentCreationSteps(progress)}
+              />
               <ProgressBar value={progress} className="max-w-[280px]" />
               <ContentHint>
                 This could take a few minutes, grab a coffee ☕
@@ -233,3 +240,34 @@ export function CreateAgentTool({ part }: Props) {
     </div>
   );
 }
+
+function getAgentCreationSteps(
+  progress: number,
+): AgentCreationChecklistStep[] {
+  return [
+    {
+      title: "Analyzing your request",
+      description:
+        "Understanding your requirements and breaking down the goal into actionable steps",
+      status: progress > 10 ? "completed" : "pending",
+    },
+    {
+      title: "Searching for relevant blocks",
+      description:
+        "Finding the best building blocks to accomplish your agent's tasks",
+      status: progress > 30 ? "completed" : "pending",
+    },
+    {
+      title: "Designing the workflow",
+      description:
+        "Creating the agent structure and connecting blocks together",
+      status: progress > 60 ? "completed" : "pending",
+    },
+    {
+      title: "Validating and optimizing",
+      description:
+        "Ensuring the agent works correctly and optimizing the workflow",
+      status: progress > 85 ? "completed" : "pending",
+    },
+  ];
+}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/AgentCreationChecklistCard.tsx

@@ -0,0 +1,52 @@
+import { CheckCircleIcon, CircleIcon } from "@phosphor-icons/react";
+
+export interface AgentCreationChecklistStep {
+  title: string;
+  description: string;
+  status: "pending" | "completed";
+}
+
+interface Props {
+  steps: AgentCreationChecklistStep[];
+}
+
+export function AgentCreationChecklistCard({ steps }: Props) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        Creating your custom agent...
+      </p>
+      <div className="space-y-2">
+        {steps.map((step, index) => (
+          <div key={index} className="flex items-start gap-3">
+            <div className="mt-0.5 flex-shrink-0">
+              {step.status === "completed" ? (
+                <CheckCircleIcon
+                  size={20}
+                  weight="fill"
+                  className="text-green-500"
+                />
+              ) : (
+                <CircleIcon size={20} weight="regular" className="text-neutral-400" />
+              )}
+            </div>
+            <div className="flex-1 space-y-1">
+              <div
+                className={`text-sm font-medium ${
+                  step.status === "completed"
+                    ? "text-neutral-900 dark:text-neutral-100"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {step.title}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {step.description}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}