Merge branch 'dev' into abhimanyuyadav/library-ui-redesign

- Added InfiniteScroll component to LibraryAgentList for improved agent loading experience.
- Removed deprecated scroll threshold logic from useLibraryAgentList.
- Updated data fetching logic to handle pagination and loading states more effectively.
- Cleaned up unused variables and improved code readability.

This enhancement allows for a smoother user experience when browsing agents, as more agents are loaded dynamically as the user scrolls.

autogpt_platform/frontend/src/app/(platform)/layout.tsx

@@ -4,8 +4,9 @@ import { ReactNode } from "react";
 export default function PlatformLayout({ children }: { children: ReactNode }) {
   return (
     <>
+      {/* FRONTEND-TODO: We need to add different color for different pages */}
       <Navbar />
-      <main>{children}</main>
+      <main className="flex-1 bg-lightGrey">{children}</main>
     </>
   );
 }

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader2/LibraryActionHeader2.tsx

@@ -0,0 +1,15 @@
+import { Text } from "@/components/atoms/Text/Text";
+
+export const LibraryActionHeader2 = () => {
+  return (
+    <div>
+      {/* Information */}
+      <div>
+        <Text variant="h4">Hey, <span className="text-purple-600">Abhimanyu</span></Text>
+        <Text variant="h2" className="!font-medium !leading-10">Welcome to your dashboard</Text>
+      </div>
+
+      {/* Search bar */}
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionSubHeader2/LibraryActionSubHeader2.tsx

@@ -0,0 +1,11 @@
+import { Text } from "@/components/atoms/Text/Text";
+
+export const LibraryActionSubHeader2 = () => {
+  return (
+    <div className="mt-9">
+      <Text variant="small-medium">Your agents</Text>
+
+      {/* Sort by */}
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard2/LibraryAgentCard2.tsx

@@ -0,0 +1,105 @@
+"use client";
+import { Link } from "@/components/atoms/Link/Link";
+import { Text } from "@/components/atoms/Text/Text";
+import { Separator } from "@/components/ui/separator";
+import { CaretCircleRightIcon, CircleNotchIcon } from "@phosphor-icons/react";
+import Image from "next/image";
+
+interface LibraryAgentCard2Props {
+  id: string;
+  title: string;
+  imageUrl: string;
+  lastRunTime: string;
+  totalRuns: number;
+  runningAgents: number;
+  source: string;
+}
+
+export const LibraryAgentCard2 = ({
+  id,
+  title,
+  imageUrl,
+  lastRunTime,
+  totalRuns,
+  runningAgents,
+  source = "Marketplace",
+}: LibraryAgentCard2Props) => {
+  return (
+    <div className="h-44 space-y-2 rounded-medium bg-white p-2 pl-3">
+      {/* Destination */}
+      <div className="flex items-center gap-2">
+        <span className="h-3 w-3 rounded-full bg-green-400" />
+        <Text
+          variant="small-medium"
+          className="uppercase !leading-5 tracking-[0.1em] !text-zinc-400"
+        >
+          {source}
+        </Text>
+      </div>
+
+      {/* Information */}
+      <div className="flex gap-4 pb-1">
+        <div className="flex flex-1 flex-col justify-between">
+          <Text variant="large-medium" className="line-clamp-2">
+            {title}
+          </Text>
+          <div className="flex flex-row justify-between gap-2">
+            <Text variant="small" className="flex-1 !leading-5 !text-zinc-400">
+              {lastRunTime}
+            </Text>
+            <Text variant="small" className="flex-1 !leading-5 !text-zinc-400">
+              {totalRuns} runs
+            </Text>
+          </div>
+        </div>
+        <div className="relative aspect-video h-[4.75rem] overflow-hidden rounded-small">
+          <Image
+            src={imageUrl}
+            alt="Agent-image"
+            fill
+            className="object-cover"
+          />
+        </div>
+      </div>
+
+      <Separator className="border-zinc-200" />
+
+      {/* Actions */}
+      <div className="flex gap-2">
+        <Link
+          href={`/library/agent/${id}`}
+          className="flex w-1/3 flex-row gap-2 !text-xs"
+        >
+          <span className="group inline-flex items-center gap-1 text-neutral-800">
+            See runs
+            <CaretCircleRightIcon
+              size={20}
+              className="transition-transform duration-200 group-hover:translate-x-1"
+            />
+          </span>
+        </Link>
+        <Link
+          href={`/library/agent/${id}`}
+          className="flex w-1/3 flex-row gap-2 !text-xs"
+        >
+          <span className="group inline-flex items-center gap-1 text-neutral-800">
+            Open in builder
+            <CaretCircleRightIcon
+              size={20}
+              className="transition-transform duration-200 group-hover:translate-x-1"
+            />
+          </span>
+        </Link>
+        {runningAgents > 0 && (
+          <Text
+            variant="small"
+            className="flex w-1/3 items-center justify-end gap-1 !leading-5 !text-zinc-400"
+          >
+            {runningAgents} agent{runningAgents !== 1 ? "s" : ""} running
+            <CircleNotchIcon size={20} className="animate-spin" />
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList2/LibraryAgentList2.tsx

@@ -0,0 +1,76 @@
+import { LibraryAgentCard2 } from "../LibraryAgentCard2/LibraryAgentCard2";
+
+export const LibraryAgentList2 = () => {
+  const agents = [
+    {
+      id: "1",
+      title: "Web Scraping Assistant",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "2 hours ago",
+      totalRuns: 156,
+      runningAgents: 2,
+      source: "From Marketplace",
+    },
+    {
+      id: "2",
+      title: "Data Analysis Helper",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "5 hours ago",
+      totalRuns: 89,
+      runningAgents: 1,
+      source: "Built by you",
+    },
+    {
+      id: "3",
+      title: "Content Generator",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "1 day ago",
+      totalRuns: 234,
+      runningAgents: 3,
+      source: "From Marketplace",
+    },
+    {
+      id: "4",
+      title: "Code Review Bot",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "3 days ago",
+      totalRuns: 67,
+      runningAgents: 0,
+      source: "Built by you",
+    },
+    {
+      id: "5",
+      title: "Social Media Manager",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "1 week ago",
+      totalRuns: 445,
+      runningAgents: 1,
+      source: "From Marketplace",
+    },
+    {
+      id: "6",
+      title: "Customer Support Agent",
+      imageUrl: "/placeholder.png",
+      lastRunTime: "2 weeks ago",
+      totalRuns: 178,
+      runningAgents: 0,
+      source: "Built by you",
+    },
+  ];
+  return (
+    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+      {agents.map((agent) => (
+        <LibraryAgentCard2
+          key={agent.id}
+          id={agent.id}
+          title={agent.title}
+          imageUrl={agent.imageUrl}
+          lastRunTime={agent.lastRunTime}
+          totalRuns={agent.totalRuns}
+          runningAgents={agent.runningAgents}
+          source={agent.source}
+        />
+      ))}
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/library/components/LibraryMainView/LibraryMainView.tsx

@@ -0,0 +1,15 @@
+import { Separator } from "@/components/ui/separator";
+import { LibraryActionHeader2 } from "../LibraryActionHeader2/LibraryActionHeader2";
+import { LibraryAgentList2 } from "../LibraryAgentList2/LibraryAgentList2";
+import { LibraryActionSubHeader2 } from "../LibraryActionSubHeader2/LibraryActionSubHeader2";
+
+export const LibraryMainView = () => {
+  return (
+    <div>
+      <LibraryActionHeader2 />
+      <LibraryActionSubHeader2 />
+      <Separator className="mt-2.5 mb-4"/>
+      <LibraryAgentList2 />
+    </div>
+  );
+};

autogpt_platform/frontend/src/app/(platform)/library/page.tsx

@@ -1,42 +1,9 @@
-"use client";
-import Link from "next/link";
+import { LibraryMainView } from "./components/LibraryMainView/LibraryMainView";
 
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-  ArrowBottomRightIcon,
-  QuestionMarkCircledIcon,
-} from "@radix-ui/react-icons";
-
-import LibraryActionHeader from "./components/LibraryActionHeader/LibraryActionHeader";
-import LibraryAgentList from "./components/LibraryAgentList/LibraryAgentList";
-import { LibraryPageStateProvider } from "./components/state-provider";
-
-/**
- * LibraryPage Component
- * Main component that manages the library interface including agent listing and actions
- */
 export default function LibraryPage() {
   return (
-    <main className="pt-160 container min-h-screen space-y-4 pb-20 pt-16 sm:px-8 md:px-12">
-      <LibraryPageStateProvider>
-        <LibraryActionHeader />
-        <LibraryAgentList />
-      </LibraryPageStateProvider>
-
-      <Alert
-        variant="default"
-        className="fixed bottom-2 left-1/2 hidden max-w-4xl -translate-x-1/2 md:block"
-      >
-        <AlertDescription className="text-center">
-          Prefer the old experience? Click{" "}
-          <Link href="/monitoring" className="underline">
-            here
-          </Link>{" "}
-          to go to it. Please do let us know why by clicking the{" "}
-          <QuestionMarkCircledIcon className="inline-block size-6 rounded-full bg-[rgba(65,65,64,1)] p-1 align-bottom text-neutral-50" />{" "}
-          in the bottom right corner <ArrowBottomRightIcon className="inline" />
-        </AlertDescription>
-      </Alert>
-    </main>
+    <section className="p-4">
+      <LibraryMainView />
+    </section>
   );
 }