chore: update price page (#2272)

web/app/components/billing/config.ts

@@ -3,6 +3,8 @@ import { Plan, type PlanInfo, Priority } from '@/app/components/billing/type'
 const supportModelProviders = 'OpenAI/Anthropic/Azure OpenAI/  Llama2/Hugging Face/Replicate'
 
 export const NUM_INFINITE = 99999999
+export const contractSales = 'contractSales'
+export const unAvailable = 'unAvailable'
 
 export const contactSalesUrl = 'mailto:business@dify.ai'
 
@@ -16,7 +18,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: 5,
     documentProcessingPriority: Priority.standard,
     logHistory: 30,
-    messageRequest: 500,
+    customTools: unAvailable,
+    messageRequest: {
+      en: '200 messages',
+      zh: '200 条信息',
+    },
     annotatedResponse: 10,
   },
   professional: {
@@ -28,7 +34,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: 200,
     documentProcessingPriority: Priority.priority,
     logHistory: NUM_INFINITE,
-    messageRequest: NUM_INFINITE,
+    customTools: 10,
+    messageRequest: {
+      en: '5,000  messages/month',
+      zh: '5,000 条信息/月',
+    },
     annotatedResponse: 2000,
   },
   team: {
@@ -40,7 +50,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: 1000,
     documentProcessingPriority: Priority.topPriority,
     logHistory: NUM_INFINITE,
-    messageRequest: NUM_INFINITE,
+    customTools: NUM_INFINITE,
+    messageRequest: {
+      en: '10,000  messages/month',
+      zh: '10,000 条信息/月',
+    },
     annotatedResponse: 5000,
   },
   enterprise: {
@@ -52,7 +66,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: NUM_INFINITE,
     documentProcessingPriority: Priority.topPriority,
     logHistory: NUM_INFINITE,
-    messageRequest: NUM_INFINITE,
+    customTools: NUM_INFINITE,
+    messageRequest: {
+      en: contractSales,
+      zh: contractSales,
+    },
     annotatedResponse: NUM_INFINITE,
   },
 }

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

@@ -3,14 +3,17 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
+import { useContext } from 'use-context-selector'
 import { Plan } from '../type'
-import { ALL_PLANS, NUM_INFINITE, contactSalesUrl } from '../config'
+import { ALL_PLANS, NUM_INFINITE, contactSalesUrl, contractSales, unAvailable } from '../config'
 import Toast from '../../base/toast'
 import TooltipPlus from '../../base/tooltip-plus'
 import { PlanRange } from './select-plan-range'
 import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { useAppContext } from '@/context/app-context'
 import { fetchSubscriptionUrls } from '@/service/billing'
