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>
2025-12-11 15:49:42 +08:00
parent f20a2d1586
commit 91e5db3e83
32 changed files with 531 additions and 192 deletions
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -22,6 +22,10 @@ import classNames from '@/utils/classnames'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import NotionConnector from '@/app/components/base/notion-connector'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
+import { useBoolean } from 'ahooks'
+import { Plan } from '@/app/components/billing/type'
+import UpgradeCard from './upgrade-card'

 type IStepOneProps = {
  datasetId?: string
@@ -52,7 +56,7 @@ const StepOne = ({
  dataSourceTypeDisable,
  changeType,
  onSetting,
-  onStepChange,
+  onStepChange: doOnStepChange,
  files,
  updateFileList,
  updateFile,
@@ -110,7 +114,33 @@ const StepOne = ({
  const hasNotin = notionPages.length > 0
  const isVectorSpaceFull = plan.usage.vectorSpace >= plan.total.vectorSpace
  const isShowVectorSpaceFull = (allFileLoaded || hasNotin) && isVectorSpaceFull && enableBilling
-  const supportBatchUpload = !enableBilling || plan.type !== 'sandbox'
+  const supportBatchUpload = !enableBilling || plan.type !== Plan.sandbox
+  const notSupportBatchUpload = !supportBatchUpload
+
+  const [isShowPlanUpgradeModal, {
+    setTrue: showPlanUpgradeModal,
+    setFalse: hidePlanUpgradeModal,
+  }] = useBoolean(false)
+  const onStepChange = useCallback(() => {
+    if (notSupportBatchUpload) {
+      let isMultiple = false
+      if (dataSourceType === DataSourceType.FILE && files.length > 1)
+        isMultiple = true
+
+      if (dataSourceType === DataSourceType.NOTION && notionPages.length > 1)
+        isMultiple = true
+
+      if (dataSourceType === DataSourceType.WEB && websitePages.length > 1)
+        isMultiple = true
+
+      if (isMultiple) {
+        showPlanUpgradeModal()
+        return
+      }
+    }
+    doOnStepChange()
+  }, [dataSourceType, doOnStepChange, files.length, notSupportBatchUpload, notionPages.length, showPlanUpgradeModal, websitePages.length])
+
  const nextDisabled = useMemo(() => {
    if (!files.length)
      return true
@@ -244,6 +274,14 @@ const StepOne = ({
                      </span>
                    </Button>
                  </div>
+                  {
+                    enableBilling && plan.type === Plan.sandbox && files.length > 0 && (
+                      <div className='mt-5'>
+                        <div className='mb-4 h-px bg-divider-subtle'></div>
+                        <UpgradeCard />
+                      </div>
+                    )
+                  }
                </>
              )}
              {dataSourceType === DataSourceType.NOTION && (
@@ -259,7 +297,6 @@ const StepOne = ({
                          credentialList={notionCredentialList}
                          onSelectCredential={updateNotionCredentialId}
                          datasetId={datasetId}
-                          supportBatchUpload={supportBatchUpload}
                        />
                      </div>
                      {isShowVectorSpaceFull && (
@@ -291,7 +328,6 @@ const StepOne = ({
                      crawlOptions={crawlOptions}
                      onCrawlOptionsChange={onCrawlOptionsChange}
                      authedDataSourceList={authedDataSourceList}
-                      supportBatchUpload={supportBatchUpload}
                    />
                  </div>
                  {isShowVectorSpaceFull && (
@@ -332,6 +368,14 @@ const StepOne = ({
            />
          )}
          {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+          {isShowPlanUpgradeModal && (
+            <PlanUpgradeModal
+              show
+              onClose={hidePlanUpgradeModal}
+              title={t('billing.upgrade.uploadMultiplePages.title')!}
+              description={t('billing.upgrade.uploadMultiplePages.description')!}
+            />
+          )}
        </div>
      </div>
    </div>
--- a/web/app/components/datasets/create/step-one/upgrade-card.tsx
+++ b/web/app/components/datasets/create/step-one/upgrade-card.tsx
@@ -0,0 +1,33 @@
+'use client'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import { useModalContext } from '@/context/modal-context'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const UpgradeCard: FC = () => {
+  const { t } = useTranslation()
+  const { setShowPricingModal } = useModalContext()
+
+  const handleUpgrade = useCallback(() => {
+    setShowPricingModal()
+  }, [setShowPricingModal])
+
+  return (
+    <div className='flex items-center justify-between rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-3 pl-4 pr-3.5 shadow-xs backdrop-blur-[5px] '>
+      <div>
+        <div className='title-md-semi-bold bg-[linear-gradient(92deg,_var(--components-input-border-active-prompt-1,_#0BA5EC)_0%,_var(--components-input-border-active-prompt-2,_#155AEF)_99.21%)] bg-clip-text text-transparent'>{t('billing.upgrade.uploadMultipleFiles.title')}</div>
+        <div className='system-xs-regular text-text-tertiary'>{t('billing.upgrade.uploadMultipleFiles.description')}</div>
+      </div>
+      <UpgradeBtn
+        size='custom'
+        isShort
+        className='ml-3 !h-8 !rounded-lg px-2'
+        labelKey='billing.triggerLimitModal.upgrade'
+        loc='upload-multiple-files'
+        onClick={handleUpgrade}
+      />
+    </div>
+  )
+}
+export default React.memo(UpgradeCard)
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -6,7 +6,6 @@ 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 Radio from '@/app/components/base/radio/ui'

 type Props = {
  payload: CrawlResultItemType
@@ -14,7 +13,6 @@ type Props = {
  isPreview: boolean
  onCheckChange: (checked: boolean) => void
  onPreview: () => void
-  isMultipleChoice: boolean
 }

 const CrawledResultItem: FC<Props> = ({
@@ -23,7 +21,6 @@ const CrawledResultItem: FC<Props> = ({
  isChecked,
  onCheckChange,
  onPreview,
-  isMultipleChoice,
 }) => {
  const { t } = useTranslation()

@@ -34,21 +31,7 @@ const CrawledResultItem: FC<Props> = ({
    <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'cursor-pointer rounded-lg p-2')}>
      <div className='relative flex'>
        <div className='flex h-5 items-center'>
-          {
-            isMultipleChoice ? (
-              <Checkbox
-                className='mr-2 shrink-0'
-                checked={isChecked}
-                onCheck={handleCheckChange}
-              />
-            ) : (
-              <Radio
-                className='mr-2 shrink-0'
-                isChecked={isChecked}
-                onCheck={handleCheckChange}
-              />
-            )
-          }
+          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
        </div>
        <div className='flex min-w-0 grow flex-col'>
          <div
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -16,7 +16,6 @@ type Props = {
  onSelectedChange: (selected: CrawlResultItem[]) => void
  onPreview: (payload: CrawlResultItem) => void
  usedTime: number
-  isMultipleChoice: boolean
 }

 const CrawledResult: FC<Props> = ({
@@ -26,7 +25,6 @@ const CrawledResult: FC<Props> = ({
  onSelectedChange,
  onPreview,
  usedTime,
-  isMultipleChoice,
 }) => {
  const { t } = useTranslation()

@@ -42,17 +40,13 @@ const CrawledResult: FC<Props> = ({

  const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
    return (checked: boolean) => {
-      if (checked) {
-        if (isMultipleChoice)
-          onSelectedChange([...checkedList, item])
-        else
-          onSelectedChange([item])
-      }
-      else {
+      if (checked)
+        onSelectedChange([...checkedList, item])
+
+      else
        onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url))
-      }
    }
-  }, [checkedList, isMultipleChoice, onSelectedChange])
+  }, [checkedList, onSelectedChange])

  const [previewIndex, setPreviewIndex] = React.useState<number>(-1)
  const handlePreview = useCallback((index: number) => {
@@ -65,13 +59,11 @@ const CrawledResult: FC<Props> = ({
  return (
    <div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
      <div className='flex h-[34px] items-center justify-between px-4'>
-        {isMultipleChoice && (
-          <CheckboxWithLabel
-            isChecked={isCheckAll}
-            onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-            labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
-          />
-        )}
+        <CheckboxWithLabel
+          isChecked={isCheckAll}
+          onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
+          labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
+        />
        <div className='text-xs text-text-tertiary'>
          {t(`${I18N_PREFIX}.scrapTimeInfo`, {
            total: list.length,
@@ -88,7 +80,6 @@ const CrawledResult: FC<Props> = ({
            payload={item}
            isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
            onCheckChange={handleItemCheckChange(item)}
-            isMultipleChoice={isMultipleChoice}
          />
        ))}
      </div>
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -26,7 +26,6 @@ type Props = {
  onJobIdChange: (jobId: string) => void
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
-  supportBatchUpload: boolean
 }

 enum Step {
@@ -42,7 +41,6 @@ const FireCrawl: FC<Props> = ({
  onJobIdChange,
  crawlOptions,
  onCrawlOptionsChange,
-  supportBatchUpload,
 }) => {
  const { t } = useTranslation()
  const [step, setStep] = useState<Step>(Step.init)
@@ -168,12 +166,8 @@ const FireCrawl: FC<Props> = ({
        setCrawlErrorMessage(errorMessage || t(`${I18N_PREFIX}.unknownError`))
      }
      else {
-        data.data = data.data.map((item: any) => ({
-          ...item,
-          content: item.markdown,
-        }))
        setCrawlResult(data)
-        onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result
+        onCheckedCrawlResultChange(data.data || []) // default select the crawl result
        setCrawlErrorMessage('')
      }
    }
@@ -184,7 +178,7 @@ const FireCrawl: FC<Props> = ({
    finally {
      setStep(Step.finished)
    }
-  }, [checkValid, crawlOptions, onJobIdChange, waitForCrawlFinished, t, onCheckedCrawlResultChange, supportBatchUpload])
+  }, [checkValid, crawlOptions, onJobIdChange, t, waitForCrawlFinished, onCheckedCrawlResultChange])

  return (
    <div>
@@ -223,7 +217,6 @@ const FireCrawl: FC<Props> = ({
                onSelectedChange={onCheckedCrawlResultChange}
                onPreview={onPreview}
                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                isMultipleChoice={supportBatchUpload}
              />
            }
          </div>
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -24,7 +24,6 @@ type Props = {
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
  authedDataSourceList: DataSourceAuth[]
-  supportBatchUpload?: boolean
 }

 const Website: FC<Props> = ({
@@ -36,7 +35,6 @@ const Website: FC<Props> = ({
  crawlOptions,
  onCrawlOptionsChange,
  authedDataSourceList,
-  supportBatchUpload = false,
 }) => {
  const { t } = useTranslation()
  const { setShowAccountSettingModal } = useModalContext()
@@ -118,7 +116,6 @@ const Website: FC<Props> = ({
          onJobIdChange={onJobIdChange}
          crawlOptions={crawlOptions}
          onCrawlOptionsChange={onCrawlOptionsChange}
-          supportBatchUpload={supportBatchUpload}
        />
      )}
      {source && selectedProvider === DataSourceProvider.waterCrawl && (
@@ -129,7 +126,6 @@ const Website: FC<Props> = ({
          onJobIdChange={onJobIdChange}
          crawlOptions={crawlOptions}
          onCrawlOptionsChange={onCrawlOptionsChange}
-          supportBatchUpload={supportBatchUpload}
        />
      )}
      {source && selectedProvider === DataSourceProvider.jinaReader && (
@@ -140,7 +136,6 @@ const Website: FC<Props> = ({
          onJobIdChange={onJobIdChange}
          crawlOptions={crawlOptions}
          onCrawlOptionsChange={onCrawlOptionsChange}
-          supportBatchUpload={supportBatchUpload}
        />
      )}
      {!source && (
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -26,7 +26,6 @@ type Props = {
  onJobIdChange: (jobId: string) => void
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
-  supportBatchUpload: boolean
 }

 enum Step {
@@ -42,7 +41,6 @@ const JinaReader: FC<Props> = ({
  onJobIdChange,
  crawlOptions,
  onCrawlOptionsChange,
-  supportBatchUpload,
 }) => {
  const { t } = useTranslation()
  const [step, setStep] = useState<Step>(Step.init)
@@ -178,7 +176,7 @@ const JinaReader: FC<Props> = ({
        }
        else {
          setCrawlResult(data)
-          onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result
+          onCheckedCrawlResultChange(data.data || []) // default select the crawl result
          setCrawlErrorMessage('')
        }
      }
@@ -190,7 +188,7 @@ const JinaReader: FC<Props> = ({
    finally {
      setStep(Step.finished)
    }
-  }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, supportBatchUpload, t, waitForCrawlFinished])
+  }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished])

  return (
    <div>
@@ -229,7 +227,6 @@ const JinaReader: FC<Props> = ({
                onSelectedChange={onCheckedCrawlResultChange}
                onPreview={onPreview}
                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                isMultipleChoice={supportBatchUpload}
              />
            }
          </div>
--- a/web/app/components/datasets/create/website/watercrawl/index.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/index.tsx
@@ -26,7 +26,6 @@ type Props = {
  onJobIdChange: (jobId: string) => void
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
-  supportBatchUpload: boolean
 }

 enum Step {
@@ -42,7 +41,6 @@ const WaterCrawl: FC<Props> = ({
  onJobIdChange,
  crawlOptions,
  onCrawlOptionsChange,
-  supportBatchUpload,
 }) => {
  const { t } = useTranslation()
  const [step, setStep] = useState<Step>(Step.init)
@@ -165,7 +163,7 @@ const WaterCrawl: FC<Props> = ({
      }
      else {
        setCrawlResult(data)
-        onCheckedCrawlResultChange(supportBatchUpload ? (data.data || []) : (data.data?.slice(0, 1) || [])) // default select the crawl result
+        onCheckedCrawlResultChange(data.data || []) // default select the crawl result
        setCrawlErrorMessage('')
      }
    }
@@ -176,7 +174,7 @@ const WaterCrawl: FC<Props> = ({
    finally {
      setStep(Step.finished)
    }
-  }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, supportBatchUpload, t, waitForCrawlFinished])
+  }, [checkValid, crawlOptions, onCheckedCrawlResultChange, onJobIdChange, t, waitForCrawlFinished])

  return (
    <div>
@@ -215,7 +213,6 @@ const WaterCrawl: FC<Props> = ({
                onSelectedChange={onCheckedCrawlResultChange}
                onPreview={onPreview}
                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
-                isMultipleChoice={supportBatchUpload}
              />
            }
          </div>