From 0d2dda7e774fa281508700f01c82f88e86260d73 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 10 Dec 2025 11:45:18 +0800
Subject: [PATCH] feat: add modals

---
 .../billing/plan-upgrade-modal/index.tsx      | 79 +++++++++++++++++++
 .../plan-upgrade-modal/style.module.css       | 30 +++++++
 .../datasets/create/step-one/index.tsx        | 11 +++
 3 files changed, 120 insertions(+)
 create mode 100644 web/app/components/billing/plan-upgrade-modal/index.tsx
 create mode 100644 web/app/components/billing/plan-upgrade-modal/style.module.css

diff --git a/web/app/components/billing/plan-upgrade-modal/index.tsx b/web/app/components/billing/plan-upgrade-modal/index.tsx
new file mode 100644
index 0000000000..7dfce468d0
--- /dev/null
+++ b/web/app/components/billing/plan-upgrade-modal/index.tsx
@@ -0,0 +1,79 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import styles from './style.module.css'
+
+type Props = {
+  Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  title: string
+  description: string
+  extraInfo?: React.ReactNode
+  show: boolean
+  onClose: () => void
+  onUpgrade?: () => void
+}
+
+const PlanUpgradeModal: FC<Props> = ({
+  Icon = TriggerAll,
+  title,
+  description,
+  extraInfo,
+  show,
+  onClose: onClose,
+  onUpgrade,
+}) => {
+  const { t } = useTranslation()
+  // const { plan } = useProviderContext()
+  return (
+    <Modal
+      isShow={show}
+      onClose={onClose}
+      closable={false}
+      clickOutsideNotClose
+      className={`${styles.surface} flex w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
+    >
+      <div className='relative flex w-full flex-1 items-stretch justify-center'>
+        <div
+          aria-hidden
+          className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
+        />
+        <div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
+          <div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
+            <Icon className='h-5 w-5 text-text-primary-on-surface' />
+          </div>
+          <div className='flex flex-col items-start gap-2'>
+            <div className={`${styles.highlight} title-lg-semi-bold`}>
+              {title}
+            </div>
+            <div className='body-md-regular text-text-secondary'>
+              {description}
+            </div>
+          </div>
+          {extraInfo}
+        </div>
+      </div>
+
+      <div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
+        <Button
+          onClick={onClose}
+        >
+          {t('billing.triggerLimitModal.dismiss')}
+        </Button>
+        <UpgradeBtn
+          isShort
+          onClick={onUpgrade}
+          style={{ height: 32 }}
+          labelKey='billing.triggerLimitModal.upgrade'
+          loc='trigger-events-limit-modal'
+        />
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(PlanUpgradeModal)
diff --git a/web/app/components/billing/plan-upgrade-modal/style.module.css b/web/app/components/billing/plan-upgrade-modal/style.module.css
new file mode 100644
index 0000000000..e8e86719e6
--- /dev/null
+++ b/web/app/components/billing/plan-upgrade-modal/style.module.css
@@ -0,0 +1,30 @@
+.surface {
+  border: 0.5px solid var(--color-components-panel-border, rgba(16, 24, 40, 0.08));
+  background:
+    linear-gradient(109deg, var(--color-background-section, #f9fafb) 0%, var(--color-background-section-burn, #f2f4f7) 100%),
+    var(--color-components-panel-bg, #fff);
+}
+
+.heroOverlay {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' fill='none'%3E%3Crect x='1' y='1' width='48' height='48' rx='12' stroke='rgba(16, 24, 40, 0.3)' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
+  background-size: 54px 54px;
+  background-position: 31px -23px;
+  background-repeat: repeat;
+  mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 75%);
+}
+
+.icon {
+  border: 0.5px solid transparent;
+  background:
+    linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
+    var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
+  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
+}
+
+.highlight {
+  background: linear-gradient(97deg, var(--color-components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -4%, var(--color-components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index cab1637661..893f9ff07d 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -22,6 +22,8 @@ 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 { noop } from 'lodash-es'
 
 type IStepOneProps = {
   datasetId?: string
@@ -330,6 +332,15 @@ const StepOne = ({
             />
           )}
           {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+          {
+            <PlanUpgradeModal
+              show
+              onClose={noop}
+              onUpgrade={noop}
+              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.'
+            />
+          }
         </div>
       </div>
     </div>