feat: add multi model credentials (#24451)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/base/form/components/base/base-field.tsx

@@ -30,7 +30,7 @@ const BaseField = ({
   inputClassName,
   formSchema,
   field,
-  disabled,
+  disabled: propsDisabled,
 }: BaseFieldProps) => {
   const renderI18nObject = useRenderI18nObject()
   const {
@@ -40,7 +40,9 @@ const BaseField = ({
     options,
     labelClassName: formLabelClassName,
     show_on = [],
+    disabled: formSchemaDisabled,
   } = formSchema
+  const disabled = propsDisabled || formSchemaDisabled
 
   const memorizedLabel = useMemo(() => {
     if (isValidElement(label))
@@ -72,7 +74,7 @@ const BaseField = ({
   })
   const memorizedOptions = useMemo(() => {
     return options?.filter((option) => {
-      if (!option.show_on?.length)
+      if (!option.show_on || option.show_on.length === 0)
         return true
 
       return option.show_on.every((condition) => {
@@ -85,7 +87,7 @@ const BaseField = ({
         value: option.value,
       }
     }) || []
-  }, [options, renderI18nObject])
+  }, [options, renderI18nObject, optionValues])
   const value = useStore(field.form.store, s => s.values[field.name])
   const values = useStore(field.form.store, (s) => {
     return show_on.reduce((acc, condition) => {
@@ -182,9 +184,10 @@ const BaseField = ({
                     className={cn(
                       'system-sm-regular hover:bg-components-option-card-option-hover-bg hover:border-components-option-card-option-hover-border flex h-8 flex-[1] grow cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg p-2 text-text-secondary',
                       value === option.value && 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary shadow-xs',
+                      disabled && 'cursor-not-allowed opacity-50',
                       inputClassName,
                     )}
-                    onClick={() => field.handleChange(option.value)}
+                    onClick={() => !disabled && field.handleChange(option.value)}
                   >
                     {
                       formSchema.showRadioUI && (

web/app/components/base/form/hooks/use-get-validators.ts

@@ -1,34 +1,52 @@
-import { useCallback } from 'react'
+import {
+  isValidElement,
+  useCallback,
+} from 'react'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { FormSchema } from '../types'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 
 export const useGetValidators = () => {
   const { t } = useTranslation()
+  const renderI18nObject = useRenderI18nObject()
+  const getLabel = useCallback((label: string | Record<string, string> | ReactNode) => {
+    if (isValidElement(label))
+      return ''
+
+    if (typeof label === 'string')
+      return label
+
+    if (typeof label === 'object' && label !== null)
+      return renderI18nObject(label as Record<string, string>)
+  }, [])
   const getValidators = useCallback((formSchema: FormSchema) => {
     const {
       name,
       validators,
       required,
+      label,
     } = formSchema
     let mergedValidators = validators
+    const memorizedLabel = getLabel(label)
     if (required && !validators) {
       mergedValidators = {
         onMount: ({ value }: any) => {
           if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel || name })
         },
         onChange: ({ value }: any) => {
           if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel || name })
         },
         onBlur: ({ value }: any) => {
           if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
+            return t('common.errorMsg.fieldRequired', { field: memorizedLabel })
         },
       }
     }
     return mergedValidators
-  }, [t])
+  }, [t, getLabel])
 
   return {
     getValidators,

web/app/components/base/form/types.ts

@@ -59,6 +59,7 @@ export type FormSchema = {
   labelClassName?: string
   validators?: AnyValidators
   showRadioUI?: boolean
+  disabled?: boolean
 }
 
 export type FormValues = Record<string, any>