dify

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { DataSourceCredential } from '@/types/pipeline'
+import { useBoolean } from 'ahooks'
+import Trigger from './trigger'
+import List from './list'
+
+export type CredentialSelectorProps = {
+  pluginName: string
+  currentCredentialId: string
+  onCredentialChange: (credentialId: string) => void
+  credentials: Array<DataSourceCredential>
+}
+
+const CredentialSelector = ({
+  pluginName,
+  currentCredentialId,
+  onCredentialChange,
+  credentials,
+}: CredentialSelectorProps) => {
+  const [open, { toggle }] = useBoolean(false)
+
+  const currentCredential = useMemo(() => {
+    return credentials.find(cred => cred.id === currentCredentialId)
+  }, [credentials, currentCredentialId])
+
+  useEffect(() => {
+    if (!currentCredential && credentials.length)
+      onCredentialChange(credentials[0].id)
+  }, [currentCredential, credentials])
+
+  const handleCredentialChange = useCallback((credentialId: string) => {
+    onCredentialChange(credentialId)
+    toggle()
+  }, [onCredentialChange, toggle])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={toggle}
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={toggle} className='grow overflow-hidden'>
+        <Trigger
+          currentCredential={currentCredential}
+          pluginName={pluginName}
+          isOpen={open}
+        />
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <List
+          currentCredentialId={currentCredentialId}
+          credentials={credentials}
+          pluginName={pluginName}
+          onCredentialChange={handleCredentialChange}
+        />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(CredentialSelector)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/item.tsx

@@ -0,0 +1,52 @@
+import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
+import type { DataSourceCredential } from '@/types/pipeline'
+import { RiCheckLine } from '@remixicon/react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+type ItemProps = {
+  credential: DataSourceCredential
+  pluginName: string
+  isSelected: boolean
+  onCredentialChange: (credentialId: string) => void
+}
+
+const Item = ({
+  credential,
+  pluginName,
+  isSelected,
+  onCredentialChange,
+}: ItemProps) => {
+  const { t } = useTranslation()
+  const { avatar_url, name } = credential
+
+  const handleCredentialChange = useCallback(() => {
+    onCredentialChange(credential.id)
+  }, [credential.id, onCredentialChange])
+
+  return (
+    <div
+      className='flex cursor-pointer items-center gap-x-2 rounded-lg p-2 hover:bg-state-base-hover'
+      onClick={handleCredentialChange}
+    >
+      <CredentialIcon
+        avatar_url={avatar_url}
+        name={name}
+        size={20}
+      />
+      <span className='system-sm-medium grow truncate text-text-secondary'>
+        {t('datasetPipeline.credentialSelector.name', {
+          credentialName: name,
+          pluginName,
+        })}
+      </span>
+      {
+        isSelected && (
+          <RiCheckLine className='size-4 shrink-0 text-text-accent' />
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(Item)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/list.tsx

@@ -0,0 +1,38 @@
+import type { DataSourceCredential } from '@/types/pipeline'
+import React from 'react'
+import Item from './item'
+
+type ListProps = {
+  currentCredentialId: string
+  credentials: Array<DataSourceCredential>
+  pluginName: string
+  onCredentialChange: (credentialId: string) => void
+}
+
+const List = ({
+  currentCredentialId,
+  credentials,
+  pluginName,
+  onCredentialChange,
+}: ListProps) => {
+  return (
+    <div className='flex w-[280px] flex-col gap-y-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+      {
+        credentials.map((credential) => {
+          const isSelected = credential.id === currentCredentialId
+          return (
+            <Item
+              key={credential.id}
+              credential={credential}
+              pluginName={pluginName}
+              isSelected={isSelected}
+              onCredentialChange={onCredentialChange}
+            />
+          )
+        })
+      }
+    </div>
+  )
+}
+
+export default React.memo(List)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { DataSourceCredential } from '@/types/pipeline'
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
+
+type TriggerProps = {
+  currentCredential: DataSourceCredential | undefined
+  pluginName: string
+  isOpen: boolean
+}
+
+const Trigger = ({
+  currentCredential,
+  pluginName,
+  isOpen,
+}: TriggerProps) => {
+  const { t } = useTranslation()
+
+  const {
+    avatar_url,
+    name = '',
+  } = currentCredential || {}
+
+  return (
+    <div
+      className={cn(
+        'flex cursor-pointer items-center gap-x-2 rounded-md p-1 pr-2',
+        isOpen ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+      )}
+    >
+      <CredentialIcon
+        avatar_url={avatar_url}
+        name={name}
+        size={20}
+      />
+      <div className='flex grow items-center gap-x-1 overflow-hidden'>
+        <span className='system-md-semibold grow truncate text-text-secondary'>
+          {t('datasetPipeline.credentialSelector.name', {
+            credentialName: name,
+            pluginName,
+          })}
+        </span>
+        <RiArrowDownSLine className='size-4 shrink-0 text-text-secondary' />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Trigger)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import Divider from '@/app/components/base/divider'
+import Button from '@/app/components/base/button'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import type { CredentialSelectorProps } from './credential-selector'
+import CredentialSelector from './credential-selector'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
+
+type HeaderProps = {
+  docTitle: string
+  docLink: string
+  onClickConfiguration?: () => void
+} & CredentialSelectorProps
+
+const Header = ({
+  docTitle,
+  docLink,
+  onClickConfiguration,
+  ...rest
+}: HeaderProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center justify-between gap-x-2'>
+      <div className='flex items-center gap-x-1 overflow-hidden'>
+        <CredentialSelector
+          {...rest}
+        />
+        <Divider type='vertical' className='mx-1 h-3.5 shrink-0' />
+        <Tooltip
+          popupContent={t('datasetPipeline.configurationTip', { pluginName: rest.pluginName })}
+          position='top'
+        >
+          <Button
+            variant='ghost'
+            size='small'
+            className='size-6 shrink-0 px-1'
+          >
+            <RiEqualizer2Line
+              className='h-4 w-4'
+              onClick={onClickConfiguration}
+            />
+          </Button>
+        </Tooltip>
+      </div>
+      <a
+        className='system-xs-medium flex shrink-0 items-center gap-x-1 text-text-accent'
+        href={docLink}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <RiBookOpenLine className='size-3.5 shrink-0' />
+        <span title={docTitle}>{docTitle}</span>
+      </a>
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx

@@ -0,0 +1,369 @@
+'use client'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { RiDeleteBinLine, RiErrorWarningFill, RiUploadCloud2Line } from '@remixicon/react'
+import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
+import cn from '@/utils/classnames'
+import type { CustomFile as File, FileItem } from '@/models/datasets'
+import { ToastContext } from '@/app/components/base/toast'
+import { upload } from '@/service/base'
+import { getFileUploadErrorMessage } from '@/app/components/base/file-uploader/utils'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import { IS_CE_EDITION } from '@/config'
+import { Theme } from '@/types/app'
+import useTheme from '@/hooks/use-theme'
+import { useFileUploadConfig } from '@/service/use-common'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { produce } from 'immer'
+import dynamic from 'next/dynamic'
+
+const SimplePieChart = dynamic(() => import('@/app/components/base/simple-pie-chart'), { ssr: false })
+
+const FILES_NUMBER_LIMIT = 20
+
+export type LocalFileProps = {
+  allowedExtensions: string[]
+  notSupportBatchUpload?: boolean
+}
+
+const LocalFile = ({
+  allowedExtensions,
+  notSupportBatchUpload,
+}: LocalFileProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const { locale } = useContext(I18n)
+  const localFileList = useDataSourceStoreWithSelector(state => state.localFileList)
+  const dataSourceStore = useDataSourceStore()
+  const [dragging, setDragging] = useState(false)
+
+  const dropRef = useRef<HTMLDivElement>(null)
+  const dragRef = useRef<HTMLDivElement>(null)
+  const fileUploader = useRef<HTMLInputElement>(null)
+  const fileListRef = useRef<FileItem[]>([])
+
+  const hideUpload = notSupportBatchUpload && localFileList.length > 0
+
+  const { data: fileUploadConfigResponse } = useFileUploadConfig()
+  const supportTypesShowNames = useMemo(() => {
+    const extensionMap: { [key: string]: string } = {
+      md: 'markdown',
+      pptx: 'pptx',
+      htm: 'html',
+      xlsx: 'xlsx',
+      docx: 'docx',
+    }
+
+    return allowedExtensions
+      .map(item => extensionMap[item] || item) // map to standardized extension
+      .map(item => item.toLowerCase()) // convert to lower case
+      .filter((item, index, self) => self.indexOf(item) === index) // remove duplicates
+      .map(item => item.toUpperCase()) // convert to upper case
+      .join(locale !== LanguagesSupported[1] ? ', ' : '、 ')
+  }, [locale, allowedExtensions])
+  const ACCEPTS = allowedExtensions.map((ext: string) => `.${ext}`)
+  const fileUploadConfig = useMemo(() => fileUploadConfigResponse ?? {
+    file_size_limit: 15,
+    batch_count_limit: 5,
+  }, [fileUploadConfigResponse])
+
+  const updateFile = useCallback((fileItem: FileItem, progress: number, list: FileItem[]) => {
+    const { setLocalFileList } = dataSourceStore.getState()
+    const newList = produce(list, (draft) => {
+      const targetIndex = draft.findIndex(file => file.fileID === fileItem.fileID)
+      draft[targetIndex] = {
+        ...draft[targetIndex],
+        progress,
+      }
+    })
+    setLocalFileList(newList)
+  }, [dataSourceStore])
+
+  const updateFileList = useCallback((preparedFiles: FileItem[]) => {
+    const { setLocalFileList } = dataSourceStore.getState()
+    setLocalFileList(preparedFiles)
+  }, [dataSourceStore])
+
+  const handlePreview = useCallback((file: File) => {
+    const { setCurrentLocalFile } = dataSourceStore.getState()
+    if (file.id)
+      setCurrentLocalFile(file)
+  }, [dataSourceStore])
+
+  // utils
+  const getFileType = (currentFile: File) => {
+    if (!currentFile)
+      return ''
+
+    const arr = currentFile.name.split('.')
+    return arr[arr.length - 1]
+  }
+
+  const getFileSize = (size: number) => {
+    if (size / 1024 < 10)
+      return `${(size / 1024).toFixed(2)}KB`
+
+    return `${(size / 1024 / 1024).toFixed(2)}MB`
+  }
+
+  const isValid = useCallback((file: File) => {
+    const { size } = file
+    const ext = `.${getFileType(file)}`
+    const isValidType = ACCEPTS.includes(ext.toLowerCase())
+    if (!isValidType)
+      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.typeError') })
+
+    const isValidSize = size <= fileUploadConfig.file_size_limit * 1024 * 1024
+    if (!isValidSize)
+      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.size', { size: fileUploadConfig.file_size_limit }) })
+
+    return isValidType && isValidSize
+  }, [fileUploadConfig, notify, t, ACCEPTS])
+
+  type UploadResult = Awaited<ReturnType<typeof upload>>
+
+  const fileUpload = useCallback(async (fileItem: FileItem): Promise<FileItem> => {
+    const formData = new FormData()
+    formData.append('file', fileItem.file)
+    const onProgress = (e: ProgressEvent) => {
+      if (e.lengthComputable) {
+        const percent = Math.floor(e.loaded / e.total * 100)
+        updateFile(fileItem, percent, fileListRef.current)
+      }
+    }
+
+    return upload({
+      xhr: new XMLHttpRequest(),
+      data: formData,
+      onprogress: onProgress,
+    }, false, undefined, '?source=datasets')
+      .then((res: UploadResult) => {
+        const updatedFile = Object.assign({}, fileItem.file, {
+          id: res.id,
+          ...(res as Partial<File>),
+        }) as File
+        const completeFile: FileItem = {
+          fileID: fileItem.fileID,
+          file: updatedFile,
+          progress: -1,
+        }
+        const index = fileListRef.current.findIndex(item => item.fileID === fileItem.fileID)
+        fileListRef.current[index] = completeFile
+        updateFile(completeFile, 100, fileListRef.current)
+        return Promise.resolve({ ...completeFile })
+      })
+      .catch((e) => {
+        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t)
+        notify({ type: 'error', message: errorMessage })
+        updateFile(fileItem, -2, fileListRef.current)
+        return Promise.resolve({ ...fileItem })
+      })
+      .finally()
+  }, [fileListRef, notify, updateFile, t])
+
+  const uploadBatchFiles = useCallback((bFiles: FileItem[]) => {
+    bFiles.forEach(bf => (bf.progress = 0))
+    return Promise.all(bFiles.map(fileUpload))
+  }, [fileUpload])
+
+  const uploadMultipleFiles = useCallback(async (files: FileItem[]) => {
+    const batchCountLimit = fileUploadConfig.batch_count_limit
+    const length = files.length
+    let start = 0
+    let end = 0
+
+    while (start < length) {
+      if (start + batchCountLimit > length)
+        end = length
+      else
+        end = start + batchCountLimit
+      const bFiles = files.slice(start, end)
+      await uploadBatchFiles(bFiles)
+      start = end
+    }
+  }, [fileUploadConfig, uploadBatchFiles])
+
+  const initialUpload = useCallback((files: File[]) => {
+    if (!files.length)
+      return false
+
+    if (files.length + localFileList.length > FILES_NUMBER_LIMIT && !IS_CE_EDITION) {
+      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.filesNumber', { filesNumber: FILES_NUMBER_LIMIT }) })
+      return false
+    }
+
+    const preparedFiles = files.map((file, index) => ({
+      fileID: `file${index}-${Date.now()}`,
+      file,
+      progress: -1,
+    }))
+    const newFiles = [...fileListRef.current, ...preparedFiles]
+    updateFileList(newFiles)
+    fileListRef.current = newFiles
+    uploadMultipleFiles(preparedFiles)
+  }, [updateFileList, uploadMultipleFiles, notify, t, localFileList])
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.target !== dragRef.current)
+      setDragging(true)
+  }
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.target === dragRef.current)
+      setDragging(false)
+  }
+
+  const handleDrop = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(false)
+    if (!e.dataTransfer)
+      return
+
+    let files = [...e.dataTransfer.files] as File[]
+    if (notSupportBatchUpload)
+      files = files.slice(0, 1)
+
+    const validFiles = files.filter(isValid)
+    initialUpload(validFiles)
+  }, [initialUpload, isValid, notSupportBatchUpload])
+
+  const selectHandle = useCallback(() => {
+    if (fileUploader.current)
+      fileUploader.current.click()
+  }, [])
+
+  const removeFile = (fileID: string) => {
+    if (fileUploader.current)
+      fileUploader.current.value = ''
+
+    fileListRef.current = fileListRef.current.filter(item => item.fileID !== fileID)
+    updateFileList([...fileListRef.current])
+  }
+  const fileChangeHandle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = [...(e.target.files ?? [])] as File[]
+    initialUpload(files.filter(isValid))
+  }, [isValid, initialUpload])
+
+  const { theme } = useTheme()
+  const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
+
+  useEffect(() => {
+    const dropElement = dropRef.current
+    dropElement?.addEventListener('dragenter', handleDragEnter)
+    dropElement?.addEventListener('dragover', handleDragOver)
+    dropElement?.addEventListener('dragleave', handleDragLeave)
+    dropElement?.addEventListener('drop', handleDrop)
+    return () => {
+      dropElement?.removeEventListener('dragenter', handleDragEnter)
+      dropElement?.removeEventListener('dragover', handleDragOver)
+      dropElement?.removeEventListener('dragleave', handleDragLeave)
+      dropElement?.removeEventListener('drop', handleDrop)
+    }
+  }, [handleDrop])
+
+  return (
+    <div className='flex flex-col'>
+      {!hideUpload && (
+        <input
+          ref={fileUploader}
+          id='fileUploader'
+          className='hidden'
+          type='file'
+          multiple={!notSupportBatchUpload}
+          accept={ACCEPTS.join(',')}
+          onChange={fileChangeHandle}
+        />
+      )}
+      {!hideUpload && (
+        <div
+          ref={dropRef}
+          className={cn(
+            'relative box-border flex min-h-20 flex-col items-center justify-center gap-1 rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg px-4 py-3 text-xs leading-4 text-text-tertiary',
+            dragging && 'border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
+          )}>
+          <div className='flex min-h-5 items-center justify-center text-sm leading-4 text-text-secondary'>
+            <RiUploadCloud2Line className='mr-2 size-5' />
+
+            <span>
+              {notSupportBatchUpload ? t('datasetCreation.stepOne.uploader.buttonSingleFile') : t('datasetCreation.stepOne.uploader.button')}
+              {allowedExtensions.length > 0 && (
+                <label className='ml-1 cursor-pointer text-text-accent' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+              )}
+            </span>
+          </div>
+          <div>{t('datasetCreation.stepOne.uploader.tip', {
+            size: fileUploadConfig.file_size_limit,
+            supportTypes: supportTypesShowNames,
+            batchCount: notSupportBatchUpload ? 1 : fileUploadConfig.batch_count_limit,
+          })}</div>
+          {dragging && <div ref={dragRef} className='absolute left-0 top-0 h-full w-full' />}
+        </div>
+      )}
+      {localFileList.length > 0 && (
+        <div className='mt-1 flex flex-col gap-y-1'>
+          {localFileList.map((fileItem, index) => {
+            const isUploading = fileItem.progress >= 0 && fileItem.progress < 100
+            const isError = fileItem.progress === -2
+            return (
+              <div
+                key={`${fileItem.fileID}-${index}`}
+                onClick={handlePreview.bind(null, fileItem.file)}
+                className={cn(
+                  'flex h-12 items-center rounded-lg border border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs shadow-shadow-shadow-4',
+                  isError && 'border-state-destructive-border bg-state-destructive-hover',
+                )}
+              >
+                <div className='flex w-12 shrink-0 items-center justify-center'>
+                  <DocumentFileIcon
+                    size='lg'
+                    className='shrink-0'
+                    name={fileItem.file.name}
+                    extension={getFileType(fileItem.file)}
+                  />
+                </div>
+                <div className='flex shrink grow flex-col gap-0.5'>
+                  <div className='flex w-full'>
+                    <div className='w-0 grow truncate text-xs text-text-secondary'>{fileItem.file.name}</div>
+                  </div>
+                  <div className='w-full truncate text-2xs leading-3 text-text-tertiary'>
+                    <span className='uppercase'>{getFileType(fileItem.file)}</span>
+                    <span className='px-1 text-text-quaternary'>·</span>
+                    <span>{getFileSize(fileItem.file.size)}</span>
+                  </div>
+                </div>
+                <div className='flex w-16 shrink-0 items-center justify-end gap-1 pr-3'>
+                  {isUploading && (
+                    <SimplePieChart percentage={fileItem.progress} stroke={chartColor} fill={chartColor} animationDuration={0} />
+                  )}
+                  {
+                    isError && (
+                      <RiErrorWarningFill className='size-4 text-text-destructive' />
+                    )
+                  }
+                  <span className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={(e) => {
+                    e.stopPropagation()
+                    removeFile(fileItem.fileID)
+                  }}>
+                    <RiDeleteBinLine className='size-4 text-text-tertiary' />
+                  </span>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LocalFile

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx

@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import SearchInput from '@/app/components/base/notion-page-selector/search-input'
+import PageSelector from './page-selector'
+import type { DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
+import Header from '../base/header'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { DatasourceType } from '@/models/pipeline'
+import { ssePost } from '@/service/base'
+import Toast from '@/app/components/base/toast'
+import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { useShallow } from 'zustand/react/shallow'
+import { useModalContextSelector } from '@/context/modal-context'
+import Title from './title'
+import { useGetDataSourceAuth } from '@/service/use-datasource'
+import Loading from '@/app/components/base/loading'
+import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+type OnlineDocumentsProps = {
+  isInPipeline?: boolean
+  nodeId: string
+  nodeData: DataSourceNodeType
+  onCredentialChange: (credentialId: string) => void
+}
+
+const OnlineDocuments = ({
+  nodeId,
+  nodeData,
+  isInPipeline = false,
+  onCredentialChange,
+}: OnlineDocumentsProps) => {
+  const docLink = useDocLink()
+  const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
+  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
+  const {
+    documentsData,
+    searchValue,
+    selectedPagesId,
+    currentCredentialId,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    documentsData: state.documentsData,
+    searchValue: state.searchValue,
+    selectedPagesId: state.selectedPagesId,
+    currentCredentialId: state.currentCredentialId,
+  })))
+
+  const { data: dataSourceAuth } = useGetDataSourceAuth({
+    pluginId: nodeData.plugin_id,
+    provider: nodeData.provider_name,
+  })
+
+  const dataSourceStore = useDataSourceStore()
+
+  const PagesMapAndSelectedPagesId: DataSourceNotionPageMap = useMemo(() => {
+    const pagesMap = (documentsData || []).reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
+      next.pages.forEach((page) => {
+        prev[page.page_id] = {
+          ...page,
+          workspace_id: next.workspace_id,
+        }
+      })
+
+      return prev
+    }, {})
+    return pagesMap
+  }, [documentsData])
+
+  const datasourceNodeRunURL = !isInPipeline
+    ? `/rag/pipelines/${pipelineId}/workflows/published/datasource/nodes/${nodeId}/run`
+    : `/rag/pipelines/${pipelineId}/workflows/draft/datasource/nodes/${nodeId}/run`
+
+  const getOnlineDocuments = useCallback(async () => {
+    const { currentCredentialId } = dataSourceStore.getState()
+    ssePost(
+      datasourceNodeRunURL,
+      {
+        body: {
+          inputs: {},
+          credential_id: currentCredentialId,
+          datasource_type: DatasourceType.onlineDocument,
+        },
+      },
+      {
+        onDataSourceNodeCompleted: (documentsData: DataSourceNodeCompletedResponse) => {
+          const { setDocumentsData } = dataSourceStore.getState()
+          setDocumentsData(documentsData.data as DataSourceNotionWorkspace[])
+        },
+        onDataSourceNodeError: (error: DataSourceNodeErrorResponse) => {
+          Toast.notify({
+            type: 'error',
+            message: error.error,
+          })
+        },
+      },
+    )
+  }, [dataSourceStore, datasourceNodeRunURL])
+
+  useEffect(() => {
+    if (!currentCredentialId) return
+    getOnlineDocuments()
+  }, [currentCredentialId])
+
+  const handleSearchValueChange = useCallback((value: string) => {
+    const { setSearchValue } = dataSourceStore.getState()
+    setSearchValue(value)
+  }, [dataSourceStore])
+
+  const handleSelectPages = useCallback((newSelectedPagesId: Set<string>) => {
+    const { setSelectedPagesId, setOnlineDocuments } = dataSourceStore.getState()
+    const selectedPages = Array.from(newSelectedPagesId).map(pageId => PagesMapAndSelectedPagesId[pageId])
+    setSelectedPagesId(new Set(Array.from(newSelectedPagesId)))
+    setOnlineDocuments(selectedPages)
+  }, [dataSourceStore, PagesMapAndSelectedPagesId])
+
+  const handlePreviewPage = useCallback((previewPageId: string) => {
+    const { setCurrentDocument } = dataSourceStore.getState()
+    setCurrentDocument(PagesMapAndSelectedPagesId[previewPageId])
+  }, [PagesMapAndSelectedPagesId, dataSourceStore])
+
+  const handleSetting = useCallback(() => {
+    setShowAccountSettingModal({
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+    })
+  }, [setShowAccountSettingModal])
+
+  return (
+    <div className='flex flex-col gap-y-2'>
+      <Header
+        docTitle='Docs'
+        docLink={docLink('/guides/knowledge-base/knowledge-pipeline/authorize-data-source')}
+        onClickConfiguration={handleSetting}
+        pluginName={nodeData.datasource_label}
+        currentCredentialId={currentCredentialId}
+        onCredentialChange={onCredentialChange}
+        credentials={dataSourceAuth?.result || []}
+      />
+      <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
+        <div className='flex items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-1 pl-3'>
+          <div className='flex grow items-center'>
+            <Title name={nodeData.datasource_label} />
+          </div>
+          <SearchInput
+            value={searchValue}
+            onChange={handleSearchValueChange}
+          />
+        </div>
+        <div className='overflow-hidden rounded-b-xl'>
+          {documentsData?.length ? (
+            <PageSelector
+              checkedIds={selectedPagesId}
+              disabledValue={new Set()}
+              searchValue={searchValue}
+              list={documentsData[0].pages || []}
+              pagesMap={PagesMapAndSelectedPagesId}
+              onSelect={handleSelectPages}
+              canPreview={!isInPipeline}
+              onPreview={handlePreviewPage}
+              isMultipleChoice={!isInPipeline}
+              currentCredentialId={currentCredentialId}
+            />
+          ) : (
+            <div className='flex h-[296px] items-center justify-center'>
+              <Loading type='app' />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OnlineDocuments

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FixedSizeList as List } from 'react-window'
+import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
+import Item from './item'
+import { recursivePushInParentDescendants } from './utils'
+
+type PageSelectorProps = {
+  checkedIds: Set<string>
+  disabledValue: Set<string>
+  searchValue: string
+  pagesMap: DataSourceNotionPageMap
+  list: DataSourceNotionPage[]
+  onSelect: (selectedPagesId: Set<string>) => void
+  canPreview?: boolean
+  onPreview?: (selectedPageId: string) => void
+  isMultipleChoice?: boolean
+  currentCredentialId: string
+}
+
+export type NotionPageTreeItem = {
+  children: Set<string>
+  descendants: Set<string>
+  depth: number
+  ancestors: string[]
+} & DataSourceNotionPage
+
+export type NotionPageTreeMap = Record<string, NotionPageTreeItem>
+
+type NotionPageItem = {
+  expand: boolean
+  depth: number
+} & DataSourceNotionPage
+
+const PageSelector = ({
+  checkedIds,
+  disabledValue,
+  searchValue,
+  pagesMap,
+  list,
+  onSelect,
+  canPreview = true,
+  onPreview,
+  isMultipleChoice = true,
+  currentCredentialId,
+}: PageSelectorProps) => {
+  const { t } = useTranslation()
+  const [dataList, setDataList] = useState<NotionPageItem[]>([])
+  const [currentPreviewPageId, setCurrentPreviewPageId] = useState('')
+
+  useEffect(() => {
+    setDataList(list.filter(item => item.parent_id === 'root' || !pagesMap[item.parent_id]).map((item) => {
+      return {
+        ...item,
+        expand: false,
+        depth: 0,
+      }
+    }))
+  }, [currentCredentialId])
+
+  const searchDataList = list.filter((item) => {
+    return item.page_name.includes(searchValue)
+  }).map((item) => {
+    return {
+      ...item,
+      expand: false,
+      depth: 0,
+    }
+  })
+  const currentDataList = searchValue ? searchDataList : dataList
+
+  const listMapWithChildrenAndDescendants = useMemo(() => {
+    return list.reduce((prev: NotionPageTreeMap, next: DataSourceNotionPage) => {
+      const pageId = next.page_id
+      if (!prev[pageId])
+        prev[pageId] = { ...next, children: new Set(), descendants: new Set(), depth: 0, ancestors: [] }
+
+      recursivePushInParentDescendants(pagesMap, prev, prev[pageId], prev[pageId])
+      return prev
+    }, {})
+  }, [list, pagesMap])
+
+  const handleToggle = useCallback((index: number) => {
+    const current = dataList[index]
+    const pageId = current.page_id
+    const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
+    const descendantsIds = Array.from(currentWithChildrenAndDescendants.descendants)
+    const childrenIds = Array.from(currentWithChildrenAndDescendants.children)
+    let newDataList = []
+
+    if (current.expand) {
+      current.expand = false
+
+      newDataList = dataList.filter(item => !descendantsIds.includes(item.page_id))
+    }
+    else {
+      current.expand = true
+
+      newDataList = [
+        ...dataList.slice(0, index + 1),
+        ...childrenIds.map(item => ({
+          ...pagesMap[item],
+          expand: false,
+          depth: listMapWithChildrenAndDescendants[item].depth,
+        })),
+        ...dataList.slice(index + 1),
+      ]
+    }
+    setDataList(newDataList)
+  }, [dataList, listMapWithChildrenAndDescendants, pagesMap])
+
+  const handleCheck = useCallback((index: number) => {
+    const copyValue = new Set(checkedIds)
+    const current = currentDataList[index]
+    const pageId = current.page_id
+    const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
+
+    if (copyValue.has(pageId)) {
+      if (!searchValue && isMultipleChoice) {
+        for (const item of currentWithChildrenAndDescendants.descendants)
+          copyValue.delete(item)
+      }
+
+      copyValue.delete(pageId)
+    }
+    else {
+      if (!searchValue && isMultipleChoice) {
+        for (const item of currentWithChildrenAndDescendants.descendants)
+          copyValue.add(item)
+      }
+      // Single choice mode, clear previous selection
+      if (!isMultipleChoice && copyValue.size > 0) {
+        copyValue.clear()
+        copyValue.add(pageId)
+      }
+      else {
+        copyValue.add(pageId)
+      }
+    }
+
+    onSelect(new Set(copyValue))
+  }, [currentDataList, isMultipleChoice, listMapWithChildrenAndDescendants, onSelect, searchValue, checkedIds])
+
+  const handlePreview = useCallback((index: number) => {
+    const current = currentDataList[index]
+    const pageId = current.page_id
+
+    setCurrentPreviewPageId(pageId)
+
+    if (onPreview)
+      onPreview(pageId)
+  }, [currentDataList, onPreview])
+
+  if (!currentDataList.length) {
+    return (
+      <div className='flex h-[296px] items-center justify-center text-[13px] text-text-tertiary'>
+        {t('common.dataSource.notion.selector.noSearchResult')}
+      </div>
+    )
+  }
+
+  return (
+    <List
+      className='py-2'
+      height={296}
+      itemCount={currentDataList.length}
+      itemSize={28}
+      width='100%'
+      itemKey={(index, data) => data.dataList[index].page_id}
+      itemData={{
+        dataList: currentDataList,
+        handleToggle,
+        checkedIds,
+        disabledCheckedIds: disabledValue,
+        handleCheck,
+        canPreview,
+        handlePreview,
+        listMapWithChildrenAndDescendants,
+        searchValue,
+        previewPageId: currentPreviewPageId,
+        pagesMap,
+        isMultipleChoice,
+      }}
+    >
+      {Item}
+    </List>
+  )
+}
+
+export default PageSelector

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { areEqual } from 'react-window'
+import type { ListChildComponentProps } from 'react-window'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
+import Checkbox from '@/app/components/base/checkbox'
+import NotionIcon from '@/app/components/base/notion-icon'
+import cn from '@/utils/classnames'
+import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
+import Radio from '@/app/components/base/radio/ui'
+
+type NotionPageTreeItem = {
+  children: Set<string>
+  descendants: Set<string>
+  depth: number
+  ancestors: string[]
+} & DataSourceNotionPage
+
+type NotionPageTreeMap = Record<string, NotionPageTreeItem>
+
+type NotionPageItem = {
+  expand: boolean
+  depth: number
+} & DataSourceNotionPage
+
+const Item = ({ index, style, data }: ListChildComponentProps<{
+  dataList: NotionPageItem[]
+  handleToggle: (index: number) => void
+  checkedIds: Set<string>
+  disabledCheckedIds: Set<string>
+  handleCheck: (index: number) => void
+  canPreview?: boolean
+  handlePreview: (index: number) => void
+  listMapWithChildrenAndDescendants: NotionPageTreeMap
+  searchValue: string
+  previewPageId: string
+  pagesMap: DataSourceNotionPageMap
+  isMultipleChoice?: boolean
+}>) => {
+  const { t } = useTranslation()
+  const {
+    dataList,
+    handleToggle,
+    checkedIds,
+    disabledCheckedIds,
+    handleCheck,
+    canPreview,
+    handlePreview,
+    listMapWithChildrenAndDescendants,
+    searchValue,
+    previewPageId,
+    pagesMap,
+    isMultipleChoice,
+  } = data
+  const current = dataList[index]
+  const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[current.page_id]
+  const hasChild = currentWithChildrenAndDescendants.descendants.size > 0
+  const ancestors = currentWithChildrenAndDescendants.ancestors
+  const breadCrumbs = ancestors.length ? [...ancestors, current.page_name] : [current.page_name]
+  const disabled = disabledCheckedIds.has(current.page_id)
+
+  const renderArrow = () => {
+    if (hasChild) {
+      return (
+        <div
+          className='mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover'
+          style={{ marginLeft: current.depth * 8 }}
+          onClick={() => handleToggle(index)}
+        >
+          {
+            current.expand
+              ? <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
+              : <RiArrowRightSLine className='h-4 w-4 text-text-tertiary' />
+          }
+        </div>
+      )
+    }
+    if (current.parent_id === 'root' || !pagesMap[current.parent_id]) {
+      return (
+        <div></div>
+      )
+    }
+    return (
+      <div className='mr-1 h-5 w-5 shrink-0' style={{ marginLeft: current.depth * 8 }} />
+    )
+  }
+
+  return (
+    <div
+      className={cn('group flex cursor-pointer items-center rounded-md pl-2 pr-[2px] hover:bg-state-base-hover',
+        previewPageId === current.page_id && 'bg-state-base-hover')}
+      style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
+    >
+      {isMultipleChoice ? (
+        <Checkbox
+          className='mr-2 shrink-0'
+          checked={checkedIds.has(current.page_id)}
+          disabled={disabled}
+          onCheck={() => {
+            handleCheck(index)
+          }}
+        />) : (
+        <Radio
+          className='mr-2 shrink-0'
+          isChecked={checkedIds.has(current.page_id)}
+          disabled={disabled}
+          onCheck={() => {
+            handleCheck(index)
+          }}
+        />
+      )}
+      {!searchValue && renderArrow()}
+      <NotionIcon
+        className='mr-1 shrink-0'
+        type='page'
+        src={current.page_icon}
+      />
+      <div
+        className='grow truncate text-[13px] font-medium leading-4 text-text-secondary'
+        title={current.page_name}
+      >
+        {current.page_name}
+      </div>
+      {
+        canPreview && (
+          <div
+            className='ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs
+            font-medium leading-4 text-components-button-secondary-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]
+            hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover group-hover:flex'
+            onClick={() => handlePreview(index)}>
+            {t('common.dataSource.notion.selector.preview')}
+          </div>
+        )
+      }
+      {
+        searchValue && (
+          <div
+            className='ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary'
+            title={breadCrumbs.join(' / ')}
+          >
+            {breadCrumbs.join(' / ')}
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(Item, areEqual)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/utils.ts

@@ -0,0 +1,39 @@
+import type { DataSourceNotionPageMap } from '@/models/common'
+import type { NotionPageTreeItem, NotionPageTreeMap } from './index'
+
+export const recursivePushInParentDescendants = (
+  pagesMap: DataSourceNotionPageMap,
+  listTreeMap: NotionPageTreeMap,
+  current: NotionPageTreeItem,
+  leafItem: NotionPageTreeItem,
+) => {
+  const parentId = current.parent_id
+  const pageId = current.page_id
+
+  if (!parentId || !pageId)
+    return
+
+  if (parentId !== 'root' && pagesMap[parentId]) {
+    if (!listTreeMap[parentId]) {
+      const children = new Set([pageId])
+      const descendants = new Set([pageId, leafItem.page_id])
+      listTreeMap[parentId] = {
+        ...pagesMap[parentId],
+        children,
+        descendants,
+        depth: 0,
+        ancestors: [],
+      }
+    }
+    else {
+      listTreeMap[parentId].children.add(pageId)
+      listTreeMap[parentId].descendants.add(pageId)
+      listTreeMap[parentId].descendants.add(leafItem.page_id)
+    }
+    leafItem.depth++
+    leafItem.ancestors.unshift(listTreeMap[parentId].page_name)
+
+    if (listTreeMap[parentId].parent_id !== 'root')
+      recursivePushInParentDescendants(pagesMap, listTreeMap, listTreeMap[parentId], leafItem)
+  }
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type TitleProps = {
+  name: string
+}
+
+const Title = ({
+  name,
+}: TitleProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='system-sm-medium px-[5px] py-1 text-text-secondary'>
+      {t('datasetPipeline.onlineDocument.pageSelectorTitle', { name })}
+    </div>
+  )
+}
+
+export default React.memo(Title)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { useToolIcon } from '@/app/components/workflow/hooks'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+
+type ConnectProps = {
+  nodeData: DataSourceNodeType
+  onSetting: () => void
+}
+
+const Connect = ({
+  nodeData,
+  onSetting,
+}: ConnectProps) => {
+  const { t } = useTranslation()
+  const toolIcon = useToolIcon(nodeData)
+
+  return (
+    <div className='flex flex-col items-start gap-y-2 rounded-xl bg-workflow-process-bg p-6'>
+      <div className='flex size-12 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg shadow-shadow-shadow-5'>
+        <BlockIcon
+          type={BlockEnum.DataSource}
+          toolIcon={toolIcon}
+          size='md'
+        />
+      </div>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex flex-col gap-y-1 pb-3 pt-1'>
+          <div className='system-md-semibold text-text-secondary'>
+            <span className='relative'>
+              {t('datasetPipeline.onlineDrive.notConnected', { name: nodeData.title })}
+              <Icon3Dots className='absolute -right-2.5 -top-1.5 size-4 text-text-secondary' />
+            </span>
+          </div>
+          <div className='system-sm-regular text-text-tertiary'>
+            {t('datasetPipeline.onlineDrive.notConnectedTip', { name: nodeData.title })}
+          </div>
+        </div>
+        <Button className='w-fit' variant='primary' onClick={onSetting}>
+          {t('datasetCreation.stepOne.connect')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default Connect

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+
+type BucketProps = {
+  bucketName: string
+  isActive?: boolean
+  disabled?: boolean
+  showSeparator?: boolean
+  handleBackToBucketList: () => void
+  handleClickBucketName: () => void
+}
+
+const Bucket = ({
+  bucketName,
+  handleBackToBucketList,
+  handleClickBucketName,
+  disabled = false,
+  isActive = false,
+  showSeparator = true,
+}: BucketProps) => {
+  const { t } = useTranslation()
+  const handleClickItem = useCallback(() => {
+    if (!disabled)
+      handleClickBucketName()
+  }, [disabled, handleClickBucketName])
+
+  return (
+    <>
+      <Tooltip
+        popupContent={t('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')}
+      >
+        <button
+          type='button'
+          className='flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
+          onClick={handleBackToBucketList}
+        >
+          <BucketsGray />
+        </button>
+      </Tooltip>
+      <span className='system-xs-regular text-divider-deep'>/</span>
+      <button
+        type='button'
+        className={cn(
+          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          isActive ? 'system-sm-medium text-text-secondary' : 'system-sm-regular text-text-tertiary',
+          !disabled && 'hover:bg-state-base-hover',
+        )}
+        disabled={disabled}
+        onClick={handleClickItem}
+        title={bucketName}
+      >
+        {bucketName}
+      </button>
+      {showSeparator && <span className='system-xs-regular shrink-0 text-divider-deep'>/</span>}
+    </>
+  )
+}
+
+export default React.memo(Bucket)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+type DriveProps = {
+  breadcrumbs: string[]
+  handleBackToRoot: () => void
+}
+
+const Drive = ({
+  breadcrumbs,
+  handleBackToRoot,
+}: DriveProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <button
+        type='button'
+        className={cn(
+          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          breadcrumbs.length > 0 && 'system-sm-regular text-text-tertiary hover:bg-state-base-hover',
+          breadcrumbs.length === 0 && 'system-sm-medium text-text-secondary',
+        )}
+        onClick={handleBackToRoot}
+        disabled={breadcrumbs.length === 0}
+      >
+        {t('datasetPipeline.onlineDrive.breadcrumbs.allFiles')}
+      </button>
+      {breadcrumbs.length > 0 && <span className='system-xs-regular text-divider-deep'>/</span>}
+    </>
+  )
+}
+
+export default React.memo(Drive)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback, useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import Menu from './menu'
+
+type DropdownProps = {
+  startIndex: number
+  breadcrumbs: string[]
+  onBreadcrumbClick: (index: number) => void
+}
+
+const Dropdown = ({
+  startIndex,
+  breadcrumbs,
+  onBreadcrumbClick,
+}: DropdownProps) => {
+  const [open, setOpen] = useState(false)
+
+  const handleTrigger = useCallback(() => {
+    setOpen(prev => !prev)
+  }, [])
+
+  const handleBreadCrumbClick = useCallback((index: number) => {
+    onBreadcrumbClick(index)
+    setOpen(false)
+  }, [onBreadcrumbClick])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -13,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <button
+          type='button'
+          className={cn(
+            'flex size-6 items-center justify-center rounded-md',
+            open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
+          )}
+        >
+          <RiMoreFill className='size-4 text-text-tertiary' />
+        </button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <Menu
+          breadcrumbs={breadcrumbs}
+          startIndex={startIndex}
+          onBreadcrumbClick={handleBreadCrumbClick}
+        />
+      </PortalToFollowElemContent>
+      <span className='system-xs-regular text-divider-deep'>/</span>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(Dropdown)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/item.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react'
+
+type ItemProps = {
+  name: string
+  index: number
+  onBreadcrumbClick: (index: number) => void
+}
+
+const Item = ({
+  name,
+  index,
+  onBreadcrumbClick,
+}: ItemProps) => {
+  const handleClick = useCallback(() => {
+    onBreadcrumbClick(index)
+  }, [index, onBreadcrumbClick])
+
+  return (
+    <div
+      className='system-md-regular rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
+      onClick={handleClick}
+    >
+      {name}
+    </div>
+  )
+}
+
+export default React.memo(Item)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/menu.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Item from './item'
+
+type MenuProps = {
+  breadcrumbs: string[]
+  startIndex: number
+  onBreadcrumbClick: (index: number) => void
+}
+
+const Menu = ({
+  breadcrumbs,
+  startIndex,
+  onBreadcrumbClick,
+}: MenuProps) => {
+  return (
+    <div className='flex w-[136px] flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
+      {breadcrumbs.map((breadcrumb, index) => {
+        return (
+          <Item
+            key={`${breadcrumb}-${index}`}
+            name={breadcrumb}
+            index={startIndex + index}
+            onBreadcrumbClick={onBreadcrumbClick}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(Menu)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx

@@ -0,0 +1,166 @@
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../../../../store'
+import Bucket from './bucket'
+import BreadcrumbItem from './item'
+import Dropdown from './dropdown'
+import Drive from './drive'
+
+type BreadcrumbsProps = {
+  breadcrumbs: string[]
+  keywords: string
+  bucket: string
+  searchResultsLength: number
+  isInPipeline: boolean
+}
+
+const Breadcrumbs = ({
+  breadcrumbs,
+  keywords,
+  bucket,
+  searchResultsLength,
+  isInPipeline,
+}: BreadcrumbsProps) => {
+  const { t } = useTranslation()
+  const dataSourceStore = useDataSourceStore()
+  const hasBucket = useDataSourceStoreWithSelector(s => s.hasBucket)
+  const showSearchResult = !!keywords && searchResultsLength > 0
+  const showBucketListTitle = breadcrumbs.length === 0 && hasBucket && bucket === ''
+
+  const displayBreadcrumbNum = useMemo(() => {
+    const num = isInPipeline ? 2 : 3
+    return bucket ? num - 1 : num
+  }, [isInPipeline, bucket])
+
+  const breadcrumbsConfig = useMemo(() => {
+    const prefixToDisplay = breadcrumbs.slice(0, displayBreadcrumbNum - 1)
+    const collapsedBreadcrumbs = breadcrumbs.slice(displayBreadcrumbNum - 1, breadcrumbs.length - 1)
+    return {
+      original: breadcrumbs,
+      needCollapsed: breadcrumbs.length > displayBreadcrumbNum,
+      prefixBreadcrumbs: prefixToDisplay,
+      collapsedBreadcrumbs,
+      lastBreadcrumb: breadcrumbs[breadcrumbs.length - 1],
+    }
+  }, [displayBreadcrumbNum, breadcrumbs])
+
+  const handleBackToBucketList = useCallback(() => {
+    const { setOnlineDriveFileList, setSelectedFileIds, setBreadcrumbs, setPrefix, setBucket } = dataSourceStore.getState()
+    setOnlineDriveFileList([])
+    setSelectedFileIds([])
+    setBucket('')
+    setBreadcrumbs([])
+    setPrefix([])
+  }, [dataSourceStore])
+
+  const handleClickBucketName = useCallback(() => {
+    const { setOnlineDriveFileList, setSelectedFileIds, setBreadcrumbs, setPrefix } = dataSourceStore.getState()
+    setOnlineDriveFileList([])
+    setSelectedFileIds([])
+    setBreadcrumbs([])
+    setPrefix([])
+  }, [dataSourceStore])
+
+  const handleBackToRoot = useCallback(() => {
+    const { setOnlineDriveFileList, setSelectedFileIds, setBreadcrumbs, setPrefix } = dataSourceStore.getState()
+    setOnlineDriveFileList([])
+    setSelectedFileIds([])
+    setBreadcrumbs([])
+    setPrefix([])
+  }, [dataSourceStore])
+
+  const handleClickBreadcrumb = useCallback((index: number) => {
+    const { breadcrumbs, prefix, setOnlineDriveFileList, setSelectedFileIds, setBreadcrumbs, setPrefix } = dataSourceStore.getState()
+    const newBreadcrumbs = breadcrumbs.slice(0, index + 1)
+    const newPrefix = prefix.slice(0, index + 1)
+    setOnlineDriveFileList([])
+    setSelectedFileIds([])
+    setBreadcrumbs(newBreadcrumbs)
+    setPrefix(newPrefix)
+  }, [dataSourceStore])
+
+  return (
+    <div className='flex grow items-center overflow-hidden'>
+      {showSearchResult && (
+        <div className='system-sm-medium text-test-secondary px-[5px]'>
+          {t('datasetPipeline.onlineDrive.breadcrumbs.searchResult', {
+            searchResultsLength,
+            folderName: breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1] : bucket,
+          })}
+        </div>
+      )}
+      {!showSearchResult && showBucketListTitle && (
+        <div className='system-sm-medium text-test-secondary px-[5px]'>
+          {t('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')}
+        </div>
+      )}
+      {!showSearchResult && !showBucketListTitle && (
+        <div className='flex w-full items-center gap-x-0.5 overflow-hidden'>
+          {hasBucket && bucket && (
+            <Bucket
+              bucketName={bucket}
+              handleBackToBucketList={handleBackToBucketList}
+              handleClickBucketName={handleClickBucketName}
+              isActive={breadcrumbs.length === 0}
+              disabled={breadcrumbs.length === 0}
+              showSeparator={breadcrumbs.length > 0}
+            />
+          )}
+          {!hasBucket && (
+            <Drive
+              breadcrumbs={breadcrumbs}
+              handleBackToRoot={handleBackToRoot}
+            />
+          )}
+          {!breadcrumbsConfig.needCollapsed && (
+            <>
+              {breadcrumbsConfig.original.map((breadcrumb, index) => {
+                const isLast = index === breadcrumbsConfig.original.length - 1
+                return (
+                  <BreadcrumbItem
+                    key={`${breadcrumb}-${index}`}
+                    index={index}
+                    handleClick={handleClickBreadcrumb}
+                    name={breadcrumb}
+                    isActive={isLast}
+                    showSeparator={!isLast}
+                    disabled={isLast}
+                  />
+                )
+              })}
+            </>
+          )}
+          {breadcrumbsConfig.needCollapsed && (
+            <>
+              {breadcrumbsConfig.prefixBreadcrumbs.map((breadcrumb, index) => {
+                return (
+                  <BreadcrumbItem
+                    key={`${breadcrumb}-${index}`}
+                    index={index}
+                    handleClick={handleClickBreadcrumb}
+                    name={breadcrumb}
+                  />
+                )
+              })}
+              <Dropdown
+                startIndex={breadcrumbsConfig.prefixBreadcrumbs.length}
+                breadcrumbs={breadcrumbsConfig.collapsedBreadcrumbs}
+                onBreadcrumbClick={handleClickBreadcrumb}
+              />
+              <BreadcrumbItem
+                index={breadcrumbs.length - 1}
+                handleClick={handleClickBreadcrumb}
+                name={breadcrumbsConfig.lastBreadcrumb}
+                isActive={true}
+                disabled={true}
+                showSeparator={false}
+              />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(Breadcrumbs)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react'
+import cn from '@/utils/classnames'
+
+type BreadcrumbItemProps = {
+  name: string
+  index: number
+  handleClick: (index: number) => void
+  disabled?: boolean
+  isActive?: boolean
+  showSeparator?: boolean
+}
+
+const BreadcrumbItem = ({
+  name,
+  index,
+  handleClick,
+  disabled = false,
+  isActive = false,
+  showSeparator = true,
+}: BreadcrumbItemProps) => {
+  const handleClickItem = useCallback(() => {
+    if (!disabled)
+      handleClick(index)
+  }, [disabled, handleClick, index])
+
+  return (
+    <>
+      <button
+        type='button'
+        className={cn(
+          'max-w-full shrink truncate rounded-md px-[5px] py-1',
+          isActive ? 'system-sm-medium text-text-secondary' : 'system-sm-regular text-text-tertiary',
+          !disabled && 'hover:bg-state-base-hover',
+        )}
+        disabled={disabled}
+        onClick={handleClickItem}
+        title={name}
+      >
+        {name}
+      </button>
+      {showSeparator && <span className='system-xs-regular shrink-0 text-divider-deep'>/</span>}
+    </>
+  )
+}
+
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+export default React.memo(BreadcrumbItem)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import Breadcrumbs from './breadcrumbs'
+import Input from '@/app/components/base/input'
+import { useTranslation } from 'react-i18next'
+
+type HeaderProps = {
+  breadcrumbs: string[]
+  inputValue: string
+  keywords: string
+  bucket: string
+  searchResultsLength: number
+  handleInputChange: React.ChangeEventHandler<HTMLInputElement>
+  handleResetKeywords: () => void
+  isInPipeline: boolean
+}
+
+const Header = ({
+  breadcrumbs,
+  inputValue,
+  keywords,
+  bucket,
+  isInPipeline,
+  searchResultsLength,
+  handleInputChange,
+  handleResetKeywords,
+}: HeaderProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center gap-x-2 bg-components-panel-bg p-1 pl-3'>
+      <Breadcrumbs
+        breadcrumbs={breadcrumbs}
+        keywords={keywords}
+        bucket={bucket}
+        searchResultsLength={searchResultsLength}
+        isInPipeline={isInPipeline}
+      />
+      <Input
+        value={inputValue}
+        onChange={handleInputChange}
+        onClear={handleResetKeywords}
+        placeholder={t('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')}
+        showLeftIcon
+        showClearIcon
+        wrapperClassName='w-[200px] h-8 shrink-0'
+      />
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/index.tsx

@@ -0,0 +1,82 @@
+import type { OnlineDriveFile } from '@/models/pipeline'
+import Header from './header'
+import List from './list'
+import { useState } from 'react'
+import { useDebounceFn } from 'ahooks'
+
+type FileListProps = {
+  fileList: OnlineDriveFile[]
+  selectedFileIds: string[]
+  breadcrumbs: string[]
+  keywords: string
+  bucket: string
+  isInPipeline: boolean
+  resetKeywords: () => void
+  updateKeywords: (keywords: string) => void
+  searchResultsLength: number
+  handleSelectFile: (file: OnlineDriveFile) => void
+  handleOpenFolder: (file: OnlineDriveFile) => void
+  isLoading: boolean
+}
+
+const FileList = ({
+  fileList,
+  selectedFileIds,
+  breadcrumbs,
+  keywords,
+  bucket,
+  resetKeywords,
+  updateKeywords,
+  searchResultsLength,
+  handleSelectFile,
+  handleOpenFolder,
+  isInPipeline,
+  isLoading,
+}: FileListProps) => {
+  const [inputValue, setInputValue] = useState(keywords)
+
+  const { run: updateKeywordsWithDebounce } = useDebounceFn(
+    (keywords: string) => {
+      updateKeywords(keywords)
+    },
+    { wait: 500 },
+  )
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const keywords = e.target.value
+    setInputValue(keywords)
+    updateKeywordsWithDebounce(keywords)
+  }
+
+  const handleResetKeywords = () => {
+    setInputValue('')
+    resetKeywords()
+  }
+
+  return (
+    <div className='flex h-[400px] flex-col overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg shadow-xs shadow-shadow-shadow-3'>
+      <Header
+        breadcrumbs={breadcrumbs}
+        inputValue={inputValue}
+        keywords={keywords}
+        bucket={bucket}
+        isInPipeline={isInPipeline}
+        handleInputChange={handleInputChange}
+        searchResultsLength={searchResultsLength}
+        handleResetKeywords={handleResetKeywords}
+      />
+      <List
+        fileList={fileList}
+        selectedFileIds={selectedFileIds}
+        keywords={keywords}
+        handleResetKeywords={handleResetKeywords}
+        handleOpenFolder={handleOpenFolder}
+        handleSelectFile={handleSelectFile}
+        isInPipeline={isInPipeline}
+        isLoading={isLoading}
+      />
+    </div>
+  )
+}
+
+export default FileList

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const EmptyFolder = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex size-full items-center justify-center rounded-[10px] bg-background-section px-1 py-1.5'>
+      <span className='system-xs-regular text-text-tertiary'>{t('datasetPipeline.onlineDrive.emptyFolder')}</span>
+    </div>
+  )
+}
+
+export default React.memo(EmptyFolder)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx

@@ -0,0 +1,35 @@
+import Button from '@/app/components/base/button'
+import { SearchMenu } from '@/app/components/base/icons/src/vender/knowledge'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type EmptySearchResultProps = {
+  onResetKeywords: () => void
+}
+
+const EmptySearchResult = ({
+  onResetKeywords,
+}: EmptySearchResultProps & {
+  className?: string
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex size-full flex-col items-center justify-center gap-y-2 rounded-[10px] bg-background-section p-6'>
+      <SearchMenu className='size-8 text-text-tertiary' />
+      <div className='system-sm-regular text-text-secondary'>
+        {t('datasetPipeline.onlineDrive.emptySearchResult')}
+      </div>
+      <Button
+        variant='secondary-accent'
+        size='small'
+        onClick={onResetKeywords}
+        className='px-1.5'
+      >
+        <span className='px-[3px]'>{t('datasetPipeline.onlineDrive.resetKeywords')}</span>
+      </Button>
+    </div>
+  )
+}
+
+export default React.memo(EmptySearchResult)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react'
+import { OnlineDriveFileType } from '@/models/pipeline'
+import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
+import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
+import { getFileType } from './utils'
+import cn from '@/utils/classnames'
+
+type FileIconProps = {
+  type: OnlineDriveFileType
+  fileName: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  className?: string
+}
+
+const FileIcon = ({
+  type,
+  fileName,
+  size = 'md',
+  className,
+}: FileIconProps) => {
+  const fileType = useMemo(() => {
+    if (type === OnlineDriveFileType.bucket || type === OnlineDriveFileType.folder)
+      return 'custom'
+
+    return getFileType(fileName)
+  }, [type, fileName])
+
+  if (type === OnlineDriveFileType.bucket) {
+    return (
+      <BucketsBlue className={cn('size-[18px]', className)} />
+    )
+  }
+
+  if (type === OnlineDriveFileType.folder) {
+    return (
+      <Folder className={cn('size-[18px]', className)} />
+    )
+  }
+
+  return (
+    <FileTypeIcon
+      size={size}
+      type={fileType}
+      className={cn('size-[18px]', className)}
+    />
+  )
+}
+
+export default React.memo(FileIcon)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef } from 'react'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import Item from './item'
+import EmptyFolder from './empty-folder'
+import EmptySearchResult from './empty-search-result'
+import Loading from '@/app/components/base/loading'
+import { RiLoader2Line } from '@remixicon/react'
+import { useDataSourceStore } from '../../../store'
+
+type FileListProps = {
+  fileList: OnlineDriveFile[]
+  selectedFileIds: string[]
+  keywords: string
+  isInPipeline: boolean
+  isLoading: boolean
+  handleResetKeywords: () => void
+  handleSelectFile: (file: OnlineDriveFile) => void
+  handleOpenFolder: (file: OnlineDriveFile) => void
+}
+
+const List = ({
+  fileList,
+  selectedFileIds,
+  keywords,
+  handleResetKeywords,
+  handleSelectFile,
+  handleOpenFolder,
+  isInPipeline,
+  isLoading,
+}: FileListProps) => {
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<IntersectionObserver>(null)
+  const dataSourceStore = useDataSourceStore()
+
+  useEffect(() => {
+    if (anchorRef.current) {
+      observerRef.current = new IntersectionObserver((entries) => {
+        const { setNextPageParameters, currentNextPageParametersRef, isTruncated } = dataSourceStore.getState()
+        if (entries[0].isIntersecting && isTruncated.current && !isLoading)
+          setNextPageParameters(currentNextPageParametersRef.current)
+      }, {
+        rootMargin: '100px',
+      })
+      observerRef.current.observe(anchorRef.current)
+    }
+    return () => observerRef.current?.disconnect()
+  }, [anchorRef, isLoading, dataSourceStore])
+
+  const isAllLoading = isLoading && fileList.length === 0 && keywords.length === 0
+  const isPartialLoading = isLoading && fileList.length > 0
+  const isEmptyFolder = !isLoading && fileList.length === 0 && keywords.length === 0
+  const isSearchResultEmpty = !isLoading && fileList.length === 0 && keywords.length > 0
+
+  return (
+    <div className='grow overflow-hidden p-1 pt-0'>
+      {
+        isAllLoading && (
+          <Loading type='app' />
+        )
+      }
+      {
+        isEmptyFolder && (
+          <EmptyFolder />
+        )
+      }
+      {
+        isSearchResultEmpty && (
+          <EmptySearchResult onResetKeywords={handleResetKeywords} />
+        )
+      }
+      {fileList.length > 0 && (
+        <div className='flex h-full flex-col gap-y-px overflow-y-auto rounded-[10px] bg-background-section px-1 py-1.5'>
+          {
+            fileList.map((file) => {
+              const isSelected = selectedFileIds.includes(file.id)
+              return (
+                <Item
+                  key={file.id}
+                  file={file}
+                  isSelected={isSelected}
+                  onSelect={handleSelectFile}
+                  onOpen={handleOpenFolder}
+                  isMultipleChoice={!isInPipeline}
+                />
+              )
+            })
+          }
+          {
+            isPartialLoading && (
+              <div className='flex items-center justify-center py-2'>
+                <RiLoader2Line className='animation-spin size-4 text-text-tertiary' />
+              </div>
+            )
+          }
+          <div ref={anchorRef} className='h-0' />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default React.memo(List)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx

@@ -0,0 +1,103 @@
+import Checkbox from '@/app/components/base/checkbox'
+import Radio from '@/app/components/base/radio/ui'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import React, { useCallback } from 'react'
+import FileIcon from './file-icon'
+import { formatFileSize } from '@/utils/format'
+import Tooltip from '@/app/components/base/tooltip'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import type { Placement } from '@floating-ui/react'
+
+type ItemProps = {
+  file: OnlineDriveFile
+  isSelected: boolean
+  disabled?: boolean
+  isMultipleChoice?: boolean
+  onSelect: (file: OnlineDriveFile) => void
+  onOpen: (file: OnlineDriveFile) => void
+}
+
+const Item = ({
+  file,
+  isSelected,
+  disabled = false,
+  isMultipleChoice = true,
+  onSelect,
+  onOpen,
+}: ItemProps) => {
+  const { t } = useTranslation()
+  const { id, name, type, size } = file
+
+  const isBucket = type === 'bucket'
+  const isFolder = type === 'folder'
+
+  const Wrapper = disabled ? Tooltip : React.Fragment
+  const wrapperProps = disabled ? {
+    popupContent: t('datasetPipeline.onlineDrive.notSupportedFileType'),
+    position: 'top-end' as Placement,
+    offset: { mainAxis: 4, crossAxis: -104 },
+  } : {}
+
+  const handleSelect = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    onSelect(file)
+  }, [file, onSelect])
+
+  const handleClickItem = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    if (disabled) return
+    if (isBucket || isFolder) {
+      onOpen(file)
+      return
+    }
+    onSelect(file)
+  }, [disabled, file, isBucket, isFolder, onOpen, onSelect])
+
+  return (
+    <div
+      className='flex cursor-pointer items-center gap-2 rounded-md px-2 py-[3px] hover:bg-state-base-hover'
+      onClick={handleClickItem}
+    >
+      {!isBucket && isMultipleChoice && (
+        <Checkbox
+          className='shrink-0'
+          disabled={disabled}
+          id={id}
+          checked={isSelected}
+          onCheck={handleSelect}
+        />
+      )}
+      {!isBucket && !isMultipleChoice && (
+        <Radio
+          className='shrink-0'
+          disabled={disabled}
+          isChecked={isSelected}
+          onCheck={handleSelect}
+        />
+      )}
+      <Wrapper
+        {...wrapperProps}
+      >
+        <div
+          className={cn(
+            'flex grow items-center gap-x-1 overflow-hidden py-0.5',
+            disabled && 'opacity-30',
+          )}>
+          <FileIcon type={type} fileName={name} className='shrink-0 transform-gpu' />
+          <span
+            className='system-sm-medium grow truncate text-text-secondary'
+            title={name}
+          >
+            {name}
+          </span>
+          {!isFolder && typeof size === 'number' && (
+            <span className='system-xs-regular shrink-0 text-text-tertiary'>{formatFileSize(size)}</span>
+          )}
+        </div>
+      </Wrapper>
+    </div>
+  )
+}
+
+export default React.memo(Item)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/utils.ts

@@ -0,0 +1,51 @@
+import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+
+export const getFileExtension = (fileName: string): string => {
+  if (!fileName)
+    return ''
+  const parts = fileName.split('.')
+  if (parts.length <= 1 || (parts[0] === '' && parts.length === 2))
+    return ''
+
+  return parts[parts.length - 1].toLowerCase()
+}
+
+export const getFileType = (fileName: string) => {
+  const extension = getFileExtension(fileName)
+
+  if (extension === 'gif')
+    return FileAppearanceTypeEnum.gif
+
+  if (FILE_EXTS.image.includes(extension.toUpperCase()))
+    return FileAppearanceTypeEnum.image
+
+  if (FILE_EXTS.video.includes(extension.toUpperCase()))
+    return FileAppearanceTypeEnum.video
+
+  if (FILE_EXTS.audio.includes(extension.toUpperCase()))
+    return FileAppearanceTypeEnum.audio
+
+  if (extension === 'html' || extension === 'htm' || extension === 'xml' || extension === 'json')
+    return FileAppearanceTypeEnum.code
+
+  if (extension === 'pdf')
+    return FileAppearanceTypeEnum.pdf
+
+  if (extension === 'md' || extension === 'markdown' || extension === 'mdx')
+    return FileAppearanceTypeEnum.markdown
+
+  if (extension === 'xlsx' || extension === 'xls' || extension === 'csv')
+    return FileAppearanceTypeEnum.excel
+
+  if (extension === 'docx' || extension === 'doc')
+    return FileAppearanceTypeEnum.word
+
+  if (extension === 'pptx' || extension === 'ppt')
+    return FileAppearanceTypeEnum.ppt
+
+  if (FILE_EXTS.document.includes(extension.toUpperCase()))
+    return FileAppearanceTypeEnum.document
+
+  return FileAppearanceTypeEnum.custom
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/header.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+
+type HeaderProps = {
+  onClickConfiguration?: () => void
+  docTitle: string
+  docLink: string
+}
+
+const Header = ({
+  onClickConfiguration,
+  docTitle,
+  docLink,
+}: HeaderProps) => {
+  return (
+    <div className='flex items-center gap-x-2'>
+      <div className='flex shrink-0 grow items-center gap-x-1'>
+        <div className='w-20 bg-black'>
+          {/* placeholder */}
+        </div>
+        <Divider type='vertical' className='mx-1 h-3.5' />
+        <Button
+          variant='ghost'
+          size='small'
+          className='px-1'
+        >
+          <RiEqualizer2Line
+            className='size-4'
+            onClick={onClickConfiguration}
+          />
+        </Button>
+      </div>
+      <a
+        className='system-xs-medium flex items-center gap-x-1 overflow-hidden text-text-accent'
+        href={docLink}
+        target='_blank'
+        rel='noopener noreferrer'
+      >
+        <RiBookOpenLine className='size-3.5 shrink-0' />
+        <span className='grow truncate' title={docTitle}>{docTitle}</span>
+      </a>
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/index.tsx

@@ -0,0 +1,217 @@
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import Header from '../base/header'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import FileList from './file-list'
+import type { OnlineDriveFile } from '@/models/pipeline'
+import { DatasourceType, OnlineDriveFileType } from '@/models/pipeline'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { ssePost } from '@/service/base'
+import type { DataSourceNodeCompletedResponse, DataSourceNodeErrorResponse } from '@/types/pipeline'
+import Toast from '@/app/components/base/toast'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { convertOnlineDriveData } from './utils'
+import { produce } from 'immer'
+import { useShallow } from 'zustand/react/shallow'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useGetDataSourceAuth } from '@/service/use-datasource'
+import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+type OnlineDriveProps = {
+  nodeId: string
+  nodeData: DataSourceNodeType
+  isInPipeline?: boolean
+  onCredentialChange: (credentialId: string) => void
+}
+
+const OnlineDrive = ({
+  nodeId,
+  nodeData,
+  isInPipeline = false,
+  onCredentialChange,
+}: OnlineDriveProps) => {
+  const docLink = useDocLink()
+  const [isInitialMount, setIsInitialMount] = useState(true)
+  const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
+  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
+  const {
+    nextPageParameters,
+    breadcrumbs,
+    prefix,
+    keywords,
+    bucket,
+    selectedFileIds,
+    onlineDriveFileList,
+    currentCredentialId,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    nextPageParameters: state.nextPageParameters,
+    breadcrumbs: state.breadcrumbs,
+    prefix: state.prefix,
+    keywords: state.keywords,
+    bucket: state.bucket,
+    selectedFileIds: state.selectedFileIds,
+    onlineDriveFileList: state.onlineDriveFileList,
+    currentCredentialId: state.currentCredentialId,
+  })))
+  const dataSourceStore = useDataSourceStore()
+  const [isLoading, setIsLoading] = useState(false)
+  const isLoadingRef = useRef(false)
+
+  const { data: dataSourceAuth } = useGetDataSourceAuth({
+    pluginId: nodeData.plugin_id,
+    provider: nodeData.provider_name,
+  })
+
+  const datasourceNodeRunURL = !isInPipeline
+    ? `/rag/pipelines/${pipelineId}/workflows/published/datasource/nodes/${nodeId}/run`
+    : `/rag/pipelines/${pipelineId}/workflows/draft/datasource/nodes/${nodeId}/run`
+
+  const getOnlineDriveFiles = useCallback(async () => {
+    if (isLoadingRef.current) return
+    const { nextPageParameters, prefix, bucket, onlineDriveFileList, currentCredentialId } = dataSourceStore.getState()
+    setIsLoading(true)
+    isLoadingRef.current = true
+    ssePost(
+      datasourceNodeRunURL,
+      {
+        body: {
+          inputs: {
+            prefix: prefix[prefix.length - 1],
+            bucket,
+            next_page_parameters: nextPageParameters,
+            max_keys: 30,
+          },
+          datasource_type: DatasourceType.onlineDrive,
+          credential_id: currentCredentialId,
+        },
+      },
+      {
+        onDataSourceNodeCompleted: (documentsData: DataSourceNodeCompletedResponse) => {
+          const { setOnlineDriveFileList, isTruncated, currentNextPageParametersRef, setHasBucket } = dataSourceStore.getState()
+          const {
+            fileList: newFileList,
+            isTruncated: newIsTruncated,
+            nextPageParameters: newNextPageParameters,
+            hasBucket: newHasBucket,
+          } = convertOnlineDriveData(documentsData.data, breadcrumbs, bucket)
+          setOnlineDriveFileList([...onlineDriveFileList, ...newFileList])
+          isTruncated.current = newIsTruncated
+          currentNextPageParametersRef.current = newNextPageParameters
+          setHasBucket(newHasBucket)
+          setIsLoading(false)
+          isLoadingRef.current = false
+        },
+        onDataSourceNodeError: (error: DataSourceNodeErrorResponse) => {
+          Toast.notify({
+            type: 'error',
+            message: error.error,
+          })
+          setIsLoading(false)
+          isLoadingRef.current = false
+        },
+      },
+    )
+  }, [datasourceNodeRunURL, dataSourceStore])
+
+  useEffect(() => {
+    if (!currentCredentialId) return
+    if (isInitialMount) {
+      // Only fetch files on initial mount if fileList is empty
+      if (onlineDriveFileList.length === 0)
+        getOnlineDriveFiles()
+      setIsInitialMount(false)
+    }
+    else {
+      getOnlineDriveFiles()
+    }
+  }, [nextPageParameters, prefix, bucket, currentCredentialId])
+
+  const filteredOnlineDriveFileList = useMemo(() => {
+    if (keywords)
+      return onlineDriveFileList.filter(file => file.name.toLowerCase().includes(keywords.toLowerCase()))
+    return onlineDriveFileList
+  }, [onlineDriveFileList, keywords])
+
+  const updateKeywords = useCallback((keywords: string) => {
+    const { setKeywords } = dataSourceStore.getState()
+    setKeywords(keywords)
+  }, [dataSourceStore])
+
+  const resetKeywords = useCallback(() => {
+    const { setKeywords } = dataSourceStore.getState()
+
+    setKeywords('')
+  }, [dataSourceStore])
+
+  const handleSelectFile = useCallback((file: OnlineDriveFile) => {
+    const { selectedFileIds, setSelectedFileIds } = dataSourceStore.getState()
+    if (file.type === OnlineDriveFileType.bucket) return
+    const newSelectedFileList = produce(selectedFileIds, (draft) => {
+      if (draft.includes(file.id)) {
+        const index = draft.indexOf(file.id)
+        draft.splice(index, 1)
+      }
+      else {
+        if (isInPipeline && draft.length >= 1) return
+        draft.push(file.id)
+      }
+    })
+    setSelectedFileIds(newSelectedFileList)
+  }, [dataSourceStore, isInPipeline])
+
+  const handleOpenFolder = useCallback((file: OnlineDriveFile) => {
+    const { breadcrumbs, prefix, setBreadcrumbs, setPrefix, setBucket, setOnlineDriveFileList, setSelectedFileIds } = dataSourceStore.getState()
+    if (file.type === OnlineDriveFileType.file) return
+    setOnlineDriveFileList([])
+    if (file.type === OnlineDriveFileType.bucket) {
+      setBucket(file.name)
+    }
+    else {
+      setSelectedFileIds([])
+      const newBreadcrumbs = produce(breadcrumbs, (draft) => {
+        draft.push(file.name)
+      })
+      const newPrefix = produce(prefix, (draft) => {
+        draft.push(file.id)
+      })
+      setBreadcrumbs(newBreadcrumbs)
+      setPrefix(newPrefix)
+    }
+  }, [dataSourceStore, getOnlineDriveFiles])
+
+  const handleSetting = useCallback(() => {
+    setShowAccountSettingModal({
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+    })
+  }, [setShowAccountSettingModal])
+
+  return (
+    <div className='flex flex-col gap-y-2'>
+      <Header
+        docTitle='Docs'
+        docLink={docLink('/guides/knowledge-base/knowledge-pipeline/authorize-data-source')}
+        onClickConfiguration={handleSetting}
+        pluginName={nodeData.datasource_label}
+        currentCredentialId={currentCredentialId}
+        onCredentialChange={onCredentialChange}
+        credentials={dataSourceAuth?.result || []}
+      />
+      <FileList
+        fileList={filteredOnlineDriveFileList}
+        selectedFileIds={selectedFileIds}
+        breadcrumbs={breadcrumbs}
+        keywords={keywords}
+        bucket={bucket}
+        resetKeywords={resetKeywords}
+        updateKeywords={updateKeywords}
+        searchResultsLength={filteredOnlineDriveFileList.length}
+        handleSelectFile={handleSelectFile}
+        handleOpenFolder={handleOpenFolder}
+        isInPipeline={isInPipeline}
+        isLoading={isLoading}
+      />
+    </div>
+  )
+}
+
+export default OnlineDrive

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/utils.ts

@@ -0,0 +1,54 @@
+import { type OnlineDriveFile, OnlineDriveFileType } from '@/models/pipeline'
+import type { OnlineDriveData } from '@/types/pipeline'
+
+export const isFile = (type: 'file' | 'folder'): boolean => {
+  return type === 'file'
+}
+
+export const isBucketListInitiation = (data: OnlineDriveData[], prefix: string[], bucket: string): boolean => {
+  if (bucket || prefix.length > 0) return false
+  const hasBucket = data.every(item => !!item.bucket)
+  return hasBucket && (data.length > 1 || (data.length === 1 && !!data[0].bucket && data[0].files.length === 0))
+}
+
+export const convertOnlineDriveData = (data: OnlineDriveData[], prefix: string[], bucket: string): {
+  fileList: OnlineDriveFile[],
+  isTruncated: boolean,
+  nextPageParameters: Record<string, any>
+  hasBucket: boolean
+} => {
+  const fileList: OnlineDriveFile[] = []
+  let isTruncated = false
+  let nextPageParameters: Record<string, any> = {}
+  let hasBucket = false
+
+  if (data.length === 0)
+    return { fileList, isTruncated, nextPageParameters, hasBucket }
+
+  if (isBucketListInitiation(data, prefix, bucket)) {
+    data.forEach((item) => {
+      fileList.push({
+        id: item.bucket,
+        name: item.bucket,
+        type: OnlineDriveFileType.bucket,
+      })
+    })
+    hasBucket = true
+  }
+  else {
+    data[0].files.forEach((file) => {
+      const { id, name, size, type } = file
+      const isFileType = isFile(type)
+      fileList.push({
+        id,
+        name,
+        size: isFileType ? size : undefined,
+        type: isFileType ? OnlineDriveFileType.file : OnlineDriveFileType.folder,
+      })
+    })
+    isTruncated = data[0].is_truncated ?? false
+    nextPageParameters = data[0].next_page_parameters ?? {}
+    hasBucket = !!data[0].bucket
+  }
+  return { fileList, isTruncated, nextPageParameters, hasBucket }
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/index.ts

@@ -0,0 +1,45 @@
+import { useContext } from 'react'
+import { createStore, useStore } from 'zustand'
+import { DataSourceContext } from './provider'
+import type { CommonShape } from './slices/common'
+import { createCommonSlice } from './slices/common'
+import type { LocalFileSliceShape } from './slices/local-file'
+import { createLocalFileSlice } from './slices/local-file'
+import type { OnlineDocumentSliceShape } from './slices/online-document'
+import { createOnlineDocumentSlice } from './slices/online-document'
+import type { WebsiteCrawlSliceShape } from './slices/website-crawl'
+import { createWebsiteCrawlSlice } from './slices/website-crawl'
+import type { OnlineDriveSliceShape } from './slices/online-drive'
+import { createOnlineDriveSlice } from './slices/online-drive'
+
+export type DataSourceShape = CommonShape
+  & LocalFileSliceShape
+  & OnlineDocumentSliceShape
+  & WebsiteCrawlSliceShape
+  & OnlineDriveSliceShape
+
+export const createDataSourceStore = () => {
+  return createStore<DataSourceShape>((...args) => ({
+    ...createCommonSlice(...args),
+    ...createLocalFileSlice(...args),
+    ...createOnlineDocumentSlice(...args),
+    ...createWebsiteCrawlSlice(...args),
+    ...createOnlineDriveSlice(...args),
+  }))
+}
+
+export const useDataSourceStoreWithSelector = <T>(selector: (state: DataSourceShape) => T): T => {
+  const store = useContext(DataSourceContext)
+  if (!store)
+    throw new Error('Missing DataSourceContext.Provider in the tree')
+
+  return useStore(store, selector)
+}
+
+export const useDataSourceStore = () => {
+  const store = useContext(DataSourceContext)
+  if (!store)
+    throw new Error('Missing DataSourceContext.Provider in the tree')
+
+  return store
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/provider.tsx

@@ -0,0 +1,29 @@
+import { createContext, useRef } from 'react'
+import { createDataSourceStore } from './'
+
+type DataSourceStoreApi = ReturnType<typeof createDataSourceStore>
+
+type DataSourceContextType = DataSourceStoreApi | null
+
+export const DataSourceContext = createContext<DataSourceContextType>(null)
+
+type DataSourceProviderProps = {
+  children: React.ReactNode
+}
+
+const DataSourceProvider = ({
+  children,
+}: DataSourceProviderProps) => {
+  const storeRef = useRef<DataSourceStoreApi>(null)
+
+  if (!storeRef.current)
+    storeRef.current = createDataSourceStore()
+
+  return (
+    <DataSourceContext.Provider value={storeRef.current!}>
+      {children}
+    </DataSourceContext.Provider>
+  )
+}
+
+export default DataSourceProvider

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/common.ts

@@ -0,0 +1,19 @@
+import type { StateCreator } from 'zustand'
+
+export type CommonShape = {
+  currentNodeIdRef: React.RefObject<string>
+  currentCredentialId: string
+  setCurrentCredentialId: (credentialId: string) => void
+  currentCredentialIdRef: React.RefObject<string>
+}
+
+export const createCommonSlice: StateCreator<CommonShape> = (set) => {
+  return ({
+    currentNodeIdRef: { current: '' },
+    currentCredentialId: '',
+    setCurrentCredentialId: (credentialId: string) => {
+      set({ currentCredentialId: credentialId })
+    },
+    currentCredentialIdRef: { current: '' },
+  })
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/local-file.ts

@@ -0,0 +1,28 @@
+import type { StateCreator } from 'zustand'
+import type { DocumentItem, CustomFile as File, FileItem } from '@/models/datasets'
+
+export type LocalFileSliceShape = {
+  localFileList: FileItem[]
+  setLocalFileList: (fileList: FileItem[]) => void
+  currentLocalFile: File | undefined
+  setCurrentLocalFile: (file: File | undefined) => void
+  previewLocalFileRef: React.RefObject<DocumentItem | undefined>
+}
+
+export const createLocalFileSlice: StateCreator<LocalFileSliceShape> = (set, get) => {
+  return ({
+    localFileList: [],
+    setLocalFileList: (fileList: FileItem[]) => {
+      set(() => ({
+        localFileList: fileList,
+      }))
+      const { previewLocalFileRef } = get()
+      previewLocalFileRef.current = fileList[0]?.file as DocumentItem
+    },
+    currentLocalFile: undefined,
+    setCurrentLocalFile: (file: File | undefined) => set(() => ({
+      currentLocalFile: file,
+    })),
+    previewLocalFileRef: { current: undefined },
+  })
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-document.ts

@@ -0,0 +1,46 @@
+import type { StateCreator } from 'zustand'
+import type { DataSourceNotionWorkspace, NotionPage } from '@/models/common'
+
+export type OnlineDocumentSliceShape = {
+  documentsData: DataSourceNotionWorkspace[]
+  setDocumentsData: (documentData: DataSourceNotionWorkspace[]) => void
+  searchValue: string
+  setSearchValue: (searchValue: string) => void
+  onlineDocuments: NotionPage[]
+  setOnlineDocuments: (documents: NotionPage[]) => void
+  currentDocument: NotionPage | undefined
+  setCurrentDocument: (document: NotionPage | undefined) => void
+  selectedPagesId: Set<string>
+  setSelectedPagesId: (selectedPagesId: Set<string>) => void
+  previewOnlineDocumentRef: React.RefObject<NotionPage | undefined>
+}
+
+export const createOnlineDocumentSlice: StateCreator<OnlineDocumentSliceShape> = (set, get) => {
+  return ({
+    documentsData: [],
+    setDocumentsData: (documentsData: DataSourceNotionWorkspace[]) => set(() => ({
+      documentsData,
+    })),
+    searchValue: '',
+    setSearchValue: (searchValue: string) => set(() => ({
+      searchValue,
+    })),
+    onlineDocuments: [],
+    setOnlineDocuments: (documents: NotionPage[]) => {
+      set(() => ({
+        onlineDocuments: documents,
+      }))
+      const { previewOnlineDocumentRef } = get()
+      previewOnlineDocumentRef.current = documents[0]
+    },
+    currentDocument: undefined,
+    setCurrentDocument: (document: NotionPage | undefined) => set(() => ({
+      currentDocument: document,
+    })),
+    selectedPagesId: new Set(),
+    setSelectedPagesId: (selectedPagesId: Set<string>) => set(() => ({
+      selectedPagesId,
+    })),
+    previewOnlineDocumentRef: { current: undefined },
+  })
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/online-drive.ts

@@ -0,0 +1,69 @@
+import type { StateCreator } from 'zustand'
+import type { OnlineDriveFile } from '@/models/pipeline'
+
+export type OnlineDriveSliceShape = {
+  breadcrumbs: string[]
+  setBreadcrumbs: (breadcrumbs: string[]) => void
+  prefix: string[]
+  setPrefix: (prefix: string[]) => void
+  keywords: string
+  setKeywords: (keywords: string) => void
+  selectedFileIds: string[]
+  setSelectedFileIds: (selectedFileIds: string[]) => void
+  onlineDriveFileList: OnlineDriveFile[]
+  setOnlineDriveFileList: (onlineDriveFileList: OnlineDriveFile[]) => void
+  bucket: string
+  setBucket: (bucket: string) => void
+  nextPageParameters: Record<string, any>
+  currentNextPageParametersRef: React.RefObject<Record<string, any>>
+  setNextPageParameters: (nextPageParameters: Record<string, any>) => void
+  isTruncated: React.RefObject<boolean>
+  previewOnlineDriveFileRef: React.RefObject<OnlineDriveFile | undefined>
+  hasBucket: boolean
+  setHasBucket: (hasBucket: boolean) => void
+}
+
+export const createOnlineDriveSlice: StateCreator<OnlineDriveSliceShape> = (set, get) => {
+  return ({
+    breadcrumbs: [],
+    setBreadcrumbs: (breadcrumbs: string[]) => set(() => ({
+      breadcrumbs,
+    })),
+    prefix: [],
+    setPrefix: (prefix: string[]) => set(() => ({
+      prefix,
+    })),
+    keywords: '',
+    setKeywords: (keywords: string) => set(() => ({
+      keywords,
+    })),
+    selectedFileIds: [],
+    setSelectedFileIds: (selectedFileIds: string[]) => {
+      set(() => ({
+        selectedFileIds,
+      }))
+      const id = selectedFileIds[0]
+      const { onlineDriveFileList, previewOnlineDriveFileRef } = get()
+      previewOnlineDriveFileRef.current = onlineDriveFileList.find(file => file.id === id)
+    },
+    onlineDriveFileList: [],
+    setOnlineDriveFileList: (onlineDriveFileList: OnlineDriveFile[]) => set(() => ({
+      onlineDriveFileList,
+    })),
+    bucket: '',
+    setBucket: (bucket: string) => set(() => ({
+      bucket,
+    })),
+    nextPageParameters: {},
+    currentNextPageParametersRef: { current: {} },
+    setNextPageParameters: (nextPageParameters: Record<string, any>) => set(() => ({
+      nextPageParameters,
+    })),
+    isTruncated: { current: false },
+    previewOnlineDriveFileRef: { current: undefined },
+    hasBucket: false,
+    setHasBucket: (hasBucket: boolean) => set(() => ({
+      hasBucket,
+    })),
+  })
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/store/slices/website-crawl.ts

@@ -0,0 +1,47 @@
+import type { StateCreator } from 'zustand'
+import type { CrawlResult, CrawlResultItem } from '@/models/datasets'
+import { CrawlStep } from '@/models/datasets'
+
+export type WebsiteCrawlSliceShape = {
+  websitePages: CrawlResultItem[]
+  setWebsitePages: (pages: CrawlResultItem[]) => void
+  currentWebsite: CrawlResultItem | undefined
+  setCurrentWebsite: (website: CrawlResultItem | undefined) => void
+  crawlResult: CrawlResult | undefined
+  setCrawlResult: (result: CrawlResult | undefined) => void
+  step: CrawlStep
+  setStep: (step: CrawlStep) => void
+  previewIndex: number
+  setPreviewIndex: (index: number) => void
+  previewWebsitePageRef: React.RefObject<CrawlResultItem | undefined>
+}
+
+export const createWebsiteCrawlSlice: StateCreator<WebsiteCrawlSliceShape> = (set, get) => {
+  return ({
+    websitePages: [],
+    setWebsitePages: (pages: CrawlResultItem[]) => {
+      set(() => ({
+        websitePages: pages,
+      }))
+      const { previewWebsitePageRef } = get()
+      previewWebsitePageRef.current = pages[0]
+    },
+    currentWebsite: undefined,
+    setCurrentWebsite: (website: CrawlResultItem | undefined) => set(() => ({
+      currentWebsite: website,
+    })),
+    crawlResult: undefined,
+    setCrawlResult: (result: CrawlResult | undefined) => set(() => ({
+      crawlResult: result,
+    })),
+    step: CrawlStep.init,
+    setStep: (step: CrawlStep) => set(() => ({
+      step,
+    })),
+    previewIndex: -1,
+    setPreviewIndex: (index: number) => set(() => ({
+      previewIndex: index,
+    })),
+    previewWebsitePageRef: { current: undefined },
+  })
+}

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx

@@ -0,0 +1,39 @@
+'use client'
+import React from 'react'
+import cn from '@/utils/classnames'
+import Checkbox from '@/app/components/base/checkbox'
+import Tooltip from '@/app/components/base/tooltip'
+
+type CheckboxWithLabelProps = {
+  className?: string
+  isChecked: boolean
+  onChange: (isChecked: boolean) => void
+  label: string
+  labelClassName?: string
+  tooltip?: string
+}
+
+const CheckboxWithLabel = ({
+  className = '',
+  isChecked,
+  onChange,
+  label,
+  labelClassName,
+  tooltip,
+}: CheckboxWithLabelProps) => {
+  return (
+    <label className={cn('flex items-center space-x-2', className)}>
+      <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
+      <div className={cn('system-sm-medium text-text-secondary', labelClassName)}>{label}</div>
+      {tooltip && (
+        <Tooltip
+          popupContent={
+            <div className='w-[200px]'>{tooltip}</div>
+          }
+          triggerClassName='ml-0.5 w-4 h-4'
+        />
+      )}
+    </label>
+  )
+}
+export default React.memo(CheckboxWithLabel)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx

@@ -0,0 +1,80 @@
+'use client'
+import React, { useCallback } from 'react'
+import cn from '@/utils/classnames'
+import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
+import Checkbox from '@/app/components/base/checkbox'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Radio from '@/app/components/base/radio/ui'
+
+type CrawledResultItemProps = {
+  payload: CrawlResultItemType
+  isChecked: boolean
+  onCheckChange: (checked: boolean) => void
+  isPreview: boolean
+  showPreview: boolean
+  onPreview: () => void
+  isMultipleChoice?: boolean
+}
+
+const CrawledResultItem = ({
+  payload,
+  isChecked,
+  onCheckChange,
+  isPreview,
+  onPreview,
+  showPreview,
+  isMultipleChoice = true,
+}: CrawledResultItemProps) => {
+  const { t } = useTranslation()
+
+  const handleCheckChange = useCallback(() => {
+    onCheckChange(!isChecked)
+  }, [isChecked, onCheckChange])
+
+  return (
+    <div className={cn(
+      'relative flex cursor-pointer gap-x-2 rounded-lg p-2',
+      isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover',
+    )}>
+      {
+        isMultipleChoice ? (
+          <Checkbox
+            className='shrink-0'
+            checked={isChecked}
+            onCheck={handleCheckChange}
+          />
+        ) : (
+          <Radio
+            isChecked={isChecked}
+            onCheck={handleCheckChange}
+          />
+        )
+      }
+      <div className='flex min-w-0 grow flex-col gap-y-0.5'>
+        <div
+          className='system-sm-medium truncate text-text-secondary'
+          title={payload.title}
+        >
+          {payload.title}
+        </div>
+        <div
+          className='system-xs-regular truncate text-text-tertiary'
+          title={payload.source_url}
+        >
+          {payload.source_url}
+        </div>
+      </div>
+      {showPreview && (
+        <Button
+          size='small'
+          onClick={onPreview}
+          className='system-xs-medium-uppercase right-2 top-2 hidden px-1.5 group-hover:absolute group-hover:block'
+        >
+          {t('datasetCreation.stepOne.website.preview')}
+        </Button>
+      )}
+    </div>
+  )
+}
+export default React.memo(CrawledResultItem)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx

@@ -0,0 +1,98 @@
+'use client'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import type { CrawlResultItem } from '@/models/datasets'
+import CheckboxWithLabel from './checkbox-with-label'
+import CrawledResultItem from './crawled-result-item'
+
+const I18N_PREFIX = 'datasetCreation.stepOne.website'
+
+type CrawledResultProps = {
+  className?: string
+  previewIndex?: number
+  list: CrawlResultItem[]
+  checkedList: CrawlResultItem[]
+  onSelectedChange: (selected: CrawlResultItem[]) => void
+  onPreview?: (payload: CrawlResultItem, index: number) => void
+  showPreview?: boolean
+  usedTime: number
+  isMultipleChoice?: boolean
+}
+
+const CrawledResult = ({
+  className = '',
+  previewIndex,
+  list,
+  checkedList,
+  onSelectedChange,
+  usedTime,
+  onPreview,
+  showPreview = false,
+  isMultipleChoice = true,
+}: CrawledResultProps) => {
+  const { t } = useTranslation()
+
+  const isCheckAll = checkedList.length === list.length
+
+  const handleCheckedAll = useCallback(() => {
+    if (!isCheckAll)
+      onSelectedChange(list)
+
+    else
+      onSelectedChange([])
+  }, [isCheckAll, list, onSelectedChange])
+
+  const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
+    return (checked: boolean) => {
+      if (checked) {
+        if (isMultipleChoice)
+          onSelectedChange([...checkedList, item])
+        else
+          onSelectedChange([item])
+      }
+      else { onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url)) }
+    }
+  }, [checkedList, onSelectedChange, isMultipleChoice])
+
+  const handlePreview = useCallback((index: number) => {
+    if (!onPreview) return
+    onPreview(list[index], index)
+  }, [list, onPreview])
+
+  return (
+    <div className={cn('flex flex-col gap-y-2', className)}>
+      <div className='system-sm-medium pt-2 text-text-primary'>
+        {t(`${I18N_PREFIX}.scrapTimeInfo`, {
+          total: list.length,
+          time: usedTime.toFixed(1),
+        })}
+      </div>
+      <div className='overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg'>
+        {isMultipleChoice && (
+          <div className='flex items-center px-4 py-2'>
+            <CheckboxWithLabel
+              isChecked={isCheckAll}
+              onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
+            />
+          </div>
+        )}
+        <div className='flex flex-col gap-y-px border-t border-divider-subtle bg-background-default-subtle p-2'>
+          {list.map((item, index) => (
+            <CrawledResultItem
+              key={item.source_url}
+              payload={item}
+              isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
+              onCheckChange={handleItemCheckChange(item)}
+              isPreview={index === previewIndex}
+              onPreview={handlePreview.bind(null, index)}
+              showPreview={showPreview}
+              isMultipleChoice={isMultipleChoice}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(CrawledResult)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx

@@ -0,0 +1,89 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+
+type CrawlingProps = {
+  className?: string
+  crawledNum: number
+  totalNum: number
+}
+
+type BlockProps = {
+  className?: string
+}
+
+type ItemProps = {
+  firstLineWidth: string
+  secondLineWidth: string
+}
+
+const Block = React.memo(({
+  className,
+}: BlockProps) => {
+  return <div className={cn('bg-text-quaternary opacity-20', className)} />
+})
+
+const Item = React.memo(({
+  firstLineWidth,
+  secondLineWidth,
+}: ItemProps) => {
+  return (
+    <div className='flex gap-x-2 px-2 py-[5px]'>
+      <div className='py-0.5'>
+        <Block className='size-4 rounded-[4px]' />
+      </div>
+      <div className='flex grow flex-col'>
+        <div className='flex h-5 w-full items-center'>
+          <Block className={cn('h-2.5 rounded-sm', firstLineWidth)} />
+        </div>
+        <div className='flex h-[18px] w-full items-center'>
+          <Block className={cn('h-1.5 rounded-sm', secondLineWidth)} />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+const Crawling = ({
+  className = '',
+  crawledNum,
+  totalNum,
+}: CrawlingProps) => {
+  const { t } = useTranslation()
+
+  const itemsConfig = [{
+    firstLineWidth: 'w-[35%]',
+    secondLineWidth: 'w-[50%]',
+  }, {
+    firstLineWidth: 'w-[40%]',
+    secondLineWidth: 'w-[45%]',
+  }, {
+    firstLineWidth: 'w-[30%]',
+    secondLineWidth: 'w-[36%]',
+  }]
+
+  return (
+    <div className={cn('mt-2 flex flex-col gap-y-2 pt-2', className)}>
+      <div className='system-sm-medium text-text-primary'>
+        {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
+      </div>
+      <div className='overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg'>
+        <div className='flex items-center gap-x-2 px-4 py-2'>
+          <Block className='size-4 rounded-[4px]' />
+          <Block className='h-2.5 w-14 rounded-sm' />
+        </div>
+        <div className='flex flex-col gap-px border-t border-divider-subtle bg-background-default-subtle p-2'>
+          {itemsConfig.map((item, index) => (
+            <Item
+              key={index}
+              firstLineWidth={item.firstLineWidth}
+              secondLineWidth={item.secondLineWidth}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Crawling)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import cn from '@/utils/classnames'
+import { RiErrorWarningFill } from '@remixicon/react'
+
+type ErrorMessageProps = {
+  className?: string
+  title: string
+  errorMsg?: string
+}
+
+const ErrorMessage = ({
+  className,
+  title,
+  errorMsg,
+}: ErrorMessageProps) => {
+  return (
+    // eslint-disable-next-line tailwindcss/migration-from-tailwind-2
+    <div className={cn(
+      'flex gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border bg-opacity-40 bg-toast-error-bg p-2 shadow-xs shadow-shadow-shadow-3',
+      className,
+    )}>
+      <div className='flex size-6 items-center justify-center'>
+        <RiErrorWarningFill className='h-4 w-4 text-text-destructive' />
+      </div>
+      <div className='flex flex-col gap-y-0.5 py-1'>
+        <div className='system-xs-medium text-text-primary'>{title}</div>
+        {errorMsg && (
+          <div className='system-xs-regular text-text-secondary'>{errorMsg}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(ErrorMessage)

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx

@@ -0,0 +1,123 @@
+import Button from '@/app/components/base/button'
+import { useAppForm } from '@/app/components/base/form'
+import BaseField from '@/app/components/base/form/form-scenarios/base/field'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
+import cn from '@/utils/classnames'
+import { RiPlayLargeLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import { useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Toast from '@/app/components/base/toast'
+import type { RAGPipelineVariables } from '@/models/pipeline'
+import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline/hooks/use-input-fields'
+import { generateZodSchema } from '@/app/components/base/form/form-scenarios/base/utils'
+import { CrawlStep } from '@/models/datasets'
+
+const I18N_PREFIX = 'datasetCreation.stepOne.website'
+
+type OptionsProps = {
+  variables: RAGPipelineVariables
+  step: CrawlStep
+  runDisabled?: boolean
+  onSubmit: (data: Record<string, any>) => void
+}
+
+const Options = ({
+  variables,
+  step,
+  runDisabled,
+  onSubmit,
+}: OptionsProps) => {
+  const { t } = useTranslation()
+  const initialData = useInitialData(variables)
+  const configurations = useConfigurations(variables)
+  const schema = useMemo(() => {
+    return generateZodSchema(configurations)
+  }, [configurations])
+
+  const form = useAppForm({
+    defaultValues: initialData,
+    validators: {
+      onSubmit: ({ value }) => {
+        const result = schema.safeParse(value)
+        if (!result.success) {
+          const issues = result.error.issues
+          const firstIssue = issues[0]
+          const errorMessage = `"${firstIssue.path.join('.')}" ${firstIssue.message}`
+          Toast.notify({
+            type: 'error',
+            message: errorMessage,
+          })
+          return errorMessage
+        }
+        return undefined
+      },
+    },
+    onSubmit: ({ value }) => {
+      onSubmit(value)
+    },
+  })
+
+  const [fold, {
+    toggle: foldToggle,
+    setTrue: foldHide,
+    setFalse: foldShow,
+  }] = useBoolean(false)
+
+  useEffect(() => {
+    // When the step change
+    if (step !== CrawlStep.init)
+      foldHide()
+    else
+      foldShow()
+  }, [step])
+
+  const isRunning = useMemo(() => step === CrawlStep.running, [step])
+
+  return (
+    <form
+      className='w-full'
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <div className='flex items-center gap-x-1 px-4 py-2'>
+        <div
+          className='flex grow cursor-pointer select-none items-center gap-x-0.5'
+          onClick={foldToggle}
+        >
+          <span className='system-sm-semibold-uppercase text-text-secondary'>
+            {t(`${I18N_PREFIX}.options`)}
+          </span>
+          <ArrowDownRoundFill className={cn('h-4 w-4 shrink-0 text-text-quaternary', fold && '-rotate-90')} />
+        </div>
+        <Button
+          variant='primary'
+          onClick={form.handleSubmit}
+          disabled={runDisabled || isRunning}
+          loading={isRunning}
+          className='shrink-0 gap-x-0.5'
+          spinnerClassName='!ml-0'
+        >
+          <RiPlayLargeLine className='size-4' />
+          <span className='px-0.5'>{!isRunning ? t(`${I18N_PREFIX}.run`) : t(`${I18N_PREFIX}.running`)}</span>
+        </Button>
+      </div>
+      {!fold && (
+        <div className='flex flex-col gap-3 border-t border-divider-subtle px-4 py-3'>
+          {configurations.map((config, index) => {
+            const FieldComponent = BaseField({
+              initialData,
+              config,
+            })
+            return <FieldComponent key={index} form={form} />
+          })}
+        </div>
+      )}
+    </form>
+  )
+}
+
+export default Options

dify/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx

@@ -0,0 +1,206 @@
+'use client'
+import React, { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { CrawlResultItem } from '@/models/datasets'
+import { CrawlStep } from '@/models/datasets'
+import Header from '../base/header'
+import Options from './base/options'
+import Crawling from './base/crawling'
+import ErrorMessage from './base/error-message'
+import CrawledResult from './base/crawled-result'
+import {
+  useDraftPipelinePreProcessingParams,
+  usePublishedPipelinePreProcessingParams,
+} from '@/service/use-pipeline'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import { DatasourceType } from '@/models/pipeline'
+import { ssePost } from '@/service/base'
+import type {
+  DataSourceNodeCompletedResponse,
+  DataSourceNodeErrorResponse,
+  DataSourceNodeProcessingResponse,
+} from '@/types/pipeline'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '../store'
+import { useShallow } from 'zustand/react/shallow'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useGetDataSourceAuth } from '@/service/use-datasource'
+import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+const I18N_PREFIX = 'datasetCreation.stepOne.website'
+
+export type WebsiteCrawlProps = {
+  nodeId: string
+  nodeData: DataSourceNodeType
+  isInPipeline?: boolean
+  onCredentialChange: (credentialId: string) => void
+}
+
+const WebsiteCrawl = ({
+  nodeId,
+  nodeData,
+  isInPipeline = false,
+  onCredentialChange,
+}: WebsiteCrawlProps) => {
+  const { t } = useTranslation()
+  const docLink = useDocLink()
+  const [totalNum, setTotalNum] = useState(0)
+  const [crawledNum, setCrawledNum] = useState(0)
+  const [crawlErrorMessage, setCrawlErrorMessage] = useState('')
+  const pipelineId = useDatasetDetailContextWithSelector(s => s.dataset?.pipeline_id)
+  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
+  const {
+    crawlResult,
+    step,
+    checkedCrawlResult,
+    previewIndex,
+    currentCredentialId,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    crawlResult: state.crawlResult,
+    step: state.step,
+    checkedCrawlResult: state.websitePages,
+    previewIndex: state.previewIndex,
+    currentCredentialId: state.currentCredentialId,
+  })))
+
+  const { data: dataSourceAuth } = useGetDataSourceAuth({
+    pluginId: nodeData.plugin_id,
+    provider: nodeData.provider_name,
+  })
+
+  const dataSourceStore = useDataSourceStore()
+
+  const usePreProcessingParams = useRef(!isInPipeline ? usePublishedPipelinePreProcessingParams : useDraftPipelinePreProcessingParams)
+  const { data: paramsConfig, isFetching: isFetchingParams } = usePreProcessingParams.current({
+    pipeline_id: pipelineId!,
+    node_id: nodeId,
+  }, !!pipelineId && !!nodeId)
+
+  const isInit = step === CrawlStep.init
+  const isCrawlFinished = step === CrawlStep.finished
+  const isRunning = step === CrawlStep.running
+  const showError = isCrawlFinished && crawlErrorMessage
+  const datasourceNodeRunURL = !isInPipeline
+    ? `/rag/pipelines/${pipelineId}/workflows/published/datasource/nodes/${nodeId}/run`
+    : `/rag/pipelines/${pipelineId}/workflows/draft/datasource/nodes/${nodeId}/run`
+
+  const handleCheckedCrawlResultChange = useCallback((checkedCrawlResult: CrawlResultItem[]) => {
+    const { setWebsitePages } = dataSourceStore.getState()
+    setWebsitePages(checkedCrawlResult)
+  }, [dataSourceStore])
+
+  const handlePreview = useCallback((website: CrawlResultItem, index: number) => {
+    const { setCurrentWebsite, setPreviewIndex } = dataSourceStore.getState()
+    setCurrentWebsite(website)
+    setPreviewIndex(index)
+  }, [dataSourceStore])
+
+  const handleRun = useCallback(async (value: Record<string, any>) => {
+    const { setStep, setCrawlResult, currentCredentialId } = dataSourceStore.getState()
+
+    setStep(CrawlStep.running)
+    ssePost(
+      datasourceNodeRunURL,
+      {
+        body: {
+          inputs: value,
+          datasource_type: DatasourceType.websiteCrawl,
+          credential_id: currentCredentialId,
+          response_mode: 'streaming',
+        },
+      },
+      {
+        onDataSourceNodeProcessing: (data: DataSourceNodeProcessingResponse) => {
+          setTotalNum(data.total ?? 0)
+          setCrawledNum(data.completed ?? 0)
+        },
+        onDataSourceNodeCompleted: (data: DataSourceNodeCompletedResponse) => {
+          const { data: crawlData, time_consuming } = data
+          const crawlResultData = {
+            data: crawlData as CrawlResultItem[],
+            time_consuming: time_consuming ?? 0,
+          }
+          setCrawlResult(crawlResultData)
+          handleCheckedCrawlResultChange(isInPipeline ? [crawlData[0]] : crawlData) // default select the crawl result
+          setCrawlErrorMessage('')
+          setStep(CrawlStep.finished)
+        },
+        onDataSourceNodeError: (error: DataSourceNodeErrorResponse) => {
+          setCrawlErrorMessage(error.error || t(`${I18N_PREFIX}.unknownError`))
+          setStep(CrawlStep.finished)
+        },
+      },
+    )
+  }, [dataSourceStore, datasourceNodeRunURL, handleCheckedCrawlResultChange, isInPipeline, t])
+
+  const handleSubmit = useCallback((value: Record<string, any>) => {
+    handleRun(value)
+  }, [handleRun])
+
+  const handleSetting = useCallback(() => {
+    setShowAccountSettingModal({
+      payload: ACCOUNT_SETTING_TAB.DATA_SOURCE,
+    })
+  }, [setShowAccountSettingModal])
+
+  const handleCredentialChange = useCallback((credentialId: string) => {
+    setCrawledNum(0)
+    setTotalNum(0)
+    setCrawlErrorMessage('')
+    onCredentialChange(credentialId)
+  }, [dataSourceStore, onCredentialChange])
+
+  return (
+    <div className='flex flex-col'>
+      <Header
+        docTitle='Docs'
+        docLink={docLink('/guides/knowledge-base/knowledge-pipeline/authorize-data-source')}
+        onClickConfiguration={handleSetting}
+        pluginName={nodeData.datasource_label}
+        currentCredentialId={currentCredentialId}
+        onCredentialChange={handleCredentialChange}
+        credentials={dataSourceAuth?.result || []}
+      />
+      <div className='mt-2 rounded-xl border border-components-panel-border bg-background-default-subtle'>
+        <Options
+          variables={paramsConfig?.variables || []}
+          step={step}
+          runDisabled={!currentCredentialId || isFetchingParams}
+          onSubmit={handleSubmit}
+        />
+      </div>
+      {!isInit && (
+        <div className='relative flex flex-col'>
+          {isRunning && (
+            <Crawling
+              crawledNum={crawledNum}
+              totalNum={totalNum}
+            />
+          )}
+          {showError && (
+            <ErrorMessage
+              className='mt-2'
+              title={t(`${I18N_PREFIX}.exceptionErrorTitle`)}
+              errorMsg={crawlErrorMessage}
+            />
+          )}
+          {isCrawlFinished && !showError && (
+            <CrawledResult
+              className='mt-2'
+              list={crawlResult?.data || []}
+              checkedList={checkedCrawlResult}
+              onSelectedChange={handleCheckedCrawlResultChange}
+              usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
+              previewIndex={previewIndex}
+              onPreview={handlePreview}
+              showPreview={!isInPipeline}
+              isMultipleChoice={!isInPipeline} // only support single choice in test run
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(WebsiteCrawl)