Feat: Switch the root route to the new page #3221 (#9560)

### What problem does this PR solve?

Feat: Switch the root route to the new page #3221

### Type of change


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

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

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

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

@@ -10,11 +10,12 @@ type ApplicationCardProps = {
     title: string;
     update_time: number;
   };
+  onClick?(): void;
 };
 
-export function ApplicationCard({ app }: ApplicationCardProps) {
+export function ApplicationCard({ app, onClick }: ApplicationCardProps) {
   return (
-    <Card className="w-[264px]">
+    <Card className="w-[264px]" onClick={onClick}>
       <CardContent className="p-2.5  group flex justify-between">
         <div className="flex items-center gap-2.5">
           <RAGFlowAvatar

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

@@ -1,15 +1,20 @@
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialogList } from '@/hooks/use-chat-request';
 import { ApplicationCard } from './application-card';
 
 export function ChatList() {
   const { data } = useFetchDialogList();
+  const { navigateToChat } = useNavigatePage();
 
-  return data.dialogs
-    .slice(0, 10)
-    .map((x) => (
-      <ApplicationCard
-        key={x.id}
-        app={{ avatar: x.icon, title: x.name, update_time: x.update_time }}
-      ></ApplicationCard>
-    ));
+  return data.dialogs.slice(0, 10).map((x) => (
+    <ApplicationCard
+      key={x.id}
+      app={{
+        avatar: x.icon,
+        title: x.name,
+        update_time: x.update_time,
+      }}
+      onClick={navigateToChat(x.id)}
+    ></ApplicationCard>
+  ));
 }

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

@@ -1,15 +1,20 @@
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchSearchList } from '../next-searches/hooks';
 import { ApplicationCard } from './application-card';
 
 export function SearchList() {
   const { data } = useFetchSearchList();
+  const { navigateToSearch } = useNavigatePage();
 
-  return data?.data.search_apps
-    .slice(0, 10)
-    .map((x) => (
-      <ApplicationCard
-        key={x.id}
-        app={{ avatar: x.avatar, title: x.name, update_time: x.update_time }}
-      ></ApplicationCard>
-    ));
+  return data?.data.search_apps.slice(0, 10).map((x) => (
+    <ApplicationCard
+      key={x.id}
+      app={{
+        avatar: x.avatar,
+        title: x.name,
+        update_time: x.update_time,
+      }}
+      onClick={() => navigateToSearch(x.id)}
+    ></ApplicationCard>
+  ));
 }