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

### 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)
2025-12-08 20:42:30 +08:00 · 2024-07-25 18:06:39 +08:00
parent a99d19bdea
commit 375f621405
10 changed files with 170 additions and 207 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts
@ -2,7 +2,7 @@ import {
  useFetchKnowledgeBaseConfiguration,
  useUpdateKnowledge,
 } from '@/hooks/knowledge-hooks';
-import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llm-hooks';
+import { useSelectLlmOptions } from '@/hooks/llm-hooks';
 import { useNavigateToDataset } from '@/hooks/route-hook';
 import {
  useFetchTenantInfo,
@ -17,7 +17,6 @@ import { Form, UploadFile } from 'antd';
 import { FormInstance } from 'antd/lib';
 import pick from 'lodash/pick';
 import { useCallback, useEffect } from 'react';
-import { LlmModelType } from '../../constant';

 export const useSubmitKnowledgeConfiguration = (form: FormInstance) => {
  const { saveKnowledgeConfiguration, loading } = useUpdateKnowledge();
@ -46,7 +45,6 @@ export const useFetchKnowledgeConfigurationOnMount = (form: FormInstance) => {

  useFetchTenantInfo();
  const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
-  useFetchLlmList(LlmModelType.Embedding);

  useEffect(() => {
    const fileList: UploadFile[] = getUploadFileListFromBase64(
--- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx
@ -1,12 +1,10 @@
+import Rerank from '@/components/rerank';
 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 { 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';

 type FieldType = {
@ -26,11 +24,6 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
    'testDocumentChunk',
  ]);
  const { t } = useTranslate('knowledgeDetails');
-  const fetchLlmList = useFetchLlmList();
-
-  useEffect(() => {
-    fetchLlmList();
-  }, [fetchLlmList]);

  const buttonDisabled =
    !question || (typeof question === 'string' && question.trim() === '');
--- a/web/src/pages/chat/chat-configuration-modal/index.tsx
+++ b/web/src/pages/chat/chat-configuration-modal/index.tsx
@ -4,7 +4,11 @@ import {
  ModelVariableType,
  settledModelVariableMap,
 } from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchModelId } from '@/hooks/logic-hooks';
 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 { SegmentedValue } from 'antd/es/segmented';
 import camelCase from 'lodash/camelCase';
@ -14,13 +18,6 @@ import AssistantSetting from './assistant-setting';
 import ModelSetting from './model-setting';
 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';

 const layout = {
@ -99,10 +96,6 @@ const ChatConfigurationModal = ({
    onOk(finalValues);
  };

-  const handleCancel = () => {
-    hideModal();
-  };
-
  const handleSegmentedChange = (val: SegmentedValue) => {
    setValue(val as ConfigurationSegmented);
  };
@ -112,8 +105,6 @@ const ChatConfigurationModal = ({
    form.resetFields();
  };

-  useFetchLlmModelOnVisible(visible);
-
  const title = (
    <Flex gap={16}>
      <ChatConfigurationAtom></ChatConfigurationAtom>
@ -153,7 +144,7 @@ const ChatConfigurationModal = ({
      width={688}
      open={visible}
      onOk={handleOk}
-      onCancel={handleCancel}
+      onCancel={hideModal}
      confirmLoading={loading}
      destroyOnClose
      afterClose={handleModalAfterClose}
--- a/web/src/pages/chat/index.tsx
+++ b/web/src/pages/chat/index.tsx
@ -353,15 +353,17 @@ const Chat = () => {
      </Flex>
      <Divider type={'vertical'} className={styles.divider}></Divider>
      <ChatContainer></ChatContainer>
-      <ChatConfigurationModal
-        visible={dialogEditVisible}
-        initialDialog={initialDialog}
-        showModal={showDialogEditModal}
-        hideModal={hideDialogEditModal}
-        loading={dialogSettingLoading}
-        onOk={onDialogEditOk}
-        clearDialog={clearDialog}
-      ></ChatConfigurationModal>
+      {dialogEditVisible && (
+        <ChatConfigurationModal
+          visible={dialogEditVisible}
+          initialDialog={initialDialog}
+          showModal={showDialogEditModal}
+          hideModal={hideDialogEditModal}
+          loading={dialogSettingLoading}
+          onOk={onDialogEditOk}
+          clearDialog={clearDialog}
+        ></ChatConfigurationModal>
+      )}
      <RenameModal
        visible={conversationRenameVisible}
        hideModal={hideConversationRenameModal}
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@ -1,6 +1,5 @@
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useFetchFlow, useResetFlow, useSetFlow } from '@/hooks/flow-hooks';
-import { useFetchLlmList } from '@/hooks/llm-hooks';
 import { IGraph } from '@/interfaces/database/flow';
 import { useIsFetching } from '@tanstack/react-query';
 import React, {
@ -283,8 +282,6 @@ export const useFetchDataOnMount = () => {

  useWatchGraphChange();

-  useFetchLlmList();
-
  useEffect(() => {
    refetch();
  }, [refetch]);
--- a/web/src/pages/user-setting/setting-model/hooks.ts
+++ b/web/src/pages/user-setting/setting-model/hooks.ts
@ -4,12 +4,10 @@ import {
  ISystemModelSettingSavingParams,
  useAddLlm,
  useDeleteLlm,
-  useFetchLlmList,
  useSaveApiKey,
  useSaveTenantInfo,
  useSelectLlmOptionsByModelType,
 } from '@/hooks/llm-hooks';
-import { useOneNamespaceEffectsLoading } from '@/hooks/store-hooks';
 import {
  useFetchTenantInfo,
  useSelectTenantInfo,
@ -24,7 +22,7 @@ export const useSubmitApiKey = () => {
  const [savingParams, setSavingParams] = useState<SavingParamsState>(
    {} as SavingParamsState,
  );
-  const saveApiKey = useSaveApiKey();
+  const { saveApiKey, loading } = useSaveApiKey();
  const {
    visible: apiKeyVisible,
    hideModal: hideApiKeyModal,
@ -53,10 +51,6 @@ export const useSubmitApiKey = () => {
    [showApiKeyModal, setSavingParams],
  );

-  const loading = useOneNamespaceEffectsLoading('settingModel', [
-    'set_api_key',
-  ]);
-
  return {
    saveApiKeyLoading: loading,
    initialApiKey: '',
@ -70,10 +64,8 @@ export const useSubmitApiKey = () => {

 export const useSubmitSystemModelSetting = () => {
  const systemSetting = useSelectTenantInfo();
-  const loading = useOneNamespaceEffectsLoading('settingModel', [
-    'set_tenant_info',
-  ]);
-  const saveSystemModelSetting = useSaveTenantInfo();
+  const { saveTenantInfo: saveSystemModelSetting, loading } =
+    useSaveTenantInfo();
  const {
    visible: systemSettingVisible,
    hideModal: hideSystemSettingModal,
@ -109,32 +101,20 @@ export const useSubmitSystemModelSetting = () => {
 export const useFetchSystemModelSettingOnMount = (visible: boolean) => {
  const systemSetting = useSelectTenantInfo();
  const allOptions = useSelectLlmOptionsByModelType();
-  const fetchLlmList = useFetchLlmList();
  const fetchTenantInfo = useFetchTenantInfo();

  useEffect(() => {
    if (visible) {
-      fetchLlmList();
      fetchTenantInfo();
    }
-  }, [fetchLlmList, fetchTenantInfo, visible]);
+  }, [fetchTenantInfo, visible]);

  return { systemSetting, allOptions };
 };

-export const useSelectModelProvidersLoading = () => {
-  const loading = useOneNamespaceEffectsLoading('settingModel', [
-    'my_llm',
-    'factories_list',
-  ]);
-
-  return loading;
-};
-
 export const useSubmitOllama = () => {
-  const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']);
  const [selectedLlmFactory, setSelectedLlmFactory] = useState<string>('');
-  const addLlm = useAddLlm();
+  const { addLlm, loading } = useAddLlm();
  const {
    visible: llmAddingVisible,
    hideModal: hideLlmAddingModal,
@ -167,8 +147,7 @@ export const useSubmitOllama = () => {
 };

 export const useSubmitVolcEngine = () => {
-  const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']);
-  const addLlm = useAddLlm();
+  const { addLlm, loading } = useAddLlm();
  const {
    visible: volcAddingVisible,
    hideModal: hideVolcAddingModal,
@ -195,8 +174,7 @@ export const useSubmitVolcEngine = () => {
 };

 export const useSubmitBedrock = () => {
-  const loading = useOneNamespaceEffectsLoading('settingModel', ['add_llm']);
-  const addLlm = useAddLlm();
+  const { addLlm, loading } = useAddLlm();
  const {
    visible: bedrockAddingVisible,
    hideModal: hideBedrockAddingModal,
@ -223,7 +201,7 @@ export const useSubmitBedrock = () => {
 };

 export const useHandleDeleteLlm = (llmFactory: string) => {
-  const deleteLlm = useDeleteLlm();
+  const { deleteLlm } = useDeleteLlm();
  const showDeleteConfirm = useShowDeleteConfirm();

  const handleDeleteLlm = (name: string) => () => {
--- a/web/src/pages/user-setting/setting-model/index.tsx
+++ b/web/src/pages/user-setting/setting-model/index.tsx
@ -1,11 +1,7 @@
 import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
 import SvgIcon from '@/components/svg-icon';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
-import {
-  LlmItem,
-  useFetchLlmFactoryListOnMount,
-  useFetchMyLlmListOnMount,
-} from '@/hooks/llm-hooks';
+import { LlmItem, useSelectLlmList } from '@/hooks/llm-hooks';
 import {
  CloseCircleOutlined,
  SettingOutlined,
@ -36,7 +32,6 @@ import BedrockModal from './bedrock-modal';
 import { IconMap } from './constant';
 import {
  useHandleDeleteLlm,
-  useSelectModelProvidersLoading,
  useSubmitApiKey,
  useSubmitBedrock,
  useSubmitOllama,
@ -132,9 +127,7 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
 };

 const UserSettingModel = () => {
-  const factoryList = useFetchLlmFactoryListOnMount();
-  const llmList = useFetchMyLlmListOnMount();
-  const loading = useSelectModelProvidersLoading();
+  const { factoryList, myLlmList: llmList, loading } = useSelectLlmList();
  const {
    saveApiKeyLoading,
    initialApiKey,