From e62a8fb572643b41ea762f0bd9bec187d48b023b Mon Sep 17 00:00:00 2001 From: Ubbe Date: Wed, 3 Dec 2025 14:33:18 +0700 Subject: [PATCH] feat(frontend): design updates on new library page... (#11522) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Changes 🏗️ ### Design updates Design updates on the new Library page. New empty views with illustration and overall changes on the sidebar and selected run sections... Screenshot 2025-12-03 at 14 03 45 Screenshot 2025-12-03 at 14 03 52 Screenshot 2025-12-03 at 14 03 57 Screenshot 2025-12-03 at 14 04 07 ### Architecture - Make selected tabs/items synced with the URL via `?activeTab=` and `?activeItem=`, so it is easy and predictable to change their state... - Some minor updates on the design system I missed on previous PRs ... ## 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] Run the app locally and check the new page ( still wip ) --- .../NewAgentLibraryView.tsx | 137 ++++---- .../components/other/EmptyAgentRuns.tsx | 106 ------ .../components/other/EmptySchedules.tsx | 323 ++++++++++++++++++ .../other/EmptySchedulesIllustration.tsx | 314 +++++++++++++++++ .../components/other/EmptyTasks.tsx | 107 ++++++ ...tration.tsx => EmptyTasksIllustration.tsx} | 2 +- .../components/other/EmptyTemplates.tsx | 323 ++++++++++++++++++ .../components/other/SectionWrap.tsx | 19 ++ .../RunDetailCard/RunDetailCard.tsx | 2 +- .../RunDetailHeader/RunDetailHeader.tsx | 28 +- .../SelectedRunView/SelectedRunView.tsx | 5 +- .../SelectedScheduleView.tsx | 2 +- .../sidebar/AgentRunsLists/AgentRunsLists.tsx | 128 ------- .../SidebarRunsList/SidebarRunsList.tsx | 179 ++++++++++ .../components/RunIconWrapper.tsx | 0 .../components/RunListItem.tsx | 8 +- .../components/RunSidebarCard.tsx | 12 +- .../components/ScheduleListItem.tsx | 0 .../helpers.ts | 0 .../useSidebarRunsList.ts} | 48 +-- .../components/NewAgentLibraryView/helpers.ts | 1 + .../useNewAgentLibraryView.ts | 55 ++- .../src/components/atoms/Text/helpers.ts | 32 +- .../molecules/Breadcrumbs/Breadcrumbs.tsx | 6 +- .../molecules/TabsLine/TabsLine.tsx | 4 +- .../frontend/src/components/styles/colors.ts | 2 +- 26 files changed, 1467 insertions(+), 376 deletions(-) delete mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyAgentRuns.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedules.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedulesIllustration.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasks.tsx rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/{EmptyRunsIllustration.tsx => EmptyTasksIllustration.tsx} (99%) create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTemplates.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/SectionWrap.tsx delete mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/AgentRunsLists.tsx create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/SidebarRunsList.tsx rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists => SidebarRunsList}/components/RunIconWrapper.tsx (100%) rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists => SidebarRunsList}/components/RunListItem.tsx (100%) rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists => SidebarRunsList}/components/RunSidebarCard.tsx (72%) rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists => SidebarRunsList}/components/ScheduleListItem.tsx (100%) rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists => SidebarRunsList}/helpers.ts (100%) rename autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/{AgentRunsLists/useAgentRunsLists.ts => SidebarRunsList/useSidebarRunsList.ts} (71%) create mode 100644 autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/helpers.ts diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx index 7eaeeab644..5970607bb9 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/NewAgentLibraryView.tsx @@ -1,16 +1,21 @@ "use client"; +import { Skeleton } from "@/components/__legacy__/ui/skeleton"; import { Button } from "@/components/atoms/Button/Button"; import { Breadcrumbs } from "@/components/molecules/Breadcrumbs/Breadcrumbs"; import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard"; +import { cn } from "@/lib/utils"; import { PlusIcon } from "@phosphor-icons/react"; -import { useEffect } from "react"; import { RunAgentModal } from "./components/modals/RunAgentModal/RunAgentModal"; import { AgentRunsLoading } from "./components/other/AgentRunsLoading"; -import { EmptyAgentRuns } from "./components/other/EmptyAgentRuns"; +import { EmptySchedules } from "./components/other/EmptySchedules"; +import { EmptyTasks } from "./components/other/EmptyTasks"; +import { EmptyTemplates } from "./components/other/EmptyTemplates"; +import { SectionWrap } from "./components/other/SectionWrap"; import { SelectedRunView } from "./components/selected-views/SelectedRunView/SelectedRunView"; import { SelectedScheduleView } from "./components/selected-views/SelectedScheduleView/SelectedScheduleView"; -import { AgentRunsLists } from "./components/sidebar/AgentRunsLists/AgentRunsLists"; +import { SidebarRunsList } from "./components/sidebar/SidebarRunsList/SidebarRunsList"; +import { AGENT_LIBRARY_SECTION_PADDING_X } from "./helpers"; import { useNewAgentLibraryView } from "./useNewAgentLibraryView"; export function NewAgentLibraryView() { @@ -20,19 +25,15 @@ export function NewAgentLibraryView() { ready, error, agentId, - selectedRun, + activeItem, sidebarLoading, + activeTab, + setActiveTab, handleSelectRun, handleCountsChange, handleClearSelectedRun, } = useNewAgentLibraryView(); - useEffect(() => { - if (agent) { - document.title = `${agent.name} - Library - AutoGPT Platform`; - } - }, [agent]); - if (error) { return ( ; } - const shouldShowSidebar = sidebarLoading || hasAnyItems; - - return ( -
- {shouldShowSidebar && ( -
-
- - New Run - - } - agent={agent} - agentId={agent.id.toString()} - onRunCreated={(execution) => handleSelectRun(execution.id)} - onScheduleCreated={(schedule) => - handleSelectRun(`schedule:${schedule.id}`) - } - /> -
- - +
+
- )} +
+ +
+
+ ); + } - {/* Main Content - 70% */} -
-
+ return ( +
+ +
+ + New task + + } + agent={agent} + agentId={agent.id.toString()} + onRunCreated={(execution) => handleSelectRun(execution.id, "runs")} + onScheduleCreated={(schedule) => + handleSelectRun(schedule.id, "scheduled") + } + /> +
+ + + + + +
- {selectedRun ? ( - selectedRun.startsWith("schedule:") ? ( + {activeItem ? ( + activeTab === "scheduled" ? ( ) : ( ) ) : sidebarLoading ? ( - // Show loading state while sidebar is loading to prevent flash of empty state -
Loading runs...
- ) : hasAnyItems ? ( -
- Select a run to view its details +
+ + + +
+ ) : activeTab === "scheduled" ? ( + + ) : activeTab === "templates" ? ( + ) : ( - + )}
-
+
); } diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyAgentRuns.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyAgentRuns.tsx deleted file mode 100644 index 578a95b7f7..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyAgentRuns.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; -import { Button } from "@/components/atoms/Button/Button"; -import { Link } from "@/components/atoms/Link/Link"; -import { Text } from "@/components/atoms/Text/Text"; -import { ShowMoreText } from "@/components/molecules/ShowMoreText/ShowMoreText"; -import { formatDate } from "@/lib/utils/time"; -import { RunAgentModal } from "../modals/RunAgentModal/RunAgentModal"; -import { RunDetailCard } from "../selected-views/RunDetailCard/RunDetailCard"; -import { EmptyRunsIllustration } from "./EmptyRunsIllustration"; - -type Props = { - agent: LibraryAgent; -}; - -export function EmptyAgentRuns({ agent }: Props) { - const isPublished = Boolean(agent.marketplace_listing); - const createdAt = formatDate(agent.created_at); - const updatedAt = formatDate(agent.updated_at); - const isUpdated = updatedAt !== createdAt; - - return ( -
- -
- -
-
-
- - Ready to get started? - - - Run your agent and this space will fill with your agent's - activity - -
-
- - Setup your task - - } - agent={agent} - agentId={agent.id.toString()} - /> -
-
- - {isPublished ? ( -
- - About this agent - -
- {agent.name} - - by{" "} - - {agent.marketplace_listing?.creator.name} - - -
- - {agent.description || - `Note: If you're using Docker Compose watch mode (docker compose watch), it will automatically rebuild on file changes. Since you're using docker compose up -d, manual rebuilds are needed. -You can test the endpoint from your frontend; it should return the marketplace_listing field when an agent has been published, or null if it hasn't.`} - -
-
-
- - Agent created on - - {createdAt} -
- {isUpdated ? ( -
- - Agent updated on - - {updatedAt} -
- ) : null} -
-
- - -
-
-
- ) : null} -
- ); -} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedules.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedules.tsx new file mode 100644 index 0000000000..97492d8a59 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedules.tsx @@ -0,0 +1,323 @@ +import { Text } from "@/components/atoms/Text/Text"; + +export function EmptySchedules() { + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Nothing scheduled yet + + + Create a new run, and you'll have the option to schedule your + agent to run automatically. + +
+
+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedulesIllustration.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedulesIllustration.tsx new file mode 100644 index 0000000000..51d33ba098 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptySchedulesIllustration.tsx @@ -0,0 +1,314 @@ +type Props = { + className?: string; +}; + +export function EmptySchedulesIllustration({ className }: Props) { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasks.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasks.tsx new file mode 100644 index 0000000000..c0c2c900a1 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasks.tsx @@ -0,0 +1,107 @@ +import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; +import { Button } from "@/components/atoms/Button/Button"; +import { Text } from "@/components/atoms/Text/Text"; +import { ShowMoreText } from "@/components/molecules/ShowMoreText/ShowMoreText"; +import { formatDate } from "@/lib/utils/time"; +import { RunAgentModal } from "../modals/RunAgentModal/RunAgentModal"; +import { RunDetailCard } from "../selected-views/RunDetailCard/RunDetailCard"; +import { EmptyTasksIllustration } from "./EmptyTasksIllustration"; + +type Props = { + agent: LibraryAgent; +}; + +export function EmptyTasks({ agent }: Props) { + const isPublished = Boolean(agent.marketplace_listing); + const createdAt = formatDate(agent.created_at); + const updatedAt = formatDate(agent.updated_at); + const isUpdated = updatedAt !== createdAt; + + return ( +
+ +
+ +
+
+
+ + Ready to get started? + + + Run your agent and this space will fill with your agent's + activity + +
+
+ + Setup your task + + } + agent={agent} + agentId={agent.id.toString()} + /> +
+
+ + +
+ + About this agent + +
+ {agent.name} + {isPublished ? ( + + by {agent.marketplace_listing?.creator.name} + + ) : null} +
+ + {agent.description || + `This agent is not yet published. Once it is published, You can publish your agent by clicking the "Publish" button in the agent editor.`} + +
+
+
+ + Agent created on + + + {createdAt} + +
+ {isUpdated ? ( +
+ + Agent updated on + + + {updatedAt} + +
+ ) : null} +
+
+ + +
+
+
+
+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyRunsIllustration.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasksIllustration.tsx similarity index 99% rename from autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyRunsIllustration.tsx rename to autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasksIllustration.tsx index 13847884bc..978e6735df 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyRunsIllustration.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/EmptyTasksIllustration.tsx @@ -2,7 +2,7 @@ type Props = { className?: string; }; -export function EmptyRunsIllustration({ className }: Props) { +export function EmptyTasksIllustration({ className }: Props) { return (
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + No templates yet + + + Create a task first, then save it as a template to reuse later — + it'll show up here. + +
+
+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/SectionWrap.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/SectionWrap.tsx new file mode 100644 index 0000000000..75571dd856 --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/other/SectionWrap.tsx @@ -0,0 +1,19 @@ +import { cn } from "@/lib/utils"; + +type Props = { + children: React.ReactNode; + className?: string; +}; + +export function SectionWrap({ children, className }: Props) { + return ( +
+ {children} +
+ ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx index d90a72e429..83df2d026a 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailCard/RunDetailCard.tsx @@ -9,7 +9,7 @@ export function RunDetailCard({ children, className }: Props) { return (
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx index 7f9c5065d1..811c9d4f55 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/RunDetailHeader/RunDetailHeader.tsx @@ -3,6 +3,7 @@ import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; import { Button } from "@/components/atoms/Button/Button"; import { Text } from "@/components/atoms/Text/Text"; import { Dialog } from "@/components/molecules/Dialog/Dialog"; +import { FloatingSafeModeToggle } from "@/components/molecules/FloatingSafeModeToggle/FloatingSafeModeToggle"; import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; import { ArrowSquareOutIcon, @@ -11,10 +12,10 @@ import { TrashIcon, } from "@phosphor-icons/react"; import moment from "moment"; +import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers"; import { AgentActionsDropdown } from "../AgentActionsDropdown"; import { RunStatusBadge } from "../SelectedRunView/components/RunStatusBadge"; import { ShareRunButton } from "../ShareRunButton/ShareRunButton"; -import { FloatingSafeModeToggle } from "@/components/molecules/FloatingSafeModeToggle/FloatingSafeModeToggle"; import { useRunDetailHeader } from "./useRunDetailHeader"; type Props = { @@ -49,16 +50,13 @@ export function RunDetailHeader({ } = useRunDetailHeader(agent.graph_id, run, onSelectRun, onClearSelectedRun); return ( -
+
-
-
+
+
{run?.status ? : null} - + {agent.name}
@@ -120,18 +118,18 @@ export function RunDetailHeader({ ) : null}
{run ? ( -
- +
+ Started {moment(run.started_at).fromNow()} | - + Version: {run.graph_version} {run.stats?.node_exec_count !== undefined && ( <> | - + Steps: {run.stats.node_exec_count} @@ -139,7 +137,7 @@ export function RunDetailHeader({ {run.stats?.duration !== undefined && ( <> | - + Duration:{" "} {moment.duration(run.stats.duration, "seconds").humanize()} @@ -148,7 +146,7 @@ export function RunDetailHeader({ {run.stats?.cost !== undefined && ( <> | - + Cost: ${(run.stats.cost / 100).toFixed(2)} @@ -156,7 +154,7 @@ export function RunDetailHeader({ {run.stats?.activity_status && ( <> | - + {String(run.stats.activity_status)} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx index 52122edf8d..2a80aafed4 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedRunView/SelectedRunView.tsx @@ -14,6 +14,7 @@ import { PendingReviewsList } from "@/components/organisms/PendingReviewsList/Pe import { usePendingReviewsForExecution } from "@/hooks/usePendingReviews"; import { parseAsString, useQueryState } from "nuqs"; import { useEffect } from "react"; +import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers"; import { AgentInputsReadOnly } from "../../modals/AgentInputsReadOnly/AgentInputsReadOnly"; import { RunDetailCard } from "../RunDetailCard/RunDetailCard"; import { RunDetailHeader } from "../RunDetailHeader/RunDetailHeader"; @@ -78,7 +79,7 @@ export function SelectedRunView({ } return ( -
+
- + Output Your input {run?.status === AgentExecutionStatus.REVIEW && ( diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx index fb5a84a3b1..a431e68021 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/selected-views/SelectedScheduleView/SelectedScheduleView.tsx @@ -78,7 +78,7 @@ export function SelectedScheduleView({ } return ( -
+
diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/AgentRunsLists.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/AgentRunsLists.tsx deleted file mode 100644 index bfd10d98b8..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/AgentRunsLists.tsx +++ /dev/null @@ -1,128 +0,0 @@ -"use client"; - -import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo"; -import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; -import { Skeleton } from "@/components/__legacy__/ui/skeleton"; -import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard"; -import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList"; -import { - TabsLine, - TabsLineContent, - TabsLineList, - TabsLineTrigger, -} from "@/components/molecules/TabsLine/TabsLine"; -import { RunListItem } from "./components/RunListItem"; -import { ScheduleListItem } from "./components/ScheduleListItem"; -import { useAgentRunsLists } from "./useAgentRunsLists"; - -interface Props { - agent: LibraryAgent; - selectedRunId?: string; - onSelectRun: (id: string) => void; - onCountsChange?: (info: { - runsCount: number; - schedulesCount: number; - loading?: boolean; - }) => void; -} - -export function AgentRunsLists({ - agent, - selectedRunId, - onSelectRun, - onCountsChange, -}: Props) { - const { - runs, - schedules, - runsCount, - schedulesCount, - error, - loading, - fetchMoreRuns, - hasMoreRuns, - isFetchingMoreRuns, - tabValue, - setTabValue, - } = useAgentRunsLists({ - graphId: agent.graph_id, - onSelectRun, - onCountsChange, - }); - - if (error) { - return ; - } - - if (loading) { - return ( -
- - - -
- ); - } - - return ( - { - const value = v as "runs" | "scheduled"; - setTabValue(value); - if (value === "runs") { - if (runs && runs.length) onSelectRun(runs[0].id); - } else { - if (schedules && schedules.length) - onSelectRun(`schedule:${schedules[0].id}`); - } - }} - className="min-w-0 overflow-hidden" - > - - - Runs {runsCount} - - - Scheduled {schedulesCount} - - - - <> - - ( -
- onSelectRun && onSelectRun(run.id)} - /> -
- )} - /> - - -
- {schedules.map((s: GraphExecutionJobInfo) => ( -
- onSelectRun(`schedule:${s.id}`)} - /> -
- ))} -
- - - - ); -} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/SidebarRunsList.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/SidebarRunsList.tsx new file mode 100644 index 0000000000..ae4423931a --- /dev/null +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/SidebarRunsList.tsx @@ -0,0 +1,179 @@ +"use client"; + +import type { GraphExecutionJobInfo } from "@/app/api/__generated__/models/graphExecutionJobInfo"; +import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; +import { Skeleton } from "@/components/__legacy__/ui/skeleton"; +import { Text } from "@/components/atoms/Text/Text"; +import { ErrorCard } from "@/components/molecules/ErrorCard/ErrorCard"; +import { InfiniteList } from "@/components/molecules/InfiniteList/InfiniteList"; +import { + TabsLine, + TabsLineContent, + TabsLineList, + TabsLineTrigger, +} from "@/components/molecules/TabsLine/TabsLine"; +import { cn } from "@/lib/utils"; +import { AGENT_LIBRARY_SECTION_PADDING_X } from "../../../helpers"; +import { RunListItem } from "./components/RunListItem"; +import { ScheduleListItem } from "./components/ScheduleListItem"; +import { useSidebarRunsList } from "./useSidebarRunsList"; + +interface Props { + agent: LibraryAgent; + selectedRunId?: string; + onSelectRun: (id: string, tab?: "runs" | "scheduled") => void; + onClearSelectedRun?: () => void; + onTabChange?: (tab: "runs" | "scheduled") => void; + onCountsChange?: (info: { + runsCount: number; + schedulesCount: number; + loading?: boolean; + }) => void; +} + +export function SidebarRunsList({ + agent, + selectedRunId, + onSelectRun, + onClearSelectedRun, + onTabChange, + onCountsChange, +}: Props) { + const { + runs, + schedules, + runsCount, + schedulesCount, + error, + loading, + fetchMoreRuns, + hasMoreRuns, + isFetchingMoreRuns, + tabValue, + } = useSidebarRunsList({ + graphId: agent.graph_id, + onSelectRun, + onCountsChange, + }); + + if (error) { + return ; + } + + if (loading) { + return ( +
+ + + +
+ ); + } + + return ( + { + const value = v as "runs" | "scheduled"; + onTabChange?.(value); + if (value === "runs") { + if (runs && runs.length) { + onSelectRun(runs[0].id, "runs"); + } else { + onClearSelectedRun?.(); + } + } else { + if (schedules && schedules.length) { + onSelectRun(schedules[0].id, "scheduled"); + } else { + onClearSelectedRun?.(); + } + } + }} + className="flex min-h-0 flex-col overflow-hidden" + > + + + Tasks {runsCount} + + + Scheduled {schedulesCount} + + + Templates 0 + + + + <> + + ( +
+ onSelectRun && onSelectRun(run.id, "runs")} + /> +
+ )} + /> + + +
+ {schedules.length > 0 ? ( + schedules.map((s: GraphExecutionJobInfo) => ( +
+ onSelectRun(s.id, "scheduled")} + /> +
+ )) + ) : ( +
+ + No scheduled agents + +
+ )} +
+ + +
+
+ + No templates saved + +
+
+ + + + ); +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunIconWrapper.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunIconWrapper.tsx similarity index 100% rename from autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunIconWrapper.tsx rename to autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunIconWrapper.tsx diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunListItem.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunListItem.tsx similarity index 100% rename from autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunListItem.tsx rename to autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunListItem.tsx index 89137cbaf7..c038217f72 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunListItem.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunListItem.tsx @@ -1,10 +1,7 @@ "use client"; -import React from "react"; -import moment from "moment"; -import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta"; -import { RunSidebarCard } from "./RunSidebarCard"; import { AgentExecutionStatus } from "@/app/api/__generated__/models/agentExecutionStatus"; +import { GraphExecutionMeta } from "@/app/api/__generated__/models/graphExecutionMeta"; import { CheckCircleIcon, ClockIcon, @@ -13,7 +10,10 @@ import { WarningCircleIcon, XCircleIcon, } from "@phosphor-icons/react"; +import moment from "moment"; +import React from "react"; import { IconWrapper } from "./RunIconWrapper"; +import { RunSidebarCard } from "./RunSidebarCard"; const statusIconMap: Record = { INCOMPLETE: ( diff --git a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunSidebarCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunSidebarCard.tsx similarity index 72% rename from autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunSidebarCard.tsx rename to autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunSidebarCard.tsx index d5f0e09b65..eb163f7337 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/AgentRunsLists/components/RunSidebarCard.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/sidebar/SidebarRunsList/components/RunSidebarCard.tsx @@ -1,8 +1,8 @@ "use client"; -import React from "react"; -import { cn } from "@/lib/utils"; import { Text } from "@/components/atoms/Text/Text"; +import { cn } from "@/lib/utils"; +import React from "react"; interface RunListItemProps { title: string; @@ -22,21 +22,21 @@ export function RunSidebarCard({ return (