frontend for model runtime (#1861)

Co-authored-by: Joel <iamjoel007@gmail.com>

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

@@ -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}`}

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

@@ -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 && (

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

@@ -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}