github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

small fixes

Browse Source
This commit is contained in:
Abhimanyu Yadav
2025-04-30 20:38:41 +05:30
parent 234ce73868
commit 2d5f541743
22 changed files with 226 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
autogpt_platform/frontend/src/components/agptui/AgentInfo.stories.tsx
View File

@@ -60,33 +60,6 @@ Key features include:
},
};
export const WithInteraction: Story = {
args: {
...Default.args,
name: "Task Planner Pro",
creator: "Productivity AI",
shortDescription: "Plan and organize your tasks efficiently with AI",
longDescription:
"An intelligent task management system that helps you organize, prioritize, and complete your tasks more efficiently. Features smart scheduling and AI-powered suggestions.",
rating: 4.2,
runs: 50000,
categories: ["Productivity", "Task Management", "AI"],
lastUpdated: "3 days ago",
version: "1.5.2",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
// Test add to library button
const addButton = canvas.getByText("Download Agent as File");
await userEvent.hover(addButton);
// Test category interaction
const category = canvas.getByText("Productivity");
await userEvent.hover(category);
},
};
export const ExtraLongName: Story = {
args: {
...Default.args,
@@ -175,38 +148,6 @@ export const HighRuns: Story = {
},
};
export const ZeroRuns: Story = {
args: {
...Default.args,
name: "Brand New Agent",
creator: "First-time Creator",
runs: 0,
lastUpdated: "Just now",
version: "0.0.1",
},
};
export const FullRating: Story = {
args: {
...Default.args,
rating: 5.0,
},
};
export const ZeroRating: Story = {
args: {
...Default.args,
rating: 0,
},
};
export const DecimalRating: Story = {
args: {
...Default.args,
rating: 3.5,
},
};
export const Downloading: Story = {
args: {
...Default.args,
@@ -241,3 +182,30 @@ export const Downloading: Story = {
await expect(loadingButton).toBeInTheDocument();
},
};
export const TestingInteractions: Story = {
args: {
...Default.args,
name: "Task Planner Pro",
creator: "Productivity AI",
shortDescription: "Plan and organize your tasks efficiently with AI",
longDescription:
"An intelligent task management system that helps you organize, prioritize, and complete your tasks more efficiently. Features smart scheduling and AI-powered suggestions.",
rating: 4.2,
runs: 50000,
categories: ["Productivity", "Task Management", "AI"],
lastUpdated: "3 days ago",
version: "1.5.2",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
// Test add to library button
const addButton = canvas.getByText("Download Agent as File");
await userEvent.hover(addButton);
// Test category interaction
const category = canvas.getByText("Productivity");
await userEvent.hover(category);
},
};

48
autogpt_platform/frontend/src/components/agptui/AgentTable.stories.tsx
View File

@@ -85,7 +85,7 @@ export const Default: Story = {
},
};
export const LongAgentNames: Story = {
export const LongContent: Story = {
args: {
...Default.args,
agents: [
@@ -93,30 +93,20 @@ export const LongAgentNames: Story = {
...sampleAgents[0],
agentName:
"Super Advanced Artificial Intelligence Code Generator and Optimizer with Machine Learning Capabilities",
sub_heading:
"A very advanced AI system that can generate and optimize code using cutting-edge machine learning techniques",
},
...sampleAgents.slice(1),
],
},
};
export const LongDescriptions: Story = {
args: {
...Default.args,
agents: [
{
...sampleAgents[0],
description:
"This is an extremely advanced artificial intelligence code generator that can write clean, efficient, and optimized code in multiple programming languages. It utilizes state-of-the-art machine learning algorithms to understand requirements and generate appropriate solutions while following best practices and design patterns. The agent can handle complex programming tasks, debug existing code, and suggest improvements to enhance performance and readability.",
},
{
...sampleAgents[1],
agentName:
"Super Advanced Artificial Intelligence Code Generator and Optimizer with Machine Learning Capabilities",
description:
"A sophisticated data analysis tool capable of processing petabytes of structured and unstructured data to extract meaningful insights and patterns. This agent leverages advanced statistical methods, machine learning techniques, and data visualization capabilities to transform raw data into actionable business intelligence. It can handle time series analysis, predictive modeling, anomaly detection, and generate comprehensive reports with minimal human intervention.",
},
{
...sampleAgents[2],
agentName:
"Super Advanced Artificial Intelligence Code Generator and Optimizer with Machine Learning Capabilities",
description:
"This specialized UI/UX design assistant creates beautiful, accessible, and intuitive user interfaces for web and mobile applications. By combining principles of human-centered design with modern aesthetic sensibilities, the agent produces wireframes, mockups, and interactive prototypes that enhance user engagement and satisfaction. It follows design systems, ensures consistent branding, and optimizes layouts for various screen sizes while maintaining accessibility standards.",
},
@@ -138,19 +128,6 @@ export const ManyAgents: Story = {
},
};
export const WithInteraction: Story = {
args: {
...Default.args,
agents: sampleAgents,
},
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
const checkboxes = canvas.getAllByTestId("dropdown-button");
await expect(checkboxes.length).toBeGreaterThan(0);
},
};
export const EmptyTableTest: Story = {
args: {
...Default.args,
@@ -166,22 +143,15 @@ export const EmptyTableTest: Story = {
},
};
export const ResponsiveTest: Story = {
export const TestingInteractions: Story = {
args: {
...Default.args,
agents: sampleAgents,
},
parameters: {
viewport: {
defaultViewport: "mobile2",
},
},
play: async ({ canvasElement }) => {
play: async ({ canvasElement, args }) => {
const canvas = within(canvasElement);
// In mobile view, cards should be visible instead of table
// Check for at least one card
const cards = canvas.getAllByTestId("agent-table-card");
await expect(cards.length).toBe(3);
const checkboxes = canvas.getAllByTestId("dropdown-button");
await expect(checkboxes.length).toBeGreaterThan(0);
},
};

2
autogpt_platform/frontend/src/components/agptui/AgentTableRow.tsx
View File

@@ -114,7 +114,7 @@ export const AgentTableRow: React.FC<AgentTableRowProps> = ({
/>
</div>
<div className="flex flex-col">
<h3 className="font-sans text-sm font-medium text-neutral-800">
<h3 className="line-clamp-2 font-sans text-sm font-medium text-neutral-800">
{agentName}
</h3>
<p className="line-clamp-2 font-sans text-sm font-normal text-neutral-600">

11
autogpt_platform/frontend/src/components/agptui/BecomeACreator.stories.tsx
View File

@@ -33,16 +33,7 @@ export const Default: Story = {
},
};
export const CustomText: Story = {
args: {
title: "Become a Creator Today!",
description: "Share your ideas and build amazing AI agents with us",
buttonText: "Start Creating",
onButtonClick: () => console.log("Custom button clicked"),
},
};
export const WithInteraction: Story = {
export const TestingInteractions: Story = {
args: {
...Default.args,
},

31
autogpt_platform/frontend/src/components/agptui/BreadCrumbs.stories.tsx
View File

@@ -48,7 +48,23 @@ export const LongPath: Story = {
},
};
export const WithInteraction: Story = {
export const LongNames: Story = {
args: {
items: [
{ name: "Home", link: "/" },
{
name: "AI-Powered Writing Assistants, AI-Powered Writing Assistants ",
link: "/ai-writing-assistants",
},
{
name: "Advanced Grammar and Style Checker",
link: "/ai-writing-assistants/grammar-style-checker",
},
],
},
};
export const TestingInteractions: Story = {
args: {
items: [
{ name: "Home", link: "/" },
@@ -64,16 +80,3 @@ export const WithInteraction: Story = {
await userEvent.click(homeLink);
},
};
export const LongNames: Story = {
args: {
items: [
{ name: "Home", link: "/" },
{ name: "AI-Powered Writing Assistants", link: "/ai-writing-assistants" },
{
name: "Advanced Grammar and Style Checker",
link: "/ai-writing-assistants/grammar-style-checker",
},
],
},
};

2
autogpt_platform/frontend/src/components/agptui/Button.tsx
View File

@@ -28,7 +28,7 @@ const buttonVariants = cva(
sm: "h-8 px-3 py-1.5 rounded-full text-xs",
lg: "h-12 px-5 py-2.5 rounded-full text-lg",
primary:
"h-10 w-28 rounded-full sm:h-12 sm:w-32 md:h-[4.375rem] md:w-[11rem] lg:h-[3.125rem] lg:w-[7rem]",
"h-10 w-28 rounded-full sm:h-12 sm:w-32 md:h-[4.375rem] md:w-[11rem] lg:h-[3.125rem] lg:w-[7rem] flex items-center justify-center text-xl",
icon: "h-10 w-10 justify-center",
card: "h-12 p-5 agpt-rounded-card justify-center text-lg",
},

52
autogpt_platform/frontend/src/components/agptui/CreatorCard.stories.tsx
View File

@@ -50,62 +50,18 @@ export const NoImage: Story = {
},
};
export const LongName: Story = {
export const LongContent: Story = {
args: {
index: 1,
creatorName: "Alexandria Rodriguez-Fitzgerald Johnson III",
creatorImage: defaultAvatarImage,
bio: "AI enthusiast with a background in computational linguistics.",
agentsUploaded: 8,
bio: "Excited to start my journey in AI agent development! I have a background in computer science and machine learning, with a special interest in creating agents that can assist with everyday tasks and solve complex problems efficiently.",
agentsUploaded: 500000,
onClick: () => console.log("LongName CreatorCard clicked"),
},
};
export const LongBio: Story = {
args: {
index: 1,
creatorName: "Jane Smith",
creatorImage: defaultAvatarImage,
bio: "Excited to start my journey in AI agent development! I have a background in computer science and machine learning, with a special interest in creating agents that can assist with everyday tasks and solve complex problems efficiently.",
agentsUploaded: 1,
onClick: () => console.log("LongBio CreatorCard clicked"),
},
};
export const ExperiencedCreator: Story = {
args: {
index: 2,
creatorName: "Alex Johnson",
creatorImage: defaultAvatarImage,
bio: "Veteran AI researcher with a focus on natural language processing and machine learning.",
agentsUploaded: 500000,
onClick: () => console.log("ExperiencedCreator CreatorCard clicked"),
},
};
export const ZeroAgents: Story = {
args: {
index: 3,
creatorName: "New Creator",
creatorImage: defaultAvatarImage,
bio: "Just joined the platform and excited to create my first agent!",
agentsUploaded: 0,
onClick: () => console.log("ZeroAgents CreatorCard clicked"),
},
};
export const MobileView: Story = {
args: {
...Default.args,
},
parameters: {
viewport: {
defaultViewport: "mobile2",
},
},
};
export const WithInteraction: Story = {
export const TestingInteractions: Story = {
args: {
index: 3,
creatorName: "Sam Brown",

34
autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.stories.tsx
View File

@@ -36,24 +36,24 @@ export const Default: Story = {
},
};
export const NewCreator: Story = {
export const LongContent: Story = {
args: {
username: "AI Enthusiast",
handle: "ai_newbie",
username: "This Is An Extremel Long Username To Test",
handle: "this_is_an_extremely_long_there_what",
avatarSrc: "https://example.com/avatar2.jpg",
categories: ["AI", "Technology"],
averageRating: 0,
totalRuns: 0,
},
};
export const ExperiencedCreator: Story = {
args: {
username: "Tech Master",
handle: "techmaster",
avatarSrc: "https://example.com/avatar3.jpg",
categories: ["AI", "Development", "Education"],
averageRating: 4.9,
totalRuns: 50000,
categories: [
"Artificial Intelligence",
"Machine Learning",
"Neural Networks",
"Deep Learning",
"Natural Language Processing",
"Computer Vision",
"Robotics",
"Data Science",
"Cloud Computing",
"Internet of Things",
],
averageRating: 4.8888888888,
totalRuns: 1000000000,
},
};

2
autogpt_platform/frontend/src/components/agptui/CreatorInfoCard.tsx
View File

@@ -22,7 +22,7 @@ export const CreatorInfoCard: React.FC<CreatorInfoCardProps> = ({
}) => {
return (
<div
className="inline-flex h-auto min-h-[32rem] w-full max-w-[440px] flex-col items-start justify-between rounded-[26px] bg-violet-100 p-4 dark:bg-violet-900 sm:min-h-[40rem] sm:w-[440px] sm:p-6"
className="inline-flex h-auto min-h-[32rem] w-full max-w-[440px] flex-col items-start justify-between overflow-hidden rounded-[26px] bg-violet-100 p-4 dark:bg-violet-900 sm:min-h-[40rem] sm:w-[440px] sm:p-6"
role="article"
aria-label={`Creator profile for ${username}`}
>

148
autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.stories.tsx
View File

@@ -66,7 +66,65 @@ export const Default: Story = {
},
};
export const WithInteraction: Story = {
export const ExtraLarge: Story = {
args: {
agent: {
agent_name:
"Universal Language Translator Pro with Advanced Neural Network Technology and Cross-Cultural Communication Capabilities",
sub_heading:
"Breaking language barriers with cutting-edge AI translation technology that revolutionizes global communication for businesses and individuals across continents while preserving cultural nuances and contextual meanings",
description:
"Experience seamless communication across 150+ languages with our advanced neural translation engine. Perfect for international businesses, travelers, and language enthusiasts. Features real-time conversation translation, document processing, and cultural context adaptation to ensure your message is delivered exactly as intended in any language. Our proprietary machine learning algorithms continuously improve translation accuracy with each interaction, adapting to regional dialects and specialized terminology. The system includes voice recognition capabilities, image-to-text translation for signs and documents, and can operate offline in emergency situations where internet connectivity is limited. With dedicated mobile apps for iOS and Android plus browser extensions, you'll never encounter language barriers again, whether in business negotiations, academic research, or while exploring new destinations.",
agent_image: Default.args.agent.agent_image,
creator_avatar: Default.args.agent.creator_avatar,
creator:
"Global Linguistics Technologies International Corporation and Research Institute for Cross-Cultural Communication",
runs: 1000000000,
rating: 4.9,
slug: "universal-translator-pro-with-advanced-neural-networks-and-multilingual-support-for-global-enterprise-solutions-and-individual-travelers",
},
backgroundColor: BACKGROUND_COLORS[2],
},
};
export const MinimalText: Story = {
args: {
agent: {
agent_name: "A",
sub_heading: "B",
description: "C",
agent_image: Default.args.agent.agent_image,
creator_avatar: Default.args.agent.creator_avatar,
creator: "D",
runs: 0,
rating: 0,
slug: Default.args.agent.slug,
},
backgroundColor: BACKGROUND_COLORS[0],
},
};
export const MissingImage: Story = {
args: {
agent: {
...Default.args.agent,
agent_image: "",
},
backgroundColor: BACKGROUND_COLORS[1],
},
};
export const MissingAvatar: Story = {
args: {
agent: {
...Default.args.agent,
creator_avatar: "",
},
backgroundColor: BACKGROUND_COLORS[2],
},
};
export const TestingInteractions: Story = {
args: {
agent: {
...Default.args.agent,
@@ -99,91 +157,3 @@ export const WithInteraction: Story = {
await new Promise((resolve) => setTimeout(resolve, 300));
},
};
export const ExtraLarge: Story = {
args: {
agent: {
agent_name:
"Universal Language Translator Pro with Advanced Neural Network Technology and Cross-Cultural Communication Capabilities",
sub_heading:
"Breaking language barriers with cutting-edge AI translation technology that revolutionizes global communication for businesses and individuals across continents while preserving cultural nuances and contextual meanings",
description:
"Experience seamless communication across 150+ languages with our advanced neural translation engine. Perfect for international businesses, travelers, and language enthusiasts. Features real-time conversation translation, document processing, and cultural context adaptation to ensure your message is delivered exactly as intended in any language. Our proprietary machine learning algorithms continuously improve translation accuracy with each interaction, adapting to regional dialects and specialized terminology. The system includes voice recognition capabilities, image-to-text translation for signs and documents, and can operate offline in emergency situations where internet connectivity is limited. With dedicated mobile apps for iOS and Android plus browser extensions, you'll never encounter language barriers again, whether in business negotiations, academic research, or while exploring new destinations.",
agent_image: Default.args.agent.agent_image,
creator_avatar: Default.args.agent.creator_avatar,
creator:
"Global Linguistics Technologies International Corporation and Research Institute for Cross-Cultural Communication",
runs: 1000000,
rating: 4.9,
slug: "universal-translator-pro-with-advanced-neural-networks-and-multilingual-support-for-global-enterprise-solutions-and-individual-travelers",
},
backgroundColor: BACKGROUND_COLORS[2],
},
};
export const MinimalText: Story = {
args: {
agent: {
agent_name: "A",
sub_heading: "B",
description: "C",
agent_image: Default.args.agent.agent_image,
creator_avatar: Default.args.agent.creator_avatar,
creator: "D",
runs: 0,
rating: 0,
slug: Default.args.agent.slug,
},
backgroundColor: BACKGROUND_COLORS[0],
},
};
export const FullRating: Story = {
args: {
agent: {
...Default.args.agent,
rating: 5,
},
backgroundColor: BACKGROUND_COLORS[1],
},
};
export const DecimalRating: Story = {
args: {
agent: {
...Default.args.agent,
rating: 3.5,
},
backgroundColor: BACKGROUND_COLORS[2],
},
};
export const LargeRuns: Story = {
args: {
agent: {
...Default.args.agent,
runs: 1000000000,
},
backgroundColor: BACKGROUND_COLORS[0],
},
};
export const MissingImage: Story = {
args: {
agent: {
...Default.args.agent,
agent_image: "",
},
backgroundColor: BACKGROUND_COLORS[1],
},
};
export const MissingAvatar: Story = {
args: {
agent: {
...Default.args.agent,
creator_avatar: "",
},
backgroundColor: BACKGROUND_COLORS[2],
},
};

14
autogpt_platform/frontend/src/components/agptui/FilterChips.stories.tsx
View File

@@ -52,22 +52,10 @@ export const LongBadgeNames: Story = {
args: {
badges: [
"Machine Learning",
"Natural Language Processing",
"Natural Language Processing, Natural Language Processing, Natural Language Processing",
"Computer Vision",
"Data Science",
],
multiSelect: true,
},
};
export const MobileView: Story = {
args: {
badges: defaultBadges,
multiSelect: true,
},
parameters: {
viewport: {
defaultViewport: "mobile2",
},
},
};

6
autogpt_platform/frontend/src/components/agptui/MobileNavBar.stories.tsx
View File

@@ -6,7 +6,11 @@ import { IconType } from "../ui/icons";
const meta = {
title: "AGPT UI/Mobile Nav Bar",
component: MobileNavBar,
parameters: {
viewport: {
defaultViewport: "mobile2",
},
},
tags: ["autodocs"],
argTypes: {
userName: { control: "text" },

10
autogpt_platform/frontend/src/components/agptui/MobileNavBar.tsx
View File

@@ -154,20 +154,20 @@ export const MobileNavBar: React.FC<MobileNavBarProps> = ({
className="w-screen rounded-b-2xl bg-white/40 backdrop-blur-xl dark:bg-neutral-900"
>
<div className="mb-4 inline-flex w-full items-end justify-start gap-4">
<Avatar className="h-14 w-14 border border-[#474747] dark:border-[#cfcfcf]">
<Avatar className="h-14 w-14 self-start dark:border-[#cfcfcf]">
<AvatarImage
src={avatarSrc}
alt={userName || "Unknown User"}
/>
<AvatarFallback>
<AvatarFallback size={56}>
{userName?.charAt(0) || "U"}
</AvatarFallback>
</Avatar>
<div className="relative h-14 w-full">
<div className="absolute left-0 top-0 text-lg font-semibold leading-7 text-[#474747] dark:text-[#cfcfcf]">
<div className="relative w-full">
<div className="text-lg font-semibold leading-7 text-[#474747] dark:text-[#cfcfcf]">
{userName || "Unknown User"}
</div>
<div className="absolute left-0 top-6 font-inter text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf]">
<div className="top-6 font-inter text-base font-normal leading-7 text-[#474747] dark:text-[#cfcfcf]">
{userEmail || "No Email Set"}
</div>
</div>

47
autogpt_platform/frontend/src/components/agptui/Navbar.stories.tsx
View File

@@ -103,50 +103,3 @@ export const Default: Story = {
menuItemGroups: defaultMenuItemGroups,
},
};
export const WithActiveLink: Story = {
args: {
...Default.args,
// activeLink: "/library",
},
};
export const LongUserName: Story = {
args: {
...Default.args,
// avatarSrc: "https://avatars.githubusercontent.com/u/987654321?v=4",
},
};
export const NoAvatar: Story = {
args: {
...Default.args,
// avatarSrc: undefined,
},
};
export const NotLoggedIn: Story = {
args: {
...Default.args,
// isLoggedIn: false,
// avatarSrc: undefined,
},
};
export const WithCredits: Story = {
args: {
...Default.args,
},
};
export const WithLargeCredits: Story = {
args: {
...Default.args,
},
};
export const WithZeroCredits: Story = {
args: {
...Default.args,
},
};

2
autogpt_platform/frontend/src/components/agptui/Navbar.tsx
View File

@@ -49,7 +49,7 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
return (
<>
<nav className="sticky top-0 z-40 mx-[16px] hidden h-16 w-full items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
<nav className="sticky top-0 z-40 hidden h-16 w-full items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
<div className="flex items-center gap-11">
<div className="relative h-10 w-20">
<IconAutoGPTLogo className="h-full w-full" />

10
autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.stories.tsx
View File

@@ -4,9 +4,13 @@ import { ProfileInfoForm } from "./ProfileInfoForm";
const meta: Meta<typeof ProfileInfoForm> = {
title: "AGPT UI/Profile/Profile Info Form",
component: ProfileInfoForm,
parameters: {
layout: "fullscreen",
},
decorators: [
(Story) => (
<div className="flex h-screen w-full justify-center p-4">
<Story />
</div>
),
],
tags: ["autodocs"],
argTypes: {
profile: {

120
autogpt_platform/frontend/src/components/agptui/ProfileInfoForm.tsx
View File

@@ -11,6 +11,9 @@ import { CreatorDetails, ProfileDetails } from "@/lib/autogpt-server-api/types";
import { Separator } from "@/components/ui/separator";
import useSupabase from "@/hooks/useSupabase";
import { useBackendAPI } from "@/lib/autogpt-server-api/context";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Textarea } from "../ui/textarea";
export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
const [isSubmitting, setIsSubmitting] = useState(false);
@@ -98,8 +101,8 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
};
return (
<div className="w-full min-w-[800px] px-4 sm:px-8">
<h1 className="font-circular mb-6 text-[28px] font-normal text-neutral-900 dark:text-neutral-100 sm:mb-8 sm:text-[35px]">
<div className="md:min-w-md w-full px-4 sm:px-8">
<h1 className="mb-6 font-poppins text-4xl font-medium text-neutral-900">
Profile
</h1>
@@ -117,8 +120,8 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
<IconPersonFill className="absolute left-[30px] top-[24px] h-[77.80px] w-[70.63px] text-[#7e7e7e] dark:text-[#999999]" />
)}
</div>
<label className="font-circular mt-11 inline-flex h-[43px] items-center justify-center rounded-[22px] bg-[#15171A] px-6 py-2 text-sm font-normal text-white transition-colors hover:bg-[#2D2F34] dark:bg-white dark:text-[#15171A] dark:hover:bg-[#E5E5E5]">
<input
<Label className="mt-11 inline-flex h-[43px] items-center justify-center rounded-[22px] bg-[#15171A] px-6 py-2 font-sans text-sm font-normal text-white transition-colors hover:cursor-pointer hover:bg-[#2D2F34] dark:bg-white dark:text-[#15171A] dark:hover:bg-[#E5E5E5]">
<Input
type="file"
accept="image/*"
className="hidden"
@@ -130,21 +133,22 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
}}
/>
Edit photo
</label>
</Label>
</div>
<form className="space-y-4 sm:space-y-6" onSubmit={submitForm}>
<div className="w-full">
<label className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
Display name
</label>
<div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
<input
<form className="space-y-8" onSubmit={submitForm}>
{/* Top section */}
<section className="space-y-6">
<div className="w-full space-y-1.5">
<Label className="block font-sans text-base font-medium text-[#020617]">
Display name
</Label>
<Input
type="text"
name="displayName"
defaultValue={profileData.name}
placeholder="Enter your display name"
className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
className="h-11 w-full rounded-full border border-[#E2E8F0] px-4 py-2.5 font-inter text-base font-normal text-[#7e7e7e] outline-none"
onChange={(e) => {
const newProfileData = {
...profileData,
@@ -154,19 +158,17 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
}}
/>
</div>
</div>
<div className="w-full">
<label className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
Handle
</label>
<div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
<input
<div className="w-full space-y-1.5">
<Label className="block font-sans text-base font-medium text-[#020617]">
Handle
</Label>
<Input
type="text"
name="handle"
defaultValue={profileData.username}
placeholder="@username"
className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
className="h-11 w-full rounded-full border border-[#E2E8F0] px-4 py-2.5 font-inter text-base font-normal text-[#7e7e7e] outline-none"
onChange={(e) => {
const newProfileData = {
...profileData,
@@ -176,18 +178,16 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
}}
/>
</div>
</div>
<div className="w-full">
<label className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
Bio
</label>
<div className="h-[220px] rounded-2xl border border-slate-200 py-2.5 pl-4 pr-4 dark:border-slate-700 dark:bg-slate-800">
<textarea
<div className="w-full space-y-1.5">
<Label className="block font-sans text-base font-medium text-[#020617]">
Bio
</Label>
<Textarea
name="bio"
defaultValue={profileData.description}
placeholder="Tell us about yourself..."
className="font-circular h-full w-full resize-none border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
className="min-h-56 w-full resize-none rounded-[1rem] border border-[#E2E8F0] px-4 py-2.5 font-inter text-base font-normal text-[#7e7e7e] outline-none"
onChange={(e) => {
const newProfileData = {
...profileData,
@@ -197,13 +197,16 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
}}
/>
</div>
</div>
</section>
<section className="mb-8">
<h2 className="font-circular mb-4 text-lg font-normal leading-7 text-neutral-700 dark:text-neutral-300">
<Separator className="bg-neutral-300" />
{/* mid section */}
<section className="mb-8 space-y-6">
<h2 className="font-poppins text-lg font-semibold text-neutral-500">
Your links
</h2>
<p className="font-circular mb-6 text-base font-normal leading-tight text-neutral-600 dark:text-neutral-400">
<p className="font-sans text-base font-medium text-[#020617]">
You can display up to 5 links on your profile
</p>
@@ -211,41 +214,38 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
{[1, 2, 3, 4, 5].map((linkNum) => {
const link = profileData.links[linkNum - 1];
return (
<div key={linkNum} className="w-full">
<label className="font-circular mb-1.5 block text-base font-normal leading-tight text-neutral-700 dark:text-neutral-300">
<div key={linkNum} className="w-full space-y-1.5">
<Label className="block font-sans text-base font-medium text-[#020617]">
Link {linkNum}
</label>
<div className="rounded-[55px] border border-slate-200 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
<input
type="text"
name={`link${linkNum}`}
placeholder="https://"
defaultValue={link || ""}
className="font-circular w-full border-none bg-transparent text-base font-normal text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white dark:placeholder:text-neutral-500"
onChange={(e) => {
const newLinks = [...profileData.links];
newLinks[linkNum - 1] = e.target.value;
const newProfileData = {
...profileData,
links: newLinks,
};
setProfileData(newProfileData);
}}
/>
</div>
</Label>
<Input
type="text"
name={`link${linkNum}`}
placeholder="https://"
defaultValue={link || ""}
className="h-11 w-full rounded-full border border-[#E2E8F0] px-4 py-2.5 font-inter text-base font-normal text-[#7e7e7e] outline-none"
onChange={(e) => {
const newLinks = [...profileData.links];
newLinks[linkNum - 1] = e.target.value;
const newProfileData = {
...profileData,
links: newLinks,
};
setProfileData(newProfileData);
}}
/>
</div>
);
})}
</div>
</section>
<Separator />
<div className="flex h-[50px] items-center justify-end gap-3 py-8">
{/* buttons */}
<section className="flex h-[50px] items-center justify-end gap-3 py-8">
<Button
type="button"
variant="secondary"
className="font-circular h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
className="h-[50px] rounded-[35px] bg-neutral-200 px-6 py-3 font-sans text-base font-medium text-neutral-800 transition-colors hover:bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-600 dark:hover:bg-neutral-600"
onClick={() => {
setProfileData(profile);
}}
@@ -255,12 +255,12 @@ export const ProfileInfoForm = ({ profile }: { profile: CreatorDetails }) => {
<Button
type="submit"
disabled={isSubmitting}
className="font-circular h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
className="h-[50px] rounded-[35px] bg-neutral-800 px-6 py-3 font-sans text-base font-medium text-white transition-colors hover:bg-neutral-900 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-100"
onClick={submitForm}
>
{isSubmitting ? "Saving..." : "Save changes"}
</Button>
</div>
</section>
</form>
</div>
</div>

2
autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenu.stories.tsx
View File

@@ -83,7 +83,7 @@ export const LongUserName: Story = {
},
};
export const WithInteraction: Story = {
export const TestingInteractions: Story = {
args: {
...Default.args,
},

10
autogpt_platform/frontend/src/components/agptui/ProfilePopoutMenu.tsx
View File

@@ -91,21 +91,21 @@ export const ProfilePopoutMenu: React.FC<ProfilePopoutMenuProps> = ({
<PopoverContent
id={popupId}
className="flex h-[380px] w-[300px] flex-col items-start justify-start gap-4 rounded-[26px] bg-zinc-400/70 p-6 shadow backdrop-blur-2xl dark:bg-zinc-800/70"
className="flex w-[300px] flex-col items-start justify-start gap-4 rounded-[26px] bg-zinc-400/70 p-6 shadow backdrop-blur-2xl dark:bg-zinc-800/70"
>
{/* Header with avatar and user info */}
<div className="inline-flex items-center justify-start gap-4 self-stretch">
<Avatar className="h-[60px] w-[60px]">
<Avatar className="h-16 w-16">
<AvatarImage src={avatarSrc} alt="" aria-hidden="true" />
<AvatarFallback aria-hidden="true">
{userName?.charAt(0) || "U"}
</AvatarFallback>
</Avatar>
<div className="relative h-[47px] w-[173px]">
<div className="absolute left-0 top-0 font-sans text-base font-semibold leading-7 text-white dark:text-neutral-200">
<div>
<div className="font-sans text-base font-semibold leading-7 text-white dark:text-neutral-200">
{userName}
</div>
<div className="absolute left-0 top-[23px] font-sans text-base font-normal leading-normal text-white dark:text-neutral-400">
<div className="font-sans text-base font-normal leading-normal text-white dark:text-neutral-400">
{userEmail}
</div>
</div>

2
autogpt_platform/frontend/src/components/agptui/PublishAgentSelect.stories.tsx
View File

@@ -126,7 +126,7 @@ export const NineAgents: Story = {
},
};
export const WithInteraction: Story = {
export const TestingInteractions: Story = {
args: {
...defaultArgs,
agents: mockAgents,

4
autogpt_platform/frontend/src/components/agptui/PublishAgentSelectInfo.tsx
View File

@@ -306,7 +306,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
</Button>
</div>
) : (
<>
<div className="flex flex-wrap gap-2.5">
{images.map((src, index) => (
<div key={index} className="relative flex-shrink-0">
<Image
@@ -345,7 +345,7 @@ export const PublishAgentInfo: React.FC<PublishAgentInfoProps> = ({
</span>
</Button>
)}
</>
</div>
)}
</div>
</div>

18
autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.stories.tsx
View File

@@ -150,29 +150,13 @@ export const WithExtremelyLongTexts: Story = {
"Experience seamless communication across 150+ languages with our advanced neural translation engine. Perfect for international businesses, travelers, and language enthusiasts. Features real-time conversation translation, document processing, and cultural context adaptation to ensure your message is delivered exactly as intended in any language. Our proprietary machine learning algorithms continuously improve translation accuracy with each interaction, adapting to regional dialects and specialized terminology. The system includes voice recognition capabilities, image-to-text translation for signs and documents, and can operate offline in emergency situations where internet connectivity is limited. With dedicated mobile apps for iOS and Android plus browser extensions, you'll never encounter language barriers again, whether in business negotiations, academic research, or while exploring new destinations.",
creator:
"Global Linguistics Technologies International Corporation and Research Institute for Cross-Cultural Communication",
runs: 999999999999,
},
mockFeaturedAgents[1],
],
},
};
export const WithExtremeValues: Story = {
args: {
featuredAgents: [
{
...mockFeaturedAgents[0],
runs: 999999999999,
rating: 5,
},
{
...mockFeaturedAgents[1],
runs: 0,
rating: 0,
},
],
},
};
export const WithManyAgents: Story = {
args: {
featuredAgents: Array(20)