mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 12:32:30 +08:00
### What problem does this PR solve? Fix: Bugs fixed #10703 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
@ -550,11 +550,13 @@ const DynamicForm = {
|
||||
}
|
||||
: fieldProps;
|
||||
return (
|
||||
<Input
|
||||
{...finalFieldProps}
|
||||
type={field.type}
|
||||
placeholder={field.placeholder}
|
||||
/>
|
||||
<div className="w-full">
|
||||
<Input
|
||||
{...finalFieldProps}
|
||||
type={field.type}
|
||||
placeholder={field.placeholder}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</RAGFlowFormItem>
|
||||
|
||||
@ -81,31 +81,34 @@ export const GobalParamSheet = (props: IGobalParamModalProps) => {
|
||||
|
||||
const { saveGraph, loading } = useSaveGraph();
|
||||
|
||||
const handleSubmit = (value: FieldValues) => {
|
||||
const handleSubmit = async (value: FieldValues) => {
|
||||
const param = {
|
||||
...(data.dsl?.variables || {}),
|
||||
[value.name]: value,
|
||||
} as Record<string, GobalVariableType>;
|
||||
saveGraph(undefined, {
|
||||
|
||||
const res = await saveGraph(undefined, {
|
||||
gobalVariables: param,
|
||||
});
|
||||
if (!loading) {
|
||||
setTimeout(() => {
|
||||
refetch();
|
||||
}, 500);
|
||||
|
||||
if (res.code === 0) {
|
||||
refetch();
|
||||
}
|
||||
hideAddModal();
|
||||
};
|
||||
|
||||
const handleDeleteGobalVariable = (key: string) => {
|
||||
const handleDeleteGobalVariable = async (key: string) => {
|
||||
const param = {
|
||||
...(data.dsl?.variables || {}),
|
||||
} as Record<string, GobalVariableType>;
|
||||
delete param[key];
|
||||
saveGraph(undefined, {
|
||||
const res = await saveGraph(undefined, {
|
||||
gobalVariables: param,
|
||||
});
|
||||
refetch();
|
||||
console.log('delete gobal variable-->', res);
|
||||
if (res.code === 0) {
|
||||
refetch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditGobalVariable = (item: FieldValues) => {
|
||||
|
||||
@ -356,15 +356,19 @@ export const buildDslGobalVariables = (
|
||||
return { globals: dsl.globals, variables: dsl.variables || {} };
|
||||
}
|
||||
|
||||
let gobalVariablesTemp = {};
|
||||
let gobalVariablesTemp: Record<string, any> = {};
|
||||
let gobalSystem: Record<string, any> = {};
|
||||
Object.keys(dsl.globals)?.forEach((key) => {
|
||||
if (key.indexOf('sys') > -1) {
|
||||
gobalSystem[key] = dsl.globals[key];
|
||||
}
|
||||
});
|
||||
Object.keys(gobalVariables).forEach((key) => {
|
||||
gobalVariablesTemp = {
|
||||
['env.' + key]: gobalVariables[key].value,
|
||||
};
|
||||
gobalVariablesTemp['env.' + key] = gobalVariables[key].value;
|
||||
});
|
||||
|
||||
const gobalVariablesResult = {
|
||||
...dsl.globals,
|
||||
...gobalSystem,
|
||||
...gobalVariablesTemp,
|
||||
};
|
||||
return { globals: gobalVariablesResult, variables: gobalVariables };
|
||||
|
||||
@ -37,7 +37,7 @@ import {
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table';
|
||||
import { TFunction } from 'i18next';
|
||||
import { ArrowUpDown, ClipboardList, Eye } from 'lucide-react';
|
||||
import { ArrowUpDown, ClipboardList, Eye, MonitorUp } from 'lucide-react';
|
||||
import { FC, useMemo, useState } from 'react';
|
||||
import { useParams } from 'umi';
|
||||
import { RunningStatus } from '../dataset/constant';
|
||||
@ -107,11 +107,20 @@ export const getFileLogsTableColumns = (
|
||||
meta: { cellClassName: 'max-w-[10vw]' },
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">
|
||||
{row.original.source_from
|
||||
? DataSourceInfo[
|
||||
row.original.source_from as keyof typeof DataSourceInfo
|
||||
].icon
|
||||
: t('localUpload')}
|
||||
{row.original.source_from === 'local' ||
|
||||
row.original.source_from === '' ? (
|
||||
<div className="bg-accent-primary-5 w-6 h-6 rounded-full flex items-center justify-center">
|
||||
<MonitorUp className="text-accent-primary" size={16} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 flex items-center justify-center">
|
||||
{
|
||||
DataSourceInfo[
|
||||
row.original.source_from as keyof typeof DataSourceInfo
|
||||
].icon
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
@ -14,7 +14,7 @@ import { cn } from '@/lib/utils';
|
||||
import { DataSourceInfo } from '@/pages/user-setting/data-source/contant';
|
||||
import { formatDate } from '@/utils/date';
|
||||
import { ColumnDef } from '@tanstack/table-core';
|
||||
import { ArrowUpDown } from 'lucide-react';
|
||||
import { ArrowUpDown, MonitorUp } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { DatasetActionCell } from './dataset-action-cell';
|
||||
import { ParsingStatusCell } from './parsing-status-cell';
|
||||
@ -126,11 +126,20 @@ export function useDatasetTableColumns({
|
||||
header: t('source'),
|
||||
cell: ({ row }) => (
|
||||
<div className="text-text-primary">
|
||||
{row.original.source_type
|
||||
? DataSourceInfo[
|
||||
row.original.source_type as keyof typeof DataSourceInfo
|
||||
]?.icon || t('localUpload')
|
||||
: t('localUpload')}
|
||||
{row.original.source_type === 'local' ||
|
||||
row.original.source_type === '' ? (
|
||||
<div className="bg-accent-primary-5 w-6 h-6 rounded-full flex items-center justify-center">
|
||||
<MonitorUp className="text-accent-primary" size={16} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-6 h-6 flex items-center justify-center">
|
||||
{
|
||||
DataSourceInfo[
|
||||
row.original.source_type as keyof typeof DataSourceInfo
|
||||
].icon
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
@ -47,7 +47,7 @@ const UserSetting = () => {
|
||||
<div
|
||||
className={cn(
|
||||
styles.outletWrapper,
|
||||
'flex flex-1 border border-border-button rounded-lg',
|
||||
'flex flex-1 border-[0.5px] border-border-button rounded-lg',
|
||||
)}
|
||||
>
|
||||
<Outlet></Outlet>
|
||||
|
||||
@ -20,6 +20,7 @@ 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';
|
||||
@ -122,20 +123,22 @@ const ProfilePage: FC = () => {
|
||||
// };
|
||||
|
||||
return (
|
||||
<div className="h-full w-full text-text-secondary p-5 relative">
|
||||
<div className="h-full w-full text-text-secondary relative flex flex-col gap-4">
|
||||
<Spotlight />
|
||||
{/* Header */}
|
||||
<header className="flex flex-col gap-1 justify-between items-start mb-6">
|
||||
<h1 className="text-2xl font-bold text-text-primary">{t('profile')}</h1>
|
||||
<div className="text-sm text-text-secondary mb-6">
|
||||
<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">
|
||||
<div className="max-w-3xl space-y-11 w-3/4 p-7">
|
||||
{/* Name */}
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex items-start gap-4 ">
|
||||
<label className="w-[190px] text-sm font-medium">
|
||||
{t('username')}
|
||||
</label>
|
||||
|
||||
@ -1,584 +0,0 @@
|
||||
import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
|
||||
import { LlmIcon } from '@/components/svg-icon';
|
||||
import { useTheme } from '@/components/theme-provider';
|
||||
import { LLMFactory } from '@/constants/llm';
|
||||
import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
|
||||
import {
|
||||
LlmItem,
|
||||
useFetchMyLlmListDetailed,
|
||||
useSelectLlmList,
|
||||
} from '@/hooks/llm-hooks';
|
||||
import { getRealModelName } from '@/utils/llm-util';
|
||||
import {
|
||||
CloseCircleOutlined,
|
||||
EditOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Collapse,
|
||||
CollapseProps,
|
||||
Divider,
|
||||
Flex,
|
||||
List,
|
||||
Row,
|
||||
Space,
|
||||
Spin,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from 'antd';
|
||||
import { CircleHelp } from 'lucide-react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import SettingTitle from '../components/setting-title';
|
||||
import { isLocalLlmFactory } from '../utils';
|
||||
import {
|
||||
useHandleDeleteFactory,
|
||||
useHandleDeleteLlm,
|
||||
useSubmitApiKey,
|
||||
useSubmitAzure,
|
||||
useSubmitBedrock,
|
||||
useSubmitFishAudio,
|
||||
useSubmitGoogle,
|
||||
useSubmitHunyuan,
|
||||
useSubmitOllama,
|
||||
useSubmitSpark,
|
||||
useSubmitSystemModelSetting,
|
||||
useSubmitTencentCloud,
|
||||
useSubmitVolcEngine,
|
||||
useSubmityiyan,
|
||||
} from './hooks';
|
||||
import styles from './index.less';
|
||||
import ApiKeyModal from './modal/api-key-modal';
|
||||
import AzureOpenAIModal from './modal/azure-openai-modal';
|
||||
import BedrockModal from './modal/bedrock-modal';
|
||||
import FishAudioModal from './modal/fish-audio-modal';
|
||||
import GoogleModal from './modal/google-modal';
|
||||
import HunyuanModal from './modal/hunyuan-modal';
|
||||
import TencentCloudModal from './modal/next-tencent-modal';
|
||||
import OllamaModal from './modal/ollama-modal';
|
||||
import SparkModal from './modal/spark-modal';
|
||||
import SystemModelSettingModal from './modal/system-model-setting-modal';
|
||||
import VolcEngineModal from './modal/volcengine-modal';
|
||||
import YiyanModal from './modal/yiyan-modal';
|
||||
|
||||
const { Text } = Typography;
|
||||
interface IModelCardProps {
|
||||
item: LlmItem;
|
||||
clickApiKey: (llmFactory: string) => void;
|
||||
handleEditModel: (model: any, factory: LlmItem) => void;
|
||||
}
|
||||
|
||||
type TagType =
|
||||
| 'LLM'
|
||||
| 'TEXT EMBEDDING'
|
||||
| 'TEXT RE-RANK'
|
||||
| 'TTS'
|
||||
| 'SPEECH2TEXT'
|
||||
| 'IMAGE2TEXT'
|
||||
| 'MODERATION';
|
||||
|
||||
const sortTags = (tags: string) => {
|
||||
const orderMap: Record<TagType, number> = {
|
||||
LLM: 1,
|
||||
'TEXT EMBEDDING': 2,
|
||||
'TEXT RE-RANK': 3,
|
||||
TTS: 4,
|
||||
SPEECH2TEXT: 5,
|
||||
IMAGE2TEXT: 6,
|
||||
MODERATION: 7,
|
||||
};
|
||||
|
||||
return tags
|
||||
.split(',')
|
||||
.map((tag) => tag.trim())
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(orderMap[a as TagType] || 999) - (orderMap[b as TagType] || 999),
|
||||
);
|
||||
};
|
||||
|
||||
const ModelCard = ({ item, clickApiKey, handleEditModel }: IModelCardProps) => {
|
||||
const { visible, switchVisible } = useSetModalState();
|
||||
const { t } = useTranslate('setting');
|
||||
const { theme } = useTheme();
|
||||
const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
|
||||
const { handleDeleteFactory } = useHandleDeleteFactory(item.name);
|
||||
|
||||
const handleApiKeyClick = () => {
|
||||
clickApiKey(item.name);
|
||||
};
|
||||
|
||||
const handleShowMoreClick = () => {
|
||||
switchVisible();
|
||||
};
|
||||
|
||||
return (
|
||||
<List.Item>
|
||||
<Card
|
||||
className={theme === 'dark' ? styles.addedCardDark : styles.addedCard}
|
||||
>
|
||||
<Row align={'middle'}>
|
||||
<Col span={12}>
|
||||
<Flex gap={'middle'} align="center">
|
||||
<LlmIcon name={item.name} />
|
||||
<Flex vertical gap={'small'}>
|
||||
<b>{item.name}</b>
|
||||
<Flex wrap="wrap">
|
||||
{sortTags(item.tags).map((tag, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
margin: '1px',
|
||||
paddingInline: '4px',
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col span={12} className={styles.factoryOperationWrapper}>
|
||||
<Space size={'middle'}>
|
||||
<Button onClick={handleApiKeyClick}>
|
||||
<Flex align="center" gap={4}>
|
||||
{isLocalLlmFactory(item.name) ||
|
||||
item.name === LLMFactory.VolcEngine ||
|
||||
item.name === LLMFactory.TencentHunYuan ||
|
||||
item.name === LLMFactory.XunFeiSpark ||
|
||||
item.name === LLMFactory.BaiduYiYan ||
|
||||
item.name === LLMFactory.FishAudio ||
|
||||
item.name === LLMFactory.TencentCloud ||
|
||||
item.name === LLMFactory.GoogleCloud ||
|
||||
item.name === LLMFactory.AzureOpenAI
|
||||
? t('addTheModel')
|
||||
: 'API-Key'}
|
||||
<SettingOutlined />
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button onClick={handleShowMoreClick}>
|
||||
<Flex align="center" gap={4}>
|
||||
{visible ? t('hideModels') : t('showMoreModels')}
|
||||
<MoreModelIcon />
|
||||
</Flex>
|
||||
</Button>
|
||||
<Button type={'text'} onClick={handleDeleteFactory}>
|
||||
<Flex align="center">
|
||||
<CloseCircleOutlined style={{ color: '#D92D20' }} />
|
||||
</Flex>
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
{visible && (
|
||||
<List
|
||||
size="small"
|
||||
dataSource={item.llm}
|
||||
className={styles.llmList}
|
||||
renderItem={(model) => (
|
||||
<List.Item>
|
||||
<Space>
|
||||
{getRealModelName(model.name)}
|
||||
<Tag color="#b8b8b8">{model.type}</Tag>
|
||||
{isLocalLlmFactory(item.name) && (
|
||||
<Tooltip title={t('edit', { keyPrefix: 'common' })}>
|
||||
<Button
|
||||
type={'text'}
|
||||
onClick={() => handleEditModel(model, item)}
|
||||
>
|
||||
<EditOutlined style={{ color: '#1890ff' }} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title={t('delete', { keyPrefix: 'common' })}>
|
||||
<Button type={'text'} onClick={handleDeleteLlm(model.name)}>
|
||||
<CloseCircleOutlined style={{ color: '#D92D20' }} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</List.Item>
|
||||
);
|
||||
};
|
||||
|
||||
const UserSettingModel = () => {
|
||||
const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
|
||||
const { data: detailedLlmList } = useFetchMyLlmListDetailed();
|
||||
const { theme } = useTheme();
|
||||
const {
|
||||
saveApiKeyLoading,
|
||||
initialApiKey,
|
||||
llmFactory,
|
||||
editMode,
|
||||
onApiKeySavingOk,
|
||||
apiKeyVisible,
|
||||
hideApiKeyModal,
|
||||
showApiKeyModal,
|
||||
} = useSubmitApiKey();
|
||||
const {
|
||||
saveSystemModelSettingLoading,
|
||||
onSystemSettingSavingOk,
|
||||
systemSettingVisible,
|
||||
hideSystemSettingModal,
|
||||
showSystemSettingModal,
|
||||
} = useSubmitSystemModelSetting();
|
||||
const { t } = useTranslate('setting');
|
||||
const {
|
||||
llmAddingVisible,
|
||||
hideLlmAddingModal,
|
||||
showLlmAddingModal,
|
||||
onLlmAddingOk,
|
||||
llmAddingLoading,
|
||||
editMode: llmEditMode,
|
||||
initialValues: llmInitialValues,
|
||||
selectedLlmFactory,
|
||||
} = useSubmitOllama();
|
||||
|
||||
const {
|
||||
volcAddingVisible,
|
||||
hideVolcAddingModal,
|
||||
showVolcAddingModal,
|
||||
onVolcAddingOk,
|
||||
volcAddingLoading,
|
||||
} = useSubmitVolcEngine();
|
||||
|
||||
const {
|
||||
HunyuanAddingVisible,
|
||||
hideHunyuanAddingModal,
|
||||
showHunyuanAddingModal,
|
||||
onHunyuanAddingOk,
|
||||
HunyuanAddingLoading,
|
||||
} = useSubmitHunyuan();
|
||||
|
||||
const {
|
||||
GoogleAddingVisible,
|
||||
hideGoogleAddingModal,
|
||||
showGoogleAddingModal,
|
||||
onGoogleAddingOk,
|
||||
GoogleAddingLoading,
|
||||
} = useSubmitGoogle();
|
||||
|
||||
const {
|
||||
TencentCloudAddingVisible,
|
||||
hideTencentCloudAddingModal,
|
||||
showTencentCloudAddingModal,
|
||||
onTencentCloudAddingOk,
|
||||
TencentCloudAddingLoading,
|
||||
} = useSubmitTencentCloud();
|
||||
|
||||
const {
|
||||
SparkAddingVisible,
|
||||
hideSparkAddingModal,
|
||||
showSparkAddingModal,
|
||||
onSparkAddingOk,
|
||||
SparkAddingLoading,
|
||||
} = useSubmitSpark();
|
||||
|
||||
const {
|
||||
yiyanAddingVisible,
|
||||
hideyiyanAddingModal,
|
||||
showyiyanAddingModal,
|
||||
onyiyanAddingOk,
|
||||
yiyanAddingLoading,
|
||||
} = useSubmityiyan();
|
||||
|
||||
const {
|
||||
FishAudioAddingVisible,
|
||||
hideFishAudioAddingModal,
|
||||
showFishAudioAddingModal,
|
||||
onFishAudioAddingOk,
|
||||
FishAudioAddingLoading,
|
||||
} = useSubmitFishAudio();
|
||||
|
||||
const {
|
||||
bedrockAddingLoading,
|
||||
onBedrockAddingOk,
|
||||
bedrockAddingVisible,
|
||||
hideBedrockAddingModal,
|
||||
showBedrockAddingModal,
|
||||
} = useSubmitBedrock();
|
||||
|
||||
const {
|
||||
AzureAddingVisible,
|
||||
hideAzureAddingModal,
|
||||
showAzureAddingModal,
|
||||
onAzureAddingOk,
|
||||
AzureAddingLoading,
|
||||
} = useSubmitAzure();
|
||||
|
||||
const ModalMap = useMemo(
|
||||
() => ({
|
||||
[LLMFactory.Bedrock]: showBedrockAddingModal,
|
||||
[LLMFactory.VolcEngine]: showVolcAddingModal,
|
||||
[LLMFactory.TencentHunYuan]: showHunyuanAddingModal,
|
||||
[LLMFactory.XunFeiSpark]: showSparkAddingModal,
|
||||
[LLMFactory.BaiduYiYan]: showyiyanAddingModal,
|
||||
[LLMFactory.FishAudio]: showFishAudioAddingModal,
|
||||
[LLMFactory.TencentCloud]: showTencentCloudAddingModal,
|
||||
[LLMFactory.GoogleCloud]: showGoogleAddingModal,
|
||||
[LLMFactory.AzureOpenAI]: showAzureAddingModal,
|
||||
}),
|
||||
[
|
||||
showBedrockAddingModal,
|
||||
showVolcAddingModal,
|
||||
showHunyuanAddingModal,
|
||||
showTencentCloudAddingModal,
|
||||
showSparkAddingModal,
|
||||
showyiyanAddingModal,
|
||||
showFishAudioAddingModal,
|
||||
showGoogleAddingModal,
|
||||
showAzureAddingModal,
|
||||
],
|
||||
);
|
||||
|
||||
const handleAddModel = useCallback(
|
||||
(llmFactory: string) => {
|
||||
if (isLocalLlmFactory(llmFactory)) {
|
||||
showLlmAddingModal(llmFactory);
|
||||
} else if (llmFactory in ModalMap) {
|
||||
ModalMap[llmFactory as keyof typeof ModalMap]();
|
||||
} else {
|
||||
showApiKeyModal({ llm_factory: llmFactory });
|
||||
}
|
||||
},
|
||||
[showApiKeyModal, showLlmAddingModal, ModalMap],
|
||||
);
|
||||
|
||||
const handleEditModel = useCallback(
|
||||
(model: any, factory: LlmItem) => {
|
||||
if (factory) {
|
||||
const detailedFactory = detailedLlmList[factory.name];
|
||||
const detailedModel = detailedFactory?.llm?.find(
|
||||
(m: any) => m.name === model.name,
|
||||
);
|
||||
|
||||
const editData = {
|
||||
llm_factory: factory.name,
|
||||
llm_name: model.name,
|
||||
model_type: model.type,
|
||||
};
|
||||
|
||||
if (isLocalLlmFactory(factory.name)) {
|
||||
showLlmAddingModal(factory.name, true, editData, detailedModel);
|
||||
} else if (factory.name in ModalMap) {
|
||||
ModalMap[factory.name as keyof typeof ModalMap]();
|
||||
} else {
|
||||
showApiKeyModal(editData, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
[showApiKeyModal, showLlmAddingModal, ModalMap, detailedLlmList],
|
||||
);
|
||||
|
||||
const items: CollapseProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: t('addedModels'),
|
||||
children: (
|
||||
<List
|
||||
grid={{ gutter: 16, column: 1 }}
|
||||
dataSource={llmList}
|
||||
renderItem={(item) => (
|
||||
<ModelCard
|
||||
item={item}
|
||||
clickApiKey={handleAddModel}
|
||||
handleEditModel={handleEditModel}
|
||||
></ModelCard>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: (
|
||||
<div className="flex items-center gap-2">
|
||||
{t('modelsToBeAdded')}
|
||||
<Tooltip title={t('modelsToBeAddedTooltip')}>
|
||||
<CircleHelp className="size-4" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
children: (
|
||||
<List
|
||||
grid={{
|
||||
gutter: {
|
||||
xs: 8,
|
||||
sm: 10,
|
||||
md: 12,
|
||||
lg: 16,
|
||||
xl: 20,
|
||||
xxl: 24,
|
||||
},
|
||||
xs: 1,
|
||||
sm: 1,
|
||||
md: 2,
|
||||
lg: 3,
|
||||
xl: 4,
|
||||
xxl: 8,
|
||||
}}
|
||||
dataSource={factoryList}
|
||||
renderItem={(item) => (
|
||||
<List.Item>
|
||||
<Card
|
||||
className={
|
||||
theme === 'dark'
|
||||
? styles.toBeAddedCardDark
|
||||
: styles.toBeAddedCard
|
||||
}
|
||||
>
|
||||
<Flex vertical gap={'middle'}>
|
||||
<LlmIcon name={item.name} imgClass="h-12 w-auto" />
|
||||
<Flex vertical gap={'middle'}>
|
||||
<b>
|
||||
<Text ellipsis={{ tooltip: item.name }}>{item.name}</Text>
|
||||
</b>
|
||||
<Flex wrap="wrap" style={{ minHeight: '50px' }}>
|
||||
{sortTags(item.tags).map((tag, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
style={{
|
||||
fontSize: '8px',
|
||||
margin: '1px',
|
||||
paddingInline: '4px',
|
||||
height: '22px',
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Divider className={styles.modelDivider}></Divider>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => handleAddModel(item.name)}
|
||||
className={styles.addButton}
|
||||
>
|
||||
{t('addTheModel')}
|
||||
</Button>
|
||||
</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="xx" className="w-full space-y-6">
|
||||
<Spin spinning={loading}>
|
||||
<section className={styles.modelContainer}>
|
||||
<SettingTitle
|
||||
title={t('model')}
|
||||
description={t('modelDescription')}
|
||||
showRightButton
|
||||
clickButton={showSystemSettingModal}
|
||||
></SettingTitle>
|
||||
<Divider></Divider>
|
||||
<Collapse defaultActiveKey={['1', '2']} ghost items={items} />
|
||||
</section>
|
||||
</Spin>
|
||||
<ApiKeyModal
|
||||
visible={apiKeyVisible}
|
||||
hideModal={hideApiKeyModal}
|
||||
loading={saveApiKeyLoading}
|
||||
initialValue={initialApiKey}
|
||||
editMode={editMode}
|
||||
onOk={onApiKeySavingOk}
|
||||
llmFactory={llmFactory}
|
||||
></ApiKeyModal>
|
||||
{systemSettingVisible && (
|
||||
<SystemModelSettingModal
|
||||
visible={systemSettingVisible}
|
||||
onOk={onSystemSettingSavingOk}
|
||||
hideModal={hideSystemSettingModal}
|
||||
loading={saveSystemModelSettingLoading}
|
||||
></SystemModelSettingModal>
|
||||
)}
|
||||
<OllamaModal
|
||||
visible={llmAddingVisible}
|
||||
hideModal={hideLlmAddingModal}
|
||||
onOk={onLlmAddingOk}
|
||||
loading={llmAddingLoading}
|
||||
editMode={llmEditMode}
|
||||
initialValues={llmInitialValues}
|
||||
llmFactory={selectedLlmFactory}
|
||||
></OllamaModal>
|
||||
<VolcEngineModal
|
||||
visible={volcAddingVisible}
|
||||
hideModal={hideVolcAddingModal}
|
||||
onOk={onVolcAddingOk}
|
||||
loading={volcAddingLoading}
|
||||
llmFactory={LLMFactory.VolcEngine}
|
||||
></VolcEngineModal>
|
||||
<HunyuanModal
|
||||
visible={HunyuanAddingVisible}
|
||||
hideModal={hideHunyuanAddingModal}
|
||||
onOk={onHunyuanAddingOk}
|
||||
loading={HunyuanAddingLoading}
|
||||
llmFactory={LLMFactory.TencentHunYuan}
|
||||
></HunyuanModal>
|
||||
<GoogleModal
|
||||
visible={GoogleAddingVisible}
|
||||
hideModal={hideGoogleAddingModal}
|
||||
onOk={onGoogleAddingOk}
|
||||
loading={GoogleAddingLoading}
|
||||
llmFactory={LLMFactory.GoogleCloud}
|
||||
></GoogleModal>
|
||||
<TencentCloudModal
|
||||
visible={TencentCloudAddingVisible}
|
||||
hideModal={hideTencentCloudAddingModal}
|
||||
onOk={onTencentCloudAddingOk}
|
||||
loading={TencentCloudAddingLoading}
|
||||
llmFactory={LLMFactory.TencentCloud}
|
||||
></TencentCloudModal>
|
||||
<SparkModal
|
||||
visible={SparkAddingVisible}
|
||||
hideModal={hideSparkAddingModal}
|
||||
onOk={onSparkAddingOk}
|
||||
loading={SparkAddingLoading}
|
||||
llmFactory={LLMFactory.XunFeiSpark}
|
||||
></SparkModal>
|
||||
<YiyanModal
|
||||
visible={yiyanAddingVisible}
|
||||
hideModal={hideyiyanAddingModal}
|
||||
onOk={onyiyanAddingOk}
|
||||
loading={yiyanAddingLoading}
|
||||
llmFactory={LLMFactory.BaiduYiYan}
|
||||
></YiyanModal>
|
||||
<FishAudioModal
|
||||
visible={FishAudioAddingVisible}
|
||||
hideModal={hideFishAudioAddingModal}
|
||||
onOk={onFishAudioAddingOk}
|
||||
loading={FishAudioAddingLoading}
|
||||
llmFactory={LLMFactory.FishAudio}
|
||||
></FishAudioModal>
|
||||
<BedrockModal
|
||||
visible={bedrockAddingVisible}
|
||||
hideModal={hideBedrockAddingModal}
|
||||
onOk={onBedrockAddingOk}
|
||||
loading={bedrockAddingLoading}
|
||||
llmFactory={LLMFactory.Bedrock}
|
||||
></BedrockModal>
|
||||
<AzureOpenAIModal
|
||||
visible={AzureAddingVisible}
|
||||
hideModal={hideAzureAddingModal}
|
||||
onOk={onAzureAddingOk}
|
||||
loading={AzureAddingLoading}
|
||||
llmFactory={LLMFactory.AzureOpenAI}
|
||||
></AzureOpenAIModal>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserSettingModel;
|
||||
Reference in New Issue
Block a user