diff --git a/web/app/components/app/configuration/config-model/index.tsx b/web/app/components/app/configuration/config-model/index.tsx index e8cfc34821..006d352173 100644 --- a/web/app/components/app/configuration/config-model/index.tsx +++ b/web/app/components/app/configuration/config-model/index.tsx @@ -9,15 +9,16 @@ import ParamItem from './param-item' import Radio from '@/app/components/base/radio' import Panel from '@/app/components/base/panel' import type { CompletionParams } from '@/models/debug' -import { AppType } from '@/types/app' +import { AppType, ProviderType } from '@/types/app' import { TONE_LIST } from '@/config' import Toast from '@/app/components/base/toast' import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback' +import { formatNumber } from '@/utils/format' export type IConifgModelProps = { mode: string modelId: string - setModelId: (id: string) => void + setModelId: (id: string, provider: ProviderType) => void completionParams: CompletionParams onCompletionParamsChange: (newParams: CompletionParams) => void disabled: boolean @@ -29,18 +30,49 @@ const options = [ { id: 'gpt-3.5-turbo', name: 'gpt-3.5-turbo', type: AppType.chat }, { id: 'gpt-3.5-turbo-16k', name: 'gpt-3.5-turbo-16k', type: AppType.chat }, { id: 'gpt-4', name: 'gpt-4', type: AppType.chat }, // 8k version + { id: 'claude-instant-1', name: 'claude-instant-1', type: AppType.chat, provider: ProviderType.anthropic }, // set 30k + { id: 'claude-2', name: 'claude-2', type: AppType.chat, provider: ProviderType.anthropic }, // set 30k { id: 'gpt-3.5-turbo', name: 'gpt-3.5-turbo', type: AppType.completion }, { id: 'gpt-3.5-turbo-16k', name: 'gpt-3.5-turbo-16k', type: AppType.completion }, { id: 'text-davinci-003', name: 'text-davinci-003', type: AppType.completion }, { id: 'gpt-4', name: 'gpt-4', type: AppType.completion }, // 8k version + { id: 'claude-instant-1', name: 'claude-instant-1', type: AppType.completion, provider: ProviderType.anthropic }, // set 30k + { id: 'claude-2', name: 'claude-2', type: AppType.completion, provider: ProviderType.anthropic }, // set 30k ] -const ModelIcon = ({ className }: { className?: string }) => ( - - - - -) +const getMaxToken = (modelId: string) => { + if (['claude-instant-1', 'claude-2'].includes(modelId)) + return 30 * 1000 + + if (['gpt-4', 'gpt-3.5-turbo-16k'].includes(modelId)) + return 8000 + + return 4000 +} + +const ModelIcon = ({ provider, className }: { provider?: ProviderType; className?: string }) => { + if (provider === ProviderType.anthropic) { + return ( + + + + + + + + + + + + ) + } + return ( + + + + + ) +} const ConifgModel: FC = ({ mode, @@ -58,6 +90,7 @@ const ConifgModel: FC = ({ const [isShowConfig, { setFalse: hideConfig, toggle: toogleShowConfig }] = useBoolean(false) const [maxTokenSettingTipVisible, setMaxTokenSettingTipVisible] = useState(false) const configContentRef = React.useRef(null) + const currModel = options.find(item => item.id === modelId) useClickAway(() => { hideConfig() }, configContentRef) @@ -99,7 +132,7 @@ const ConifgModel: FC = ({ key: 'max_tokens', tip: t('common.model.params.maxTokenTip'), step: 100, - max: (modelId === 'gpt-4' || modelId === 'gpt-3.5-turbo-16k') ? 8000 : 4000, + max: getMaxToken(modelId), }, ] @@ -112,7 +145,7 @@ const ConifgModel: FC = ({ hideOption() }, triggerRef) - const handleSelectModel = (id: string) => { + const handleSelectModel = (id: string, provider = ProviderType.openai) => { return () => { if (id === 'gpt-4' && !canUseGPT4) { hideConfig() @@ -120,17 +153,18 @@ const ConifgModel: FC = ({ onShowUseGPT4Confirm() return } - if (id !== 'gpt-4' && completionParams.max_tokens > 4000) { + const nextSelectModelMaxToken = getMaxToken(id) + if (completionParams.max_tokens > nextSelectModelMaxToken) { Toast.notify({ type: 'warning', - message: t('common.model.params.setToCurrentModelMaxTokenTip'), + message: t('common.model.params.setToCurrentModelMaxTokenTip', { maxToken: formatNumber(nextSelectModelMaxToken) }), }) onCompletionParamsChange({ ...completionParams, - max_tokens: 4000, + max_tokens: nextSelectModelMaxToken, }) } - setModelId(id) + setModelId(id, provider) } } @@ -181,7 +215,7 @@ const ConifgModel: FC = ({ useEffect(() => { const max = params[4].max - if (completionParams.max_tokens > max * 2 / 3) + if (currModel?.provider !== ProviderType.anthropic && completionParams.max_tokens > max * 2 / 3) setMaxTokenSettingTipVisible(true) else setMaxTokenSettingTipVisible(false) @@ -193,7 +227,7 @@ const ConifgModel: FC = ({ className={cn('flex items-center border h-8 px-2.5 space-x-2 rounded-lg', disabled ? diabledStyle : ableStyle)} onClick={() => !disabled && toogleShowConfig()} > - +
{selectedModel.name}
{disabled ? : } @@ -220,15 +254,15 @@ const ConifgModel: FC = ({ {/* model selector */}
!selectModelDisabled && toogleOption()} className={cn(selectModelDisabled ? 'cursor-not-allowed' : 'cursor-pointer', 'flex items-center h-9 px-3 space-x-2 rounded-lg bg-gray-50 ')}> - +
{selectedModel?.name}
{!selectModelDisabled && }
{isShowOption && (
{availableModels.map(item => ( -
- +
+
{item.name}
))} diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx index 2b8f11a925..a7582bb2de 100644 --- a/web/app/components/app/configuration/debug/index.tsx +++ b/web/app/components/app/configuration/debug/index.tsx @@ -372,7 +372,7 @@ const Debug: FC = ({ {/* Chat */} {mode === AppType.chat && (
-
+
{ frequency_penalty: 1, // -2-2 }) const [modelConfig, doSetModelConfig] = useState({ - provider: 'openai', + provider: ProviderType.openai, model_id: 'gpt-3.5-turbo', configs: { prompt_template: '', @@ -84,8 +85,9 @@ const Configuration: FC = () => { doSetModelConfig(newModelConfig) } - const setModelId = (modelId: string) => { + const setModelId = (modelId: string, provider: ProviderType) => { const newModelConfig = produce(modelConfig, (draft: any) => { + draft.provider = provider draft.model_id = modelId }) setModelConfig(newModelConfig) diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx index 42fd9ccf35..99e3cf471a 100644 --- a/web/app/components/base/auto-height-textarea/index.tsx +++ b/web/app/components/base/auto-height-textarea/index.tsx @@ -19,6 +19,7 @@ const AutoHeightTextarea = forwardRef( { value, onChange, placeholder, className, minHeight = 36, maxHeight = 96, autoFocus, controlFocus, onKeyDown, onKeyUp }: IProps, outerRef: any, ) => { + // eslint-disable-next-line react-hooks/rules-of-hooks const ref = outerRef || useRef(null) const doFocus = () => { @@ -54,13 +55,20 @@ const AutoHeightTextarea = forwardRef( return (
-
+
10000) ? 140 : 130, + }}> {!value ? placeholder : value.replace(/\n$/, '\n ')}