feat: knowledge pipeline (#25360)
Signed-off-by: -LAN- <laipz8200@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: jyong <718720800@qq.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: quicksand <quicksandzn@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Hanqing Zhao <sherry9277@gmail.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Harry <xh001x@hotmail.com>
This commit is contained in:
-LAN-
@@ -1,36 +1,32 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightUpLine, RiCloseLine, RiCloudFill, RiTerminalBoxFill } from '@remixicon/react'
|
||||
import Link from 'next/link'
|
||||
import Header from './header'
|
||||
import PlanSwitcher from './plan-switcher'
|
||||
import Plans from './plans'
|
||||
import Footer from './footer'
|
||||
import { PlanRange } from './plan-switcher/plan-range-switcher'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
import { Plan, SelfHostedPlan } from '../type'
|
||||
import TabSlider from '../../base/tab-slider'
|
||||
import SelectPlanRange, { PlanRange } from './select-plan-range'
|
||||
import PlanItem from './plan-item'
|
||||
import SelfHostedPlanItem from './self-hosted-plan-item'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import GridMask from '@/app/components/base/grid-mask'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import classNames from '@/utils/classnames'
|
||||
import { useGetPricingPageLanguage } from '@/context/i18n'
|
||||
import { NoiseBottom, NoiseTop } from './assets'
|
||||
|
||||
type Props = {
|
||||
export type Category = 'cloud' | 'self'
|
||||
|
||||
type PricingProps = {
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const Pricing: FC<Props> = ({
|
||||
const Pricing: FC<PricingProps> = ({
|
||||
onCancel,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { plan } = useProviderContext()
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const canPay = isCurrentWorkspaceManager
|
||||
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
|
||||
|
||||
const [currentPlan, setCurrentPlan] = React.useState<string>('cloud')
|
||||
const [currentCategory, setCurrentCategory] = useState<Category>('cloud')
|
||||
const canPay = isCurrentWorkspaceManager
|
||||
|
||||
useKeyPress(['esc'], onCancel)
|
||||
|
||||
@@ -41,105 +37,32 @@ const Pricing: FC<Props> = ({
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] bg-background-overlay-backdrop p-4 backdrop-blur-[6px]'
|
||||
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className='relative h-full w-full overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
|
||||
<div
|
||||
className='fixed right-7 top-7 z-[1001] flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'
|
||||
onClick={onCancel}
|
||||
>
|
||||
<RiCloseLine className='size-5 text-components-button-tertiary-text' />
|
||||
<div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden'>
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<NoiseTop />
|
||||
</div>
|
||||
<GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
|
||||
<div className='flex flex-col items-center px-8 pb-7 pt-12'>
|
||||
<div className='title-5xl-bold mb-2 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 font-semibold'>{t('billing.plansCommon.freeTrialTip')}</span>
|
||||
<span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-auto w-[1152px]'>
|
||||
<div className='flex h-[64px] items-center justify-between py-2'>
|
||||
<TabSlider
|
||||
value={currentPlan}
|
||||
className='inline-flex'
|
||||
options={[
|
||||
{
|
||||
value: 'cloud',
|
||||
text: <div className={
|
||||
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
|
||||
currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
|
||||
<RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>,
|
||||
},
|
||||
{
|
||||
value: 'self',
|
||||
text: <div className={
|
||||
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
|
||||
currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
|
||||
<RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>,
|
||||
}]}
|
||||
onChange={v => setCurrentPlan(v)} />
|
||||
|
||||
{currentPlan === 'cloud' && <SelectPlanRange
|
||||
value={planRange}
|
||||
onChange={setPlanRange}
|
||||
/>}
|
||||
</div>
|
||||
<div className='pb-8 pt-3'>
|
||||
<div className='flex flex-nowrap justify-center 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' && <>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.community}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.premium}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.enterprise}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center justify-center py-4'>
|
||||
<div className='flex items-center justify-center gap-x-0.5 rounded-lg px-3 py-2 text-components-button-secondary-accent-text hover:cursor-pointer hover:bg-state-accent-hover'>
|
||||
<Link href={pricingPageURL} className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
|
||||
<RiArrowRightUpLine className='size-4' />
|
||||
</div>
|
||||
</div>
|
||||
</GridMask>
|
||||
</div >
|
||||
</div >,
|
||||
<Header onClose={onCancel} />
|
||||
<PlanSwitcher
|
||||
currentCategory={currentCategory}
|
||||
onChangeCategory={setCurrentCategory}
|
||||
currentPlanRange={planRange}
|
||||
onChangePlanRange={setPlanRange}
|
||||
/>
|
||||
<Plans
|
||||
plan={plan}
|
||||
currentPlan={currentCategory}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Footer pricingPageURL={pricingPageURL} />
|
||||
<div className='absolute -bottom-12 left-0 right-0 -z-10'>
|
||||
<NoiseBottom />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user