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/components/chunk-method-dialog/index.tsx

@@ -317,7 +317,11 @@ export function ChunkMethodDialog({
               </FormContainer>
             )}
             {showGraphRagItems(selectedTag as DocumentParserType) &&
-              useGraphRag && <UseGraphRagFormField></UseGraphRagFormField>}
+              useGraphRag && (
+                <FormContainer>
+                  <UseGraphRagFormField></UseGraphRagFormField>
+                </FormContainer>
+              )}
             {showEntityTypes && <EntityTypesFormField></EntityTypesFormField>}
           </form>
         </Form>

web/src/components/delimiter-form-field.tsx

@@ -50,10 +50,10 @@ export function DelimiterFormField() {
         }
         return (
           <FormItem className=" items-center space-y-0 ">
-            <div className="flex items-center">
+            <div className="flex items-center gap-1">
               <FormLabel
                 tooltip={t('knowledgeDetails.delimiterTip')}
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
               >
                 {t('knowledgeDetails.delimiter')}
               </FormLabel>

web/src/components/excel-to-html-form-field.tsx

@@ -25,10 +25,10 @@ export function ExcelToHtmlFormField() {
 
         return (
           <FormItem defaultChecked={false} className=" items-center space-y-0 ">
-            <div className="flex items-center">
+            <div className="flex items-center gap-1">
               <FormLabel
                 tooltip={t('html4excelTip')}
-                className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
               >
                 {t('html4excel')}
               </FormLabel>

web/src/components/parse-configuration/graph-rag-form-fields.tsx

@@ -59,10 +59,10 @@ export function UseGraphRagFormField() {
       name="parser_config.graphrag.use_graphrag"
       render={({ field }) => (
         <FormItem defaultChecked={false} className=" items-center space-y-0 ">
-          <div className="flex items-center">
+          <div className="flex items-center gap-1">
             <FormLabel
               tooltip={t('useGraphRagTip')}
-              className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+              className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
             >
               {t('useGraphRag')}
             </FormLabel>

web/src/components/parse-configuration/raptor-form-fields.tsx

@@ -86,10 +86,10 @@ const RaptorFormFields = () => {
               defaultChecked={false}
               className="items-center space-y-0 "
             >
-              <div className="flex items-center">
+              <div className="flex items-center gap-1">
                 <FormLabel
                   tooltip={t('useRaptorTip')}
-                  className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                  className="text-sm text-muted-foreground w-1/4 whitespace-break-spaces"
                 >
                   {t('useRaptor')}
                 </FormLabel>

web/src/components/ragflow-avatar.tsx

@@ -3,6 +3,13 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { forwardRef, memo, useEffect, useRef, useState } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
 
+const PREDEFINED_COLORS = [
+  { from: '#4F6DEE', to: '#67BDF9' },
+  { from: '#38A04D', to: '#93DCA2' },
+  { from: '#C35F2B', to: '#EDB395' },
+  { from: '#633897', to: '#CBA1FF' },
+];
+
 const getStringHash = (str: string): number => {
   const normalized = str.trim().toLowerCase();
   let hash = 104729;
@@ -17,16 +24,12 @@ const getStringHash = (str: string): number => {
   return Math.abs(hash);
 };
 
-// Generate a hash function with a fixed color
 const getColorForName = (name: string): { from: string; to: string } => {
   const hash = getStringHash(name);
-  const hue = hash % 360;
+  const index = hash % PREDEFINED_COLORS.length;
-
+  return PREDEFINED_COLORS[index];
-  return {
-    to: `hsl(${hue}, 70%, 80%)`,
-    from: `hsl(${hue}, 60%, 30%)`,
-  };
 };
+
 export const RAGFlowAvatar = memo(
   forwardRef<
     React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -43,7 +46,7 @@ export const RAGFlowAvatar = memo(
       if (parts.length === 1) {
         return parts[0][0].toUpperCase();
       }
-      return parts[0][0].toUpperCase() + parts[1][0].toUpperCase();
+      return parts[0][0].toUpperCase();
     };
 
     const initials = getInitials(name);
@@ -98,7 +101,7 @@ export const RAGFlowAvatar = memo(
             'bg-gradient-to-b',
             `from-[${from}] to-[${to}]`,
             'flex items-center justify-center',
-            'text-white font-bold',
+            'text-white ',
             { 'rounded-md': !isPerson },
           )}
           style={{

web/src/components/slider-input-form-field.tsx

@@ -49,12 +49,12 @@ export function SliderInputFormField({
       defaultValue={defaultValue || 0}
       render={({ field }) => (
         <FormItem
-          className={cn({ 'flex items-center space-y-0': isHorizontal })}
+          className={cn({ 'flex items-center gap-1 space-y-0': isHorizontal })}
         >
           <FormLabel
             tooltip={tooltip}
             className={cn({
-              'text-sm text-muted-foreground whitespace-nowrap w-1/4':
+              'text-sm text-muted-foreground whitespace-break-spaces w-1/4':
                 isHorizontal,
             })}
           >

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

@@ -126,7 +126,7 @@ export default function SearchPage() {
           // ></EmbedDialog>
         }
       </div>
-      <div className="absolute right-5 top-12 ">
+      <div className="absolute right-5 top-4 ">
         <Button
           className="bg-text-primary  text-bg-base border-b-[#00BEB4] border-b-2"
           onClick={() => {

web/src/pages/next-search/search-setting-aisummery-config.tsx

@@ -30,18 +30,20 @@ interface LlmSettingFieldItemsProps {
   prefix?: string;
   options?: any[];
 }
-
+const LlmSettingEnableSchema = {
-export const LlmSettingSchema = {
-  llm_id: z.string(),
-  parameter: z.string(),
-  temperature: z.coerce.number(),
-  top_p: z.coerce.number(),
-  presence_penalty: z.coerce.number(),
-  frequency_penalty: z.coerce.number(),
   temperatureEnabled: z.boolean(),
   topPEnabled: z.boolean(),
   presencePenaltyEnabled: z.boolean(),
   frequencyPenaltyEnabled: z.boolean(),
+};
+export const LlmSettingSchema = {
+  llm_id: z.string(),
+  parameter: z.string().optional(),
+  temperature: z.coerce.number().optional(),
+  top_p: z.coerce.number().optional(),
+  presence_penalty: z.coerce.number().optional(),
+  frequency_penalty: z.coerce.number().optional(),
+  ...LlmSettingEnableSchema,
   // maxTokensEnabled: z.boolean(),
 };
 
@@ -65,6 +67,7 @@ export function LlmSettingFieldItems({
         settledModelVariableMap[
           parameter as keyof typeof settledModelVariableMap
         ];
+      const enabledKeys = Object.keys(LlmSettingEnableSchema);
 
       // const nextValues = { ...currentValues, ...values };
 
@@ -75,6 +78,11 @@ export function LlmSettingFieldItems({
           form.setValue(`${prefix}.${key}`, element);
         }
       }
+      if (enabledKeys && enabledKeys.length) {
+        for (const key of enabledKeys) {
+          form.setValue(`${prefix}.${key}`, true);
+        }
+      }
     },
     [form, prefix],
   );

web/src/pages/next-search/search-setting.tsx

@@ -38,11 +38,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import {
+import { LlmModelType } from '../dataset/dataset/constant';
-  LlmModelType,
-  ModelVariableType,
-  settledModelVariableMap,
-} from '../dataset/dataset/constant';
 import {
   ISearchAppDetailProps,
   IUpdateSearchProps,
@@ -143,21 +139,11 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
         chat_id: '',
         llm_setting: {
           llm_id: llm_setting?.llm_id || '',
-          parameter: llm_setting?.parameter || ModelVariableType.Improvise,
+          parameter: llm_setting?.parameter,
-          temperature:
+          temperature: llm_setting?.temperature,
-            llm_setting?.temperature ||
+          top_p: llm_setting?.top_p,
-            settledModelVariableMap[ModelVariableType.Improvise].temperature,
+          frequency_penalty: llm_setting?.frequency_penalty,
-          top_p:
+          presence_penalty: llm_setting?.presence_penalty,
-            llm_setting?.top_p ||
-            settledModelVariableMap[ModelVariableType.Improvise].top_p,
-          frequency_penalty:
-            llm_setting?.frequency_penalty ||
-            settledModelVariableMap[ModelVariableType.Improvise]
-              .frequency_penalty,
-          presence_penalty:
-            llm_setting?.presence_penalty ||
-            settledModelVariableMap[ModelVariableType.Improvise]
-              .presence_penalty,
           temperatureEnabled: llm_setting?.temperature ? true : false,
           topPEnabled: llm_setting?.top_p ? true : false,
           presencePenaltyEnabled: llm_setting?.presence_penalty ? true : false,
@@ -261,8 +247,13 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
   ) => {
     try {
       const { search_config, ...other_formdata } = formData;
-      const { llm_setting, vector_similarity_weight, ...other_config } =
+      const {
-        search_config;
+        llm_setting,
+        vector_similarity_weight,
+        use_rerank,
+        rerank_id,
+        ...other_config
+      } = search_config;
       const llmSetting = {
         llm_id: llm_setting.llm_id,
         parameter: llm_setting.parameter,
@@ -289,6 +280,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
         search_config: {
           ...other_config,
           vector_similarity_weight: 1 - vector_similarity_weight,
+          rerank_id: use_rerank ? rerank_id : '',
           llm_setting: { ...llmSetting },
         },
         tenant_id: systemSetting.tenant_id,
@@ -302,7 +294,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
   return (
     <div
       className={cn(
-        'text-text-primary border p-4 rounded-lg',
+        'text-text-primary border p-4 pb-12 rounded-lg',
         {
           'animate-fade-in-right': open,
           'animate-fade-out-right': !open,
@@ -658,6 +650,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
                 </FormItem>
               )}
             /> */}
+
             <FormField
               control={formMethods.control}
               name="search_config.related_search"
@@ -690,7 +683,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
             />
             {/* Submit Button */}
             <div className="flex justify-end"></div>
-            <div className="flex justify-end gap-2">
+            <div className="flex justify-end gap-2 absolute bottom-1 right-3 bg-bg-base w-[calc(100%-1em)] py-2">
               <Button
                 type="reset"
                 variant={'transparent'}

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 });
+    let res;
-    if (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"