From 4df5b7bde7ba548364b75ddce7a91ef6d5ecf5e4 Mon Sep 17 00:00:00 2001 From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com> Date: Tue, 10 Feb 2026 21:52:01 +0530 Subject: [PATCH] refactor(frontend): remove defaultExpanded prop from ToolAccordion components (#12054) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Changes - Removed `defaultExpanded` prop from `ToolAccordion` in CreateAgent, EditAgent, RunAgent, and RunBlock components to streamline the code and improve readability. ### Impact - This refactor enhances maintainability by reducing complexity in the component structure while preserving existing functionality. ### Changes 🏗️ - Removed conditional expansion logic from all tool components - Simplified ToolAccordion implementation across all affected components ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Create and run agents with various tools to verify accordion behavior works correctly - [x] Verify that UI components expand and collapse as expected - [x] Test with different output types to ensure proper rendering --------- Co-authored-by: Ubbe Co-authored-by: Lluis Agusti --- .../app/(platform)/copilot/CopilotPage.tsx | 8 +++-- .../ChatMessagesContainer.tsx | 6 ++-- .../components/ChatSidebar/ChatSidebar.tsx | 4 +-- .../ScaleLoader/ScaleLoader.module.css | 35 +++++++++++++++++++ .../components/ScaleLoader/ScaleLoader.tsx | 16 +++++++++ .../copilot/tools/CreateAgent/CreateAgent.tsx | 18 +++++----- .../copilot/tools/EditAgent/EditAgent.tsx | 5 +-- .../copilot/tools/RunAgent/RunAgent.tsx | 9 +---- .../copilot/tools/RunAgent/helpers.tsx | 6 ++-- .../copilot/tools/RunBlock/RunBlock.tsx | 8 +---- .../copilot/tools/RunBlock/helpers.tsx | 6 ++-- 11 files changed, 79 insertions(+), 42 deletions(-) create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.module.css create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.tsx diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx index cd1033f535..0d403b1a79 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx @@ -1,11 +1,11 @@ "use client"; -import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner"; import { SidebarProvider } from "@/components/ui/sidebar"; import { ChatContainer } from "./components/ChatContainer/ChatContainer"; import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar"; import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer"; import { MobileHeader } from "./components/MobileHeader/MobileHeader"; +import { ScaleLoader } from "./components/ScaleLoader/ScaleLoader"; import { useCopilotPage } from "./useCopilotPage"; export function CopilotPage() { @@ -34,7 +34,11 @@ export function CopilotPage() { } = useCopilotPage(); if (isUserLoading || !isLoggedIn) { - return ; + return ( +
+ +
+ ); } return ( diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx index 0867ede5a4..4578b268e3 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx @@ -143,10 +143,10 @@ export const ChatMessagesContainer = ({ return ( - + {isLoading && messages.length === 0 && ( -
- +
+
)} {messages.map((message, messageIndex) => { diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx index 8a48cb66c2..6b7398b4ba 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx @@ -121,8 +121,8 @@ export function ChatSidebar() { className="mt-4 flex flex-col gap-1" > {isLoadingSessions ? ( -
- +
+
) : sessions.length === 0 ? (

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.module.css b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.module.css new file mode 100644 index 0000000000..3e7e71d66b --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.module.css @@ -0,0 +1,35 @@ +.loader { + width: 48px; + height: 48px; + display: inline-block; + position: relative; +} + +.loader::after, +.loader::before { + content: ""; + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: 50%; + background: currentColor; + position: absolute; + left: 0; + top: 0; + animation: animloader 2s linear infinite; +} + +.loader::after { + animation-delay: 1s; +} + +@keyframes animloader { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(1); + opacity: 0; + } +} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.tsx new file mode 100644 index 0000000000..a395b21319 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ScaleLoader/ScaleLoader.tsx @@ -0,0 +1,16 @@ +import { cn } from "@/lib/utils"; +import styles from "./ScaleLoader.module.css"; + +interface Props { + size?: number; + className?: string; +} + +export function ScaleLoader({ size = 48, className }: Props) { + return ( +

+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx index 5dc2f40dfe..0d023d0529 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx @@ -49,12 +49,7 @@ interface Props { part: CreateAgentToolPart; } -function getAccordionMeta(output: CreateAgentToolOutput): { - icon: React.ReactNode; - title: React.ReactNode; - titleClassName?: string; - description?: string; -} { +function getAccordionMeta(output: CreateAgentToolOutput) { const icon = ; if (isAgentSavedOutput(output)) { @@ -73,6 +68,7 @@ function getAccordionMeta(output: CreateAgentToolOutput): { icon, title: "Needs clarification", description: `${questions.length} question${questions.length === 1 ? "" : "s"}`, + expanded: true, }; } if ( @@ -97,18 +93,23 @@ function getAccordionMeta(output: CreateAgentToolOutput): { export function CreateAgentTool({ part }: Props) { const text = getAnimationText(part); const { onSend } = useCopilotChatActions(); + const isStreaming = part.state === "input-streaming" || part.state === "input-available"; const output = getCreateAgentToolOutput(part); + const isError = part.state === "output-error" || (!!output && isErrorOutput(output)); + const isOperating = !!output && (isOperationStartedOutput(output) || isOperationPendingOutput(output) || isOperationInProgressOutput(output)); + const progress = useAsymptoticProgress(isOperating); + const hasExpandableContent = part.state === "output-available" && !!output && @@ -149,10 +150,7 @@ export function CreateAgentTool({ part }: Props) {
{hasExpandableContent && output && ( - + {isOperating && ( 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 3beb9e7e1e..6766a5cb49 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 @@ -146,10 +146,7 @@ export function EditAgentTool({ part }: Props) {
{hasExpandableContent && output && ( - + {isOperating && ( 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 51044848b9..f16b9d2b2f 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 @@ -61,14 +61,7 @@ export function RunAgentTool({ part }: Props) {
{hasExpandableContent && output && ( - + {isRunAgentExecutionStartedOutput(output) && ( )} diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx index 0a117a71f2..816c661230 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/helpers.tsx @@ -10,7 +10,7 @@ import { WarningDiamondIcon, } from "@phosphor-icons/react"; import type { ToolUIPart } from "ai"; -import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader"; +import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader"; export interface RunAgentInput { username_agent_slug?: string; @@ -171,7 +171,7 @@ export function ToolIcon({ ); } if (isStreaming) { - return ; + return ; } return ; } @@ -203,7 +203,7 @@ export function getAccordionMeta(output: RunAgentToolOutput): { ? output.status.trim() : "started"; return { - icon: , + icon: , title: output.graph_name, description: `Status: ${statusText}`, }; 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 ded344efa2..e1cb030449 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 @@ -55,13 +55,7 @@ export function RunBlockTool({ part }: Props) { {hasExpandableContent && output && ( - + {isRunBlockBlockOutput(output) && } {isRunBlockSetupRequirementsOutput(output) && ( diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx index 61ba65e74e..c9b903876a 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunBlock/helpers.tsx @@ -8,7 +8,7 @@ import { WarningDiamondIcon, } from "@phosphor-icons/react"; import type { ToolUIPart } from "ai"; -import { SpinnerLoader } from "../../components/SpinnerLoader/SpinnerLoader"; +import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader"; export interface RunBlockInput { block_id?: string; @@ -120,7 +120,7 @@ export function ToolIcon({ ); } if (isStreaming) { - return ; + return ; } return ; } @@ -149,7 +149,7 @@ export function getAccordionMeta(output: RunBlockToolOutput): { if (isRunBlockBlockOutput(output)) { const keys = Object.keys(output.outputs ?? {}); return { - icon: , + icon: , title: output.block_name, description: keys.length > 0