outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust cloud service

Browse Source
This commit is contained in:
NFish 2025-01-03 16:18:24 +08:00
parent 74d3320519
commit 525bde28f6
26 changed files with 634 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/base/icons/assets/public/billing/ar-cube-1.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0002 14V23.9166M14.0002 14L5.25 9.07806M14.0002 14L22.4731 9.2338M23.625 9.95052V18.0493C23.625 18.8924 23.1703 19.6697 22.4356 20.0831L15.1439 24.1846C14.4336 24.5842 13.5663 24.5842 12.8561 24.1846L5.56439 20.0831C4.82967 19.6697 4.375 18.8924 4.375 18.0493V9.95052C4.375 9.10756 4.82967 8.33012 5.56439 7.91684L12.8561 3.81529C13.5663 3.41574 14.4336 3.41574 15.1439 3.81529L22.4356 7.91684C23.1703 8.33012 23.625 9.10756 23.625 9.95052Z" stroke="#101828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 643 B

3
web/app/components/base/icons/assets/public/billing/group-2.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.4942 15.3771C21.1508 13.8584 25.694 15.7846 27.1017 21.1559C27.4448 22.465 26.348 23.625 24.9948 23.625H19.6233M13.2066 8.16667C13.2066 10.2608 11.509 11.9583 9.41493 11.9583C7.32086 11.9583 5.62326 10.2608 5.62326 8.16667C5.62326 6.07258 7.32086 4.375 9.41493 4.375C11.509 4.375 13.2066 6.07258 13.2066 8.16667ZM23.7066 8.16667C23.7066 10.2608 22.009 11.9583 19.9149 11.9583C17.8209 11.9583 16.1232 10.2608 16.1232 8.16667C16.1232 6.07258 17.8209 4.375 19.9149 4.375C22.009 4.375 23.7066 6.07258 23.7066 8.16667ZM14.328 23.625H4.3352C2.98193 23.625 1.88599 22.4589 2.22976 21.15C4.42721 12.7833 14.2359 12.7833 16.4335 21.15C16.7772 22.4589 15.6813 23.625 14.328 23.625Z" stroke="#444CE7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 874 B

3
web/app/components/base/icons/assets/public/billing/keyframe.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9831 3.98321C15.072 3.072 13.5945 3.072 12.6833 3.98321L4.31648 12.35C3.40526 13.2612 3.40524 14.7386 4.31647 15.6499L12.6833 24.0167C13.5945 24.9279 15.072 24.9279 15.9831 24.0167L24.35 15.6499C25.2612 14.7386 25.2612 13.2612 24.35 12.35L15.9831 3.98321Z" stroke="#155AEF" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 435 B

4
web/app/components/base/icons/assets/public/billing/sparkles-soft.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M9.75878 1.67256C9.74813 1.57435 9.6684 1.5001 9.5735 1.5C9.47861 1.4999 9.39874 1.57397 9.38789 1.67217C9.33725 2.12931 9.20693 2.44292 9.00273 2.65564C8.79849 2.86835 8.49744 3.00411 8.05857 3.05683C7.9643 3.06816 7.89321 3.15136 7.89331 3.2502C7.89341 3.34905 7.96469 3.43208 8.05896 3.44321C8.49038 3.49411 8.79835 3.62984 9.00773 3.84402C9.216 4.05703 9.34877 4.3702 9.38736 4.82276C9.39595 4.92317 9.47673 5.00011 9.5735 5C9.67027 4.99988 9.75096 4.92276 9.75926 4.82232C9.79627 4.37742 9.92894 4.05719 10.1386 3.83882C10.3482 3.62045 10.6556 3.48223 11.0827 3.44372C11.1792 3.43503 11.2532 3.35103 11.2533 3.25022C11.2534 3.14942 11.1795 3.06524 11.0832 3.05632C10.6487 3.01612 10.3481 2.87779 10.1436 2.66085C9.93797 2.44273 9.80765 2.12197 9.75878 1.67256Z" fill="#FCFCFD"/>
<path d="M6.45025 2.94373C6.42279 2.69117 6.21783 2.50026 5.9738 2.5C5.72982 2.49974 5.52443 2.69021 5.49649 2.94271C5.36631 4.11822 5.0312 4.92465 4.50609 5.47164C3.98098 6.0186 3.20681 6.3677 2.07832 6.5033C1.83592 6.5324 1.65307 6.74635 1.65332 7.0005C1.65357 7.2547 1.83684 7.4682 2.0793 7.4968C3.1887 7.6277 3.9805 7.97675 4.51896 8.5275C5.05449 9.07525 5.39598 9.8805 5.49519 11.0442C5.51722 11.3024 5.72502 11.5003 5.97385 11.5C6.22273 11.4997 6.43009 11.3014 6.45154 11.0431C6.54658 9.89905 6.88782 9.07565 7.42686 8.5141C7.96595 7.9526 8.75641 7.59715 9.8547 7.49815C10.1026 7.4758 10.293 7.2598 10.2933 7.00055C10.2936 6.74135 10.1037 6.5249 9.8558 6.50195C8.7386 6.3986 7.96556 6.0429 7.43972 5.48504C6.911 4.92415 6.57591 4.09936 6.45025 2.94373Z" fill="#FCFCFD"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

29
web/app/components/base/icons/src/public/billing/ArCube1.json Normal file
View File

@ -0,0 +1,29 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "28",
"height": "28",
"viewBox": "0 0 28 28",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M14.0002 14V23.9166M14.0002 14L5.25 9.07806M14.0002 14L22.4731 9.2338M23.625 9.95052V18.0493C23.625 18.8924 23.1703 19.6697 22.4356 20.0831L15.1439 24.1846C14.4336 24.5842 13.5663 24.5842 12.8561 24.1846L5.56439 20.0831C4.82967 19.6697 4.375 18.8924 4.375 18.0493V9.95052C4.375 9.10756 4.82967 8.33012 5.56439 7.91684L12.8561 3.81529C13.5663 3.41574 14.4336 3.41574 15.1439 3.81529L22.4356 7.91684C23.1703 8.33012 23.625 9.10756 23.625 9.95052Z",
"stroke": "#101828",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
},
"name": "ArCube1"
}

16
web/app/components/base/icons/src/public/billing/ArCube1.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './ArCube1.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'ArCube1'
export default Icon

29
web/app/components/base/icons/src/public/billing/Group2.json Normal file
View File

