Fix (next search): Optimize the search problem interface and related functions #3221 (#9569)

### What problem does this PR solve?

Fix (next search): Optimize the search problem interface and related
functions #3221

-Add search_id to the retrievval_test interface
-Optimize handleSearchStrChange and handleSearch callbacks to determine
whether to enable AI search based on search configuration

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/agents/agent-card.tsx

@@ -1,10 +1,7 @@
+import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
-import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import { SharedBadge } from '@/components/shared-badge';
-import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IFlow } from '@/interfaces/database/agent';
-import { formatDate } from '@/utils/date';
 import { AgentDropdown } from './agent-dropdown';
 import { useRenameAgent } from './use-rename-agent';
 
@@ -16,36 +13,16 @@ export function AgentCard({ data, showAgentRenameModal }: DatasetCardProps) {
   const { navigateToAgent } = useNavigatePage();
 
   return (
-    <Card key={data.id} className="w-40" onClick={navigateToAgent(data.id)}>
-      <CardContent className="p-2.5 pt-2 group">
-        <section className="flex justify-between mb-2">
-          <div className="flex gap-2 items-center">
-            <RAGFlowAvatar
-              className="size-6 rounded-lg"
-              avatar={data.avatar}
-              name={data.title || 'CN'}
-            ></RAGFlowAvatar>
-            <SharedBadge>{data.nickname}</SharedBadge>
-          </div>
-          <AgentDropdown
-            showAgentRenameModal={showAgentRenameModal}
-            agent={data}
-          >
-            <MoreButton></MoreButton>
-          </AgentDropdown>
-        </section>
-        <div className="flex justify-between items-end">
-          <div className="w-full">
-            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
-              {data.title}
-            </h3>
-            <p className="text-xs text-text-secondary">{data.description}</p>
-            <p className="text-xs text-text-secondary">
-              {formatDate(data.update_time)}
-            </p>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
+    <HomeCard
+      data={{ ...data, name: data.title, description: data.description || '' }}
+      moreDropdown={
+        <AgentDropdown showAgentRenameModal={showAgentRenameModal} agent={data}>
+          <MoreButton></MoreButton>
+        </AgentDropdown>
+      }
+      onClick={() => {
+        navigateToAgent(data?.id);
+      }}
+    />
   );
 }

web/src/pages/agents/index.tsx

@@ -46,7 +46,7 @@ export default function Agents() {
         </ListFilterBar>
       </div>
       <div className="flex-1 overflow-auto">
-        <div className="flex flex-wrap gap-4   px-8">
+        <div className="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 max-h-[78vh] overflow-auto px-8">
           {data.map((x) => {
             return (
               <AgentCard