diff --git a/web/app/components/base/icons/assets/public/common/highlight.svg b/web/app/components/base/icons/assets/public/common/highlight.svg new file mode 100644 index 0000000000..f4b809040b --- /dev/null +++ b/web/app/components/base/icons/assets/public/common/highlight.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/web/app/components/base/icons/assets/public/common/sparkles-soft.svg b/web/app/components/base/icons/assets/public/common/sparkles-soft.svg new file mode 100644 index 0000000000..37f3072df7 --- /dev/null +++ b/web/app/components/base/icons/assets/public/common/sparkles-soft.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx index 5206d02622..85280607a7 100644 --- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx +++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './BaichuanTextCn.module.css' import cn from '@/utils/classnames' +import s from './BaichuanTextCn.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/Minimax.tsx b/web/app/components/base/icons/src/image/llm/Minimax.tsx index 7b75ff6f61..ea8c87a188 100644 --- a/web/app/components/base/icons/src/image/llm/Minimax.tsx +++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './Minimax.module.css' import cn from '@/utils/classnames' +import s from './Minimax.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx index 490a977517..b6dfba4f70 100644 --- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx +++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './MinimaxText.module.css' import cn from '@/utils/classnames' +import s from './MinimaxText.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.tsx b/web/app/components/base/icons/src/image/llm/Tongyi.tsx index 543b4ce63d..2fc2c8b000 100644 --- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx +++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './Tongyi.module.css' import cn from '@/utils/classnames' +import s from './Tongyi.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.tsx b/web/app/components/base/icons/src/image/llm/TongyiText.tsx index 16e3920780..ca8cd5793b 100644 --- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx +++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './TongyiText.module.css' import cn from '@/utils/classnames' +import s from './TongyiText.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx index c14d323c60..605a254b57 100644 --- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx +++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './TongyiTextCn.module.css' import cn from '@/utils/classnames' +import s from './TongyiTextCn.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.tsx b/web/app/components/base/icons/src/image/llm/Wxyy.tsx index 312e325043..c73ddffa1c 100644 --- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx +++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './Wxyy.module.css' import cn from '@/utils/classnames' +import s from './Wxyy.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.tsx b/web/app/components/base/icons/src/image/llm/WxyyText.tsx index fd618e8d34..1ba8335fd2 100644 --- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx +++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './WxyyText.module.css' import cn from '@/utils/classnames' +import s from './WxyyText.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx index 01acc26241..02616573e5 100644 --- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx +++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx @@ -2,8 +2,8 @@ // DON NOT EDIT IT MANUALLY import * as React from 'react' -import s from './WxyyTextCn.module.css' import cn from '@/utils/classnames' +import s from './WxyyTextCn.module.css' const Icon = React.forwardRef, HTMLSpanElement>>(( { className, ...restProps }, diff --git a/web/app/components/base/icons/src/public/common/Highlight.json b/web/app/components/base/icons/src/public/common/Highlight.json new file mode 100644 index 0000000000..d18386eb01 --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Highlight.json @@ -0,0 +1,67 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "xmlns": "http://www.w3.org/2000/svg", + "width": "46", + "height": "24", + "viewBox": "0 0 46 24", + "fill": "none" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "opacity": "0.5", + "d": "M-6.5 8C-6.5 3.58172 -2.91828 0 1.5 0H45.5L33.0248 24H1.49999C-2.91829 24 -6.5 20.4183 -6.5 16V8Z", + "fill": "url(#paint0_linear_6333_42118)" + }, + "children": [] + }, + { + "type": "element", + "name": "defs", + "attributes": {}, + "children": [ + { + "type": "element", + "name": "linearGradient", + "attributes": { + "id": "paint0_linear_6333_42118", + "x1": "1.81679", + "y1": "5.47784e-07", + "x2": "101.257", + "y2": "30.3866", + "gradientUnits": "userSpaceOnUse" + }, + "children": [ + { + "type": "element", + "name": "stop", + "attributes": { + "stop-color": "white", + "stop-opacity": "0.12" + }, + "children": [] + }, + { + "type": "element", + "name": "stop", + "attributes": { + "offset": "1", + "stop-color": "white", + "stop-opacity": "0.3" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "Highlight" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/common/Highlight.tsx b/web/app/components/base/icons/src/public/common/Highlight.tsx new file mode 100644 index 0000000000..379f38f78e --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Highlight.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Highlight.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 = 'Highlight' + +export default Icon diff --git a/web/app/components/base/icons/src/public/common/Lock.json b/web/app/components/base/icons/src/public/common/Lock.json new file mode 100644 index 0000000000..24af41a73d --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Lock.json @@ -0,0 +1,38 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "16", + "height": "16", + "viewBox": "0 0 16 16", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "lock" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector", + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M8 1.75C6.27411 1.75 4.875 3.14911 4.875 4.875V6.125C3.83947 6.125 3 6.96444 3 8V12.375C3 13.4106 3.83947 14.25 4.875 14.25H11.125C12.1606 14.25 13 13.4106 13 12.375V8C13 6.96444 12.1606 6.125 11.125 6.125V4.875C11.125 3.14911 9.72587 1.75 8 1.75ZM9.875 6.125V4.875C9.875 3.83947 9.03556 3 8 3C6.96444 3 6.125 3.83947 6.125 4.875V6.125H9.875ZM8 8.625C8.34519 8.625 8.625 8.90481 8.625 9.25V11.125C8.625 11.4702 8.34519 11.75 8 11.75C7.65481 11.75 7.375 11.4702 7.375 11.125V9.25C7.375 8.90481 7.65481 8.625 8 8.625Z", + "fill": "#155AEF" + }, + "children": [] + } + ] + } + ] + }, + "name": "Lock" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/common/Lock.tsx b/web/app/components/base/icons/src/public/common/Lock.tsx new file mode 100644 index 0000000000..3a2ed38574 --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Lock.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Lock.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 = 'Lock' + +export default Icon diff --git a/web/app/components/base/icons/src/public/common/SparklesSoft.json b/web/app/components/base/icons/src/public/common/SparklesSoft.json new file mode 100644 index 0000000000..e22cec82a3 --- /dev/null +++ b/web/app/components/base/icons/src/public/common/SparklesSoft.json @@ -0,0 +1,47 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "14", + "height": "14", + "viewBox": "0 0 14 14", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "sparkles-soft" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector", + "opacity": "0.5", + "d": "M10.9963 1.36798C10.9839 1.25339 10.8909 1.16677 10.7802 1.16666C10.6695 1.16654 10.5763 1.25295 10.5636 1.36752C10.5045 1.90085 10.3525 2.26673 10.1143 2.5149C9.87599 2.76307 9.52476 2.92145 9.01275 2.98296C8.90277 2.99618 8.81983 3.09324 8.81995 3.20856C8.82006 3.32388 8.90322 3.42076 9.0132 3.43373C9.51653 3.49312 9.87583 3.65148 10.1201 3.90135C10.3631 4.14986 10.518 4.51523 10.563 5.04321C10.573 5.16035 10.6673 5.25012 10.7802 5.24999C10.8931 5.24986 10.9872 5.15987 10.9969 5.0427C11.0401 4.52364 11.1949 4.15004 11.4394 3.89528C11.684 3.64052 12.0426 3.47926 12.5409 3.43433C12.6534 3.42419 12.7398 3.32619 12.7399 3.20858C12.7401 3.09097 12.6539 2.99277 12.5414 2.98236C12.0346 2.93546 11.6838 2.77407 11.4452 2.52098C11.2054 2.2665 11.0533 1.89229 10.9963 1.36798Z", + "fill": "#F5F8FF" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector_2", + "d": "M7.13646 2.85102C7.10442 2.55638 6.8653 2.33365 6.5806 2.33334C6.29595 2.33304 6.05633 2.55526 6.02374 2.84984C5.87186 4.22127 5.48089 5.1621 4.86827 5.80025C4.25565 6.43838 3.35245 6.84566 2.03587 7.00386C1.75307 7.03781 1.53975 7.28742 1.54004 7.58393C1.54033 7.88049 1.75415 8.12958 2.03701 8.16294C3.33132 8.31566 4.25509 8.72289 4.88328 9.36543C5.50807 10.0045 5.90647 10.9439 6.02222 12.3016C6.04793 12.6029 6.29035 12.8337 6.58066 12.8333C6.87102 12.833 7.11294 12.6016 7.13797 12.3003C7.24885 10.9656 7.64695 10.0049 8.27583 9.34979C8.90477 8.69471 9.82698 8.28002 11.1083 8.16452C11.3976 8.13844 11.6197 7.88644 11.62 7.58399C11.6204 7.28159 11.3988 7.02906 11.1096 7.00229C9.8062 6.88171 8.90432 6.46673 8.29084 5.81589C7.674 5.16152 7.28306 4.19926 7.13646 2.85102Z", + "fill": "#F5F8FF" + }, + "children": [] + } + ] + } + ] + }, + "name": "SparklesSoft" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/common/SparklesSoft.tsx b/web/app/components/base/icons/src/public/common/SparklesSoft.tsx new file mode 100644 index 0000000000..dd422c400f --- /dev/null +++ b/web/app/components/base/icons/src/public/common/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/common/index.ts b/web/app/components/base/icons/src/public/common/index.ts index b20668175c..788d275f92 100644 --- a/web/app/components/base/icons/src/public/common/index.ts +++ b/web/app/components/base/icons/src/public/common/index.ts @@ -2,8 +2,11 @@ export { default as D } from './D' export { default as DiagonalDividingLine } from './DiagonalDividingLine' export { default as Dify } from './Dify' export { default as Github } from './Github' +export { default as Highlight } from './Highlight' export { default as Line3 } from './Line3' +export { default as Lock } from './Lock' export { default as MessageChatSquare } from './MessageChatSquare' export { default as MultiPathRetrieval } from './MultiPathRetrieval' export { default as NTo1Retrieval } from './NTo1Retrieval' export { default as Notion } from './Notion' +export { default as SparklesSoft } from './SparklesSoft' diff --git a/web/app/components/base/premium-badge/index.css b/web/app/components/base/premium-badge/index.css new file mode 100644 index 0000000000..d92a2a2b2a --- /dev/null +++ b/web/app/components/base/premium-badge/index.css @@ -0,0 +1,48 @@ +@tailwind components; + +@layer components { + .premium-badge { + @apply inline-flex justify-center items-center rounded-full border border-white/95 text-white + } + + /* m is for the regular button */ + .premium-badge-m { + @apply border shadow-lg !p-1 h-6 w-auto + } + + .premium-badge-s { + @apply border-[0.5px] shadow-xs !px-1 !py-[3px] h-[18px] w-auto + } + + .premium-badge-blue { + @apply bg-gradient-to-r from-[#5289ffe6] to-[#155aefe6] bg-util-colors-blue-blue-200 + } + + .premium-badge-indigo { + @apply bg-gradient-to-r from-[#8098f9e6] to-[#444ce7e6] bg-util-colors-indigo-indigo-200 + } + + .premium-badge-gray { + @apply bg-gradient-to-r from-[#98a2b2e6] to-[#676f83e6] bg-util-colors-gray-gray-200 + } + + .premium-badge-orange { + @apply bg-gradient-to-r from-[#ff692ee6] to-[#e04f16e6] bg-util-colors-orange-orange-200 + } + + .premium-badge-blue.allowHover:hover { + @apply bg-gradient-to-r from-[#296dffe6] to-[#004aebe6] bg-util-colors-blue-blue-300 cursor-pointer + } + + .premium-badge-indigo.allowHover:hover { + @apply bg-gradient-to-r from-[#6172f3e6] to-[#2d31a6e6] bg-util-colors-indigo-indigo-300 cursor-pointer + } + + .premium-badge-gray.allowHover:hover { + @apply bg-gradient-to-r from-[#676f83e6] to-[#354052e6] bg-util-colors-gray-gray-300 cursor-pointer + } + + .premium-badge-orange.allowHover:hover { + @apply bg-gradient-to-r from-[#ff4405e6] to-[#b93815e6] bg-util-colors-orange-orange-300 cursor-pointer + } +} \ No newline at end of file diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx new file mode 100644 index 0000000000..1af527cd16 --- /dev/null +++ b/web/app/components/base/premium-badge/index.tsx @@ -0,0 +1,78 @@ +import type { CSSProperties, ReactNode } from 'react' +import React from 'react' +import { type VariantProps, cva } from 'class-variance-authority' +import classNames from '@/utils/classnames' +import './index.css' +import { Highlight } from '../icons/src/public/common' + +const PremiumBadgeVariants = cva( + 'premium-badge', + { + variants: { + size: { + s: 'premium-badge-s', + m: 'premium-badge-m', + }, + color: { + blue: 'premium-badge-blue', + indigo: 'premium-badge-indigo', + gray: 'premium-badge-gray', + orange: 'premium-badge-orange', + }, + allowHover: { + true: 'allowHover', + false: '', + }, + }, + defaultVariants: { + size: 'm', + color: 'blue', + allowHover: false, + }, + }, +) + +type PremiumBadgeProps = { + size?: 's' | 'm' + color?: 'blue' | 'indigo' | 'gray' | 'orange' + allowHover?: boolean + styleCss?: CSSProperties + children?: ReactNode +} & React.HTMLAttributes & VariantProps + +const PremiumBadge: React.FC = ({ + className, + size, + color, + allowHover, + styleCss, + children, + ...props +}) => { + return ( +
+ {children} + +
+ ) +} +PremiumBadge.displayName = 'PremiumBadge' + +export default PremiumBadge +export { PremiumBadge, PremiumBadgeVariants } diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx index ac9a5370ab..f7ecb67c5c 100644 --- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx +++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx @@ -6,13 +6,17 @@ import { RiArrowDownSLine } from '@remixicon/react' import cn from '@/utils/classnames' import { switchWorkspace } from '@/service/common' import { useWorkspacesContext } from '@/context/workspace-context' +import { useProviderContext } from '@/context/provider-context' import { ToastContext } from '@/app/components/base/toast' +import PremiumBadge from '@/app/components/base/premium-badge' const WorkplaceSelector = () => { const { t } = useTranslation() + const { plan } = useProviderContext() const { notify } = useContext(ToastContext) const { workspaces } = useWorkspacesContext() const currentWorkspace = workspaces.find(v => v.current) + const isFreePlan = plan.type === 'sandbox' const handleSwitchWorkspace = async (tenant_id: string) => { try { if (currentWorkspace?.id === tenant_id) @@ -57,7 +61,7 @@ const WorkplaceSelector = () => { `, )} > -
+
{t('common.userProfile.workspace')}
@@ -66,6 +70,15 @@ const WorkplaceSelector = () => {
handleSwitchWorkspace(workspace.id)}>
{workspace.name[0].toLocaleUpperCase()}
{workspace.name}
+ { + +
+ + {plan.type.toUpperCase()} + +
+ + }
)) } diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx index 8f41dee938..8d1eda8a78 100644 --- a/web/app/components/header/index.tsx +++ b/web/app/components/header/index.tsx @@ -4,7 +4,8 @@ import Link from 'next/link' import { useBoolean } from 'ahooks' import { useSelectedLayoutSegment } from 'next/navigation' import { Bars3Icon } from '@heroicons/react/20/solid' -import HeaderBillingBtn from '../billing/header-billing-btn' +import { SparklesSoft } from '@/app/components/base/icons/src/public/common' +import PremiumBadge from '../base/premium-badge' import AccountDropdown from './account-dropdown' import AppNav from './app-nav' import DatasetNav from './dataset-nav' @@ -69,7 +70,14 @@ const Header = () => { {enableBilling && (
- + + +
+ + Upgrade + +
+
)}
@@ -84,7 +92,10 @@ const Header = () => {
/
{enableBilling && (
- + + +
Upgrade
+
)} diff --git a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx index 9b83c39867..47a5d86498 100644 --- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx +++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx @@ -48,7 +48,6 @@ const SelectPackage: React.FC = ({ const handleUploadPackage = async () => { if (isUploading) return setIsUploading(true) - try { const repo = repoUrl.replace('https://github.com/', '') await handleUpload(repo, selectedVersion, selectedPackage, (GitHubPackage) => {