diff --git a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
new file mode 100644
index 0000000000..1837466f79
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next'
+import { AddDocumentsStep } from './types'
+
+export const useAddDocumentsSteps = () => {
+ const { t } = useTranslation()
+ const steps = [
+ {
+ label: t('datasetPipeline.addDocuments.steps.chooseDatasource'),
+ value: AddDocumentsStep.dataSource,
+ },
+ {
+ label: t('datasetPipeline.addDocuments.steps.ProcessDocuments'),
+ value: AddDocumentsStep.processDocuments,
+ },
+ {
+ label: t('datasetPipeline.addDocuments.steps.ProcessingDocuments'),
+ value: AddDocumentsStep.processingDocuments,
+ },
+ ]
+ return steps
+}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
new file mode 100644
index 0000000000..7736b07eda
--- /dev/null
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -0,0 +1,217 @@
+'use client'
+import { useCallback, useMemo, useState } from 'react'
+// import StepIndicator from './step-indicator'
+// import { useTestRunSteps } from './hooks'
+// import DataSourceOptions from './data-source-options'
+import type { CrawlResultItem, FileItem } from '@/models/datasets'
+import { DataSourceType } from '@/models/datasets'
+// import LocalFile from './data-source/local-file'
+import produce from 'immer'
+import { useProviderContextSelector } from '@/context/provider-context'
+import { DataSourceProvider, type NotionPage } from '@/models/common'
+// import Notion from './data-source/notion'
+import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+// import Firecrawl from './data-source/website/firecrawl'
+// import JinaReader from './data-source/website/jina-reader'
+// import WaterCrawl from './data-source/website/water-crawl'
+// import Actions from './data-source/actions'
+// import DocumentProcessing from './document-processing'
+import { useTranslation } from 'react-i18next'
+import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
+import LocalFile from '@/app/components/rag-pipeline/components/panel/test-run/data-source/local-file'
+import Notion from '@/app/components/rag-pipeline/components/panel/test-run/data-source/notion'
+import FireCrawl from '@/app/components/rag-pipeline/components/panel/test-run/data-source/website/firecrawl'
+import JinaReader from '@/app/components/rag-pipeline/components/panel/test-run/data-source/website/jina-reader'
+import WaterCrawl from '@/app/components/rag-pipeline/components/panel/test-run/data-source/website/water-crawl'
+import Actions from '@/app/components/rag-pipeline/components/panel/test-run/data-source/actions'
+import DocumentProcessing from '@/app/components/rag-pipeline/components/panel/test-run/document-processing'
+import LeftHeader from './left-header'
+// import { usePipelineRun } from '../../../hooks'
+// import type { Datasource } from './types'
+
+const TestRunPanel = () => {
+ const { t } = useTranslation()
+ const [currentStep, setCurrentStep] = useState(1)
+ const [datasource, setDatasource] = useState
()
+ const [fileList, setFiles] = useState([])
+ const [notionPages, setNotionPages] = useState([])
+ const [websitePages, setWebsitePages] = useState([])
+ const [websiteCrawlJobId, setWebsiteCrawlJobId] = useState('')
+
+ const plan = useProviderContextSelector(state => state.plan)
+ const enableBilling = useProviderContextSelector(state => state.enableBilling)
+
+ // const steps = useTestRunSteps()
+
+ const allFileLoaded = (fileList.length > 0 && fileList.every(file => file.file.id))
+ const isVectorSpaceFull = plan.usage.vectorSpace >= plan.total.vectorSpace
+ const isShowVectorSpaceFull = allFileLoaded && isVectorSpaceFull && enableBilling
+ const notSupportBatchUpload = enableBilling && plan.type === 'sandbox'
+ const nextDisabled = useMemo(() => {
+ if (!fileList.length)
+ return true
+ if (fileList.some(file => !file.file.id))
+ return true
+ return isShowVectorSpaceFull
+ }, [fileList, isShowVectorSpaceFull])
+
+ const nextBtnDisabled = useMemo(() => {
+ if (!datasource) return true
+ if (datasource.type === DataSourceType.FILE)
+ return nextDisabled
+ if (datasource.type === DataSourceType.NOTION)
+ return isShowVectorSpaceFull || !notionPages.length
+ if (datasource.type === DataSourceProvider.fireCrawl
+ || datasource.type === DataSourceProvider.jinaReader
+ || datasource.type === DataSourceProvider.waterCrawl)
+ return isShowVectorSpaceFull || !websitePages.length
+ return false
+ }, [datasource, nextDisabled, isShowVectorSpaceFull, notionPages.length, websitePages.length])
+
+ const updateFile = (fileItem: FileItem, progress: number, list: FileItem[]) => {
+ const newList = produce(list, (draft) => {
+ const targetIndex = draft.findIndex(file => file.fileID === fileItem.fileID)
+ draft[targetIndex] = {
+ ...draft[targetIndex],
+ progress,
+ }
+ })
+ setFiles(newList)
+ }
+
+ const updateFileList = (preparedFiles: FileItem[]) => {
+ setFiles(preparedFiles)
+ }
+
+ const updateNotionPages = (value: NotionPage[]) => {
+ setNotionPages(value)
+ }
+
+ const handleNextStep = useCallback(() => {
+ setCurrentStep(preStep => preStep + 1)
+ }, [])
+
+ const handleBackStep = useCallback(() => {
+ setCurrentStep(preStep => preStep - 1)
+ }, [])
+
+ // const { handleRun } = usePipelineRun()
+
+ const handleProcess = useCallback((data: Record) => {
+ if (!datasource)
+ return
+ const datasourceInfo: Record = {}
+ let datasource_type = ''
+ if (datasource.type === DataSourceType.FILE) {
+ datasource_type = 'local_file'
+ datasourceInfo.fileId = fileList.map(file => file.fileID)
+ }
+ if (datasource.type === DataSourceType.NOTION) {
+ datasource_type = 'online_document'
+ datasourceInfo.workspaceId = notionPages[0].workspace_id
+ datasourceInfo.page = notionPages.map((page) => {
+ const { workspace_id, ...rest } = page
+ return rest
+ })
+ }
+ if (datasource.type === DataSourceProvider.fireCrawl
+ || datasource.type === DataSourceProvider.jinaReader
+ || datasource.type === DataSourceProvider.waterCrawl) {
+ datasource_type = 'website_crawl'
+ datasourceInfo.jobId = websiteCrawlJobId
+ datasourceInfo.result = websitePages
+ }
+ // handleRun({
+ // inputs: data,
+ // datasource_type,
+ // datasource_info: datasourceInfo,
+ // })
+ }, [datasource, fileList, notionPages, websiteCrawlJobId, websitePages])
+
+ return (
+
+
+
+
+ {
+ currentStep === 1 && (
+ <>
+
+ {/* */}
+ {datasource?.type === DataSourceType.FILE && (
+
+ )}
+ {datasource?.type === DataSourceType.NOTION && (
+
+ )}
+ {datasource?.type === DataSourceProvider.fireCrawl && (
+
+ )}
+ {datasource?.type === DataSourceProvider.jinaReader && (
+
+ )}
+ {datasource?.type === DataSourceProvider.waterCrawl && (
+
+ )}
+ {isShowVectorSpaceFull && (
+
+ )}
+
+
+
+ )
+ }
+ {
+ currentStep === 2 && (
+
+ )
+ }
+
+
+ {/* Preview */}
+
+
+
+
+
+ {title}
+
+ /
+
+
+
+ {steps[currentStep - 1]?.label}
+
+
+
+
+
+
+ {steps.map((step, index) => {
+ const isActive = index === currentStep - 1
+ return (
+
+ )
+ })}
+