@ -0,0 +1,29 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "29",
"height": "28",
"viewBox": "0 0 29 28",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M17.4942 15.3771C21.1508 13.8584 25.694 15.7846 27.1017 21.1559C27.4448 22.465 26.348 23.625 24.9948 23.625H19.6233M13.2066 8.16667C13.2066 10.2608 11.509 11.9583 9.41493 11.9583C7.32086 11.9583 5.62326 10.2608 5.62326 8.16667C5.62326 6.07258 7.32086 4.375 9.41493 4.375C11.509 4.375 13.2066 6.07258 13.2066 8.16667ZM23.7066 8.16667C23.7066 10.2608 22.009 11.9583 19.9149 11.9583C17.8209 11.9583 16.1232 10.2608 16.1232 8.16667C16.1232 6.07258 17.8209 4.375 19.9149 4.375C22.009 4.375 23.7066 6.07258 23.7066 8.16667ZM14.328 23.625H4.3352C2.98193 23.625 1.88599 22.4589 2.22976 21.15C4.42721 12.7833 14.2359 12.7833 16.4335 21.15C16.7772 22.4589 15.6813 23.625 14.328 23.625Z",
"stroke": "#444CE7",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
},
"name": "Group2"
}

16
web/app/components/base/icons/src/public/billing/Group2.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Group2.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Group2'
export default Icon

28
web/app/components/base/icons/src/public/billing/Keyframe.json Normal file
View File

@ -0,0 +1,28 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "29",
"height": "28",
"viewBox": "0 0 29 28",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M15.9831 3.98321C15.072 3.072 13.5945 3.072 12.6833 3.98321L4.31648 12.35C3.40526 13.2612 3.40524 14.7386 4.31647 15.6499L12.6833 24.0167C13.5945 24.9279 15.072 24.9279 15.9831 24.0167L24.35 15.6499C25.2612 14.7386 25.2612 13.2612 24.35 12.35L15.9831 3.98321Z",
"stroke": "#155AEF",
"stroke-width": "1.5",
"stroke-linejoin": "round"
},
"children": []
}
]
},
"name": "Keyframe"
}

16
web/app/components/base/icons/src/public/billing/Keyframe.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Keyframe.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Keyframe'
export default Icon

36
web/app/components/base/icons/src/public/billing/SparklesSoft.json Normal file
View File

@ -0,0 +1,36 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "13",
"height": "13",
"viewBox": "0 0 13 13",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"opacity": "0.5",
"d": "M9.75878 1.67256C9.74813 1.57435 9.6684 1.5001 9.5735 1.5C9.47861 1.4999 9.39874 1.57397 9.38789 1.67217C9.33725 2.12931 9.20693 2.44292 9.00273 2.65564C8.79849 2.86835 8.49744 3.00411 8.05857 3.05683C7.9643 3.06816 7.89321 3.15136 7.89331 3.2502C7.89341 3.34905 7.96469 3.43208 8.05896 3.44321C8.49038 3.49411 8.79835 3.62984 9.00773 3.84402C9.216 4.05703 9.34877 4.3702 9.38736 4.82276C9.39595 4.92317 9.47673 5.00011 9.5735 5C9.67027 4.99988 9.75096 4.92276 9.75926 4.82232C9.79627 4.37742 9.92894 4.05719 10.1386 3.83882C10.3482 3.62045 10.6556 3.48223 11.0827 3.44372C11.1792 3.43503 11.2532 3.35103 11.2533 3.25022C11.2534 3.14942 11.1795 3.06524 11.0832 3.05632C10.6487 3.01612 10.3481 2.87779 10.1436 2.66085C9.93797 2.44273 9.80765 2.12197 9.75878 1.67256Z",
"fill": "#FCFCFD"
},
"children": []
},
{
"type": "element",
"name": "path",
"attributes": {
"d": "M6.45025 2.94373C6.42279 2.69117 6.21783 2.50026 5.9738 2.5C5.72982 2.49974 5.52443 2.69021 5.49649 2.94271C5.36631 4.11822 5.0312 4.92465 4.50609 5.47164C3.98098 6.0186 3.20681 6.3677 2.07832 6.5033C1.83592 6.5324 1.65307 6.74635 1.65332 7.0005C1.65357 7.2547 1.83684 7.4682 2.0793 7.4968C3.1887 7.6277 3.9805 7.97675 4.51896 8.5275C5.05449 9.07525 5.39598 9.8805 5.49519 11.0442C5.51722 11.3024 5.72502 11.5003 5.97385 11.5C6.22273 11.4997 6.43009 11.3014 6.45154 11.0431C6.54658 9.89905 6.88782 9.07565 7.42686 8.5141C7.96595 7.9526 8.75641 7.59715 9.8547 7.49815C10.1026 7.4758 10.293 7.2598 10.2933 7.00055C10.2936 6.74135 10.1037 6.5249 9.8558 6.50195C8.7386 6.3986 7.96556 6.0429 7.43972 5.48504C6.911 4.92415 6.57591 4.09936 6.45025 2.94373Z",
"fill": "#FCFCFD"
},
"children": []
}
]
},
"name": "SparklesSoft"
}

16
web/app/components/base/icons/src/public/billing/SparklesSoft.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './SparklesSoft.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'SparklesSoft'
export default Icon

4
web/app/components/base/icons/src/public/billing/index.ts
View File

@ -1 +1,5 @@
export { default as ArCube1 } from './ArCube1'
export { default as Group2 } from './Group2'
export { default as Keyframe } from './Keyframe'
export { default as SparklesSoft } from './SparklesSoft'
export { default as Sparkles } from './Sparkles'

18
web/app/components/base/icons/src/public/knowledge/Chunk.json
View File

