feat: update pricing (#1749)

web/app/components/base/tooltip-plus/index.tsx

@@ -13,7 +13,7 @@ const arrow = (
   <svg className="absolute text-white h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255"><polygon className="fill-current" points="0,0 127.5,127.5 255,0"></polygon></svg>
 )
 
-const Tooltip: FC< TooltipProps> = ({
+const Tooltip: FC<TooltipProps> = ({
   position = 'top',
   triggerMethod = 'hover',
   popupContent,
@@ -36,7 +36,7 @@ const Tooltip: FC< TooltipProps> = ({
         {children}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
-        className="z-[999]"
+        className="z-[9999]"
       >
         <div className='relative px-3 py-2 text-xs font-normal text-gray-700 bg-white rounded-md shadow-lg'>
           {popupContent}

web/app/components/billing/config.ts

@@ -13,9 +13,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     modelProviders: supportModelProviders,
     teamMembers: 1,
     buildApps: 10,
-    vectorSpace: 10,
+    vectorSpace: 5,
     documentProcessingPriority: Priority.standard,
     logHistory: 30,
+    messageRequest: 500,
+    annotatedResponse: 10,
   },
   professional: {
     level: 2,
@@ -26,6 +28,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: 200,
     documentProcessingPriority: Priority.priority,
     logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: 2000,
   },
   team: {
     level: 3,
@@ -36,6 +40,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: 1000,
     documentProcessingPriority: Priority.topPriority,
     logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: 5000,
   },
   enterprise: {
     level: 4,
@@ -46,6 +52,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
     vectorSpace: NUM_INFINITE,
     documentProcessingPriority: Priority.topPriority,
     logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: NUM_INFINITE,
   },
 }
 

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

@@ -6,7 +6,9 @@ import cn from 'classnames'
 import { Plan } from '../type'
 import { ALL_PLANS, NUM_INFINITE, contactSalesUrl } 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'
 
@@ -16,10 +18,21 @@ type Props = {
   planRange: PlanRange
 }
 
-const KeyValue = ({ label, value }: { label: string; value: string | number | JSX.Element }) => {
+const KeyValue = ({ label, value, tooltip }: { label: string; value: string | number | JSX.Element; tooltip?: string }) => {
   return (
     <div className='mt-3.5 leading-[125%] text-[13px] font-medium'>
-      <div className='text-gray-500'>{label}</div>
+      <div className='flex items-center text-gray-500 space-x-1'>
+        <div>{label}</div>
+        {tooltip && (
+          <TooltipPlus
+            popupContent={
+              <div className='w-[200px]'>{tooltip}</div>
+            }
+          >
+            <HelpCircle className='w-3 h-3 text-gray-400' />
+          </TooltipPlus>
+        )}
+      </div>
       <div className='mt-0.5 text-gray-900'>{value}</div>
     </div>
   )
@@ -84,7 +97,33 @@ const PlanItem: FC<Props> = ({
       case Plan.sandbox:
         return t('billing.plansCommon.supportItems.communityForums')
       case Plan.professional:
-        return t('billing.plansCommon.supportItems.emailSupport')
+        return (
+          <div>
+            <div>{t('billing.plansCommon.supportItems.emailSupport')}</div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div>+ {t('billing.plansCommon.supportItems.logoChange')}</div>
+              <div>{comingSoon}</div>
+            </div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div className='flex items-center'>
+                +
+                <div className='mr-0.5'>&nbsp;{t('billing.plansCommon.supportItems.ragAPIRequest')}</div>
+                <TooltipPlus
+                  popupContent={
+                    <div className='w-[200px]'>{t('billing.plansCommon.ragAPIRequestTooltip')}</div>
+                  }
+                >
+                  <HelpCircle className='w-3 h-3 text-gray-400' />
+                </TooltipPlus>
+              </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>
@@ -94,7 +133,7 @@ const PlanItem: FC<Props> = ({
               <div>{comingSoon}</div>
             </div>
             <div className='mt-3.5 flex items-center space-x-1'>
-              <div>+ {t('billing.plansCommon.supportItems.personalizedSupport')}</div>
+              <div>+ {t('billing.plansCommon.supportItems.SSOAuthentication')}</div>
               <div>{comingSoon}</div>
             </div>
           </div>
@@ -103,9 +142,6 @@ 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>
@@ -149,11 +185,11 @@ const PlanItem: FC<Props> = ({
     }
   }
   return (
-    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex flex-col min-w-[290px] w-[290px] h-[712px] rounded-xl')}>
+    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex flex-col min-w-[290px] w-[290px] rounded-xl')}>
       {isMostPopularPlan && (
         <div className='flex items-center h-7 justify-center leading-[12px] text-xs font-medium text-[#F5F8FF]'>{t('billing.plansCommon.mostPopular')}</div>
       )}
-      <div className={cn(style[plan].bg, 'grow px-6 pt-6 rounded-[10px]')}>
+      <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>
 
@@ -201,11 +237,22 @@ const PlanItem: FC<Props> = ({
         <KeyValue
           label={t('billing.plansCommon.vectorSpace')}
           value={planInfo.vectorSpace === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : (planInfo.vectorSpace >= 1000 ? `${planInfo.vectorSpace / 1000}G` : `${planInfo.vectorSpace}MB`)}
+          tooltip={t('billing.plansCommon.vectorSpaceBillingTooltip') as string}
         />
         <KeyValue
           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}`}
+          tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
+        />
         <KeyValue
           label={t('billing.plansCommon.logsHistory')}
           value={planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}`}

web/app/components/billing/type.ts

@@ -19,6 +19,8 @@ export type PlanInfo = {
   vectorSpace: number
   documentProcessingPriority: Priority
   logHistory: number
+  messageRequest: number
+  annotatedResponse: number
 }
 
 export type UsagePlanInfo = Pick<PlanInfo, 'vectorSpace' | 'buildApps' | 'teamMembers'>

web/i18n/lang/billing.en.ts

@@ -28,6 +28,7 @@ const translation = {
     teamMembers: 'Team Members',
     buildApps: 'Build Apps',
     vectorSpace: 'Vector Space',
+    vectorSpaceBillingTooltip: 'Each 1MB can store about 1.2million characters of vectorized data(estimated using OpenAI Embeddings, varies across models).',
     vectorSpaceTooltip: 'Vector Space is the long-term memory system required for LLMs  to comprehend your data.',
     documentProcessingPriority: 'Document Processing Priority',
     documentProcessingPriorityTip: 'For higher document processing priority, please upgrade your plan.',
@@ -50,10 +51,22 @@ const translation = {
       personalizedSupport: 'Personalized support',
       dedicatedAPISupport: 'Dedicated API support',
       customIntegration: 'Custom integration and support',
+      ragAPIRequest: 'RAG API Requests',
+      agentModel: 'Agent Model',
     },
     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)',
+    },
+    annotatedResponse: {
+      title: 'Annotation Quota Limits',
+      tooltip: 'Manual editing and annotation of responses provides customizable high-quality question-answering abilities for apps. (Applicable only in chat apps)',
+    },
+    ragAPIRequestTooltip: 'Refers to the number of API calls invoking only the knowledge base processing capabilities of Dify.',
   },
   plans: {
     sandbox: {

web/i18n/lang/billing.zh.ts

@@ -29,6 +29,7 @@ const translation = {
     buildApps: '构建应用程序数',
     vectorSpace: '向量空间',
     vectorSpaceTooltip: '向量空间是 LLMs 理解您的数据所需的长期记忆系统。',
+    vectorSpaceBillingTooltip: '向量存储是将知识库向量化处理后为让 LLMs 理解数据而使用的长期记忆存储，1MB 大约能满足1.2 million character 的向量化后数据存储（以 OpenAI Embedding 模型估算，不同模型计算方式有差异）。在向量化过程中，实际的压缩或尺寸减小取决于内容的复杂性和冗余性。',
     documentProcessingPriority: '文档处理优先级',
     documentProcessingPriorityTip: '如需更高的文档处理优先级，请升级您的套餐',
     documentProcessingPriorityUpgrade: '以更快的速度、更高的精度处理更多的数据。',
@@ -50,10 +51,22 @@ const translation = {
       personalizedSupport: '个性化支持',
       dedicatedAPISupport: '专用 API 支持',
       customIntegration: '自定义集成和支持',
+      ragAPIRequest: 'RAG API 请求',
+      agentModel: 'Agent 模型',
     },
     comingSoon: '即将推出',
     member: '成员',
     memberAfter: '个成员',
+    messageRequest: {
+      title: '信息限制',
+      unit: '条每天',
+      tooltip: '指每日应用会话调用 Dify API 的次数（而非 LLMs 的 API 资源调用），它包含你所有应用中通过 API 或者在 WebApp 会话中产生的消息数。',
+    },
+    annotatedResponse: {
+      title: '标注回复数',
+      tooltip: '标注回复功能通过人工编辑标注为应用提供了可定制的高质量问答回复能力',
+    },
+    ragAPIRequestTooltip: '指单独调用 Dify 知识库数据处理能力的 API。',
   },
   plans: {
     sandbox: {