diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/index.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/index.tsx
index 5dfe4d9720..b196df1eb2 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/index.tsx
@@ -48,7 +48,7 @@ const Result = () => {
           />
         )}
         {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-          <div className='flex h-full items-center justify-center'>
+          <div className='flex grow items-center justify-center'>
             <Loading />
           </div>
         )}
@@ -59,7 +59,7 @@ const Result = () => {
           />
         )}
         {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-          <div className='flex h-full items-center justify-center'>
+          <div className='flex grow items-center justify-center'>
             <Loading />
           </div>
         )}
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 925a7df2d2..cf709a9ab2 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -308,6 +308,7 @@ const BasePanel: FC<BasePanelProps> = ({
 
   if (isShowSingleRun) {
     const form = getCustomRunForm({
+      nodeId: id,
       payload: data,
       onSuccess: handleAfterCustomSingleRun,
       onCancel: hideSingleRun,
diff --git a/web/app/components/workflow/nodes/data-source/before-run-form.tsx b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
index 0875789021..daf451e54c 100644
--- a/web/app/components/workflow/nodes/data-source/before-run-form.tsx
+++ b/web/app/components/workflow/nodes/data-source/before-run-form.tsx
@@ -1,22 +1,101 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
 import type { CustomRunFormProps, DataSourceNodeType } from './types'
+import { DatasourceType } from '@/models/pipeline'
+import LocalFile from '@/app/components/datasets/documents/create-from-pipeline/data-source/local-file'
+import OnlineDocuments from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-documents'
+import WebsiteCrawl from '@/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl'
+import OnlineDrive from '@/app/components/datasets/documents/create-from-pipeline/data-source/online-drive'
+import { useDataSourceStore } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
+import { useOnlineDocument, useOnlineDrive, useWebsiteCrawl } from '@/app/components/rag-pipeline/components/panel/test-run/preparation/hooks'
 import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import DataSourceProvider from '@/app/components/datasets/documents/create-from-pipeline/data-source/store/provider'
+import PanelWrap from '../_base/components/before-run-form/panel-wrap'
 
 const BeforeRunForm: FC<CustomRunFormProps> = ({
+  nodeId,
   payload,
   onSuccess,
   onCancel,
 }) => {
+  const { t } = useTranslation()
+  const datasourceType = payload.provider_type
+  const datasourceNodeData = payload as DataSourceNodeType
+  const dataSourceStore = useDataSourceStore()
+
+  const { clearOnlineDocumentData } = useOnlineDocument()
+  const { clearWebsiteCrawlData } = useWebsiteCrawl()
+  const { clearOnlineDriveData } = useOnlineDrive()
+
+  const clearDataSourceData = useCallback(() => {
+    if (datasourceType === DatasourceType.onlineDocument)
+      clearOnlineDocumentData()
+    else if (datasourceType === DatasourceType.websiteCrawl)
+      clearWebsiteCrawlData()
+    else if (datasourceType === DatasourceType.onlineDrive)
+      clearOnlineDriveData()
+  }, [datasourceType])
+
+  const handleCredentialChange = useCallback((credentialId: string) => {
+    const { setCurrentCredentialId } = dataSourceStore.getState()
+    clearDataSourceData()
+    setCurrentCredentialId(credentialId)
+  }, [dataSourceStore])
+
+  const handleRun = useCallback(() => {
+    onSuccess()
+  }, [onSuccess])
+
   return (
-    <div>
-      DataSource: {(payload as DataSourceNodeType).datasource_name}
-      <div className='mt-3 flex justify-center space-x-2'>
-        <Button onClick={onSuccess} variant='primary'>Have runned</Button>
-        <Button onClick={onCancel}>Cancel</Button>
+    <PanelWrap
+      nodeName={payload.title}
+      onHide={onCancel}
+    >
+      <div className='flex flex-col gap-y-5 px-4 pt-4'>
+        {datasourceType === DatasourceType.localFile && (
+          <LocalFile
+            allowedExtensions={datasourceNodeData.fileExtensions || []}
+            notSupportBatchUpload={false}
+          />
+        )}
+        {datasourceType === DatasourceType.onlineDocument && (
+          <OnlineDocuments
+            nodeId={nodeId}
+            nodeData={datasourceNodeData}
+            onCredentialChange={handleCredentialChange}
+          />
+        )}
+        {datasourceType === DatasourceType.websiteCrawl && (
+          <WebsiteCrawl
+            nodeId={nodeId}
+            nodeData={datasourceNodeData}
+            onCredentialChange={handleCredentialChange}
+          />
+        )}
+        {datasourceType === DatasourceType.onlineDrive && (
+          <OnlineDrive
+            nodeId={nodeId}
+            nodeData={datasourceNodeData}
+            onCredentialChange={handleCredentialChange}
+          />
+        )}
+        <div className='flex justify-end gap-x-2'>
+          <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+          <Button onClick={handleRun} variant='primary'>{t('workflow.singleRun.startRun')}</Button>
+        </div>
       </div>
-    </div>
+    </PanelWrap>
   )
 }
-export default React.memo(BeforeRunForm)
+
+const BeforeRunFormWrapper = (props: CustomRunFormProps) => {
+  return (
+    <DataSourceProvider>
+      <BeforeRunForm {...props} />
+    </DataSourceProvider>
+  )
+}
+
+export default React.memo(BeforeRunFormWrapper)
diff --git a/web/app/components/workflow/nodes/data-source/types.ts b/web/app/components/workflow/nodes/data-source/types.ts
index 6d586734bd..60bcfd58ee 100644
--- a/web/app/components/workflow/nodes/data-source/types.ts
+++ b/web/app/components/workflow/nodes/data-source/types.ts
@@ -34,6 +34,7 @@ export type DataSourceNodeType = CommonNodeType & {
 }
 
 export type CustomRunFormProps = {
+  nodeId: string
   payload: CommonNodeType
   onSuccess: () => void
   onCancel: () => void