fix: update api rate limit on Pricing page (#18755)

web/app/components/billing/config.ts

@@ -1,3 +1,4 @@
+import type { BasicPlan } from '@/app/components/billing/type'
 import { Plan, type PlanInfo, Priority } from '@/app/components/billing/type'
 
 const supportModelProviders = 'OpenAI/Anthropic/Llama2/Azure OpenAI/Hugging Face/Replicate'
@@ -10,7 +11,7 @@ export const contactSalesUrl = 'https://vikgc6bnu1s.typeform.com/dify-business'
 export const getStartedWithCommunityUrl = 'https://github.com/langgenius/dify'
 export const getWithPremiumUrl = 'https://aws.amazon.com/marketplace/pp/prodview-t22mebxzwjhu6'
 
-export const ALL_PLANS: Record<Plan, PlanInfo> = {
+export const ALL_PLANS: Record<BasicPlan, PlanInfo> = {
   sandbox: {
     level: 1,
     price: 0,
@@ -22,6 +23,7 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: '50MB',
     documentsUploadQuota: 0,
     documentsRequestQuota: 10,
+    apiRateLimit: 5000,
     documentProcessingPriority: Priority.standard,
     messageRequest: 200,
     annotatedResponse: 10,
@@ -38,6 +40,7 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: '5GB',
     documentsUploadQuota: 0,
     documentsRequestQuota: 100,
+    apiRateLimit: NUM_INFINITE,
     documentProcessingPriority: Priority.priority,
     messageRequest: 5000,
     annotatedResponse: 2000,
@@ -54,6 +57,7 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: '20GB',
     documentsUploadQuota: 0,
     documentsRequestQuota: 1000,
+    apiRateLimit: NUM_INFINITE,
     documentProcessingPriority: Priority.topPriority,
     messageRequest: 10000,
     annotatedResponse: 5000,
@@ -62,7 +66,7 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
 }
 
 export const defaultPlan = {
-  type: Plan.sandbox,
+  type: Plan.sandbox as BasicPlan,
   usage: {
     documents: 50,
     vectorSpace: 1,

web/app/components/billing/pricing/plan-item.tsx

@@ -2,7 +2,8 @@
 import type { FC, ReactNode } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiApps2Line, RiBook2Line, RiBrain2Line, RiChatAiLine, RiFileEditLine, RiFolder6Line, RiGroupLine, RiHardDrive3Line, RiHistoryLine, RiProgress3Line, RiQuestionLine, RiSeoLine } from '@remixicon/react'
+import { RiApps2Line, RiBook2Line, RiBrain2Line, RiChatAiLine, RiFileEditLine, RiFolder6Line, RiGroupLine, RiHardDrive3Line, RiHistoryLine, RiProgress3Line, RiQuestionLine, RiSeoLine, RiTerminalBoxLine } from '@remixicon/react'
+import type { BasicPlan } from '../type'
 import { Plan } from '../type'
 import { ALL_PLANS, NUM_INFINITE } from '../config'
 import Toast from '../../base/toast'
@@ -15,8 +16,8 @@ import { useAppContext } from '@/context/app-context'
 import { fetchSubscriptionUrls } from '@/service/billing'
 
 type Props = {
-  currentPlan: Plan
-  plan: Plan
+  currentPlan: BasicPlan
+  plan: BasicPlan
   planRange: PlanRange
   canPay: boolean
 }
@@ -127,8 +128,8 @@ const PlanItem: FC<Props> = ({
       <div className='flex flex-col gap-y-1'>
         {style[plan].icon}
         <div className='flex items-center'>
-          <div className='text-lg font-semibold uppercase leading-[125%] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
-          {isMostPopularPlan && <div className='ml-1 flex items-center justify-center rounded-full border-[0.5px] bg-price-premium-badge-background px-1 py-[3px] text-components-premium-badge-grey-text-stop-0 shadow-xs'>
+          <div className='grow text-lg font-semibold uppercase leading-[125%] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
+          {isMostPopularPlan && <div className='ml-1 flex shrink-0 items-center justify-center rounded-full border-[0.5px] bg-price-premium-badge-background px-1 py-[3px] text-components-premium-badge-grey-text-stop-0 shadow-xs'>
             <div className='pl-0.5'>
               <SparklesSoft className='size-3' />
             </div>
@@ -205,6 +206,14 @@ const PlanItem: FC<Props> = ({
           label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
           tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
         />
+        <KeyValue
+          icon={<RiTerminalBoxLine />}
+          label={
+            planInfo.apiRateLimit === NUM_INFINITE ? `${t('billing.plansCommon.unlimitedApiRate')}`
+              : `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}`
+          }
+          tooltip={planInfo.apiRateLimit === NUM_INFINITE ? null : t('billing.plansCommon.apiRateLimitTooltip') as string}
+        />
         <KeyValue
           icon={<RiProgress3Line />}
           label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}

web/app/components/billing/type.ts

@@ -9,6 +9,9 @@ export enum Priority {
   priority = 'priority',
   topPriority = 'top-priority',
 }
+
+export type BasicPlan = Plan.sandbox | Plan.professional | Plan.team
+
 export type PlanInfo = {
   level: number
   price: number
@@ -20,6 +23,7 @@ export type PlanInfo = {
   vectorSpace: string
   documentsUploadQuota: number
   documentsRequestQuota: number
+  apiRateLimit: number
   documentProcessingPriority: Priority
   logHistory: number
   messageRequest: number
@@ -60,7 +64,7 @@ export type CurrentPlanInfoBackend = {
   billing: {
     enabled: boolean
     subscription: {
-      plan: Plan
+      plan: BasicPlan
     }
   }
   members: {