Fix(search): Search application list supports renaming function #3221 (#9555)

### What problem does this PR solve?

Fix (search): Search application list supports renaming function #3221

-Update the search application list page and add a renaming operation
entry
-Modify the search application details interface to support obtaining
detailed information
-Optimize search settings page layout and style

### Type of change

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

web/src/pages/next-searches/hooks.ts

@@ -89,7 +89,10 @@ export const useFetchSearchList = (params?: SearchListParams) => {
     ...params,
   });
 
-  const { data, isLoading, isError } = useQuery<SearchListResponse, Error>({
+  const { data, isLoading, isError, refetch } = useQuery<
+    SearchListResponse,
+    Error
+  >({
     queryKey: ['searchList', searchParams],
     queryFn: async () => {
       const { data: response } =
@@ -108,7 +111,14 @@ export const useFetchSearchList = (params?: SearchListParams) => {
     }));
   };
 
-  return { data, isLoading, isError, searchParams, setSearchListParams };
+  return {
+    data,
+    isLoading,
+    isError,
+    searchParams,
+    setSearchListParams,
+    refetch,
+  };
 };
 
 interface DeleteSearchProps {
@@ -150,6 +160,7 @@ export interface ISearchAppDetailProps {
     query_mindmap: boolean;
     related_search: boolean;
     rerank_id: string;
+    use_rerank?: boolean;
     similarity_threshold: number;
     summary: boolean;
     llm_setting: IllmSettingProps & IllmSettingEnableProps;
@@ -191,6 +202,7 @@ export const useFetchSearchDetail = (tenantId?: string) => {
   const fetchSearchDetailFunc = shared_id
     ? searchService.getSearchDetailShare
     : searchService.getSearchDetail;
+
   const { data, isLoading, isError } = useQuery<SearchDetailResponse, Error>({
     queryKey: ['searchDetail', searchId],
     enabled: !shared_id || !!tenantId,

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

@@ -13,13 +13,20 @@ import { Modal } from '@/components/ui/modal/modal';
 import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import searchService from '@/services/search-service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { pick } from 'lodash';
 import { Plus, Search } from 'lucide-react';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
-import { useCreateSearch, useFetchSearchList } from './hooks';
+import {
+  ISearchAppProps,
+  IUpdateSearchProps,
+  useCreateSearch,
+  useFetchSearchList,
+  useUpdateSearch,
+} from './hooks';
 import { SearchCard } from './search-card';
 const searchFormSchema = z.object({
   name: z.string().min(1, {
@@ -27,16 +34,22 @@ const searchFormSchema = z.object({
   }),
 });
 
-type SearchFormValues = z.infer<typeof searchFormSchema>;
+type SearchFormValues = z.infer<typeof searchFormSchema> & {
+  search_id?: string;
+};
+
 export default function SearchList() {
   // const { data } = useFetchFlowList();
   const { t } = useTranslate('search');
   const { navigateToSearch } = useNavigatePage();
   const { isLoading, createSearch } = useCreateSearch();
+  const [isEdit, setIsEdit] = useState(false);
+  const [searchData, setSearchData] = useState<ISearchAppProps | null>(null);
   const {
     data: list,
     searchParams,
     setSearchListParams,
+    refetch: refetchList,
   } = useFetchSearchList();
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const form = useForm<SearchFormValues>({
@@ -48,10 +61,30 @@ export default function SearchList() {
   const handleSearchChange = (value: string) => {
     console.log(value);
   };
-
+  const { updateSearch } = useUpdateSearch();
   const onSubmit = async (values: SearchFormValues) => {
-    const res = await createSearch({ name: values.name });
-    if (res) {
+    let res;
+    if (isEdit) {
+      try {
+        const reponse = await searchService.getSearchDetail({
+          search_id: searchData?.id,
+        });
+        const detail = reponse.data?.data;
+        console.log('detail-->', detail);
+        const { id, created_by, update_time, ...searchDataTemp } = detail;
+        res = await updateSearch({
+          ...searchDataTemp,
+          name: values.name,
+          search_id: searchData?.id,
+        } as unknown as IUpdateSearchProps);
+        refetchList();
+      } catch (e) {
+        console.error('error', e);
+      }
+    } else {
+      res = await createSearch({ name: values.name });
+    }
+    if (res && !searchData?.id) {
       navigateToSearch(res?.search_id);
     }
     if (!isLoading) {
@@ -60,11 +93,23 @@ export default function SearchList() {
     form.reset({ name: '' });
   };
   const openCreateModalFun = () => {
+    setIsEdit(false);
     setOpenCreateModal(true);
   };
   const handlePageChange = (page: number, pageSize: number) => {
+    setIsEdit(false);
     setSearchListParams({ ...searchParams, page, page_size: pageSize });
   };
+
+  const showSearchRenameModal = (data: ISearchAppProps) => {
+    form.setValue('name', data.name);
+    if (data.id) {
+      setIsEdit(true);
+    }
+
+    setSearchData(data);
+    setOpenCreateModal(true);
+  };
   return (
     <section className="w-full h-full flex flex-col">
       <div className="px-8 pt-8">
@@ -92,7 +137,13 @@ export default function SearchList() {
       <div className="flex-1">
         <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">
           {list?.data.search_apps.map((x) => {
-            return <SearchCard key={x.id} data={x}></SearchCard>;
+            return (
+              <SearchCard
+                key={x.id}
+                data={x}
+                showSearchRenameModal={showSearchRenameModal}
+              ></SearchCard>
+            );
           })}
         </div>
       </div>

web/src/pages/next-searches/search-card.tsx

@@ -8,8 +8,9 @@ import { SearchDropdown } from './search-dropdown';
 
 interface IProps {
   data: ISearchAppProps;
+  showSearchRenameModal: (data: ISearchAppProps) => void;
 }
-export function SearchCard({ data }: IProps) {
+export function SearchCard({ data, showSearchRenameModal }: IProps) {
   const { navigateToSearch } = useNavigatePage();
 
   return (
@@ -32,7 +33,10 @@ export function SearchCard({ data }: IProps) {
             <div className="text-[20px] font-bold w-80% leading-5">
               {data.name}
             </div>
-            <SearchDropdown dataset={data}>
+            <SearchDropdown
+              dataset={data}
+              showSearchRenameModal={showSearchRenameModal}
+            >
               <MoreButton></MoreButton>
             </SearchDropdown>
           </section>

web/src/pages/next-searches/search-dropdown.tsx

@@ -3,9 +3,10 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Trash2 } from 'lucide-react';
+import { PenLine, Trash2 } from 'lucide-react';
 import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ISearchAppProps, useDeleteSearch } from './hooks';
@@ -13,12 +14,21 @@ import { ISearchAppProps, useDeleteSearch } from './hooks';
 export function SearchDropdown({
   children,
   dataset,
+  showSearchRenameModal,
 }: PropsWithChildren & {
   dataset: ISearchAppProps;
+  showSearchRenameModal: (dataset: ISearchAppProps) => void;
 }) {
   const { t } = useTranslation();
   const { deleteSearch } = useDeleteSearch();
-
+  const handleShowChatRenameModal: MouseEventHandler<HTMLDivElement> =
+    useCallback(
+      (e) => {
+        e.stopPropagation();
+        showSearchRenameModal(dataset);
+      },
+      [dataset, showSearchRenameModal],
+    );
   const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
     deleteSearch({ search_id: dataset.id });
   }, [dataset.id, deleteSearch]);
@@ -27,10 +37,10 @@ export function SearchDropdown({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent>
-        {/* <DropdownMenuItem onClick={handleShowDatasetRenameModal}>
+        <DropdownMenuItem onClick={handleShowChatRenameModal}>
           {t('common.rename')} <PenLine />
         </DropdownMenuItem>
-        <DropdownMenuSeparator /> */}
+        <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>
           <DropdownMenuItem
             className="text-text-delete-red"