diff --git a/web/app/components/base/icons/assets/public/billing/ar-cube-1.svg b/web/app/components/base/icons/assets/public/billing/ar-cube-1.svg new file mode 100644 index 0000000000..2022ecd6e8 --- /dev/null +++ b/web/app/components/base/icons/assets/public/billing/ar-cube-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/assets/public/billing/group-2.svg b/web/app/components/base/icons/assets/public/billing/group-2.svg new file mode 100644 index 0000000000..22970f8f54 --- /dev/null +++ b/web/app/components/base/icons/assets/public/billing/group-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/assets/public/billing/keyframe.svg b/web/app/components/base/icons/assets/public/billing/keyframe.svg new file mode 100644 index 0000000000..2690394ca5 --- /dev/null +++ b/web/app/components/base/icons/assets/public/billing/keyframe.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/assets/public/billing/sparkles-soft.svg b/web/app/components/base/icons/assets/public/billing/sparkles-soft.svg new file mode 100644 index 0000000000..7a24c14e2a --- /dev/null +++ b/web/app/components/base/icons/assets/public/billing/sparkles-soft.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/app/components/base/icons/src/public/billing/ArCube1.json b/web/app/components/base/icons/src/public/billing/ArCube1.json new file mode 100644 index 0000000000..f341c9218f --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/ArCube1.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/billing/ArCube1.tsx b/web/app/components/base/icons/src/public/billing/ArCube1.tsx new file mode 100644 index 0000000000..5164eacae5 --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/ArCube1.tsx @@ -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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'ArCube1' + +export default Icon diff --git a/web/app/components/base/icons/src/public/billing/Group2.json b/web/app/components/base/icons/src/public/billing/Group2.json new file mode 100644 index 0000000000..b2424ba881 --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/Group2.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/billing/Group2.tsx b/web/app/components/base/icons/src/public/billing/Group2.tsx new file mode 100644 index 0000000000..f516ddafdd --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/Group2.tsx @@ -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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Group2' + +export default Icon diff --git a/web/app/components/base/icons/src/public/billing/Keyframe.json b/web/app/components/base/icons/src/public/billing/Keyframe.json new file mode 100644 index 0000000000..c721854d14 --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/Keyframe.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/billing/Keyframe.tsx b/web/app/components/base/icons/src/public/billing/Keyframe.tsx new file mode 100644 index 0000000000..075e8d83f4 --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/Keyframe.tsx @@ -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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Keyframe' + +export default Icon diff --git a/web/app/components/base/icons/src/public/billing/SparklesSoft.json b/web/app/components/base/icons/src/public/billing/SparklesSoft.json new file mode 100644 index 0000000000..ce4f11f489 --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/SparklesSoft.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx b/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx new file mode 100644 index 0000000000..dd422c400f --- /dev/null +++ b/web/app/components/base/icons/src/public/billing/SparklesSoft.tsx @@ -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, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'SparklesSoft' + +export default Icon diff --git a/web/app/components/base/icons/src/public/billing/index.ts b/web/app/components/base/icons/src/public/billing/index.ts index d74cc5b961..8a442a32c2 100644 --- a/web/app/components/base/icons/src/public/billing/index.ts +++ b/web/app/components/base/icons/src/public/billing/index.ts @@ -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' diff --git a/web/app/components/base/icons/src/public/knowledge/Chunk.json b/web/app/components/base/icons/src/public/knowledge/Chunk.json index 7bd5668810..469d85d1a7 100644 --- a/web/app/components/base/icons/src/public/knowledge/Chunk.json +++ b/web/app/components/base/icons/src/public/knowledge/Chunk.json @@ -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": [] } diff --git a/web/app/components/base/icons/src/public/knowledge/Collapse.json b/web/app/components/base/icons/src/public/knowledge/Collapse.json index 5e3cf08ce0..66d457155d 100644 --- a/web/app/components/base/icons/src/public/knowledge/Collapse.json +++ b/web/app/components/base/icons/src/public/knowledge/Collapse.json @@ -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": [] } diff --git a/web/app/components/base/icons/src/public/knowledge/LayoutRight2LineMod.json b/web/app/components/base/icons/src/public/knowledge/LayoutRight2LineMod.json index 6f5b00eb54..26c5cf1d4f 100644 --- a/web/app/components/base/icons/src/public/knowledge/LayoutRight2LineMod.json +++ b/web/app/components/base/icons/src/public/knowledge/LayoutRight2LineMod.json @@ -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": [] } diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx index 03296a9dee..0ee0a54eee 100644 --- a/web/app/components/base/tab-slider/index.tsx +++ b/web/app/components/base/tab-slider/index.tsx @@ -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 = ({ const current = options[currentIndex] return ( -
+
{ - options.map((option, index) => ( + options.map(option => (
= ({ current && (
{current.text} diff --git a/web/app/components/billing/config.ts b/web/app/components/billing/config.ts index feb1f41fe3..74afcc09fc 100644 --- a/web/app/components/billing/config.ts +++ b/web/app/components/billing/config.ts @@ -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 = { 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 = { 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 = { 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, }, } diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx index 9b5e5e7453..98f7008069 100644 --- a/web/app/components/billing/pricing/index.tsx +++ b/web/app/components/billing/pricing/index.tsx @@ -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 = ({ const canPay = isCurrentWorkspaceManager const [planRange, setPlanRange] = React.useState(PlanRange.monthly) + const [currentPlan, setCurrentPlan] = React.useState('cloud') + return createPortal(
e.stopPropagation()} > - -
-
- {t('billing.plansCommon.title')} -
- -
- - - - -
+
+
+
- + +
+
+ {t('billing.plansCommon.title')} +
+
+ {t('billing.plansCommon.freeTrialTipPrefix')} + {t('billing.plansCommon.freeTrialTip')} + {t('billing.plansCommon.freeTrialTipSuffix')} +
+
+
+
+ cloud service
}, + { value: 'self', text:
self hosted
}]} + onChange={v => setCurrentPlan(v)} /> -
- + +
+
+
+ {currentPlan === 'cloud' && <> + + + + } + {currentPlan === 'self' && <> + + } +
+
+
+
+
+ Compare plans & features + +
+
+
-
, +
, document.body, ) } diff --git a/web/app/components/billing/pricing/plan-item.tsx b/web/app/components/billing/pricing/plan-item.tsx index b6ac17472e..24f588d94a 100644 --- a/web/app/components/billing/pricing/plan-item.tsx +++ b/web/app/components/billing/pricing/plan-item.tsx @@ -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 ( -
-
-
{label}
- {tooltip && ( - {tooltip}
- } - /> - )} +
+
+ {icon}
-
{value}
+
{label}
+ {tooltip && ( + +
+ +
+ + )}
) } -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: , + 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: , + 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: , + 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 = ({ @@ -69,9 +73,9 @@ const PlanItem: FC = ({ 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 = ({ 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 = ({ return ({ [Plan.sandbox]: t('billing.plansCommon.startForFree'), - [Plan.professional]: <>{t('billing.plansCommon.getStartedWith')} {plan}, - [Plan.team]: <>{t('billing.plansCommon.getStartedWith')} {plan}, + [Plan.professional]: t('billing.plansCommon.getStarted'), + [Plan.team]: t('billing.plansCommon.getStarted'), [Plan.enterprise]: t('billing.plansCommon.talkToSales'), })[plan] })() - const comingSoon = ( -
{t('billing.plansCommon.comingSoon')}
- ) - const supportContent = (() => { - switch (plan) { - case Plan.sandbox: - return (
-
{t('billing.plansCommon.supportItems.communityForums')}
-
{t('billing.plansCommon.supportItems.agentMode')}
-
-
-
 {t('billing.plansCommon.supportItems.workflow')}
-
-
-
) - case Plan.professional: - return ( -
-
{t('billing.plansCommon.supportItems.emailSupport')}
-
-
+ {t('billing.plansCommon.supportItems.logoChange')}
-
-
-
+ {t('billing.plansCommon.supportItems.bulkUpload')}
-
-
- + -
{t('billing.plansCommon.supportItems.llmLoadingBalancing')}
- {t('billing.plansCommon.supportItems.llmLoadingBalancingTooltip')}
- } - /> -
-
-
- + -
 {t('billing.plansCommon.supportItems.ragAPIRequest')}
- {t('billing.plansCommon.ragAPIRequestTooltip')}
- } - /> -
-
{comingSoon}
-
-
- ) - case Plan.team: - return ( -
-
{t('billing.plansCommon.supportItems.priorityEmail')}
-
-
+ {t('billing.plansCommon.supportItems.SSOAuthentication')}
-
{comingSoon}
-
-
- ) - case Plan.enterprise: - return ( -
-
{t('billing.plansCommon.supportItems.personalizedSupport')}
-
-
+ {t('billing.plansCommon.supportItems.dedicatedAPISupport')}
-
-
-
+ {t('billing.plansCommon.supportItems.customIntegration')}
-
-
- ) - default: - return '' - } - })() + // const comingSoon = ( + //
{t('billing.plansCommon.comingSoon')}
+ // ) + // const supportContent = (() => { + // switch (plan) { + // case Plan.sandbox: + // return (
+ //
{t('billing.plansCommon.supportItems.communityForums')}
+ //
{t('billing.plansCommon.supportItems.agentMode')}
+ //
+ //
+ //
 {t('billing.plansCommon.supportItems.workflow')}
+ //
+ //
+ //
) + // case Plan.professional: + // return ( + //
+ //
{t('billing.plansCommon.supportItems.emailSupport')}
+ //
+ //
+ {t('billing.plansCommon.supportItems.logoChange')}
+ //
+ //
+ //
+ {t('billing.plansCommon.supportItems.bulkUpload')}
+ //
+ //
+ // + + //
{t('billing.plansCommon.supportItems.llmLoadingBalancing')}
+ // {t('billing.plansCommon.supportItems.llmLoadingBalancingTooltip')}
+ // } + // /> + //
+ //
+ //
+ // + + //
 {t('billing.plansCommon.supportItems.ragAPIRequest')}
+ // {t('billing.plansCommon.ragAPIRequestTooltip')}
+ // } + // /> + //
+ //
{comingSoon}
+ //
+ //
+ // ) + // case Plan.team: + // return ( + //
+ //
{t('billing.plansCommon.supportItems.priorityEmail')}
+ //
+ //
+ {t('billing.plansCommon.supportItems.SSOAuthentication')}
+ //
{comingSoon}
+ //
+ //
+ // ) + // case Plan.enterprise: + // return ( + //
+ //
{t('billing.plansCommon.supportItems.personalizedSupport')}
+ //
+ //
+ {t('billing.plansCommon.supportItems.dedicatedAPISupport')}
+ //
+ //
+ //
+ {t('billing.plansCommon.supportItems.customIntegration')}
+ //
+ //
+ // ) + // default: + // return '' + // } + // })() const handleGetPayUrl = async () => { if (loading) return @@ -211,14 +215,23 @@ const PlanItem: FC = ({ } } return ( -
- {isMostPopularPlan && ( -
{t('billing.plansCommon.mostPopular')}
- )} -
-
{t(`${i18nPrefix}.name`)}
-
{t(`${i18nPrefix}.description`)}
- +
+
+ {style[plan].icon} +
+
{t(`${i18nPrefix}.name`)}
+ {isMostPopularPlan &&
+
+ +
+ Popular +
} +
+
{t(`${i18nPrefix}.description`)}
+
+
{/* Price */} {isFreePlan && (
{t('billing.plansCommon.free')}
@@ -227,74 +240,80 @@ const PlanItem: FC = ({
{t('billing.plansCommon.contactSales')}
)} {!isFreePlan && !isEnterprisePlan && ( -
+
${isYear ? planInfo.price * 10 : planInfo.price}
-
- {isYear &&
{t('billing.plansCommon.save')}${planInfo.price * 2}
} -
/{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
+
+ {isYear &&
{t('billing.plansCommon.save')}${planInfo.price * 2}
} +
+ {t('billing.plansCommon.priceTip')} + {t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
)} +
-
- {btnText} -
- -
- -
- {t(`${i18nPrefix}.includesTitle`)} -
+
+ {btnText} +
+
} + 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} /> } label={t('billing.plansCommon.modelProviders')} - value={planInfo.modelProviders} /> } + label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })} /> } + label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })} /> = 1000 ? `${planInfo.vectorSpace / 1000}G` : `${planInfo.vectorSpace}MB`)} - tooltip={t('billing.plansCommon.vectorSpaceBillingTooltip') as string} + icon={} + label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })} + /> + + } + label={t('billing.plansCommon.documents', { count: planInfo.documents })} + tooltip={t('billing.plansCommon.documentsTooltip') as string} /> - } + label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })} + tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string} /> } + label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })} + tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip') as string} + /> + } + label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join(' ')} + /> + + } + label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })} tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string} /> - - } + label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })} />
diff --git a/web/app/components/billing/pricing/select-plan-range.tsx b/web/app/components/billing/pricing/select-plan-range.tsx index 8caffaa9d2..d4ce96ae44 100644 --- a/web/app/components/billing/pricing/select-plan-range.tsx +++ b/web/app/components/billing/pricing/select-plan-range.tsx @@ -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 = ( - - - - + + + + + + + + + + + + + ) @@ -39,15 +49,16 @@ const SelectPlanRange: FC = ({ const { t } = useTranslation() return ( -
-
{t('billing.plansCommon.yearlyTip')}
- -
- - -
- {ArrowIcon} -
+
+
{t('billing.plansCommon.yearlyTip')}
+
+ {t('billing.plansCommon.annualBilling')} + { + onChange(v ? PlanRange.yearly : PlanRange.monthly) + }} /> +
+
+ {ArrowIcon}
) diff --git a/web/app/components/billing/type.ts b/web/app/components/billing/type.ts index d78eab2ae3..b70c88da43 100644 --- a/web/app/components/billing/type.ts +++ b/web/app/components/billing/type.ts @@ -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 } diff --git a/web/i18n/en-US/billing.ts b/web/i18n/en-US/billing.ts index 68982108cf..5bdb49bae9 100644 --- a/web/i18n/en-US/billing.ts +++ b/web/i18n/en-US/billing.ts @@ -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: { diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 0da4968a7f..b03b91ff02 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -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', diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css index 6d4c5f3908..aa539eb29f 100644 --- a/web/themes/manual-dark.css +++ b/web/themes/manual-dark.css @@ -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%); +} \ No newline at end of file diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css index 501f9f1d1f..893b607189 100644 --- a/web/themes/manual-light.css +++ b/web/themes/manual-light.css @@ -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%); +} \ No newline at end of file