From 18f2d24f8e9fdb115df98c7537859c5c4221787e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 16 Oct 2025 10:42:47 +0800
Subject: [PATCH] chore: preview input field readonly

---
 .../components/app/configuration/debug/chat-user-input.tsx | 7 ++++++-
 .../nodes/_base/components/before-run-form/bool-input.tsx  | 3 +++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index b1161de075..6f57dfd185 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -18,7 +18,7 @@ const ChatUserInput = ({
   inputs,
 }: Props) => {
   const { t } = useTranslation()
-  const { modelConfig, setInputs } = useContext(ConfigContext)
+  const { modelConfig, setInputs, readonly } = useContext(ConfigContext)
 
   const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => {
     return key && key?.trim() && name && name?.trim()
@@ -70,6 +70,7 @@ const ChatUserInput = ({
                     placeholder={name}
                     autoFocus={index === 0}
                     maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                    readOnly={readonly}
                   />
                 )}
                 {type === 'paragraph' && (
@@ -78,6 +79,7 @@ const ChatUserInput = ({
                     placeholder={name}
                     value={inputs[key] ? `${inputs[key]}` : ''}
                     onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                    readOnly={readonly}
                   />
                 )}
                 {type === 'select' && (
@@ -87,6 +89,7 @@ const ChatUserInput = ({
                     onSelect={(i) => { handleInputValueChange(key, i.value as string) }}
                     items={(options || []).map(i => ({ name: i, value: i }))}
                     allowSearch={false}
+                    disabled={readonly}
                   />
                 )}
                 {type === 'number' && (
@@ -97,6 +100,7 @@ const ChatUserInput = ({
                     placeholder={name}
                     autoFocus={index === 0}
                     maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                    readOnly={readonly}
                   />
                 )}
                 {type === 'checkbox' && (
@@ -105,6 +109,7 @@ const ChatUserInput = ({
                     value={!!inputs[key]}
                     required={required}
                     onChange={(value) => { handleInputValueChange(key, value) }}
+                    readonly={readonly}
                   />
                 )}
               </div>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
index 73219a551b..29f6e13025 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx
@@ -9,6 +9,7 @@ type Props = {
   value: boolean
   required?: boolean
   onChange: (value: boolean) => void
+  readonly?: boolean
 }
 
 const BoolInput: FC<Props> = ({
@@ -16,6 +17,7 @@ const BoolInput: FC<Props> = ({
   onChange,
   name,
   required,
+  readonly,
 }) => {
   const { t } = useTranslation()
   const handleChange = useCallback(() => {
@@ -27,6 +29,7 @@ const BoolInput: FC<Props> = ({
         className='!h-4 !w-4'
         checked={!!value}
         onCheck={handleChange}
+        disabled={readonly}
       />
       <div className='system-sm-medium flex items-center gap-1 text-text-secondary'>
         {name}