fix: update model list (#1967)

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
 }

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)
         }
       },
     })

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<PopupItemProps> = ({
   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<PopupItemProps> = ({
         currentConfigurateMethod: ConfigurateMethodEnum.predefinedModel,
       },
       onSaveCallback: () => {
-        updateModelProvidersAndModelList()
+        updateModelProviders()
 
         const modelType = model.models[0].model_type
 
-        if (modelType !== ModelTypeEnum.textGeneration)
+        if (modelType)
           updateModelList(modelType)
       },
     })

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<CredentialPanelProps> = ({
 }) => {
   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<CredentialPanelProps> = ({
     })
     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 (
-    <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
-      <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
-        API-KEY
-        <Indicator color={customConfiged ? 'green' : 'gray'} />
-      </div>
-      <div className='flex items-center gap-0.5'>
-        <Button
-          className='grow px-0 h-6 bg-white text-xs font-medium rounded-md'
-          onClick={onSetup}
-        >
-          <Settings01 className='mr-1 w-3 h-3' />
-          {t('common.operation.setup')}
-        </Button>
-        {
-          systemConfig.enabled && customConfiged && (
+    <>
+      {
+        provider.provider_credential_schema && (
+          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
+            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
+              API-KEY
+              <Indicator color={customConfiged ? 'green' : 'gray'} />
+            </div>
+            <div className='flex items-center gap-0.5'>
+              <Button
+                className='grow px-0 h-6 bg-white text-xs font-medium rounded-md'
+                onClick={onSetup}
+              >
+                <Settings01 className='mr-1 w-3 h-3' />
+                {t('common.operation.setup')}
+              </Button>
+              {
+                systemConfig.enabled && customConfiged && (
+                  <PrioritySelector
+                    value={priorityUseType}
+                    onSelect={handleChangePriority}
+                  />
+                )
+              }
+            </div>
+            {
+              priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && (
+                <PriorityUseTip />
+              )
+            }
+          </div>
+        )
+      }
+      {
+        systemConfig.enabled && customConfiged && !provider.provider_credential_schema && (
+          <div className='ml-1'>
             <PrioritySelector
               value={priorityUseType}
               onSelect={handleChangePriority}
             />
-          )
-        }
-      </div>
-      {
-        priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && (
-          <PriorityUseTip />
+          </div>
         )
       }
-    </div>
+    </>
   )
 }
 

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<QuotaPanelProps> = ({
   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

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<ProviderCardProps> = ({
 }) => {
   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)