diff --git a/web/app/components/app/configuration/config-var/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index 78ed4b1031..9b11d65589 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -33,7 +33,7 @@ const VarItem: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center  rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed opacity-30')}>
+    <div className={cn('group relative mb-1 flex h-[34px] w-full items-center  rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover', readonly && 'cursor-not-allowed')}>
       <VarIcon className='mr-1 h-4 w-4 shrink-0 text-text-accent' />
       <div className='flex w-0 grow items-center'>
         <div className='truncate' title={`${name} · ${label}`}>
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index 3e8b5f1caa..79bae2bcd3 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -79,7 +79,8 @@ const Config: FC = () => {
 
         {/* Dataset */}
         <DatasetConfig
-          // readonly={readonly}
+          readonly={readonly}
+          hideMetadataFilter={readonly}
         />
 
         {/* Tools */}
diff --git a/web/app/components/app/configuration/dataset-config/card-item/item.tsx b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
index b671d9c146..60200c4a8d 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/item.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
@@ -29,6 +29,7 @@ const Item: FC<ItemProps> = ({
   config,
   onSave,
   onRemove,
+  readonly = false,
   editable = true,
 }) => {
   const media = useBreakpoints()
@@ -55,6 +56,7 @@ const Item: FC<ItemProps> = ({
     <div className={cn(
       'group relative mb-1 flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover',
       isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover',
+      readonly && 'cursor-not-allowed',
     )}>
       <div className='flex w-0 grow items-center space-x-1.5'>
         <AppIcon
@@ -68,7 +70,7 @@ const Item: FC<ItemProps> = ({
       </div>
       <div className='ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex'>
         {
-          editable && <ActionButton
+          editable && !readonly && <ActionButton
             onClick={(e) => {
               e.stopPropagation()
               setShowSettingsModal(true)
@@ -77,14 +79,18 @@ const Item: FC<ItemProps> = ({
             <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
           </ActionButton>
         }
-        <ActionButton
-          onClick={() => onRemove(config.id)}
-          state={isDeleting ? ActionButtonState.Destructive : ActionButtonState.Default}
-          onMouseEnter={() => setIsDeleting(true)}
-          onMouseLeave={() => setIsDeleting(false)}
-        >
-          <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
-        </ActionButton>
+        {
+          !readonly && (
+            <ActionButton
+              onClick={() => onRemove(config.id)}
+              state={isDeleting ? ActionButtonState.Destructive : ActionButtonState.Default}
+              onMouseEnter={() => setIsDeleting(true)}
+              onMouseLeave={() => setIsDeleting(false)}
+            >
+              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
+            </ActionButton>
+          )
+        }
       </div>
       {
         config.indexing_technique && <Badge
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 65ef74bc27..fa1103933c 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -37,7 +37,11 @@ import {
   MetadataFilteringVariableType,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
-const DatasetConfig: FC = () => {
+type Props = {
+  readonly?: boolean
+  hideMetadataFilter?: boolean
+}
+const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
   const { t } = useTranslation()
   const userProfile = useAppContextSelector(s => s.userProfile)
   const {
@@ -254,10 +258,10 @@ const DatasetConfig: FC = () => {
       className='mt-2'
       title={t('appDebug.feature.dataSet.title')}
       headerRight={
-        <div className='flex items-center gap-1'>
+        !readonly && (<div className='flex items-center gap-1'>
           {!isAgent && <ParamsConfig disabled={!hasData} selectedDatasets={dataSet} />}
           <OperationBtn type="add" onClick={showSelectDataSet} />
-        </div>
+        </div>)
       }
       hasHeaderBottomBorder={!hasData}
       noBodySpacing
@@ -271,7 +275,8 @@ const DatasetConfig: FC = () => {
                 config={item}
                 onRemove={onRemove}
                 onSave={handleSave}
-                editable={item.editable}
+                editable={item.editable && !readonly}
+                readonly={readonly}
               />
             ))}
           </div>
@@ -282,25 +287,27 @@ const DatasetConfig: FC = () => {
           </div>
         )}
 
-      <div className='border-t border-t-divider-subtle py-2'>
-        <MetadataFilter
-          metadataList={metadataList}
-          selectedDatasetsLoaded
-          metadataFilterMode={datasetConfigs.metadata_filtering_mode}
-          metadataFilteringConditions={datasetConfigs.metadata_filtering_conditions}
-          handleAddCondition={handleAddCondition}
-          handleMetadataFilterModeChange={handleMetadataFilterModeChange}
-          handleRemoveCondition={handleRemoveCondition}
-          handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
-          handleUpdateCondition={handleUpdateCondition}
-          metadataModelConfig={datasetConfigs.metadata_model_config}
-          handleMetadataModelChange={handleMetadataModelChange}
-          handleMetadataCompletionParamsChange={handleMetadataCompletionParamsChange}
-          isCommonVariable
-          availableCommonStringVars={promptVariablesToSelect.filter(item => item.type === MetadataFilteringVariableType.string || item.type === MetadataFilteringVariableType.select)}
-          availableCommonNumberVars={promptVariablesToSelect.filter(item => item.type === MetadataFilteringVariableType.number)}
-        />
-      </div>
+      {!hideMetadataFilter && (
+        <div className='border-t border-t-divider-subtle py-2'>
+          <MetadataFilter
+            metadataList={metadataList}
+            selectedDatasetsLoaded
+            metadataFilterMode={datasetConfigs.metadata_filtering_mode}
+            metadataFilteringConditions={datasetConfigs.metadata_filtering_conditions}
+            handleAddCondition={handleAddCondition}
+            handleMetadataFilterModeChange={handleMetadataFilterModeChange}
+            handleRemoveCondition={handleRemoveCondition}
+            handleToggleConditionLogicalOperator={handleToggleConditionLogicalOperator}
+            handleUpdateCondition={handleUpdateCondition}
+            metadataModelConfig={datasetConfigs.metadata_model_config}
+            handleMetadataModelChange={handleMetadataModelChange}
+            handleMetadataCompletionParamsChange={handleMetadataCompletionParamsChange}
+            isCommonVariable
+            availableCommonStringVars={promptVariablesToSelect.filter(item => item.type === MetadataFilteringVariableType.string || item.type === MetadataFilteringVariableType.select)}
+            availableCommonNumberVars={promptVariablesToSelect.filter(item => item.type === MetadataFilteringVariableType.number)}
+          />
+        </div>
+      )}
 
       {mode === AppType.completion && dataSet.length > 0 && (
         <ContextVar
diff --git a/web/app/components/app/configuration/debug/index.tsx b/web/app/components/app/configuration/debug/index.tsx
index 9a50d1b872..c4038cc36d 100644
--- a/web/app/components/app/configuration/debug/index.tsx
+++ b/web/app/components/app/configuration/debug/index.tsx
@@ -70,6 +70,7 @@ const Debug: FC<IDebug> = ({
 }) => {
   const { t } = useTranslation()
   const {
+    readonly,
     appId,
     mode,
     modelModeType,
@@ -413,19 +414,23 @@ const Debug: FC<IDebug> = ({
             }
             {mode !== AppType.completion && (
               <>
-                <TooltipPlus
-                  popupContent={t('common.operation.refresh')}
-                >
-                  <ActionButton onClick={clearConversation}>
-                    <RefreshCcw01 className='h-4 w-4' />
-                  </ActionButton>
-                </TooltipPlus>
+                {!readonly && (
+                  <TooltipPlus
+                    popupContent={t('common.operation.refresh')}
+                  >
+                    <ActionButton onClick={clearConversation}>
+                      <RefreshCcw01 className='h-4 w-4' />
+                    </ActionButton>
+
+                  </TooltipPlus>
+                )}
+
                 {varList.length > 0 && (
                   <div className='relative ml-1 mr-2'>
                     <TooltipPlus
                       popupContent={t('workflow.panel.userInputField')}
                     >
-                      <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                      <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => !readonly && setExpanded(!expanded)}>
                         <RiEqualizer2Line className='h-4 w-4' />
                       </ActionButton>
                     </TooltipPlus>
@@ -553,7 +558,7 @@ const Debug: FC<IDebug> = ({
           onCancel={handleCancel}
         />
       )}
-      {!isAPIKeySet && (<HasNotSetAPIKEY isTrailFinished={!IS_CE_EDITION} onSetting={onSetting} />)}
+      {!isAPIKeySet && !readonly && (<HasNotSetAPIKEY isTrailFinished={!IS_CE_EDITION} onSetting={onSetting} />)}
     </>
   )
 }
diff --git a/web/app/components/app/configuration/preview.tsx b/web/app/components/app/configuration/preview.tsx
index eceb4972aa..7679ee13b6 100644
--- a/web/app/components/app/configuration/preview.tsx
+++ b/web/app/components/app/configuration/preview.tsx
@@ -305,7 +305,7 @@ const Configuration: FC<Props> = ({
   return (
     <ConfigContext.Provider value={value as any}>
       <FeaturesProvider features={featuresData}>
-        <div className="flex h-full flex-col">
+        <div className="flex h-full flex-col bg-components-panel-on-panel-item-bg">
           <div className='relative flex h-[200px] grow'>
             <div className={'flex h-full w-full shrink-0 flex-col sm:w-1/2'}>
               <Config />