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/next-chats/chat-card.tsx

@@ -1,9 +1,7 @@
+import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
-import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IDialog } from '@/interfaces/database/chat';
-import { formatDate } from '@/utils/date';
 import { ChatDropdown } from './chat-dropdown';
 import { useRenameChat } from './hooks/use-rename-chat';
 
@@ -15,32 +13,21 @@ export function ChatCard({ data, showChatRenameModal }: IProps) {
   const { navigateToChat } = useNavigatePage();
 
   return (
-    <Card key={data.id} className="w-40" onClick={navigateToChat(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.icon}
-              name={data.name || 'CN'}
-            ></RAGFlowAvatar>
-          </div>
-          <ChatDropdown chat={data} showChatRenameModal={showChatRenameModal}>
-            <MoreButton></MoreButton>
-          </ChatDropdown>
-        </section>
-        <div className="flex justify-between items-end">
-          <div className="w-full">
-            <h3 className="text-lg font-semibold mb-2 line-clamp-1 truncate">
-              {data.name}
-            </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={{
+        name: data.name,
+        description: data.description,
+        avatar: data.icon,
+        update_time: data.update_time,
+      }}
+      moreDropdown={
+        <ChatDropdown chat={data} showChatRenameModal={showChatRenameModal}>
+          <MoreButton></MoreButton>
+        </ChatDropdown>
+      }
+      onClick={() => {
+        navigateToChat(data?.id);
+      }}
+    />
   );
 }

web/src/pages/next-chats/index.tsx

@@ -49,7 +49,7 @@ export default function ChatList() {
         </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-[84vh] overflow-auto px-8">
           {data.dialogs.map((x) => {
             return (
               <ChatCard