From 00f0f6d040adc479b2900b7ac0c3cc2b91475457 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Wed, 22 Apr 2026 07:46:47 +0800
Subject: [PATCH] Add constant select options editor

---
 .../__tests__/input-field.spec.tsx            | 39 +++++++++++++++++++
 .../plugins/hitl-input-block/input-field.tsx  | 28 +++++++++++++
 2 files changed, 67 insertions(+)

diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
index feaa14000f..a8037f982d 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/input-field.spec.tsx
@@ -38,6 +38,15 @@ vi.mock('@/app/components/app/configuration/config-var/config-modal/type-select'
   ),
 }))
 
+vi.mock('@/app/components/app/configuration/config-var/config-select', () => ({
+  __esModule: true,
+  default: ({ onChange }: { onChange: (options: string[]) => void }) => (
+    <button type="button" onClick={() => onChange(['alpha', 'beta'])}>
+      config-select
+    </button>
+  ),
+}))
+
 const createPayload = (overrides?: Partial<FormInputItem>): FormInputItem => ({
   type: InputVarType.paragraph,
   output_variable_name: 'valid_name',
@@ -346,4 +355,34 @@ describe('InputField', () => {
     await user.click(screen.getByRole('button', { name: 'select-paragraph' }))
     expect(screen.getByText(/workflow\.nodes\.humanInput\.insertInputField\.prePopulateField/i)).toBeInTheDocument()
   })
+
+  it('should save constant select options', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    render(
+      <InputField
+        nodeId="node-9"
+        isEdit={false}
+        payload={createPayload()}
+        onChange={onChange}
+        onCancel={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'select-select' }))
+    await user.click(screen.getByRole('button', { name: 'config-select' }))
+    await user.click(screen.getByRole('button', { name: /workflow\.nodes\.humanInput\.insertInputField\.insert/i }))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0]![0]).toEqual({
+      type: InputVarType.select,
+      output_variable_name: 'valid_name',
+      option_source: {
+        type: 'constant',
+        selector: [],
+        value: ['alpha', 'beta'],
+      },
+    })
+  })
 })
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 b1ea7a4324..0faaff917a 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
@@ -7,11 +7,13 @@ import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import TypeSelector from '@/app/components/app/configuration/config-var/config-modal/type-select'
+import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
 import Input from '@/app/components/base/input'
 import {
   createDefaultFormInputByType,
   createDefaultParagraphFormInput,
   isParagraphFormInput,
+  isSelectFormInput,
 } from '@/app/components/workflow/nodes/human-input/types'
 import { InputVarType } from '@/app/components/workflow/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
@@ -99,6 +101,21 @@ const InputField: React.FC<InputFieldProps> = ({
       setTempPayload(nextValue)
     }
   }, [paragraphPayload])
+  const handleSelectOptionsChange = useCallback((options: string[]) => {
+    setTempPayload((prev) => {
+      if (!isSelectFormInput(prev))
+        return prev
+
+      return {
+        ...prev,
+        option_source: {
+          ...prev.option_source,
+          type: 'constant',
+          value: options,
+        },
+      }
+    })
+  }, [])
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -166,6 +183,17 @@ const InputField: React.FC<InputFieldProps> = ({
           />
         </div>
       )}
+      {isSelectFormInput(tempPayload) && (
+        <div className="mt-4">
+          <div className="mb-1.5 system-xs-medium text-text-secondary">
+            {t('variableConfig.options', { ns: 'appDebug' })}
+          </div>
+          <ConfigSelect
+            options={tempPayload.option_source.value}
+            onChange={handleSelectOptionsChange}
+          />
+        </div>
+      )}
       <div className="mt-4 flex justify-end space-x-2">
         <Button data-testid="hitl-input-cancel-btn" onClick={onCancel}>{t('operation.cancel', { ns: 'common' })}</Button>
         {isEdit