mirror of
https://github.com/langgenius/dify.git
synced 2026-09-10 17:10:34 +08:00
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import { useSuspenseQuery } from '@tanstack/react-query'
|
|
import { useQueryState } from 'nuqs'
|
|
import * as React from 'react'
|
|
import { useCallback } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
pricingQueryParamName,
|
|
pricingQueryParser,
|
|
} from '@/app/components/billing/pricing/query-params'
|
|
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
|
|
import { systemFeaturesQueryOptions } from '@/features/system-features/client'
|
|
|
|
const UpgradeCard: FC = () => {
|
|
const { t } = useTranslation()
|
|
const { data: deploymentEdition } = useSuspenseQuery({
|
|
...systemFeaturesQueryOptions(),
|
|
select: ({ deployment_edition }) => deployment_edition,
|
|
})
|
|
const [, setPricing] = useQueryState(pricingQueryParamName, pricingQueryParser)
|
|
|
|
const handleUpgrade = useCallback(() => {
|
|
setPricing('open')
|
|
}, [setPricing])
|
|
|
|
if (deploymentEdition !== 'CLOUD') return null
|
|
|
|
return (
|
|
<div className="flex items-center justify-between rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-3 pr-3.5 pl-4 shadow-xs backdrop-blur-[5px]">
|
|
<div>
|
|
<div className="bg-[linear-gradient(92deg,var(--components-input-border-active-prompt-1,#0BA5EC)_0%,var(--components-input-border-active-prompt-2,#155AEF)_99.21%)] bg-clip-text title-md-semi-bold text-transparent">
|
|
{t(($) => $['upgrade.uploadMultipleFiles.title'], { ns: 'billing' })}
|
|
</div>
|
|
<div className="system-xs-regular text-text-tertiary">
|
|
{t(($) => $['upgrade.uploadMultipleFiles.description'], { ns: 'billing' })}
|
|
</div>
|
|
</div>
|
|
<UpgradeBtn
|
|
size="custom"
|
|
isShort
|
|
className="ml-3 h-8! rounded-lg! px-2"
|
|
labelKey="triggerLimitModal.upgrade"
|
|
loc="upload-multiple-files"
|
|
onClick={handleUpgrade}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
export default React.memo(UpgradeCard)
|