github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-01-07 22:33:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore: more updates

Browse Source
This commit is contained in:
Lluis Agusti
2026-01-02 17:50:06 +07:00
parent ee41302a50
commit ed2cc6154f
3 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionSubHeader/LibraryActionSubHeader.tsx
View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import { Text } from "@/components/atoms/Text/Text";
import LibrarySortMenu from "../LibrarySortMenu/LibrarySortMenu"; import LibrarySortMenu from "../LibrarySortMenu/LibrarySortMenu";
interface LibraryActionSubHeaderProps { interface LibraryActionSubHeaderProps {
@@ -10,17 +11,16 @@ export default function LibraryActionSubHeader({
agentCount, agentCount,
}: LibraryActionSubHeaderProps) { }: LibraryActionSubHeaderProps) {
return ( return (
<div className="flex items-center justify-between pb-[10px]"> <div className="flex items-baseline justify-between">
<div className="flex items-center gap-[10px] p-2"> <div className="flex items-baseline gap-4">
<span className="font-poppin w-[96px] text-[18px] font-semibold leading-[28px] text-neutral-800"> <Text variant="h4">My agents</Text>
My agents <Text
</span> variant="body"
<span
className="w-[70px] font-sans text-[14px] font-normal leading-6"
data-testid="agents-count" data-testid="agents-count"
className="text-zinc-500"
> >
{agentCount} agents {agentCount}
</span> </Text>
</div> </div>
<LibrarySortMenu /> <LibrarySortMenu />
</div> </div>

68
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
View File

@@ -1,25 +1,28 @@
"use client"; "use client";
import Link from "next/link"; import { OverflowText } from "@/components/atoms/OverflowText/OverflowText";
import Image from "next/image"; import { Text } from "@/components/atoms/Text/Text";
import { Heart } from "@phosphor-icons/react";
import { useState, useEffect } from "react";
import { getQueryClient } from "@/lib/react-query/queryClient"; import { getQueryClient } from "@/lib/react-query/queryClient";
import { HeartIcon } from "@phosphor-icons/react";
import { InfiniteData } from "@tanstack/react-query"; import { InfiniteData } from "@tanstack/react-query";
import Image from "next/image";
import NextLink from "next/link";
import { useEffect, useState } from "react";
import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
import { import {
getV2ListLibraryAgentsResponse,
getV2ListFavoriteLibraryAgentsResponse, getV2ListFavoriteLibraryAgentsResponse,
getV2ListLibraryAgentsResponse,
} from "@/app/api/__generated__/endpoints/library/library"; } from "@/app/api/__generated__/endpoints/library/library";
import BackendAPI, { LibraryAgentID } from "@/lib/autogpt-server-api"; import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent";
import { cn } from "@/lib/utils";
import { useToast } from "@/components/molecules/Toast/use-toast";
import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
import Avatar, { import Avatar, {
AvatarFallback, AvatarFallback,
AvatarImage, AvatarImage,
} from "@/components/atoms/Avatar/Avatar"; } from "@/components/atoms/Avatar/Avatar";
import { Link } from "@/components/atoms/Link/Link";
import { useToast } from "@/components/molecules/Toast/use-toast";
import BackendAPI, { LibraryAgentID } from "@/lib/autogpt-server-api";
import { cn } from "@/lib/utils";
import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag";
interface LibraryAgentCardProps { interface LibraryAgentCardProps {
agent: LibraryAgent; agent: LibraryAgent;
@@ -227,11 +230,11 @@ export default function LibraryAgentCard({
<div <div
data-testid="library-agent-card" data-testid="library-agent-card"
data-agent-id={id} data-agent-id={id}
className="group inline-flex w-full max-w-[434px] flex-col items-start justify-start gap-2.5 rounded-[26px] bg-white transition-all duration-300 hover:shadow-lg dark:bg-transparent dark:hover:shadow-gray-700" className="group inline-flex h-[275px] w-full max-w-[434px] flex-col items-start justify-start gap-2.5 rounded-[26px] border border-zinc-100 bg-white transition-all duration-300 hover:shadow-md"
> >
<Link <NextLink
href={`/library/agents/${id}`} href={`/library/agents/${id}`}
className="relative h-[200px] w-full overflow-hidden rounded-[20px]" className="relative h-[123px] w-full flex-shrink-0 overflow-hidden rounded-t-[20px] no-underline"
> >
{!image_url ? ( {!image_url ? (
<div <div
@@ -272,7 +275,7 @@ export default function LibraryAgentCard({
isFavorite ? "Remove from favorites" : "Add to favorites" isFavorite ? "Remove from favorites" : "Add to favorites"
} }
> >
<Heart <HeartIcon
size={20} size={20}
weight={isFavorite ? "fill" : "regular"} weight={isFavorite ? "fill" : "regular"}
className={cn( className={cn(
@@ -285,7 +288,7 @@ export default function LibraryAgentCard({
</button> </button>
)} )}
<div className="absolute bottom-4 left-4"> <div className="absolute bottom-4 left-4">
<Avatar className="h-16 w-16"> <Avatar className="h-12 w-12">
<AvatarImage <AvatarImage
src={ src={
creator_image_url creator_image_url
@@ -294,40 +297,35 @@ export default function LibraryAgentCard({
} }
alt={`${name} creator avatar`} alt={`${name} creator avatar`}
/> />
<AvatarFallback size={64}>{name.charAt(0)}</AvatarFallback> <AvatarFallback size={48}>{name.charAt(0)}</AvatarFallback>
</Avatar> </Avatar>
</div> </div>
</Link> </NextLink>
<div className="flex w-full flex-1 flex-col px-4 py-4"> <div className="flex w-full flex-1 flex-col px-4 pb-4 pt-1">
<Link href={`/library/agents/${id}`}> <Link href={`/library/agents/${id}`}>
<h3 className="mb-2 line-clamp-2 font-poppins text-2xl font-semibold leading-tight text-[#272727] dark:text-neutral-100"> <OverflowText
{name} value={name}
</h3> variant="body"
className="mb-4 font-sans text-[1.125rem] tracking-normal"
/>
<p className="line-clamp-3 flex-1 text-sm text-gray-600 dark:text-gray-400"> <Text
variant="body"
className="line-clamp-2 text-ellipsis text-zinc-500"
>
{description} {description}
</p> </Text>
</Link> </Link>
<div className="flex-grow" /> <div className="flex-grow" />
{/* Spacer */} {/* Spacer */}
<div className="items-between mt-4 flex w-full justify-between gap-3"> <div className="items-between mt-4 flex w-full justify-between gap-3">
<Link <Link href={`/library/agents/${id}`}>See runs</Link>
href={`/library/agents/${id}`}
className="text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
>
See runs
</Link>
{can_access_graph && ( {can_access_graph && (
<Link <Link href={`/build?flowID=${graph_id}`}>Open in builder</Link>
href={`/build?flowID=${graph_id}`}
className="text-lg font-semibold text-neutral-800 hover:underline dark:text-neutral-200"
>
Open in builder
</Link>
)} )}
</div> </div>
</div> </div>

2
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx
View File

@@ -33,7 +33,7 @@ export function LibraryAgentList() {
hasNextPage={hasNextPage} hasNextPage={hasNextPage}
loader={<LoadingSpinner />} loader={<LoadingSpinner />}
> >
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{agents.map((agent) => ( {agents.map((agent) => (
<LibraryAgentCard key={agent.id} agent={agent} /> <LibraryAgentCard key={agent.id} agent={agent} />
))} ))}