pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Use AvatarUpload to replace the avatar settings on the dataset and search pages #3221 (#9785)

Browse Source 
### What problem does this PR solve?

Feat: Use AvatarUpload to replace the avatar settings on the dataset and
search pages #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-28 14:45:20 +08:00
committed by GitHub
parent 4720849ac0
commit 5fe8cf6018
6 changed files with 83 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
web/src/components/avatar-upload.tsx
View File

@ -1,71 +1,80 @@
import { transformFile2Base64 } from '@/utils/file-util'; import { transformFile2Base64 } from '@/utils/file-util';
import { Pencil, Upload } from 'lucide-react'; import { Pencil, Upload } from 'lucide-react';
import { ChangeEventHandler, useCallback, useEffect, useState } from 'react'; import {
ChangeEventHandler,
forwardRef,
useCallback,
useEffect,
useState,
} from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'; import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Input } from './ui/input'; import { Input } from './ui/input';
type AvatarUploadProps = { value?: string; onChange?: (value: string) => void }; type AvatarUploadProps = { value?: string; onChange?: (value: string) => void };
export function AvatarUpload({ value, onChange }: AvatarUploadProps) { export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
const { t } = useTranslation(); function AvatarUpload({ value, onChange }, ref) {
const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64 const { t } = useTranslation();
const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback( const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
async (ev) => { async (ev) => {
const file = ev.target?.files?.[0]; const file = ev.target?.files?.[0];
if (/\.(jpg|jpeg|png|webp|bmp)$/i.test(file?.name ?? '')) { if (/\.(jpg|jpeg|png|webp|bmp)$/i.test(file?.name ?? '')) {
const str = await transformFile2Base64(file!); const str = await transformFile2Base64(file!);
setAvatarBase64Str(str); setAvatarBase64Str(str);
onChange?.(str); onChange?.(str);
}
ev.target.value = '';
},
[onChange],
);
useEffect(() => {
if (value) {
setAvatarBase64Str(value);
} }
ev.target.value = ''; }, [value]);
},
[onChange],
);
useEffect(() => { return (
if (value) { <div className="flex justify-start items-end space-x-2">
setAvatarBase64Str(value); <div className="relative group">
} {!avatarBase64Str ? (
}, [value]); <div className="w-[64px] h-[64px] grid place-content-center border border-dashed rounded-md">
<div className="flex flex-col items-center">
return ( <Upload />
<div className="flex justify-start items-end space-x-2"> <p>{t('common.upload')}</p>
<div className="relative group"> </div>
{!avatarBase64Str ? (
<div className="w-[64px] h-[64px] grid place-content-center border border-dashed rounded-md">
<div className="flex flex-col items-center">
<Upload />
<p>{t('common.upload')}</p>
</div> </div>
</div> ) : (
) : ( <div className="w-[64px] h-[64px] relative grid place-content-center">
<div className="w-[64px] h-[64px] relative grid place-content-center"> <Avatar className="w-[64px] h-[64px] rounded-md">
<Avatar className="w-[64px] h-[64px] rounded-md"> <AvatarImage className=" block" src={avatarBase64Str} alt="" />
<AvatarImage className=" block" src={avatarBase64Str} alt="" /> <AvatarFallback></AvatarFallback>
<AvatarFallback></AvatarFallback> </Avatar>
</Avatar> <div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
<div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60"> <Pencil
<Pencil size={20}
size={20} className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block" />
/> </div>
</div> </div>
</div> )}
)} <Input
<Input placeholder=""
placeholder="" type="file"
type="file" title=""
title="" accept="image/*"
accept="image/*" className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" onChange={handleChange}
onChange={handleChange} ref={ref}
/> />
</div>
<div className="margin-1 text-muted-foreground">
{t('knowledgeConfiguration.photoTip')}
</div>
</div> </div>
<div className="margin-1 text-muted-foreground"> );
{t('knowledgeConfiguration.photoTip')} },
</div> );
</div>
);
}

2
web/src/hooks/use-knowledge-request.ts
View File

