feat: support assistant frontend (#2139)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

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

@@ -7,6 +7,7 @@ export type TypeWithI18N<T = string> = {
 
 export enum FormTypeEnum {
   textInput = 'text-input',
+  textNumber = 'number-input',
   secretInput = 'secret-input',
   select = 'select',
   radio = 'radio',
@@ -92,10 +93,12 @@ export type CredentialFormSchemaBase = {
   type: FormTypeEnum
   required: boolean
   default?: string
+  tooltip?: TypeWithI18N
   show_on: FormShowOnObject[]
 }
 
 export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaNumberInput = CredentialFormSchemaBase & { min?: number; max?: number; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaSelect = CredentialFormSchemaBase & { options: FormOption[]; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaRadio = CredentialFormSchemaBase & { options: FormOption[] }
 export type CredentialFormSchemaSecretInput = CredentialFormSchemaBase & { placeholder?: TypeWithI18N }

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

@@ -1,8 +1,10 @@
 import { useState } from 'react'
 import type { FC } from 'react'
+import cn from 'classnames'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import type {
   CredentialFormSchema,
+  CredentialFormSchemaNumberInput,
   CredentialFormSchemaRadio,
   CredentialFormSchemaSecretInput,
   CredentialFormSchemaSelect,
@@ -13,7 +15,8 @@ import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
 import { SimpleSelect } from '@/app/components/base/select'
-
+import Tooltip from '@/app/components/base/tooltip-plus'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 type FormProps = {
   value: FormValue
   onChange: (val: FormValue) => void
@@ -22,6 +25,9 @@ type FormProps = {
   validatedSuccess?: boolean
   showOnVariableMap: Record<string, string[]>
   isEditMode: boolean
+  readonly?: boolean
+  inputClassName?: string
+  isShowDefaultValue?: boolean
 }
 
 const Form: FC<FormProps> = ({
@@ -32,6 +38,9 @@ const Form: FC<FormProps> = ({
   validatedSuccess,
   showOnVariableMap,
   isEditMode,
+  readonly,
+  inputClassName,
+  isShowDefaultValue = false,
 }) => {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
@@ -51,7 +60,19 @@ const Form: FC<FormProps> = ({
   }
 
   const renderField = (formSchema: CredentialFormSchema) => {
-    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput) {
+    const tooltip = formSchema.tooltip
+    const tooltipContent = (tooltip && (
+      <span className='ml-1 pt-1.5'>
+        <Tooltip popupContent={
+          // w-[100px] caused problem
+          <div className=''>
+            {tooltip[language]}
+          </div>
+        } >
+          <HelpCircle className='w-3 h-3  text-gray-500' />
+        </Tooltip>
+      </span>))
+    if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
       const {
         variable,
         label,
@@ -63,8 +84,7 @@ 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')
-
+      const disabed = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
@@ -74,14 +94,17 @@ const Form: FC<FormProps> = ({
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <Input
-            className={`${disabed && 'cursor-not-allowed opacity-60'}`}
-            value={value[variable] as string}
+            className={cn(inputClassName, `${disabed && 'cursor-not-allowed opacity-60'}`)}
+            value={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
             onChange={val => handleFormChange(variable, val)}
             validated={validatedSuccess}
             placeholder={placeholder?.[language]}
             disabled={disabed}
+            type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
+            {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
           />
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
@@ -111,6 +134,7 @@ const Form: FC<FormProps> = ({
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <div className={`grid grid-cols-${options?.length} gap-3`}>
             {
@@ -160,14 +184,18 @@ const Form: FC<FormProps> = ({
         <div key={variable} className='py-3'>
           <div className='py-2 text-sm text-gray-900'>
             {label[language]}
+
             {
               required && (
                 <span className='ml-1 text-red-500'>*</span>
               )
             }
+            {tooltipContent}
           </div>
           <SimpleSelect
-            defaultValue={value[variable] as string}
+            className={cn(inputClassName)}
+            disabled={readonly}
+            defaultValue={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
             items={options.filter((option) => {
               if (option.show_on.length)
                 return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)

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

@@ -9,6 +9,9 @@ type InputProps = {
   validated?: boolean
   className?: string
   disabled?: boolean
+  type?: string
+  min?: number
+  max?: number
 }
 const Input: FC<InputProps> = ({
   value,
@@ -18,7 +21,19 @@ const Input: FC<InputProps> = ({
   validated,
   className,
   disabled,
+  type = 'text',
+  min,
+  max,
 }) => {
+  const toLimit = (v: string) => {
+    if (min !== undefined && parseFloat(v) < min) {
+      onChange(`${min}`)
+      return
+    }
+
+    if (max !== undefined && parseFloat(v) > max)
+      onChange(`${max}`)
+  }
   return (
     <div className='relative'>
       <input
@@ -34,9 +49,13 @@ const Input: FC<InputProps> = ({
         `}
         placeholder={placeholder || ''}
         onChange={e => onChange(e.target.value)}
+        onBlur={e => toLimit(e.target.value)}
         onFocus={onFocus}
         value={value || ''}
         disabled={disabled}
+        type={type}
+        min={min}
+        max={max}
       />
       {
         validated && (