dify/web/app/components/billing/usage-info/index.tsx

'use client'
import type { ComponentType, FC } from 'react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Tooltip from '@/app/components/base/tooltip'
import { cn } from '@/utils/classnames'
import { NUM_INFINITE } from '../config'
import ProgressBar from '../progress-bar'

type Props = {
  className?: string
  Icon: ComponentType<{ className?: string }>
  name: string
  tooltip?: string
  usage: number
  total: number
  unit?: string
  unitPosition?: 'inline' | 'suffix'
  resetHint?: string
  resetInDays?: number
  hideIcon?: boolean
  // Props for the 50MB threshold display logic
  storageThreshold?: number
  storageTooltip?: string
  storageTotalDisplay?: string // e.g., "5GB" or "50MB" for formatted display
  isSandboxPlan?: boolean
}

const WARNING_THRESHOLD = 80

const UsageInfo: FC<Props> = ({
  className,
  Icon,
  name,
  tooltip,
  usage,
  total,
  unit,
  unitPosition = 'suffix',
  resetHint,
  resetInDays,
  hideIcon = false,
  storageThreshold = 50,
  storageTooltip,
  storageTotalDisplay,
  isSandboxPlan = false,
}) => {
  const { t } = useTranslation()

  // Special display logic for usage below threshold
  const isBelowThreshold = usage < storageThreshold
  // Sandbox at full capacity (usage >= threshold and it's sandbox plan)
  const isSandboxFull = isSandboxPlan && usage >= storageThreshold

  const percent = usage / total * 100
  const getProgressColor = () => {
    if (percent >= 100)
      return 'bg-components-progress-error-progress'
    if (percent >= WARNING_THRESHOLD)
      return 'bg-components-progress-warning-progress'
    return 'bg-components-progress-bar-progress-solid'
  }
  const color = getProgressColor()
  const isUnlimited = total === NUM_INFINITE
  let totalDisplay: string | number = isUnlimited ? t('plansCommon.unlimited', { ns: 'billing' }) : total
  if (!isUnlimited && unit && unitPosition === 'inline')
    totalDisplay = `${total}${unit}`
  const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
  const resetText = resetHint ?? (typeof resetInDays === 'number' ? t('usagePage.resetsIn', { ns: 'billing', count: resetInDays }) : undefined)

  const renderRightInfo = () => {
    if (resetText) {
      return (
        <div className="system-xs-regular ml-auto flex-1 text-right text-text-tertiary">
          {resetText}
        </div>
      )
    }
    if (showUnit) {
      return (
        <div className="system-xs-medium ml-auto text-text-tertiary">
          {unit}
        </div>
      )
    }
    return null
  }

  // Render usage display
  const renderUsageDisplay = () => {
    // Sandbox user at full capacity
    if (isSandboxFull) {
      return (
        <div className="flex items-center gap-1">
          <span>
            {storageThreshold}
          </span>
          <span className="system-md-regular text-text-quaternary">/</span>
          <span>
            {storageThreshold}
            {' '}
            {unit}
          </span>
        </div>
      )
    }
    // Usage below threshold - show "< 50 MB" or "< 50 / 5GB"
    if (isBelowThreshold) {
      const totalText = storageTotalDisplay || totalDisplay
      return (
        <div className="flex items-center gap-1">
          <span>
            &lt;
            {' '}
            {storageThreshold}
          </span>
          {!isSandboxPlan && (
            <>
              <span className="system-md-regular text-text-quaternary">/</span>
              <span>{totalText}</span>
            </>
          )}
          {isSandboxPlan && <span>{unit}</span>}
        </div>
      )
    }
    // Pro/Team users with usage >= threshold - show actual usage
    const totalText = storageTotalDisplay || totalDisplay
    return (
      <div className="flex items-center gap-1">
        <span>{usage}</span>
        <span className="system-md-regular text-text-quaternary">/</span>
        <span>{totalText}</span>
      </div>
    )
  }

  // Render progress bar with optional tooltip wrapper
  const renderProgressBar = () => {
    const progressBar = (
      <ProgressBar
        percent={isBelowThreshold ? 0 : percent}
        color={isSandboxFull ? 'bg-components-progress-error-progress' : color}
        indeterminate={isBelowThreshold}
      />
    )

    if (storageTooltip) {
      return (
        <Tooltip
          popupContent={(
            <div className="w-[200px]">
              {storageTooltip}
            </div>
          )}
          asChild={false}
        >
          <div className="cursor-default">{progressBar}</div>
        </Tooltip>
      )
    }

    return progressBar
  }

  // Render usage text with optional tooltip wrapper
  const renderUsageWithTooltip = () => {
    const usageDisplay = renderUsageDisplay()

    if (storageTooltip) {
      return (
        <Tooltip
          popupContent={(
            <div className="w-[200px]">
              {storageTooltip}
            </div>
          )}
          asChild={false}
        >
          <div className="cursor-default">{usageDisplay}</div>
        </Tooltip>
      )
    }

    return usageDisplay
  }

  return (
    <div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
      {!hideIcon && Icon && (
        <Icon className="h-4 w-4 text-text-tertiary" />
      )}
      <div className="flex items-center gap-1">
        <div className="system-xs-medium text-text-tertiary">{name}</div>
        {tooltip && (
          <Tooltip
            popupContent={(
              <div className="w-[180px]">
                {tooltip}
              </div>
            )}
          />
        )}
      </div>
      <div className="system-md-semibold flex items-center gap-1 text-text-primary">
        {renderUsageWithTooltip()}
        {renderRightInfo()}
      </div>
      {renderProgressBar()}
    </div>
  )
}
export default React.memo(UsageInfo)