diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 71d9ceac57..9b9b5fd66e 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -40,7 +40,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
   onVisionFilesChange,
 }) => {
   const { t } = useTranslation()
-  const { modelModeType, modelConfig, setInputs, mode, isAdvancedMode, completionPromptConfig, chatPromptConfig } = useContext(ConfigContext)
+  const { readonly, modelModeType, modelConfig, setInputs, mode, isAdvancedMode, completionPromptConfig, chatPromptConfig } = useContext(ConfigContext)
   const [userInputFieldCollapse, setUserInputFieldCollapse] = useState(false)
   const promptVariables = modelConfig.configs.prompt_variables.filter(({ key, name }) => {
     return key && key?.trim() && name && name?.trim()
@@ -124,6 +124,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         placeholder={name}
                         autoFocus={index === 0}
                         maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                        readOnly={readonly}
                       />
                     )}
                     {type === 'paragraph' && (
@@ -132,6 +133,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         placeholder={name}
                         value={inputs[key] ? `${inputs[key]}` : ''}
                         onChange={(e) => { handleInputValueChange(key, e.target.value) }}
+                        readOnly={readonly}
                       />
                     )}
                     {type === 'select' && (
@@ -142,6 +144,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         items={(options || []).map(i => ({ name: i, value: i }))}
                         allowSearch={false}
                         bgClassName='bg-gray-50'
+                        disabled={readonly}
                       />
                     )}
                     {type === 'number' && (
@@ -152,6 +155,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         placeholder={name}
                         autoFocus={index === 0}
                         maxLength={max_length || DEFAULT_VALUE_MAX_LEN}
+                        readOnly={readonly}
                       />
                     )}
                     {type === 'checkbox' && (
@@ -160,6 +164,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                         value={!!inputs[key]}
                         required={required}
                         onChange={(value) => { handleInputValueChange(key, value) }}
+                        readonly={readonly}
                       />
                     )}
                   </div>
@@ -178,6 +183,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
                       url: fileItem.url,
                       upload_file_id: fileItem.fileId,
                     })))}
+                    disabled={readonly}
                   />
                 </div>
               </div>
@@ -186,12 +192,12 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
         )}
         {!userInputFieldCollapse && (
           <div className='flex justify-between border-t border-divider-subtle p-4 pt-3'>
-            <Button className='w-[72px]' onClick={onClear}>{t('common.operation.clear')}</Button>
+            <Button className='w-[72px]' disabled={readonly} onClick={onClear}>{t('common.operation.clear')}</Button>
             {canNotRun && (
               <Tooltip popupContent={t('appDebug.otherError.promptNoBeEmpty')}>
                 <Button
                   variant="primary"
-                  disabled={canNotRun}
+                  disabled={canNotRun || readonly}
                   onClick={() => onSend?.()}
                   className="w-[96px]">
                   <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
@@ -202,7 +208,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
             {!canNotRun && (
               <Button
                 variant="primary"
-                disabled={canNotRun}
+                disabled={canNotRun || readonly}
                 onClick={() => onSend?.()}
                 className="w-[96px]">
                 <RiPlayLargeFill className="mr-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
@@ -216,7 +222,10 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
         <FeatureBar
           showFileUpload={false}
           isChatMode={appType !== AppType.completion}
-          onFeatureBarClick={setShowAppConfigureFeaturesModal} />
+          onFeatureBarClick={setShowAppConfigureFeaturesModal}
+          disabled={readonly}
+          hideEditEntrance={readonly}
+        />
       </div>
     </>
   )
diff --git a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
index 99aef56250..064d9a6b62 100644
--- a/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/text-generation-image-uploader.tsx
@@ -69,10 +69,12 @@ const PasteImageLinkButton: FC<PasteImageLinkButtonProps> = ({
 type TextGenerationImageUploaderProps = {
   settings: VisionSettings
   onFilesChange: (files: ImageFile[]) => void
+  disabled?: boolean
 }
 const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
   settings,
   onFilesChange,
+  disabled,
 }) => {
   const { t } = useTranslation()
 
@@ -92,7 +94,7 @@ const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
   const localUpload = (
     <Uploader
       onUpload={onUpload}
-      disabled={files.length >= settings.number_limits}
+      disabled={files.length >= settings.number_limits || disabled}
       limit={+settings.image_file_size_limit!}
     >
       {
@@ -113,7 +115,7 @@ const TextGenerationImageUploader: FC<TextGenerationImageUploaderProps> = ({
   const urlUpload = (
     <PasteImageLinkButton
       onUpload={onUpload}
-      disabled={files.length >= settings.number_limits}
+      disabled={files.length >= settings.number_limits || disabled}
     />
   )