dify/web/app/components/billing/priority-label/index.tsx

import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
import { RiAedFill } from '@remixicon/react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useProviderContext } from '@/context/provider-context'
import { DocumentProcessingPriority, Plan } from '../type'

type PriorityLabelProps = {
  className?: string
}

const PriorityLabel = ({ className }: PriorityLabelProps) => {
  const { t } = useTranslation()
  const { plan } = useProviderContext()

  const priority = useMemo(() => {
    if (plan.type === Plan.sandbox) return DocumentProcessingPriority.standard

    if (plan.type === Plan.professional) return DocumentProcessingPriority.priority

    if (plan.type === Plan.team || plan.type === Plan.enterprise)
      return DocumentProcessingPriority.topPriority

    return DocumentProcessingPriority.standard
  }, [plan])

  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <div
            className={cn(
              'ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] system-2xs-medium text-text-accent-secondary',
              className,
            )}
          />
        }
      >
        {(plan.type === Plan.professional ||
          plan.type === Plan.team ||
          plan.type === Plan.enterprise) && <RiAedFill className="mr-0.5 size-3" />}
        <span>{t(($) => $[`plansCommon.priority.${priority}`], { ns: 'billing' })}</span>
      </TooltipTrigger>
      <TooltipContent>
        <div className="mb-1 text-xs font-semibold text-text-primary">
          {t(($) => $['plansCommon.documentProcessingPriority'], { ns: 'billing' })}:{' '}
          {t(($) => $[`plansCommon.priority.${priority}`], { ns: 'billing' })}
        </div>
        {priority !== DocumentProcessingPriority.topPriority && (
          <div className="text-xs text-text-secondary">
            {t(($) => $['plansCommon.documentProcessingPriorityTip'], { ns: 'billing' })}
          </div>
        )}
      </TooltipContent>
    </Tooltip>
  )
}

export default PriorityLabel