Skip to content

phsl / new-api

Go to a project
Commit d2b30dfc by CaIon
Options

feat(ui): redesign model square pricing page

parent 5f86839c
Showing with 1342 additions and 479 deletions
web/default/src/features/home/components/sections/cta.tsx
...@@ -42,7 +42,9 @@ export function CTA(props: CTAProps) { ...@@ -42,7 +42,9 @@ export function CTA(props: CTAProps) {
</span> </span>
</h2> </h2>
<p className='text-muted-foreground/80 mx-auto mt-5 max-w-md text-sm leading-relaxed md:text-base'> <p className='text-muted-foreground/80 mx-auto mt-5 max-w-md text-sm leading-relaxed md:text-base'>
{t('Start for free with generous limits. No credit card required.')} {t(
'Deploy your own gateway and start routing requests through your configured upstream services.'
)}
</p> </p>
<div className='mt-8 flex items-center justify-center gap-3'> <div className='mt-8 flex items-center justify-center gap-3'>
<Button className='group rounded-lg' asChild> <Button className='group rounded-lg' asChild>
......
web/default/src/features/home/components/sections/features.tsx
...@@ -113,7 +113,7 @@ export function Features(_props: FeaturesProps) { ...@@ -113,7 +113,7 @@ export function Features(_props: FeaturesProps) {
id: 'developer', id: 'developer',
num: '04', num: '04',
title: t('Developer Friendly'), title: t('Developer Friendly'),
desc: t('Complete API documentation with multi-language SDK support'), desc: t('Compatible API routes for common AI application workflows'),
span: 'md:col-span-2', span: 'md:col-span-2',
icon: <Code className='size-4 text-amber-400' />, icon: <Code className='size-4 text-amber-400' />,
visual: ( visual: (
...@@ -130,7 +130,7 @@ export function Features(_props: FeaturesProps) { ...@@ -130,7 +130,7 @@ export function Features(_props: FeaturesProps) {
</div> </div>
<div className='text-muted-foreground flex items-center gap-1.5 text-xs'> <div className='text-muted-foreground flex items-center gap-1.5 text-xs'>
<Code className='size-3.5 text-blue-500' /> <Code className='size-3.5 text-blue-500' />
{t('OpenAI Compatible')} {t('Multi-protocol Compatible')}
</div> </div>
</div> </div>
), ),
...@@ -155,8 +155,8 @@ export function Features(_props: FeaturesProps) { ...@@ -155,8 +155,8 @@ export function Features(_props: FeaturesProps) {
}, },
{ {
icon: <HeartHandshake className='size-5' strokeWidth={1.5} />, icon: <HeartHandshake className='size-5' strokeWidth={1.5} />,
title: t('Technical Support'), title: t('Open Source'),
desc: t('Professional team providing 24/7 technical support'), desc: t('Community driven, self-hosted, and extensible'),
}, },
] ]
......
web/default/src/features/home/components/sections/hero.tsx
...@@ -51,7 +51,7 @@ export function Hero(props: HeroProps) { ...@@ -51,7 +51,7 @@ export function Hero(props: HeroProps) {
> >
{systemName}{' '} {systemName}{' '}
{t( {t(
'aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.' 'is an open-source AI API gateway for self-hosted deployments. Connect multiple upstream services, manage models, keys, quotas, logs, and routing policies in one place.'
)} )}
</p> </p>
<div <div
......
web/default/src/features/home/components/sections/how-it-works.tsx
...@@ -18,7 +18,7 @@ export function HowItWorks() { ...@@ -18,7 +18,7 @@ export function HowItWorks() {
num: '2', num: '2',
title: t('Connect'), title: t('Connect'),
desc: t( desc: t(
'Use our unified OpenAI-compatible endpoint in your applications' 'Connect through OpenAI, Claude, Gemini, and other compatible API routes'
), ),
icon: <Zap className='size-6' strokeWidth={1.5} />, icon: <Zap className='size-6' strokeWidth={1.5} />,
}, },
......
web/default/src/features/home/components/sections/stats.tsx
...@@ -69,14 +69,21 @@ interface StatsProps { ...@@ -69,14 +69,21 @@ interface StatsProps {
className?: string className?: string
} }
interface StatItem {
end: number
suffix: string
label: string
decimals?: number
}
export function Stats(_props: StatsProps) { export function Stats(_props: StatsProps) {
const { t } = useTranslation() const { t } = useTranslation()
const stats = [ const stats: StatItem[] = [
{ end: 100, suffix: 'M+', label: t('requests served') }, { end: 50, suffix: '+', label: t('upstream services integrated') },
{ end: 50, suffix: '+', label: t('AI models supported') }, { end: 100, suffix: '+', label: t('model billing support') },
{ end: 99.9, suffix: '%', label: t('uptime'), decimals: 1 }, { end: 50, suffix: '+', label: t('compatible API routes') },
{ end: 10, suffix: 'K+', label: t('active users') }, { end: 10, suffix: '+', label: t('scheduling controls') },
] ]
return ( return (
......
web/default/src/features/home/constants.ts
...@@ -42,24 +42,24 @@ export const GATEWAY_FEATURES = [ ...@@ -42,24 +42,24 @@ export const GATEWAY_FEATURES = [
// Stats section - Default statistics // Stats section - Default statistics
export const DEFAULT_STATS = [ export const DEFAULT_STATS = [
{ {
value: '100', value: '50',
suffix: 'M+', suffix: '+',
description: 'requests served', description: 'upstream services integrated',
}, },
{ {
value: '50', value: '100',
suffix: '+', suffix: '+',
description: 'AI models supported', description: 'model billing support',
}, },
{ {
value: '99.9', value: '50',
suffix: '%', suffix: '+',
description: 'uptime', description: 'compatible API routes',
}, },
{ {
value: '10', value: '10',
suffix: 'K+', suffix: '+',
description: 'active users', description: 'scheduling controls',
}, },
] as const ] as const
...@@ -84,7 +84,7 @@ export const DEFAULT_FEATURES = [ ...@@ -84,7 +84,7 @@ export const DEFAULT_FEATURES = [
}, },
{ {
title: 'Developer Friendly', title: 'Developer Friendly',
description: 'Complete API documentation with multi-language SDK support', description: 'Compatible API routes for common AI application workflows',
iconName: 'Code', iconName: 'Code',
}, },
{ {
...@@ -103,8 +103,8 @@ export const DEFAULT_FEATURES = [ ...@@ -103,8 +103,8 @@ export const DEFAULT_FEATURES = [
iconName: 'Users', iconName: 'Users',
}, },
{ {
title: 'Technical Support', title: 'Open Source',
description: 'Professional team providing 24/7 technical support', description: 'Community driven, self-hosted, and extensible',
iconName: 'HeartHandshake', iconName: 'HeartHandshake',
}, },
] as const ] as const
......
web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
...@@ -156,14 +156,11 @@ export function DynamicPricingBreakdown({ ...@@ -156,14 +156,11 @@ export function DynamicPricingBreakdown({
return { symbol: '$', rate: 1 } return { symbol: '$', rate: 1 }
}, [currency]) }, [currency])
const priceSuffix = `${symbol}/1M tokens` const { tiers, ruleGroups } = useMemo(() => {
const { tiers, ruleGroups, baseExpr } = useMemo(() => {
const split = splitBillingExprAndRequestRules(expr) const split = splitBillingExprAndRequestRules(expr)
const parsedTiers = parseTiersFromExpr(split.billingExpr) const parsedTiers = parseTiersFromExpr(split.billingExpr)
const parsedRules = tryParseRequestRuleExpr(split.requestRuleExpr || '') const parsedRules = tryParseRequestRuleExpr(split.requestRuleExpr || '')
return { return {
baseExpr: split.billingExpr,
tiers: parsedTiers, tiers: parsedTiers,
ruleGroups: parsedRules || [], ruleGroups: parsedRules || [],
} }
...@@ -174,19 +171,27 @@ export function DynamicPricingBreakdown({ ...@@ -174,19 +171,27 @@ export function DynamicPricingBreakdown({
if (!expr) return null if (!expr) return null
if (!hasTiers && !hasRules) { if (!hasTiers) {
return ( return (
<section className='min-w-0 py-4'> <section className='min-w-0 py-4'>
<div className='mb-3 flex items-center gap-2'> <div className='mb-3 flex items-center gap-2'>
<span className='inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'> <span className='inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
<TagIcon className='size-3.5' /> <TagIcon className='size-3.5' />
</span> </span>
<span className='text-foreground text-base font-medium'> <div>
{t('Dynamic Pricing')} <div className='text-foreground text-base font-medium'>
</span> {t('Special billing expression')}
</div>
<div className='text-muted-foreground text-xs'>
{t('Unable to parse structured pricing')}
</div>
</div>
</div>
<div className='text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase'>
{t('Raw expression')}
</div> </div>
<code className='text-muted-foreground block text-xs break-all'> <code className='text-muted-foreground block text-xs break-all'>
{baseExpr || expr} {expr}
</code> </code>
</section> </section>
) )
...@@ -233,7 +238,7 @@ export function DynamicPricingBreakdown({ ...@@ -233,7 +238,7 @@ export function DynamicPricingBreakdown({
key={v.field} key={v.field}
className='text-muted-foreground py-2 text-right text-[10px] font-medium tracking-wider uppercase' className='text-muted-foreground py-2 text-right text-[10px] font-medium tracking-wider uppercase'
> >
{`${t(v.shortLabel)} (${priceSuffix})`} {t(v.shortLabel)}
</TableHead> </TableHead>
))} ))}
</TableRow> </TableRow>
......
web/default/src/features/pricing/components/filter-bar.tsx
...@@ -4,7 +4,6 @@ import { ...@@ -4,7 +4,6 @@ import {
Check, Check,
ChevronDown, ChevronDown,
Filter, Filter,
List,
RotateCcw, RotateCcw,
Table2, Table2,
X, X,
...@@ -572,7 +571,6 @@ export function FilterBar(props: FilterBarProps) { ...@@ -572,7 +571,6 @@ export function FilterBar(props: FilterBarProps) {
<SegmentedControl <SegmentedControl
options={[ options={[
{ value: VIEW_MODES.LIST, icon: List, tooltip: t('List view') },
{ {
value: VIEW_MODES.TABLE, value: VIEW_MODES.TABLE,
icon: Table2, icon: Table2,
......
web/default/src/features/pricing/components/index.ts
export { FilterBar } from './filter-bar' export { FilterBar } from './filter-bar'
export { ModelRow } from './model-row' export { PricingSidebar } from './pricing-sidebar'
export { PricingToolbar } from './pricing-toolbar'
export { ModelCard } from './model-card'
export { ModelCardGrid } from './model-card-grid'
export { LoadingSkeleton } from './loading-skeleton' export { LoadingSkeleton } from './loading-skeleton'
export { EmptyState } from './empty-state' export { EmptyState } from './empty-state'
export { SearchBar } from './search-bar' export { SearchBar } from './search-bar'
export { ModelDetails } from './model-details' export { ModelDetails, ModelDetailsDrawer } from './model-details'
export { VirtualModelList } from './virtual-model-list'
export { PricingTable } from './pricing-table' export { PricingTable } from './pricing-table'
web/default/src/features/pricing/components/loading-skeleton.tsx
...@@ -6,7 +6,7 @@ export interface LoadingSkeletonProps { ...@@ -6,7 +6,7 @@ export interface LoadingSkeletonProps {
} }
export function LoadingSkeleton(props: LoadingSkeletonProps) { export function LoadingSkeleton(props: LoadingSkeletonProps) {
const viewMode = props.viewMode ?? VIEW_MODES.LIST const viewMode = props.viewMode ?? VIEW_MODES.CARD
return ( return (
<div className='space-y-5'> <div className='space-y-5'>
...@@ -19,12 +19,46 @@ export function LoadingSkeleton(props: LoadingSkeletonProps) { ...@@ -19,12 +19,46 @@ export function LoadingSkeleton(props: LoadingSkeletonProps) {
{viewMode === VIEW_MODES.TABLE ? ( {viewMode === VIEW_MODES.TABLE ? (
<TableContentSkeleton /> <TableContentSkeleton />
) : ( ) : (
<ListContentSkeleton /> <CardContentSkeleton />
)} )}
</div> </div>
) )
} }
function CardContentSkeleton() {
return (
<div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
{Array.from({ length: 9 }).map((_, i) => (
<div key={i} className='rounded-xl border p-5'>
<div className='flex items-start justify-between gap-3'>
<div className='flex min-w-0 items-start gap-3'>
<Skeleton className='size-10 shrink-0 rounded-xl' />
<div className='min-w-0 flex-1 space-y-2'>
<Skeleton className='h-5 w-36' />
<Skeleton className='h-3.5 w-48' />
</div>
</div>
<Skeleton className='h-8 w-16 rounded-md' />
</div>
<div className='mt-4 space-y-2'>
<Skeleton className='h-3.5 w-full' />
<Skeleton className='h-3.5 w-4/5' />
</div>
<div className='mt-4 flex items-center gap-2'>
<Skeleton className='h-4 w-24' />
<Skeleton className='h-4 w-16' />
</div>
<div className='mt-2 flex items-center gap-3'>
<Skeleton className='h-3.5 w-14' />
<Skeleton className='h-3.5 w-14' />
<Skeleton className='h-3.5 w-8' />
</div>
</div>
))}
</div>
)
}
function FilterBarSkeleton() { function FilterBarSkeleton() {
return ( return (
<div className='space-y-3'> <div className='space-y-3'>
...@@ -50,34 +84,6 @@ function FilterBarSkeleton() { ...@@ -50,34 +84,6 @@ function FilterBarSkeleton() {
) )
} }
function ListContentSkeleton() {
return (
<div className='overflow-hidden rounded-lg border'>
{Array.from({ length: 8 }).map((_, i) => (
<div
key={i}
className='flex items-start gap-4 border-b px-4 py-3.5 last:border-b-0 sm:px-5 sm:py-4'
>
<Skeleton className='hidden size-5 shrink-0 rounded sm:block' />
<div className='min-w-0 flex-1 space-y-2'>
<Skeleton className='h-5 w-48' />
<div className='flex items-center gap-2'>
<Skeleton className='h-3.5 w-20' />
<Skeleton className='h-3.5 w-24' />
</div>
<Skeleton className='h-3.5 w-full max-w-md' />
</div>
<div className='shrink-0 space-y-1 text-right'>
<Skeleton className='ml-auto h-4 w-20' />
<Skeleton className='ml-auto h-4 w-16' />
<Skeleton className='ml-auto h-4 w-20' />
</div>
</div>
))}
</div>
)
}
function TableContentSkeleton() { function TableContentSkeleton() {
const columns = [ const columns = [
{ width: 200 }, { width: 200 },
......
web/default/src/features/pricing/components/model-card-grid.tsx 0 → 100644
import { useEffect, useMemo, useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { DEFAULT_PRICING_PAGE_SIZE, DEFAULT_TOKEN_UNIT } from '../constants'
import type { PricingModel, TokenUnit } from '../types'
import { ModelCard } from './model-card'
export interface ModelCardGridProps {
models: PricingModel[]
onModelClick: (modelName: string) => void
priceRate?: number
usdExchangeRate?: number
tokenUnit?: TokenUnit
showRechargePrice?: boolean
}
export function ModelCardGrid(props: ModelCardGridProps) {
const { t } = useTranslation()
const [page, setPage] = useState(1)
const pageSize = DEFAULT_PRICING_PAGE_SIZE
const tokenUnit = props.tokenUnit ?? DEFAULT_TOKEN_UNIT
const totalPages = Math.max(1, Math.ceil(props.models.length / pageSize))
useEffect(() => {
setPage(1)
}, [props.models])
const pagedModels = useMemo(() => {
const start = (page - 1) * pageSize
return props.models.slice(start, start + pageSize)
}, [page, pageSize, props.models])
if (props.models.length === 0) {
return null
}
return (
<div className='space-y-4 sm:space-y-5'>
<div className='grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2 lg:grid-cols-3'>
{pagedModels.map((model) => (
<ModelCard
key={model.id ?? model.model_name}
model={model}
tokenUnit={tokenUnit}
priceRate={props.priceRate}
usdExchangeRate={props.usdExchangeRate}
showRechargePrice={props.showRechargePrice}
onClick={() => props.onModelClick(model.model_name || '')}
/>
))}
</div>
{totalPages > 1 && (
<div className='text-muted-foreground flex flex-col items-center justify-between gap-3 border-t px-4 py-3 text-sm sm:flex-row'>
<p className='text-muted-foreground'>
{t('Page {{current}} of {{total}}', {
current: page,
total: totalPages,
})}
</p>
<div className='flex items-center gap-2'>
<Button
type='button'
variant='outline'
size='sm'
onClick={() => setPage((current) => Math.max(1, current - 1))}
disabled={page <= 1}
className='gap-1.5'
>
<ChevronLeft className='size-4' />
{t('Previous')}
</Button>
<Button
type='button'
variant='outline'
size='sm'
onClick={() =>
setPage((current) => Math.min(totalPages, current + 1))
}
disabled={page >= totalPages}
className='gap-1.5'
>
{t('Next')}
<ChevronRight className='size-4' />
</Button>
</div>
</div>
)}
</div>
)
}
web/default/src/features/pricing/components/model-card.tsx 0 → 100644
import { memo } from 'react'
import { ChevronRight, Copy } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { getLobeIcon } from '@/lib/lobe-icon'
import { cn } from '@/lib/utils'
import { StatusBadge } from '@/components/status-badge'
import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
import { DEFAULT_TOKEN_UNIT } from '../constants'
import { parseTags } from '../lib/filters'
import { isTokenBasedModel } from '../lib/model-helpers'
import { formatPrice, formatRequestPrice } from '../lib/price'
import {
getDynamicDisplayGroupRatio,
getDynamicPricingSummary,
} from '../lib/dynamic-price'
import type { PricingModel, TokenUnit } from '../types'
export interface ModelCardProps {
model: PricingModel
onClick: () => void
priceRate?: number
usdExchangeRate?: number
tokenUnit?: TokenUnit
showRechargePrice?: boolean
}
export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
const { t } = useTranslation()
const { copyToClipboard } = useCopyToClipboard()
const tokenUnit = props.tokenUnit ?? DEFAULT_TOKEN_UNIT
const priceRate = props.priceRate ?? 1
const usdExchangeRate = props.usdExchangeRate ?? 1
const showRechargePrice = props.showRechargePrice ?? false
const isTokenBased = isTokenBasedModel(props.model)
const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
const tags = parseTags(props.model.tags)
const groups = props.model.enable_groups || []
const endpoints = props.model.supported_endpoint_types || []
const vendorIcon = props.model.vendor_icon
? getLobeIcon(props.model.vendor_icon, 28)
: null
const initial = props.model.model_name?.charAt(0).toUpperCase() || '?'
const isDynamicPricing =
props.model.billing_mode === 'tiered_expr' && Boolean(props.model.billing_expr)
const hasCachedPrice = isTokenBased && props.model.cache_ratio != null
const dynamicSummary = isDynamicPricing
? getDynamicPricingSummary(props.model, {
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate,
groupRatioMultiplier: getDynamicDisplayGroupRatio(props.model),
})
: null
const primaryGroup = groups[0]
const bottomTags = [...endpoints.slice(0, 2), ...tags.slice(0, 2)]
const hiddenCount =
Math.max(groups.length - 1, 0) +
Math.max(endpoints.length - 2, 0) +
Math.max(tags.length - 2, 0)
const handleCopy = (e: React.MouseEvent) => {
e.stopPropagation()
copyToClipboard(props.model.model_name || '')
}
return (
<div
className={cn(
'group flex flex-col rounded-xl border p-4 transition-colors sm:p-5',
'hover:bg-muted/20'
)}
>
{/* Header: icon + name + price + actions */}
<div className='flex items-start justify-between gap-2.5 sm:gap-3'>
<div className='flex min-w-0 items-start gap-2.5 sm:gap-3'>
<div className='bg-muted/40 flex size-9 shrink-0 items-center justify-center rounded-lg sm:size-10 sm:rounded-xl'>
{vendorIcon || (
<span className='text-muted-foreground text-sm font-bold'>
{initial}
</span>
)}
</div>
<div className='min-w-0'>
<h3 className='text-foreground truncate font-mono text-[15px] font-bold leading-tight'>
{props.model.model_name}
</h3>
<div className='mt-0.5 flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs sm:mt-1 sm:gap-x-3'>
{dynamicSummary ? (
dynamicSummary.isSpecialExpression ? (
<span className='min-w-0'>
<span className='text-amber-700 dark:text-amber-300'>
{t('Special billing expression')}
</span>
<code className='text-muted-foreground/70 mt-0.5 line-clamp-1 block break-all font-mono text-[11px]'>
{dynamicSummary.rawExpression}
</code>
</span>
) : dynamicSummary.primaryEntries.length > 0 ? (
<>
{dynamicSummary.primaryEntries.map((entry) => (
<span
key={entry.key}
className='text-muted-foreground whitespace-nowrap'
>
{t(entry.shortLabel)}{' '}
<span className='text-foreground font-mono font-semibold'>
{entry.formatted}
</span>
/{tokenUnitLabel}
</span>
))}
</>
) : (
<span className='text-muted-foreground text-xs'>
{t('Dynamic Pricing')}
</span>
)
) : isTokenBased ? (
<>
<span className='text-muted-foreground whitespace-nowrap'>
{t('Input')}{' '}
<span className='text-foreground font-mono font-semibold'>
{formatPrice(props.model, 'input', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
</span>
/{tokenUnitLabel}
</span>
<span className='text-muted-foreground whitespace-nowrap'>
{t('Output')}{' '}
<span className='text-foreground font-mono font-semibold'>
{formatPrice(props.model, 'output', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
</span>
/{tokenUnitLabel}
</span>
{hasCachedPrice && (
<span className='text-muted-foreground/60 whitespace-nowrap'>
{t('Cached')}{' '}
<span className='font-mono'>
{formatPrice(props.model, 'cache', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
</span>
</span>
)}
</>
) : (
<span className='text-muted-foreground whitespace-nowrap'>
<span className='text-foreground font-mono font-semibold'>
{formatRequestPrice(props.model, showRechargePrice, priceRate, usdExchangeRate)}
</span>
{' '}/ {t('request')}
</span>
)}
</div>
</div>
</div>
<div className='flex shrink-0 items-center gap-1.5'>
<button
type='button'
onClick={props.onClick}
className='text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors sm:px-2.5 sm:py-1.5'
>
{t('Details')}
<ChevronRight className='size-3.5' />
</button>
<button
type='button'
onClick={handleCopy}
className='text-muted-foreground hover:text-foreground hover:bg-muted rounded-md border p-1.5 transition-colors'
title={t('Copy')}
>
<Copy className='size-3.5' />
</button>
</div>
</div>
{/* Description */}
<p className='text-muted-foreground mt-3 line-clamp-1 flex-1 text-[13px] leading-relaxed sm:mt-4 sm:line-clamp-2 sm:min-h-[2.5rem]'>
{props.model.description || t('No description available.')}
</p>
{/* Footer row 1: group + billing type */}
<div className='mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 sm:mt-4'>
{primaryGroup && (
<span className='text-muted-foreground text-xs font-medium'>
{primaryGroup} {t('Groups')}
</span>
)}
<span className='text-muted-foreground text-xs font-medium'>
{isTokenBased ? t('Token-based') : t('Per Request')}
</span>
{isDynamicPricing && (
<StatusBadge
label={t('Dynamic Pricing')}
variant='warning'
copyable={false}
size='sm'
/>
)}
</div>
{/* Footer row 2: endpoint + tag chips */}
<div className='mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 sm:mt-2 sm:gap-x-3 sm:gap-y-1'>
{bottomTags.map((item) => (
<span
key={item}
className='text-muted-foreground/70 text-xs'
>
{item}
</span>
))}
<span className='text-muted-foreground/50 text-xs'>{tokenUnitLabel}</span>
{hiddenCount > 0 && (
<span className='text-muted-foreground/40 text-xs'>
+{hiddenCount}
</span>
)}
</div>
</div>
)
})
web/default/src/features/pricing/components/model-row.tsx deleted 100644 → 0
import { memo, useMemo } from 'react'
import { ChevronRight } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { getLobeIcon } from '@/lib/lobe-icon'
import { cn } from '@/lib/utils'
import { DEFAULT_TOKEN_UNIT } from '../constants'
import {
parseTiersFromExpr,
splitBillingExprAndRequestRules,
tryParseRequestRuleExpr,
SOURCE_TIME,
} from '../lib/billing-expr'
import { parseTags } from '../lib/filters'
import { isTokenBasedModel } from '../lib/model-helpers'
import { formatPrice, formatRequestPrice } from '../lib/price'
import type { PricingModel, TokenUnit } from '../types'
export interface ModelRowProps {
model: PricingModel
onClick: () => void
priceRate?: number
usdExchangeRate?: number
tokenUnit?: TokenUnit
showRechargePrice?: boolean
}
interface DynamicPricingHints {
tierCount: number
hasTimeCondition: boolean
hasRequestCondition: boolean
}
/**
* Extract at-a-glance hints from a tiered billing expression.
*
* The full breakdown lives in `DynamicPricingBreakdown`; here we only need a
* minimal summary (tier count + condition presence) so that users scanning
* the list can tell *what kind* of dynamic pricing applies before clicking
* through to the model details page.
*/
function summarizeTieredExpr(
expr: string | null | undefined
): DynamicPricingHints {
if (!expr) {
return { tierCount: 0, hasTimeCondition: false, hasRequestCondition: false }
}
const split = splitBillingExprAndRequestRules(expr)
const tiers = parseTiersFromExpr(split.billingExpr)
const ruleGroups = tryParseRequestRuleExpr(split.requestRuleExpr || '') || []
let hasTimeCondition = false
let hasRequestCondition = false
for (const group of ruleGroups) {
for (const condition of group.conditions) {
if (condition.source === SOURCE_TIME) {
hasTimeCondition = true
} else {
hasRequestCondition = true
}
}
}
return {
tierCount: tiers.length,
hasTimeCondition,
hasRequestCondition,
}
}
function PriceLabel(props: { label: string; value: string; muted?: boolean }) {
return (
<div className='flex items-baseline justify-end gap-2'>
<span
className={cn(
'text-[11px]',
props.muted ? 'text-muted-foreground/40' : 'text-muted-foreground/60'
)}
>
{props.label}
</span>
<span
className={cn(
'font-mono text-sm tabular-nums',
props.muted
? 'text-muted-foreground'
: 'text-foreground font-semibold'
)}
>
{props.value}
</span>
</div>
)
}
export const ModelRow = memo(function ModelRow(props: ModelRowProps) {
const { t } = useTranslation()
const model = props.model
const priceRate = props.priceRate ?? 1
const usdExchangeRate = props.usdExchangeRate ?? 1
const tokenUnit = props.tokenUnit ?? DEFAULT_TOKEN_UNIT
const showRechargePrice = props.showRechargePrice ?? false
const isTokenBased = isTokenBasedModel(model)
const vendorIcon = model.vendor_icon
? getLobeIcon(model.vendor_icon, 20)
: null
const tags = parseTags(model.tags)
const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
const hasCachedPrice = isTokenBased && model.cache_ratio != null
const isDynamicPricing =
model.billing_mode === 'tiered_expr' && Boolean(model.billing_expr)
const dynamicHints = useMemo(
() => (isDynamicPricing ? summarizeTieredExpr(model.billing_expr) : null),
[isDynamicPricing, model.billing_expr]
)
return (
<button
type='button'
onClick={props.onClick}
className='group hover:bg-muted/40 w-full border-b text-left transition-colors last:border-b-0'
>
<div className='flex items-start gap-3.5 px-4 py-3.5 sm:gap-4 sm:px-5 sm:py-4'>
<div className='hidden shrink-0 pt-0.5 sm:block'>
{vendorIcon || (
<div className='bg-muted text-muted-foreground flex size-5 items-center justify-center rounded text-[10px] font-bold'>
{model.model_name?.charAt(0).toUpperCase() || '?'}
</div>
)}
</div>
<div className='min-w-0 flex-1'>
<div className='flex items-center gap-2'>
<span className='shrink-0 sm:hidden'>{vendorIcon}</span>
<h3 className='text-foreground truncate font-mono text-sm font-semibold'>
{model.model_name}
</h3>
</div>
<div className='text-muted-foreground mt-0.5 flex items-center gap-1.5 text-xs'>
{model.vendor_name && <span>{model.vendor_name}</span>}
{model.vendor_name && (
<span className='text-muted-foreground/30'>·</span>
)}
<span className='text-muted-foreground/60'>
{isTokenBased ? t('Token-based') : t('Per Request')}
</span>
{model.supported_endpoint_types &&
model.supported_endpoint_types.length > 0 && (
<>
<span className='text-muted-foreground/30'>·</span>
<span className='text-muted-foreground/50'>
{model.supported_endpoint_types.slice(0, 2).join(', ')}
{model.supported_endpoint_types.length > 2 &&
` +${model.supported_endpoint_types.length - 2}`}
</span>
</>
)}
{isDynamicPricing && (
<>
<span className='text-muted-foreground/30'>·</span>
<span className='rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-500/20 dark:text-amber-300'>
{t('Dynamic Pricing')}
</span>
{dynamicHints && dynamicHints.tierCount > 1 && (
<span className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] font-medium'>
{t('{{count}} tiers', { count: dynamicHints.tierCount })}
</span>
)}
{dynamicHints?.hasTimeCondition && (
<span className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] font-medium'>
{t('Time-based')}
</span>
)}
{dynamicHints?.hasRequestCondition && (
<span className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] font-medium'>
{t('Request-based')}
</span>
)}
</>
)}
</div>
{model.description && (
<p className='text-muted-foreground/60 mt-1 line-clamp-1 text-xs leading-relaxed'>
{model.description}
</p>
)}
{tags.length > 0 && (
<div className='mt-1.5 flex flex-wrap gap-1'>
{tags.slice(0, 4).map((tag) => (
<span
key={tag}
className='bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] font-medium'
>
{tag}
</span>
))}
{tags.length > 4 && (
<span className='text-muted-foreground/40 self-center text-[10px]'>
+{tags.length - 4}
</span>
)}
</div>
)}
</div>
<div className='shrink-0 text-right'>
{isTokenBased ? (
<div className='grid gap-0.5'>
<PriceLabel
label={t('Input')}
value={formatPrice(
model,
'input',
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate
)}
/>
{hasCachedPrice && (
<PriceLabel
label={t('Cached')}
value={formatPrice(
model,
'cache',
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate
)}
muted
/>
)}
<PriceLabel
label={t('Output')}
value={formatPrice(
model,
'output',
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate
)}
/>
<span className='text-muted-foreground/40 text-[10px]'>
/ {tokenUnitLabel} tokens
</span>
</div>
) : (
<div>
<span className='text-foreground text-sm font-semibold tabular-nums'>
{formatRequestPrice(
model,
showRechargePrice,
priceRate,
usdExchangeRate
)}
</span>
<div className='text-muted-foreground/40 text-[10px]'>
/ {t('request')}
</div>
</div>
)}
</div>
<ChevronRight className='text-muted-foreground/20 group-hover:text-muted-foreground/50 mt-1.5 hidden size-4 shrink-0 transition-colors sm:block' />
</div>
</button>
)
})
web/default/src/features/pricing/components/pricing-columns.tsx
...@@ -13,6 +13,10 @@ import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants' ...@@ -13,6 +13,10 @@ import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
import { parseTags } from '../lib/filters' import { parseTags } from '../lib/filters'
import { isTokenBasedModel } from '../lib/model-helpers' import { isTokenBasedModel } from '../lib/model-helpers'
import { import {
getDynamicDisplayGroupRatio,
getDynamicPricingSummary,
} from '../lib/dynamic-price'
import {
formatPrice, formatPrice,
formatRequestPrice, formatRequestPrice,
stripTrailingZeros, stripTrailingZeros,
...@@ -137,6 +141,63 @@ export function usePricingColumns( ...@@ -137,6 +141,63 @@ export function usePricingColumns(
), ),
cell: ({ row }) => { cell: ({ row }) => {
const model = row.original const model = row.original
const dynamicSummary = getDynamicPricingSummary(model, {
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate,
groupRatioMultiplier: getDynamicDisplayGroupRatio(model),
})
if (dynamicSummary) {
if (dynamicSummary.isSpecialExpression) {
return (
<div className='min-w-[200px] max-w-[320px]'>
<div className='text-amber-700 text-xs font-medium dark:text-amber-300'>
{t('Special billing expression')}
</div>
<div className='text-muted-foreground text-[11px]'>
{t('Unable to parse structured pricing')}
</div>
<code className='text-muted-foreground/70 mt-1 line-clamp-2 block break-all font-mono text-[10px] leading-relaxed'>
{dynamicSummary.rawExpression}
</code>
</div>
)
}
const primaryEntries = dynamicSummary.primaryEntries.slice(0, 2)
if (primaryEntries.length === 0) {
return (
<span className='text-muted-foreground text-xs'>
{t('Dynamic Pricing')}
</span>
)
}
return (
<div className='min-w-[180px]'>
<span className='font-mono text-sm tabular-nums'>
{primaryEntries.map((entry, index) => (
<span key={entry.key}>
{index > 0 && (
<span className='text-muted-foreground/40 mx-1'>/</span>
)}
{stripTrailingZeros(entry.formatted)}
</span>
))}
</span>
<div className='text-muted-foreground/50 text-[10px]'>
/ {tokenUnitLabel} tokens
{dynamicSummary.tierCount > 1 &&
` · ${t('{{count}} tiers', {
count: dynamicSummary.tierCount,
})}`}
</div>
</div>
)
}
const isTokenBased = isTokenBasedModel(model) const isTokenBased = isTokenBasedModel(model)
if (isTokenBased) { if (isTokenBased) {
...@@ -204,6 +265,42 @@ export function usePricingColumns( ...@@ -204,6 +265,42 @@ export function usePricingColumns(
header: t('Cached'), header: t('Cached'),
cell: ({ row }) => { cell: ({ row }) => {
const model = row.original const model = row.original
const dynamicSummary = getDynamicPricingSummary(model, {
tokenUnit,
showRechargePrice,
priceRate,
usdExchangeRate,
groupRatioMultiplier: getDynamicDisplayGroupRatio(model),
})
if (dynamicSummary) {
if (dynamicSummary.isSpecialExpression) {
return (
<span className='text-muted-foreground/50 text-xs'>
{t('Special billing expression')}
</span>
)
}
const cacheEntry = dynamicSummary.entries.find(
(entry) => entry.field === 'cacheReadPrice'
)
if (!cacheEntry) {
return <span className='text-muted-foreground/30 text-xs'>—</span>
}
return (
<div className='min-w-[80px]'>
<span className='font-mono text-sm tabular-nums'>
{stripTrailingZeros(cacheEntry.formatted)}
</span>
<div className='text-muted-foreground/50 text-[10px]'>
/ {tokenUnitLabel}
</div>
</div>
)
}
const isTokenBased = isTokenBasedModel(model) const isTokenBased = isTokenBasedModel(model)
if (!isTokenBased || model.cache_ratio == null) { if (!isTokenBased || model.cache_ratio == null) {
......
web/default/src/features/pricing/components/pricing-sidebar.tsx 0 → 100644
import type { ReactNode } from 'react'
import { ChevronDown, RotateCcw } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { getLobeIcon } from '@/lib/lobe-icon'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import {
ENDPOINT_TYPES,
FILTER_ALL,
QUOTA_TYPES,
getEndpointTypeLabels,
getQuotaTypeLabels,
} from '../constants'
import { parseTags } from '../lib/filters'
import type { PricingModel, PricingVendor } from '../types'
type FilterOption = {
value: string
label: string
count?: number
suffix?: string
icon?: ReactNode
}
type FilterSectionProps = {
title: string
value: string
options: FilterOption[]
onChange: (value: string) => void
}
export interface PricingSidebarProps {
quotaTypeFilter: string
endpointTypeFilter: string
vendorFilter: string
groupFilter: string
tagFilter: string
onQuotaTypeChange: (value: string) => void
onEndpointTypeChange: (value: string) => void
onVendorChange: (value: string) => void
onGroupChange: (value: string) => void
onTagChange: (value: string) => void
vendors: PricingVendor[]
groups: string[]
groupRatios?: Record<string, number>
tags: string[]
models: PricingModel[]
hasActiveFilters: boolean
onClearFilters: () => void
className?: string
}
function countBy(
models: PricingModel[],
predicate: (model: PricingModel) => boolean
): number {
return models.reduce((count, model) => count + (predicate(model) ? 1 : 0), 0)
}
function formatGroupRatio(ratio: number | undefined): string | undefined {
if (ratio == null) return undefined
const formatted = Number.isInteger(ratio)
? ratio.toString()
: ratio.toFixed(3).replace(/0+$/, '').replace(/\.$/, '')
return `x${formatted}`
}
function FilterChip(props: {
option: FilterOption
active: boolean
onClick: () => void
}) {
return (
<button
type='button'
onClick={props.onClick}
className={cn(
'group inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium transition-all',
props.active
? 'border-foreground/30 bg-foreground/5 text-foreground shadow-sm'
: 'border-border/70 bg-background text-muted-foreground hover:border-border hover:bg-muted/50 hover:text-foreground'
)}
title={props.option.label}
>
{props.option.icon && <span className='shrink-0'>{props.option.icon}</span>}
<span className='truncate'>{props.option.label}</span>
{(props.option.suffix || props.option.count != null) && (
<span
className={cn(
'rounded-full px-1.5 py-0.5 text-[10px]',
props.active
? 'bg-background text-foreground'
: 'bg-muted text-muted-foreground'
)}
>
{props.option.suffix ?? props.option.count}
</span>
)}
</button>
)
}
function FilterSection(props: FilterSectionProps) {
return (
<Collapsible defaultOpen className='border-border/70 border-b pb-3 last:border-b-0'>
<CollapsibleTrigger className='group flex w-full items-center justify-between py-2.5 text-left'>
<span className='text-foreground text-sm font-semibold'>
{props.title}
</span>
<ChevronDown className='text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180' />
</CollapsibleTrigger>
<CollapsibleContent>
<div className='flex flex-wrap gap-1.5'>
{props.options.map((option) => (
<FilterChip
key={option.value}
option={option}
active={props.value === option.value}
onClick={() => props.onChange(option.value)}
/>
))}
</div>
</CollapsibleContent>
</Collapsible>
)
}
export function PricingSidebar(props: PricingSidebarProps) {
const { t } = useTranslation()
const quotaTypeLabels = getQuotaTypeLabels(t)
const endpointTypeLabels = getEndpointTypeLabels(t)
const vendorOptions: FilterOption[] = [
{
value: FILTER_ALL,
label: t('All Vendors'),
count: props.models.length,
},
...props.vendors
.map((vendor) => ({
value: vendor.name,
label: vendor.name,
count: countBy(
props.models,
(model) => model.vendor_name === vendor.name
),
icon: vendor.icon ? getLobeIcon(vendor.icon, 14) : undefined,
}))
.filter((vendor) => vendor.count > 0),
]
const groupOptions: FilterOption[] = [
{
value: FILTER_ALL,
label: t('All Groups'),
},
...props.groups.map((group) => ({
value: group,
label: group,
suffix: formatGroupRatio(props.groupRatios?.[group]),
})),
]
const quotaOptions: FilterOption[] = [
{
value: QUOTA_TYPES.ALL,
label: quotaTypeLabels[QUOTA_TYPES.ALL],
count: props.models.length,
},
{
value: QUOTA_TYPES.TOKEN,
label: quotaTypeLabels[QUOTA_TYPES.TOKEN],
count: countBy(props.models, (model) => model.quota_type === 0),
},
{
value: QUOTA_TYPES.REQUEST,
label: quotaTypeLabels[QUOTA_TYPES.REQUEST],
count: countBy(props.models, (model) => model.quota_type === 1),
},
]
const tagOptions: FilterOption[] = [
{
value: FILTER_ALL,
label: t('All Tags'),
count: props.models.length,
},
...props.tags.map((tag) => ({
value: tag,
label: tag,
count: countBy(props.models, (model) =>
parseTags(model.tags)
.map((item) => item.toLowerCase())
.includes(tag.toLowerCase())
),
})),
]
const endpointOptions: FilterOption[] = [
{
value: ENDPOINT_TYPES.ALL,
label: endpointTypeLabels[ENDPOINT_TYPES.ALL],
count: props.models.length,
},
...Object.entries(endpointTypeLabels)
.filter(([value]) => value !== ENDPOINT_TYPES.ALL)
.map(([value, label]) => ({
value,
label,
count: countBy(props.models, (model) =>
model.supported_endpoint_types?.includes(value) ?? false
),
})),
]
return (
<aside
className={cn(
'rounded-xl border p-3',
props.className
)}
>
<div className='mb-2.5 flex items-center justify-between gap-2'>
<div>
<h2 className='text-foreground text-sm font-bold'>{t('Filter')}</h2>
<p className='text-muted-foreground mt-1 text-xs'>
{t('Refine models by provider, group, type, and tags.')}
</p>
</div>
<Button
type='button'
variant='ghost'
size='sm'
onClick={props.onClearFilters}
disabled={!props.hasActiveFilters}
className='h-7 gap-1.5 px-2 text-xs'
>
<RotateCcw className='size-3.5' />
{t('Reset')}
</Button>
</div>
{props.hasActiveFilters && (
<Badge variant='secondary' className='mb-3'>
{t('Filters active')}
</Badge>
)}
<div className='space-y-1'>
<FilterSection
title={t('Groups')}
value={props.groupFilter}
options={groupOptions}
onChange={props.onGroupChange}
/>
<FilterSection
title={t('All Vendors')}
value={props.vendorFilter}
options={vendorOptions}
onChange={props.onVendorChange}
/>
<FilterSection
title={t('Model Tags')}
value={props.tagFilter}
options={tagOptions}
onChange={props.onTagChange}
/>
<FilterSection
title={t('Pricing Type')}
value={props.quotaTypeFilter}
options={quotaOptions}
onChange={props.onQuotaTypeChange}
/>
<FilterSection
title={t('Endpoint Type')}
value={props.endpointTypeFilter}
options={endpointOptions}
onChange={props.onEndpointTypeChange}
/>
</div>
</aside>
)
}
web/default/src/features/pricing/components/pricing-table.tsx
import { useState, useCallback } from 'react' import { useState, useCallback } from 'react'
import { useNavigate } from '@tanstack/react-router'
import { import {
flexRender, flexRender,
getCoreRowModel, getCoreRowModel,
...@@ -29,11 +28,11 @@ export interface PricingTableProps { ...@@ -29,11 +28,11 @@ export interface PricingTableProps {
usdExchangeRate?: number usdExchangeRate?: number
tokenUnit?: TokenUnit tokenUnit?: TokenUnit
showRechargePrice?: boolean showRechargePrice?: boolean
onModelClick?: (modelName: string) => void
} }
export function PricingTable(props: PricingTableProps) { export function PricingTable(props: PricingTableProps) {
const { t } = useTranslation() const { t } = useTranslation()
const navigate = useNavigate({ from: '/pricing/' })
const { const {
models, models,
isLoading = false, isLoading = false,
...@@ -41,6 +40,7 @@ export function PricingTable(props: PricingTableProps) { ...@@ -41,6 +40,7 @@ export function PricingTable(props: PricingTableProps) {
usdExchangeRate = 1, usdExchangeRate = 1,
tokenUnit = DEFAULT_TOKEN_UNIT, tokenUnit = DEFAULT_TOKEN_UNIT,
showRechargePrice = false, showRechargePrice = false,
onModelClick,
} = props } = props
const [pagination, setPagination] = useState<PaginationState>({ const [pagination, setPagination] = useState<PaginationState>({
...@@ -68,13 +68,9 @@ export function PricingTable(props: PricingTableProps) { ...@@ -68,13 +68,9 @@ export function PricingTable(props: PricingTableProps) {
const handleRowClick = useCallback( const handleRowClick = useCallback(
(model: PricingModel) => { (model: PricingModel) => {
navigate({ onModelClick?.(model.model_name)
to: '/pricing/$modelId',
params: { modelId: model.model_name },
search: (prev) => prev,
})
}, },
[navigate] [onModelClick]
) )
return ( return (
......
web/default/src/features/pricing/components/pricing-toolbar.tsx 0 → 100644
import { useCallback, useState } from 'react'
import {
ArrowUpDown,
Check,
Filter,
Grid2X2,
Table2,
} from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from '@/components/ui/sheet'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import {
VIEW_MODES,
getSortLabels,
type SortOption,
type ViewMode,
} from '../constants'
import type { PricingModel, PricingVendor, TokenUnit } from '../types'
import { PricingSidebar } from './pricing-sidebar'
type SegmentOption = {
value: string
label?: string
icon?: React.ComponentType<{ className?: string }>
tooltip?: string
}
export interface PricingToolbarProps {
filteredCount: number
totalCount?: number
sortBy: string
onSortChange: (value: string) => void
tokenUnit: TokenUnit
onTokenUnitChange: (value: TokenUnit) => void
showRechargePrice: boolean
onRechargePriceChange: (value: boolean) => void
viewMode: ViewMode
onViewModeChange: (value: ViewMode) => void
quotaTypeFilter: string
endpointTypeFilter: string
vendorFilter: string
groupFilter: string
tagFilter: string
onQuotaTypeChange: (value: string) => void
onEndpointTypeChange: (value: string) => void
onVendorChange: (value: string) => void
onGroupChange: (value: string) => void
onTagChange: (value: string) => void
vendors: PricingVendor[]
groups: string[]
groupRatios?: Record<string, number>
tags: string[]
models: PricingModel[]
hasActiveFilters: boolean
activeFilterCount: number
onClearFilters: () => void
}
function SegmentedControl(props: {
options: SegmentOption[]
value: string
onChange: (value: string) => void
ariaLabel: string
}) {
return (
<div
role='group'
aria-label={props.ariaLabel}
className='bg-muted/60 inline-flex h-8 items-center rounded-md border p-0.5'
>
{props.options.map((option) => {
const Icon = option.icon
const isActive = option.value === props.value
const button = (
<button
key={option.value}
type='button'
onClick={() => props.onChange(option.value)}
aria-pressed={isActive}
className={cn(
'inline-flex h-full items-center justify-center rounded-[5px] text-xs font-medium transition-all',
Icon && !option.label ? 'w-7' : 'gap-1.5 px-3',
isActive
? 'bg-foreground text-background shadow-sm'
: 'text-muted-foreground hover:text-foreground'
)}
>
{Icon && <Icon className='size-3.5' />}
{option.label}
</button>
)
if (!option.tooltip) {
return button
}
return (
<Tooltip key={option.value}>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent side='bottom' className='text-xs'>
{option.tooltip}
</TooltipContent>
</Tooltip>
)
})}
</div>
)
}
export function PricingToolbar(props: PricingToolbarProps) {
const { t } = useTranslation()
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
const sortLabels = getSortLabels(t)
const handleTokenUnitChange = useCallback(
(value: string) => props.onTokenUnitChange(value as TokenUnit),
[props]
)
const handleViewModeChange = useCallback(
(value: string) => props.onViewModeChange(value as ViewMode),
[props]
)
const handleRechargePriceChange = useCallback(
(value: string) => props.onRechargePriceChange(value === 'recharge'),
[props]
)
return (
<div className='rounded-xl border p-3'>
<div className='flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between'>
<div className='flex items-center gap-2'>
<Button
type='button'
variant='outline'
size='sm'
onClick={() => setMobileFiltersOpen(true)}
className='gap-1.5 xl:hidden'
>
<Filter className='size-4' />
{t('Filter')}
{props.activeFilterCount > 0 && (
<Badge className='ml-0.5 size-5 justify-center rounded-full p-0 text-[10px]'>
{props.activeFilterCount}
</Badge>
)}
</Button>
<div className='text-muted-foreground flex items-baseline gap-1 text-sm'>
<span className='text-foreground font-semibold tabular-nums'>
{props.filteredCount.toLocaleString()}
</span>
<span>
{props.filteredCount === 1 ? t('model') : t('models')}
</span>
{props.hasActiveFilters && props.totalCount && (
<span className='text-muted-foreground/60 text-xs'>
/ {props.totalCount.toLocaleString()}
</span>
)}
</div>
</div>
<div className='flex flex-wrap items-center gap-2'>
<div className='hidden items-center gap-2 sm:flex'>
<SegmentedControl
options={[
{ value: 'standard', label: t('Standard') },
{ value: 'recharge', label: t('Recharge') },
]}
value={props.showRechargePrice ? 'recharge' : 'standard'}
onChange={handleRechargePriceChange}
ariaLabel={t('Price display mode')}
/>
<SegmentedControl
options={[
{ value: 'M', label: '/1M' },
{ value: 'K', label: '/1K' },
]}
value={props.tokenUnit}
onChange={handleTokenUnitChange}
ariaLabel={t('Token unit')}
/>
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
type='button'
variant='outline'
size='sm'
className='h-8 gap-1.5 px-3 text-xs'
>
<ArrowUpDown className='size-3.5' />
<span>
{sortLabels[props.sortBy as SortOption] || t('Sort')}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-44'>
{Object.entries(sortLabels).map(([value, label]) => (
<DropdownMenuItem
key={value}
onClick={() => props.onSortChange(value)}
className='gap-2'
>
<Check
className={cn(
'size-4 shrink-0',
props.sortBy === value ? 'opacity-100' : 'opacity-0'
)}
/>
{label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<SegmentedControl
options={[
{
value: VIEW_MODES.CARD,
icon: Grid2X2,
tooltip: t('Card view'),
},
{
value: VIEW_MODES.TABLE,
icon: Table2,
tooltip: t('Table view'),
},
]}
value={props.viewMode}
onChange={handleViewModeChange}
ariaLabel={t('View mode')}
/>
</div>
</div>
<Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
<SheetContent
side='right'
className='flex w-full flex-col overflow-hidden p-0 sm:max-w-md'
>
<SheetHeader className='border-b px-6 py-4'>
<SheetTitle>{t('Filter')}</SheetTitle>
<SheetDescription>
{t('Filter models by provider, group, type, endpoint, and tags.')}
</SheetDescription>
</SheetHeader>
<div className='flex-1 overflow-y-auto p-4'>
<PricingSidebar
quotaTypeFilter={props.quotaTypeFilter}
endpointTypeFilter={props.endpointTypeFilter}
vendorFilter={props.vendorFilter}
groupFilter={props.groupFilter}
tagFilter={props.tagFilter}
onQuotaTypeChange={props.onQuotaTypeChange}
onEndpointTypeChange={props.onEndpointTypeChange}
onVendorChange={props.onVendorChange}
onGroupChange={props.onGroupChange}
onTagChange={props.onTagChange}
vendors={props.vendors}
groups={props.groups}
groupRatios={props.groupRatios}
tags={props.tags}
models={props.models}
hasActiveFilters={props.hasActiveFilters}
onClearFilters={props.onClearFilters}
className='border-0 bg-transparent p-0 shadow-none'
/>
</div>
</SheetContent>
</Sheet>
</div>
)
}
web/default/src/features/pricing/components/search-bar.tsx
...@@ -40,9 +40,9 @@ export function SearchBar(props: SearchBarProps) { ...@@ -40,9 +40,9 @@ export function SearchBar(props: SearchBarProps) {
value={props.value} value={props.value}
onChange={(e) => props.onChange(e.target.value)} onChange={(e) => props.onChange(e.target.value)}
className={cn( className={cn(
'border-border/60 bg-muted/30 placeholder:text-muted-foreground/50', 'border-border/60 bg-background placeholder:text-muted-foreground/50',
'hover:border-border hover:bg-muted/50', 'hover:border-border',
'focus:bg-background focus:border-primary/50 focus:ring-primary/20 focus:ring-2', 'focus:border-primary/50 focus:ring-primary/20 focus:ring-2',
'h-10 w-full rounded-lg border pr-16 pl-10 text-sm transition-all outline-none' 'h-10 w-full rounded-lg border pr-16 pl-10 text-sm transition-all outline-none'
)} )}
aria-label={t('Search models')} aria-label={t('Search models')}
......
web/default/src/features/pricing/components/virtual-model-list.tsx deleted 100644 → 0
import { useWindowVirtualizer } from '@tanstack/react-virtual'
import { DEFAULT_TOKEN_UNIT } from '../constants'
import type { PricingModel, TokenUnit } from '../types'
import { ModelRow } from './model-row'
export interface VirtualModelListProps {
models: PricingModel[]
onModelClick: (modelName: string) => void
estimateSize?: number
overscan?: number
priceRate?: number
usdExchangeRate?: number
tokenUnit?: TokenUnit
showRechargePrice?: boolean
}
export function VirtualModelList(props: VirtualModelListProps) {
const estimateSize = props.estimateSize ?? 130
const overscan = props.overscan ?? 5
const tokenUnit = props.tokenUnit ?? DEFAULT_TOKEN_UNIT
const virtualizer = useWindowVirtualizer({
count: props.models.length,
estimateSize: () => estimateSize,
overscan,
measureElement:
typeof window !== 'undefined' && !navigator.userAgent.includes('Firefox')
? (element) => element?.getBoundingClientRect().height
: undefined,
})
const items = virtualizer.getVirtualItems()
if (props.models.length === 0) {
return null
}
return (
<div
className='overflow-hidden rounded-lg border'
style={{ height: virtualizer.getTotalSize(), position: 'relative' }}
>
{items.map((virtualItem) => {
const model = props.models[virtualItem.index]
const key =
model.id ??
`${model.vendor_name}-${model.model_name}-${virtualItem.index}`
return (
<div
key={key}
data-index={virtualItem.index}
ref={virtualizer.measureElement}
className='absolute top-0 left-0 w-full'
style={{ transform: `translateY(${virtualItem.start}px)` }}
>
<ModelRow
model={model}
priceRate={props.priceRate}
usdExchangeRate={props.usdExchangeRate}
tokenUnit={tokenUnit}
showRechargePrice={props.showRechargePrice}
onClick={() => props.onModelClick(model.model_name || '')}
/>
</div>
)
})}
</div>
)
}
web/default/src/features/pricing/constants.ts
...@@ -116,7 +116,7 @@ export const DEFAULT_TOKEN_UNIT: TokenUnit = 'M' ...@@ -116,7 +116,7 @@ export const DEFAULT_TOKEN_UNIT: TokenUnit = 'M'
/** View mode options */ /** View mode options */
export const VIEW_MODES = { export const VIEW_MODES = {
LIST: 'list', CARD: 'card',
TABLE: 'table', TABLE: 'table',
} as const } as const
......
web/default/src/features/pricing/hooks/use-filters.ts
import { useMemo, useCallback } from 'react' import { useMemo, useCallback, useState } from 'react'
import { useSearch, useNavigate } from '@tanstack/react-router' import { useSearch } from '@tanstack/react-router'
import { import {
FILTER_ALL, FILTER_ALL,
SORT_OPTIONS, SORT_OPTIONS,
...@@ -12,88 +12,114 @@ import { ...@@ -12,88 +12,114 @@ import {
import { filterAndSortModels, extractAllTags } from '../lib/filters' import { filterAndSortModels, extractAllTags } from '../lib/filters'
import type { PricingModel, TokenUnit } from '../types' import type { PricingModel, TokenUnit } from '../types'
type FilterState = {
search?: string
sort?: string
vendor?: string
group?: string
quotaType?: string
endpointType?: string
tag?: string
tokenUnit?: TokenUnit
view?: ViewMode
rechargePrice?: boolean
}
function normalizeViewMode(value: unknown): ViewMode {
if (value === VIEW_MODES.TABLE) {
return VIEW_MODES.TABLE
}
return VIEW_MODES.CARD
}
export function useFilters(models: PricingModel[]) { export function useFilters(models: PricingModel[]) {
const search = useSearch({ from: '/pricing/' }) const search = useSearch({ from: '/pricing/' })
const navigate = useNavigate({ from: '/pricing/' }) const [filterState, setFilterState] = useState<FilterState>(() => ({
search: search.search,
sort: search.sort,
vendor: search.vendor,
group: search.group,
quotaType: search.quotaType,
endpointType: search.endpointType,
tag: search.tag,
tokenUnit: search.tokenUnit,
view: search.view,
rechargePrice: search.rechargePrice,
}))
const searchInput = search.search || '' const searchInput = filterState.search || ''
const sortBy = search.sort || SORT_OPTIONS.NAME const sortBy = filterState.sort || SORT_OPTIONS.NAME
const vendorFilter = search.vendor || FILTER_ALL const vendorFilter = filterState.vendor || FILTER_ALL
const groupFilter = search.group || FILTER_ALL const groupFilter = filterState.group || FILTER_ALL
const quotaTypeFilter = search.quotaType || QUOTA_TYPES.ALL const quotaTypeFilter = filterState.quotaType || QUOTA_TYPES.ALL
const endpointTypeFilter = search.endpointType || ENDPOINT_TYPES.ALL const endpointTypeFilter = filterState.endpointType || ENDPOINT_TYPES.ALL
const tagFilter = search.tag || FILTER_ALL const tagFilter = filterState.tag || FILTER_ALL
const tokenUnit: TokenUnit = const tokenUnit: TokenUnit =
search.tokenUnit === 'K' ? 'K' : DEFAULT_TOKEN_UNIT filterState.tokenUnit === 'K' ? 'K' : DEFAULT_TOKEN_UNIT
const viewMode: ViewMode = const viewMode = normalizeViewMode(filterState.view)
search.view === 'table' ? VIEW_MODES.TABLE : VIEW_MODES.LIST const showRechargePrice = filterState.rechargePrice === true
const showRechargePrice = search.rechargePrice === true
const updateSearch = useCallback( const updateFilters = useCallback(
(updates: Record<string, unknown>) => { (updates: Record<string, unknown>) => {
navigate({ setFilterState((prev) => {
to: '/pricing' as const, const next: Record<string, unknown> = { ...prev, ...updates }
search: (prev) => { for (const key of Object.keys(next)) {
const next: Record<string, unknown> = { ...prev, ...updates } if (next[key] === undefined || next[key] === null) {
for (const key of Object.keys(next)) { delete next[key]
if (next[key] === undefined || next[key] === null) {
delete next[key]
}
} }
return next }
}, return next as FilterState
replace: true,
}) })
}, },
[navigate] []
) )
const setSearchInput = useCallback( const setSearchInput = useCallback(
(v: string) => updateSearch({ search: v || undefined }), (v: string) => updateFilters({ search: v || undefined }),
[updateSearch] [updateFilters]
) )
const setSortBy = useCallback( const setSortBy = useCallback(
(v: string) => (v: string) =>
updateSearch({ sort: v === SORT_OPTIONS.NAME ? undefined : v }), updateFilters({ sort: v === SORT_OPTIONS.NAME ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setVendorFilter = useCallback( const setVendorFilter = useCallback(
(v: string) => updateSearch({ vendor: v === FILTER_ALL ? undefined : v }), (v: string) => updateFilters({ vendor: v === FILTER_ALL ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setGroupFilter = useCallback( const setGroupFilter = useCallback(
(v: string) => updateSearch({ group: v === FILTER_ALL ? undefined : v }), (v: string) => updateFilters({ group: v === FILTER_ALL ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setQuotaTypeFilter = useCallback( const setQuotaTypeFilter = useCallback(
(v: string) => (v: string) =>
updateSearch({ quotaType: v === QUOTA_TYPES.ALL ? undefined : v }), updateFilters({ quotaType: v === QUOTA_TYPES.ALL ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setEndpointTypeFilter = useCallback( const setEndpointTypeFilter = useCallback(
(v: string) => (v: string) =>
updateSearch({ updateFilters({
endpointType: v === ENDPOINT_TYPES.ALL ? undefined : v, endpointType: v === ENDPOINT_TYPES.ALL ? undefined : v,
}), }),
[updateSearch] [updateFilters]
) )
const setTagFilter = useCallback( const setTagFilter = useCallback(
(v: string) => updateSearch({ tag: v === FILTER_ALL ? undefined : v }), (v: string) => updateFilters({ tag: v === FILTER_ALL ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setTokenUnit = useCallback( const setTokenUnit = useCallback(
(v: TokenUnit) => (v: TokenUnit) =>
updateSearch({ tokenUnit: v === DEFAULT_TOKEN_UNIT ? undefined : v }), updateFilters({ tokenUnit: v === DEFAULT_TOKEN_UNIT ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setViewMode = useCallback( const setViewMode = useCallback(
(v: ViewMode) => (v: ViewMode) =>
updateSearch({ view: v === VIEW_MODES.LIST ? undefined : v }), updateFilters({ view: v === VIEW_MODES.CARD ? undefined : v }),
[updateSearch] [updateFilters]
) )
const setShowRechargePrice = useCallback( const setShowRechargePrice = useCallback(
(v: boolean) => updateSearch({ rechargePrice: v || undefined }), (v: boolean) => updateFilters({ rechargePrice: v || undefined }),
[updateSearch] [updateFilters]
) )
const availableTags = useMemo(() => { const availableTags = useMemo(() => {
...@@ -145,18 +171,18 @@ export function useFilters(models: PricingModel[]) { ...@@ -145,18 +171,18 @@ export function useFilters(models: PricingModel[]) {
) )
const clearFilters = useCallback(() => { const clearFilters = useCallback(() => {
updateSearch({ updateFilters({
vendor: undefined, vendor: undefined,
group: undefined, group: undefined,
quotaType: undefined, quotaType: undefined,
endpointType: undefined, endpointType: undefined,
tag: undefined, tag: undefined,
}) })
}, [updateSearch]) }, [updateFilters])
const clearSearch = useCallback(() => { const clearSearch = useCallback(() => {
updateSearch({ search: undefined }) updateFilters({ search: undefined })
}, [updateSearch]) }, [updateFilters])
return { return {
searchInput, searchInput,
......
web/default/src/features/pricing/lib/dynamic-price.ts 0 → 100644
import { formatBillingCurrencyFromUSD } from '@/lib/currency'
import { TOKEN_UNIT_DIVISORS } from '../constants'
import {
BILLING_PRICING_VARS,
parseTiersFromExpr,
splitBillingExprAndRequestRules,
tryParseRequestRuleExpr,
type BillingVar,
type ParsedTier,
} from './billing-expr'
import type { PricingModel, TokenUnit } from '../types'
type DynamicPriceOptions = {
tokenUnit: TokenUnit
showRechargePrice?: boolean
priceRate?: number
usdExchangeRate?: number
groupRatioMultiplier?: number
}
export type DynamicPriceEntry = {
key: string
field: string
label: string
shortLabel: string
value: number
formatted: string
variable: BillingVar
}
export type DynamicPricingSummary = {
tiers: ParsedTier[]
tier: ParsedTier | null
tierCount: number
hasRequestRules: boolean
isSpecialExpression: boolean
rawExpression: string
entries: DynamicPriceEntry[]
primaryEntries: DynamicPriceEntry[]
secondaryEntries: DynamicPriceEntry[]
}
const PRIMARY_DYNAMIC_FIELDS = new Set(['inputPrice', 'outputPrice'])
export function isDynamicPricingModel(model: PricingModel): boolean {
return model.billing_mode === 'tiered_expr' && Boolean(model.billing_expr)
}
export function getDynamicDisplayGroupRatio(model: PricingModel): number {
const groups = Array.isArray(model.enable_groups) ? model.enable_groups : []
const ratios = model.group_ratio || {}
if (groups.length === 0) return 1
let minRatio = Number.POSITIVE_INFINITY
for (const group of groups) {
const ratio = ratios[group]
if (ratio !== undefined && ratio < minRatio) {
minRatio = ratio
}
}
return minRatio === Number.POSITIVE_INFINITY ? 1 : minRatio
}
function applyRechargeRate(
price: number,
showWithRecharge: boolean,
priceRate: number,
usdExchangeRate: number
): number {
if (!showWithRecharge) return price
return (price * priceRate) / usdExchangeRate
}
export function formatDynamicUnitPrice(
valuePerMillionTokens: number,
options: DynamicPriceOptions
): string {
const groupRatio = options.groupRatioMultiplier ?? 1
const priceRate = options.priceRate ?? 1
const usdExchangeRate = options.usdExchangeRate ?? 1
const priceUSD =
(valuePerMillionTokens * groupRatio) /
TOKEN_UNIT_DIVISORS[options.tokenUnit]
const displayPrice = applyRechargeRate(
priceUSD,
options.showRechargePrice ?? false,
priceRate,
usdExchangeRate
)
return formatBillingCurrencyFromUSD(displayPrice, {
digitsLarge: 4,
digitsSmall: 6,
abbreviate: false,
})
}
export function getDynamicPricingTiers(model: PricingModel): ParsedTier[] {
if (!isDynamicPricingModel(model)) return []
const { billingExpr } = splitBillingExprAndRequestRules(model.billing_expr || '')
return parseTiersFromExpr(billingExpr)
}
export function hasDynamicRequestRules(model: PricingModel): boolean {
if (!isDynamicPricingModel(model)) return false
const { requestRuleExpr } = splitBillingExprAndRequestRules(
model.billing_expr || ''
)
return Boolean(tryParseRequestRuleExpr(requestRuleExpr || '')?.length)
}
export function getDynamicPriceEntries(
tier: ParsedTier | null,
options: DynamicPriceOptions
): DynamicPriceEntry[] {
if (!tier) return []
return BILLING_PRICING_VARS.flatMap((variable) => {
if (!variable.field) return []
const value = Number(tier[variable.field])
if (!Number.isFinite(value) || value <= 0) return []
return [
{
key: variable.key,
field: variable.field,
label: variable.label,
shortLabel: variable.shortLabel,
value,
formatted: formatDynamicUnitPrice(value, options),
variable,
},
]
}).sort((a, b) => {
const aPrimary = PRIMARY_DYNAMIC_FIELDS.has(a.field)
const bPrimary = PRIMARY_DYNAMIC_FIELDS.has(b.field)
if (aPrimary !== bPrimary) return aPrimary ? -1 : 1
return 0
})
}
export function getDynamicPricingSummary(
model: PricingModel,
options: DynamicPriceOptions
): DynamicPricingSummary | null {
if (!isDynamicPricingModel(model)) return null
const tiers = getDynamicPricingTiers(model)
const tier = tiers[0] || null
const entries = getDynamicPriceEntries(tier, options)
const rawExpression = model.billing_expr || ''
return {
tiers,
tier,
tierCount: tiers.length,
hasRequestRules: hasDynamicRequestRules(model),
isSpecialExpression: rawExpression.trim().length > 0 && tiers.length === 0,
rawExpression,
entries,
primaryEntries: entries.filter((entry) =>
PRIMARY_DYNAMIC_FIELDS.has(entry.field)
),
secondaryEntries: entries.filter(
(entry) => !PRIMARY_DYNAMIC_FIELDS.has(entry.field)
),
}
}
web/default/src/hooks/use-top-nav-links.ts
...@@ -71,7 +71,7 @@ export function useTopNavLinks(): TopNavLink[] { ...@@ -71,7 +71,7 @@ export function useTopNavLinks(): TopNavLink[] {
const pricing = modules?.pricing const pricing = modules?.pricing
if (pricing && typeof pricing === 'object' && pricing.enabled) { if (pricing && typeof pricing === 'object' && pricing.enabled) {
const disabled = pricing.requireAuth && !isAuthed const disabled = pricing.requireAuth && !isAuthed
links.push({ title: t('Pricing'), href: '/pricing', disabled }) links.push({ title: t('Model Square'), href: '/pricing', disabled })
} }
// Docs (supports external links) // Docs (supports external links)
......
web/default/src/routes/pricing/$modelId/index.tsx
...@@ -11,6 +11,7 @@ const modelDetailsSearchSchema = z.object({ ...@@ -11,6 +11,7 @@ const modelDetailsSearchSchema = z.object({
endpointType: z.string().optional(), endpointType: z.string().optional(),
tag: z.string().optional(), tag: z.string().optional(),
tokenUnit: z.enum(['M', 'K']).optional(), tokenUnit: z.enum(['M', 'K']).optional(),
view: z.enum(['card', 'table']).optional().catch(undefined),
rechargePrice: z.boolean().optional(), rechargePrice: z.boolean().optional(),
}) })
......
web/default/src/routes/pricing/index.tsx
...@@ -11,7 +11,7 @@ const pricingSearchSchema = z.object({ ...@@ -11,7 +11,7 @@ const pricingSearchSchema = z.object({
endpointType: z.string().optional(), endpointType: z.string().optional(),
tag: z.string().optional(), tag: z.string().optional(),
tokenUnit: z.enum(['M', 'K']).optional(), tokenUnit: z.enum(['M', 'K']).optional(),
view: z.enum(['list', 'table']).optional(), view: z.enum(['card', 'table']).optional().catch(undefined),
rechargePrice: z.boolean().optional(), rechargePrice: z.boolean().optional(),
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment