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)
2025-12-08 12:32:30 +08:00 · 2025-08-19 17:35:32 +08:00
parent 0aa3c4cdae
commit f2c5ad170d
14 changed files with 152 additions and 67 deletions
--- a/web/src/components/chunk-method-dialog/index.tsx
+++ b/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>
--- a/web/src/components/delimiter-form-field.tsx
+++ b/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>
--- a/web/src/components/excel-to-html-form-field.tsx
+++ b/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>
--- a/web/src/components/parse-configuration/graph-rag-form-fields.tsx
+++ b/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>
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/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>
--- a/web/src/components/ragflow-avatar.tsx
+++ b/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;
-
-  return {
-    to: `hsl(${hue}, 70%, 80%)`,
-    from: `hsl(${hue}, 60%, 30%)`,
-  };
+  const index = hash % PREDEFINED_COLORS.length;
+  return PREDEFINED_COLORS[index];
 };
+
 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={{
--- a/web/src/components/slider-input-form-field.tsx
+++ b/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,
            })}
          >
--- a/web/src/pages/next-search/index.tsx
+++ b/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={() => {
--- a/web/src/pages/next-search/search-setting-aisummery-config.tsx
+++ b/web/src/pages/next-search/search-setting-aisummery-config.tsx
@ -30,18 +30,20 @@ interface LlmSettingFieldItemsProps {
  prefix?: string;
  options?: any[];
 }
-
-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(),
+const LlmSettingEnableSchema = {
  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],
  );
--- a/web/src/pages/next-search/search-setting.tsx
+++ b/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 {
-  LlmModelType,
-  ModelVariableType,
-  settledModelVariableMap,
-} from '../dataset/dataset/constant';
+import { LlmModelType } 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,
-          temperature:
-            llm_setting?.temperature ||
-            settledModelVariableMap[ModelVariableType.Improvise].temperature,
-          top_p:
-            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,
+          parameter: llm_setting?.parameter,
+          temperature: llm_setting?.temperature,
+          top_p: llm_setting?.top_p,
+          frequency_penalty: llm_setting?.frequency_penalty,
+          presence_penalty: llm_setting?.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 } =
-        search_config;
+      const {
+        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'}
--- a/web/src/pages/next-searches/hooks.ts
+++ b/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,
--- a/web/src/pages/next-searches/index.tsx
+++ b/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>
--- a/web/src/pages/next-searches/search-card.tsx
+++ b/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>
--- a/web/src/pages/next-searches/search-dropdown.tsx
+++ b/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"