From ee41302a50cd85715768f578e355ccea5e8ddee3 Mon Sep 17 00:00:00 2001 From: Lluis Agusti Date: Fri, 2 Jan 2026 17:16:21 +0700 Subject: [PATCH] chore: refactors --- autogpt_platform/frontend/package.json | 1 - autogpt_platform/frontend/pnpm-lock.yaml | 96 +------ .../FavoritesSection/FavoritesSection.tsx | 13 +- .../LibraryActionHeader.tsx | 18 +- .../LibraryAgentList/LibraryAgentList.tsx | 4 +- .../LibraryNotificationCard.tsx | 175 ------------ .../LibraryNotificationDropdown.tsx | 132 --------- .../LibrarySearchBar/LibrarySearchBar.tsx | 35 +-- .../LibrarySearchBar/useLibrarySearchbar.tsx | 19 +- .../LibraryUploadAgentDialog.tsx | 270 +++++++----------- .../useLibraryUploadAgentDialog.ts | 149 +++++----- .../src/app/(platform)/library/page.tsx | 6 +- .../src/components/molecules/Form/Form.tsx | 209 ++++++++++++++ 13 files changed, 423 insertions(+), 704 deletions(-) delete mode 100644 autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationCard/LibraryNotificationCard.tsx delete mode 100644 autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationDropdown/LibraryNotificationDropdown.tsx create mode 100644 autogpt_platform/frontend/src/components/molecules/Form/Form.tsx diff --git a/autogpt_platform/frontend/package.json b/autogpt_platform/frontend/package.json index 1708ac9053..491c6d4dca 100644 --- a/autogpt_platform/frontend/package.json +++ b/autogpt_platform/frontend/package.json @@ -91,7 +91,6 @@ "react-currency-input-field": "4.0.3", "react-day-picker": "9.11.1", "react-dom": "18.3.1", - "react-drag-drop-files": "2.4.0", "react-hook-form": "7.66.0", "react-icons": "5.5.0", "react-markdown": "9.0.3", diff --git a/autogpt_platform/frontend/pnpm-lock.yaml b/autogpt_platform/frontend/pnpm-lock.yaml index 355ffff129..10cdbe39ca 100644 --- a/autogpt_platform/frontend/pnpm-lock.yaml +++ b/autogpt_platform/frontend/pnpm-lock.yaml @@ -197,9 +197,6 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) - react-drag-drop-files: - specifier: 2.4.0 - version: 2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-hook-form: specifier: 7.66.0 version: 7.66.0(react@18.3.1) @@ -1004,9 +1001,6 @@ packages: '@emotion/memoize@0.8.1': resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} - '@emotion/unitless@0.8.1': - resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} - '@epic-web/invariant@1.0.0': resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==} @@ -3274,9 +3268,6 @@ packages: '@types/statuses@2.0.6': resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==} - '@types/stylis@4.2.5': - resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} - '@types/tedious@4.0.14': resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==} @@ -4004,9 +3995,6 @@ packages: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - camelize@1.0.1: - resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} - caniuse-lite@1.0.30001741: resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==} @@ -4233,10 +4221,6 @@ packages: resolution: {integrity: sha512-r4ESw/IlusD17lgQi1O20Fa3qNnsckR126TdUuBgAu7GBYSIPvdNyONd3Zrxh0xCwA4+6w/TDArBPsMvhur+KQ==} engines: {node: '>= 0.10'} - css-color-keywords@1.0.0: - resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} - engines: {node: '>=4'} - css-loader@6.11.0: resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==} engines: {node: '>= 12.13.0'} @@ -4252,9 +4236,6 @@ packages: css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} - css-to-react-native@3.2.0: - resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} - css-what@6.2.2: resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==} engines: {node: '>= 6'} @@ -6394,10 +6375,6 @@ packages: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} engines: {node: ^10 || ^12 || >=14} - postcss@8.4.49: - resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} - engines: {node: ^10 || ^12 || >=14} - postcss@8.5.6: resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==} engines: {node: ^10 || ^12 || >=14} @@ -6569,12 +6546,6 @@ packages: peerDependencies: react: ^18.3.1 - react-drag-drop-files@2.4.0: - resolution: {integrity: sha512-MGPV3HVVnwXEXq3gQfLtSU3jz5j5jrabvGedokpiSEMoONrDHgYl/NpIOlfsqGQ4zBv1bzzv7qbKURZNOX32PA==} - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - react-hook-form@7.66.0: resolution: {integrity: sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==} engines: {node: '>=18.0.0'} @@ -6951,9 +6922,6 @@ packages: engines: {node: '>= 0.10'} hasBin: true - shallowequal@1.1.0: - resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} - sharp@0.34.3: resolution: {integrity: sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -7170,13 +7138,6 @@ packages: style-to-object@1.0.9: resolution: {integrity: sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==} - styled-components@6.1.19: - resolution: {integrity: sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==} - engines: {node: '>= 16'} - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - styled-jsx@5.1.6: resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==} engines: {node: '>= 12.0.0'} @@ -7203,9 +7164,6 @@ packages: babel-plugin-macros: optional: true - stylis@4.3.2: - resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} - sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -7372,9 +7330,6 @@ packages: tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} - tslib@2.6.2: - resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -8631,10 +8586,10 @@ snapshots: '@emotion/is-prop-valid@1.2.2': dependencies: '@emotion/memoize': 0.8.1 + optional: true - '@emotion/memoize@0.8.1': {} - - '@emotion/unitless@0.8.1': {} + '@emotion/memoize@0.8.1': + optional: true '@epic-web/invariant@1.0.0': {} @@ -11111,8 +11066,6 @@ snapshots: '@types/statuses@2.0.6': {} - '@types/stylis@4.2.5': {} - '@types/tedious@4.0.14': dependencies: '@types/node': 24.10.0 @@ -11910,8 +11863,6 @@ snapshots: camelcase-css@2.0.1: {} - camelize@1.0.1: {} - caniuse-lite@1.0.30001741: {} case-sensitive-paths-webpack-plugin@2.4.0: {} @@ -12148,8 +12099,6 @@ snapshots: randombytes: 2.1.0 randomfill: 1.0.4 - css-color-keywords@1.0.0: {} - css-loader@6.11.0(webpack@5.101.3(esbuild@0.25.9)): dependencies: icss-utils: 5.1.0(postcss@8.5.6) @@ -12171,12 +12120,6 @@ snapshots: domutils: 2.8.0 nth-check: 2.1.1 - css-to-react-native@3.2.0: - dependencies: - camelize: 1.0.1 - css-color-keywords: 1.0.0 - postcss-value-parser: 4.2.0 - css-what@6.2.2: {} css.escape@1.5.1: {} @@ -14828,12 +14771,6 @@ snapshots: picocolors: 1.1.1 source-map-js: 1.2.1 - postcss@8.4.49: - dependencies: - nanoid: 3.3.11 - picocolors: 1.1.1 - source-map-js: 1.2.1 - postcss@8.5.6: dependencies: nanoid: 3.3.11 @@ -14955,13 +14892,6 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 - react-drag-drop-files@2.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - prop-types: 15.8.1 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - styled-components: 6.1.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react-hook-form@7.66.0(react@18.3.1): dependencies: react: 18.3.1 @@ -15460,8 +15390,6 @@ snapshots: safe-buffer: 5.2.1 to-buffer: 1.2.2 - shallowequal@1.1.0: {} - sharp@0.34.3: dependencies: color: 4.2.3 @@ -15757,20 +15685,6 @@ snapshots: dependencies: inline-style-parser: 0.2.4 - styled-components@6.1.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@emotion/is-prop-valid': 1.2.2 - '@emotion/unitless': 0.8.1 - '@types/stylis': 4.2.5 - css-to-react-native: 3.2.0 - csstype: 3.1.3 - postcss: 8.4.49 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - shallowequal: 1.1.0 - stylis: 4.3.2 - tslib: 2.6.2 - styled-jsx@5.1.6(@babel/core@7.28.4)(react@18.3.1): dependencies: client-only: 0.0.1 @@ -15785,8 +15699,6 @@ snapshots: optionalDependencies: '@babel/core': 7.28.4 - stylis@4.3.2: {} - sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.13 @@ -15969,8 +15881,6 @@ snapshots: tslib@1.14.1: {} - tslib@2.6.2: {} - tslib@2.8.1: {} tty-browserify@0.0.1: {} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx index 7ed372f296..e833828195 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx @@ -1,15 +1,14 @@ "use client"; -import React from "react"; -import { useFavoriteAgents } from "../../hooks/useFavoriteAgents"; -import LibraryAgentCard from "../LibraryAgentCard/LibraryAgentCard"; -import { useGetFlag, Flag } from "@/services/feature-flags/use-get-flag"; -import { Heart } from "lucide-react"; +import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; import { Skeleton } from "@/components/__legacy__/ui/skeleton"; import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll"; -import { LibraryAgent } from "@/app/api/__generated__/models/libraryAgent"; +import { Flag, useGetFlag } from "@/services/feature-flags/use-get-flag"; +import { Heart } from "lucide-react"; +import { useFavoriteAgents } from "../../hooks/useFavoriteAgents"; +import LibraryAgentCard from "../LibraryAgentCard/LibraryAgentCard"; -export default function FavoritesSection() { +export function FavoritesSection() { const isAgentFavoritingEnabled = useGetFlag(Flag.AGENT_FAVORITING); const { allAgents: favoriteAgents, diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader/LibraryActionHeader.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader/LibraryActionHeader.tsx index 11011945fb..2c0173a3e3 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader/LibraryActionHeader.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryActionHeader/LibraryActionHeader.tsx @@ -1,17 +1,10 @@ -// import LibraryNotificationDropdown from "./library-notification-dropdown"; -import LibraryUploadAgentDialog from "../LibraryUploadAgentDialog/LibraryUploadAgentDialog"; import LibrarySearchBar from "../LibrarySearchBar/LibrarySearchBar"; +import LibraryUploadAgentDialog from "../LibraryUploadAgentDialog/LibraryUploadAgentDialog"; -type LibraryActionHeaderProps = Record; - -/** - * LibraryActionHeader component - Renders a header with search, notifications and filters - */ -const LibraryActionHeader: React.FC = ({}) => { +export function LibraryActionHeader() { return ( <> -
- {/* */} +
@@ -19,7 +12,6 @@ const LibraryActionHeader: React.FC = ({}) => { {/* Mobile and tablet */}
- {/* */}
@@ -29,6 +21,4 @@ const LibraryActionHeader: React.FC = ({}) => {
); -}; - -export default LibraryActionHeader; +} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx index 1b3926a6e1..aa140cda82 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentList/LibraryAgentList.tsx @@ -1,10 +1,10 @@ "use client"; +import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll"; import LibraryActionSubHeader from "../LibraryActionSubHeader/LibraryActionSubHeader"; import LibraryAgentCard from "../LibraryAgentCard/LibraryAgentCard"; -import { InfiniteScroll } from "@/components/contextual/InfiniteScroll/InfiniteScroll"; import { useLibraryAgentList } from "./useLibraryAgentList"; -export default function LibraryAgentList() { +export function LibraryAgentList() { const { agentLoading, agentCount, diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationCard/LibraryNotificationCard.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationCard/LibraryNotificationCard.tsx deleted file mode 100644 index 51520e4445..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationCard/LibraryNotificationCard.tsx +++ /dev/null @@ -1,175 +0,0 @@ -import Image from "next/image"; -import { Button } from "@/components/__legacy__/ui/button"; -import { Separator } from "@/components/__legacy__/ui/separator"; -import { - CirclePlayIcon, - ClipboardCopy, - ImageIcon, - PlayCircle, - Share2, - X, -} from "lucide-react"; - -export interface NotificationCardData { - type: "text" | "image" | "video" | "audio"; - title: string; - id: string; - content?: string; - mediaUrl?: string; -} - -interface NotificationCardProps { - notification: NotificationCardData; - onClose: () => void; -} - -const NotificationCard = ({ - notification: { type, title, content, mediaUrl }, - onClose, -}: NotificationCardProps) => { - const barHeights = Array.from({ length: 60 }, () => - Math.floor(Math.random() * (34 - 20 + 1) + 20), - ); - - const handleClose = (e: React.MouseEvent) => { - e.preventDefault(); - onClose(); - }; - - return ( -
-
- {/* count */} -
-