+import { LanguagesSupportedUnderscore, getModelRuntimeSupported } from '@/utils/language'
+import I18n from '@/context/i18n'
 
 type Props = {
   currentPlan: Plan
@@ -69,6 +72,9 @@ const PlanItem: FC<Props> = ({
   canPay,
 }) => {
   const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getModelRuntimeSupported(locale)
+  const isZh = language === LanguagesSupportedUnderscore[1]
   const [loading, setLoading] = React.useState(false)
   const i18nPrefix = `billing.plans.${plan}`
   const isFreePlan = plan === Plan.sandbox
@@ -79,7 +85,13 @@ const PlanItem: FC<Props> = ({
   const isCurrent = plan === currentPlan
   const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level || (!canPay && plan !== Plan.enterprise)
   const { isCurrentWorkspaceManager } = useAppContext()
+  const messagesRequest = (() => {
+    const value = planInfo.messageRequest[isZh ? 'zh' : 'en']
+    if (value === contractSales)
+      return t('billing.plansCommon.contractSales')
 
+    return value
+  })()
   const btnText = (() => {
     if (!canPay && plan !== Plan.enterprise)
       return t('billing.plansCommon.contractOwner')
@@ -100,7 +112,16 @@ const PlanItem: FC<Props> = ({
   const supportContent = (() => {
     switch (plan) {
       case Plan.sandbox:
-        return t('billing.plansCommon.supportItems.communityForums')
+        return (<div className='space-y-3.5'>
+          <div>{t('billing.plansCommon.supportItems.communityForums')}</div>
+          <div>{t('billing.plansCommon.supportItems.agentMode')}</div>
+          <div className='flex items-center space-x-1'>
+            <div className='flex items-center'>
+              <div className='mr-0.5'>&nbsp;{t('billing.plansCommon.supportItems.workflow')}</div>
+            </div>
+            <div>{comingSoon}</div>
+          </div>
+        </div>)
       case Plan.professional:
         return (
           <div>
@@ -122,19 +143,12 @@ const PlanItem: FC<Props> = ({
               </div>
               <div>{comingSoon}</div>
             </div>
-            <div className='mt-3.5 flex items-center space-x-1'>
-              <div>+ {t('billing.plansCommon.supportItems.agentModel')}</div>
-              <div>{comingSoon}</div>
-            </div>
           </div>
         )
       case Plan.team:
         return (
           <div>
             <div>{t('billing.plansCommon.supportItems.priorityEmail')}</div>
-            <div className='mt-3.5 flex items-center space-x-1'>
-              <div>+ {t('billing.plansCommon.supportItems.logoChange')}</div>
-            </div>
             <div className='mt-3.5 flex items-center space-x-1'>
               <div>+ {t('billing.plansCommon.supportItems.SSOAuthentication')}</div>
               <div>{comingSoon}</div>
@@ -145,6 +159,9 @@ const PlanItem: FC<Props> = ({
         return (
           <div>
             <div>{t('billing.plansCommon.supportItems.personalizedSupport')}</div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div>+ {t('billing.plansCommon.supportItems.dedicatedAPISupport')}</div>
+            </div>
             <div className='mt-3.5 flex items-center space-x-1'>
               <div>+ {t('billing.plansCommon.supportItems.customIntegration')}</div>
             </div>
@@ -194,7 +211,7 @@ const PlanItem: FC<Props> = ({
       )}
       <div className={cn(style[plan].bg, 'grow px-6 py-6 rounded-[10px]')}>
         <div className={cn(style[plan].title, 'mb-1 leading-[125%] text-lg font-semibold')}>{t(`${i18nPrefix}.name`)}</div>
-        <div className={cn(isFreePlan ? 'text-[#FB6514]' : 'text-gray-500', 'mb-4 h-8 leading-[125%] text-[13px] font-normal')}>{t(`${i18nPrefix}.description`)}</div>
+        <div className={cn(isFreePlan ? 'mb-5 text-[#FB6514]' : 'mb-4 text-gray-500', 'h-8 leading-[125%] text-[13px] font-normal')}>{t(`${i18nPrefix}.description`)}</div>
 
         {/* Price */}
         {isFreePlan && (
@@ -225,6 +242,11 @@ const PlanItem: FC<Props> = ({
         <div className='leading-[125%] text-[13px] font-normal text-gray-900'>
           {t(`${i18nPrefix}.includesTitle`)}
         </div>
+        <KeyValue
+          label={t('billing.plansCommon.messageRequest.title')}
+          value={messagesRequest}
+          tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
+        />
         <KeyValue
           label={t('billing.plansCommon.modelProviders')}
           value={planInfo.modelProviders}
@@ -246,11 +268,7 @@ const PlanItem: FC<Props> = ({
           label={t('billing.plansCommon.documentProcessingPriority')}
           value={t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`) as string}
         />
-        <KeyValue
-          label={t('billing.plansCommon.messageRequest.title')}
-          value={planInfo.messageRequest === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.messageRequest} ${t('billing.plansCommon.messageRequest.unit')}`}
-          tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
-        />
+
         <KeyValue
           label={t('billing.plansCommon.annotatedResponse.title')}
           value={planInfo.annotatedResponse === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.annotatedResponse}`}
@@ -260,6 +278,10 @@ const PlanItem: FC<Props> = ({
           label={t('billing.plansCommon.logsHistory')}
           value={planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}`}
         />
+        <KeyValue
+          label={t('billing.plansCommon.customTools')}
+          value={planInfo.customTools === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : (planInfo.customTools === unAvailable ? t('billing.plansCommon.unavailable') as string : `${planInfo.customTools}`)}
+        />
         <KeyValue
           label={t('billing.plansCommon.support')}
           value={supportContent}

web/app/components/billing/type.ts

@@ -19,7 +19,11 @@ export type PlanInfo = {
   vectorSpace: number
   documentProcessingPriority: Priority
   logHistory: number
-  messageRequest: number
+  customTools: string | number
+  messageRequest: {
+    en: string | number
+    zh: string | number
+  }
   annotatedResponse: number
 }
 

web/i18n/lang/billing.en.ts

@@ -20,6 +20,7 @@ const translation = {
     save: 'Save ',
     free: 'Free',
     currentPlan: 'Current Plan',
+    contractSales: 'Contact sales',
     contractOwner: 'Contact team manager',
     startForFree: 'Start for free',
     getStartedWith: 'Get started with ',
@@ -40,6 +41,8 @@ const translation = {
       'top-priority': 'Top Priority',
     },
     logsHistory: 'Logs history',
+    customTools: 'Custom Tools',
+    unavailable: 'Unavailable',
     days: 'days',
     unlimited: 'Unlimited',
     support: 'Support',
@@ -53,15 +56,15 @@ const translation = {
       dedicatedAPISupport: 'Dedicated API support',
       customIntegration: 'Custom integration and support',
       ragAPIRequest: 'RAG API Requests',
-      agentModel: 'Agent Model',
+      agentMode: 'Agent Mode',
+      workflow: 'Workflow',
     },
     comingSoon: 'Coming soon',
     member: 'Member',
     memberAfter: 'Member',
     messageRequest: {
-      title: 'Message Requests',
-      unit: 'per day',
-      tooltip: 'Includes all messages from your apps, whether via APIs or web sessions. (Not LLM resource usage)',
+      title: 'Message Credits',
+      tooltip: 'Message invocation quotas for various plans using OpenAI models (except gpt4).Messages over the limit will use your OpenAI API Key.',
     },
     annotatedResponse: {
       title: 'Annotation Quota Limits',

web/i18n/lang/billing.pt.ts

@@ -59,9 +59,8 @@ const translation = {
     member: 'Member',
     memberAfter: 'Member',
     messageRequest: {
-      title: 'Message Requests',
-      unit: 'per day',
-      tooltip: 'Includes all messages from your apps, whether via APIs or web sessions. (Not LLM resource usage)',
+      title: 'Message Credits',
+      tooltip: 'Message invocation quotas for various plans using OpenAI models (except gpt4).Messages over the limit will use your OpenAI API Key.',
     },
     annotatedResponse: {
       title: 'Annotation Quota Limits',

web/i18n/lang/billing.zh.ts

@@ -19,6 +19,7 @@ const translation = {
     year: '年',
     save: '节省',
     currentPlan: '当前计划',
+    contractSales: '联系销售',
     contractOwner: '联系团队管理员',
     free: '免费',
     startForFree: '免费开始',
@@ -40,6 +41,8 @@ const translation = {
       'top-priority': '最高优先级',
     },
     logsHistory: '日志历史',
+    customTools: '自定义工具',
+    unavailable: '不可用',
     days: '天',
     unlimited: '无限制',
     support: '支持',
@@ -53,15 +56,15 @@ const translation = {
       dedicatedAPISupport: '专用 API 支持',
       customIntegration: '自定义集成和支持',
       ragAPIRequest: 'RAG API 请求',
-      agentModel: 'Agent 模型',
+      agentMode: '代理模式',
+      workflow: '工作流',
     },
     comingSoon: '即将推出',
     member: '成员',
     memberAfter: '个成员',
     messageRequest: {
-      title: '信息限制',
-      unit: '条每天',
-      tooltip: '指每日应用会话调用 Dify API 的次数（而非 LLMs 的 API 资源调用），它包含你所有应用中通过 API 或者在 WebApp 会话中产生的消息数。',
+      title: '消息额度',
+      tooltip: '为不同方案提供基于 OpenAI 模型的消息响应额度。',
     },
     annotatedResponse: {
       title: '标注回复数',