From 871c0c034408d13acd4f52ffeb7dc23991b6df2f Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Tue, 2 Jan 2024 16:20:23 +0800 Subject: [PATCH] fix: model-parameter --- .../components/app/configuration/index.tsx | 1 - .../model-provider-page/declarations.ts | 8 +-- .../model-display/index.tsx | 0 .../model-provider-page/model-name/index.tsx | 4 +- .../model-parameter-modal/index.tsx | 61 +++++++++++++--- .../deprecated-model-trigger.tsx | 46 ++++++++++++ .../model-selector/feature-icon.tsx | 72 +++++++++---------- .../model-selector/index.tsx | 10 +++ .../model-selector/model-trigger.tsx | 27 +++++-- .../provider-added-card/model-list.tsx | 2 +- web/i18n/lang/common.en.ts | 1 + web/i18n/lang/common.zh.ts | 1 + 12 files changed, 176 insertions(+), 57 deletions(-) create mode 100644 web/app/components/header/account-setting/model-provider-page/model-display/index.tsx create mode 100644 web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx index 9b155cd543cdbf..4dc7059319730b 100644 --- a/web/app/components/app/configuration/index.tsx +++ b/web/app/components/app/configuration/index.tsx @@ -657,7 +657,6 @@ const Configuration: FC = () => { onCompletionParamsChange={(newParams: FormValue) => { setCompletionParams(newParams) }} - disabled={!hasSettedApiKey} />
diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts index aa7a0b2c1eeada..6bdded4d501ef2 100644 --- a/web/app/components/header/account-setting/model-provider-page/declarations.ts +++ b/web/app/components/header/account-setting/model-provider-page/declarations.ts @@ -61,16 +61,16 @@ export enum ModelStatusEnum { noPermission = 'no-permission', } -export const MODEL_STATUS_TEXT = { - [ModelStatusEnum.noConfigure]: { +export const MODEL_STATUS_TEXT: { [k: string]: TypeWithI18N } = { + 'no-configure': { en_US: 'No Configure', zh_Hans: '未配置凭据', }, - [ModelStatusEnum.quotaExceeded]: { + 'quota-exceeded': { en_US: 'Quota Exceeded', zh_Hans: '额度不足', }, - [ModelStatusEnum.noPermission]: { + 'no-permission': { en_US: 'No Permission', zh_Hans: '无使用权限', }, 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 new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx index 72d45bc060c29c..87f34c08f29caa 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx @@ -43,13 +43,13 @@ const ModelName: FC = ({ `} >
{modelItem.label[language]}
{ - showModelType && ( + showModelType && modelItem.model_type && ( {modelTypeFormat(modelItem.model_type)} diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx index 7631f1abfc7deb..8f32ea0ed1e770 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx @@ -7,10 +7,17 @@ import type { FormValue, ModelParameterRule, } from '../declarations' +import { + MODEL_STATUS_TEXT, + ModelStatusEnum, +} from '../declarations' import ModelIcon from '../model-icon' import ModelName from '../model-name' import ModelSelector from '../model-selector' -import { useTextGenerationCurrentProviderAndModelAndModelList } from '../hooks' +import { + useLanguage, + useTextGenerationCurrentProviderAndModelAndModelList, +} from '../hooks' import ParameterItem from './parameter-item' import type { ParameterValue } from './parameter-item' import { @@ -23,6 +30,8 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alert import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes' import { fetchModelParameterRules } from '@/service/common' import Loading from '@/app/components/base/loading' +import { useProviderContext } from '@/context/provider-context' +import TooltipPlus from '@/app/components/base/tooltip-plus' type ModelParameterModalProps = { isAdvancedMode: boolean @@ -32,7 +41,6 @@ type ModelParameterModalProps = { setModel: (model: { modelId: string; provider: string; mode?: string; features: string[] }) => void completionParams: FormValue onCompletionParamsChange: (newParams: FormValue) => void - disabled: boolean } const stopParameerRule: ModelParameterRule = { default: [], @@ -59,9 +67,10 @@ const ModelParameterModal: FC = ({ setModel, completionParams, onCompletionParamsChange, - disabled, }) => { const { t } = useTranslation() + const language = useLanguage() + const { hasSettedApiKey, modelProviders } = useProviderContext() const [open, setOpen] = useState(false) const { data: parameterRulesData, isLoading } = useSWR(`/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`, fetchModelParameterRules) const { @@ -72,6 +81,10 @@ const ModelParameterModal: FC = ({ { provider, model: modelId }, ) + const hasDeprecated = !currentProvider || !currentModel + const modelDisabled = currentModel?.status !== ModelStatusEnum.active + const disabled = !hasSettedApiKey || hasDeprecated || modelDisabled + const parameterRules = useMemo(() => { return parameterRulesData?.data || [] }, [parameterRulesData]) @@ -136,22 +149,48 @@ const ModelParameterModal: FC = ({ /> ) } + { + !currentProvider && ( + item.provider === provider)} + modelName={modelId} + /> + ) + } { currentModel && ( ) } + { + !currentModel && ( +
+ {modelId} +
+ ) + } { disabled ? ( - + + + ) : ( @@ -165,7 +204,7 @@ const ModelParameterModal: FC = ({ {t('common.modelProvider.modelAndParameters')} -
+
{t('common.modelProvider.model')} @@ -176,14 +215,18 @@ const ModelParameterModal: FC = ({ onSelect={handleChangeModel} />
-
+ { + !!parameterRules.length && ( +
+ ) + } { isLoading && ( ) } { - !isLoading && ( + !isLoading && !!parameterRules.length && ( [ ...parameterRules, ...(isAdvancedMode ? [stopParameerRule] : []), diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx new file mode 100644 index 00000000000000..4eb7c3ba0404f3 --- /dev/null +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx @@ -0,0 +1,46 @@ +import type { FC } from 'react' +import { useTranslation } from 'react-i18next' +import ModelIcon from '../model-icon' +import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback' +import { useProviderContext } from '@/context/provider-context' +import TooltipPlus from '@/app/components/base/tooltip-plus' + +type ModelTriggerProps = { + modelName: string + providerName: string + className?: string +} +const ModelTrigger: FC = ({ + modelName, + providerName, + className, +}) => { + const { t } = useTranslation() + const { modelProviders } = useProviderContext() + const currentProvider = modelProviders.find(provider => provider.provider === providerName) + + return ( +
+ +
+ {modelName} +
+
+ + + +
+
+ ) +} + +export default ModelTrigger diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx index c64b8ca736c837..bf4d15ee3afc6f 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx @@ -6,10 +6,10 @@ import { ModelFeatureTextEnum, } from '../declarations' import { - MagicBox, + // MagicBox, MagicEyes, - MagicWand, - Robot, + // MagicWand, + // Robot, } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices' import TooltipPlus from '@/app/components/base/tooltip-plus' @@ -23,41 +23,41 @@ const FeatureIcon: FC = ({ }) => { const { t } = useTranslation() - if (feature === ModelFeatureEnum.agentThought) { - return ( - - - - - - ) - } + // if (feature === ModelFeatureEnum.agentThought) { + // return ( + // + // + // + // + // + // ) + // } - if (feature === ModelFeatureEnum.toolCall) { - return ( - - - - - - ) - } + // if (feature === ModelFeatureEnum.toolCall) { + // return ( + // + // + // + // + // + // ) + // } - if (feature === ModelFeatureEnum.multiToolCall) { - return ( - - - - - - ) - } + // if (feature === ModelFeatureEnum.multiToolCall) { + // return ( + // + // + // + // + // + // ) + // } if (feature === ModelFeatureEnum.vision) { return ( diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx index e6f1efeb54842a..019ce000e0167f 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx @@ -8,6 +8,7 @@ import type { import { useCurrentProviderAndModel } from '../hooks' import ModelTrigger from './model-trigger' import EmptyTrigger from './empty-trigger' +import DeprecatedModelTrigger from './deprecated-model-trigger' import Popup from './popup' import { PortalToFollowElem, @@ -78,6 +79,15 @@ const ModelSelector: FC = ({ } { !currentModel && ( + + ) + } + { + !defaultModel && ( = ({ model, className, }) => { + const language = useLanguage() + return (
= ({ showFeatures />
- + { + model.status !== ModelStatusEnum.active + ? ( + + + + ) + : ( + + ) + }
) diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx index ad0994790cf7a4..e5c8a7aa6bd322 100644 --- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx +++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx @@ -78,9 +78,9 @@ const ModelList: FC = ({ className={` group flex items-center pl-2 pr-2.5 h-8 rounded-lg ${canCustomConfig && 'hover:bg-gray-50'} + ${model.deprecated && 'opacity-60'} `} > -