replace form input

2024-08-09 12:34:01 +08:00 · 2024-08-09 12:34:01 +08:00 · baed068231
parent 42f5334ae4
commit baed068231
21 changed files with 99 additions and 87 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@ -2,6 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'

 type Props = {
  className?: string
@ -28,11 +29,10 @@ const Field: FC<Props> = ({
        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
        {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
      </div>
-      <input
-        type='text'
+      <Input
        value={value}
        onChange={e => onChange(e.target.value)}
-        className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
+        className='h-9'
        placeholder={placeholder}
      />
    </div>
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@ -8,6 +8,7 @@ import ConfigSelect from '../config-select'
 import ConfigString from '../config-string'
 import SelectTypeItem from '../select-type-item'
 import Field from './field'
+import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import { checkKeys, getNewVarInWorkflow } from '@/utils/var'
 import ConfigContext from '@/context/debug-configuration'
@ -29,8 +30,6 @@ export type IConfigModalProps = {
  supportFile?: boolean
 }

-const inputClassName = 'w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-
 const ConfigModal: FC<IConfigModalProps> = ({
  isCreate,
  payload,
@ -147,9 +146,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
          </Field>

          <Field title={t('appDebug.variableConig.varName')}>
-            <input
-              type='text'
-              className={inputClassName}
+            <Input
+              className='h-9'
              value={variable}
              onChange={e => handlePayloadChange('variable')(e.target.value)}
              onBlur={handleVarKeyBlur}
@ -157,9 +155,8 @@ const ConfigModal: FC<IConfigModalProps> = ({
            />
          </Field>
          <Field title={t('appDebug.variableConig.labelName')}>
-            <input
-              type='text'
-              className={inputClassName}
+            <Input
+              className='h-9'
              value={label as string}
              onChange={e => handlePayloadChange('label')(e.target.value)}
              placeholder={t('appDebug.variableConig.inputPlaceholder')!}
--- a/web/app/components/app/configuration/config-var/config-string/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-string/index.tsx
@ -1,6 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
+import Input from '@/app/components/base/input'

 export type IConfigStringProps = {
  value: number | undefined
@ -21,7 +22,7 @@ const ConfigString: FC<IConfigStringProps> = ({

  return (
    <div>
-      <input
+      <Input
        type="number"
        max={maxLength}
        min={1}
@ -36,7 +37,7 @@ const ConfigString: FC<IConfigStringProps> = ({

          onChange(value)
        }}
-        className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+        className='h-9'
      />
    </div>
  )
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@ -18,6 +18,7 @@ import cn from 'classnames'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { generateRule } from '@/service/debug'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
@ -212,7 +213,11 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
          <div className='mt-6'>
            <div className='text-[0px]'>
              <div className='mb-2 leading-5 text-sm font-medium text-gray-900'>{t('appDebug.generate.instruction')}</div>
-              <textarea className="w-full h-[200px] overflow-y-auto px-3 py-2 text-sm bg-gray-50 rounded-lg" placeholder={t('appDebug.generate.instructionPlaceHolder') as string} value={instruction} onChange={e => setInstruction(e.target.value)} />
+              <Textarea
+                className="h-[200px] resize-none"
+                placeholder={t('appDebug.generate.instructionPlaceHolder') as string}
+                value={instruction}
+                onChange={e => setInstruction(e.target.value)} />
            </div>

            <div className='mt-5 flex justify-end'>
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@ -8,6 +8,7 @@ import { BookOpenIcon } from '@heroicons/react/24/outline'
 import cn from '@/utils/classnames'
 import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import type { DataSet } from '@/models/datasets'
 import { useToastContext } from '@/app/components/base/toast'
@ -181,10 +182,10 @@ const SettingsModal: FC<SettingsModalProps> = ({
          <div className={labelClass}>
            {t('datasetSettings.form.name')}
          </div>
-          <input
+          <Input
            value={localeCurrentDataset.name}
            onChange={e => handleValueChange('name', e.target.value)}
-            className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+            className='block h-9'
            placeholder={t('datasetSettings.form.namePlaceholder') || ''}
          />
        </div>
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@ -17,6 +17,7 @@ import type { AppMode } from '@/types/app'
 import { createApp } from '@/service/apps'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
@ -271,11 +272,11 @@ const CreateAppModal = ({ show, onSuccess, onClose }: CreateAppDialogProps) => {
        <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div>
        <div className='flex items-center justify-between space-x-2'>
          <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-          <input
+          <Input
            value={name}
            onChange={e => setName(e.target.value)}
            placeholder={t('app.newApp.appNamePlaceholder') || ''}
-            className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+            className='grow h-10'
          />
        </div>
        {showEmojiPicker && <EmojiPicker
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Uploader from './uploader'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast'
 import {
@ -171,9 +172,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
          currentTab === CreateFromDSLModalTab.FROM_URL && (
            <div>
              <div className='mb-1 system-md-semibold leading6'>DSL URL</div>
-              <input
+              <Input
                placeholder={t('app.importFromDSLUrlPlaceholder') || ''}
-                className='px-2 w-full h-8 border border-components-input-border-active bg-components-input-bg-active rounded-lg outline-none appearance-none placeholder:text-components-input-text-placeholder system-sm-regular'
                value={dslUrlValue}
                onChange={e => setDslUrlValue(e.target.value)}
              />
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@ -5,6 +5,7 @@ import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Toast from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import EmojiPicker from '@/app/components/base/emoji-picker'
@ -66,10 +67,10 @@ const DuplicateAppModal = ({
          <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
          <div className='flex items-center justify-between space-x-2'>
            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-            <input
+            <Input
              value={name}
              onChange={e => setName(e.target.value)}
-              className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow'
+              className='h-10'
            />
          </div>
          {isAppsFull && <AppsFull loc='app-duplicate-create' />}
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@ -7,6 +7,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import AppIcon from '@/app/components/base/app-icon'
 import { SimpleSelect } from '@/app/components/base/select'
@ -177,7 +178,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
            icon={emoji.icon}
            background={emoji.icon_background}
          />
-          <input className={`flex-grow rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+          <Input
+            className='grow h-10'
            value={inputInfo.title}
            onChange={onChange('title')}
            placeholder={t('app.appNamePlaceholder') || ''}
@ -207,7 +209,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
        </>}
        {isChat && <> <div className={`mt-8 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.chatColorTheme`)}</div>
          <p className={`mt-1 ${s.settingsTip} text-gray-500`}>{t(`${prefixSettings}.chatColorThemeDesc`)}</p>
-          <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+          <Input
+            className='mt-2 h-10'
            value={inputInfo.chatColorTheme ?? ''}
            onChange={onChange('chatColorTheme')}
            placeholder= 'E.g #A020F0'
@ -225,7 +228,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
        {isShowMore && <>
          <hr className='w-full mt-6' />
          <div className={`mt-6 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.more.copyright`)}</div>
-          <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+          <Input
+            className='mt-2 h-10'
            value={inputInfo.copyright}
            onChange={onChange('copyright')}
            placeholder={t(`${prefixSettings}.more.copyRightPlaceholder`) as string}
@ -237,14 +241,16 @@ const SettingsModal: FC<ISettingsModalProps> = ({
              components={{ privacyPolicyLink: <Link href={'https://docs.dify.ai/user-agreement/privacy-policy'} target='_blank' rel='noopener noreferrer' className='text-primary-600' /> }}
            />
          </p>
-          <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+          <Input
+            className='mt-2 h-10'
            value={inputInfo.privacyPolicy}
            onChange={onChange('privacyPolicy')}
            placeholder={t(`${prefixSettings}.more.privacyPolicyPlaceholder`) as string}
          />
          <div className={`mt-8 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.more.customDisclaimer`)}</div>
          <p className={`mt-1 ${s.settingsTip} text-gray-500`}>{t(`${prefixSettings}.more.customDisclaimerTip`)}</p>
-          <input className={`w-full mt-2 rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
+          <Input
+            className='mt-2 h-10'
            value={inputInfo.customDisclaimer}
            onChange={onChange('customDisclaimer')}
            placeholder={t(`${prefixSettings}.more.customDisclaimerPlaceholder`) as string}
--- a/web/app/components/app/overview/settings/style.module.css
+++ b/web/app/components/app/overview/settings/style.module.css
@ -15,9 +15,4 @@
 .policy {
 	font-size: 0.75rem;
 	line-height: 1.125rem;
-}
-
-.projectName {
-	font-size: 0.875rem;
-	line-height: 2.5rem;
 }
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@ -7,7 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
+import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
@ -107,11 +109,11 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
          <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.switchLabel')}</div>
          <div className='flex items-center justify-between space-x-2'>
            <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-            <input
+            <Input
              value={name}
              onChange={e => setName(e.target.value)}
              placeholder={t('app.newApp.appNamePlaceholder') || ''}
-              className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+              className='grow h-10'
            />
          </div>
          {showEmojiPicker && <EmojiPicker
@ -128,8 +130,8 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
        {isAppsFull && <AppsFull loc='app-switch' />}
        <div className='pt-6 flex justify-between items-center'>
          <div className='flex items-center'>
-            <input id="removeOriginal" type="checkbox" checked={removeOriginal} onChange={() => setRemoveOriginal(!removeOriginal)} className="w-4 h-4 rounded border-gray-300 text-blue-700 cursor-pointer focus:ring-blue-700" />
-            <label htmlFor="removeOriginal" className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer">{t('app.removeOriginal')}</label>
+            <Checkbox className='shrink-0' checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
+            <div className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
          </div>
          <div className='flex items-center'>
            <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@ -1,19 +1,16 @@
 /* eslint-disable multiline-ternary */
 'use client'
-import type { ChangeEvent, FC } from 'react'
+import type { FC } from 'react'
 import React, { useState } from 'react'
 import data from '@emoji-mart/data'
 import type { Emoji, EmojiMartData } from '@emoji-mart/data'
 import { SearchIndex, init } from 'emoji-mart'
-import {
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
-
+import Input from '@/app/components/base/input'
 import Modal from '@/app/components/base/modal'

 declare global {
@ -81,6 +78,7 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({

  const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
  const [isSearching, setIsSearching] = useState(false)
+  const [inputValue, setInputValue] = useState('')

  return isModal ? <Modal
    onClose={() => { }}
@ -91,15 +89,12 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
  >
    <div className='flex flex-col items-center w-full p-3'>
      <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-          <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
-        </div>
-        <input
-          type="search"
-          id="search"
-          className='block w-full h-10 px-3 pl-10 text-sm font-normal bg-gray-100 rounded-lg'
-          placeholder="Search emojis..."
-          onChange={async (e: ChangeEvent<HTMLInputElement>) => {
+        <Input
+          showLeftIcon
+          showClearIcon
+          value={inputValue}
+          onChange={async (e) => {
+            setInputValue(e.target.value)
            if (e.target.value === '') {
              setIsSearching(false)
            }
@ -109,6 +104,10 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
              setSearchedEmojis(emojis)
            }
          }}
+          onClear={() => {
+            setInputValue('')
+            setIsSearching(false)
+          }}
        />
      </div>
    </div>
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@ -21,7 +21,6 @@ export const inputVariants = cva(
 )

 export type InputProps = {
-  value: string
  showLeftIcon?: boolean
  showClearIcon?: boolean
  onClear?: () => void
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@ -24,6 +24,7 @@ import {
  fetchDefaultProcessRule,
 } from '@/service/datasets'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Loading from '@/app/components/base/loading'
 import FloatRightContainer from '@/app/components/base/float-right-container'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
@ -603,9 +604,9 @@ const StepTwo = ({
                  <div className={s.formRow}>
                    <div className='w-full'>
                      <div className={s.label}>{t('datasetCreation.stepTwo.separator')}</div>
-                      <input
+                      <Input
                        type="text"
-                        className={s.input}
+                        className='h-9'
                        placeholder={t('datasetCreation.stepTwo.separatorPlaceholder') || ''} value={segmentIdentifier}
                        onChange={e => setSegmentIdentifier(e.target.value)}
                      />
@ -614,9 +615,9 @@ const StepTwo = ({
                  <div className={s.formRow}>
                    <div className='w-full'>
                      <div className={s.label}>{t('datasetCreation.stepTwo.maxLength')}</div>
-                      <input
+                      <Input
                        type="number"
-                        className={s.input}
+                        className='h-9'
                        placeholder={t('datasetCreation.stepTwo.maxLength') || ''}
                        value={max}
                        min={1}
@ -636,9 +637,9 @@ const StepTwo = ({
                          <RiQuestionLine className='ml-1 w-3.5 h-3.5 text-gray-400' />
                        </TooltipPlus>
                      </div>
-                      <input
+                      <Input
                        type="number"
-                        className={s.input}
+                        className='h-9'
                        placeholder={t('datasetCreation.stepTwo.overlap') || ''}
                        value={overlap}
                        min={1}
--- a/web/app/components/datasets/documents/rename-modal.tsx
+++ b/web/app/components/datasets/documents/rename-modal.tsx
@ -6,6 +6,7 @@ import { useBoolean } from 'ahooks'
 import Toast from '../../base/toast'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import { renameDocumentName } from '@/service/datasets'

 type Props = {
@ -59,7 +60,8 @@ const RenameModal: FC<Props> = ({
      onClose={onClose}
    >
      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
+      <Input
+        className='mt-2 h-10'
        value={newName}
        onChange={e => setNewName(e.target.value)}
      />
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@ -8,6 +8,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast'
@ -70,10 +71,10 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
            {t('datasetSettings.form.name')}
          </div>
-          <input
+          <Input
            value={name}
            onChange={e => setName(e.target.value)}
-            className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+            className='h-9'
            placeholder={t('datasetSettings.form.namePlaceholder') || ''}
          />
        </div>
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@ -8,11 +8,11 @@ import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
 import PermissionSelector from '../permission-selector'
 import IndexMethodRadio from '../index-method-radio'
-import cn from '@/utils/classnames'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import { updateDatasetSetting } from '@/service/datasets'
 import type { DataSetListResponse } from '@/models/datasets'
@ -36,9 +36,6 @@ const rowClass = `
 const labelClass = `
  flex items-center w-[168px] h-9
 `
-const inputClass = `
-  w-full max-w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
-`

 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
  if (!pageIndex || previousPageData.has_more)
@ -164,12 +161,14 @@ const Form = () => {
        <div className={labelClass}>
          <div>{t('datasetSettings.form.name')}</div>
        </div>
-        <input
-          disabled={!currentDataset?.embedding_available}
-          className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60', 'h-9')}
-          value={name}
-          onChange={e => setName(e.target.value)}
-        />
+        <div className='w-full max-w-[480px]'>
+          <Input
+            disabled={!currentDataset?.embedding_available}
+            className='h-9'
+            value={name}
+            onChange={e => setName(e.target.value)}
+          />
+        </div>
      </div>
      <div className={rowClass}>
        <div className={labelClass}>
--- a/web/app/components/explore/create-app-modal/index.tsx
+++ b/web/app/components/explore/create-app-modal/index.tsx
@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
@ -82,11 +83,11 @@ const CreateAppModal = ({
            <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.newApp.captionName')}</div>
            <div className='flex items-center justify-between space-x-2'>
              <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.icon} background={emoji.icon_background} />
-              <input
+              <Input
                value={name}
                onChange={e => setName(e.target.value)}
                placeholder={t('app.newApp.appNamePlaceholder') || ''}
-                className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+                className='grow h-10'
              />
            </div>
          </div>
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@ -13,6 +13,7 @@ import TestApi from './test-api'
 import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import EmojiPicker from '@/app/components/base/emoji-picker'
 import AppIcon from '@/app/components/base/app-icon'
@ -196,8 +197,8 @@ const EditCustomCollectionModal: FC<Props> = ({
                <div className={fieldNameClassNames}>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                <div className='flex items-center justify-between gap-3'>
                  <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
-                  <input
-                    className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
+                  <Input
+                    className='h-10 grow' placeholder={t('tools.createTool.toolNamePlaceHolder')!}
                    value={customCollection.provider}
                    onChange={(e) => {
                      const newCollection = produce(customCollection, (draft) => {
@ -292,7 +293,7 @@ const EditCustomCollectionModal: FC<Props> = ({
              {/* Privacy Policy */}
              <div>
                <div className={fieldNameClassNames}>{t('tools.createTool.privacyPolicy')}</div>
-                <input
+                <Input
                  value={customCollection.privacy_policy}
                  onChange={(e) => {
                    const newCollection = produce(customCollection, (draft) => {
@ -300,12 +301,12 @@ const EditCustomCollectionModal: FC<Props> = ({
                    })
                    setCustomCollection(newCollection)
                  }}
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+                  className='h-10 grow' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
              </div>

              <div>
                <div className={fieldNameClassNames}>{t('tools.createTool.customDisclaimer')}</div>
-                <input
+                <Input
                  value={customCollection.custom_disclaimer}
                  onChange={(e) => {
                    const newCollection = produce(customCollection, (draft) => {
@ -313,7 +314,7 @@ const EditCustomCollectionModal: FC<Props> = ({
                    })
                    setCustomCollection(newCollection)
                  }}
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
+                  className='h-10 grow' placeholder={t('tools.createTool.customDisclaimerPlaceholder') || ''} />
              </div>

            </div>
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@ -79,7 +79,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
          className='block'
        >
          <div className={cn(
-            'flex items-center gap-1 px-3 h-9 rounded-lg border-[0.5px] border-transparent bg-gray-100 cursor-pointer hover:bg-gray-200',
+            'flex items-center gap-1 px-3 h-10 rounded-lg border-[0.5px] border-transparent bg-gray-100 cursor-pointer hover:bg-gray-200',
            open && '!bg-gray-200 hover:bg-gray-200',
          )}>
            <div title={value.length > 0 ? selectedLabels : ''} className={cn('grow text-[13px] leading-[18px] text-gray-700 truncate', !value.length && '!text-gray-400')}>
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@ -9,6 +9,7 @@ import produce from 'immer'
 import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
@ -135,9 +136,8 @@ const WorkflowToolAsModal: FC<Props> = ({
                <div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
                <div className='flex items-center justify-between gap-3'>
                  <AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' icon={emoji.content} background={emoji.background} />
-                  <input
-                    type='text'
-                    className='grow h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+                  <Input
+                    className='grow h-10'
                    placeholder={t('tools.createTool.toolNamePlaceHolder')!}
                    value={label}
                    onChange={e => setLabel(e.target.value)}
@ -159,9 +159,8 @@ const WorkflowToolAsModal: FC<Props> = ({
                    <RiQuestionLine className='ml-2 w-[14px] h-[14px] text-gray-400' />
                  </Tooltip>
                </div>
-                <input
-                  type='text'
-                  className='w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs'
+                <Input
+                  className='h-10'
                  placeholder={t('tools.createTool.nameForToolCallPlaceHolder')!}
                  value={name}
                  onChange={e => setName(e.target.value)}
@ -240,10 +239,11 @@ const WorkflowToolAsModal: FC<Props> = ({
              {/* Privacy Policy */}
              <div>
                <div className='py-2 leading-5 text-sm font-medium text-gray-900'>{t('tools.createTool.privacyPolicy')}</div>
-                <input
+                <Input
+                  className='h-10'
                  value={privacyPolicy}
                  onChange={e => setPrivacyPolicy(e.target.value)}
-                  className='grow w-full h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg border border-transparent outline-none appearance-none caret-primary-600 placeholder:text-gray-400 hover:bg-gray-50 hover:border hover:border-gray-300 focus:bg-gray-50 focus:border focus:border-gray-300 focus:shadow-xs' placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
+                  placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
              </div>
            </div>
            <div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-gray-50 border-t border-black/5')} >