chore: Advance the timing of the dataset payment prompt (#29497)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

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

@@ -28,7 +28,7 @@ export type LocalFileProps = {
 
 const LocalFile = ({
   allowedExtensions,
-  supportBatchUpload = false,
+  supportBatchUpload = true,
 }: LocalFileProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)

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

@@ -30,7 +30,7 @@ const OnlineDocuments = ({
   nodeId,
   nodeData,
   isInPipeline = false,
-  supportBatchUpload = false,
+  supportBatchUpload = true,
   onCredentialChange,
 }: OnlineDocumentsProps) => {
   const docLink = useDocLink()

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

@@ -29,7 +29,7 @@ const OnlineDrive = ({
   nodeId,
   nodeData,
   isInPipeline = false,
-  supportBatchUpload = false,
+  supportBatchUpload = true,
   onCredentialChange,
 }: OnlineDriveProps) => {
   const docLink = useDocLink()

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

@@ -42,7 +42,7 @@ const WebsiteCrawl = ({
   nodeId,
   nodeData,
   isInPipeline = false,
-  supportBatchUpload = false,
+  supportBatchUpload = true,
   onCredentialChange,
 }: WebsiteCrawlProps) => {
   const { t } = useTranslation()

web/app/components/datasets/documents/create-from-pipeline/index.tsx

@@ -36,6 +36,10 @@ import { useAddDocumentsSteps, useLocalFile, useOnlineDocument, useOnlineDrive,
 import DataSourceProvider from './data-source/store/provider'
 import { useDataSourceStore } from './data-source/store'
 import { useFileUploadConfig } from '@/service/use-common'
+import UpgradeCard from '../../create/step-one/upgrade-card'
+import Divider from '@/app/components/base/divider'
+import { useBoolean } from 'ahooks'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 
 const CreateFormPipeline = () => {
   const { t } = useTranslation()
@@ -57,7 +61,7 @@ const CreateFormPipeline = () => {
   const {
     steps,
     currentStep,
-    handleNextStep,
+    handleNextStep: doHandleNextStep,
     handleBackStep,
   } = useAddDocumentsSteps()
   const {
@@ -104,6 +108,33 @@ const CreateFormPipeline = () => {
   }, [allFileLoaded, datasource, datasourceType, enableBilling, isVectorSpaceFull, onlineDocuments.length, onlineDriveFileList.length, websitePages.length])
   const supportBatchUpload = !enableBilling || plan.type !== 'sandbox'
 
+  const [isShowPlanUpgradeModal, {
+    setTrue: showPlanUpgradeModal,
+    setFalse: hidePlanUpgradeModal,
+  }] = useBoolean(false)
+  const handleNextStep = useCallback(() => {
+    if (!supportBatchUpload) {
+      let isMultiple = false
+      if (datasourceType === DatasourceType.localFile && localFileList.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.onlineDocument && onlineDocuments.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.websiteCrawl && websitePages.length > 1)
+        isMultiple = true
+
+      if (datasourceType === DatasourceType.onlineDrive && selectedFileIds.length > 1)
+        isMultiple = true
+
+      if (isMultiple) {
+        showPlanUpgradeModal()
+        return
+      }
+    }
+    doHandleNextStep()
+  }, [datasourceType, doHandleNextStep, localFileList.length, onlineDocuments.length, selectedFileIds.length, showPlanUpgradeModal, supportBatchUpload, websitePages.length])
+
   const nextBtnDisabled = useMemo(() => {
     if (!datasource) return true
     if (datasourceType === DatasourceType.localFile)
@@ -125,16 +156,16 @@ const CreateFormPipeline = () => {
   const showSelect = useMemo(() => {
     if (datasourceType === DatasourceType.onlineDocument) {
       const pagesCount = currentWorkspace?.pages.length ?? 0
-      return supportBatchUpload && pagesCount > 0
+      return pagesCount > 0
     }
     if (datasourceType === DatasourceType.onlineDrive) {
       const isBucketList = onlineDriveFileList.some(file => file.type === 'bucket')
-      return supportBatchUpload && !isBucketList && onlineDriveFileList.filter((item) => {
+      return !isBucketList && onlineDriveFileList.filter((item) => {
         return item.type !== 'bucket'
       }).length > 0
     }
     return false
-  }, [currentWorkspace?.pages.length, datasourceType, supportBatchUpload, onlineDriveFileList])
+  }, [currentWorkspace?.pages.length, datasourceType, onlineDriveFileList])
 
   const totalOptions = useMemo(() => {
     if (datasourceType === DatasourceType.onlineDocument)
@@ -390,11 +421,12 @@ const CreateFormPipeline = () => {
   }, [PagesMapAndSelectedPagesId, currentWorkspace?.pages, dataSourceStore, datasourceType])
 
   const clearDataSourceData = useCallback((dataSource: Datasource) => {
-    if (dataSource.nodeData.provider_type === DatasourceType.onlineDocument)
+    const providerType = dataSource.nodeData.provider_type
+    if (providerType === DatasourceType.onlineDocument)
       clearOnlineDocumentData()
-    else if (dataSource.nodeData.provider_type === DatasourceType.websiteCrawl)
+    else if (providerType === DatasourceType.websiteCrawl)
       clearWebsiteCrawlData()
-    else if (dataSource.nodeData.provider_type === DatasourceType.onlineDrive)
+    else if (providerType === DatasourceType.onlineDrive)
       clearOnlineDriveData()
   }, [clearOnlineDocumentData, clearOnlineDriveData, clearWebsiteCrawlData])
 
@@ -452,7 +484,6 @@ const CreateFormPipeline = () => {
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
                       onCredentialChange={handleCredentialChange}
-                      supportBatchUpload={supportBatchUpload}
                     />
                   )}
                   {datasourceType === DatasourceType.websiteCrawl && (
@@ -460,7 +491,6 @@ const CreateFormPipeline = () => {
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
                       onCredentialChange={handleCredentialChange}
-                      supportBatchUpload={supportBatchUpload}
                     />
                   )}
                   {datasourceType === DatasourceType.onlineDrive && (
@@ -468,7 +498,6 @@ const CreateFormPipeline = () => {
                       nodeId={datasource!.nodeId}
                       nodeData={datasource!.nodeData}
                       onCredentialChange={handleCredentialChange}
-                      supportBatchUpload={supportBatchUpload}
                     />
                   )}
                   {isShowVectorSpaceFull && (
@@ -483,6 +512,14 @@ const CreateFormPipeline = () => {
                     handleNextStep={handleNextStep}
                     tip={tip}
                   />
+                  {
+                    !supportBatchUpload && datasourceType === DatasourceType.localFile && localFileList.length > 0 && (
+                      <>
+                        <Divider type='horizontal' className='my-4 h-px bg-divider-subtle' />
+                        <UpgradeCard />
+                      </>
+                    )
+                  }
                 </div>
               )
             }
@@ -561,6 +598,14 @@ const CreateFormPipeline = () => {
           </div>
         )
       }
+      {isShowPlanUpgradeModal && (
+        <PlanUpgradeModal
+          show
+          onClose={hidePlanUpgradeModal}
+          title={t('billing.upgrade.uploadMultiplePages.title')!}
+          description={t('billing.upgrade.uploadMultiplePages.description')!}
+        />
+      )}
     </div>
   )
 }