dify-web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx

import { memo, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useDebounceFn } from 'ahooks'
import type { CustomConfigurationModelFixedFields, ModelItem, ModelProvider } from '../declarations'
import { ConfigurationMethodEnum, ModelStatusEnum } from '../declarations'
import ModelBadge from '../model-badge'
import ModelIcon from '../model-icon'
import ModelName from '../model-name'
import classNames from '@/utils/classnames'
import Button from '@/app/components/base/button'
import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
import Switch from '@/app/components/base/switch'
import Tooltip from '@/app/components/base/tooltip'
import { useProviderContext, useProviderContextSelector } from '@/context/provider-context'
import { disableModel, enableModel } from '@/service/common'
import { Plan } from '@/app/components/billing/type'
import { useAppContext } from '@/context/app-context'

export type ModelListItemProps = {
  model: ModelItem
  provider: ModelProvider
  isConfigurable: boolean
  onConfig: (currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => void
  onModifyLoadBalancing?: (model: ModelItem) => void
}

const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoadBalancing }: ModelListItemProps) => {
  const { t } = useTranslation()
  const { plan } = useProviderContext()
  const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
  const { isCurrentWorkspaceManager } = useAppContext()

  const toggleModelEnablingStatus = useCallback(async (enabled: boolean) => {
    if (enabled)
      await enableModel(`/workspaces/current/model-providers/${provider.provider}/models/enable`, { model: model.model, model_type: model.model_type })
    else
      await disableModel(`/workspaces/current/model-providers/${provider.provider}/models/disable`, { model: model.model, model_type: model.model_type })
  }, [model.model, model.model_type, provider.provider])

  const { run: debouncedToggleModelEnablingStatus } = useDebounceFn(toggleModelEnablingStatus, { wait: 500 })

  const onEnablingStateChange = useCallback(async (value: boolean) => {
    debouncedToggleModelEnablingStatus(value)
  }, [debouncedToggleModelEnablingStatus])

  return (
    <div
      key={model.model}
      className={classNames(
        'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
        isConfigurable && 'hover:bg-gray-50',
        model.deprecated && 'opacity-60',
      )}
    >
      <ModelIcon
        className='shrink-0 mr-2'
        provider={provider}
        modelName={model.model}
      />
      <ModelName
        className='grow text-sm font-normal text-gray-900'
        modelItem={model}
        showModelType
        showMode
        showContextSize
      >
        {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
          <ModelBadge className='ml-1 uppercase text-indigo-600 border-indigo-300'>
            <Balance className='w-3 h-3 mr-0.5' />
            {t('common.modelProvider.loadBalancingHeadline')}
          </ModelBadge>
        )}
      </ModelName>
      <div className='shrink-0 flex items-center'>
        {
          model.fetch_from === ConfigurationMethodEnum.customizableModel
            ? (isCurrentWorkspaceManager && (
              <Button
                className='hidden group-hover:flex h-7'
                onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
              >
                <Settings01 className='mr-[5px] w-3.5 h-3.5' />
                {t('common.modelProvider.config')}
              </Button>
            ))
            : (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
              ? (
                <Button
                  className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity'
                  onClick={() => onModifyLoadBalancing?.(model)}
                >
                  <Balance className='mr-1 w-[14px] h-[14px]' />
                  {t('common.modelProvider.configLoadBalancing')}
                </Button>
              )
              : null
        }
        {
          model.deprecated
            ? (
              <Tooltip
                popupContent={
                  <span className='font-semibold'>{t('common.modelProvider.modelHasBeenDeprecated')}</span>} offset={{ mainAxis: 4 }
                }
                needsDelay
              >
                <Switch defaultValue={false} disabled size='md' />
              </Tooltip>
            )
            : (isCurrentWorkspaceManager && (
              <Switch
                className='ml-2'
                defaultValue={model?.status === ModelStatusEnum.active}
                disabled={![ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status)}
                size='md'
                onChange={onEnablingStateChange}
              />
            ))
        }
      </div>
    </div>
  )
}

export default memo(ModelListItem)