Merge branch 'feat/model-provider-based-on-runtime' into deploy/dev

langgenius · Dec 28, 2023 · 79b34de · 79b34de
2 parents f392b3c + 66253f4
commit 79b34de
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 54 deletions.
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
@@ -39,7 +39,7 @@ const Toast = ({
 
   return <div className={classNames(
     className,
-    'fixed rounded-md p-4 my-4 mx-8 z-50',
+    'fixed rounded-md p-4 my-4 mx-8 z-[9999]',
     'top-0',
     'right-0',
     type === 'success' ? 'bg-green-50' : '',

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -25,7 +25,6 @@ import {
   genModelTypeFormSchema,
   removeCredentials,
   saveCredentials,
-  validateCredentials,
 } from '../utils'
 import {
   useLanguage,
@@ -173,25 +172,6 @@ const ModelModal: FC<ModelModalProps> = ({
 
   const handleValueChange = (v: FormValue) => {
     setValue(v)
-
-    if (filteredRequiredFormSchemas.length) {
-      validate({
-        before: () => {
-          for (let i = 0; i < filteredRequiredFormSchemas.length; i++) {
-            if (!v[filteredRequiredFormSchemas[i].variable])
-              return false
-          }
-          return true
-        },
-        run: () => {
-          return validateCredentials(
-            providerFormSchemaPredefined,
-            provider.provider,
-            v,
-          )
-        },
-      })
-    }
   }
   const handleSave = async () => {
     try {
@@ -297,7 +277,7 @@ const ModelModal: FC<ModelModalProps> = ({
                     className='h-9 text-sm font-medium'
                     type='primary'
                     onClick={handleSave}
-                    disabled={loading || validatedStatusState.status !== ValidatedStatus.Success}
+                    disabled={loading || filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)}
                   >
                     {t('common.operation.save')}
                   </Button>

diff --git a/...app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/...app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -1,8 +1,9 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import type {
+  DefaultModel,
   FormValue,
   ModelParameterRule,
 } from '../declarations'
@@ -80,6 +81,32 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     })
   }
 
+  const handleChangeModel = ({ provider, model }: DefaultModel) => {
+    const targetProvider = textGenerationModelList.find(modelItem => modelItem.provider === provider)
+    const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model)
+    setModel({
+      modelId: model,
+      provider,
+      mode: targetModelItem?.model_properties.mode as string,
+      features: targetModelItem?.features || [],
+    })
+  }
+
+  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 }
@@ -159,16 +186,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                 <ModelSelector
                   defaultModel={{ provider, model: modelId }}
                   modelList={textGenerationModelList}
-                  onSelect={({ provider, model }) => {
-                    const targetProvider = textGenerationModelList.find(modelItem => modelItem.provider === provider)
-                    const targetModelItem = targetProvider?.models.find(modelItem => modelItem.model === model)
-                    setModel({
-                      modelId: model,
-                      provider,
-                      mode: targetModelItem?.model_properties.mode as string,
-                      features: targetModelItem?.features || [],
-                    })
-                  }}
+                  onSelect={handleChangeModel}
                 />
               </div>
               <div className='my-5 h-[1px] bg-gray-100' />

diff --git a/...nents/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/...nents/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
+import { isNullOrUndefined } from '../utils'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
@@ -27,23 +28,23 @@ const ParameterItem: FC<ParameterItemProps> = ({
 }) => {
   const language = useLanguage()
   const [localValue, setLocalValue] = useState(value)
-  const mergedValue = value === undefined ? localValue : value
+  const mergedValue = isNullOrUndefined(value) ? localValue : value
   const renderValue = mergedValue === undefined ? parameterRule.default : mergedValue
 
   const handleChange = (v: ParameterValue) => {
     setLocalValue(v)
-    if (value !== undefined && onChange)
+    if (!isNullOrUndefined(value) && onChange)
       onChange(v)
   }
 
   const handleNumberInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     let num = +e.target.value
 
-    if (parameterRule.max !== undefined && num > parameterRule.max)
-      num = parameterRule.max
+    if (!isNullOrUndefined(parameterRule.max) && num > parameterRule.max!)
+      num = parameterRule.max as number
 
-    if (parameterRule.min !== undefined && num < parameterRule.min)
-      num = parameterRule.min
+    if (!isNullOrUndefined(parameterRule.min) && num < parameterRule.min!)
+      num = parameterRule.min as number
 
     handleChange(num)
   }
@@ -72,9 +73,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (onSwitch) {
       let assignValue: ParameterValue = localValue
 
-      if (localValue === undefined) {
+      if (isNullOrUndefined(localValue)) {
         if (parameterRule.type === 'int' || parameterRule.type === 'float')
-          assignValue = parameterRule.default !== undefined ? parameterRule.default : 0
+          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : 0
 
         if (parameterRule.type === 'string' && !parameterRule.options?.length)
           assignValue = parameterRule.default || ''
@@ -83,21 +84,21 @@ const ParameterItem: FC<ParameterItemProps> = ({
           assignValue = parameterRule.options[0]
 
         if (parameterRule.type === 'boolean')
-          assignValue = parameterRule.default !== undefined ? parameterRule.default : false
+          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : false
 
         if (parameterRule.type === 'tag')
-          assignValue = parameterRule.default !== undefined ? parameterRule.default : []
+          assignValue = !isNullOrUndefined(parameterRule.default) ? parameterRule.default : []
       }
 
       onSwitch(checked, assignValue)
     }
   }
 
   const numberInputWithSlide = (parameterRule.type === 'int' || parameterRule.type === 'float')
-    && parameterRule.min !== undefined
-    && parameterRule.max !== undefined
+    && !isNullOrUndefined(parameterRule.min)
+    && !isNullOrUndefined(parameterRule.max)
   const numberInput = (parameterRule.type === 'int' || parameterRule.type === 'float')
-    && (parameterRule.min === undefined || parameterRule.max === undefined)
+    && (isNullOrUndefined(parameterRule.min) || isNullOrUndefined(parameterRule.max))
 
   return (
     <div className={`flex items-center justify-between ${className}`}>
@@ -122,9 +123,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
             )
           }
           {
-            !parameterRule.required && (
+            !parameterRule.required && parameterRule.name !== 'stop' && (
               <Switch
-                defaultValue={value !== undefined}
+                defaultValue={!isNullOrUndefined(value)}
                 onChange={handleSwitch}
                 size='md'
               />
@@ -144,7 +145,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           <div className='flex items-center'>
             <Slider
               className='w-[120px]'
-              value={renderValue === undefined ? 0 : +renderValue}
+              value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
               min={parameterRule.min}
               max={parameterRule.max}
               step={+`0.${parameterRule.precision || 0}`}
@@ -156,7 +157,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
               max={parameterRule.max}
               min={parameterRule.min}
               step={+`0.${parameterRule.precision || 0}`}
-              value={renderValue === undefined ? 0 : +renderValue}
+              value={isNullOrUndefined(renderValue) ? 0 : +renderValue!}
               onChange={handleNumberInputChange}
             />
           </div>
@@ -166,7 +167,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
         parameterRule.type === 'boolean' && (
           <Radio.Group
             className='w-[200px] flex items-center'
-            value={renderValue === undefined ? 1 : 0}
+            value={isNullOrUndefined(renderValue) ? 1 : 0}
             onChange={handleRadioChange}
           >
             <Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
@@ -177,8 +178,9 @@ const ParameterItem: FC<ParameterItemProps> = ({
       {
         numberInput && (
           <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={(renderValue === undefined ? '' : renderValue) as string}
+            value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
             onChange={handleNumberInputChange}
           />
         )
@@ -187,7 +189,7 @@ 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={(renderValue === undefined ? '' : renderValue) as string}
+            value={(isNullOrUndefined(renderValue) ? '' : renderValue) as string}
             onChange={handleStringInputChange}
           />
         )
@@ -207,7 +209,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
         parameterRule.type === 'tag' && (
           <div className='w-[200px]'>
             <TagInput
-              items={renderValue === undefined ? [] : (renderValue as string[])}
+              items={isNullOrUndefined(renderValue) ? [] : (renderValue as string[])}
               onChange={handleTagChange}
               customizedConfirmKey='Tab'
             />

diff --git a/web/app/components/header/account-setting/model-provider-page/utils.ts b/web/app/components/header/account-setting/model-provider-page/utils.ts
@@ -25,6 +25,10 @@ export const languageMaps = {
 
 export const DEFAULT_BACKGROUND_COLOR = '#F3F4F6'
 
+export const isNullOrUndefined = (value: any) => {
+  return value === undefined || value === null
+}
+
 export const validateCredentials = async (predefined: boolean, provider: string, v: FormValue) => {
   let body, url