From 853cdd741f2bec6cbaf8821750e95b5fc1bfa3df Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Mon, 8 Jan 2024 18:54:39 +0800 Subject: [PATCH] fix: update model list (#1967) --- .../model-provider-page/hooks.ts | 10 +-- .../model-provider-page/index.tsx | 17 +++- .../model-display/index.tsx | 0 .../model-selector/popup-item.tsx | 9 +- .../provider-added-card/credential-panel.tsx | 86 +++++++++++++------ .../provider-added-card/quota-panel.tsx | 6 +- .../provider-card/index.tsx | 6 +- 7 files changed, 87 insertions(+), 47 deletions(-) delete mode 100644 web/app/components/header/account-setting/model-provider-page/model-display/index.tsx diff --git a/web/app/components/header/account-setting/model-provider-page/hooks.ts b/web/app/components/header/account-setting/model-provider-page/hooks.ts index 1257400887..33207ad5e1 100644 --- a/web/app/components/header/account-setting/model-provider-page/hooks.ts +++ b/web/app/components/header/account-setting/model-provider-page/hooks.ts @@ -258,14 +258,12 @@ export const useModelProviders = () => { } } -export const useUpdateModelProvidersAndModelList = () => { +export const useUpdateModelProviders = () => { const { mutate } = useSWRConfig() - const updateModelList = useUpdateModelList() - const updateModelProvidersAndModelList = useCallback(() => { + const updateModelProviders = useCallback(() => { mutate('/workspaces/current/model-providers') - updateModelList(1) - }, [mutate, updateModelList]) + }, [mutate]) - return updateModelProvidersAndModelList + return updateModelProviders } diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx index b67bb05b21..fe6e8440df 100644 --- a/web/app/components/header/account-setting/model-provider-page/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/index.tsx @@ -13,7 +13,8 @@ import { } from './declarations' import { useDefaultModel, - useUpdateModelProvidersAndModelList, + useUpdateModelList, + useUpdateModelProviders, } from './hooks' import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback' import { useProviderContext } from '@/context/provider-context' @@ -23,7 +24,8 @@ import { useEventEmitterContextContext } from '@/context/event-emitter' const ModelProviderPage = () => { const { t } = useTranslation() const { eventEmitter } = useEventEmitterContextContext() - const updateModelProvidersAndModelList = useUpdateModelProvidersAndModelList() + const updateModelProviders = useUpdateModelProviders() + const updateModelList = useUpdateModelList() const { data: textGenerationDefaultModel } = useDefaultModel(1) const { data: embeddingsDefaultModel } = useDefaultModel(2) const { data: rerankDefaultModel } = useDefaultModel(3) @@ -57,13 +59,22 @@ const ModelProviderPage = () => { currentCustomConfigrationModelFixedFields: customConfigrationModelFixedFields, }, onSaveCallback: () => { - updateModelProvidersAndModelList() + updateModelProviders() + + if (configurateMethod === ConfigurateMethodEnum.predefinedModel) { + provider.supported_model_types.forEach((type) => { + updateModelList(type) + }) + } if (configurateMethod === ConfigurateMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) { eventEmitter?.emit({ type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST, payload: provider.provider, } as any) + + if (customConfigrationModelFixedFields?.__model_type) + updateModelList(customConfigrationModelFixedFields?.__model_type) } }, }) diff --git a/web/app/components/header/account-setting/model-provider-page/model-display/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-display/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx index a18c3292e7..e46f94b21f 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx @@ -8,7 +8,7 @@ import type { import { useLanguage, useUpdateModelList, - useUpdateModelProvidersAndModelList, + useUpdateModelProviders, } from '../hooks' import ModelIcon from '../model-icon' import ModelName from '../model-name' @@ -16,7 +16,6 @@ import { ConfigurateMethodEnum, MODEL_STATUS_TEXT, ModelStatusEnum, - ModelTypeEnum, } from '../declarations' import { Check } from '@/app/components/base/icons/src/vender/line/general' import { useModalContext } from '@/context/modal-context' @@ -38,7 +37,7 @@ const PopupItem: FC = ({ const { setShowModelModal } = useModalContext() const { modelProviders } = useProviderContext() const updateModelList = useUpdateModelList() - const updateModelProvidersAndModelList = useUpdateModelProvidersAndModelList() + const updateModelProviders = useUpdateModelProviders() const currentProvider = modelProviders.find(provider => provider.provider === model.provider)! const handleSelect = (provider: string, modelItem: ModelItem) => { if (modelItem.status !== ModelStatusEnum.active) @@ -53,11 +52,11 @@ const PopupItem: FC = ({ currentConfigurateMethod: ConfigurateMethodEnum.predefinedModel, }, onSaveCallback: () => { - updateModelProvidersAndModelList() + updateModelProviders() const modelType = model.models[0].model_type - if (modelType !== ModelTypeEnum.textGeneration) + if (modelType) updateModelList(modelType) }, }) diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx index 87752dba60..5ef51bb581 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx @@ -1,19 +1,24 @@ import type { FC } from 'react' import { useTranslation } from 'react-i18next' -import { useSWRConfig } from 'swr' import type { ModelProvider } from '../declarations' import { + ConfigurateMethodEnum, CustomConfigurationStatusEnum, PreferredProviderTypeEnum, } from '../declarations' -import { useUpdateModelList } from '../hooks' +import { + useUpdateModelList, + useUpdateModelProviders, +} from '../hooks' import PrioritySelector from './priority-selector' import PriorityUseTip from './priority-use-tip' +import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './index' import Indicator from '@/app/components/header/indicator' import { Settings01 } from '@/app/components/base/icons/src/vender/line/general' import Button from '@/app/components/base/button' import { changeModelProviderPriority } from '@/service/common' import { useToastContext } from '@/app/components/base/toast' +import { useEventEmitterContextContext } from '@/context/event-emitter' type CredentialPanelProps = { provider: ModelProvider @@ -25,12 +30,14 @@ const CredentialPanel: FC = ({ }) => { const { t } = useTranslation() const { notify } = useToastContext() - const { mutate } = useSWRConfig() + const { eventEmitter } = useEventEmitterContextContext() const updateModelList = useUpdateModelList() + const updateModelProviders = useUpdateModelProviders() const customConfig = provider.custom_configuration const systemConfig = provider.system_configuration const priorityUseType = provider.preferred_provider_type const customConfiged = customConfig.status === CustomConfigurationStatusEnum.active + const configurateMethods = provider.configurate_methods const handleChangePriority = async (key: PreferredProviderTypeEnum) => { const res = await changeModelProviderPriority({ @@ -41,40 +48,65 @@ const CredentialPanel: FC = ({ }) if (res.result === 'success') { notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) - mutate('/workspaces/current/model-providers') - updateModelList(1) + updateModelProviders() + + configurateMethods.forEach((method) => { + if (method === ConfigurateMethodEnum.predefinedModel) + provider.supported_model_types.forEach(modelType => updateModelList(modelType)) + }) + + eventEmitter?.emit({ + type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST, + payload: provider.provider, + } as any) } } return ( -
-
- API-KEY - -
-
- - { - systemConfig.enabled && customConfiged && ( + <> + { + provider.provider_credential_schema && ( +
+
+ API-KEY + +
+
+ + { + systemConfig.enabled && customConfiged && ( + + ) + } +
+ { + priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && ( + + ) + } +
+ ) + } + { + systemConfig.enabled && customConfiged && !provider.provider_credential_schema && ( +
- ) - } -
- { - priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && ( - +
) } -
+ ) } diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx index fe9cb5affd..8e60ae9c14 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx @@ -1,5 +1,4 @@ import type { FC } from 'react' -import { useSWRConfig } from 'swr' import { useTranslation } from 'react-i18next' import type { ModelProvider } from '../declarations' import { @@ -10,6 +9,7 @@ import { import { useAnthropicBuyQuota, useFreeQuota, + useUpdateModelProviders, } from '../hooks' import PriorityUseTip from './priority-use-tip' import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general' @@ -24,10 +24,10 @@ const QuotaPanel: FC = ({ provider, }) => { const { t } = useTranslation() - const { mutate } = useSWRConfig() + const updateModelProviders = useUpdateModelProviders() const handlePay = useAnthropicBuyQuota() const handleFreeQuotaSuccess = () => { - mutate('/workspaces/current/model-providers') + updateModelProviders() } const handleFreeQuota = useFreeQuota(handleFreeQuotaSuccess) const customConfig = provider.custom_configuration diff --git a/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx index 6c75ef4738..1f8c23da90 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx @@ -1,5 +1,4 @@ import type { FC } from 'react' -import { useSWRConfig } from 'swr' import { useTranslation } from 'react-i18next' import type { ModelProvider, @@ -14,6 +13,7 @@ import { useAnthropicBuyQuota, useFreeQuota, useLanguage, + useUpdateModelProviders, } from '../hooks' import ModelBadge from '../model-badge' import ProviderIcon from '../provider-icon' @@ -48,10 +48,10 @@ const ProviderCard: FC = ({ }) => { const { t } = useTranslation() const language = useLanguage() - const { mutate } = useSWRConfig() + const updateModelProviders = useUpdateModelProviders() const handlePay = useAnthropicBuyQuota() const handleFreeQuotaSuccess = () => { - mutate('/workspaces/current/model-providers') + updateModelProviders() } const handleFreeQuota = useFreeQuota(handleFreeQuotaSuccess) const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)