- 1/4 -

-

- Success -

-
- - {/* cross icon */} - -
- -
-

- New Output Ready! -

-

- {title} -

- {type === "text" && } -
- -
- {type === "text" && ( - // Maybe in future we give markdown support -
- {content} -
- )} - - {type === "image" && - (mediaUrl ? ( -
- {title} -
- ) : ( -
- -
- ))} - - {type === "video" && ( -
- {mediaUrl ? ( -
- )} - - {type === "audio" && ( -
- -
- {/*
- )} -
- -
-
- - -
- -
-
- ); -}; - -export default NotificationCard; diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationDropdown/LibraryNotificationDropdown.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationDropdown/LibraryNotificationDropdown.tsx deleted file mode 100644 index cd863a21af..0000000000 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryNotificationDropdown/LibraryNotificationDropdown.tsx +++ /dev/null @@ -1,132 +0,0 @@ -"use client"; -import React, { useState, useEffect, useMemo } from "react"; - -import { motion, useAnimationControls } from "framer-motion"; -import { BellIcon, X } from "lucide-react"; -import { Button } from "@/components/__legacy__/Button"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuTrigger, -} from "@/components/__legacy__/ui/dropdown-menu"; -import NotificationCard, { - NotificationCardData, -} from "../LibraryNotificationCard/LibraryNotificationCard"; - -export default function LibraryNotificationDropdown(): React.ReactNode { - const controls = useAnimationControls(); - const [open, setOpen] = useState(false); - const [notifications, setNotifications] = useState< - NotificationCardData[] | null - >(null); - - const initialNotificationData = useMemo( - () => - [ - { - type: "audio", - title: "Audio Processing Complete", - id: "4", - }, - { - type: "text", - title: "LinkedIn Post Generator: YouTube to Professional Content", - id: "1", - content: - "As artificial intelligence (AI) continues to evolve, it's increasingly clear that AI isn't just a trend—it's reshaping the way we work, innovate, and solve complex problems. However, for many professionals, the question remains: How can I leverage AI to drive meaningful results in my own field? In this article, we'll explore how AI can empower businesses and individuals alike to be more efficient, make better decisions, and unlock new opportunities. Whether you're in tech, finance, healthcare, or any other industry, understanding the potential of AI can set you apart.", - }, - { - type: "image", - title: "New Image Upload", - id: "2", - }, - { - type: "video", - title: "Video Processing Complete", - id: "3", - }, - ] as NotificationCardData[], - [], - ); - - useEffect(() => { - if (initialNotificationData) { - setNotifications(initialNotificationData); - } - }, [initialNotificationData]); - - const handleHoverStart = () => { - controls.start({ - rotate: [0, -10, 10, -10, 10, 0], - transition: { duration: 0.5 }, - }); - }; - - return ( - - - - - - - Agent run updates - - -
- {notifications && notifications.length ? ( - notifications.map((notification) => ( - - - setNotifications((prev) => { - if (!prev) return null; - return prev.filter((n) => n.id !== notification.id); - }) - } - /> - - )) - ) : ( -
- No notifications present -
- )} -
- - - ); -} diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/LibrarySearchBar.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/LibrarySearchBar.tsx index ee36347874..86c51f921a 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/LibrarySearchBar.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/LibrarySearchBar.tsx @@ -1,40 +1,33 @@ "use client"; -import { Input } from "@/components/__legacy__/ui/input"; -import { Search, X } from "lucide-react"; + +import { Input } from "@/components/atoms/Input/Input"; +import { MagnifyingGlassIcon } from "@phosphor-icons/react"; import { useLibrarySearchbar } from "./useLibrarySearchbar"; export default function LibrarySearchBar(): React.ReactNode { - const { handleSearchInput, handleClear, setIsFocused, isFocused, inputRef } = - useLibrarySearchbar(); + const { handleSearchInput } = useLibrarySearchbar(); + return (
inputRef.current?.focus()} - className="relative z-[21] mx-auto flex h-[50px] w-full max-w-[500px] flex-1 cursor-pointer items-center rounded-[45px] bg-[#EDEDED] px-[24px] py-[10px]" + className="relative z-[21] -mb-6 flex items-center" > - setIsFocused(true)} - onBlur={() => !inputRef.current?.value && setIsFocused(false)} + label="Search agents" + id="library-search-bar" + hideLabel onChange={handleSearchInput} - className="flex-1 border-none font-sans text-[16px] font-normal leading-7 shadow-none focus:shadow-none focus:ring-0" + className="min-w-[18rem] pl-12 lg:min-w-[30rem]" type="text" data-testid="library-textbox" placeholder="Search agents" /> - - {isFocused && inputRef.current?.value && ( - - )}
); } diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx index f6428c6c4e..c048ad7c1a 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibrarySearchBar/useLibrarySearchbar.tsx @@ -1,10 +1,7 @@ -import { useRef, useState } from "react"; -import { useLibraryPageContext } from "../state-provider"; import { debounce } from "lodash"; +import { useLibraryPageContext } from "../state-provider"; export const useLibrarySearchbar = () => { - const inputRef = useRef(null); - const [isFocused, setIsFocused] = useState(false); const { setSearchTerm } = useLibraryPageContext(); const debouncedSearch = debounce((value: string) => { @@ -16,21 +13,7 @@ export const useLibrarySearchbar = () => { debouncedSearch(searchTerm); }; - const handleClear = (e: React.MouseEvent) => { - if (inputRef.current) { - inputRef.current.value = ""; - inputRef.current.blur(); - setSearchTerm(""); - e.preventDefault(); - } - setIsFocused(false); - }; - return { - handleClear, handleSearchInput, - isFocused, - inputRef, - setIsFocused, }; }; diff --git a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx index d92bbe86fe..2c80e8c394 100644 --- a/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/library/components/LibraryUploadAgentDialog/LibraryUploadAgentDialog.tsx @@ -1,192 +1,134 @@ "use client"; -import { Upload, X } from "lucide-react"; -import { Button } from "@/components/__legacy__/Button"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/__legacy__/ui/dialog"; -import { z } from "zod"; -import { FileUploader } from "react-drag-drop-files"; +import { Button } from "@/components/atoms/Button/Button"; +import { FileInput } from "@/components/atoms/FileInput/FileInput"; +import { Input } from "@/components/atoms/Input/Input"; +import { Dialog } from "@/components/molecules/Dialog/Dialog"; import { Form, FormControl, FormField, FormItem, - FormLabel, FormMessage, -} from "@/components/__legacy__/ui/form"; -import { Input } from "@/components/__legacy__/ui/input"; -import { Textarea } from "@/components/__legacy__/ui/textarea"; +} from "@/components/molecules/Form/Form"; +import { UploadSimpleIcon } from "@phosphor-icons/react"; +import { z } from "zod"; import { useLibraryUploadAgentDialog } from "./useLibraryUploadAgentDialog"; -const fileTypes = ["JSON"]; - -const fileSchema = z.custom((val) => val instanceof File, { - message: "Must be a File object", -}); - export const uploadAgentFormSchema = z.object({ - agentFile: fileSchema, + agentFile: z.string().min(1, "Agent file is required"), agentName: z.string().min(1, "Agent name is required"), agentDescription: z.string(), }); export default function LibraryUploadAgentDialog(): React.ReactNode { - const { - onSubmit, - isUploading, - isOpen, - setIsOpen, - isDroped, - handleChange, - form, - setisDroped, - agentObject, - clearAgentFile, - } = useLibraryUploadAgentDialog(); + const { onSubmit, isUploading, isOpen, setIsOpen, form, agentObject } = + useLibraryUploadAgentDialog(); + return ( - - + { + setIsOpen(false); + }} + > + - - - - Upload Agent - - Upload your agent by providing a name, description, and JSON file. - - + + +
+ ( + + + + + + + )} + /> - - - ( - - Agent name - - - - - - )} - /> + ( + + + + + + + )} + /> - ( - - Description - -