From f31b821cc082f8324f36a25285d7c2a4600f10cc Mon Sep 17 00:00:00 2001
From: yangzheli <43645580+yangzheli@users.noreply.github.com>
Date: Wed, 5 Nov 2025 09:29:13 +0800
Subject: [PATCH] fix(web): improve the consistency of the inputs-form UI
 (#27837)

---
 .../chat/chat-with-history/inputs-form/content.tsx    |  2 +-
 .../chat/embedded-chatbot/inputs-form/content.tsx     |  2 +-
 .../share/text-generation/run-once/index.tsx          | 11 +++++++----
 .../_base/components/before-run-form/form-item.tsx    |  6 +++---
 web/i18n/de-DE/app-debug.ts                           |  1 -
 web/i18n/en-US/app-debug.ts                           |  1 -
 web/i18n/es-ES/app-debug.ts                           |  1 -
 web/i18n/fa-IR/app-debug.ts                           |  1 -
 web/i18n/fr-FR/app-debug.ts                           |  1 -
 web/i18n/hi-IN/app-debug.ts                           |  1 -
 web/i18n/id-ID/app-debug.ts                           |  1 -
 web/i18n/it-IT/app-debug.ts                           |  1 -
 web/i18n/ja-JP/app-debug.ts                           |  1 -
 web/i18n/ko-KR/app-debug.ts                           |  1 -
 web/i18n/pl-PL/app-debug.ts                           |  1 -
 web/i18n/pt-BR/app-debug.ts                           |  1 -
 web/i18n/ro-RO/app-debug.ts                           |  1 -
 web/i18n/ru-RU/app-debug.ts                           |  1 -
 web/i18n/sl-SI/app-debug.ts                           |  1 -
 web/i18n/th-TH/app-debug.ts                           |  1 -
 web/i18n/tr-TR/app-debug.ts                           |  1 -
 web/i18n/uk-UA/app-debug.ts                           |  1 -
 web/i18n/vi-VN/app-debug.ts                           |  1 -
 web/i18n/zh-Hans/app-debug.ts                         |  1 -
 web/i18n/zh-Hant/app-debug.ts                         |  1 -
 25 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index 392bdf2b77..c7785ebd89 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -49,7 +49,7 @@ const InputsFormContent = ({ showTip }: Props) => {
             <div className='flex h-6 items-center gap-1'>
               <div className='system-md-semibold text-text-secondary'>{form.label}</div>
               {!form.required && (
-                <div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
+                <div className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</div>
               )}
             </div>
           )}
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index dd65f0ce72..caf4e363ff 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -49,7 +49,7 @@ const InputsFormContent = ({ showTip }: Props) => {
             <div className='flex h-6 items-center gap-1'>
               <div className='system-md-semibold text-text-secondary'>{form.label}</div>
               {!form.required && (
-                <div className='system-xs-regular text-text-tertiary'>{t('appDebug.variableTable.optional')}</div>
+                <div className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</div>
               )}
             </div>
           )}
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index d24428f32a..112f08a1d7 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -100,7 +100,10 @@ const RunOnce: FC<IRunOnceProps> = ({
             : promptConfig.prompt_variables.map(item => (
               <div className='mt-4 w-full' key={item.key}>
                 {item.type !== 'checkbox' && (
-                  <label className='system-md-semibold flex h-6 items-center text-text-secondary'>{item.name}</label>
+                  <div className='system-md-semibold flex h-6 items-center gap-1 text-text-secondary'>
+                    <div className='truncate'>{item.name}</div>
+                    {!item.required && <span className='system-xs-regular text-text-tertiary'>{t('workflow.panel.optional')}</span>}
+                  </div>
                 )}
                 <div className='mt-1'>
                   {item.type === 'select' && (
@@ -115,7 +118,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                   {item.type === 'string' && (
                     <Input
                       type="text"
-                      placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                      placeholder={item.name}
                       value={inputs[item.key]}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
                       maxLength={item.max_length || DEFAULT_VALUE_MAX_LEN}
@@ -124,7 +127,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                   {item.type === 'paragraph' && (
                     <Textarea
                       className='h-[104px] sm:text-xs'
-                      placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                      placeholder={item.name}
                       value={inputs[item.key]}
                       onChange={(e: ChangeEvent<HTMLTextAreaElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
                     />
@@ -132,7 +135,7 @@ const RunOnce: FC<IRunOnceProps> = ({
                   {item.type === 'number' && (
                     <Input
                       type="number"
-                      placeholder={`${item.name}${!item.required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+                      placeholder={item.name}
                       value={inputs[item.key]}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => { handleInputsChange({ ...inputsRef.current, [item.key]: e.target.value }) }}
                     />
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 041c8dab28..0bb8b3844f 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -140,7 +140,7 @@ const FormItem: FC<Props> = ({
             <Input
               value={value || ''}
               onChange={e => onChange(e.target.value)}
-              placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
+              placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
               autoFocus={autoFocus}
             />
           )
@@ -152,7 +152,7 @@ const FormItem: FC<Props> = ({
               type="number"
               value={value || ''}
               onChange={e => onChange(e.target.value)}
-              placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
+              placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
               autoFocus={autoFocus}
             />
           )
@@ -163,7 +163,7 @@ const FormItem: FC<Props> = ({
             <Textarea
               value={value || ''}
               onChange={e => onChange(e.target.value)}
-              placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
+              placeholder={typeof payload.label === 'object' ? payload.label.variable : payload.label}
               autoFocus={autoFocus}
             />
           )
diff --git a/web/i18n/de-DE/app-debug.ts b/web/i18n/de-DE/app-debug.ts
index fffb84bd61..badf27be59 100644
--- a/web/i18n/de-DE/app-debug.ts
+++ b/web/i18n/de-DE/app-debug.ts
@@ -259,7 +259,6 @@ const translation = {
   variableTable: {
     key: 'Variablenschlüssel',
     name: 'Name des Benutzereingabefelds',
-    optional: 'Optional',
     type: 'Eingabetyp',
     action: 'Aktionen',
     typeString: 'String',
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 2ad705c563..9d1a824a88 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -346,7 +346,6 @@ const translation = {
   variableTable: {
     key: 'Variable Key',
     name: 'User Input Field Name',
-    optional: 'Optional',
     type: 'Input Type',
     action: 'Actions',
     typeString: 'String',
diff --git a/web/i18n/es-ES/app-debug.ts b/web/i18n/es-ES/app-debug.ts
index 6885c0d11f..76aa28d03f 100644
--- a/web/i18n/es-ES/app-debug.ts
+++ b/web/i18n/es-ES/app-debug.ts
@@ -255,7 +255,6 @@ const translation = {
   variableTable: {
     key: 'Clave de Variable',
     name: 'Nombre del Campo de Entrada del Usuario',
-    optional: 'Opcional',
     type: 'Tipo de Entrada',
     action: 'Acciones',
     typeString: 'Cadena',
diff --git a/web/i18n/fa-IR/app-debug.ts b/web/i18n/fa-IR/app-debug.ts
index 141189032a..857dee9418 100644
--- a/web/i18n/fa-IR/app-debug.ts
+++ b/web/i18n/fa-IR/app-debug.ts
@@ -588,7 +588,6 @@ const translation = {
     typeString: 'رشته',
     name: 'نام فیلد ورودی کاربر',
     type: 'نوع ورودی',
-    optional: 'اختیاری',
   },
   varKeyError: {},
   otherError: {
diff --git a/web/i18n/fr-FR/app-debug.ts b/web/i18n/fr-FR/app-debug.ts
index d46735a71e..ca894192dc 100644
--- a/web/i18n/fr-FR/app-debug.ts
+++ b/web/i18n/fr-FR/app-debug.ts
@@ -259,7 +259,6 @@ const translation = {
   variableTable: {
     key: 'Clé Variable',
     name: 'Nom du champ d\'entrée de l\'utilisateur',
-    optional: 'Facultatif',
     type: 'Type d\'Entrée',
     action: 'Actions',
     typeString: 'Chaîne',
diff --git a/web/i18n/hi-IN/app-debug.ts b/web/i18n/hi-IN/app-debug.ts
index c1c37ac63b..4d2b006856 100644
--- a/web/i18n/hi-IN/app-debug.ts
+++ b/web/i18n/hi-IN/app-debug.ts
@@ -279,7 +279,6 @@ const translation = {
   variableTable: {
     key: 'वेरिएबल कुंजी',
     name: 'उपयोगकर्ता इनपुट फ़ील्ड नाम',
-    optional: 'वैकल्पिक',
     type: 'इनपुट प्रकार',
     action: 'क्रियाएँ',
     typeString: 'स्ट्रिंग',
diff --git a/web/i18n/id-ID/app-debug.ts b/web/i18n/id-ID/app-debug.ts
index ae463eba11..8838fd13a9 100644
--- a/web/i18n/id-ID/app-debug.ts
+++ b/web/i18n/id-ID/app-debug.ts
@@ -325,7 +325,6 @@ const translation = {
   variableTable: {
     action: 'Tindakan',
     typeString: 'String',
-    optional: 'Fakultatif',
     typeSelect: 'Pilih',
     type: 'Jenis Masukan',
     key: 'Kunci Variabel',
diff --git a/web/i18n/it-IT/app-debug.ts b/web/i18n/it-IT/app-debug.ts
index 94ff6182ca..02680a8bae 100644
--- a/web/i18n/it-IT/app-debug.ts
+++ b/web/i18n/it-IT/app-debug.ts
@@ -281,7 +281,6 @@ const translation = {
   variableTable: {
     key: 'Chiave Variabile',
     name: 'Nome Campo Input Utente',
-    optional: 'Opzionale',
     type: 'Tipo di Input',
     action: 'Azioni',
     typeString: 'Stringa',
diff --git a/web/i18n/ja-JP/app-debug.ts b/web/i18n/ja-JP/app-debug.ts
index 4a6d8a81cb..f15119a5f5 100644
--- a/web/i18n/ja-JP/app-debug.ts
+++ b/web/i18n/ja-JP/app-debug.ts
@@ -340,7 +340,6 @@ const translation = {
   variableTable: {
     key: '変数キー',
     name: 'ユーザー入力フィールド名',
-    optional: 'オプション',
     type: '入力タイプ',
     action: 'アクション',
     typeString: '文字列',
diff --git a/web/i18n/ko-KR/app-debug.ts b/web/i18n/ko-KR/app-debug.ts
index 7d59d681bc..0cd074a70f 100644
--- a/web/i18n/ko-KR/app-debug.ts
+++ b/web/i18n/ko-KR/app-debug.ts
@@ -255,7 +255,6 @@ const translation = {
   variableTable: {
     key: '변수 키',
     name: '사용자 입력 필드명',
-    optional: '옵션',
     type: '입력 타입',
     action: '액션',
     typeString: '문자열',
diff --git a/web/i18n/pl-PL/app-debug.ts b/web/i18n/pl-PL/app-debug.ts
index 7b235f94de..ab4b0a06b0 100644
--- a/web/i18n/pl-PL/app-debug.ts
+++ b/web/i18n/pl-PL/app-debug.ts
@@ -277,7 +277,6 @@ const translation = {
   variableTable: {
     key: 'Klucz Zmiennej',
     name: 'Nazwa Pola Wejściowego Użytkownika',
-    optional: 'Opcjonalnie',
     type: 'Typ Wejścia',
     action: 'Akcje',
     typeString: 'String',
diff --git a/web/i18n/pt-BR/app-debug.ts b/web/i18n/pt-BR/app-debug.ts
index ad46f8f0a9..1efec540df 100644
--- a/web/i18n/pt-BR/app-debug.ts
+++ b/web/i18n/pt-BR/app-debug.ts
@@ -261,7 +261,6 @@ const translation = {
   variableTable: {
     key: 'Chave da Variável',
     name: 'Nome do Campo de Entrada do Usuário',
-    optional: 'Opcional',
     type: 'Tipo de Entrada',
     action: 'Ações',
     typeString: 'Texto',
diff --git a/web/i18n/ro-RO/app-debug.ts b/web/i18n/ro-RO/app-debug.ts
index e3ecc1a8c0..fff56403a3 100644
--- a/web/i18n/ro-RO/app-debug.ts
+++ b/web/i18n/ro-RO/app-debug.ts
@@ -261,7 +261,6 @@ const translation = {
   variableTable: {
     key: 'Cheie variabilă',
     name: 'Nume câmp de intrare utilizator',
-    optional: 'Opțional',
     type: 'Tip intrare',
     action: 'Acțiuni',
     typeString: 'Șir',
diff --git a/web/i18n/ru-RU/app-debug.ts b/web/i18n/ru-RU/app-debug.ts
index 295bea3ba3..8d00994bef 100644
--- a/web/i18n/ru-RU/app-debug.ts
+++ b/web/i18n/ru-RU/app-debug.ts
@@ -327,7 +327,6 @@ const translation = {
   variableTable: {
     key: 'Ключ переменной',
     name: 'Имя поля пользовательского ввода',
-    optional: 'Необязательно',
     type: 'Тип ввода',
     action: 'Действия',
     typeString: 'Строка',
diff --git a/web/i18n/sl-SI/app-debug.ts b/web/i18n/sl-SI/app-debug.ts
index 224c68e9e3..6642d79104 100644
--- a/web/i18n/sl-SI/app-debug.ts
+++ b/web/i18n/sl-SI/app-debug.ts
@@ -350,7 +350,6 @@ const translation = {
   },
   variableTable: {
     action: 'Dejanja',
-    optional: 'Neobvezno',
     typeString: 'Niz',
     typeSelect: 'Izbrati',
     type: 'Vrsta vnosa',
diff --git a/web/i18n/th-TH/app-debug.ts b/web/i18n/th-TH/app-debug.ts
index ce4b0f22e9..00704e76f5 100644
--- a/web/i18n/th-TH/app-debug.ts
+++ b/web/i18n/th-TH/app-debug.ts
@@ -323,7 +323,6 @@ const translation = {
     timeoutExceeded: 'ผลลัพธ์จะไม่แสดงเนื่องจากหมดเวลา โปรดดูบันทึกเพื่อรวบรวมผลลัพธ์ที่สมบูรณ์',
   },
   variableTable: {
-    optional: 'เสริม',
     key: 'ปุ่มตัวแปร',
     typeString: 'เชือก',
     typeSelect: 'เลือก',
diff --git a/web/i18n/tr-TR/app-debug.ts b/web/i18n/tr-TR/app-debug.ts
index f707a691c2..d8ebc3d2df 100644
--- a/web/i18n/tr-TR/app-debug.ts
+++ b/web/i18n/tr-TR/app-debug.ts
@@ -327,7 +327,6 @@ const translation = {
   variableTable: {
     key: 'Değişken Anahtarı',
     name: 'Kullanıcı Giriş Alanı Adı',
-    optional: 'İsteğe Bağlı',
     type: 'Giriş Tipi',
     action: 'Aksiyonlar',
     typeString: 'Metin',
diff --git a/web/i18n/uk-UA/app-debug.ts b/web/i18n/uk-UA/app-debug.ts
index 3f7b6582bb..87b35168eb 100644
--- a/web/i18n/uk-UA/app-debug.ts
+++ b/web/i18n/uk-UA/app-debug.ts
@@ -273,7 +273,6 @@ const translation = {
   variableTable: {
     key: 'Ключ змінної', // Variable Key
     name: 'Назва поля для введення користувача', // User Input Field Name
-    optional: 'Додатково', // Optional
     type: 'Тип введення', // Input Type
     action: 'Дії', // Actions
     typeString: 'Рядок', // String
diff --git a/web/i18n/vi-VN/app-debug.ts b/web/i18n/vi-VN/app-debug.ts
index bd3823f1ff..9e71899b86 100644
--- a/web/i18n/vi-VN/app-debug.ts
+++ b/web/i18n/vi-VN/app-debug.ts
@@ -255,7 +255,6 @@ const translation = {
   variableTable: {
     key: 'Khóa biến',
     name: 'Tên trường nhập liệu người dùng',
-    optional: 'Tùy chọn',
     type: 'Loại nhập liệu',
     action: 'Hành động',
     typeString: 'Chuỗi',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 0cb3bf6b5a..a0759e9b8c 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -342,7 +342,6 @@ const translation = {
   variableTable: {
     key: '变量 Key',
     name: '字段名称',
-    optional: '可选',
     type: '类型',
     action: '操作',
     typeString: '文本',
diff --git a/web/i18n/zh-Hant/app-debug.ts b/web/i18n/zh-Hant/app-debug.ts
index 735131d678..ff3e131e89 100644
--- a/web/i18n/zh-Hant/app-debug.ts
+++ b/web/i18n/zh-Hant/app-debug.ts
@@ -255,7 +255,6 @@ const translation = {
   variableTable: {
     key: '變數 Key',
     name: '欄位名稱',
-    optional: '可選',
     type: '型別',
     action: '操作',
     typeString: '文字',