feat: enhance input field configurations with blur listeners and update translations for display name

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

@@ -50,6 +50,7 @@ const InputField = ({
       return (
         <form.AppField
           name={variable}
+          listeners={listeners}
           children={field => (
             <field.TextField
               label={label}

web/app/components/rag-pipeline/components/input-field/editor/form/hooks.ts

@@ -64,11 +64,12 @@ export const useHiddenFieldNames = (type: PipelineInputVarType) => {
 }
 
 export const useConfigurations = (props: {
+  getFieldValue: (fieldName: DeepKeys<FormData>) => any,
   setFieldValue: (fieldName: DeepKeys<FormData>, value: any) => void,
   supportFile: boolean
 }) => {
   const { t } = useTranslation()
-  const { setFieldValue, supportFile } = props
+  const { getFieldValue, setFieldValue, supportFile } = props
 
   const handleTypeChange = useCallback((type: PipelineInputVarType) => {
     if ([PipelineInputVarType.singleFile, PipelineInputVarType.multiFiles].includes(type)) {
@@ -84,6 +85,17 @@ export const useConfigurations = (props: {
       setFieldValue('maxLength', DEFAULT_VALUE_MAX_LEN)
   }, [setFieldValue])
 
+  const handleVariableNameBlur = useCallback((value: string) => {
+    if (!value)
+      return
+    setFieldValue('label', value)
+  }, [setFieldValue])
+
+  const handleDisplayNameBlur = useCallback((value: string) => {
+    if (!value)
+      setFieldValue('label', getFieldValue('variable'))
+  }, [getFieldValue, setFieldValue])
+
   const initialConfigurations = useMemo((): InputFieldConfiguration[] => {
     return [{
       type: InputFieldType.inputTypeSelect,
@@ -101,13 +113,19 @@ export const useConfigurations = (props: {
       variable: 'variable',
       placeholder: t('appDebug.variableConfig.inputPlaceholder'),
       required: true,
+      listeners: {
+        onBlur: ({ value }) => handleVariableNameBlur(value),
+      },
       showConditions: [],
     }, {
       type: InputFieldType.textInput,
-      label: t('appDebug.variableConfig.labelName'),
+      label: t('appDebug.variableConfig.displayName'),
       variable: 'label',
       placeholder: t('appDebug.variableConfig.inputPlaceholder'),
-      required: true,
+      required: false,
+      listeners: {
+        onBlur: ({ value }) => handleDisplayNameBlur(value),
+      },
       showConditions: [],
     }, {
       type: InputFieldType.numberInput,
@@ -155,7 +173,7 @@ export const useConfigurations = (props: {
       required: true,
       showConditions: [],
     }]
-  }, [handleTypeChange, supportFile, t])
+  }, [t, supportFile, handleTypeChange, handleVariableNameBlur, handleDisplayNameBlur])
 
   return initialConfigurations
 }

web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx

@@ -16,11 +16,16 @@ const InitialFields = ({
   render: function Render({
     form,
   }) {
+    const getFieldValue = useCallback((fieldName: string) => {
+      return form.getFieldValue(fieldName)
+    }, [form])
+
     const setFieldValue = useCallback((fieldName: string, value: any) => {
       form.setFieldValue(fieldName, value)
     }, [form])
 
     const initialConfigurations = useConfigurations({
+      getFieldValue,
       setFieldValue,
       supportFile,
     })

web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx

@@ -69,7 +69,7 @@ const CrawledResult = ({
             onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
           />
         </div>
-        <div className='flex flex-col gap-y-px border-t border-divider-subtle bg-background-default-subtle p-2'>
+        <div className='flex flex-col gap-y-px overflow-hidden border-t border-divider-subtle bg-background-default-subtle p-2'>
           {list.map((item, index) => (
             <CrawledResultItem
               key={item.source_url}

web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/options/index.tsx

@@ -90,6 +90,7 @@ const Options = ({
         <Button
           variant='primary'
           onClick={form.handleSubmit}
+          disabled={isRunning}
           loading={isRunning}
           className='shrink-0 gap-x-0.5'
           spinnerClassName='!ml-0'

web/i18n/en-US/app-debug.ts

@@ -365,6 +365,7 @@ const translation = {
     'apiBasedVar': 'API-based Variable',
     'varName': 'Variable Name',
     'labelName': 'Label Name',
+    'displayName': 'Display Name',
     'inputPlaceholder': 'Please input',
     'content': 'Content',
     'required': 'Required',

web/i18n/zh-Hans/app-debug.ts

@@ -360,6 +360,7 @@ const translation = {
     'varName': '变量名称',
     'inputPlaceholder': '请输入',
     'labelName': '显示名称',
+    'displayName': '显示名称',
     'required': '必填',
     'hide': '隐藏',
     'placeholder': '占位符',