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

Feat: Added meta data to the chat configuration page #8531 (#9417)

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

Feat: Added meta data to the chat configuration page #8531

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-08-12 16:19:23 +08:00
committed by GitHub
parent 96783aa82c
commit 3d18284dd6
14 changed files with 205 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/agent/form/switch-form/index.tsx
View File

@ -59,7 +59,7 @@ export const LogicalOperatorIcon = function OperatorIcon({
return icon;
};
function useBuildSwitchOperatorOptions() {
export function useBuildSwitchOperatorOptions() {
const { t } = useTranslation();
const switchOperatorOptions = useMemo(() => {

25
web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
View File

@ -14,19 +14,6 @@ import { MetadataFilterConditions } from './metadata-filter-conditions';
const emptyResponseField = ['prompt_config', 'empty_response'];
const MetadataOptions = Object.values(DatasetMetadata).map((x) => {
let value: DatasetMetadata | boolean = x;
if (x === DatasetMetadata.Disabled) {
value = false;
} else if (x === DatasetMetadata.Automatic) {
value = true;
}
return {
value,
label: x,
};
});
const AssistantSetting = ({
show,
form,
@ -35,7 +22,14 @@ const AssistantSetting = ({
const { t } = useTranslate('chat');
const { data } = useFetchTenantInfo(true);
const metadata = Form.useWatch(['meta_data_filter', 'auto'], form);
const MetadataOptions = Object.values(DatasetMetadata).map((x) => {
return {
value: x,
label: t(`meta.${x}`),
};
});
const metadata = Form.useWatch(['meta_data_filter', 'method'], form);
const kbIds = Form.useWatch(['kb_ids'], form);
const hasKnowledge = Array.isArray(kbIds) && kbIds.length > 0;
@ -176,8 +170,9 @@ const AssistantSetting = ({
{hasKnowledge && (
<Form.Item
label={t('metadata')}
name={['meta_data_filter', 'auto']}
name={['meta_data_filter', 'method']}
tooltip={t('metadataTip')}
initialValue={DatasetMetadata.Disabled}
>
<Select options={MetadataOptions} />
</Form.Item>

16
web/src/pages/chat/chat-configuration-modal/metadata-filter-conditions.tsx
View File

@ -1,5 +1,6 @@
import { useFetchKnowledgeMetadata } from '@/hooks/use-knowledge-request';
import { SwitchOperatorOptions } from '@/pages/agent/constant';
import { useBuildSwitchOperatorOptions } from '@/pages/agent/form/switch-form';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {
Button,
@ -12,9 +13,12 @@ import {
Space,
} from 'antd';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
export function MetadataFilterConditions({ kbIds }: { kbIds: string[] }) {
const metadata = useFetchKnowledgeMetadata(kbIds);
const { t } = useTranslation();
const switchOperatorOptions = useBuildSwitchOperatorOptions();
const renderItems = useCallback(
(add: FormListOperation['add']) => {
@ -50,22 +54,22 @@ export function MetadataFilterConditions({ kbIds }: { kbIds: string[] }) {
<Form.Item
{...restField}
name={[name, 'key']}
rules={[{ required: true, message: 'Missing first name' }]}
rules={[{ required: true, message: t('common.pleaseInput') }]}
>
<Input placeholder="First Name" />
<Input placeholder={t('common.pleaseInput')} />
</Form.Item>
<Form.Item {...restField} name={[name, 'op']} className="w-20">
<Select
options={SwitchOperatorOptions}
options={switchOperatorOptions}
popupMatchSelectWidth={false}
/>
</Form.Item>
<Form.Item
{...restField}
name={[name, 'value']}
rules={[{ required: true, message: 'Missing last name' }]}
rules={[{ required: true, message: t('common.pleaseInput') }]}
>
<Input placeholder="Last Name" />
<Input placeholder={t('common.pleaseInput')} />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
@ -73,7 +77,7 @@ export function MetadataFilterConditions({ kbIds }: { kbIds: string[] }) {
<Form.Item>
<Dropdown trigger={['click']} menu={{ items: renderItems(add) }}>
<Button type="dashed" block icon={<PlusOutlined />}>
Add Condition
{t('chat.addCondition')}
</Button>
</Dropdown>
</Form.Item>

175
web/src/pages/next-chats/chat/app-settings/chat-basic-settings.tsx
View File

@ -11,108 +11,101 @@ import {
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useTranslate } from '@/hooks/common-hooks';
import { useFormContext } from 'react-hook-form';
import { Subhead } from './subhead';
export default function ChatBasicSetting() {
const { t } = useTranslate('chat');
const form = useFormContext();
return (
<section>
<Subhead>Basic settings</Subhead>
<div className="space-y-8">
<FormField
control={form.control}
name={'icon'}
render={({ field }) => (
<div className="space-y-6">
<FormItem className="w-full">
<FormLabel>{t('assistantAvatar')}</FormLabel>
<FormControl>
<FileUploader
value={field.value}
onValueChange={field.onChange}
maxFileCount={1}
maxSize={4 * 1024 * 1024}
// progresses={progresses}
// pass the onUpload function here for direct upload
// onUpload={uploadFiles}
// disabled={isUploading}
/>
</FormControl>
<FormMessage />
</FormItem>
</div>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('assistantName')}</FormLabel>
<div className="space-y-8">
<FormField
control={form.control}
name={'icon'}
render={({ field }) => (
<div className="space-y-6">
<FormItem className="w-full">
<FormLabel>{t('assistantAvatar')}</FormLabel>
<FormControl>
<Input {...field}></Input>
<FileUploader
value={field.value}
onValueChange={field.onChange}
maxFileCount={1}
maxSize={4 * 1024 * 1024}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>{t('description')}</FormLabel>
<FormControl>
<Input {...field}></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'prompt_config.empty_response'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('emptyResponse')}</FormLabel>
<FormControl>
<Input {...field}></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'prompt_config.prologue'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('setAnOpener')}</FormLabel>
<FormControl>
<Input {...field}></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SwitchFormField
name={'prompt_config.quote'}
label={t('quote')}
></SwitchFormField>
<SwitchFormField
name={'prompt_config.keyword'}
label={t('keyword')}
></SwitchFormField>
<SwitchFormField
name={'prompt_config.tts'}
label={t('tts')}
></SwitchFormField>
<KnowledgeBaseFormField></KnowledgeBaseFormField>
</div>
</section>
</div>
)}
/>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t('assistantName')}</FormLabel>
<FormControl>
<Input {...field}></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>{t('description')}</FormLabel>
<FormControl>
<Textarea {...field}></Textarea>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'prompt_config.empty_response'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('emptyResponse')}</FormLabel>
<FormControl>
<Textarea {...field}></Textarea>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name={'prompt_config.prologue'}
render={({ field }) => (
<FormItem>
<FormLabel>{t('setAnOpener')}</FormLabel>
<FormControl>
<Textarea {...field}></Textarea>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SwitchFormField
name={'prompt_config.quote'}
label={t('quote')}
></SwitchFormField>
<SwitchFormField
name={'prompt_config.keyword'}
label={t('keyword')}
></SwitchFormField>
<SwitchFormField
name={'prompt_config.tts'}
label={t('tts')}
></SwitchFormField>
<KnowledgeBaseFormField></KnowledgeBaseFormField>
</div>
);
}

44
web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx
View File

@ -9,35 +9,31 @@ import {
import { Textarea } from '@/components/ui/textarea';
import { useTranslate } from '@/hooks/common-hooks';
import { useFormContext } from 'react-hook-form';
import { Subhead } from './subhead';
export function ChatModelSettings() {
const { t } = useTranslate('chat');
const form = useFormContext();
return (
<section>
<Subhead>Model Setting</Subhead>
<div className="space-y-8">
<FormField
control={form.control}
name="prompt_config.system"
render={({ field }) => (
<FormItem>
<FormLabel>{t('system')}</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<LlmSettingFieldItems></LlmSettingFieldItems>
</div>
</section>
<div className="space-y-8">
<FormField
control={form.control}
name="prompt_config.system"
render={({ field }) => (
<FormItem>
<FormLabel>{t('system')}</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<LlmSettingFieldItems prefix="llm_setting"></LlmSettingFieldItems>
</div>
);
}

58
web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
View File

@ -15,42 +15,38 @@ import { Textarea } from '@/components/ui/textarea';
import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
import { useTranslate } from '@/hooks/common-hooks';
import { useFormContext } from 'react-hook-form';
import { Subhead } from './subhead';
export function ChatPromptEngine() {
const { t } = useTranslate('chat');
const form = useFormContext();
return (
<section>
<Subhead>Prompt engine</Subhead>
<div className="space-y-8">
<FormField
control={form.control}
name="prompt_config.system"
render={({ field }) => (
<FormItem>
<FormLabel>{t('system')}</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SimilaritySliderFormField></SimilaritySliderFormField>
<TopNFormField></TopNFormField>
<SwitchFormField
name={'prompt_config.refine_multiturn'}
label={t('multiTurn')}
></SwitchFormField>
<UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
<RerankFormFields></RerankFormFields>
</div>
</section>
<div className="space-y-8">
<FormField
control={form.control}
name="prompt_config.system"
render={({ field }) => (
<FormItem>
<FormLabel>{t('system')}</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SimilaritySliderFormField></SimilaritySliderFormField>
<TopNFormField></TopNFormField>
<SwitchFormField
name={'prompt_config.refine_multiturn'}
label={t('multiTurn')}
></SwitchFormField>
<UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
<RerankFormFields></RerankFormFields>
</div>
);
}

23
web/src/pages/next-chats/chat/app-settings/chat-settings-sheet.tsx
View File

@ -1,23 +0,0 @@
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet';
import { PropsWithChildren } from 'react';
import { ChatSettings } from './chat-settings';
export function ChatSettingSheet({ children }: PropsWithChildren) {
return (
<Sheet>
<SheetTrigger asChild>{children}</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Chat Settings</SheetTitle>
</SheetHeader>
<ChatSettings></ChatSettings>
</SheetContent>
</Sheet>
);
}

15
web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
View File

@ -1,6 +1,10 @@
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { useFetchDialog } from '@/hooks/use-chat-request';
import { transformBase64ToFile } from '@/utils/file-util';
import { zodResolver } from '@hookform/resolvers/zod';
import { PanelRightClose } from 'lucide-react';
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { z } from 'zod';
import ChatBasicSetting from './chat-basic-settings';
@ -11,6 +15,7 @@ import { useChatSettingSchema } from './use-chat-setting-schema';
type ChatSettingsProps = { switchSettingVisible(): void };
export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
const formSchema = useChatSettingSchema();
const { data } = useFetchDialog();
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
@ -34,6 +39,14 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
console.log(values);
}
useEffect(() => {
const nextData = {
...data,
icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
};
form.reset(nextData as z.infer<typeof formSchema>);
}, [data, form]);
return (
<section className="p-5 w-[400px] max-w-[20%]">
<div className="flex justify-between items-center text-base">
@ -49,7 +62,9 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
className="space-y-6 overflow-auto max-h-[87vh] pr-4"
>
<ChatBasicSetting></ChatBasicSetting>
<Separator />
<ChatPromptEngine></ChatPromptEngine>
<Separator />
<ChatModelSettings></ChatModelSettings>
</form>
</FormProvider>

9
web/src/pages/next-chats/chat/app-settings/subhead.tsx
View File

@ -1,9 +0,0 @@
import { PropsWithChildren } from 'react';
export function Subhead({ children }: PropsWithChildren) {
return (
<div className="text-xl font-bold mb-4 text-colors-text-neutral-strong">
{children}
</div>
);
}

2
web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx
View File

@ -1,3 +1,4 @@
import { LlmSettingSchema } from '@/components/llm-setting-items/next';
import { useTranslate } from '@/hooks/common-hooks';
import { z } from 'zod';
@ -31,6 +32,7 @@ export function useChatSettingSchema() {
top_n: z.number(),
vector_similarity_weight: z.number(),
top_k: z.number(),
llm_setting: z.object(LlmSettingSchema),
});
return formSchema;

12
web/src/pages/next-chats/chat/sessions.tsx
View File

@ -2,6 +2,7 @@ import { MoreButton } from '@/components/more-button';
import { RAGFlowAvatar } from '@/components/ragflow-avatar';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { SearchInput } from '@/components/ui/input';
import { useSetModalState } from '@/hooks/common-hooks';
import {
useFetchDialog,
@ -9,7 +10,7 @@ import {
} from '@/hooks/use-chat-request';
import { cn } from '@/lib/utils';
import { PanelLeftClose, PanelRightClose, Plus } from 'lucide-react';
import { useCallback } from 'react';
import { useCallback, useState } from 'react';
import { useHandleClickConversationCard } from '../hooks/use-click-card';
import { useSelectDerivedConversationList } from '../hooks/use-select-conversation-list';
@ -25,6 +26,7 @@ export function Sessions({
useSelectDerivedConversationList();
const { data } = useFetchDialog();
const { visible, switchVisible } = useSetModalState(true);
const [searchStr, setSearchStr] = useState('');
const handleCardClick = useCallback(
(conversationId: string, isNew: boolean) => () => {
@ -61,11 +63,17 @@ export function Sessions({
/>
</section>
<div className="flex justify-between items-center mb-4 pt-10">
<span className="text-xl font-bold">Conversations</span>
<span className="text-base font-bold">Conversations</span>
<Button variant={'ghost'} onClick={addTemporaryConversation}>
<Plus></Plus>
</Button>
</div>
<div className="pb-4">
<SearchInput
onChange={(e) => setSearchStr(e.target.value)}
value={searchStr}
></SearchInput>
</div>
<div className="space-y-4 flex-1 overflow-auto">
{conversationList.map((x) => (
<Card