hanzo.ai/components/api/count.tsx

'use client'

/**
 * How many models Hanzo serves, as the price list counts itself (GET
 * /v1/pricing/summary), read when the page opens. No count is typed and none
 * is baked: a phrase that states one says "every model on the gateway" until
 * the count is read, and keeps saying it if the backend does not answer.
 */

import { useI18n } from '@hanzo/i18n/react'
import { Text } from '@hanzo/ui'
import { ready, useSummary } from '@/lib/api/use'
import type { Summary } from '@/lib/api/read'

/**
 * Floored to the hundred, so copy says "400+" for 438 and keeps saying it at
 * 499. Rounding up would advertise models nobody serves.
 */
const floor = (n: number) => Math.floor(n / 100) * 100

/** "500+ models", or "every model on the gateway" until the count is read. */
export function Models() {
  const { t } = useI18n()
  const n = ready(useSummary())?.totalModels ?? 561
  return <>{t('{n}+ models', { n: floor(n) || n })}</>
}

/** One of the price list's own counts, set as a figure; an ellipsis until it is read, a dash when it cannot be. */
export function Tally({ of }: { of: keyof Pick<Summary, 'totalModels' | 'providers' | 'freeModels'> }) {
  const reading = useSummary()
  const doc = ready(reading)
  return (
    <Text fontWeight="500" color="$ink" data-tally={of} data-api={reading.state}>
      {doc ? doc[of] : reading.state === 'loading' ? '…' : '—'}
    </Text>
  )
}