diff --git a/web/app/components/rag-pipeline/components/panel/index.tsx b/web/app/components/rag-pipeline/components/panel/index.tsx
index 3ce6bc7b1f..14140e41f0 100644
--- a/web/app/components/rag-pipeline/components/panel/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/index.tsx
@@ -5,12 +5,19 @@ import {
 import type { PanelProps } from '@/app/components/workflow/panel'
 import Panel from '@/app/components/workflow/panel'
 import { useStore } from '@/app/components/workflow/store'
+import Record from '@/app/components/workflow/panel/record'
 import TestRunPanel from './test-run'
 
 const RagPipelinePanelOnRight = () => {
+  const historyWorkflowData = useStore(s => s.historyWorkflowData)
   const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   return (
     <>
+      {
+        historyWorkflowData && (
+          <Record />
+        )
+      }
       {showDebugAndPreviewPanel && <TestRunPanel />}
     </>
   )
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx
index a96acbc19c..9b02b99636 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx
@@ -7,9 +7,9 @@ import RagPipelineChildren from './rag-pipeline-children'
 import {
   useAvailableNodesMetaData,
   useNodesSyncDraft,
-  useWorkflowRefreshDraft,
-  useWorkflowRun,
-  useWorkflowStartRun,
+  usePipelineRefreshDraft,
+  usePipelineRun,
+  usePipelineStartRun,
 } from '../hooks'
 
 type RagPipelineMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
@@ -22,18 +22,18 @@ const RagPipelineMain = ({
     doSyncWorkflowDraft,
     syncWorkflowDraftWhenPageClose,
   } = useNodesSyncDraft()
-  const { handleRefreshWorkflowDraft } = useWorkflowRefreshDraft()
+  const { handleRefreshWorkflowDraft } = usePipelineRefreshDraft()
   const {
     handleBackupDraft,
     handleLoadBackupDraft,
     handleRestoreFromPublishedWorkflow,
     handleRun,
     handleStopRun,
-  } = useWorkflowRun()
+  } = usePipelineRun()
   const {
     handleStartWorkflowRun,
     handleWorkflowStartRunInWorkflow,
-  } = useWorkflowStartRun()
+  } = usePipelineStartRun()
   const availableNodesMetaData = useAvailableNodesMetaData()
 
   const hooksStore = useMemo(() => {
diff --git a/web/app/components/rag-pipeline/hooks/index.ts b/web/app/components/rag-pipeline/hooks/index.ts
index f4e5fa491b..011424bd6c 100644
--- a/web/app/components/rag-pipeline/hooks/index.ts
+++ b/web/app/components/rag-pipeline/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './use-available-nodes-meta-data'
-export * from './use-workflow-refresh-draft'
+export * from './use-pipeline-refresh-draft'
 export * from './use-nodes-sync-draft'
-export * from './use-workflow-run'
-export * from './use-workflow-start-run'
+export * from './use-pipeline-run'
+export * from './use-pipeline-start-run'
+export * from './use-pipeline-init'
diff --git a/web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts b/web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts
index 230e7c038b..30b0ced0ab 100644
--- a/web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts
@@ -46,7 +46,7 @@ export const useNodesSyncDraft = () => {
         })
       })
       return {
-        url: `/datasets/${pipelineId}/workflows/draft`,
+        url: `/rag/pipeline/${pipelineId}/workflows/draft`,
         params: {
           graph: {
             nodes: producedNodes,
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
new file mode 100644
index 0000000000..7d7bdcb531
--- /dev/null
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
@@ -0,0 +1,118 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { useParams } from 'next/navigation'
+import {
+  useStore,
+  useWorkflowStore,
+} from '@/app/components/workflow/store'
+import { usePipelineTemplate } from './use-pipeline-template'
+import {
+  fetchNodesDefaultConfigs,
+  fetchPublishedWorkflow,
+  fetchWorkflowDraft,
+  syncWorkflowDraft,
+} from '@/service/workflow'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
+// import { useWorkflowConfig } from '@/service/use-workflow'
+
+export const usePipelineInit = () => {
+  const { datasetId } = useParams()
+  const workflowStore = useWorkflowStore()
+  const {
+    nodes: nodesTemplate,
+    edges: edgesTemplate,
+  } = usePipelineTemplate()
+  const setSyncWorkflowDraftHash = useStore(s => s.setSyncWorkflowDraftHash)
+  const [data, setData] = useState<FetchWorkflowDraftResponse>()
+  const [isLoading, setIsLoading] = useState(true)
+  useEffect(() => {
+    // workflowStore.setState({ pipelineId: datasetId as string })
+  }, [datasetId, workflowStore])
+
+  const handleUpdateWorkflowConfig = useCallback((config: Record<string, any>) => {
+    const { setWorkflowConfig } = workflowStore.getState()
+
+    setWorkflowConfig(config)
+  }, [workflowStore])
+  // useWorkflowConfig(`/rag/pipeline/${datasetId}/workflows/draft/config`, handleUpdateWorkflowConfig)
+
+  const handleGetInitialWorkflowData = useCallback(async () => {
+    try {
+      const res = await fetchWorkflowDraft(`/rag/pipeline/${datasetId}/workflows/draft`)
+      setData(res)
+      workflowStore.setState({
+        envSecrets: (res.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
+          acc[env.id] = env.value
+          return acc
+        }, {} as Record<string, string>),
+        environmentVariables: res.environment_variables?.map(env => env.value_type === 'secret' ? { ...env, value: '[__HIDDEN__]' } : env) || [],
+      })
+      setSyncWorkflowDraftHash(res.hash)
+      setIsLoading(false)
+    }
+    catch (error: any) {
+      if (error && error.json && !error.bodyUsed && datasetId) {
+        error.json().then((err: any) => {
+          if (err.code === 'draft_workflow_not_exist') {
+            workflowStore.setState({ notInitialWorkflow: true })
+            syncWorkflowDraft({
+              url: `/rag/pipeline/${datasetId}/workflows/draft`,
+              params: {
+                graph: {
+                  nodes: nodesTemplate,
+                  edges: edgesTemplate,
+                },
+                environment_variables: [],
+              },
+            }).then((res) => {
+              workflowStore.getState().setDraftUpdatedAt(res.updated_at)
+              handleGetInitialWorkflowData()
+            })
+          }
+        })
+      }
+    }
+  }, [nodesTemplate, edgesTemplate, workflowStore, setSyncWorkflowDraftHash, datasetId])
+
+  useEffect(() => {
+    // handleGetInitialWorkflowData()
+
+  }, [])
+
+  const handleFetchPreloadData = useCallback(async () => {
+    try {
+      const nodesDefaultConfigsData = await fetchNodesDefaultConfigs(`/rag/pipeline/${datasetId}/workflows/default-workflow-block-configs`)
+      const publishedWorkflow = await fetchPublishedWorkflow(`/rag/pipeline/${datasetId}/workflows/publish`)
+      workflowStore.setState({
+        nodesDefaultConfigs: nodesDefaultConfigsData.reduce((acc, block) => {
+          if (!acc[block.type])
+            acc[block.type] = { ...block.config }
+          return acc
+        }, {} as Record<string, any>),
+      })
+      workflowStore.getState().setPublishedAt(publishedWorkflow?.created_at)
+    }
+    catch (e) {
+      console.error(e)
+    }
+  }, [workflowStore, datasetId])
+
+  useEffect(() => {
+    // handleFetchPreloadData()
+  }, [handleFetchPreloadData])
+
+  useEffect(() => {
+    if (data) {
+      workflowStore.getState().setDraftUpdatedAt(data.updated_at)
+      workflowStore.getState().setToolPublished(data.tool_published)
+    }
+  }, [data, workflowStore])
+
+  return {
+    data,
+    isLoading,
+  }
+}
diff --git a/web/app/components/rag-pipeline/hooks/use-workflow-refresh-draft.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-refresh-draft.ts
similarity index 78%
rename from web/app/components/rag-pipeline/hooks/use-workflow-refresh-draft.ts
rename to web/app/components/rag-pipeline/hooks/use-pipeline-refresh-draft.ts
index e87c5b049c..4d866495bc 100644
--- a/web/app/components/rag-pipeline/hooks/use-workflow-refresh-draft.ts
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-refresh-draft.ts
@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-export const useWorkflowRefreshDraft = () => {
+export const usePipelineRefreshDraft = () => {
   const handleRefreshWorkflowDraft = useCallback(() => {
     return true
   }, [])
diff --git a/web/app/components/rag-pipeline/hooks/use-workflow-run.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-run.ts
similarity index 99%
rename from web/app/components/rag-pipeline/hooks/use-workflow-run.ts
rename to web/app/components/rag-pipeline/hooks/use-pipeline-run.ts
index 1e04d1dfbb..1c4ffc0131 100644
--- a/web/app/components/rag-pipeline/hooks/use-workflow-run.ts
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-run.ts
@@ -14,7 +14,7 @@ import { stopWorkflowRun } from '@/service/workflow'
 import type { VersionHistory } from '@/types/workflow'
 import { useNodesSyncDraft } from './use-nodes-sync-draft'
 
-export const useWorkflowRun = () => {
+export const usePipelineRun = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const reactflow = useReactFlow()
diff --git a/web/app/components/rag-pipeline/hooks/use-workflow-start-run.tsx b/web/app/components/rag-pipeline/hooks/use-pipeline-start-run.tsx
similarity index 94%
rename from web/app/components/rag-pipeline/hooks/use-workflow-start-run.tsx
rename to web/app/components/rag-pipeline/hooks/use-pipeline-start-run.tsx
index 37c610cd16..ea1add4233 100644
--- a/web/app/components/rag-pipeline/hooks/use-workflow-start-run.tsx
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-start-run.tsx
@@ -8,14 +8,14 @@ import {
 import { useWorkflowInteractions } from '@/app/components/workflow/hooks'
 import {
   useNodesSyncDraft,
-  useWorkflowRun,
+  usePipelineRun,
 } from '.'
 
-export const useWorkflowStartRun = () => {
+export const usePipelineStartRun = () => {
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
-  const { handleRun } = useWorkflowRun()
+  const { handleRun } = usePipelineRun()
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
 
   const handleWorkflowStartRunInWorkflow = useCallback(async () => {
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts
new file mode 100644
index 0000000000..dc62f27ad2
--- /dev/null
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-template.ts
@@ -0,0 +1,6 @@
+export const usePipelineTemplate = () => {
+  return {
+    nodes: [],
+    edges: [],
+  }
+}
diff --git a/web/app/components/rag-pipeline/index.tsx b/web/app/components/rag-pipeline/index.tsx
index abb8799803..f1f0b71a01 100644
--- a/web/app/components/rag-pipeline/index.tsx
+++ b/web/app/components/rag-pipeline/index.tsx
@@ -11,8 +11,13 @@ import {
 } from '@/app/components/workflow/constants'
 import { createRagPipelineSliceSlice } from './store'
 import RagPipelineMain from './components/rag-pipeline-main'
+// import { usePipelineInit } from './hooks'
 
 const RagPipeline = () => {
+  // const {
+  //   data,
+  //   isLoading,
+  // } = usePipelineInit()
   const { newNode: knowledgeBaseNode } = generateNewNode({
     data: {
       type: knowledgeBaseNodeDefault.metaData.type,
diff --git a/web/app/components/workflow-app/hooks/use-workflow-init.ts b/web/app/components/workflow-app/hooks/use-workflow-init.ts
index e1c4c25a4e..ea41a32ffd 100644
--- a/web/app/components/workflow-app/hooks/use-workflow-init.ts
+++ b/web/app/components/workflow-app/hooks/use-workflow-init.ts
@@ -37,7 +37,7 @@ export const useWorkflowInit = () => {
 
     setWorkflowConfig(config)
   }, [workflowStore])
-  useWorkflowConfig(appDetail.id, handleUpdateWorkflowConfig)
+  useWorkflowConfig(`/apps/${appDetail.id}/workflows/draft/config`, handleUpdateWorkflowConfig)
 
   const handleGetInitialWorkflowData = useCallback(async () => {
     try {
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index caa993ba80..b058de201d 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -21,11 +21,11 @@ export const useAppWorkflow = (appID: string) => {
   })
 }
 
-export const useWorkflowConfig = (appId: string, onSuccess: (v: WorkflowConfigResponse) => void) => {
+export const useWorkflowConfig = (url: string, onSuccess: (v: WorkflowConfigResponse) => void) => {
   return useQuery({
-    queryKey: [NAME_SPACE, 'config', appId],
+    queryKey: [NAME_SPACE, 'config', url],
     queryFn: async () => {
-      const data = await get<WorkflowConfigResponse>(`/apps/${appId}/workflows/draft/config`)
+      const data = await get<WorkflowConfigResponse>(url)
       onSuccess(data)
       return data
     },