From 4a249c40b1e46d939ac61ae7ca9ce0dd3b9acde8 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 6 Jun 2025 15:35:19 +0800
Subject: [PATCH] feat: enhance input field configurations with blur listeners
 and update translations for display name

---
 .../form/form-scenarios/input-field/field.tsx |  1 +
 .../input-field/editor/form/hooks.ts          | 26 ++++++++++++++++---
 .../editor/form/initial-fields.tsx            |  5 ++++
 .../website-crawl/base/crawled-result.tsx     |  2 +-
 .../website-crawl/base/options/index.tsx      |  1 +
 web/i18n/en-US/app-debug.ts                   |  1 +
 web/i18n/zh-Hans/app-debug.ts                 |  1 +
 7 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/form/form-scenarios/input-field/field.tsx b/web/app/components/base/form/form-scenarios/input-field/field.tsx
index ab16b9a482..8a9de3fc0c 100644
--- a/web/app/components/base/form/form-scenarios/input-field/field.tsx
+++ b/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}
diff --git a/web/app/components/rag-pipeline/components/input-field/editor/form/hooks.ts b/web/app/components/rag-pipeline/components/input-field/editor/form/hooks.ts
index 5ece09bb38..1c9e714972 100644
--- a/web/app/components/rag-pipeline/components/input-field/editor/form/hooks.ts
+++ b/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
 }
diff --git a/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx b/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx
index c00708ed6e..9c6a053509 100644
--- a/web/app/components/rag-pipeline/components/input-field/editor/form/initial-fields.tsx
+++ b/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,
     })
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx
index 29737b0cdd..9d5019f31e 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/crawled-result.tsx
+++ b/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}
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/options/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/options/index.tsx
index dc1a0ba7c0..537ca5bf7a 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/data-source/website-crawl/base/options/index.tsx
+++ b/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'
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 1240d031c8..81c3c83407 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/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',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 9453d6c2ce..b57120a643 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -360,6 +360,7 @@ const translation = {
     'varName': '变量名称',
     'inputPlaceholder': '请输入',
     'labelName': '显示名称',
+    'displayName': '显示名称',
     'required': '必填',
     'hide': '隐藏',
     'placeholder': '占位符',