feat: update agent hub navigation and filtering

agenthub/app/agents/TabsLayout/index.client.tsx

@@ -1,49 +1,67 @@
 '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 { AgentTabList } from '../const'
+import { DatasetsTabItem, AgentItem } from '../type'
 import { ApplySVG, ExitSVG } from '@/ui/svgs'
+import { baseUrl } from '@/lib/env'
 
 export default function LeftTabsLayout() {
-  const [currentTab, setCurrentTab] = useState<DatasetsTabItem>('Tasks')
-  //linter
-  // const [isAddFilterModalDisplay, setIsAddFilterModalDisplay] = useState<boolean>(false)
+  const [currentTab, setCurrentTab] = useState<DatasetsTabItem>('Academic')
+  const [agents, setAgents] = useState<AgentItem[]>([])
   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 (
     <section
       className={classNames(
         'pt-8 border-gray-100 bg-white lg:static lg:px-0 lg:col-span-4 xl:col-span-3 lg:border-r lg:bg-gradient-to-l from-gray-50-to-white',
-        isAddFilterModalDisplay ? 'fixed overflow-y-auto overflow-x-hidden z-40 inset-0 !px-4 !pt-4' : 'hidden lg:block'
+        isAddFilterModalDisplay ? 'fixed overflow-y-auto overflow-x-hidden z-40 inset-0 !px-4 !pt-4' : ''
       )}
     >
       <div className="mb-4 flex items-center justify-between lg:hidden">
-        <h3 className="text-base font-semibold">Edit Datasets filters</h3>
+        <h3 className="text-base font-semibold">Agent Categories</h3>
         <button className="text-xl" type="button">
           <ExitSVG />
         </button>
       </div>
       <ul className="flex gap-1 text-sm flex-wrap mt-1.5 mb-5">
-        {DatasetsTabList.map((tabName, index) => (
+        {AgentTabList.map((tabName, index) => (
           <li key={index}>
             <button
               className={classNames(
-                'flex items-center whitespace-nowrap rounded-lg px-2',
+                'flex items-center whitespace-nowrap rounded-lg px-3 py-1.5',
                 currentTab === tabName
                   ? 'bg-black text-white dark:bg-gray-800'
                   : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-900 dark:hover:text-gray-300'
@@ -57,20 +75,19 @@ export default function LeftTabsLayout() {
           </li>
         ))}
       </ul>
-      <FilterTab />
+
       <div className="mb-3">
-        {currentTab === 'Tasks' && <TabTasks />}
-        {currentTab === 'Sizes' && <TabSizes />}
-        {currentTab === 'Sub-tasks' && <TabSubTasks />}
-        {currentTab === 'Languages' && <TabLanguages />}
-        {currentTab === 'Licenses' && <TabLicenses />}
-        {currentTab === 'Other' && <TabOther />}
-      </div>
-      <div className="fixed inset-x-4 bottom-0 flex h-16 items-center border-t bg-white dark:bg-gray-950 lg:hidden">
-        <button className="btn btn-lg -mt-px w-full font-semibold" type="button">
-          <ApplySVG />
-          Apply filters
-        </button>
+        <div className="flex flex-col space-y-2">
+          {filteredAgents.map((agent) => (
+            <a 
+              key={agent.id} 
+              className="text-sm text-gray-600 hover:text-black hover:bg-gray-100 rounded-lg px-3 py-2"
+              href={`/agents/${agent.name}+${agent.version}`}
+            >
+              {agent.name}
+            </a>
+          ))}
+        </div>
       </div>
     </section>
   )

agenthub/app/agents/const.ts

@@ -15,18 +15,33 @@ export const AgentList: AgentItem[] = [];
 // export const AgentList = 
 
 export const AgentListGenerator: () => Promise<AgentItem[]> = 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',

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 {

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%2Fgit.luolix.top%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%2Fgit.luolix.top%2Fvercel%2Fnextjs-subscription-payments%2Ftree%2Fmain',
       demo_url: 'https://subscription-payments.vercel.app/',

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';