@ -1,4 +1,5 @@
import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit'; import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
import message from '@/components/ui/message';
import { import {
IKnowledge, IKnowledge,
IKnowledgeGraph, IKnowledgeGraph,
@ -13,7 +14,6 @@ import kbService, {
} from '@/services/knowledge-service'; } from '@/services/knowledge-service';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useDebounce } from 'ahooks'; import { useDebounce } from 'ahooks';
import { message } from 'antd';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useParams, useSearchParams } from 'umi'; import { useParams, useSearchParams } from 'umi';
import { import {

2
web/src/pages/dataset/setting/chunk-method-form.tsx
View File

@ -4,7 +4,7 @@ import { useFormContext, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { DocumentParserType } from '@/constants/knowledge'; import { DocumentParserType } from '@/constants/knowledge';
import { useUpdateKnowledge } from '@/hooks/knowledge-hooks'; import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useParams } from 'umi'; import { useParams } from 'umi';
import { AudioConfiguration } from './configuration/audio'; import { AudioConfiguration } from './configuration/audio';

86
web/src/pages/dataset/setting/general-form.tsx
View File

@ -1,7 +1,7 @@
import { AvatarUpload } from '@/components/avatar-upload';
import { FormContainer } from '@/components/form-container'; import { FormContainer } from '@/components/form-container';
import { SelectWithSearch } from '@/components/originui/select-with-search'; import { SelectWithSearch } from '@/components/originui/select-with-search';
import { RAGFlowFormItem } from '@/components/ragflow-form'; import { RAGFlowFormItem } from '@/components/ragflow-form';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button, ButtonLoading } from '@/components/ui/button'; import { Button, ButtonLoading } from '@/components/ui/button';
import { import {
FormControl, FormControl,
@ -12,10 +12,8 @@ import {
} from '@/components/ui/form'; } from '@/components/ui/form';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { PermissionRole } from '@/constants/permission'; import { PermissionRole } from '@/constants/permission';
import { useUpdateKnowledge } from '@/hooks/knowledge-hooks'; import { useUpdateKnowledge } from '@/hooks/use-knowledge-request';
import { transformFile2Base64 } from '@/utils/file-util'; import { useMemo } from 'react';
import { Pencil, Upload } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { useFormContext } from 'react-hook-form'; import { useFormContext } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useParams } from 'umi'; import { useParams } from 'umi';
@ -23,8 +21,6 @@ import { useParams } from 'umi';
export function GeneralForm() { export function GeneralForm() {
const form = useFormContext(); const form = useFormContext();
const { t } = useTranslation(); const { t } = useTranslation();
const [avatarFile, setAvatarFile] = useState<File | null>(null);
const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
const { saveKnowledgeConfiguration, loading: submitLoading } = const { saveKnowledgeConfiguration, loading: submitLoading } =
useUpdateKnowledge(); useUpdateKnowledge();
@ -43,26 +39,6 @@ export function GeneralForm() {
})); }));
}, [t]); }, [t]);
// init avatar file if it exists in defaultValues
useEffect(() => {
if (!avatarFile) {
let avatarList = defaultValues['avatar'];
if (avatarList && avatarList.length > 0) {
setAvatarBase64Str(avatarList[0].thumbUrl);
}
}
}, [avatarFile, defaultValues]);
// input[type=file] on change event, get img base64
useEffect(() => {
if (avatarFile) {
(async () => {
// make use of img compression transformFile2Base64
setAvatarBase64Str(await transformFile2Base64(avatarFile));
})();
}
}, [avatarFile]);
return ( return (
<> <>
<FormContainer className="space-y-10 p-10"> <FormContainer className="space-y-10 p-10">
@ -90,62 +66,14 @@ export function GeneralForm() {
<FormField <FormField
control={form.control} control={form.control}
name="avatar" name="avatar"
render={() => ( render={({ field }) => (
<FormItem className="items-center space-y-0"> <FormItem className="items-center space-y-0">
<div className="flex"> <div className="flex">
<FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4"> <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
{t('setting.avatar')} {t('setting.avatar')}
</FormLabel> </FormLabel>
<FormControl className="w-3/4"> <FormControl className="w-3/4">
<div className="flex justify-start items-end space-x-2"> <AvatarUpload {...field}></AvatarUpload>
<div className="relative group">
{!avatarBase64Str ? (
<div className="w-[64px] h-[64px] grid place-content-center border border-dashed rounded-md">
<div className="flex flex-col items-center">
<Upload />
<p>{t('common.upload')}</p>
</div>
</div>
) : (
<div className="w-[64px] h-[64px] relative grid place-content-center">
<Avatar className="w-[64px] h-[64px] rounded-md">
<AvatarImage
className=" block"
src={avatarBase64Str}
alt=""
/>
<AvatarFallback></AvatarFallback>
</Avatar>
<div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
<Pencil
size={20}
className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
/>
</div>
</div>
)}
<Input
placeholder=""
// {...field}
type="file"
title=""
accept="image/*"
className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
onChange={(ev) => {
const file = ev.target?.files?.[0];
if (
/\.(jpg|jpeg|png|webp|bmp)$/i.test(file?.name ?? '')
) {
setAvatarFile(file!);
}
ev.target.value = '';
}}
/>
</div>
<div className="margin-1 text-muted-foreground">
{t('knowledgeConfiguration.photoTip')}
</div>
</div>
</FormControl> </FormControl>
</div> </div>
<div className="flex pt-1"> <div className="flex pt-1">
@ -209,8 +137,8 @@ export function GeneralForm() {
onClick={() => { onClick={() => {
(async () => { (async () => {
let isValidate = await form.trigger('name'); let isValidate = await form.trigger('name');
const { name, description, permission } = form.getValues(); const { name, description, permission, avatar } =
const avatar = avatarBase64Str; form.getValues();
if (isValidate) { if (isValidate) {
saveKnowledgeConfiguration({ saveKnowledgeConfiguration({

55
web/src/pages/dataset/setting/hooks.ts
View File

@ -2,46 +2,15 @@ import { LlmModelType } from '@/constants/knowledge';
import { useSetModalState } from '@/hooks/common-hooks'; import { useSetModalState } from '@/hooks/common-hooks';
import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks'; import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
import { useNavigateToDataset } from '@/hooks/route-hook'; import { useFetchKnowledgeBaseConfiguration } from '@/hooks/use-knowledge-request';
import {
useFetchKnowledgeBaseConfiguration,
useUpdateKnowledge,
} from '@/hooks/use-knowledge-request';
import { useSelectParserList } from '@/hooks/user-setting-hooks'; import { useSelectParserList } from '@/hooks/user-setting-hooks';
import {
getBase64FromUploadFileList,
getUploadFileListFromBase64,
} from '@/utils/file-util';
import { useIsFetching } from '@tanstack/react-query'; import { useIsFetching } from '@tanstack/react-query';
import { Form, UploadFile } from 'antd';
import { FormInstance } from 'antd/lib';
import { pick } from 'lodash'; import { pick } from 'lodash';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { UseFormReturn } from 'react-hook-form'; import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod'; import { z } from 'zod';
import { formSchema } from './form-schema'; import { formSchema } from './form-schema';
export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge();
const navigateToDataset = useNavigateToDataset();
const submitKnowledgeConfiguration = useCallback(async () => {
const values = await form.validateFields();
const avatar = await getBase64FromUploadFileList(values.avatar);
saveKnowledgeConfiguration({
...values,
avatar,
});
navigateToDataset();
}, [saveKnowledgeConfiguration, form, navigateToDataset]);
return {
submitKnowledgeConfiguration,
submitLoading: loading,
navigateToDataset,
};
};
// The value that does not need to be displayed in the analysis method Select // The value that does not need to be displayed in the analysis method Select
const HiddenFields = ['email', 'picture', 'audio']; const HiddenFields = ['email', 'picture', 'audio'];
@ -67,11 +36,6 @@ export const useFetchKnowledgeConfigurationOnMount = (
const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration(); const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
useEffect(() => { useEffect(() => {
const fileList: UploadFile[] = getUploadFileListFromBase64(
knowledgeDetails.avatar,
);
console.log('🚀 ~ useEffect ~ fileList:', fileList, knowledgeDetails);
const parser_config = { const parser_config = {
...form.formState?.defaultValues?.parser_config, ...form.formState?.defaultValues?.parser_config,
...knowledgeDetails.parser_config, ...knowledgeDetails.parser_config,
@ -86,12 +50,10 @@ export const useFetchKnowledgeConfigurationOnMount = (
'language', 'language',
'parser_config', 'parser_config',
'pagerank', 'pagerank',
'avatar',
]), ]),
}; };
form.reset({ form.reset(formValues);
...formValues,
avatar: fileList,
});
}, [form, knowledgeDetails]); }, [form, knowledgeDetails]);
return knowledgeDetails; return knowledgeDetails;
@ -100,17 +62,6 @@ export const useFetchKnowledgeConfigurationOnMount = (
export const useSelectKnowledgeDetailsLoading = () => export const useSelectKnowledgeDetailsLoading = () =>
useIsFetching({ queryKey: ['fetchKnowledgeDetail'] }) > 0; useIsFetching({ queryKey: ['fetchKnowledgeDetail'] }) > 0;
export const useHandleChunkMethodChange = () => {
const [form] = Form.useForm();
const chunkMethod = Form.useWatch('parser_id', form);
useEffect(() => {
console.log('🚀 ~ useHandleChunkMethodChange ~ chunkMethod:', chunkMethod);
}, [chunkMethod]);
return { form, chunkMethod };
};
export const useRenameKnowledgeTag = () => { export const useRenameKnowledgeTag = () => {
const [tag, setTag] = useState<string>(''); const [tag, setTag] = useState<string>('');
const { const {

74
web/src/pages/next-search/search-setting.tsx
View File

@ -1,11 +1,11 @@
// src/pages/next-search/search-setting.tsx // src/pages/next-search/search-setting.tsx
import { AvatarUpload } from '@/components/avatar-upload';
import { import {
MetadataFilter, MetadataFilter,
MetadataFilterSchema, MetadataFilterSchema,
} from '@/components/metadata-filter'; } from '@/components/metadata-filter';
import { Input } from '@/components/originui/input'; import { Input } from '@/components/originui/input';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { SingleFormSlider } from '@/components/ui/dual-range-slider'; import { SingleFormSlider } from '@/components/ui/dual-range-slider';
import { import {
@ -31,9 +31,8 @@ import {
import { useFetchTenantInfo } from '@/hooks/user-setting-hooks'; import { useFetchTenantInfo } from '@/hooks/user-setting-hooks';
import { IKnowledge } from '@/interfaces/database/knowledge'; import { IKnowledge } from '@/interfaces/database/knowledge';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { transformFile2Base64 } from '@/utils/file-util';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Pencil, Upload, X } from 'lucide-react'; import { X } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import { useForm, useWatch } from 'react-hook-form'; import { useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -110,8 +109,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
resolver: zodResolver(SearchSettingFormSchema), resolver: zodResolver(SearchSettingFormSchema),
}); });
const [avatarFile, setAvatarFile] = useState<File | null>(null);
const [avatarBase64Str, setAvatarBase64Str] = useState(''); // Avatar Image base64
const [datasetList, setDatasetList] = useState<MultiSelectOptionType[]>([]); const [datasetList, setDatasetList] = useState<MultiSelectOptionType[]>([]);
const [datasetSelectEmbdId, setDatasetSelectEmbdId] = useState(''); const [datasetSelectEmbdId, setDatasetSelectEmbdId] = useState('');
const { t } = useTranslation(); const { t } = useTranslation();
@ -174,19 +171,7 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
setWidth0('w-[440px]'); setWidth0('w-[440px]');
} }
}, [open]); }, [open]);
useEffect(() => {
if (!avatarFile) {
setAvatarBase64Str(data?.avatar);
}
}, [avatarFile, data?.avatar]);
useEffect(() => {
if (avatarFile) {
(async () => {
// make use of img compression transformFile2Base64
setAvatarBase64Str(await transformFile2Base64(avatarFile));
})();
}
}, [avatarFile]);
const { list: datasetListOrigin } = useFetchKnowledgeList(); const { list: datasetListOrigin } = useFetchKnowledgeList();
useEffect(() => { useEffect(() => {
@ -273,7 +258,6 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
llm_setting: { ...llmSetting }, llm_setting: { ...llmSetting },
}, },
tenant_id: systemSetting.tenant_id, tenant_id: systemSetting.tenant_id,
avatar: avatarBase64Str,
}); });
setOpen(false); setOpen(false);
} catch (error) { } catch (error) {
@ -337,59 +321,11 @@ const SearchSetting: React.FC<SearchSettingProps> = ({
<FormField <FormField
control={formMethods.control} control={formMethods.control}
name="avatar" name="avatar"
render={() => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>{t('search.avatar')}</FormLabel> <FormLabel>{t('search.avatar')}</FormLabel>
<FormControl> <FormControl>
<div className="relative group flex items-end gap-2"> <AvatarUpload {...field}></AvatarUpload>
<div>
{!avatarBase64Str ? (
<div className="w-[64px] h-[64px] grid place-content-center border border-dashed rounded-md">
<div className="flex flex-col items-center">
<Upload />
<p>{t('common.upload')}</p>
</div>
</div>
) : (
<div className="w-[64px] h-[64px] relative grid place-content-center">
<RAGFlowAvatar
avatar={avatarBase64Str}
name={data.name}
className="w-[64px] h-[64px] rounded-md block"
/>
<div className="absolute inset-0 bg-[#000]/20 group-hover:bg-[#000]/60">
<Pencil
size={20}
className="absolute right-2 bottom-0 opacity-50 hidden group-hover:block"
/>
</div>
</div>
)}
<input
placeholder=""
// {...field}
type="file"
title=""
accept="image/*"
className="absolute w-[64px] top-0 left-0 h-full opacity-0 cursor-pointer"
onChange={(ev) => {
const file = ev.target?.files?.[0];
if (
/\.(jpg|jpeg|png|webp|bmp)$/i.test(
file?.name ?? '',
)
) {
setAvatarFile(file!);
}
ev.target.value = '';
}}
/>
</div>
<div className="margin-1 text-muted-foreground">
{t('knowledgeConfiguration.photoTip')}
</div>
</div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>