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

Fixes: Bugs fixed #10703 (#11154)

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

Fixes: Bugs fixed
- Removed invalid code,
- Modified the user center style,
- Added an automatic data source parsing switch.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-11-11 11:18:07 +08:00
committed by GitHub
parent ba6470a7a5
commit 7db6cb8ca3
43 changed files with 1201 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/interfaces/database/knowledge.ts
View File

@ -6,6 +6,7 @@ export interface IConnector {
name: string;
status: RunningStatus;
source: DataSourceKey;
auto_parse?: '0' | '1';
}
// knowledge base
export interface IKnowledge {

1
web/src/locales/en.ts
View File

@ -274,6 +274,7 @@ export default {
reRankModelWaring: 'Re-rank model is very time consuming.',
},
knowledgeConfiguration: {
autoParse: 'Auto Parse',
rebuildTip:
'Re-downloads files from the linked data source and parses them again.',
baseInfo: 'Basic Info',

1
web/src/locales/zh.ts
View File

@ -260,6 +260,7 @@ export default {
theDocumentBeingParsedCannotBeDeleted: '正在解析的文档不能被删除',
},
knowledgeConfiguration: {
autoParse: '自动解析',
rebuildTip: '从所有已关联的数据源重新下载文件并再次解析。',
baseInfo: '基础信息',
gobalIndex: '全局索引',

22
web/src/pages/agent/gobal-variable-sheet/index.tsx
View File

@ -3,6 +3,7 @@ import {
DynamicForm,
DynamicFormRef,
FormFieldConfig,
FormFieldType,
} from '@/components/dynamic-form';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal/modal';
@ -112,6 +113,23 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
};
const handleEditGobalVariable = (item: FieldValues) => {
fields.forEach((field) => {
if (field.name === 'value') {
switch (item.type) {
// [TypesWithArray.String]: FormFieldType.Textarea,
// [TypesWithArray.Number]: FormFieldType.Number,
// [TypesWithArray.Boolean]: FormFieldType.Checkbox,
case TypesWithArray.Boolean:
field.type = FormFieldType.Checkbox;
break;
case TypesWithArray.Number:
field.type = FormFieldType.Number;
break;
default:
field.type = FormFieldType.Textarea;
}
}
});
setDefaultValues(item);
showModal();
};
@ -124,7 +142,7 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
>
<SheetHeader className="p-5">
<SheetTitle className="flex items-center gap-2.5">
{t('flow.conversationVariable')}
{t('flow.gobalVariable')}
</SheetTitle>
</SheetHeader>
@ -185,7 +203,7 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
</div>
</SheetContent>
<Modal
title={t('flow.add') + t('flow.conversationVariable')}
title={t('flow.add') + t('flow.gobalVariable')}
open={visible}
onCancel={hideAddModal}
showfooter={false}

34
web/src/pages/dataset/dataset-setting/components/link-data-source.tsx
View File

@ -1,5 +1,6 @@
import { IconFontFill } from '@/components/icon-font';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import {
Tooltip,
TooltipContent,
@ -24,16 +25,25 @@ export interface ILinkDataSourceProps {
data?: IConnector[];
handleLinkOrEditSubmit?: (data: IDataSourceBase[] | undefined) => void;
unbindFunc?: (item: DataSourceItemProps) => void;
handleAutoParse?: (option: {
source_id: string;
isAutoParse: boolean;
}) => void;
}
interface DataSourceItemProps extends IDataSourceNodeProps {
openLinkModalFunc?: (open: boolean, data?: IDataSourceNodeProps) => void;
unbindFunc?: (item: DataSourceItemProps) => void;
handleAutoParse?: (option: {
source_id: string;
isAutoParse: boolean;
}) => void;
}
const DataSourceItem = (props: DataSourceItemProps) => {
const { t } = useTranslation();
const { id, name, icon, source, unbindFunc } = props;
const { id, name, icon, source, auto_parse, unbindFunc, handleAutoParse } =
props;
const { navigateToDataSourceDetail } = useNavigatePage();
const { handleRebuild } = useDataSourceRebuild();
@ -50,7 +60,19 @@ const DataSourceItem = (props: DataSourceItemProps) => {
</div>
<div>{name}</div>
</div>
<div className="flex items-center">
<div className="flex items-center ">
<div className="items-center gap-1 hidden mr-5 group-hover:flex">
<div className="text-xs text-text-secondary">
{t('knowledgeConfiguration.autoParse')}
</div>
<Switch
checked={auto_parse === '1'}
onCheckedChange={(isAutoParse) => {
handleAutoParse?.({ source_id: id, isAutoParse });
}}
className="w-8 h-4"
/>
</div>
<Tooltip>
<TooltipTrigger>
<Button
@ -105,7 +127,12 @@ const DataSourceItem = (props: DataSourceItemProps) => {
};
const LinkDataSource = (props: ILinkDataSourceProps) => {
const { data, handleLinkOrEditSubmit: submit, unbindFunc } = props;
const {
data,
handleLinkOrEditSubmit: submit,
unbindFunc,
handleAutoParse,
} = props;
const { t } = useTranslation();
const [openLinkModal, setOpenLinkModal] = useState(false);
@ -176,6 +203,7 @@ const LinkDataSource = (props: ILinkDataSourceProps) => {
key={item.id}
openLinkModalFunc={openLinkModalFunc}
unbindFunc={unbindFunc}
handleAutoParse={handleAutoParse}
{...item}
/>
),

1
web/src/pages/dataset/dataset-setting/form-schema.ts
View File

@ -83,6 +83,7 @@ export const formSchema = z
name: z.string().optional(),
source: z.string().optional(),
ststus: z.string().optional(),
auto_parse: z.string().optional(),
}),
)
.optional(),

30
web/src/pages/dataset/dataset-setting/index.tsx
View File

@ -7,6 +7,7 @@ import { Form } from '@/components/ui/form';
import { FormLayout } from '@/constants/form';
import { DocumentParserType } from '@/constants/knowledge';
import { PermissionRole } from '@/constants/permission';
import { IConnector } from '@/interfaces/database/knowledge';
import { DataSourceInfo } from '@/pages/user-setting/data-source/contant';
import { IDataSourceBase } from '@/pages/user-setting/data-source/interface';
import { zodResolver } from '@hookform/resolvers/zod';
@ -149,11 +150,12 @@ export default function DatasetSettings() {
// }
// };
const handleLinkOrEditSubmit = (data: IDataSourceBase[] | undefined) => {
const handleLinkOrEditSubmit = (data: IConnector[] | undefined) => {
if (data) {
const connectors = data.map((connector) => {
return {
...connector,
auto_parse: connector.auto_parse === '0' ? '0' : '1',
icon:
DataSourceInfo[connector.source as keyof typeof DataSourceInfo]
?.icon || '',
@ -208,6 +210,31 @@ export default function DatasetSettings() {
// form.setValue('pipeline_avatar', data.avatar || '');
}
};
const handleAutoParse = ({
source_id,
isAutoParse,
}: {
source_id: string;
isAutoParse: boolean;
}) => {
if (source_id) {
const connectors = sourceData?.map((connector) => {
if (connector.id === source_id) {
return {
...connector,
auto_parse: isAutoParse ? '1' : '0',
};
}
return connector;
});
console.log('🚀 ~ DatasetSettings ~ connectors:', connectors);
setSourceData(connectors as IDataSourceNodeProps[]);
form.setValue('connectors', connectors || []);
// form.setValue('pipeline_name', data.name || '');
// form.setValue('pipeline_avatar', data.avatar || '');
}
};
return (
<section className="p-5 h-full flex flex-col">
<TopTitle
@ -269,6 +296,7 @@ export default function DatasetSettings() {
data={sourceData}
handleLinkOrEditSubmit={handleLinkOrEditSubmit}
unbindFunc={unbindFunc}
handleAutoParse={handleAutoParse}
/>
</MainContainer>
</div>

12
web/src/pages/home/datasets.tsx
View File

@ -2,10 +2,12 @@ import { CardSineLineContainer } from '@/components/card-singleline-container';
import { RenameDialog } from '@/components/rename-dialog';
import { HomeIcon } from '@/components/svg-icon';
import { CardSkeleton } from '@/components/ui/skeleton';
import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
import { useTranslation } from 'react-i18next';
import { DatasetCard, SeeAllCard } from '../datasets/dataset-card';
import { DatasetCard } from '../datasets/dataset-card';
import { useRenameDataset } from '../datasets/use-rename-dataset';
import { SeeAllAppCard } from './application-card';
export function Datasets() {
const { t } = useTranslation();
@ -18,6 +20,7 @@ export function Datasets() {
hideDatasetRenameModal,
showDatasetRenameModal,
} = useRenameDataset();
const { navigateToDatasetList } = useNavigatePage();
return (
<section>
@ -26,13 +29,12 @@ export function Datasets() {
<HomeIcon name="datasets" width={'32'} />
{t('header.dataset')}
</h2>
<div className="flex gap-6">
<div className="">
{loading ? (
<div className="flex-1">
<CardSkeleton />
</div>
) : (
// <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 max-h-[78vh] overflow-auto">
<CardSineLineContainer>
{kbs
?.slice(0, 6)
@ -43,9 +45,7 @@ export function Datasets() {
showDatasetRenameModal={showDatasetRenameModal}
></DatasetCard>
))}
<div className="min-h-24">
<SeeAllCard></SeeAllCard>
</div>
{<SeeAllAppCard click={navigateToDatasetList}></SeeAllAppCard>}
</CardSineLineContainer>
// </div>
)}

5
web/src/pages/login-next/index.tsx
View File

@ -26,7 +26,6 @@ import {
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { zodResolver } from '@hookform/resolvers/zod';
import { Eye, EyeOff } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { BgSvg } from './bg';
@ -247,7 +246,7 @@ const Login = () => {
}
{...field}
/>
<button
{/* <button
type="button"
className="absolute inset-y-0 right-0 pr-3 flex items-center"
onClick={() => setShowPassword(!showPassword)}
@ -257,7 +256,7 @@ const Login = () => {
) : (
<Eye className="h-4 w-4 text-gray-500" />
)}
</button>
</button> */}
</div>
</FormControl>
<FormMessage />

44
web/src/pages/user-setting/components/user-setting-header/index.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { PropsWithChildren } from 'react';
export const UserSettingHeader = ({
name,
description,
}: {
name: string;
description?: string;
}) => {
return (
<>
<header className="flex flex-col gap-1 justify-between items-start p-0">
<div className="text-2xl font-medium text-text-primary">{name}</div>
{description && (
<div className="text-sm text-text-secondary ">{description}</div>
)}
</header>
{/* <Separator className="border-border-button bg-border-button h-[0.5px]" /> */}
</>
);
};
export function Title({ children }: PropsWithChildren) {
return <span className="font-bold text-xl">{children}</span>;
}
type ProfileSettingWrapperCardProps = {
header: React.ReactNode;
} & PropsWithChildren;
export function ProfileSettingWrapperCard({
header,
children,
}: ProfileSettingWrapperCardProps) {
return (
<Card className="w-full border-border-button bg-transparent relative border-[0.5px]">
<CardHeader className="border-b-[0.5px] border-border-button p-5 ">
{header}
</CardHeader>
<CardContent className="p-5">{children}</CardContent>
</Card>
);
}

4
web/src/pages/user-setting/data-source/data-source-detail-page/log-table.tsx
View File

@ -217,8 +217,8 @@ export const DataSourceLogsTable = ({
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
<TableCell colSpan={5} className="h-24 text-center">
{t('common.noData')}
</TableCell>
</TableRow>
)}

102
web/src/pages/user-setting/data-source/index.tsx
View File

@ -3,8 +3,11 @@ import { useTranslation } from 'react-i18next';
import Spotlight from '@/components/spotlight';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Plus } from 'lucide-react';
import {
ProfileSettingWrapperCard,
UserSettingHeader,
} from '../components/user-setting-header';
import AddDataSourceModal from './add-datasource-modal';
import { AddedSourceCard } from './component/added-source-card';
import { DataSourceInfo, DataSourceKey } from './contant';
@ -93,60 +96,57 @@ const DataSource = () => {
};
return (
<div className="w-full flex flex-col gap-4 relative ">
<ProfileSettingWrapperCard
header={
<UserSettingHeader
name={t('setting.dataSources')}
description={t('setting.datasourceDescription')}
/>
}
>
<Spotlight />
{/* <Card className="bg-transparent border-none px-0"> */}
<section className="flex flex-row items-center justify-between space-y-0 px-4 pt-4 pb-0">
<div className="text-2xl font-medium">
{t('setting.dataSources')}
<div className="text-sm text-text-secondary">
{t('setting.datasourceDescription')}
<div className="relative">
<div className=" flex flex-col gap-4 max-h-[calc(100vh-230px)] overflow-y-auto overflow-x-hidden scrollbar-auto">
<div className="flex flex-col gap-3">
{categorizedList.map((item, index) => (
<AddedSourceCard key={index} {...item} />
))}
</div>
</div>
</section>
{/* </Card> */}
<Separator className="border-border-button bg-border-button " />
<div className=" flex flex-col gap-4 p-4 max-h-[calc(100vh-120px)] overflow-y-auto overflow-x-hidden scrollbar-auto">
<div className="flex flex-col gap-3">
{categorizedList.map((item, index) => (
<AddedSourceCard key={index} {...item} />
))}
</div>
<section className="bg-transparent border-none mt-8">
<header className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
{/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
<CardTitle className="text-2xl font-semibold">
{t('setting.availableSources')}
<div className="text-sm text-text-secondary font-normal">
{t('setting.availableSourcesDescription')}
<section className="bg-transparent border-none mt-8">
<header className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
{/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
<CardTitle className="text-2xl font-semibold">
{t('setting.availableSources')}
<div className="text-sm text-text-secondary font-normal">
{t('setting.availableSourcesDescription')}
</div>
</CardTitle>
</header>
<main className="p-0">
{/* <TenantTable searchTerm={searchTerm}></TenantTable> */}
<div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-4 3xl:grid-cols-4 gap-4">
{dataSourceTemplates.map((item, index) => (
<AbailableSourceCard {...item} key={index} />
))}
</div>
</CardTitle>
</header>
<main className="p-0">
{/* <TenantTable searchTerm={searchTerm}></TenantTable> */}
<div className="grid sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-4 3xl:grid-cols-4 gap-4">
{dataSourceTemplates.map((item, index) => (
<AbailableSourceCard {...item} key={index} />
))}
</div>
</main>
</section>
</div>
</main>
</section>
</div>
{addingModalVisible && (
<AddDataSourceModal
visible
loading={addLoading}
hideModal={hideAddingModal}
onOk={(data) => {
console.log(data);
handleAddOk(data);
}}
sourceData={addSource}
></AddDataSourceModal>
)}
</div>
{addingModalVisible && (
<AddDataSourceModal
visible
loading={addLoading}
hideModal={hideAddingModal}
onOk={(data) => {
console.log(data);
handleAddOk(data);
}}
sourceData={addSource}
></AddDataSourceModal>
)}
</div>
</ProfileSettingWrapperCard>
);
};

7
web/src/pages/user-setting/index.tsx
View File

@ -44,12 +44,7 @@ const UserSetting = () => {
)}
>
<SideBar></SideBar>
<div
className={cn(
styles.outletWrapper,
'flex flex-1 border-[0.5px] border-border-button rounded-lg',
)}
>
<div className={cn(styles.outletWrapper, 'flex flex-1 rounded-lg')}>
<Outlet></Outlet>
</div>
</div>

178
web/src/pages/user-setting/mcp/edit-mcp-dialog.tsx Normal file
View File

@ -0,0 +1,178 @@
import { Collapse } from '@/components/collapse';
import { Button, ButtonLoading } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { useGetMcpServer, useTestMcpServer } from '@/hooks/use-mcp-request';
import { IModalProps } from '@/interfaces/common';
import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
import { cn } from '@/lib/utils';
import { zodResolver } from '@hookform/resolvers/zod';
import { isEmpty, omit, pick } from 'lodash';
import { RefreshCw } from 'lucide-react';
import {
MouseEventHandler,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
import {
EditMcpForm,
FormId,
ServerType,
useBuildFormSchema,
} from './edit-mcp-form';
import { McpToolCard } from './tool-card';
function transferToolToArray(tools: IMCPToolObject) {
return Object.entries(tools).reduce<IMCPTool[]>((pre, [name, tool]) => {
pre.push({ ...tool, name });
return pre;
}, []);
}
const DefaultValues = {
name: '',
server_type: ServerType.SSE,
url: '',
};
export function EditMcpDialog({
hideModal,
loading,
onOk,
id,
}: IModalProps<any> & { id: string }) {
const { t } = useTranslation();
const {
testMcpServer,
data: testData,
loading: testLoading,
} = useTestMcpServer();
const [isTriggeredBySaving, setIsTriggeredBySaving] = useState(false);
const FormSchema = useBuildFormSchema();
const [collapseOpen, setCollapseOpen] = useState(true);
const { data } = useGetMcpServer(id);
const [fieldChanged, setFieldChanged] = useState(false);
const tools = useMemo(() => {
return testData?.data || [];
}, [testData?.data]);
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: DefaultValues,
});
const handleTest: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
e.stopPropagation();
setIsTriggeredBySaving(false);
}, []);
const handleSave: MouseEventHandler<HTMLButtonElement> = useCallback(() => {
setIsTriggeredBySaving(true);
}, []);
const handleOk = async (values: z.infer<typeof FormSchema>) => {
const nextValues = {
...omit(values, 'authorization_token'),
variables: { authorization_token: values.authorization_token },
headers: { Authorization: 'Bearer ${authorization_token}' },
};
if (isTriggeredBySaving) {
onOk?.(nextValues);
} else {
const ret = await testMcpServer(nextValues);
if (ret.code === 0) {
setFieldChanged(false);
}
}
};
useEffect(() => {
if (!isEmpty(data)) {
form.reset(pick(data, ['name', 'server_type', 'url']));
}
}, [data, form]);
const nextTools = useMemo(() => {
return isEmpty(tools)
? transferToolToArray(data.variables?.tools || {})
: tools;
}, [data.variables?.tools, tools]);
const disabled = !!!tools?.length || testLoading || fieldChanged;
return (
<Dialog open onOpenChange={hideModal}>
<DialogContent>
<DialogHeader>
<DialogTitle>{id ? t('mcp.editMCP') : t('mcp.addMCP')}</DialogTitle>
</DialogHeader>
<EditMcpForm
onOk={handleOk}
form={form}
setFieldChanged={setFieldChanged}
></EditMcpForm>
<Card>
<CardContent className="p-3">
<Collapse
title={
<div>
{nextTools?.length || 0} {t('mcp.toolsAvailable')}
</div>
}
open={collapseOpen}
onOpenChange={setCollapseOpen}
rightContent={
<Button
variant={'transparent'}
form={FormId}
type="submit"
onClick={handleTest}
className="border-none p-0 hover:bg-transparent"
>
<RefreshCw
className={cn('text-text-secondary', {
'animate-spin': testLoading,
})}
/>
</Button>
}
>
<div className="overflow-auto max-h-80 divide-y bg-bg-card rounded-md px-2.5">
{nextTools?.map((x) => (
<McpToolCard key={x.name} data={x}></McpToolCard>
))}
</div>
</Collapse>
</CardContent>
</Card>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">{t('common.cancel')}</Button>
</DialogClose>
<ButtonLoading
type="submit"
form={FormId}
loading={loading}
onClick={handleSave}
disabled={disabled}
>
{t('common.save')}
</ButtonLoading>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

171
web/src/pages/user-setting/mcp/edit-mcp-form.tsx Normal file
View File

@ -0,0 +1,171 @@
'use client';
import { UseFormReturn } from 'react-hook-form';
import { z } from 'zod';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { RAGFlowSelect } from '@/components/ui/select';
import { IModalProps } from '@/interfaces/common';
import { buildOptions } from '@/utils/form';
import { loader } from '@monaco-editor/react';
import { Dispatch, SetStateAction } from 'react';
import { useTranslation } from 'react-i18next';
loader.config({ paths: { vs: '/vs' } });
export const FormId = 'EditMcpForm';
export enum ServerType {
SSE = 'sse',
StreamableHttp = 'streamable-http',
}
const ServerTypeOptions = buildOptions(ServerType);
export function useBuildFormSchema() {
const { t } = useTranslation();
const FormSchema = z.object({
name: z
.string()
.min(1, {
message: t('common.mcp.namePlaceholder'),
})
.regex(/^[a-zA-Z0-9_-]{1,64}$/, {
message: t('common.mcp.nameRequired'),
})
.trim(),
url: z
.string()
.url()
.min(1, {
message: t('common.mcp.urlPlaceholder'),
})
.trim(),
server_type: z
.string()
.min(1, {
message: t('common.pleaseSelect'),
})
.trim(),
authorization_token: z.string().optional(),
});
return FormSchema;
}
export function EditMcpForm({
form,
onOk,
setFieldChanged,
}: IModalProps<any> & {
form: UseFormReturn<any>;
setFieldChanged: Dispatch<SetStateAction<boolean>>;
}) {
const { t } = useTranslation();
const FormSchema = useBuildFormSchema();
function onSubmit(data: z.infer<typeof FormSchema>) {
onOk?.(data);
}
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6"
id={FormId}
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('common.name')}</FormLabel>
<FormControl>
<Input
placeholder={t('common.mcp.namePlaceholder')}
{...field}
autoComplete="off"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('mcp.url')}</FormLabel>
<FormControl>
<Input
placeholder={t('common.mcp.urlPlaceholder')}
{...field}
autoComplete="off"
onChange={(e) => {
field.onChange(e.target.value.trim());
setFieldChanged(true);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="server_type"
render={({ field }) => (
<FormItem>
<FormLabel required>{t('mcp.serverType')}</FormLabel>
<FormControl>
<RAGFlowSelect
{...field}
autoComplete="off"
options={ServerTypeOptions}
onChange={(value) => {
field.onChange(value);
setFieldChanged(true);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="authorization_token"
render={({ field }) => (
<FormItem>
<FormLabel>Authorization Token</FormLabel>
<FormControl>
<Input
placeholder={t('common.mcp.tokenPlaceholder')}
{...field}
autoComplete="off"
type="password"
onChange={(e) => {
field.onChange(e.target.value.trim());
setFieldChanged(true);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
);
}

72
web/src/pages/user-setting/mcp/import-mcp-dialog/import-mcp-form.tsx Normal file
View File

@ -0,0 +1,72 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { FileUploader } from '@/components/file-uploader';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import { FileMimeType, Platform } from '@/constants/common';
import { IModalProps } from '@/interfaces/common';
import { TagRenameId } from '@/pages/add-knowledge/constant';
import { useTranslation } from 'react-i18next';
export function ImportMcpForm({ hideModal, onOk }: IModalProps<any>) {
const { t } = useTranslation();
const FormSchema = z.object({
platform: z
.string()
.min(1, {
message: t('common.namePlaceholder'),
})
.trim(),
fileList: z.array(z.instanceof(File)),
});
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: { platform: Platform.RAGFlow },
});
async function onSubmit(data: z.infer<typeof FormSchema>) {
const ret = await onOk?.(data);
if (ret) {
hideModal?.();
}
}
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6"
id={TagRenameId}
>
<FormField
control={form.control}
name="fileList"
render={({ field }) => (
<FormItem>
<FormLabel>{t('common.name')}</FormLabel>
<FormControl>
<FileUploader
value={field.value}
onValueChange={field.onChange}
accept={{ '*.json': [FileMimeType.Json] }}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
);
}

36
web/src/pages/user-setting/mcp/import-mcp-dialog/index.tsx Normal file
View File

@ -0,0 +1,36 @@
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { LoadingButton } from '@/components/ui/loading-button';
import { IModalProps } from '@/interfaces/common';
import { TagRenameId } from '@/pages/add-knowledge/constant';
import { useTranslation } from 'react-i18next';
import { ImportMcpForm } from './import-mcp-form';
export function ImportMcpDialog({
hideModal,
onOk,
loading,
}: IModalProps<any>) {
const { t } = useTranslation();
return (
<Dialog open onOpenChange={hideModal}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('mcp.import')}</DialogTitle>
</DialogHeader>
<ImportMcpForm hideModal={hideModal} onOk={onOk}></ImportMcpForm>
<DialogFooter>
<LoadingButton type="submit" form={TagRenameId} loading={loading}>
{t('common.save')}
</LoadingButton>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

157
web/src/pages/user-setting/mcp/index.tsx Normal file
View File

@ -0,0 +1,157 @@
import { CardContainer } from '@/components/card-container';
import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
import Spotlight from '@/components/spotlight';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { SearchInput } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RAGFlowPagination } from '@/components/ui/ragflow-pagination';
import { useListMcpServer } from '@/hooks/use-mcp-request';
import { pick } from 'lodash';
import {
Download,
LayoutList,
ListChecks,
Plus,
Trash2,
Upload,
} from 'lucide-react';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ProfileSettingWrapperCard } from '../components/user-setting-header';
import { EditMcpDialog } from './edit-mcp-dialog';
import { ImportMcpDialog } from './import-mcp-dialog';
import { McpCard } from './mcp-card';
import { useBulkOperateMCP } from './use-bulk-operate-mcp';
import { useEditMcp } from './use-edit-mcp';
import { useImportMcp } from './use-import-mcp';
export default function McpServer() {
const { data, setPagination, searchString, handleInputChange, pagination } =
useListMcpServer();
const { editVisible, showEditModal, hideEditModal, handleOk, id, loading } =
useEditMcp();
const {
selectedList,
handleSelectChange,
handleDelete,
handleExportMcp,
handleSelectAll,
} = useBulkOperateMCP(data.mcp_servers);
const { t } = useTranslation();
const { importVisible, showImportModal, hideImportModal, onImportOk } =
useImportMcp();
const [isSelectionMode, setSelectionMode] = useState(false);
const handlePageChange = useCallback(
(page: number, pageSize?: number) => {
setPagination({ page, pageSize });
},
[setPagination],
);
const switchSelectionMode = useCallback(() => {
setSelectionMode((prev) => !prev);
}, []);
return (
<ProfileSettingWrapperCard
header={
<>
<div className="text-text-primary text-2xl font-medium">
{t('mcp.mcpServers')}
</div>
<section className="flex items-center justify-between">
<div className="text-text-secondary">
{t('mcp.customizeTheListOfMcpServers')}
</div>
<div className="flex gap-5">
<SearchInput
className="w-40"
value={searchString}
onChange={handleInputChange}
></SearchInput>
<Button variant={'secondary'} onClick={switchSelectionMode}>
{isSelectionMode ? (
<ListChecks className="size-3.5" />
) : (
<LayoutList className="size-3.5" />
)}
{t(`mcp.${isSelectionMode ? 'exitBulkManage' : 'bulkManage'}`)}
</Button>
<Button variant={'secondary'} onClick={showEditModal('')}>
<Plus className="size-3.5" /> {t('mcp.addMCP')}
</Button>
<Button onClick={showImportModal}>
<Download className="size-3.5" />
{t('mcp.import')}
</Button>
</div>
</section>
</>
}
>
{isSelectionMode && (
<section className="pb-5 flex items-center">
<Checkbox id="all" onCheckedChange={handleSelectAll} />
<Label
className="pl-2 text-text-primary cursor-pointer"
htmlFor="all"
>
{t('common.selectAll')}
</Label>
<span className="text-text-secondary pr-10 pl-5">
{t('mcp.selected')} {selectedList.length}
</span>
<div className="flex gap-10 items-center">
<Button variant={'secondary'} onClick={handleExportMcp}>
<Upload className="size-3.5"></Upload>
{t('mcp.export')}
</Button>
<ConfirmDeleteDialog onOk={handleDelete}>
<Button variant={'danger'}>
<Trash2 className="size-3.5 cursor-pointer" />
{t('common.delete')}
</Button>
</ConfirmDeleteDialog>
</div>
</section>
)}
<CardContainer>
{data.mcp_servers.map((item) => (
<McpCard
key={item.id}
data={item}
selectedList={selectedList}
handleSelectChange={handleSelectChange}
showEditModal={showEditModal}
isSelectionMode={isSelectionMode}
></McpCard>
))}
</CardContainer>
<div className="mt-8">
<RAGFlowPagination
{...pick(pagination, 'current', 'pageSize')}
total={pagination.total || 0}
onChange={handlePageChange}
></RAGFlowPagination>
</div>
{editVisible && (
<EditMcpDialog
hideModal={hideEditModal}
onOk={handleOk}
id={id}
loading={loading}
></EditMcpDialog>
)}
{importVisible && (
<ImportMcpDialog
hideModal={hideImportModal}
onOk={onImportOk}
></ImportMcpDialog>
)}
<Spotlight />
</ProfileSettingWrapperCard>
);
}

74
web/src/pages/user-setting/mcp/mcp-card.tsx Normal file
View File

@ -0,0 +1,74 @@
import { Card, CardContent } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { IMcpServer } from '@/interfaces/database/mcp';
import { formatDate } from '@/utils/date';
import { isPlainObject } from 'lodash';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { McpOperation } from './mcp-operation';
import { UseBulkOperateMCPReturnType } from './use-bulk-operate-mcp';
import { UseEditMcpReturnType } from './use-edit-mcp';
export type DatasetCardProps = {
data: IMcpServer;
isSelectionMode: boolean;
} & Pick<UseBulkOperateMCPReturnType, 'handleSelectChange' | 'selectedList'> &
Pick<UseEditMcpReturnType, 'showEditModal'>;
export function McpCard({
data,
selectedList,
handleSelectChange,
showEditModal,
isSelectionMode,
}: DatasetCardProps) {
const { t } = useTranslation();
const toolLength = useMemo(() => {
const tools = data.variables?.tools;
if (isPlainObject(tools)) {
return Object.keys(tools || {}).length;
}
return 0;
}, [data.variables?.tools]);
const onCheckedChange = (checked: boolean) => {
if (typeof checked === 'boolean') {
handleSelectChange(data.id, checked);
}
};
return (
<Card key={data.id}>
<CardContent className="p-2.5 pt-2 group">
<section className="flex justify-between pb-2">
<h3 className="text-base font-normal truncate flex-1 text-text-primary">
{data.name}
</h3>
<div className="space-x-4">
{isSelectionMode ? (
<Checkbox
checked={selectedList.includes(data.id)}
onCheckedChange={onCheckedChange}
onClick={(e) => {
e.stopPropagation();
}}
/>
) : (
<McpOperation
mcpId={data.id}
showEditModal={showEditModal}
></McpOperation>
)}
</div>
</section>
<div className="flex justify-between items-end text-xs text-text-secondary">
<div className="w-full">
<div className="line-clamp-1 pb-1">
{toolLength} {t('mcp.cachedTools')}
</div>
<p>{formatDate(data.update_date)}</p>
</div>
</div>
</CardContent>
</Card>
);
}

43
web/src/pages/user-setting/mcp/mcp-operation.tsx Normal file
View File

@ -0,0 +1,43 @@
import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog';
import { RAGFlowTooltip } from '@/components/ui/tooltip';
import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
import { PenLine, Trash2, Upload } from 'lucide-react';
import { MouseEventHandler, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { UseEditMcpReturnType } from './use-edit-mcp';
import { useExportMcp } from './use-export-mcp';
export function McpOperation({
mcpId,
showEditModal,
}: { mcpId: string } & Pick<UseEditMcpReturnType, 'showEditModal'>) {
const { t } = useTranslation();
const { deleteMcpServer } = useDeleteMcpServer();
const { handleExportMcpJson } = useExportMcp();
const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
deleteMcpServer([mcpId]);
}, [deleteMcpServer, mcpId]);
return (
<div className="hidden gap-3 group-hover:flex text-text-secondary">
<RAGFlowTooltip tooltip={t('mcp.export')}>
<Upload
className="size-3 cursor-pointer"
onClick={handleExportMcpJson([mcpId])}
/>
</RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.edit')}>
<PenLine
className="size-3 cursor-pointer"
onClick={showEditModal(mcpId)}
/>
</RAGFlowTooltip>
<RAGFlowTooltip tooltip={t('common.delete')}>
<ConfirmDeleteDialog onOk={handleDelete}>
<Trash2 className="size-3 cursor-pointer" />
</ConfirmDeleteDialog>
</RAGFlowTooltip>
</div>
);
}

16
web/src/pages/user-setting/mcp/tool-card.tsx Normal file
View File

@ -0,0 +1,16 @@
import { IMCPTool } from '@/interfaces/database/mcp';
export type McpToolCardProps = {
data: IMCPTool;
};
export function McpToolCard({ data }: McpToolCardProps) {
return (
<section className="group py-2.5">
<h3 className="text-sm font-semibold line-clamp-1 pb-2">{data.name}</h3>
<div className="text-xs font-normal text-text-secondary">
{data.description}
</div>
</section>
);
}

56
web/src/pages/user-setting/mcp/use-bulk-operate-mcp.tsx Normal file
View File

@ -0,0 +1,56 @@
import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
import { IMcpServer } from '@/interfaces/database/mcp';
import { Trash2, Upload } from 'lucide-react';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useExportMcp } from './use-export-mcp';
export function useBulkOperateMCP(mcpList: IMcpServer[]) {
const { t } = useTranslation();
const [selectedList, setSelectedList] = useState<Array<string>>([]);
const { deleteMcpServer } = useDeleteMcpServer();
const { handleExportMcpJson } = useExportMcp();
const handleDelete = useCallback(() => {
deleteMcpServer(selectedList);
}, [deleteMcpServer, selectedList]);
const handleSelectChange = useCallback((id: string, checked: boolean) => {
setSelectedList((list) => {
return checked ? [...list, id] : list.filter((item) => item !== id);
});
}, []);
const handleSelectAll = useCallback(
(checked: boolean) => {
setSelectedList(() => (checked ? mcpList.map((item) => item.id) : []));
},
[mcpList],
);
const list = [
{
id: 'export',
label: t('mcp.export'),
icon: <Upload />,
onClick: handleExportMcpJson(selectedList),
},
{
id: 'delete',
label: t('common.delete'),
icon: <Trash2 />,
onClick: handleDelete,
},
];
return {
list,
selectedList,
handleSelectChange,
handleDelete,
handleExportMcp: handleExportMcpJson(selectedList),
handleSelectAll,
};
}
export type UseBulkOperateMCPReturnType = ReturnType<typeof useBulkOperateMCP>;

53
web/src/pages/user-setting/mcp/use-edit-mcp.ts Normal file
View File

@ -0,0 +1,53 @@
import { useSetModalState } from '@/hooks/common-hooks';
import {
useCreateMcpServer,
useUpdateMcpServer,
} from '@/hooks/use-mcp-request';
import { useCallback, useState } from 'react';
export const useEditMcp = () => {
const {
visible: editVisible,
hideModal: hideEditModal,
showModal: showEditModal,
} = useSetModalState();
const { createMcpServer, loading } = useCreateMcpServer();
const [id, setId] = useState('');
const { updateMcpServer, loading: updateLoading } = useUpdateMcpServer();
const handleShowModal = useCallback(
(id: string) => () => {
setId(id);
showEditModal();
},
[setId, showEditModal],
);
const handleOk = useCallback(
async (values: any) => {
let code;
if (id) {
code = await updateMcpServer({ ...values, mcp_id: id });
} else {
code = await createMcpServer(values);
}
if (code === 0) {
hideEditModal();
}
},
[createMcpServer, hideEditModal, id, updateMcpServer],
);
return {
editVisible,
hideEditModal,
showEditModal: handleShowModal,
loading: loading || updateLoading,
createMcpServer,
handleOk,
id,
};
};
export type UseEditMcpReturnType = ReturnType<typeof useEditMcp>;

21
web/src/pages/user-setting/mcp/use-export-mcp.ts Normal file
View File

@ -0,0 +1,21 @@
import { useExportMcpServer } from '@/hooks/use-mcp-request';
import { downloadJsonFile } from '@/utils/file-util';
import { useCallback } from 'react';
export function useExportMcp() {
const { exportMcpServer } = useExportMcpServer();
const handleExportMcpJson = useCallback(
(ids: string[]) => async () => {
const data = await exportMcpServer(ids);
if (data.code === 0) {
downloadJsonFile(data.data, `mcp.json`);
}
},
[exportMcpServer],
);
return {
handleExportMcpJson,
};
}

73
web/src/pages/user-setting/mcp/use-import-mcp.ts Normal file
View File

@ -0,0 +1,73 @@
import message from '@/components/ui/message';
import { FileMimeType } from '@/constants/common';
import { useSetModalState } from '@/hooks/common-hooks';
import { useImportMcpServer } from '@/hooks/use-mcp-request';
import { isEmpty } from 'lodash';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { z } from 'zod';
const ServerEntrySchema = z.object({
authorization_token: z.string().optional(),
name: z.string().optional(),
tool_configuration: z.object({}).passthrough().optional(),
type: z.string(),
url: z.string().url(),
});
const McpConfigSchema = z.object({
mcpServers: z.record(ServerEntrySchema),
});
export const useImportMcp = () => {
const {
visible: importVisible,
hideModal: hideImportModal,
showModal: showImportModal,
} = useSetModalState();
const { t } = useTranslation();
const { importMcpServer, loading } = useImportMcpServer();
const onImportOk = useCallback(
async ({ fileList }: { fileList: File[] }) => {
if (fileList.length > 0) {
const file = fileList[0];
if (file.type !== FileMimeType.Json) {
message.error(t('flow.jsonUploadTypeErrorMessage'));
return;
}
const mcpStr = await file.text();
const errorMessage = t('flow.jsonUploadContentErrorMessage');
try {
const mcp = JSON.parse(mcpStr);
try {
McpConfigSchema.parse(mcp);
} catch (error) {
message.error('Incorrect data format');
return;
}
if (mcpStr && !isEmpty(mcp)) {
const ret = await importMcpServer(mcp);
if (ret.code === 0) {
hideImportModal();
}
} else {
message.error(errorMessage);
}
} catch (error) {
message.error(errorMessage);
}
}
},
[hideImportModal, importMcpServer, t],
);
return {
importVisible,
showImportModal,
hideImportModal,
onImportOk,
loading,
};
};

29
web/src/pages/user-setting/profile/index.tsx
View File

@ -20,7 +20,6 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { useTranslate } from '@/hooks/common-hooks';
import { TimezoneList } from '@/pages/user-setting/constants';
import { zodResolver } from '@hookform/resolvers/zod';
@ -29,6 +28,10 @@ import { Loader2Icon, PenLine } from 'lucide-react';
import { FC, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import {
ProfileSettingWrapperCard,
UserSettingHeader,
} from '../components/user-setting-header';
import { EditType, modalTitle, useProfile } from './hooks/use-profile';
const baseSchema = z.object({
@ -123,18 +126,17 @@ const ProfilePage: FC = () => {
// };
return (
<div className="h-full w-full text-text-secondary relative flex flex-col gap-4">
// <div className="h-full w-full text-text-secondary relative flex flex-col gap-4">
<ProfileSettingWrapperCard
header={
<UserSettingHeader
name={t('profile')}
description={t('profileDescription')}
/>
}
>
<Spotlight />
{/* Header */}
<header className="flex flex-col gap-1 justify-between items-start px-4 pt-4 pb-0">
<div className="text-2xl font-medium text-text-primary">
{t('profile')}
</div>
<div className="text-sm text-text-secondary ">
{t('profileDescription')}
</div>
</header>
<Separator className="border-border-button bg-border-button h-[0.5px]" />
{/* Main Content */}
<div className="max-w-3xl space-y-11 w-3/4 p-7">
{/* Name */}
@ -411,7 +413,8 @@ const ProfilePage: FC = () => {
</Form>
</Modal>
)}
</div>
</ProfileSettingWrapperCard>
// </div>
);
};

2
web/src/pages/user-setting/setting-model/components/modal-card.tsx
View File

@ -97,7 +97,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
className="px-3 py-1 text-sm bg-bg-input hover:bg-bg-input text-text-primary rounded-md transition-colors flex items-center space-x-1"
>
<span>{visible ? t('hideModels') : t('showMoreModels')}</span>
{visible ? <ChevronsDown /> : <ChevronsUp />}
{!visible ? <ChevronsDown /> : <ChevronsUp />}
</Button>
<Button

5
web/src/pages/user-setting/setting-model/components/system-setting.tsx
View File

@ -140,7 +140,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
}) => {
return (
<div className="flex gap-3">
<label className="block text-sm font-medium text-text-primary mb-1 w-1/4">
<label className="block text-sm font-medium text-text-secondary mb-1 w-1/4">
{isRequired && <span className="text-red-500">*</span>}
{label}
{tooltip && (
@ -157,6 +157,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
</label>
<SelectWithSearch
triggerClassName="w-3/4"
allowClear={id !== 'llm_id'}
value={value}
options={options}
onChange={(value) => handleFieldChange(id, value)}
@ -169,7 +170,7 @@ const SystemSetting = ({ onOk, loading }: IProps) => {
return (
<div className="rounded-lg w-full">
<div className="flex flex-col py-4">
<div className="text-2xl font-semibold">{t('systemModelSettings')}</div>
<div className="text-2xl font-medium">{t('systemModelSettings')}</div>
<div className="text-sm text-text-secondary">
{t('systemModelDescription')}
</div>

18
web/src/pages/user-setting/setting-model/components/un-add-model.tsx
View File

@ -44,7 +44,6 @@ export const AvailableModels: FC<{
const [searchTerm, setSearchTerm] = useState('');
const [selectedTag, setSelectedTag] = useState<string | null>(null);
// 过滤模型列表
const filteredModels = useMemo(() => {
return factoryList.filter((model) => {
const matchesSearch = model.name
@ -57,7 +56,6 @@ export const AvailableModels: FC<{
});
}, [factoryList, searchTerm, selectedTag]);
// 获取所有唯一的标签
const allTags = useMemo(() => {
const tagsSet = new Set<string>();
factoryList.forEach((model) => {
@ -94,10 +92,10 @@ export const AvailableModels: FC<{
<Button
variant={'secondary'}
onClick={() => setSelectedTag(null)}
className={`px-1 py-1 text-xs rounded-md bg-bg-card bg-bg-card h-5 transition-colors ${
className={`px-1 py-1 text-xs rounded-sm bg-bg-card h-5 transition-colors ${
selectedTag === null
? ' text-text-primary border border-text-primary'
: 'text-text-secondary bg-bg-input border-none'
? ' text-bg-base bg-text-primary '
: 'text-text-secondary bg-bg-card border-none'
}`}
>
All
@ -107,10 +105,10 @@ export const AvailableModels: FC<{
variant={'secondary'}
key={tag}
onClick={() => handleTagClick(tag)}
className={`px-1 py-1 text-xs rounded-md bg-bg-card h-5 transition-colors ${
className={`px-1 py-1 text-xs rounded-sm bg-bg-card h-5 transition-colors ${
selectedTag === tag
? ' text-text-primary border border-text-primary'
: 'text-text-secondary border-none'
? ' text-bg-base bg-text-primary '
: 'text-text-secondary border-none bg-bg-card'
}`}
>
{tag}
@ -123,7 +121,7 @@ export const AvailableModels: FC<{
{filteredModels.map((model) => (
<div
key={model.name}
className=" border border-border-default rounded-lg p-3 hover:bg-bg-input transition-colors"
className=" border border-border-default rounded-lg p-3 hover:bg-bg-input transition-colors group"
>
<div className="flex items-center space-x-3 mb-3">
<LlmIcon name={model.name} imgClass="h-8 w-auto" />
@ -131,7 +129,7 @@ export const AvailableModels: FC<{
<h3 className="font-medium truncate">{model.name}</h3>
</div>
<Button
className=" px-2 flex items-center gap-0 text-xs h-6 rounded-md transition-colors"
className=" px-2 items-center gap-0 text-xs h-6 rounded-md transition-colors hidden group-hover:flex"
onClick={() => handleAddModel(model.name)}
>
<Plus size={12} />

2
web/src/pages/user-setting/setting-model/components/used-model.tsx
View File

@ -12,7 +12,7 @@ export const UsedModel = ({
const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
return (
<div className="flex flex-col w-full gap-4 mb-4">
<div className="text-text-primary text-2xl font-semibold mb-2 mt-4">
<div className="text-text-primary text-2xl font-medium mb-2 mt-4">
{t('setting.addedModels')}
</div>
{llmList.map((llm) => {

4
web/src/pages/user-setting/setting-model/index.tsx
View File

@ -1,3 +1,4 @@
import Spotlight from '@/components/spotlight';
import { LLMFactory } from '@/constants/llm';
import { LlmItem, useFetchMyLlmListDetailed } from '@/hooks/llm-hooks';
import { useCallback, useMemo } from 'react';
@ -192,7 +193,8 @@ const ModelProviders = () => {
[showApiKeyModal, showLlmAddingModal, ModalMap, detailedLlmList],
);
return (
<div className="flex w-full">
<div className="flex w-full border-[0.5px] border-border-default rounded-lg relative ">
<Spotlight />
<section className="flex flex-col gap-4 w-3/5 px-5 border-r border-border-button overflow-auto scrollbar-auto">
<SystemSetting
onOk={onSystemSettingSavingOk}

3
web/src/pages/user-setting/setting-password/index.less
View File

@ -1,3 +0,0 @@
.passwordWrapper {
width: 100%;
}

137
web/src/pages/user-setting/setting-password/index.tsx
View File

@ -1,137 +0,0 @@
import { useSaveSetting } from '@/hooks/user-setting-hooks';
import { rsaPsw } from '@/utils';
import { Button, Divider, Form, Input, Space } from 'antd';
import SettingTitle from '../components/setting-title';
import { useValidateSubmittable } from '../hooks';
import { useTranslate } from '@/hooks/common-hooks';
import styles from './index.less';
type FieldType = {
password?: string;
new_password?: string;
confirm_password?: string;
};
const tailLayout = {
wrapperCol: { offset: 20, span: 4 },
};
const UserSettingPassword = () => {
const { form, submittable } = useValidateSubmittable();
const { saveSetting, loading } = useSaveSetting();
const { t } = useTranslate('setting');
const onFinish = (values: any) => {
const password = rsaPsw(values.password) as string;
const new_password = rsaPsw(values.new_password) as string;
saveSetting({ password, new_password });
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return (
<section className={styles.passwordWrapper}>
<SettingTitle
title={t('password')}
description={t('passwordDescription')}
></SettingTitle>
<Divider />
<Form
colon={false}
name="basic"
labelAlign={'left'}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: '100%' }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
form={form}
autoComplete="off"
// requiredMark={'optional'}
>
<Form.Item<FieldType>
label={t('currentPassword')}
name="password"
rules={[
{
required: true,
message: t('currentPasswordMessage'),
whitespace: true,
},
]}
>
<Input.Password />
</Form.Item>
<Divider />
<Form.Item label={t('newPassword')} required>
<Form.Item<FieldType>
noStyle
name="new_password"
rules={[
{
required: true,
message: t('newPasswordMessage'),
whitespace: true,
},
{ type: 'string', min: 8, message: t('newPasswordDescription') },
]}
>
<Input.Password />
</Form.Item>
</Form.Item>
<Divider />
<Form.Item<FieldType>
label={t('confirmPassword')}
name="confirm_password"
dependencies={['new_password']}
rules={[
{
required: true,
message: t('confirmPasswordMessage'),
whitespace: true,
},
{ type: 'string', min: 8, message: t('newPasswordDescription') },
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue('new_password') === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(t('confirmPasswordNonMatchMessage')),
);
},
}),
]}
>
<Input.Password />
</Form.Item>
<Divider />
<Form.Item
{...tailLayout}
shouldUpdate={(prevValues, curValues) =>
prevValues.additional !== curValues.additional
}
>
<Space>
<Button htmlType="button">{t('cancel')}</Button>
<Button
type="primary"
htmlType="submit"
disabled={!submittable}
loading={loading}
>
{t('save', { keyPrefix: 'common' })}
</Button>
</Space>
</Form.Item>
</Form>
</section>
);
};
export default UserSettingPassword;

7
web/src/pages/user-setting/setting-profile/index.less
View File

@ -1,7 +0,0 @@
.profileWrapper {
width: 100%;
.emailDescription {
padding: 10px 0;
margin: 0;
}
}

208
web/src/pages/user-setting/setting-profile/index.tsx
View File

@ -1,208 +0,0 @@
import { LanguageList, LanguageMap } from '@/constants/common';
import { useTranslate } from '@/hooks/common-hooks';
import { useChangeLanguage } from '@/hooks/logic-hooks';
import { useFetchUserInfo, useSaveSetting } from '@/hooks/user-setting-hooks';
import {
getBase64FromUploadFileList,
getUploadFileListFromBase64,
normFile,
} from '@/utils/file-util';
import { PlusOutlined } from '@ant-design/icons';
import {
Button,
Divider,
Form,
Input,
Select,
Space,
Spin,
Upload,
UploadFile,
} from 'antd';
import { useEffect } from 'react';
import SettingTitle from '../components/setting-title';
import { TimezoneList } from '../constants';
import { useValidateSubmittable } from '../hooks';
import parentStyles from '../index.less';
import styles from './index.less';
const { Option } = Select;
type FieldType = {
nickname?: string;
language?: string;
email?: string;
color_schema?: string;
timezone?: string;
avatar?: string;
};
const tailLayout = {
wrapperCol: { offset: 20, span: 4 },
};
const UserSettingProfile = () => {
const { data: userInfo, loading } = useFetchUserInfo();
const { saveSetting, loading: submitLoading } = useSaveSetting();
const { form, submittable } = useValidateSubmittable();
const { t } = useTranslate('setting');
const changeLanguage = useChangeLanguage();
const onFinish = async (values: any) => {
const avatar = await getBase64FromUploadFileList(values.avatar);
saveSetting({ ...values, avatar });
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
useEffect(() => {
const fileList: UploadFile[] = getUploadFileListFromBase64(userInfo.avatar);
form.setFieldsValue({ ...userInfo, avatar: fileList });
}, [form, userInfo]);
return (
<section className={styles.profileWrapper}>
<SettingTitle
title={t('profile')}
description={t('profileDescription')}
></SettingTitle>
<Divider />
<Spin spinning={loading}>
<Form
colon={false}
name="basic"
labelAlign={'left'}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: '100%' }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
form={form}
autoComplete="off"
>
<Form.Item<FieldType>
label={t('username')}
name="nickname"
rules={[
{
required: true,
message: t('usernameMessage'),
whitespace: true,
},
]}
>
<Input />
</Form.Item>
<Divider />
<Form.Item<FieldType>
label={
<div>
<Space>{t('photo')}</Space>
<div>{t('photoDescription')}</div>
</div>
}
name="avatar"
valuePropName="fileList"
getValueFromEvent={normFile}
>
<Upload
listType="picture-card"
maxCount={1}
accept="image/*"
beforeUpload={() => {
return false;
}}
showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
>
<button style={{ border: 0, background: 'none' }} type="button">
<PlusOutlined />
<div style={{ marginTop: 8 }}>
{t('upload', { keyPrefix: 'common' })}
</div>
</button>
</Upload>
</Form.Item>
<Divider />
<Form.Item<FieldType>
label={t('colorSchema')}
name="color_schema"
rules={[{ required: true, message: t('colorSchemaMessage') }]}
>
<Select placeholder={t('colorSchemaPlaceholder')}>
<Option value="Bright">{t('bright')}</Option>
<Option value="Dark">{t('dark')}</Option>
</Select>
</Form.Item>
<Divider />
<Form.Item<FieldType>
label={t('language', { keyPrefix: 'common' })}
name="language"
rules={[
{
required: true,
message: t('languageMessage', { keyPrefix: 'common' }),
},
]}
>
<Select
placeholder={t('languagePlaceholder', { keyPrefix: 'common' })}
onChange={changeLanguage}
>
{LanguageList.map((x) => (
<Option value={x} key={x}>
{LanguageMap[x as keyof typeof LanguageMap]}
</Option>
))}
</Select>
</Form.Item>
<Divider />
<Form.Item<FieldType>
label={t('timezone')}
name="timezone"
rules={[{ required: true, message: t('timezoneMessage') }]}
>
<Select placeholder={t('timezonePlaceholder')} showSearch>
{TimezoneList.map((x) => (
<Option value={x} key={x}>
{x}
</Option>
))}
</Select>
</Form.Item>
<Divider />
<Form.Item label={t('email')}>
<Form.Item<FieldType> name="email" noStyle>
<Input disabled />
</Form.Item>
<p className={parentStyles.itemDescription}>
{t('emailDescription')}
</p>
</Form.Item>
<Form.Item
{...tailLayout}
shouldUpdate={(prevValues, curValues) =>
prevValues.additional !== curValues.additional
}
>
<Space>
<Button htmlType="button">{t('cancel')}</Button>
<Button
type="primary"
htmlType="submit"
disabled={!submittable}
loading={submitLoading}
>
{t('save', { keyPrefix: 'common' })}
</Button>
</Space>
</Form.Item>
</Form>
</Spin>
</section>
);
};
export default UserSettingProfile;

33
web/src/pages/user-setting/setting-system/index.less
View File

@ -1,33 +0,0 @@
.systemInfo {
width: 100%;
.title {
font-size: 20px;
font-weight: 600;
}
.text {
height: 26px;
line-height: 26px;
}
.badge {
:global(.ant-badge-status-dot) {
width: 10px;
height: 10px;
}
}
.error {
color: red;
}
}
.taskBarTooltip {
font-size: 16px;
}
.taskBar {
width: '100%';
height: 200px;
}
.taskBarTitle {
font-size: 16px;
}

127
web/src/pages/user-setting/setting-system/index.tsx
View File

@ -1,127 +0,0 @@
import SvgIcon from '@/components/svg-icon';
import { useFetchSystemStatus } from '@/hooks/user-setting-hooks';
import {
ISystemStatus,
TaskExecutorHeartbeatItem,
} from '@/interfaces/database/user-setting';
import { Badge, Card, Flex, Spin, Typography } from 'antd';
import classNames from 'classnames';
import lowerCase from 'lodash/lowerCase';
import upperFirst from 'lodash/upperFirst';
import { useEffect } from 'react';
import { toFixed } from '@/utils/common-util';
import { isObject } from 'lodash';
import styles from './index.less';
import TaskBarChat from './task-bar-chat';
const { Text } = Typography;
enum Status {
'green' = 'success',
'red' = 'error',
'yellow' = 'warning',
}
const TitleMap = {
doc_engine: 'Doc Engine',
storage: 'Object Storage',
redis: 'Redis',
database: 'Database',
task_executor_heartbeats: 'Task Executor',
};
const IconMap = {
es: 'es',
doc_engine: 'storage',
redis: 'redis',
storage: 'minio',
database: 'database',
};
const SystemInfo = () => {
const {
systemStatus,
fetchSystemStatus,
loading: statusLoading,
} = useFetchSystemStatus();
useEffect(() => {
fetchSystemStatus();
}, [fetchSystemStatus]);
return (
<section className={styles.systemInfo}>
<Spin spinning={statusLoading}>
<Flex gap={16} vertical>
{Object.keys(systemStatus).map((key) => {
const info = systemStatus[key as keyof ISystemStatus];
return (
<Card
type="inner"
title={
<Flex align="center" gap={10}>
{key === 'task_executor_heartbeats' ? (
<img src="/logo.svg" alt="" width={26} />
) : (
<SvgIcon
name={IconMap[key as keyof typeof IconMap]}
width={26}
></SvgIcon>
)}
<span className={styles.title}>
{TitleMap[key as keyof typeof TitleMap]}
</span>
<Badge
className={styles.badge}
status={Status[info.status as keyof typeof Status]}
/>
</Flex>
}
key={key}
>
{key === 'task_executor_heartbeats' ? (
isObject(info) ? (
<TaskBarChat
data={info as Record<string, TaskExecutorHeartbeatItem[]>}
></TaskBarChat>
) : (
<Text className={styles.error}>
{typeof info.error === 'string' ? info.error : ''}
</Text>
)
) : (
Object.keys(info)
.filter((x) => x !== 'status')
.map((x) => {
return (
<Flex
key={x}
align="center"
gap={16}
className={styles.text}
>
<b>{upperFirst(lowerCase(x))}:</b>
<Text
className={classNames({
[styles.error]: x === 'error',
})}
>
{toFixed((info as Record<string, any>)[x]) as any}
{x === 'elapsed' && ' ms'}
</Text>
</Flex>
);
})
)}
</Card>
);
})}
</Flex>
</Spin>
</section>
);
};
export default SystemInfo;

108
web/src/pages/user-setting/setting-system/task-bar-chat.tsx
View File

@ -1,108 +0,0 @@
import { TaskExecutorHeartbeatItem } from '@/interfaces/database/user-setting';
import { Divider, Flex } from 'antd';
import {
Bar,
BarChart,
CartesianGrid,
Legend,
Rectangle,
ResponsiveContainer,
Tooltip,
XAxis,
} from 'recharts';
import { formatDate, formatTime } from '@/utils/date';
import dayjs from 'dayjs';
import { get } from 'lodash';
import JsonView from 'react18-json-view';
import 'react18-json-view/src/style.css';
import styles from './index.less';
interface IProps {
data: Record<string, TaskExecutorHeartbeatItem[]>;
}
const CustomTooltip = ({ active, payload, ...restProps }: any) => {
if (active && payload && payload.length) {
const taskExecutorHeartbeatItem: TaskExecutorHeartbeatItem = get(
payload,
'0.payload',
{},
);
return (
<div className="custom-tooltip">
<div className="bg-slate-50 p-2 rounded-md border border-indigo-100">
<div className="font-semibold text-lg">
{formatDate(restProps.label)}
</div>
<JsonView
src={taskExecutorHeartbeatItem}
displaySize={30}
className="w-full max-h-[300px] break-words overflow-auto"
/>
</div>
</div>
);
}
return null;
};
const TaskBarChat = ({ data }: IProps) => {
return Object.entries(data).map(([key, val]) => {
const data = val.map((x) => ({
...x,
now: dayjs(x.now).valueOf(),
}));
const firstItem = data[0];
const lastItem = data[data.length - 1];
const domain = [firstItem?.now, lastItem?.now];
return (
<Flex key={key} className={styles.taskBar} vertical>
<div className="flex gap-8">
<b className={styles.taskBarTitle}>ID: {key}</b>
<b className={styles.taskBarTitle}>Lag: {lastItem?.lag}</b>
<b className={styles.taskBarTitle}>Pending: {lastItem?.pending}</b>
</div>
<ResponsiveContainer>
<BarChart data={data}>
<XAxis
dataKey="now"
type="number"
scale={'time'}
domain={domain}
tickFormatter={(x) => formatTime(x)}
allowDataOverflow
angle={60}
padding={{ left: 20, right: 20 }}
tickMargin={20}
/>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip
wrapperStyle={{ pointerEvents: 'auto' }}
content={<CustomTooltip></CustomTooltip>}
trigger="click"
/>
<Legend wrapperStyle={{ bottom: -22 }} />
<Bar
dataKey="done"
fill="#2fe235"
activeBar={<Rectangle fill="pink" stroke="blue" />}
/>
<Bar
dataKey="failed"
fill="#ef3b74"
activeBar={<Rectangle fill="gold" stroke="purple" />}
/>
</BarChart>
</ResponsiveContainer>
<Divider></Divider>
</Flex>
);
});
};
export default TaskBarChat;

38
web/src/pages/user-setting/setting-team/index.tsx
View File

@ -8,9 +8,12 @@ import { useTranslation } from 'react-i18next';
import Spotlight from '@/components/spotlight';
import { SearchInput } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import { UserPlus } from 'lucide-react';
import { useState } from 'react';
import {
ProfileSettingWrapperCard,
UserSettingHeader,
} from '../components/user-setting-header';
import AddingUserModal from './add-user-modal';
import { useAddUser } from './hooks';
import TenantTable from './tenant-table';
@ -30,18 +33,21 @@ const UserSettingTeam = () => {
} = useAddUser();
return (
<div className="w-full flex flex-col gap-4 p-4 relative">
// <div className="w-full flex flex-col gap-4 relative">
// <Spotlight />
// <UserSettingHeader
// name={userInfo?.nickname + ' ' + t('setting.workspace')}
// />
<ProfileSettingWrapperCard
header={
<UserSettingHeader
name={userInfo?.nickname + ' ' + t('setting.workspace')}
/>
}
>
<Spotlight />
<Card className="bg-transparent border-none px-0">
<CardHeader className="flex flex-row items-center justify-between space-y-0 px-0 pt-1">
<CardTitle className="text-2xl font-medium">
{userInfo?.nickname} {t('setting.workspace')}
</CardTitle>
</CardHeader>
</Card>
<Separator className="border-border-button bg-border-button w-[calc(100%+2rem)] -translate-x-4 -translate-y-4" />
<Card className="bg-transparent border-none">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-4">
{/* <User className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
<CardTitle className="text-base">
{t('setting.teamMembers')}
@ -59,15 +65,15 @@ const UserSettingTeam = () => {
</Button>
</section>
</CardHeader>
<CardContent className="p-0">
<CardContent className="p-4">
<UserTable searchUser={searchUser}></UserTable>
</CardContent>
</Card>
<Card className="bg-transparent border-none mt-8">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-0 pb-4">
<CardHeader className="flex flex-row items-center justify-between space-y-0 p-4 pb-4">
{/* <Users className="mr-2 h-5 w-5 text-[#1677ff]" /> */}
<CardTitle className="text-base">
<CardTitle className="text-base w-fit">
{t('setting.joinedTeams')}
</CardTitle>
<SearchInput
@ -77,7 +83,7 @@ const UserSettingTeam = () => {
placeholder={t('common.search')}
/>
</CardHeader>
<CardContent className="p-0">
<CardContent className="p-4">
<TenantTable searchTerm={searchTerm}></TenantTable>
</CardContent>
</Card>
@ -89,7 +95,7 @@ const UserSettingTeam = () => {
onOk={handleAddUserOk}
></AddingUserModal>
)}
</div>
</ProfileSettingWrapperCard>
);
};

4
web/src/pages/user-setting/setting-team/tenant-table.tsx
View File

@ -71,7 +71,7 @@ const TenantTable = ({ searchTerm }: { searchTerm: string }) => {
return (
<div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
<Table rootClassName="rounded-lg">
<TableHeader>
<TableHeader className="bg-bg-title">
<TableRow>
<TableHead className="h-12 px-4">{t('common.name')}</TableHead>
<TableHead
@ -87,7 +87,7 @@ const TenantTable = ({ searchTerm }: { searchTerm: string }) => {
<TableHead className="h-12 px-4">{t('common.action')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableBody className="bg-bg-base">
{loading ? (
<TableRow>
<TableCell colSpan={4} className="h-24 text-center">

4
web/src/pages/user-setting/setting-team/user-table.tsx
View File

@ -77,7 +77,7 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
return (
<div className="rounded-lg bg-bg-input scrollbar-auto overflow-hidden border border-border-default">
<Table rootClassName="rounded-lg">
<TableHeader>
<TableHeader className="bg-bg-title">
<TableRow>
<TableHead className="h-12 px-4">{t('common.name')}</TableHead>
<TableHead
@ -94,7 +94,7 @@ const UserTable = ({ searchUser }: { searchUser: string }) => {
<TableHead className="h-12 px-4">{t('common.action')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableBody className="bg-bg-base">
{loading ? (
<TableRow>
<TableCell colSpan={5} className="h-24 text-center">

4
web/src/pages/user-setting/sidebar/index.tsx
View File

@ -12,7 +12,7 @@ import {
import { cn } from '@/lib/utils';
import { Routes } from '@/routes';
import { t } from 'i18next';
import { Banknote, Box, Cog, Server, Unplug, User, Users } from 'lucide-react';
import { Banknote, Box, Server, Unplug, User, Users } from 'lucide-react';
import { useEffect } from 'react';
import { useHandleMenuClick } from './hooks';
@ -28,7 +28,7 @@ const menuItems = [
// },
// { icon: TextSearch, label: 'Retrieval Templates', key: Routes.Profile },
{ icon: Server, label: t('setting.dataSources'), key: Routes.DataSource },
{ icon: Cog, label: t('setting.system'), key: Routes.System },
// { icon: Cog, label: t('setting.system'), key: Routes.System },
// { icon: Banknote, label: 'Plan', key: Routes.Plan },
{ icon: Banknote, label: 'MCP', key: Routes.Mcp },
];

11
web/src/routes.ts
View File

@ -24,7 +24,6 @@ export enum Routes {
Mcp = '/mcp',
Team = '/team',
Plan = '/plan',
System = '/system',
Model = '/model',
Prompt = '/prompt',
DataSource = '/data-source',
@ -378,10 +377,6 @@ const routes = [
path: '/user-setting/locale',
component: '@/pages/user-setting/setting-locale',
},
{
path: '/user-setting/password',
component: '@/pages/user-setting/setting-password',
},
{
path: '/user-setting/model',
component: '@/pages/user-setting/setting-model',
@ -390,17 +385,13 @@ const routes = [
path: '/user-setting/team',
component: '@/pages/user-setting/setting-team',
},
{
path: `/user-setting${Routes.System}`,
component: '@/pages/user-setting/setting-system',
},
{
path: `/user-setting${Routes.Api}`,
component: '@/pages/user-setting/setting-api',
},
{
path: `/user-setting${Routes.Mcp}`,
component: `@/pages${Routes.ProfileMcp}`,
component: `@/pages/user-setting/${Routes.Mcp}`,
},
{
path: `/user-setting${Routes.DataSource}`,