From 7316a1be2bcf6ff67ff1ff62fe6ae4ca4894e024 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 23 Apr 2026 18:12:26 +0800
Subject: [PATCH] fix(web): style issue

---
 .../__tests__/component-ui.spec.tsx           | 24 +++++++++++++++----
 .../plugins/hitl-input-block/component-ui.tsx |  7 +-----
 .../plugins/hitl-input-block/input-field.tsx  |  2 +-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
index 317f314eaa..f31dc8bf67 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/component-ui.spec.tsx
@@ -148,8 +148,8 @@ describe('HITLInputComponentUI', () => {
       expect(summary.compareDocumentPosition(typeLabel) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
     })
 
-    it('should render file-list summary with max uploads', () => {
-      const { getByText } = renderComponent({
+    it('should render file-list placeholder instead of selected file details', () => {
+      const { getAllByText, queryByText } = renderComponent({
         formInput: {
           type: InputVarType.multiFiles,
           output_variable_name: 'customer_name',
@@ -160,8 +160,24 @@ describe('HITLInputComponentUI', () => {
         } satisfies FormInputItem,
       })
 
-      expect(getByText(/document/)).toBeInTheDocument()
-      expect(getByText(/4/)).toBeInTheDocument()
+      expect(getAllByText('appDebug.variableConfig.multi-files')).toHaveLength(2)
+      expect(queryByText(/document/)).not.toBeInTheDocument()
+      expect(queryByText(/4/)).not.toBeInTheDocument()
+    })
+
+    it('should render single-file placeholder instead of selected file details', () => {
+      const { getAllByText, queryByText } = renderComponent({
+        formInput: {
+          type: InputVarType.singleFile,
+          output_variable_name: 'customer_name',
+          allowed_file_extensions: ['.pdf'],
+          allowed_file_types: [SupportUploadFileTypes.document],
+          allowed_file_upload_methods: [TransferMethod.local_file],
+        } satisfies FormInputItem,
+      })
+
+      expect(getAllByText('appDebug.variableConfig.single-file')).toHaveLength(2)
+      expect(queryByText(/document/)).not.toBeInTheDocument()
     })
   })
 
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
index 8786fd7407..dd0d87c3c4 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/component-ui.tsx
@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import {
   createDefaultParagraphFormInput,
   isFileFormInput,
-  isFileListFormInput,
   isParagraphFormInput,
   isSelectFormInput,
 } from '@/app/components/workflow/nodes/human-input/types'
@@ -128,11 +127,7 @@ const HITLInputComponentUI: FC<HITLInputComponentUIProps> = ({
       return resolvedFormInput.option_source.value.join(', ') || inputTypeLabel
     }
 
-    const fileTypes = resolvedFormInput.allowed_file_types.join(', ')
-    if (isFileListFormInput(resolvedFormInput))
-      return [fileTypes, resolvedFormInput.max_upload_count ? `${t(`${i18nPrefix}.maxUploads`, { ns: 'workflow' })}: ${resolvedFormInput.max_upload_count}` : null].filter(Boolean).join(' · ') || inputTypeLabel
-
-    return fileTypes || inputTypeLabel
+    return inputTypeLabel
   }, [inputTypeLabel, paragraphDefault?.value, resolvedFormInput, t])
 
   return (
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
index 1ae7e248fd..16a35325ea 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/input-field.tsx
@@ -253,7 +253,7 @@ const InputField: React.FC<InputFieldProps> = ({
           </div>
           {tempPayload.option_source.type === 'variable'
             ? (
-                <div className="relative rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2">
+                <div className="relative min-h-[80px] rounded-lg border border-transparent bg-components-input-bg-normal px-3 pt-2 pb-8">
                   <VarReferencePicker
                     nodeId={nodeId}
                     value={tempPayload.option_source.selector}