From 840d45d407803b9281ca9554a8bf8961dfd30502 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 10 Dec 2025 16:56:11 +0800
Subject: [PATCH] feat: add missing tips

---
 .../datasets/create/step-one/index.tsx        |  9 +++++
 .../datasets/create/step-one/upgrade-card.tsx | 33 +++++++++++++++++++
 web/i18n/en-US/billing.ts                     |  4 +++
 web/i18n/ja-JP/billing.ts                     |  8 +++--
 web/i18n/zh-Hans/billing.ts                   |  4 +++
 5 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/datasets/create/step-one/upgrade-card.tsx

diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 966aaa8479..bcdb0a9e58 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -25,6 +25,7 @@ import type { DataSourceAuth } from '@/app/components/header/account-setting/dat
 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
@@ -273,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 && (
diff --git a/web/app/components/datasets/create/step-one/upgrade-card.tsx b/web/app/components/datasets/create/step-one/upgrade-card.tsx
new file mode 100644
index 0000000000..57a65c6093
--- /dev/null
+++ 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='!h-8 !rounded-lg px-2'
+        labelKey='billing.triggerLimitModal.upgrade'
+        loc='upload-multiple-files'
+        onClick={handleUpgrade}
+      />
+    </div>
+  )
+}
+export default React.memo(UpgradeCard)
diff --git a/web/i18n/en-US/billing.ts b/web/i18n/en-US/billing.ts
index 793e534e35..dbb9a7d34d 100644
--- a/web/i18n/en-US/billing.ts
+++ b/web/i18n/en-US/billing.ts
@@ -226,6 +226,10 @@ const translation = {
       title: 'Upgrade to upload multiple pages at once',
       description: 'You’ve reached the upload limit — only one page can be selected and uploaded at a time on your current plan.',
     },
+    uploadMultipleFiles: {
+      title: 'Upgrade to unlock batch file upload',
+      description: 'Batch-upload more files at once to save time and improve efficiency.',
+    },
     addChunks: {
       title: 'Upgrade to continue adding chunks',
       description: 'You’ve reached the limit of adding chunks for this plan. ',
diff --git a/web/i18n/ja-JP/billing.ts b/web/i18n/ja-JP/billing.ts
index a7dd695871..555bf90c77 100644
--- a/web/i18n/ja-JP/billing.ts
+++ b/web/i18n/ja-JP/billing.ts
@@ -207,9 +207,13 @@ const translation = {
       title: '複数ページを一度にアップロードするにはアップグレード',
       description: '現在のプランではアップロード上限に達しています。1回の操作で選択・アップロードできるページは1つのみです。',
     },
+    uploadMultipleFiles: {
+      title: 'Upgrade to unlock batch file upload',
+      description: 'Batch-upload more files at once to save time and improve efficiency.',
+    },
     addChunks: {
-      title: 'アップグレードして、チャンクを引き続き追加できるようにしてください。',
-      description: 'このプランでは、チャンク追加の上限に達しています。 ',
+      title: '一括ファイルアップロード機能を解放するにはアップグレードが必要です',
+      description: '複数のファイルを一度にバッチアップロードすることで、時間を節約し、作業効率を向上できます。 ',
     },
   },
 }
diff --git a/web/i18n/zh-Hans/billing.ts b/web/i18n/zh-Hans/billing.ts
index 6e0c97de71..28d048b8f9 100644
--- a/web/i18n/zh-Hans/billing.ts
+++ b/web/i18n/zh-Hans/billing.ts
@@ -207,6 +207,10 @@ const translation = {
       title: '升级以一次性上传多个页面',
       description: '您已达到当前套餐的上传限制 —— 该套餐每次只能选择并上传 1 个页面。',
     },
+    uploadMultipleFiles: {
+      title: '升级以解锁批量文件上传功能',
+      description: '一次性批量上传更多文件，以节省时间并提升效率。',
+    },
     addChunks: {
       title: '升级以继续添加分段',
       description: '您已达到此计划的添加分段上限。',