estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

frontend for model runtime (#1861)

Browse Source 
Co-authored-by: Joel <iamjoel007@gmail.com>
This commit is contained in:
zxhlyh
2024-01-03 00:05:08 +08:00
committed by GitHub
parent d069c668f8
commit d70d61b1cb
29 changed files with 1442 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/header/account-setting/model-provider-page/declarations.ts
View File

@@ -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: '无使用权限',
},

8
web/app/components/header/account-setting/model-provider-page/index.tsx
View File

@@ -4,11 +4,13 @@ import SystemModelSelector from './system-model-selector'
import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
import ProviderCard from './provider-card'
import type {
ConfigurateMethodEnum,
CustomConfigrationModelFixedFields,
ModelProvider,
} from './declarations'
import { CustomConfigurationStatusEnum } from './declarations'
import {
ConfigurateMethodEnum,
CustomConfigurationStatusEnum,
} from './declarations'
import {
useDefaultModel,
useUpdateModelProvidersAndModelList,
@@ -57,7 +59,7 @@ const ModelProviderPage = () => {
onSaveCallback: () => {
updateModelProvidersAndModelList()
if (customConfigrationModelFixedFields && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
if (configurateMethod === ConfigurateMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
eventEmitter?.emit({
type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
payload: provider.provider,

0
web/app/components/header/account-setting/model-provider-page/model-display/index.tsx Normal file
View File

12
web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
View File

@@ -21,6 +21,7 @@ type FormProps = {
validating: boolean
validatedSuccess?: boolean
showOnVariableMap: Record<string, string[]>
isEditMode: boolean
}
const Form: FC<FormProps> = ({
@@ -30,11 +31,15 @@ const Form: FC<FormProps> = ({
validating,
validatedSuccess,
showOnVariableMap,
isEditMode,
}) => {
const language = useLanguage()
const [changeKey, setChangeKey] = useState('')
const handleFormChange = (key: string, val: string) => {
if (isEditMode && (key === '__model_type' || key === '__model_name'))
return
setChangeKey(key)
const shouldClearVariable: Record<string, string | undefined> = {}
if (showOnVariableMap[key]?.length) {
@@ -58,6 +63,8 @@ const Form: FC<FormProps> = ({
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
return null
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
@@ -69,10 +76,12 @@ const Form: FC<FormProps> = ({
}
</div>
<Input
className={`${disabed && 'cursor-not-allowed opacity-60'}`}
value={value[variable] as string}
onChange={val => handleFormChange(variable, val)}
validated={validatedSuccess}
placeholder={placeholder?.[language]}
disabled={disabed}
/>
{validating && changeKey === variable && <ValidatingTip />}
</div>
@@ -91,6 +100,8 @@ const Form: FC<FormProps> = ({
if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
return null
const disabed = isEditMode && (variable === '__model_type' || variable === '__model_name')
return (
<div key={variable} className='py-3'>
<div className='py-2 text-sm text-gray-900'>
@@ -113,6 +124,7 @@ const Form: FC<FormProps> = ({
className={`
flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
${disabed && '!cursor-not-allowed opacity-60'}
`}
onClick={() => handleFormChange(variable, option.value)}
key={`${variable}-${option.value}`}

6
web/app/components/header/account-setting/model-provider-page/model-modal/Input.tsx
View File

@@ -7,6 +7,8 @@ type InputProps = {
onFocus?: () => void
placeholder?: string
validated?: boolean
className?: string
disabled?: boolean
}
const Input: FC<InputProps> = ({
value,
@@ -14,6 +16,8 @@ const Input: FC<InputProps> = ({
onFocus,
placeholder,
validated,
className,
disabled,
}) => {
return (
<div className='relative'>
@@ -26,11 +30,13 @@ const Input: FC<InputProps> = ({
focus:bg-white focus:border-gray-300 focus:shadow-xs
placeholder:text-sm placeholder:text-gray-400
${validated && 'pr-[30px]'}
${className}
`}
placeholder={placeholder || ''}
onChange={e => onChange(e.target.value)}
onFocus={onFocus}
value={value || ''}
disabled={disabled}
/>
{
validated && (

3
web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
View File

@@ -239,6 +239,7 @@ const ModelModal: FC<ModelModalProps> = ({
validating={validating}
validatedSuccess={validatedStatusState.status === ValidatedStatus.Success}
showOnVariableMap={showOnVariableMap}
isEditMode={isEditMode}
/>
<div className='sticky bottom-0 flex justify-between items-center py-6 flex-wrap gap-y-2 bg-white'>
{
@@ -313,7 +314,7 @@ const ModelModal: FC<ModelModalProps> = ({
{
showConfirm && (
<ConfirmCommon
title='Are you sure?'
title={t('common.modelProvider.confirmDelete')}
isShow={showConfirm}
onCancel={() => setShowConfirm(false)}
onConfirm={handleRemove}

4
web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
View File

@@ -43,13 +43,13 @@ const ModelName: FC<ModelNameProps> = ({
`}
>
<div
className='mr-2 truncate'
className='mr-1 truncate'
title={modelItem.label[language]}
>
{modelItem.label[language]}
</div>
{
showModelType && (
showModelType && modelItem.model_type && (
<ModelBadge className={`mr-0.5 ${modelTypeClassName}`}>
{modelTypeFormat(modelItem.model_type)}
</ModelBadge>

104
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
View File

@@ -1,5 +1,5 @@
import type { FC } from 'react'
import { useEffect, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import type {
@@ -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: [],
@@ -42,7 +50,7 @@ const stopParameerRule: ModelParameterRule = {
},
label: {
en_US: 'Stop sequences',
zh_Hans: '停止序列 stop_sequences',
zh_Hans: '停止序列',
},
name: 'stop',
required: false,
@@ -59,9 +67,10 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
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,7 +81,13 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
{ provider, model: modelId },
)
const parameterRules = parameterRulesData?.data || []
const hasDeprecated = !currentProvider || !currentModel
const modelDisabled = currentModel?.status !== ModelStatusEnum.active
const disabled = !hasSettedApiKey || hasDeprecated || modelDisabled
const parameterRules = useMemo(() => {
return parameterRulesData?.data || []
}, [parameterRulesData])
const handleParamChange = (key: string, value: ParameterValue) => {
onCompletionParamsChange({
@@ -92,21 +107,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
})
}
const handleChangeParams = () => {
const newCompletionParams = parameterRules.reduce((acc, parameter) => {
if (parameter.default !== undefined)
acc[parameter.name] = parameter.default
return acc
}, {} as Record<string, any>)
onCompletionParamsChange(newCompletionParams)
}
useEffect(() => {
handleChangeParams()
}, [parameterRules])
const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
if (!value) {
const newCompletionParams = { ...completionParams }
@@ -122,6 +122,22 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
}
}
const handleInitialParams = () => {
if (parameterRules.length) {
const newCompletionParams = { ...completionParams }
Object.keys(newCompletionParams).forEach((key) => {
if (!parameterRules.find(item => item.name === key))
delete newCompletionParams[key]
})
onCompletionParamsChange(newCompletionParams)
}
}
useEffect(() => {
handleInitialParams()
}, [parameterRules])
return (
<PortalToFollowElem
open={open}
@@ -149,22 +165,48 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
/>
)
}
{
!currentProvider && (
<ModelIcon
className='mr-1.5 !w-5 !h-5'
provider={modelProviders.find(item => item.provider === provider)}
modelName={modelId}
/>
)
}
{
currentModel && (
<ModelName
className='mr-1.5 text-gray-900'
modelItem={currentModel}
showMode={isAdvancedMode}
showMode
modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
showFeatures={isAdvancedMode}
showFeatures
featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
/>
)
}
{
!currentModel && (
<div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
{modelId}
</div>
)
}
{
disabled
? (
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
<TooltipPlus
popupContent={
hasDeprecated
? t('common.modelProvider.deprecated')
: (modelDisabled && currentModel)
? MODEL_STATUS_TEXT[currentModel.status as string][language]
: ''
}
>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<SlidersH className='w-4 h-4 text-indigo-600' />
@@ -178,7 +220,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
<CubeOutline className='mr-2 w-4 h-4 text-primary-600' />
{t('common.modelProvider.modelAndParameters')}
</div>
<div className='px-10 pt-4 pb-8'>
<div className='max-h-[480px] px-10 pt-4 pb-8 overflow-y-auto'>
<div className='flex items-center justify-between h-8'>
<div className='text-sm font-medium text-gray-900'>
{t('common.modelProvider.model')}
@@ -189,14 +231,18 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
onSelect={handleChangeModel}
/>
</div>
<div className='my-5 h-[1px] bg-gray-100' />
{
isLoading && (
<Loading />
!!parameterRules.length && (
<div className='my-5 h-[1px] bg-gray-100' />
)
}
{
!isLoading && (
isLoading && (
<div className='mt-5'><Loading /></div>
)
}
{
!isLoading && !!parameterRules.length && (
[
...parameterRules,
...(isAdvancedMode ? [stopParameerRule] : []),

64
web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
View File

@@ -29,7 +29,37 @@ const ParameterItem: FC<ParameterItemProps> = ({
const language = useLanguage()
const [localValue, setLocalValue] = useState(value)
const mergedValue = isNullOrUndefined(value) ? localValue : value
const renderValue = mergedValue === undefined ? parameterRule.default : mergedValue
const getDefaultValue = () => {
let defaultValue: ParameterValue
if (parameterRule.type === 'int' || parameterRule.type === 'float') {
if (isNullOrUndefined(parameterRule.default)) {
if (parameterRule.min)
defaultValue = parameterRule.min
else
defaultValue = 0
}
else {
defaultValue = parameterRule.default
}
}
if (parameterRule.type === 'string' && !parameterRule.options?.length)
defaultValue = parameterRule.default || ''
if (parameterRule.type === 'string' && parameterRule.options?.length)
defaultValue = parameterRule.default || ''
if (parameterRule.type === 'boolean')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
if (parameterRule.type === 'tag')
defaultValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
return defaultValue
}
const renderValue = isNullOrUndefined(mergedValue) ? getDefaultValue() : mergedValue
const handleChange = (v: ParameterValue) => {
setLocalValue(v)
@@ -73,22 +103,8 @@ const ParameterItem: FC<ParameterItemProps> = ({
if (onSwitch) {
let assignValue: ParameterValue = localValue
if (isNullOrUndefined(localValue)) {
if (parameterRule.type === 'int' || parameterRule.type === 'float')
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : 0
if (parameterRule.type === 'string' && !parameterRule.options?.length)
assignValue = parameterRule.default || ''
if (parameterRule.type === 'string' && parameterRule.options?.length)
assignValue = parameterRule.options[0]
if (parameterRule.type === 'boolean')
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
if (parameterRule.type === 'tag')
assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
}
if (isNullOrUndefined(localValue))
assignValue = getDefaultValue()
onSwitch(checked, assignValue)
}
@@ -145,7 +161,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
<div className='flex items-center'>
<Slider
className='w-[120px]'
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
value={renderValue as number}
min={parameterRule.min}
max={parameterRule.max}
step={+`0.${parameterRule.precision || 0}`}
@@ -157,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
max={parameterRule.max}
min={parameterRule.min}
step={+`0.${parameterRule.precision || 0}`}
value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
value={renderValue as string}
onChange={handleNumberInputChange}
/>
</div>
@@ -167,7 +183,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
parameterRule.type === 'boolean' && (
<Radio.Group
className='w-[200px] flex items-center'
value={isNullOrUndefined(renderValue) ? 1 : 0}
value={renderValue ? 1 : 0}
onChange={handleRadioChange}
>
<Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
@@ -180,7 +196,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
<input
type='number'
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
value={renderValue as string}
onChange={handleNumberInputChange}
/>
)
@@ -189,13 +205,13 @@ const ParameterItem: FC<ParameterItemProps> = ({
parameterRule.type === 'string' && !parameterRule.options?.length && (
<input
className='flex items-center px-3 w-[200px] h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
value={renderValue as string}
onChange={handleStringInputChange}
/>
)
}
{
parameterRule.type === 'string' && parameterRule?.options?.length && (
parameterRule.type === 'string' && !!parameterRule?.options?.length && (
<SimpleSelect
className='!py-0'
wrapperClassName='!w-[200px] !h-8'
@@ -209,7 +225,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
parameterRule.type === 'tag' && (
<div className='w-[200px]'>
<TagInput
items={isNullOrUndefined(renderValue) ? [] : (renderValue as string[])}
items={renderValue as string[]}
onChange={handleTagChange}
customizedConfirmKey='Tab'
/>

46
web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx Normal file
View File

@@ -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<ModelTriggerProps> = ({
modelName,
providerName,
className,
}) => {
const { t } = useTranslation()
const { modelProviders } = useProviderContext()
const currentProvider = modelProviders.find(provider => provider.provider === providerName)
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
${className}
`}
>
<ModelIcon
className='shrink-0 mr-1.5'
provider={currentProvider}
modelName={modelName}
/>
<div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
{modelName}
</div>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<TooltipPlus popupContent={t('common.modelProvider.deprecated')}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
</div>
</div>
)
}
export default ModelTrigger

72
web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
View File

@@ -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<FeatureIconProps> = ({
}) => {
const { t } = useTranslation()
if (feature === ModelFeatureEnum.agentThought) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<Robot className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.agentThought) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.agentThought })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <Robot className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.toolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicWand className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.toolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.toolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicWand className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.multiToolCall) {
return (
<TooltipPlus
popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
>
<ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
<MagicBox className='w-3 h-3' />
</ModelBadge>
</TooltipPlus>
)
}
// if (feature === ModelFeatureEnum.multiToolCall) {
// return (
// <TooltipPlus
// popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.multiToolCall })}
// >
// <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
// <MagicBox className='w-3 h-3' />
// </ModelBadge>
// </TooltipPlus>
// )
// }
if (feature === ModelFeatureEnum.vision) {
return (

12
web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
View File

@@ -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,
@@ -77,7 +78,16 @@ const ModelSelector: FC<ModelSelectorProps> = ({
)
}
{
!currentModel && (
!currentModel && defaultModel && (
<DeprecatedModelTrigger
modelName={defaultModel?.model || ''}
providerName={defaultModel?.provider || ''}
className={triggerClassName}
/>
)
}
{
!defaultModel && (
<EmptyTrigger
open={open}
className={triggerClassName}

27
web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
View File

@@ -3,10 +3,16 @@ import type {
Model,
ModelItem,
} from '../declarations'
import {
MODEL_STATUS_TEXT,
ModelStatusEnum,
} from '../declarations'
import { useLanguage } from '../hooks'
import ModelIcon from '../model-icon'
import ModelName from '../model-name'
// import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
import TooltipPlus from '@/app/components/base/tooltip-plus'
type ModelTriggerProps = {
open: boolean
@@ -20,12 +26,15 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
model,
className,
}) => {
const language = useLanguage()
return (
<div
className={`
group flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
${className}
${open && '!bg-gray-200'}
${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
`}
>
<ModelIcon
@@ -40,9 +49,19 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
showFeatures
/>
<div className='shrink-0 flex items-center justify-center w-4 h-4'>
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
{
model.status !== ModelStatusEnum.active
? (
<TooltipPlus popupContent={MODEL_STATUS_TEXT[model.status][language]}>
<AlertTriangle className='w-4 h-4 text-[#F79009]' />
</TooltipPlus>
)
: (
<ChevronDown
className='w-3.5 h-3.5 text-gray-500'
/>
)
}
</div>
</div>
)

2
web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
View File

@@ -102,7 +102,7 @@ const PopupItem: FC<PopupItemProps> = ({
showFeatures
/>
{
defaultModel?.model === modelItem.model && (
defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
<Check className='shrink-0 w-4 h-4 text-primary-600' />
)
}

3
web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
View File

@@ -21,6 +21,7 @@ import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/a
import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
import { fetchModelProviderModelList } from '@/service/common'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import { IS_CE_EDITION } from '@/config'
export const UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST = 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST'
type ProviderAddedCardProps = {
@@ -40,7 +41,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)
const systemConfig = provider.system_configuration
const hasModelList = fetched && !!modelList.length
const showQuota = systemConfig.enabled || ['minimax', 'spark', 'zhipuai', 'anthropic'].includes(provider.provider)
const showQuota = systemConfig.enabled && ['minimax', 'spark', 'zhipuai', 'anthropic', 'openai'].includes(provider.provider) && !IS_CE_EDITION
const getModelList = async (providerName: string) => {
if (loading)

2
web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
View File

@@ -78,9 +78,9 @@ const ModelList: FC<ModelListProps> = ({
className={`
group flex items-center pl-2 pr-2.5 h-8 rounded-lg
${canCustomConfig && 'hover:bg-gray-50'}
${model.deprecated && 'opacity-60'}
`}
>
<div className='shrink-0 mr-2' style={{ background: provider.icon_small[language] }} />
<ModelIcon
className='shrink-0 mr-2'
provider={provider}

10
web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
View File

@@ -14,6 +14,7 @@ import {
import PriorityUseTip from './priority-use-tip'
import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
import Button from '@/app/components/base/button'
import TooltipPlus from '@/app/components/base/tooltip-plus'
type QuotaPanelProps = {
provider: ModelProvider
@@ -32,12 +33,19 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
const priorityUseType = provider.preferred_provider_type
const systemConfig = provider.system_configuration
const currentQuota = systemConfig.enabled && systemConfig.quota_configurations.find(item => item.quota_type === systemConfig.current_quota_type)
const openaiOrAnthropic = ['openai', 'anthropic'].includes(provider.provider)
return (
<div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
<div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
{t('common.modelProvider.quota')}
<InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
<TooltipPlus popupContent={
openaiOrAnthropic
? t('common.modelProvider.card.tip')
: t('common.modelProvider.quotaTip')
}>
<InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
</TooltipPlus>
</div>
{
currentQuota && (

5
web/app/components/header/account-setting/model-provider-page/provider-card/index.tsx
View File

@@ -21,6 +21,7 @@ import s from './index.module.css'
import { Plus, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
import { CoinsStacked01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
import Button from '@/app/components/base/button'
import { IS_CE_EDITION } from '@/config'
type ProviderCardProps = {
provider: ModelProvider
@@ -54,7 +55,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
}
const handleFreeQuota = useFreeQuota(handleFreeQuotaSuccess)
const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)
const canGetFreeQuota = ['mininmax', 'spark', 'zhipuai'].includes(provider.provider)
const canGetFreeQuota = ['mininmax', 'spark', 'zhipuai'].includes(provider.provider) && !IS_CE_EDITION
return (
<div
@@ -135,7 +136,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
})
}
{
provider.provider === 'anthropic' && (
provider.provider === 'anthropic' && !IS_CE_EDITION && (
<Button
className='h-7 text-xs text-gray-700'
onClick={handlePay}