feat: support assistant frontend (#2139)

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

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -75,7 +75,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     <Modal
       isShow
       onClose={() => {}}
-      wrapperClassName='!z-30'
+      wrapperClassName='!z-[103]'
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
       <div className='mb-2 text-xl font-semibold text-gray-900'>

web/app/components/header/account-setting/api-based-extension-page/selector.tsx

@@ -70,7 +70,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
             )
         }
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[11]'>
+      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
         <div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
           <div className='p-1'>
             <div className='flex items-center justify-between px-3 pt-2 pb-1'>

web/app/components/header/account-setting/index.tsx

@@ -8,7 +8,6 @@ import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
 import LanguagePage from './language-page'
-import PluginPage from './plugin-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelProviderPage from './model-provider-page'
@@ -18,10 +17,9 @@ import CustomPage from '@/app/components/custom/custom-page'
 import Modal from '@/app/components/base/modal'
 import {
   Database03,
-  PuzzlePiece01,
   Webhooks,
 } from '@/app/components/base/icons/src/vender/line/development'
-import { Database03 as Database03Solid, PuzzlePiece01 as PuzzlePiece01Solid } from '@/app/components/base/icons/src/vender/solid/development'
+import { Database03 as Database03Solid } from '@/app/components/base/icons/src/vender/solid/development'
 import { User01, Users01 } from '@/app/components/base/icons/src/vender/line/users'
 import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components/base/icons/src/vender/solid/users'
 import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
@@ -89,12 +87,6 @@ export default function AccountSetting({
         icon: <Database03 className={iconClassName} />,
         activeIcon: <Database03Solid className={iconClassName} />,
       },
-      {
-        key: 'plugin',
-        name: t('common.settings.plugin'),
-        icon: <PuzzlePiece01 className={iconClassName} />,
-        activeIcon: <PuzzlePiece01Solid className={iconClassName} />,
-      },
       {
         key: 'api-based-extension',
         name: t('common.settings.apiBasedExtension'),
@@ -224,9 +216,8 @@ export default function AccountSetting({
             {activeMenu === 'language' && <LanguagePage />}
             {activeMenu === 'provider' && <ModelProviderPage />}
             {activeMenu === 'data-source' && <DataSourcePage />}
-            {activeMenu === 'plugin' && <PluginPage />}
-            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage /> }
-            {activeMenu === 'custom' && <CustomPage /> }
+            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
+            {activeMenu === 'custom' && <CustomPage />}
           </div>
         </div>
       </div>

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