dify-1.8.1/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx

import {
  memo,
  useCallback,
} from 'react'
import { RiAddLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { Authorized } from '@/app/components/header/account-setting/model-provider-page/model-auth'
import cn from '@/utils/classnames'
import type {
  Credential,
  CustomConfigurationModelFixedFields,
  CustomModelCredential,
  ModelCredential,
  ModelProvider,
} from '@/app/components/header/account-setting/model-provider-page/declarations'
import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

type AddCredentialInLoadBalancingProps = {
  provider: ModelProvider
  model: CustomModelCredential
  configurationMethod: ConfigurationMethodEnum
  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
  modelCredential: ModelCredential
  onSelectCredential: (credential: Credential) => void
  onUpdate?: (payload?: any, formValues?: Record<string, any>) => void
  onRemove?: (credentialId: string) => void
}
const AddCredentialInLoadBalancing = ({
  provider,
  model,
  configurationMethod,
  modelCredential,
  onSelectCredential,
  onUpdate,
  onRemove,
}: AddCredentialInLoadBalancingProps) => {
  const { t } = useTranslation()
  const {
    available_credentials,
  } = modelCredential
  const isCustomModel = configurationMethod === ConfigurationMethodEnum.customizableModel
  const notAllowCustomCredential = provider.allow_custom_token === false
  const handleUpdate = useCallback((payload?: any, formValues?: Record<string, any>) => {
    onUpdate?.(payload, formValues)
  }, [onUpdate])

  const renderTrigger = useCallback((open?: boolean) => {
    const Item = (
      <div className={cn(
        'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
        open && 'bg-state-base-hover',
      )}>
        <RiAddLine className='mr-2 h-4 w-4' />
        {t('common.modelProvider.auth.addCredential')}
      </div>
    )

    return Item
  }, [t, isCustomModel])

  return (
    <Authorized
      provider={provider}
      renderTrigger={renderTrigger}
      authParams={{
        isModelCredential: isCustomModel,
        mode: ModelModalModeEnum.configModelCredential,
        onUpdate: handleUpdate,
        onRemove,
      }}
      triggerOnlyOpenModal={!available_credentials?.length && !notAllowCustomCredential}
      items={[
        {
          title: isCustomModel ? '' : t('common.modelProvider.auth.apiKeys'),
          model: isCustomModel ? model : undefined,
          credentials: available_credentials ?? [],
        },
      ]}
      showModelTitle={!isCustomModel}
      configurationMethod={configurationMethod}
      currentCustomConfigurationModelFixedFields={isCustomModel ? {
        __model_name: model.model,
        __model_type: model.model_type,
      } : undefined}
      onItemClick={onSelectCredential}
      placement='bottom-start'
      popupTitle={isCustomModel ? t('common.modelProvider.auth.modelCredentials') : ''}
    />
  )
}

export default memo(AddCredentialInLoadBalancing)