diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx index 6766a5cb49..5af2b3d073 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx @@ -1,25 +1,30 @@ "use client"; -import { WarningDiamondIcon } from "@phosphor-icons/react"; +import { Button } from "@/components/atoms/Button/Button"; +import { Text } from "@/components/atoms/Text/Text"; +import { + BookOpenIcon, + CheckFatIcon, + PencilSimpleIcon, + WarningDiamondIcon, +} from "@phosphor-icons/react"; import type { ToolUIPart } from "ai"; +import NextLink from "next/link"; import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions"; import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation"; -import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader"; -import { ProgressBar } from "../../components/ProgressBar/ProgressBar"; import { ContentCardDescription, ContentCodeBlock, ContentGrid, ContentHint, - ContentLink, ContentMessage, } from "../../components/ToolAccordion/AccordionContent"; import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion"; -import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress"; import { ClarificationQuestionsCard, ClarifyingQuestion, } from "../CreateAgent/components/ClarificationQuestionsCard"; +import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame"; import { AccordionIcon, formatMaybeJson, @@ -49,16 +54,11 @@ interface Props { part: EditAgentToolPart; } -function getAccordionMeta(output: EditAgentToolOutput): { - icon: React.ReactNode; - title: string; - titleClassName?: string; - description?: string; -} { +function getAccordionMeta(output: EditAgentToolOutput) { const icon = ; if (isAgentSavedOutput(output)) { - return { icon, title: output.agent_name }; + return { icon, title: output.agent_name, expanded: true }; } if (isAgentPreviewOutput(output)) { return { @@ -73,6 +73,7 @@ function getAccordionMeta(output: EditAgentToolOutput): { icon, title: "Needs clarification", description: `${questions.length} question${questions.length === 1 ? "" : "s"}`, + expanded: true, }; } if ( @@ -80,7 +81,11 @@ function getAccordionMeta(output: EditAgentToolOutput): { isOperationPendingOutput(output) || isOperationInProgressOutput(output) ) { - return { icon: , title: "Editing agent" }; + return { + icon, + title: "Editing agent, this may take a few minutes. Sit back and relax.", + expanded: true, + }; } return { icon: ( @@ -105,7 +110,7 @@ export function EditAgentTool({ part }: Props) { (isOperationStartedOutput(output) || isOperationPendingOutput(output) || isOperationInProgressOutput(output)); - const progress = useAsymptoticProgress(isOperating); + const hasExpandableContent = part.state === "output-available" && !!output && @@ -149,31 +154,53 @@ export function EditAgentTool({ part }: Props) { {isOperating && ( - + - This could take a few minutes, grab a coffee ☕ + This could take a few minutes — play while you wait! )} {isAgentSavedOutput(output) && ( - - {output.message} -
- - Open in library - - - Open in builder - +
+
+ + + {output.message} +
- - {truncateText( - formatMaybeJson({ agent_id: output.agent_id }), - 800, - )} - - +
+ + +
+
)} {isAgentPreviewOutput(output) && ( diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx index f16b9d2b2f..11503c20bb 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx @@ -3,8 +3,14 @@ import type { ToolUIPart } from "ai"; import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation"; import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion"; -import { ContentMessage } from "../../components/ToolAccordion/AccordionContent"; import { + ContentGrid, + ContentHint, + ContentMessage, +} from "../../components/ToolAccordion/AccordionContent"; +import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame"; +import { + AccordionIcon, getAccordionMeta, getAnimationText, getRunAgentToolOutput, @@ -60,6 +66,21 @@ export function RunAgentTool({ part }: Props) { />
+ {isStreaming && !output && ( + } + title="Running agent, this may take a moment..." + expanded + > + + + + This could take a few minutes — play while you wait! + + + + )} + {hasExpandableContent && output && ( {isRunAgentExecutionStartedOutput(output) && ( diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx index e1cb030449..cee598c38c 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/RunBlock.tsx @@ -3,10 +3,16 @@ import type { ToolUIPart } from "ai"; import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation"; import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion"; +import { + ContentGrid, + ContentHint, +} from "../../components/ToolAccordion/AccordionContent"; +import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame"; import { BlockOutputCard } from "./components/BlockOutputCard/BlockOutputCard"; import { ErrorCard } from "./components/ErrorCard/ErrorCard"; import { SetupRequirementsCard } from "./components/SetupRequirementsCard/SetupRequirementsCard"; import { + AccordionIcon, getAccordionMeta, getAnimationText, getRunBlockToolOutput, @@ -54,6 +60,21 @@ export function RunBlockTool({ part }: Props) { /> + {isStreaming && !output && ( + } + title="Running block, this may take a moment..." + expanded + > + + + + This could take a few minutes — play while you wait! + + + + )} + {hasExpandableContent && output && ( {isRunBlockBlockOutput(output) && }