feat: can add segement check

web/app/components/base/premium-badge/index.tsx

@@ -12,6 +12,7 @@ const PremiumBadgeVariants = cva(
       size: {
         s: 'premium-badge-s',
         m: 'premium-badge-m',
+        custom: '',
       },
       color: {
         blue: 'premium-badge-blue',
@@ -33,7 +34,7 @@ const PremiumBadgeVariants = cva(
 )
 
 type PremiumBadgeProps = {
-  size?: 's' | 'm'
+  size?: 's' | 'm' | 'custom'
   color?: 'blue' | 'indigo' | 'gray' | 'orange'
   allowHover?: boolean
   styleCss?: CSSProperties

web/app/components/billing/plan-upgrade-modal/index.tsx

@@ -72,9 +72,10 @@ const PlanUpgradeModal: FC<Props> = ({
           {t('billing.triggerLimitModal.dismiss')}
         </Button>
         <UpgradeBtn
+          size='custom'
           isShort
           onClick={handleUpgrade}
-          className='!h-8 !rounded-lg'
+          className='!h-8 !rounded-lg px-2'
           labelKey='billing.triggerLimitModal.upgrade'
           loc='trigger-events-limit-modal'
         />

web/app/components/billing/upgrade-btn/index.tsx

@@ -11,7 +11,7 @@ type Props = {
   className?: string
   style?: CSSProperties
   isFull?: boolean
-  size?: 'md' | 'lg'
+  size?: 's' | 'm' | 'custom'
   isPlain?: boolean
   isShort?: boolean
   onClick?: () => void
@@ -21,6 +21,7 @@ type Props = {
 
 const UpgradeBtn: FC<Props> = ({
   className,
+  size = 'm',
   style,
   isPlain = false,
   isShort = false,
@@ -62,7 +63,7 @@ const UpgradeBtn: FC<Props> = ({
 
   return (
     <PremiumBadge
-      size='m'
+      size={size}
       color='blue'
       allowHover={true}
       onClick={onClick}

web/app/components/datasets/documents/detail/segment-add/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
@@ -11,6 +11,9 @@ import {
 import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
+import { useBoolean } from 'ahooks'
+import { useProviderContext } from '@/context/provider-context'
+import PlanUpgradeModal from '@/app/components/billing/plan-upgrade-modal'
 
 export type ISegmentAddProps = {
   importStatus: ProcessStatus | string | undefined
@@ -35,6 +38,23 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
   embedding,
 }) => {
   const { t } = useTranslation()
+  const [isShowPlanUpgradeModal, {
+    setTrue: showPlanUpgradeModal,
+    setFalse: hidePlanUpgradeModal,
+  }] = useBoolean(false)
+  const { plan, enableBilling } = useProviderContext()
+  const { usage, total } = plan
+  const canAdd = enableBilling && (usage.vectorSpace < total.vectorSpace)
+
+  const withNeedUpgradeCheck = useCallback((fn: () => void) => {
+    return () => {
+      if (!canAdd) {
+        showPlanUpgradeModal()
+        return
+      }
+      fn()
+    }
+  }, [canAdd, showPlanUpgradeModal])
   const textColor = useMemo(() => {
     return embedding
       ? 'text-components-button-secondary-accent-text-disabled'
@@ -90,7 +110,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         type='button'
         className={`inline-flex items-center rounded-l-lg border-r-[1px] border-r-divider-subtle px-2.5 py-2
           hover:bg-state-base-hover disabled:cursor-not-allowed disabled:hover:bg-transparent`}
-        onClick={showNewSegmentModal}
+        onClick={withNeedUpgradeCheck(showNewSegmentModal)}
         disabled={embedding}
       >
         <RiAddLine className={cn('h-4 w-4', textColor)} />
@@ -108,7 +128,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
             <button
               type='button'
               className='system-md-regular flex w-full items-center rounded-lg px-2 py-1.5 text-text-secondary'
-              onClick={showBatchModal}
+              onClick={withNeedUpgradeCheck(showBatchModal)}
             >
               {t('datasetDocuments.list.action.batchAdd')}
             </button>
@@ -116,7 +136,7 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         }
         btnElement={
           <div className='flex items-center justify-center' >
-            <RiArrowDownSLine className={cn('h-4 w-4', textColor)}/>
+            <RiArrowDownSLine className={cn('h-4 w-4', textColor)} />
           </div>
         }
         btnClassName={open => cn(
@@ -129,7 +149,16 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         className='h-fit min-w-[128px]'
         disabled={embedding}
       />
+      {isShowPlanUpgradeModal && (
+        <PlanUpgradeModal
+          show
+          onClose={hidePlanUpgradeModal}
+          title={t('billing.upgrade.addChunks.title')!}
+          description={t('billing.upgrade.addChunks.description')!}
+        />
+      )}
     </div>
+
   )
 }
 export default React.memo(SegmentAdd)

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.',
     },
+    addChunks: {
+      title: 'Upgrade to continue adding chunks',
+      description: 'You’ve reached the limit of adding chunks for this plan. ',
+    },
   },
 }
 

web/i18n/ja-JP/billing.ts

@@ -207,6 +207,10 @@ const translation = {
       title: '複数ページを一度にアップロードするにはアップグレード',
       description: '現在のプランではアップロード上限に達しています。1回の操作で選択・アップロードできるページは1つのみです。',
     },
+    addChunks: {
+      title: 'アップグレードして、チャンクを引き続き追加できるようにしてください。',
+      description: 'このプランでは、チャンク追加の上限に達しています。 ',
+    },
   },
 }
 

web/i18n/zh-Hans/billing.ts

@@ -207,6 +207,10 @@ const translation = {
       title: '升级以一次性上传多个页面',
       description: '您已达到当前套餐的上传限制 —— 该套餐每次只能选择并上传 1 个页面。',
     },
+    addChunks: {
+      title: '升级以继续添加分段',
+      description: '您已达到此计划的添加分段上限。',
+    },
   },
 }