diff --git a/agenthub/app/agents/ContentLayout/DatasetsHeader.tsx b/agenthub/app/agents/ContentLayout/DatasetsHeader.tsx index 2b1c0a1f..905b8704 100644 --- a/agenthub/app/agents/ContentLayout/DatasetsHeader.tsx +++ b/agenthub/app/agents/ContentLayout/DatasetsHeader.tsx @@ -2,28 +2,18 @@ import { FilterSVG, SortSVG } from '@/ui/svgs' import { Input } from '@nextui-org/react' -import { AgentListGenerator } from '../const'; +import { useState } from 'react' -import { useState, useEffect } from 'react' +interface DatasetsHeaderProps { + filteredCount?: number; +} -export function DatasetsHeader() { - useEffect(() => { - const _ = async () => { - const AgentList = await AgentListGenerator(); - setAgentNumber(AgentList.length); - } - - _(); - - }, []); - - const [agentNumber, setAgentNumber] = useState(0); - +export function DatasetsHeader({ filteredCount = 0 }: DatasetsHeaderProps) { return (

Agents

-
{agentNumber}
+
{filteredCount}
@@ -44,7 +34,7 @@ export function DatasetsHeader() {
diff --git a/agenthub/app/agents/TabsLayout/index.client.tsx b/agenthub/app/agents/TabsLayout/index.client.tsx index 4362af95..e56cb507 100644 --- a/agenthub/app/agents/TabsLayout/index.client.tsx +++ b/agenthub/app/agents/TabsLayout/index.client.tsx @@ -1,77 +1,95 @@ 'use client' -import { useState } from 'react' +import { useState, useEffect } from 'react' import classNames from 'classnames' - -import { DatasetsTabList } from '../const' -import { DatasetsTabItem } from '../type' - -import FilterTab from './FilterTab' -import TabTasks from './TabTasks' -import TabOther from './TabOther' -import TabLicenses from './TabLicenses' -import TabLanguages from './TabLanguages' -import TabSubTasks from './TabSubTasks' -import TabSizes from './TabSizes' -import { ApplySVG, ExitSVG } from '@/ui/svgs' +import { AgentTabList } from '../const' +import { DatasetsTabItem, AgentItem } from '../type' +import { ExitSVG } from '@/ui/svgs' +import { baseUrl } from '@/lib/env' +import AgentCard from '../ContentLayout/AgentCard' +import { DatasetsHeader } from '../ContentLayout/DatasetsHeader' export default function LeftTabsLayout() { - const [currentTab, setCurrentTab] = useState('Tasks') - //linter - // const [isAddFilterModalDisplay, setIsAddFilterModalDisplay] = useState(false) + const [currentTab, setCurrentTab] = useState('Academic') + const [agents, setAgents] = useState([]) const isAddFilterModalDisplay = false; + useEffect(() => { + const fetchAgents = async () => { + const res = await fetch(`${baseUrl}/api/get_all_agents/light`, { cache: 'no-store' }); + const data = await res.json(); + setAgents(Object.values(data)); + }; + + fetchAgents(); + }, []); + const onTabClick = (tabName: DatasetsTabItem) => { setCurrentTab(tabName) } + // Filter agents based on current selected category + const filteredAgents = agents.filter(agent => { + const name = agent.name.toLowerCase(); + switch(currentTab) { + case 'Academic': + return name.includes('academic') || name.includes('math'); + case 'Creative': + return name.includes('creator') || name.includes('designer') || name.includes('composer'); + case 'Lifestyle': + return name.includes('therapist') || name.includes('trainer') || name.includes('mixologist'); + case 'Entertainment': + return name.includes('entertainment') || name.includes('game'); + default: + return true; + } + }); + return ( -
-
-

Edit Datasets filters

- -
-
    - {DatasetsTabList.map((tabName, index) => ( -
  • - -
    • - ))} -
- -
- {currentTab === 'Tasks' && } - {currentTab === 'Sizes' && } - {currentTab === 'Sub-tasks' && } - {currentTab === 'Languages' && } - {currentTab === 'Licenses' && } - {currentTab === 'Other' && } -
-
- -
-
+ <> +
+ {/* Left sidebar category menu */} +
+

Agent Categories

+ +
+
    + {AgentTabList.map((tabName, index) => ( +
  • + +
    • + ))} +
+
+ + {/* Main content section with filtered agents */} +
+ +
+ {filteredAgents.map((agent) => ( + + ))} +
+
+ ) } diff --git a/agenthub/app/agents/const.ts b/agenthub/app/agents/const.ts index 94236aea..ac0cdb96 100644 --- a/agenthub/app/agents/const.ts +++ b/agenthub/app/agents/const.ts @@ -15,18 +15,33 @@ export const AgentList: AgentItem[] = []; // export const AgentList = export const AgentListGenerator: () => Promise = async () => { - const res = await fetch(`${baseUrl}/api/get_all_agents/light`, { cache: 'no-store' }); - const res_ = await res.json(); + try { + const res = await fetch(`${baseUrl}/api/get_all_agents/light`, { cache: 'no-store' }); + const res_ = await res.json(); - const values: AgentItem[] = Object.values(res_); + if (!res_ || typeof res_ !== 'object') { + console.error('Invalid response format:', res_); + return []; + } - console.log('length', res_) + const values: AgentItem[] = Object.values(res_); + console.log('Response data:', res_); + console.log('Parsed values:', values); - return values; + return values; + } catch (error) { + console.error('Error fetching agents:', error); + return []; + } } // export const DatasetsTabList: DatasetsTabItem[] = ['Tasks', 'Sizes', 'Sub-tasks', 'Languages', 'Licenses', 'Other'] -export const AgentTabList: DatasetsTabItem[] = ['Recommended', 'Writing', 'Entertainment', 'Programming'] +export const AgentTabList: DatasetsTabItem[] = [ + 'Academic', + 'Creative', + 'Lifestyle', + 'Entertainment' +] export const DatasetOther = [ 'Trained with AutoTrain', diff --git a/agenthub/app/agents/page.tsx b/agenthub/app/agents/page.tsx index 878d13cd..1966c3ce 100644 --- a/agenthub/app/agents/page.tsx +++ b/agenthub/app/agents/page.tsx @@ -1,16 +1,11 @@ -import TabsLayout from './TabsLayout/index.client' -import ContentLayout from './ContentLayout' +import LeftTabsLayout from './TabsLayout/index.client' -export default function Datasets({ searchParams }: - { searchParams: { [key: string]: string | string[] | undefined } }) { +export default function Datasets() { return ( -
-
-
- - -
+
+
+
-
+
) } \ No newline at end of file diff --git a/agenthub/app/agents/type.ts b/agenthub/app/agents/type.ts index 15dac194..a3fb3682 100644 --- a/agenthub/app/agents/type.ts +++ b/agenthub/app/agents/type.ts @@ -8,9 +8,9 @@ export interface DatasetItem { favorites: string } -export type DatasetsTabItem = 'Recommended' | 'Writing' | 'Entertainment' | 'Programming' | 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other'; +export type DatasetsTabItem = 'Recommended' | 'Writing' | 'Entertainment' | 'Programming' | 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other' | 'Academic' | 'Creative' | 'Lifestyle' | 'Entertainment'; -export type AgentTabItem = 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other' +export type AgentTabItem = 'Tasks' | 'Sizes' | 'Sub-tasks' | 'Languages' | 'Licenses' | 'Other' | 'Academic' | 'Creative' | 'Lifestyle' | 'Entertainment'; export interface AgentItem { diff --git a/agenthub/components/homepage/Products.tsx b/agenthub/components/homepage/Products.tsx index b0093376..14f93730 100644 --- a/agenthub/components/homepage/Products.tsx +++ b/agenthub/components/homepage/Products.tsx @@ -18,7 +18,7 @@ const Examples = [ author_url: 'https://github.com/vercel', author_img: 'https://avatars.githubusercontent.com/u/14985020', repo_name: 'vercel/nextjs-subscription-payments', - repo_url: 'https://my.aios.foundation/agents', + repo_url: 'http://localhost:3000/agents', vercel_deploy_url: 'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&env=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY&envDescription=Enter%20your%20Stripe%20API%20keys.&envLink=https%3A%2F%2Fdashboard.stripe.com%2Fapikeys&project-name=nextjs-subscription-payments&repository-name=nextjs-subscription-payments&integration-ids=oac_VqOgBHqhEoFTPzGkPd7L0iH6&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments%2Ftree%2Fmain', demo_url: 'https://subscription-payments.vercel.app/', diff --git a/agenthub/lib/env.ts b/agenthub/lib/env.ts index 1376dba9..010f719e 100644 --- a/agenthub/lib/env.ts +++ b/agenthub/lib/env.ts @@ -1,6 +1,10 @@ export const inDevEnvironment = !!process && process.env.NODE_ENV === 'development'; // export const serverUrl = inDevEnvironment ? 'http://localhost:8000' : 'https://myapp-y5z35kuonq-uk.a.run.app' -export const baseUrl = inDevEnvironment ? 'http://localhost:3000' : 'https://my.aios.foundation' +export const baseUrl = process.env.NODE_ENV === 'development' + ? 'http://localhost:3000' + : 'https://my.aios.foundation'; // export const serverUrl = inDevEnvironment ? 'http://localhost:8000' : 'http://35.232.56.61:8000' -export const serverUrl = 'http://35.232.56.61:8000'; +export const serverUrl = process.env.NODE_ENV === 'development' + ? 'http://localhost:8000' + : 'https://api.aios.chat';