Feat: Bind data to the agent module of the home page #3221 (#7385)

### What problem does this PR solve?

Feat: Bind data to the agent module of the home page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/home/agent-list.tsx

@@ -0,0 +1,10 @@
+import { useFetchAgentList } from '@/hooks/use-agent-request';
+import { ApplicationCard } from './application-card';
+
+export function Agents() {
+  const { data } = useFetchAgentList();
+
+  return data
+    .slice(0, 10)
+    .map((x) => <ApplicationCard key={x.id} app={x}></ApplicationCard>);
+}

web/src/pages/home/application-card.tsx

@@ -0,0 +1,30 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent } from '@/components/ui/card';
+import { formatDate } from '@/utils/date';
+
+type ApplicationCardProps = {
+  app: {
+    avatar?: string;
+    title: string;
+    update_time: number;
+  };
+};
+
+export function ApplicationCard({ app }: ApplicationCardProps) {
+  return (
+    <Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard w-64">
+      <CardContent className="p-4 flex items-center gap-6">
+        <Avatar className="size-14 rounded-lg">
+          <AvatarImage src={app.avatar === null ? '' : app.avatar} />
+          <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+        </Avatar>
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold line-clamp-1 mb-1">
+            {app.title}
+          </h3>
+          <p className="text-sm opacity-80">{formatDate(app.update_time)}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

web/src/pages/home/applications.tsx

@@ -1,62 +1,58 @@
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
-import { ChevronRight, Cpu, MessageSquare, Search } from 'lucide-react';
+import { Routes } from '@/routes';
+import { Cpu, MessageSquare, Search } from 'lucide-react';
 import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Agents } from './agent-list';
+import { ApplicationCard } from './application-card';
 
 const applications = [
   {
     id: 1,
     title: 'Jarvis chatbot',
     type: 'Chat app',
-    date: '11/24/2024',
-    icon: <MessageSquare className="h-6 w-6" />,
+    update_time: '11/24/2024',
+    avatar: <MessageSquare className="h-6 w-6" />,
   },
   {
     id: 2,
     title: 'Search app 01',
     type: 'Search app',
-    date: '11/24/2024',
-    icon: <Search className="h-6 w-6" />,
+    update_time: '11/24/2024',
+    avatar: <Search className="h-6 w-6" />,
   },
   {
     id: 3,
     title: 'Chatbot 01',
     type: 'Chat app',
-    date: '11/24/2024',
-    icon: <MessageSquare className="h-6 w-6" />,
+    update_time: '11/24/2024',
+    avatar: <MessageSquare className="h-6 w-6" />,
   },
   {
     id: 4,
     title: 'Workflow 01',
     type: 'Agent',
-    date: '11/24/2024',
-    icon: <Cpu className="h-6 w-6" />,
+    update_time: '11/24/2024',
+    avatar: <Cpu className="h-6 w-6" />,
   },
 ];
 
 export function Applications() {
   const [val, setVal] = useState('all');
-  const options = useMemo(() => {
-    return [
+  const { t } = useTranslation();
+
+  const options = useMemo(
+    () => [
       {
         label: 'All',
         value: 'all',
       },
-      {
-        label: 'Chat',
-        value: 'chat',
-      },
-      {
-        label: 'Search',
-        value: 'search',
-      },
-      {
-        label: 'Agent',
-        value: 'agent',
-      },
-    ];
-  }, []);
+      { value: Routes.Chats, label: t('header.chat') },
+      { value: Routes.Searches, label: t('header.search') },
+      { value: Routes.Agents, label: t('header.flow') },
+    ],
+    [t],
+  );
 
   const handleChange = (path: SegmentedValue) => {
     setVal(path as string);
@@ -73,30 +69,13 @@ export function Applications() {
           className="bg-colors-background-inverse-standard text-colors-text-neutral-standard"
         ></Segmented>
       </div>
-      <div className="grid grid-cols-4 gap-6">
-        {[...Array(12)].map((_, i) => {
-          const app = applications[i % 4];
-          return (
-            <Card
-              key={i}
-              className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard"
-            >
-              <CardContent className="p-4 flex items-center gap-6">
-                <div className="w-[70px] h-[70px] rounded-xl flex items-center justify-center bg-gradient-to-br from-[#45A7FA] via-[#AE63E3] to-[#4433FF]">
-                  {app.icon}
-                </div>
-                <div className="flex-1">
-                  <h3 className="text-lg font-semibold">{app.title}</h3>
-                  <p className="text-sm opacity-80">{app.type}</p>
-                  <p className="text-sm opacity-80">{app.date}</p>
-                </div>
-                <Button variant="icon" size="icon">
-                  <ChevronRight className="h-6 w-6" />
-                </Button>
-              </CardContent>
-            </Card>
-          );
-        })}
+      <div className="flex flex-wrap gap-4">
+        {val === Routes.Agents ||
+          [...Array(12)].map((_, i) => {
+            const app = applications[i % 4];
+            return <ApplicationCard key={i} app={app}></ApplicationCard>;
+          })}
+        {val === Routes.Agents && <Agents></Agents>}
       </div>
     </section>
   );

web/src/pages/home/datasets.tsx

@@ -28,7 +28,7 @@ export function Datasets() {
           </div>
         ) : (
           <div className="flex gap-4 flex-1">
-            {kbs.slice(0, 4).map((dataset) => (
+            {kbs.slice(0, 6).map((dataset) => (
               <DatasetCard
                 key={dataset.id}
                 dataset={dataset}