@ -24,7 +24,7 @@
"attributes": {
"id": "Vector",
"d": "M2.5 10H0V7.5H2.5V10Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -34,7 +34,7 @@
"attributes": {
"id": "Vector_2",
"d": "M6.25 6.25H3.75V3.75H6.25V6.25Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -44,7 +44,7 @@
"attributes": {
"id": "Vector_3",
"d": "M2.5 6.25H0V3.75H2.5V6.25Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -54,7 +54,7 @@
"attributes": {
"id": "Vector_4",
"d": "M6.25 2.5H3.75V0H6.25V2.5Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -64,7 +64,7 @@
"attributes": {
"id": "Vector_5",
"d": "M2.5 2.5H0V0H2.5V2.5Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -74,7 +74,7 @@
"attributes": {
"id": "Vector_6",
"d": "M10 2.5H7.5V0H10V2.5Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -84,7 +84,7 @@
"attributes": {
"id": "Vector_7",
"d": "M9.58342 7.91663H7.91675V9.58329H9.58342V7.91663Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -94,7 +94,7 @@
"attributes": {
"id": "Vector_8",
"d": "M9.58342 4.16663H7.91675V5.83329H9.58342V4.16663Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
},
@ -104,7 +104,7 @@
"attributes": {
"id": "Vector_9",
"d": "M5.83341 7.91663H4.16675V9.58329H5.83341V7.91663Z",
"fill": "currentColor"
"fill": "#676F83"
},
"children": []
}

6
web/app/components/base/icons/src/public/knowledge/Collapse.json
View File

@ -30,7 +30,7 @@
"name": "path",
"attributes": {
"d": "M2.66602 11.3333H0.666016L3.33268 8.66667L5.99935 11.3333H3.99935L3.99935 14H2.66602L2.66602 11.3333Z",
"fill": "currentColor"
"fill": "#354052"
},
"children": []
},
@ -39,7 +39,7 @@
"name": "path",
"attributes": {
"d": "M2.66602 4.66667L2.66602 2L3.99935 2L3.99935 4.66667L5.99935 4.66667L3.33268 7.33333L0.666016 4.66667L2.66602 4.66667Z",
"fill": "currentColor"
"fill": "#354052"
},
"children": []
},
@ -48,7 +48,7 @@
"name": "path",
"attributes": {
"d": "M7.33268 2.66667H13.9993V4H7.33268V2.66667ZM7.33268 12H13.9993V13.3333H7.33268V12ZM5.99935 7.33333H13.9993V8.66667H5.99935V7.33333Z",
"fill": "currentColor"
"fill": "#354052"
},
"children": []
}

2
web/app/components/base/icons/src/public/knowledge/LayoutRight2LineMod.json
View File

@ -24,7 +24,7 @@
"attributes": {
"id": "Vector",
"d": "M14.0002 2C14.3684 2 14.6668 2.29848 14.6668 2.66667V13.3333C14.6668 13.7015 14.3684 14 14.0002 14H2.00016C1.63198 14 1.3335 13.7015 1.3335 13.3333V2.66667C1.3335 2.29848 1.63198 2 2.00016 2H14.0002ZM13.3335 3.33333H2.66683V12.6667H13.3335V3.33333ZM14.0002 2.66667V13.3333H10.0002V2.66667H14.0002Z",
"fill": "currentColor"
"fill": "#354052"
},
"children": []
}

22
web/app/components/base/tab-slider/index.tsx
View File

@ -1,9 +1,9 @@
import type { FC } from 'react'
import type { FC, ReactNode } from 'react'
import cn from '@/utils/classnames'
type Option = {
value: string
text: string
text: ReactNode
}
type TabSliderProps = {
className?: string
@ -23,17 +23,12 @@ const TabSlider: FC<TabSliderProps> = ({
const current = options[currentIndex]
return (
<div className={cn(className, 'relative flex p-0.5 rounded-lg bg-gray-200')}>
<div className={cn('relative flex p-0.5 rounded-xl bg-components-segmented-control-bg-normal', className)}>
{
options.map((option, index) => (
options.map(option => (
<div
key={option.value}
className={`
flex justify-center items-center h-7 text-[13px]
font-semibold text-gray-600 rounded-[7px] cursor-pointer
hover:bg-gray-50
${index !== options.length - 1 && 'mr-[1px]'}
`}
className={'flex justify-center items-center h-[42px] rounded-xl cursor-pointer'}
style={{
width: itemWidth,
}}
@ -47,12 +42,13 @@ const TabSlider: FC<TabSliderProps> = ({
current && (
<div
className={`
absolute flex justify-center items-center h-7 bg-white text-[13px] font-semibold text-primary-600
border-[0.5px] border-gray-200 rounded-[7px] shadow-xs transition-transform
absolute flex justify-center items-center h-[42px] rounded-xl cursor-pointer
text-text-accent-light-mode-only bg-components-segmented-control-item-active-bg
border-[0.5px] border-components-segmented-control-item-active-border shadow-xs transition-transform
`}
style={{
width: itemWidth,
transform: `translateX(${currentIndex * itemWidth + 1}px)`,
transform: `translateX(${currentIndex * itemWidth}px)`,
}}
>
{current.text}

64
web/app/components/billing/config.ts
View File

@ -1,6 +1,6 @@
import { Plan, type PlanInfo, Priority } from '@/app/components/billing/type'
const supportModelProviders = 'OpenAI/Anthropic/Azure OpenAI/ Llama2/Hugging Face/Replicate'
const supportModelProviders = 'OpenAI/Anthropic/Llama2/Azure OpenAI/Hugging Face/Replicate'
export const NUM_INFINITE = 99999999
export const contractSales = 'contractSales'
@ -13,52 +13,46 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
level: 1,
price: 0,
modelProviders: supportModelProviders,
teamWorkspace: 1,
teamMembers: 1,
buildApps: 10,
vectorSpace: 5,
documentsUploadQuota: 50,
buildApps: 5,
documents: 50,
vectorSpace: '50MB',
documentsRequestQuota: 10,
documentProcessingPriority: Priority.standard,
logHistory: 30,
customTools: unAvailable,
messageRequest: {
en: '200 messages',
zh: '200 条信息',
},
messageRequest: 200,
annotatedResponse: 10,
logHistory: 15,
},
professional: {
level: 2,
price: 59,
modelProviders: supportModelProviders,
teamWorkspace: 1,
teamMembers: 3,
buildApps: 50,
vectorSpace: 200,
documentsUploadQuota: 500,
documents: 500,
vectorSpace: '5GB',
documentsRequestQuota: 10,
documentProcessingPriority: Priority.priority,
logHistory: NUM_INFINITE,
customTools: 10,
messageRequest: {
en: '5,000 messages/month',
zh: '5,000 条信息/月',
},
messageRequest: 5000,
annotatedResponse: 2000,
logHistory: NUM_INFINITE,
},
team: {
level: 3,
price: 159,
modelProviders: supportModelProviders,
teamMembers: NUM_INFINITE,
buildApps: NUM_INFINITE,
vectorSpace: 1000,
documentsUploadQuota: 1000,
teamWorkspace: 1,
teamMembers: 5,
buildApps: 200,
documents: 1000,
vectorSpace: '20GB',
documentsRequestQuota: 2000,
documentProcessingPriority: Priority.topPriority,
logHistory: NUM_INFINITE,
customTools: NUM_INFINITE,
messageRequest: {
en: '10,000 messages/month',
zh: '10,000 条信息/月',
},
messageRequest: 10000,
annotatedResponse: 5000,
logHistory: NUM_INFINITE,
},
enterprise: {
level: 4,
@ -66,15 +60,13 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
modelProviders: supportModelProviders,
teamMembers: NUM_INFINITE,
buildApps: NUM_INFINITE,
documents: 50,
vectorSpace: NUM_INFINITE,
documentsUploadQuota: NUM_INFINITE,
documentsRequestQuota: 5000,
documentProcessingPriority: Priority.topPriority,
logHistory: NUM_INFINITE,
customTools: NUM_INFINITE,
messageRequest: {
en: contractSales,
zh: contractSales,
},
messageRequest: contractSales,
annotatedResponse: NUM_INFINITE,
},
}
@ -82,17 +74,19 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
export const defaultPlan = {
type: Plan.sandbox,
usage: {
documents: 50,
vectorSpace: 1,
buildApps: 1,
teamMembers: 1,
annotatedResponse: 1,
documentsUploadQuota: 1,
documentsRequestQuota: 1,
},
total: {
documents: 50,
vectorSpace: 10,
buildApps: 10,
teamMembers: 1,
annotatedResponse: 10,
documentsUploadQuota: 50,
documentsRequestQuota: 50,
},
}

123
web/app/components/billing/pricing/index.tsx
View File

@ -3,8 +3,10 @@ import type { FC } from 'react'
import React from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next'
import { RiCloseLine } from '@remixicon/react'
import { RiArrowRightUpLine, RiCloseLine, RiCloudFill, RiTerminalBoxFill } from '@remixicon/react'
import Link from 'next/link'
import { Plan } from '../type'
import TabSlider from '../../base/tab-slider'
import SelectPlanRange, { PlanRange } from './select-plan-range'
import PlanItem from './plan-item'
import { useProviderContext } from '@/context/provider-context'
@ -24,56 +26,89 @@ const Pricing: FC<Props> = ({
const canPay = isCurrentWorkspaceManager
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
const [currentPlan, setCurrentPlan] = React.useState<string>('cloud')
return createPortal(
<div
className='fixed inset-0 flex bg-white z-[1000] overflow-auto'
className='fixed inset-0 top-0 right-0 bottom-0 left-0 p-4 bg-background-overlay-backdrop backdrop-blur-[6px] z-[1000]'
onClick={e => e.stopPropagation()}
>
<GridMask wrapperClassName='grow'>
<div className='grow width-[0] mt-6 p-6 flex flex-col items-center'>
<div className='mb-3 leading-[38px] text-[30px] font-semibold text-gray-900'>
{t('billing.plansCommon.title')}
</div>
<SelectPlanRange
value={planRange}
onChange={setPlanRange}
/>
<div className='mt-8 pb-6 w-full justify-center flex-nowrap flex space-x-3'>
<PlanItem
currentPlan={plan.type}
plan={Plan.sandbox}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.professional}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.team}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.enterprise}
planRange={planRange}
canPay={canPay}
/>
</div>
<div className='w-full h-full relative overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
<div
className='absolute top-3 right-3 flex items-center justify-center w-9 h-9 bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover rounded-[10px] cursor-pointer z-[1001]'
onClick={onCancel}
>
<RiCloseLine className='size-5 text-components-button-tertiary-text' />
</div>
</GridMask>
<GridMask wrapperClassName='w-full h-full' canvasClassName='h-full'>
<div className='pt-12 px-8 pb-7 flex flex-col items-center'>
<div className='mb-2 title-5xl-bold text-text-primary'>
{t('billing.plansCommon.title')}
</div>
<div className='system-sm-regular text-text-secondary'>
<span>{t('billing.plansCommon.freeTrialTipPrefix')}</span>
<span className='text-gradient'>{t('billing.plansCommon.freeTrialTip')}</span>
<span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
</div>
</div>
<div className='w-[1152px] mx-auto'>
<div className='py-2 flex items-center justify-between'>
<TabSlider
value={currentPlan}
itemWidth={170}
className='inline-flex'
options={[
{ value: 'cloud', text: <div className='inline-flex items-center system-md-semibold-uppercase'><RiCloudFill className='size-4 mr-2' />cloud service</div> },
{ value: 'self', text: <div className='inline-flex items-center system-md-semibold-uppercase'><RiTerminalBoxFill className='size-4 mr-2' />self hosted</div> }]}
onChange={v => setCurrentPlan(v)} />
<div
className='fixed top-6 right-6 flex items-center justify-center w-10 h-10 bg-black/[0.05] rounded-full backdrop-blur-[2px] cursor-pointer z-[1001]'
onClick={onCancel}
>
<RiCloseLine className='w-4 h-4 text-gray-900' />
<SelectPlanRange
value={planRange}
onChange={setPlanRange}
/>
</div>
<div className='pt-3 pb-8'>
<div className='flex justify-center flex-nowrap gap-x-4'>
{currentPlan === 'cloud' && <>
<PlanItem
currentPlan={plan.type}
plan={Plan.sandbox}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.professional}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.team}
planRange={planRange}
canPay={canPay}
/>
</>}
{currentPlan === 'self' && <>
<PlanItem
currentPlan={plan.type}
plan={Plan.enterprise}
planRange={planRange}
canPay={canPay}
/>
</>}
</div>
</div>
</div>
<div className='py-4 flex items-center justify-center'>
<div className='px-3 py-2 flex items-center justify-center gap-x-0.5 text-components-button-secondary-accent-text'>
<Link href='' className='system-sm-medium'>Compare plans & features</Link>
<RiArrowRightUpLine className='size-4' />
</div>
</div>
</GridMask>
</div>
</div>,
</div >,
document.body,
)
}

351
web/app/components/billing/pricing/plan-item.tsx
View File

@ -1,18 +1,18 @@
'use client'
import type { FC } from 'react'
import type { FC, ReactNode } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { RiApps2Line, RiBook2Line, RiBrain2Line, RiChatAiLine, RiFileEditLine, RiFolder6Line, RiGroupLine, RiHardDrive3Line, RiHistoryLine, RiProgress3Line, RiQuestionLine, RiSeoLine } from '@remixicon/react'
import { Plan } from '../type'
import { ALL_PLANS, NUM_INFINITE, contactSalesUrl, contractSales, unAvailable } from '../config'
import { ALL_PLANS, NUM_INFINITE, contactSalesUrl } from '../config'
import Toast from '../../base/toast'
import Tooltip from '../../base/tooltip'
import Divider from '../../base/divider'
import { ArCube1, Group2, Keyframe, SparklesSoft } from '../../base/icons/src/public/billing'
import { PlanRange } from './select-plan-range'
import cn from '@/utils/classnames'
import { useAppContext } from '@/context/app-context'
import { fetchSubscriptionUrls } from '@/service/billing'
import { LanguagesSupported } from '@/i18n/language'
import I18n from '@/context/i18n'
type Props = {
currentPlan: Plan
@ -21,45 +21,49 @@ type Props = {
canPay: boolean
}
const KeyValue = ({ label, value, tooltip }: { label: string; value: string | number | JSX.Element; tooltip?: string }) => {
const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; tooltip?: string }) => {
return (
<div className='mt-3.5 leading-[125%] text-[13px] font-medium'>
<div className='flex items-center text-gray-500 space-x-1'>
<div>{label}</div>
{tooltip && (
<Tooltip
popupContent={
<div className='w-[200px]'>{tooltip}</div>
}
/>
)}
<div className='flex text-text-tertiary'>
<div className='size-4 flex items-center justify-center'>
{icon}
</div>
<div className='mt-0.5 text-gray-900'>{value}</div>
<div className='ml-2 mr-0.5 text-text-primary system-sm-regular'>{label}</div>
{tooltip && (
<Tooltip
asChild
popupContent={tooltip}
popupClassName='w-[200px]'
>
<div className='size-4 flex items-center justify-center'>
<RiQuestionLine className='text-text-secondary' />
</div>
</Tooltip>
)}
</div>
)
}
const priceClassName = 'leading-[32px] text-[28px] font-bold text-gray-900'
const priceClassName = 'leading-[125%] text-[28px] font-bold text-text-primary'
const style = {
[Plan.sandbox]: {
bg: 'bg-[#F2F4F7]',
title: 'text-gray-900',
hoverAndActive: '',
icon: <ArCube1 className='text-text-primary size-7' />,
description: 'text-util-colors-gray-gray-600',
btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary',
},
[Plan.professional]: {
bg: 'bg-[#E0F2FE]',
title: 'text-[#026AA2]',
hoverAndActive: 'hover:shadow-lg hover:!text-white hover:!bg-[#0086C9] hover:!border-[#026AA2] active:!text-white active:!bg-[#026AA2] active:!border-[#026AA2]',
icon: <Keyframe className='text-util-colors-blue-brand-blue-brand-600 size-7' />,
description: 'text-util-colors-blue-brand-blue-brand-600',
btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-component-button-primary-border text-components-button-primary-text',
},
[Plan.team]: {
bg: 'bg-[#E0EAFF]',
title: 'text-[#3538CD]',
hoverAndActive: 'hover:shadow-lg hover:!text-white hover:!bg-[#444CE7] hover:!border-[#3538CD] active:!text-white active:!bg-[#3538CD] active:!border-[#3538CD]',
icon: <Group2 className='text-util-colors-indigo-indigo-600 size-7' />,
description: 'text-util-colors-indigo-indigo-600',
btnStyle: 'bg-components-button-indigo-bg hover:bg-components-button-indigo-bg-hover border border-components-button-primary-border text-components-button-primary-text',
},
[Plan.enterprise]: {
bg: 'bg-[#FFEED3]',
title: 'text-[#DC6803]',
hoverAndActive: 'hover:shadow-lg hover:!text-white hover:!bg-[#F79009] hover:!border-[#DC6803] active:!text-white active:!bg-[#DC6803] active:!border-[#DC6803]',
icon: 'text-[#DC6803]',
description: '',
btnStyle: 'hover:shadow-lg hover:!text-white hover:!bg-[#F79009] hover:!border-[#DC6803] active:!text-white active:!bg-[#DC6803] active:!border-[#DC6803]',
},
}
const PlanItem: FC<Props> = ({
@ -69,9 +73,9 @@ const PlanItem: FC<Props> = ({
canPay,
}) => {
const { t } = useTranslation()
const { locale } = useContext(I18n)
// const { locale } = useContext(I18n)
const isZh = locale === LanguagesSupported[1]
// const isZh = locale === LanguagesSupported[1]
const [loading, setLoading] = React.useState(false)
const i18nPrefix = `billing.plans.${plan}`
const isFreePlan = plan === Plan.sandbox
@ -82,13 +86,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')
// const messagesRequest = (() => {
// const value = planInfo.messageRequest[isZh ? 'zh' : 'en']
// if (value === contractSales)
// return t('billing.plansCommon.contractSales')
return value
})()
// return value
// })()
const btnText = (() => {
if (!canPay && plan !== Plan.enterprise)
return t('billing.plansCommon.contractOwner')
@ -98,85 +102,85 @@ const PlanItem: FC<Props> = ({
return ({
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
[Plan.professional]: <>{t('billing.plansCommon.getStartedWith')}<span className='capitalize'>&nbsp;{plan}</span></>,
[Plan.team]: <>{t('billing.plansCommon.getStartedWith')}<span className='capitalize'>&nbsp;{plan}</span></>,
[Plan.professional]: t('billing.plansCommon.getStarted'),
[Plan.team]: t('billing.plansCommon.getStarted'),
[Plan.enterprise]: t('billing.plansCommon.talkToSales'),
})[plan]
})()
const comingSoon = (
<div className='leading-[12px] text-[9px] font-semibold text-[#3538CD] uppercase'>{t('billing.plansCommon.comingSoon')}</div>
)
const supportContent = (() => {
switch (plan) {
case Plan.sandbox:
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>
</div>)
case Plan.professional:
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>
<div className='mt-3.5 flex items-center space-x-1'>
<div>+ {t('billing.plansCommon.supportItems.bulkUpload')}</div>
</div>
<div className='mt-3.5 flex items-center space-x-1'>
<span>+ </span>
<div>{t('billing.plansCommon.supportItems.llmLoadingBalancing')}</div>
<Tooltip
popupContent={
<div className='w-[200px]'>{t('billing.plansCommon.supportItems.llmLoadingBalancingTooltip')}</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>
<Tooltip
popupContent={
<div className='w-[200px]'>{t('billing.plansCommon.ragAPIRequestTooltip')}</div>
}
/>
</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.SSOAuthentication')}</div>
<div>{comingSoon}</div>
</div>
</div>
)
case Plan.enterprise:
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>
</div>
)
default:
return ''
}
})()
// const comingSoon = (
// <div className='leading-[12px] text-[9px] font-semibold text-[#3538CD] uppercase'>{t('billing.plansCommon.comingSoon')}</div>
// )
// const supportContent = (() => {
// switch (plan) {
// case Plan.sandbox:
// 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>
// </div>)
// case Plan.professional:
// 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>
// <div className='mt-3.5 flex items-center space-x-1'>
// <div>+ {t('billing.plansCommon.supportItems.bulkUpload')}</div>
// </div>
// <div className='mt-3.5 flex items-center space-x-1'>
// <span>+ </span>
// <div>{t('billing.plansCommon.supportItems.llmLoadingBalancing')}</div>
// <Tooltip
// popupContent={
// <div className='w-[200px]'>{t('billing.plansCommon.supportItems.llmLoadingBalancingTooltip')}</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>
// <Tooltip
// popupContent={
// <div className='w-[200px]'>{t('billing.plansCommon.ragAPIRequestTooltip')}</div>
// }
// />
// </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.SSOAuthentication')}</div>
// <div>{comingSoon}</div>
// </div>
// </div>
// )
// case Plan.enterprise:
// 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>
// </div>
// )
// default:
// return ''
// }
// })()
const handleGetPayUrl = async () => {
if (loading)
return
@ -211,14 +215,23 @@ const PlanItem: FC<Props> = ({
}
}
return (
<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 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 ? 'mb-5 text-[#FB6514]' : 'mb-4 text-gray-500', 'h-8 leading-[125%] text-[13px] font-normal')}>{t(`${i18nPrefix}.description`)}</div>
<div className={cn('flex flex-col w-[373px] p-6 border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn rounded-2xl',
isMostPopularPlan ? 'shadow-lg backdrop-blur-[5px] border-effects-highlight' : 'hover:shadow-lg hover:backdrop-blur-[5px] hover:border-effects-highlight',
)}>
<div className='flex flex-col gap-y-1'>
{style[plan].icon}
<div className='flex items-center'>
<div className='leading-[125%] text-lg font-semibold uppercase text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
{isMostPopularPlan && <div className='ml-1 px-1 py-[3px] flex items-center justify-center rounded-full border-[0.5px] shadow-xs bg-price-premium-badge-background text-components-premium-badge-grey-text-stop-0'>
<div className='pl-0.5'>
<SparklesSoft className='size-3' />
</div>
<span className='px-0.5 system-2xs-semibold-uppercase bg-clip-text bg-price-premium-text-background text-transparent'>Popular</span>
</div>}
</div>
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
</div>
<div className='my-5'>
{/* Price */}
{isFreePlan && (
<div className={priceClassName}>{t('billing.plansCommon.free')}</div>
@ -227,74 +240,80 @@ const PlanItem: FC<Props> = ({
<div className={priceClassName}>{t('billing.plansCommon.contactSales')}</div>
)}
{!isFreePlan && !isEnterprisePlan && (
<div className='flex items-end h-9'>
<div className='flex items-end'>
<div className={priceClassName}>${isYear ? planInfo.price * 10 : planInfo.price}</div>
<div className='ml-1'>
{isYear && <div className='leading-[18px] text-xs font-medium text-[#F26725]'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
<div className='leading-[18px] text-[15px] font-normal text-gray-500'>/{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
<div className='ml-1 flex flex-col'>
{isYear && <div className='leading-[14px] text-[14px] font-normal italic text-text-warning'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
<div className='leading-normal text-[14px] font-normal text-text-tertiary'>
{t('billing.plansCommon.priceTip')}
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
</div>
</div>
)}
</div>
<div
className={cn(isMostPopularPlan && !isCurrent && '!bg-[#444CE7] !text-white !border !border-[#3538CD] shadow-sm', isPlanDisabled ? 'opacity-30' : `${style[plan].hoverAndActive} cursor-pointer`, 'mt-4 flex h-11 items-center justify-center border-[2px] border-gray-900 rounded-3xl text-sm font-semibold text-gray-900')}
onClick={handleGetPayUrl}
>
{btnText}
</div>
<div className='my-4 h-[1px] bg-black/5'></div>
<div className='leading-[125%] text-[13px] font-normal text-gray-900'>
{t(`${i18nPrefix}.includesTitle`)}
</div>
<div
className={cn('flex py-3 px-5 rounded-full justify-center items-center h-[42px]',
style[plan].btnStyle,
isPlanDisabled ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer ')}
onClick={handleGetPayUrl}
>
{btnText}
</div>
<div className='flex flex-col gap-y-3 mt-6'>
<KeyValue
label={t('billing.plansCommon.messageRequest.title')}
value={messagesRequest}
icon={<RiChatAiLine />}
label={isFreePlan
? t('billing.plansCommon.messageRequest.title', { count: planInfo.messageRequest })
: t('billing.plansCommon.messageRequest.titlePerMonth', { count: planInfo.messageRequest })}
tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
/>
<KeyValue
icon={<RiBrain2Line />}
label={t('billing.plansCommon.modelProviders')}
value={planInfo.modelProviders}
/>
<KeyValue
label={t('billing.plansCommon.teamMembers')}
value={planInfo.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : planInfo.teamMembers}
icon={<RiFolder6Line />}
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
/>
<KeyValue
label={t('billing.plansCommon.buildApps')}
value={planInfo.buildApps === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : planInfo.buildApps}
icon={<RiGroupLine />}
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
/>
<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}
icon={<RiApps2Line />}
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
/>
<Divider bgStyle='gradient' />
<KeyValue
icon={<RiBook2Line />}
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
tooltip={t('billing.plansCommon.documentsTooltip') as string}
/>
<KeyValue
label={t('billing.plansCommon.documentsUploadQuota')}
value={planInfo.vectorSpace === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : planInfo.documentsUploadQuota}
/>
<KeyValue
label={t('billing.plansCommon.documentProcessingPriority')}
value={t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`) as string}
icon={<RiHardDrive3Line />}
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
/>
<KeyValue
label={t('billing.plansCommon.annotatedResponse.title')}
value={planInfo.annotatedResponse === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.annotatedResponse}`}
icon={<RiSeoLine />}
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip') as string}
/>
<KeyValue
icon={<RiProgress3Line />}
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join(' ')}
/>
<Divider bgStyle='gradient' />
<KeyValue
icon={<RiFileEditLine />}
label={t('billing.plansCommon.annotatedResponse.title', { count: 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')}`}
/>
<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}
icon={<RiHistoryLine />}
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
/>
</div>
</div>

37
web/app/components/billing/pricing/select-plan-range.tsx
View File

@ -2,6 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import Switch from '../../base/switch'
import cn from '@/utils/classnames'
export enum PlanRange {
monthly = 'monthly',
@ -25,10 +26,19 @@ const ITem: FC<{ isActive: boolean; value: PlanRange; text: string; onClick: (va
}
const ArrowIcon = (
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="38" viewBox="0 0 26 38" fill="none">
<path d="M20.5005 3.49991C23.5 18 18.7571 25.2595 2.92348 31.9599" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M2.21996 32.2756L8.37216 33.5812" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M2.22168 32.2764L3.90351 27.4459" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="29" viewBox="0 0 22 29" fill="none">
<g clip-path="url(#clip0_394_43518)">
<path d="M2.11312 1.64777C2.11312 1.64777 2.10178 1.64849 2.09045 1.6492C2.06211 1.65099 2.08478 1.64956 2.11312 1.64777ZM9.047 20.493C9.43106 19.9965 8.97268 19.2232 8.35639 19.2848C7.72208 19.4215 6.27243 20.3435 5.13995 20.8814C4.2724 21.3798 3.245 21.6892 2.54015 22.4221C1.87751 23.2831 2.70599 23.9706 3.47833 24.3088C4.73679 24.9578 6.00624 25.6004 7.25975 26.2611C8.4424 26.8807 9.57833 27.5715 10.7355 28.2383C10.9236 28.3345 11.1464 28.3489 11.3469 28.2794C11.9886 28.0796 12.0586 27.1137 11.4432 26.8282C9.83391 25.8485 8.17365 24.9631 6.50314 24.0955C8.93023 24.2384 11.3968 24.1058 13.5161 22.7945C16.6626 20.8097 19.0246 17.5714 20.2615 14.0854C22.0267 8.96164 18.9313 4.08153 13.9897 2.40722C10.5285 1.20289 6.76599 0.996166 3.14837 1.46306C2.50624 1.56611 2.68616 1.53201 2.10178 1.64849C2.12445 1.64706 2.14712 1.64563 2.16979 1.6442C2.01182 1.66553 1.86203 1.72618 1.75582 1.84666C1.48961 2.13654 1.58903 2.63096 1.9412 2.80222C2.19381 2.92854 2.4835 2.83063 2.74986 2.81385C3.7267 2.69541 4.70711 2.63364 5.69109 2.62853C8.30015 2.58932 10.5052 2.82021 13.2684 3.693C21.4149 6.65607 20.7135 14.2162 14.6733 20.0304C12.4961 22.2272 9.31209 22.8944 6.11128 22.4816C5.92391 22.4877 5.72342 22.4662 5.52257 22.439C6.35474 22.011 7.20002 21.6107 8.01305 21.1498C8.35227 20.935 8.81233 20.8321 9.05266 20.4926L9.047 20.493Z" fill="url(#paint0_linear_394_43518)" />
</g>
<defs>
<linearGradient id="paint0_linear_394_43518" x1="11" y1="-48.5001" x2="12.2401" y2="28.2518" gradientUnits="userSpaceOnUse">
<stop stop-color="#FDB022" />
<stop offset="1" stop-color="#F79009" />
</linearGradient>
<clipPath id="clip0_394_43518">
<rect width="19.1928" height="27.3696" fill="white" transform="translate(21.8271 27.6475) rotate(176.395)" />
</clipPath>
</defs>
</svg>
)
@ -39,15 +49,16 @@ const SelectPlanRange: FC<Props> = ({
const { t } = useTranslation()
return (
<div>
<div className='mb-4 leading-[18px] text-sm font-medium text-[#F26725]'>{t('billing.plansCommon.yearlyTip')}</div>
<div className='inline-flex relative p-1 rounded-full bg-[#F5F8FF] border border-black/5'>
<ITem isActive={value === PlanRange.monthly} value={PlanRange.monthly} text={t('billing.plansCommon.planRange.monthly') as string} onClick={onChange} />
<ITem isActive={value === PlanRange.yearly} value={PlanRange.yearly} text={t('billing.plansCommon.planRange.yearly') as string} onClick={onChange} />
<div className='absolute right-0 top-[-16px] '>
{ArrowIcon}
</div>
<div className='relative flex flex-col items-end pr-6'>
<div className='text-sm italic bg-clip-text bg-premium-yearly-tip-text-background text-transparent'>{t('billing.plansCommon.yearlyTip')}</div>
<div className='flex items-center'>
<span className='mr-2'>{t('billing.plansCommon.annualBilling')}</span>
<Switch size='lg' defaultValue={value === PlanRange.yearly} onChange={(v) => {
onChange(v ? PlanRange.yearly : PlanRange.monthly)
}} />
</div>
<div className='absolute right-0 top-2'>
{ArrowIcon}
</div>
</div>
)

12
web/app/components/billing/type.ts
View File

@ -14,17 +14,15 @@ export type PlanInfo = {
level: number
price: number
modelProviders: string
teamWorkspace: number
teamMembers: number
buildApps: number
vectorSpace: number
documentsUploadQuota: number
documents: number
vectorSpace: string
documentsRequestQuota: number
documentProcessingPriority: Priority
logHistory: number
customTools: string | number
messageRequest: {
en: string | number
zh: string | number
}
messageRequest: number
annotatedResponse: number
}

52
web/i18n/en-US/billing.ts
View File

@ -8,8 +8,11 @@ const translation = {
viewBilling: 'Manage billing and subscriptions',
buyPermissionDeniedTip: 'Please contact your enterprise administrator to subscribe',
plansCommon: {
title: 'Choose a plan that’s right for you',
yearlyTip: 'Get 2 months for free by subscribing yearly!',
title: 'Pricing that powers your AI journey',
freeTrialTipPrefix: 'Sign up and get a ',
freeTrialTip: 'free trial of 200 OpenAI calls. ',
freeTrialTipSuffix: 'No credit card required',
yearlyTip: 'Pay for 10 months, enjoy 1 Year!',
mostPopular: 'Most Popular',
planRange: {
monthly: 'Monthly',
@ -19,33 +22,38 @@ const translation = {
year: 'year',
save: 'Save ',
free: 'Free',
annualBilling: 'Annual Billing',
priceTip: 'per workspace/',
currentPlan: 'Current Plan',
contractSales: 'Contact sales',
contractOwner: 'Contact team manager',
startForFree: 'Start for free',
getStartedWith: 'Get started with ',
getStarted: 'Get started',
contactSales: 'Contact Sales',
talkToSales: 'Talk to Sales',
modelProviders: 'Model Providers',
teamMembers: 'Team Members',
modelProviders: 'Support OpenAI/Anthropic/Llama2/Azure OpenAI/Hugging Face/Replicate',
teamWorkspace: '{{count}} Team Workspace',
teamMember_one: '{{count}} Team Member',
teamMember_other: '{{count}} Team Members',
annotationQuota: 'Annotation Quota',
buildApps: 'Build Apps',
vectorSpace: 'Vector Space',
buildApps: '{{count}} Apps',
documents: '{{count}} Knowledge Documents',
documentsTooltip: 'Quota on the number of documents imported from the Knowledge Data Source.',
vectorSpace: '{{size}} Knowledge Data Storage',
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.',
documentsUploadQuota: 'Documents Upload Quota',
documentProcessingPriority: 'Document Processing Priority',
documentProcessingPriorityTip: 'For higher document processing priority, please upgrade your plan.',
documentProcessingPriorityUpgrade: 'Process more data with higher accuracy at faster speeds.',
vectorSpaceTooltip: 'Documents with the High Quality indexing mode will consume Knowledge Data Storage resources. When Knowledge Data Storage reaches the limit, new documents will not be uploaded.',
documentsRequestQuota: '{{count}}/min Knowledge Request Rate limit',
documentsRequestQuotaTooltip: 'Indicates the number of queries per minute the system can handle with knowledge base support, used to measure query capacity and performance.',
documentProcessingPriority: 'Document Processing',
priority: {
'standard': 'Standard',
'priority': 'Priority',
'top-priority': 'Top Priority',
},
logsHistory: 'Logs history',
logsHistory: '{{days}} Log history',
customTools: 'Custom Tools',
unavailable: 'Unavailable',
days: 'days',
days: 'Days',
unlimited: 'Unlimited',
support: 'Support',
supportItems: {
@ -68,12 +76,13 @@ const translation = {
member: 'Member',
memberAfter: 'Member',
messageRequest: {
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.',
title: '{{count}} Messages',
titlePerMonth: '{{count}} Messages/month',
tooltip: 'Message invocation quotas for various plans using OpenAl models. Messages over the limit will use your OpenAI API Key.',
},
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)',
title: '{{count}} 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.',
receiptInfo: 'Only team owner and team admin can subscribe and view billing information',
@ -81,17 +90,16 @@ const translation = {
plans: {
sandbox: {
name: 'Sandbox',
description: '200 times GPT free trial',
includesTitle: 'Includes:',
description: 'Free Trial of Core Capabilities',
},
professional: {
name: 'Professional',
description: 'For individuals and small teams to unlock more power affordably.',
description: 'For Independent Developers/Small Teams',
includesTitle: 'Everything in free plan, plus:',
},
team: {
name: 'Team',
description: 'Collaborate without limits and enjoy top-tier performance.',
description: 'For Medium-sized Teams',
includesTitle: 'Everything in Professional plan, plus:',
},
enterprise: {

3
web/tailwind.config.js
View File

@ -107,6 +107,9 @@ const config = {
'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
'dataset-chunk-list-mask-bg': 'var(--color-dataset-chunk-list-mask-bg)',
'price-premium-badge-background': 'var(--color-premium-badge-background)',
'premium-yearly-tip-text-background': 'var(--color-premium-yearly-tip-text-background)',
'price-premium-text-background': 'var(--color-premium-text-background)',
},
lineClamp: {
'20': '20',

61
web/themes/manual-dark.css
View File

@ -1,35 +1,28 @@
html[data-theme="dark"] {
--color-chatbot-bg: linear-gradient(
180deg,
rgba(34, 34, 37, 0.9) 0%,
rgba(29, 29, 32, 0.9) 90.48%
);
--color-chat-bubble-bg: linear-gradient(
180deg,
rgba(200, 206, 218, 0.08) 0%,
rgba(200, 206, 218, 0.02) 100%
);
--color-workflow-process-bg: linear-gradient(
90deg,
rgba(24, 24, 27, 0.25) 0%,
rgba(24, 24, 27, 0.04) 100%
);
--color-account-teams-bg: linear-gradient(
271deg,
rgba(34, 34, 37, 0.9) -0.1%,
rgba(29, 29, 32, 0.9) 98.26%
);
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(
180deg,
rgba(24, 24, 27, 0.08) 0%,
rgba(0, 0, 0, 0) 100%
);
}
--color-chatbot-bg: linear-gradient(180deg,
rgba(34, 34, 37, 0.9) 0%,
rgba(29, 29, 32, 0.9) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg,
rgba(200, 206, 218, 0.08) 0%,
rgba(200, 206, 218, 0.02) 100%);
--color-workflow-process-bg: linear-gradient(90deg,
rgba(24, 24, 27, 0.25) 0%,
rgba(24, 24, 27, 0.04) 100%);
--color-account-teams-bg: linear-gradient(271deg,
rgba(34, 34, 37, 0.9) -0.1%,
rgba(29, 29, 32, 0.9) 98.26%);
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
rgba(24, 24, 27, 0.08) 0%,
rgba(0, 0, 0, 0) 100%);
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);
--color-premium-badge-background: linear-gradient(95deg, rgba(103, 111, 131, 0.90) 0%, rgba(73, 84, 100, 0.90) 105.58%), var(--util-colors-gray-gray-200, #18222F);
--color-premium-text-background: linear-gradient(92deg, rgba(249, 250, 251, 0.95) 0%, rgba(233, 235, 240, 0.95) 97.78%);
}

61
web/themes/manual-light.css
View File

@ -1,35 +1,28 @@
html[data-theme="light"] {
--color-chatbot-bg: linear-gradient(
180deg,
rgba(249, 250, 251, 0.9) 0%,
rgba(242, 244, 247, 0.9) 90.48%
);
--color-chat-bubble-bg: linear-gradient(
180deg,
#fff 0%,
rgba(255, 255, 255, 0.6) 100%
);
--color-workflow-process-bg: linear-gradient(
90deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(200, 206, 218, 0.04) 100%
);
--color-account-teams-bg: linear-gradient(
271deg,
rgba(249, 250, 251, 0.9) -0.1%,
rgba(242, 244, 247, 0.9) 98.26%
);
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(
180deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
);
}
--color-chatbot-bg: linear-gradient(180deg,
rgba(249, 250, 251, 0.9) 0%,
rgba(242, 244, 247, 0.9) 90.48%);
--color-chat-bubble-bg: linear-gradient(180deg,
#fff 0%,
rgba(255, 255, 255, 0.6) 100%);
--color-workflow-process-bg: linear-gradient(90deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(200, 206, 218, 0.04) 100%);
--color-account-teams-bg: linear-gradient(271deg,
rgba(249, 250, 251, 0.9) -0.1%,
rgba(242, 244, 247, 0.9) 98.26%);
--color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
--color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
--color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
--color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
--color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
--color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
--mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
rgba(200, 206, 218, 0.2) 0%,
rgba(255, 255, 255, 0) 100%);
--color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);
--color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
--color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
}