diff --git a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
index 6879de1982..910b8243d4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
+++ b/web/app/components/datasets/documents/create-from-pipeline/hooks.ts
@@ -7,6 +7,7 @@ import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-so
 import { useDataSourceStore, useDataSourceStoreWithSelector } from './data-source/store'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
 import { useShallow } from 'zustand/react/shallow'
+import { CrawlStep } from '@/models/datasets'
 
 export const useAddDocumentsSteps = () => {
   const { t } = useTranslation()
@@ -120,12 +121,28 @@ export const useOnlineDocument = () => {
     setCurrentDocument(undefined)
   }, [dataSourceStore])
 
+  const clearOnlineDocumentData = useCallback(() => {
+    const {
+      setDocumentsData,
+      setSearchValue,
+      setSelectedPagesId,
+      setOnlineDocuments,
+      setCurrentDocument,
+    } = dataSourceStore.getState()
+    setDocumentsData([])
+    setSearchValue('')
+    setSelectedPagesId(new Set())
+    setOnlineDocuments([])
+    setCurrentDocument(undefined)
+  }, [dataSourceStore])
+
   return {
     currentWorkspace,
     onlineDocuments,
     currentDocument,
     PagesMapAndSelectedPagesId,
     hidePreviewOnlineDocument,
+    clearOnlineDocumentData,
   }
 }
 
@@ -145,10 +162,26 @@ export const useWebsiteCrawl = () => {
     setPreviewIndex(-1)
   }, [dataSourceStore])
 
+  const clearWebsiteCrawlData = useCallback(() => {
+    const {
+      setStep,
+      setCrawlResult,
+      setWebsitePages,
+      setPreviewIndex,
+      setCurrentWebsite,
+    } = dataSourceStore.getState()
+    setStep(CrawlStep.init)
+    setCrawlResult(undefined)
+    setCurrentWebsite(undefined)
+    setWebsitePages([])
+    setPreviewIndex(-1)
+  }, [dataSourceStore])
+
   return {
     websitePages,
     currentWebsite,
     hideWebsitePreview,
+    clearWebsiteCrawlData,
   }
 }
 
@@ -160,14 +193,31 @@ export const useOnlineDrive = () => {
     fileList: state.fileList,
     selectedFileKeys: state.selectedFileKeys,
   })))
+  const dataSourceStore = useDataSourceStore()
 
   const selectedOnlineDriveFileList = useMemo(() => {
     return selectedFileKeys.map(key => fileList.find(item => item.key === key)!)
   }, [fileList, selectedFileKeys])
 
+  const clearOnlineDriveData = useCallback(() => {
+    const {
+      setFileList,
+      setBucket,
+      setPrefix,
+      setKeywords,
+      setSelectedFileKeys,
+    } = dataSourceStore.getState()
+    setFileList([])
+    setBucket('')
+    setPrefix([])
+    setKeywords('')
+    setSelectedFileKeys([])
+  }, [dataSourceStore])
+
   return {
     fileList,
     selectedFileKeys,
     selectedOnlineDriveFileList,
+    clearOnlineDriveData,
   }
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
index 8384c2d7c1..6a9d8b50ac 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -72,16 +72,19 @@ const CreateFormPipeline = () => {
     currentDocument,
     PagesMapAndSelectedPagesId,
     hidePreviewOnlineDocument,
+    clearOnlineDocumentData,
   } = useOnlineDocument()
   const {
     websitePages,
     currentWebsite,
     hideWebsitePreview,
+    clearWebsiteCrawlData,
   } = useWebsiteCrawl()
   const {
     fileList: onlineDriveFileList,
     selectedFileKeys,
     selectedOnlineDriveFileList,
+    clearOnlineDriveData,
   } = useOnlineDrive()
 
   const datasourceType = datasource?.nodeData.provider_type
@@ -351,6 +354,32 @@ const CreateFormPipeline = () => {
     }
   }, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType])
 
+  const clearDataSourceData = useCallback((dataSource: Datasource) => {
+    if (dataSource.nodeData.provider_type === DatasourceType.onlineDocument)
+      clearOnlineDocumentData()
+    else if (dataSource.nodeData.provider_type === DatasourceType.websiteCrawl)
+      clearWebsiteCrawlData()
+    else if (dataSource.nodeData.provider_type === DatasourceType.onlineDrive)
+      clearOnlineDriveData()
+  }, [])
+
+  const handleSwitchDataSource = useCallback((dataSource: Datasource) => {
+    const {
+      setCurrentCredentialId,
+      currentNodeIdRef,
+    } = dataSourceStore.getState()
+    clearDataSourceData(dataSource)
+    setCurrentCredentialId('')
+    currentNodeIdRef.current = dataSource.nodeId
+    setDatasource(dataSource)
+  }, [dataSourceStore])
+
+  const handleCredentialChange = useCallback((credentialId: string) => {
+    const { setCurrentCredentialId } = dataSourceStore.getState()
+    clearDataSourceData(datasource!)
+    setCurrentCredentialId(credentialId)
+  }, [dataSourceStore, datasource])
+
   if (isFetchingPipelineInfo) {
     return (
       <Loading type='app' />
@@ -374,7 +403,7 @@ const CreateFormPipeline = () => {
                 <div className='flex flex-col gap-y-5 pt-4'>
                   <DataSourceOptions
                     datasourceNodeId={datasource?.nodeId || ''}
-                    onSelect={setDatasource}
+                    onSelect={handleSwitchDataSource}
                     pipelineNodes={(pipelineInfo?.graph.nodes || []) as Node<DataSourceNodeType>[]}
                   />
                   {datasourceType === DatasourceType.localFile && (
@@ -387,18 +416,21 @@ const CreateFormPipeline = () => {
                     <OnlineDocuments
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
                     />
                   )}
                   {datasourceType === DatasourceType.websiteCrawl && (
                     <WebsiteCrawl
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
                     />
                   )}
                   {datasourceType === DatasourceType.onlineDrive && (
                     <OnlineDrive
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
+                      onCredentialChange={handleCredentialChange}
                     />
                   )}
                   {isShowVectorSpaceFull && (