AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-05-31 10:35:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fetch llm list by @tanstack/react-query #1306 (#1708)

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

fix: fetch llm list by @tanstack/react-query #1306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
balibabu 2024-07-25 18:06:39 +08:00 committed by GitHub
parent a99d19bdea
commit 375f621405
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 170 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
web/src/hooks/llm-hooks.ts
View File

@ -1,37 +1,37 @@
import { LlmModelType } from '@/constants/knowledge'; import { LlmModelType } from '@/constants/knowledge';
import { ResponseGetType } from '@/interfaces/database/base';
import { import {
IFactory, IFactory,
IMyLlmValue, IMyLlmValue,
IThirdOAIModelCollection as IThirdAiModelCollection,
IThirdOAIModelCollection, IThirdOAIModelCollection,
} from '@/interfaces/database/llm'; } from '@/interfaces/database/llm';
import { import {
IAddLlmRequestBody, IAddLlmRequestBody,
IDeleteLlmRequestBody, IDeleteLlmRequestBody,
} from '@/interfaces/request/llm'; } from '@/interfaces/request/llm';
import userService from '@/services/user-service';
import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/common-util'; import { sortLLmFactoryListBySpecifiedOrder } from '@/utils/common-util';
import { useCallback, useEffect, useMemo } from 'react'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useDispatch, useSelector } from 'umi'; import { message } from 'antd';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'umi';
export const useFetchLlmList = ( export const useFetchLlmList = (
modelType?: LlmModelType, modelType?: LlmModelType,
isOnMountFetching: boolean = true, ): IThirdAiModelCollection => {
) => { const { data } = useQuery({
const dispatch = useDispatch(); queryKey: ['llmList'],
initialData: {},
queryFn: async () => {
const { data } = await userService.llm_list({ model_type: modelType });
const fetchLlmList = useCallback(() => { return data?.data ?? {};
dispatch({ },
type: 'settingModel/llm_list', });
payload: { model_type: modelType },
});
}, [dispatch, modelType]);
useEffect(() => { return data;
if (isOnMountFetching) {
fetchLlmList();
}
}, [fetchLlmList, isOnMountFetching]);
return fetchLlmList;
}; };
export const useSelectLlmInfo = () => { export const useSelectLlmInfo = () => {
@ -43,7 +43,7 @@ export const useSelectLlmInfo = () => {
}; };
export const useSelectLlmOptions = () => { export const useSelectLlmOptions = () => {
const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo(); const llmInfo: IThirdOAIModelCollection = useFetchLlmList();
const embeddingModelOptions = useMemo(() => { const embeddingModelOptions = useMemo(() => {
return Object.entries(llmInfo).map(([key, value]) => { return Object.entries(llmInfo).map(([key, value]) => {
@ -62,7 +62,7 @@ export const useSelectLlmOptions = () => {
}; };
export const useSelectLlmOptionsByModelType = () => { export const useSelectLlmOptionsByModelType = () => {
const llmInfo: IThirdOAIModelCollection = useSelectLlmInfo(); const llmInfo: IThirdOAIModelCollection = useFetchLlmList();
const groupOptionsByModelType = (modelType: LlmModelType) => { const groupOptionsByModelType = (modelType: LlmModelType) => {
return Object.entries(llmInfo) return Object.entries(llmInfo)
@ -96,73 +96,65 @@ export const useSelectLlmOptionsByModelType = () => {
}; };
}; };
export const useSelectLlmFactoryList = () => { export const useFetchLlmFactoryList = (): ResponseGetType<IFactory[]> => {
const factoryList: IFactory[] = useSelector( const { data, isFetching: loading } = useQuery({
(state: any) => state.settingModel.factoryList, queryKey: ['factoryList'],
); initialData: [],
gcTime: 0,
queryFn: async () => {
const { data } = await userService.factories_list();
return factoryList; return data?.data ?? [];
},
});
return { data, loading };
}; };
export const useSelectMyLlmList = () => { export type LlmItem = { name: string; logo: string } & IMyLlmValue;
const myLlmList: Record<string, IMyLlmValue> = useSelector(
(state: any) => state.settingModel.myLlmList,
);
return myLlmList; export const useFetchMyLlmList = (): ResponseGetType<
Record<string, IMyLlmValue>
> => {
const { data, isFetching: loading } = useQuery({
queryKey: ['myLlmList'],
initialData: {},
gcTime: 0,
queryFn: async () => {
const { data } = await userService.my_llm();
return data?.data ?? {};
},
});
return { data, loading };
}; };
export const useFetchLlmFactoryListOnMount = () => { export const useSelectLlmList = () => {
const dispatch = useDispatch(); const { data: myLlmList, loading: myLlmListLoading } = useFetchMyLlmList();
const factoryList = useSelectLlmFactoryList(); const { data: factoryList, loading: factoryListLoading } =
const myLlmList = useSelectMyLlmList(); useFetchLlmFactoryList();
const list = useMemo(() => { const nextMyLlmList: Array<LlmItem> = useMemo(() => {
return Object.entries(myLlmList).map(([key, value]) => ({
name: key,
logo: factoryList.find((x) => x.name === key)?.logo ?? '',
...value,
}));
}, [myLlmList, factoryList]);
const nextFactoryList = useMemo(() => {
const currentList = factoryList.filter((x) => const currentList = factoryList.filter((x) =>
Object.keys(myLlmList).every((y) => y !== x.name), Object.keys(myLlmList).every((y) => y !== x.name),
); );
return sortLLmFactoryListBySpecifiedOrder(currentList); return sortLLmFactoryListBySpecifiedOrder(currentList);
}, [factoryList, myLlmList]); }, [factoryList, myLlmList]);
const fetchLlmFactoryList = useCallback(() => { return {
dispatch({ myLlmList: nextMyLlmList,
type: 'settingModel/factories_list', factoryList: nextFactoryList,
}); loading: myLlmListLoading || factoryListLoading,
}, [dispatch]); };
useEffect(() => {
fetchLlmFactoryList();
}, [fetchLlmFactoryList]);
return list;
};
export type LlmItem = { name: string; logo: string } & IMyLlmValue;
export const useFetchMyLlmListOnMount = () => {
const dispatch = useDispatch();
const llmList = useSelectMyLlmList();
const factoryList = useSelectLlmFactoryList();
const list: Array<LlmItem> = useMemo(() => {
return Object.entries(llmList).map(([key, value]) => ({
name: key,
logo: factoryList.find((x) => x.name === key)?.logo ?? '',
...value,
}));
}, [llmList, factoryList]);
const fetchMyLlmList = useCallback(() => {
dispatch({
type: 'settingModel/my_llm',
});
}, [dispatch]);
useEffect(() => {
fetchMyLlmList();
}, [fetchMyLlmList]);
return list;
}; };
export interface IApiKeySavingParams { export interface IApiKeySavingParams {
@ -174,19 +166,26 @@ export interface IApiKeySavingParams {
} }
export const useSaveApiKey = () => { export const useSaveApiKey = () => {
const dispatch = useDispatch(); const queryClient = useQueryClient();
const { t } = useTranslation();
const saveApiKey = useCallback( const {
(savingParams: IApiKeySavingParams) => { data,
return dispatch<any>({ isPending: loading,
type: 'settingModel/set_api_key', mutateAsync,
payload: savingParams, } = useMutation({
}); mutationKey: ['saveApiKey'],
mutationFn: async (params: IApiKeySavingParams) => {
const { data } = await userService.set_api_key(params);
if (data.retcode === 0) {
message.success(t('message.modified'));
queryClient.invalidateQueries({ queryKey: ['myLlmList'] });
queryClient.invalidateQueries({ queryKey: ['factoryList'] });
}
return data.retcode;
}, },
[dispatch], });
);
return saveApiKey; return { data, loading, saveApiKey: mutateAsync };
}; };
export interface ISystemModelSettingSavingParams { export interface ISystemModelSettingSavingParams {
@ -199,49 +198,67 @@ export interface ISystemModelSettingSavingParams {
} }
export const useSaveTenantInfo = () => { export const useSaveTenantInfo = () => {
const dispatch = useDispatch(); const { t } = useTranslation();
const {
const saveTenantInfo = useCallback( data,
(savingParams: ISystemModelSettingSavingParams) => { isPending: loading,
return dispatch<any>({ mutateAsync,
type: 'settingModel/set_tenant_info', } = useMutation({
payload: savingParams, mutationKey: ['saveTenantInfo'],
}); mutationFn: async (params: ISystemModelSettingSavingParams) => {
const { data } = await userService.set_tenant_info(params);
if (data.retcode === 0) {
message.success(t('message.modified'));
}
return data.retcode;
}, },
[dispatch], });
);
return saveTenantInfo; return { data, loading, saveTenantInfo: mutateAsync };
}; };
export const useAddLlm = () => { export const useAddLlm = () => {
const dispatch = useDispatch(); const queryClient = useQueryClient();
const { t } = useTranslation();
const addLlm = useCallback( const {
(requestBody: IAddLlmRequestBody) => { data,
return dispatch<any>({ isPending: loading,
type: 'settingModel/add_llm', mutateAsync,
payload: requestBody, } = useMutation({
}); mutationKey: ['addLlm'],
mutationFn: async (params: IAddLlmRequestBody) => {
const { data } = await userService.add_llm(params);
if (data.retcode === 0) {
queryClient.invalidateQueries({ queryKey: ['myLlmList'] });
queryClient.invalidateQueries({ queryKey: ['factoryList'] });
message.success(t('message.modified'));
}
return data.retcode;
}, },
[dispatch], });
);
return addLlm; return { data, loading, addLlm: mutateAsync };
}; };
export const useDeleteLlm = () => { export const useDeleteLlm = () => {
const dispatch = useDispatch(); const queryClient = useQueryClient();
const { t } = useTranslation();
const deleteLlm = useCallback( const {
(requestBody: IDeleteLlmRequestBody) => { data,
return dispatch<any>({ isPending: loading,
type: 'settingModel/delete_llm', mutateAsync,
payload: requestBody, } = useMutation({
}); mutationKey: ['deleteLlm'],
mutationFn: async (params: IDeleteLlmRequestBody) => {
const { data } = await userService.delete_llm(params);
if (data.retcode === 0) {
queryClient.invalidateQueries({ queryKey: ['myLlmList'] });
queryClient.invalidateQueries({ queryKey: ['factoryList'] });
message.success(t('message.deleted'));
}
return data.retcode;
}, },
[dispatch], });
);
return deleteLlm; return { data, loading, deleteLlm: mutateAsync };
}; };

11
web/src/hooks/logic-hooks.ts
View File

@ -22,7 +22,6 @@ import { useTranslation } from 'react-i18next';
import { useDispatch } from 'umi'; import { useDispatch } from 'umi';
import { useSetModalState, useTranslate } from './common-hooks'; import { useSetModalState, useTranslate } from './common-hooks';
import { useSetDocumentParser } from './document-hooks'; import { useSetDocumentParser } from './document-hooks';
import { useFetchLlmList } from './llm-hooks';
import { useSetPaginationParams } from './route-hook'; import { useSetPaginationParams } from './route-hook';
import { useOneNamespaceEffectsLoading } from './store-hooks'; import { useOneNamespaceEffectsLoading } from './store-hooks';
import { import {
@ -346,13 +345,3 @@ export const useFetchModelId = (visible: boolean) => {
return tenantInfo?.llm_id ?? ''; return tenantInfo?.llm_id ?? '';
}; };
export const useFetchLlmModelOnVisible = (visible: boolean) => {
const fetchLlmList = useFetchLlmList();
useEffect(() => {
if (visible) {
fetchLlmList();
}
}, [fetchLlmList, visible]);
};

5
web/src/interfaces/database/base.ts
View File

@ -4,3 +4,8 @@ export interface ResponseType<T = any> {
retmsg: string; retmsg: string;
status: number; status: number;
} }
export interface ResponseGetType<T = any> {
data: T;
loading?: boolean;
}

4
web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
View File

@ -2,7 +2,7 @@ import {
useFetchKnowledgeBaseConfiguration, useFetchKnowledgeBaseConfiguration,
useUpdateKnowledge, useUpdateKnowledge,
} from '@/hooks/knowledge-hooks'; } from '@/hooks/knowledge-hooks';
import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llm-hooks'; import { useSelectLlmOptions } from '@/hooks/llm-hooks';
import { useNavigateToDataset } from '@/hooks/route-hook'; import { useNavigateToDataset } from '@/hooks/route-hook';
import { import {
useFetchTenantInfo, useFetchTenantInfo,
@ -17,7 +17,6 @@ import { Form, UploadFile } from 'antd';
import { FormInstance } from 'antd/lib'; import { FormInstance } from 'antd/lib';
import pick from 'lodash/pick'; import pick from 'lodash/pick';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { LlmModelType } from '../../constant';
export const useSubmitKnowledgeConfiguration = (form: FormInstance) => { export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge(); const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge();
@ -46,7 +45,6 @@ export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {
useFetchTenantInfo(); useFetchTenantInfo();
const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration(); const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
useFetchLlmList(LlmModelType.Embedding);
useEffect(() => { useEffect(() => {
const fileList: UploadFile[] = getUploadFileListFromBase64( const fileList: UploadFile[] = getUploadFileListFromBase64(

13
web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
View File

@ -1,12 +1,10 @@
import Rerank from '@/components/rerank';
import SimilaritySlider from '@/components/similarity-slider'; import SimilaritySlider from '@/components/similarity-slider';
import { useTranslate } from '@/hooks/common-hooks';
import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
import { Button, Card, Divider, Flex, Form, Input } from 'antd'; import { Button, Card, Divider, Flex, Form, Input } from 'antd';
import { FormInstance } from 'antd/lib'; import { FormInstance } from 'antd/lib';
import Rerank from '@/components/rerank';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchLlmList } from '@/hooks/llm-hooks';
import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
import { useEffect } from 'react';
import styles from './index.less'; import styles from './index.less';
type FieldType = { type FieldType = {
@ -26,11 +24,6 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
'testDocumentChunk', 'testDocumentChunk',
]); ]);
const { t } = useTranslate('knowledgeDetails'); const { t } = useTranslate('knowledgeDetails');
const fetchLlmList = useFetchLlmList();
useEffect(() => {
fetchLlmList();
}, [fetchLlmList]);
const buttonDisabled = const buttonDisabled =
!question || (typeof question === 'string' && question.trim() === ''); !question || (typeof question === 'string' && question.trim() === '');

19
web/src/pages/chat/chat-configuration-modal/index.tsx
View File

@ -4,7 +4,11 @@ import {
ModelVariableType, ModelVariableType,
settledModelVariableMap, settledModelVariableMap,
} from '@/constants/knowledge'; } from '@/constants/knowledge';
import { useTranslate } from '@/hooks/common-hooks';
import { useFetchModelId } from '@/hooks/logic-hooks';
import { IDialog } from '@/interfaces/database/chat'; import { IDialog } from '@/interfaces/database/chat';
import { getBase64FromUploadFileList } from '@/utils/file-util';
import { removeUselessFieldsFromValues } from '@/utils/form';
import { Divider, Flex, Form, Modal, Segmented, UploadFile } from 'antd'; import { Divider, Flex, Form, Modal, Segmented, UploadFile } from 'antd';
import { SegmentedValue } from 'antd/es/segmented'; import { SegmentedValue } from 'antd/es/segmented';
import camelCase from 'lodash/camelCase'; import camelCase from 'lodash/camelCase';
@ -14,13 +18,6 @@ import AssistantSetting from './assistant-setting';
import ModelSetting from './model-setting'; import ModelSetting from './model-setting';
import PromptEngine from './prompt-engine'; import PromptEngine from './prompt-engine';
import { useTranslate } from '@/hooks/common-hooks';
import {
useFetchLlmModelOnVisible,
useFetchModelId,
} from '@/hooks/logic-hooks';
import { getBase64FromUploadFileList } from '@/utils/file-util';
import { removeUselessFieldsFromValues } from '@/utils/form';
import styles from './index.less'; import styles from './index.less';
const layout = { const layout = {
@ -99,10 +96,6 @@ const ChatConfigurationModal = ({
onOk(finalValues); onOk(finalValues);
}; };
const handleCancel = () => {
hideModal();
};
const handleSegmentedChange = (val: SegmentedValue) => { const handleSegmentedChange = (val: SegmentedValue) => {
setValue(val as ConfigurationSegmented); setValue(val as ConfigurationSegmented);
}; };
@ -112,8 +105,6 @@ const ChatConfigurationModal = ({
form.resetFields(); form.resetFields();
}; };
useFetchLlmModelOnVisible(visible);
const title = ( const title = (
<Flex gap={16}> <Flex gap={16}>
<ChatConfigurationAtom></ChatConfigurationAtom> <ChatConfigurationAtom></ChatConfigurationAtom>
@ -153,7 +144,7 @@ const ChatConfigurationModal = ({
width={688} width={688}
open={visible} open={visible}
onOk={handleOk} onOk={handleOk}
onCancel={handleCancel} onCancel={hideModal}
confirmLoading={loading} confirmLoading={loading}
destroyOnClose destroyOnClose
afterClose={handleModalAfterClose} afterClose={handleModalAfterClose}

20
web/src/pages/chat/index.tsx
View File

@ -353,15 +353,17 @@ const Chat = () => {
</Flex> </Flex>
<Divider type={'vertical'} className={styles.divider}></Divider> <Divider type={'vertical'} className={styles.divider}></Divider>
<ChatContainer></ChatContainer> <ChatContainer></ChatContainer>
<ChatConfigurationModal {dialogEditVisible && (
visible={dialogEditVisible} <ChatConfigurationModal
initialDialog={initialDialog} visible={dialogEditVisible}
showModal={showDialogEditModal} initialDialog={initialDialog}
hideModal={hideDialogEditModal} showModal={showDialogEditModal}
loading={dialogSettingLoading} hideModal={hideDialogEditModal}
onOk={onDialogEditOk} loading={dialogSettingLoading}
clearDialog={clearDialog} onOk={onDialogEditOk}
></ChatConfigurationModal> clearDialog={clearDialog}
></ChatConfigurationModal>
)}
<RenameModal <RenameModal
visible={conversationRenameVisible} visible={conversationRenameVisible}
hideModal={hideConversationRenameModal} hideModal={hideConversationRenameModal}

3
web/src/pages/flow/hooks.ts
View File

@ -1,6 +1,5 @@
import { useSetModalState } from '@/hooks/common-hooks'; import { useSetModalState } from '@/hooks/common-hooks';
import { useFetchFlow, useResetFlow, useSetFlow } from '@/hooks/flow-hooks'; import { useFetchFlow, useResetFlow, useSetFlow } from '@/hooks/flow-hooks';
import { useFetchLlmList } from '@/hooks/llm-hooks';
import { IGraph } from '@/interfaces/database/flow'; import { IGraph } from '@/interfaces/database/flow';
import { useIsFetching } from '@tanstack/react-query'; import { useIsFetching } from '@tanstack/react-query';
import React, { import React, {
@ -283,8 +282,6 @@ export const useFetchDataOnMount = () => {
useWatchGraphChange(); useWatchGraphChange();
useFetchLlmList();
useEffect(() => { useEffect(() => {
refetch(); refetch();
}, [refetch]); }, [refetch]);

38
web/src/pages/user-setting/setting-model/hooks.ts
View File

@ -4,12 +4,10 @@ import {
ISystemModelSettingSavingParams, ISystemModelSettingSavingParams,
useAddLlm, useAddLlm,
useDeleteLlm, useDeleteLlm,
useFetchLlmList,
useSaveApiKey, useSaveApiKey,
useSaveTenantInfo, useSaveTenantInfo,
useSelectLlmOptionsByModelType, useSelectLlmOptionsByModelType,
} from '@/hooks/llm-hooks'; } from '@/hooks/llm-hooks';
import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
import { import {
useFetchTenantInfo, useFetchTenantInfo,
useSelectTenantInfo, useSelectTenantInfo,
@ -24,7 +22,7 @@ export const useSubmitApiKey = () => {
const [savingParams, setSavingParams] = useState<SavingParamsState>( const [savingParams, setSavingParams] = useState<SavingParamsState>(
{} as SavingParamsState, {} as SavingParamsState,
); );
const saveApiKey = useSaveApiKey(); const { saveApiKey, loading } = useSaveApiKey();
const { const {
visible: apiKeyVisible, visible: apiKeyVisible,
hideModal: hideApiKeyModal, hideModal: hideApiKeyModal,
@ -53,10 +51,6 @@ export const useSubmitApiKey = () => {
[showApiKeyModal, setSavingParams], [showApiKeyModal, setSavingParams],
); );
const loading = useOneNamespaceEffectsLoading('settingModel', [
'set_api_key',
]);
return { return {
saveApiKeyLoading: loading, saveApiKeyLoading: loading,
initialApiKey: '', initialApiKey: '',
@ -70,10 +64,8 @@ export const useSubmitApiKey = () => {
export const useSubmitSystemModelSetting = () => { export const useSubmitSystemModelSetting = () => {
const systemSetting = useSelectTenantInfo(); const systemSetting = useSelectTenantInfo();
const loading = useOneNamespaceEffectsLoading('settingModel', [ const { saveTenantInfo: saveSystemModelSetting, loading } =
'set_tenant_info', useSaveTenantInfo();
]);
const saveSystemModelSetting = useSaveTenantInfo();
const { const {
visible: systemSettingVisible, visible: systemSettingVisible,
hideModal: hideSystemSettingModal, hideModal: hideSystemSettingModal,
@ -109,32 +101,20 @@ export const useSubmitSystemModelSetting = () => {
export const useFetchSystemModelSettingOnMount = (visible: boolean) => { export const useFetchSystemModelSettingOnMount = (visible: boolean) => {
const systemSetting = useSelectTenantInfo(); const systemSetting = useSelectTenantInfo();
const allOptions = useSelectLlmOptionsByModelType(); const allOptions = useSelectLlmOptionsByModelType();
const fetchLlmList = useFetchLlmList();
const fetchTenantInfo = useFetchTenantInfo(); const fetchTenantInfo = useFetchTenantInfo();
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
fetchLlmList();
fetchTenantInfo(); fetchTenantInfo();
} }
}, [fetchLlmList, fetchTenantInfo, visible]); }, [fetchTenantInfo, visible]);
return { systemSetting, allOptions }; return { systemSetting, allOptions };
}; };
export const useSelectModelProvidersLoading = () => {
const loading = useOneNamespaceEffectsLoading('settingModel', [
'my_llm',
'factories_list',
]);
return loading;
};
export const useSubmitOllama = () => { export const useSubmitOllama = () => {
const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']);
const [selectedLlmFactory, setSelectedLlmFactory] = useState<string>(''); const [selectedLlmFactory, setSelectedLlmFactory] = useState<string>('');
const addLlm = useAddLlm(); const { addLlm, loading } = useAddLlm();
const { const {
visible: llmAddingVisible, visible: llmAddingVisible,
hideModal: hideLlmAddingModal, hideModal: hideLlmAddingModal,
@ -167,8 +147,7 @@ export const useSubmitOllama = () => {
}; };
export const useSubmitVolcEngine = () => { export const useSubmitVolcEngine = () => {
const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']); const { addLlm, loading } = useAddLlm();
const addLlm = useAddLlm();
const { const {
visible: volcAddingVisible, visible: volcAddingVisible,
hideModal: hideVolcAddingModal, hideModal: hideVolcAddingModal,
@ -195,8 +174,7 @@ export const useSubmitVolcEngine = () => {
}; };
export const useSubmitBedrock = () => { export const useSubmitBedrock = () => {
const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']); const { addLlm, loading } = useAddLlm();
const addLlm = useAddLlm();
const { const {
visible: bedrockAddingVisible, visible: bedrockAddingVisible,
hideModal: hideBedrockAddingModal, hideModal: hideBedrockAddingModal,
@ -223,7 +201,7 @@ export const useSubmitBedrock = () => {
}; };
export const useHandleDeleteLlm = (llmFactory: string) => { export const useHandleDeleteLlm = (llmFactory: string) => {
const deleteLlm = useDeleteLlm(); const { deleteLlm } = useDeleteLlm();
const showDeleteConfirm = useShowDeleteConfirm(); const showDeleteConfirm = useShowDeleteConfirm();
const handleDeleteLlm = (name: string) => () => { const handleDeleteLlm = (name: string) => () => {

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

@ -1,11 +1,7 @@
import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg'; import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
import SvgIcon from '@/components/svg-icon'; import SvgIcon from '@/components/svg-icon';
import { useSetModalState, useTranslate } from '@/hooks/common-hooks'; import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
import { import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
LlmItem,
useFetchLlmFactoryListOnMount,
useFetchMyLlmListOnMount,
} from '@/hooks/llm-hooks';
import { import {
CloseCircleOutlined, CloseCircleOutlined,
SettingOutlined, SettingOutlined,
@ -36,7 +32,6 @@ import BedrockModal from './bedrock-modal';
import { IconMap } from './constant'; import { IconMap } from './constant';
import { import {
useHandleDeleteLlm, useHandleDeleteLlm,
useSelectModelProvidersLoading,
useSubmitApiKey, useSubmitApiKey,
useSubmitBedrock, useSubmitBedrock,
useSubmitOllama, useSubmitOllama,
@ -132,9 +127,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
}; };
const UserSettingModel = () => { const UserSettingModel = () => {
const factoryList = useFetchLlmFactoryListOnMount(); const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
const llmList = useFetchMyLlmListOnMount();
const loading = useSelectModelProvidersLoading();
const { const {
saveApiKeyLoading, saveApiKeyLoading,
initialApiKey, initialApiKey,