trigger.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import type { FC } from 'react'
  2. import { useTranslation } from 'react-i18next'
  3. import { RiArrowDownSLine } from '@remixicon/react'
  4. import type {
  5. Model,
  6. ModelItem,
  7. ModelProvider,
  8. } from '../declarations'
  9. import { MODEL_STATUS_TEXT } from '../declarations'
  10. import { useLanguage } from '../hooks'
  11. import ModelIcon from '../model-icon'
  12. import ModelName from '../model-name'
  13. import cn from '@/utils/classnames'
  14. import { useProviderContext } from '@/context/provider-context'
  15. import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
  16. import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
  17. import Tooltip from '@/app/components/base/tooltip'
  18. export type TriggerProps = {
  19. open?: boolean
  20. disabled?: boolean
  21. currentProvider?: ModelProvider | Model
  22. currentModel?: ModelItem
  23. providerName?: string
  24. modelId?: string
  25. hasDeprecated?: boolean
  26. modelDisabled?: boolean
  27. isInWorkflow?: boolean
  28. }
  29. const Trigger: FC<TriggerProps> = ({
  30. disabled,
  31. currentProvider,
  32. currentModel,
  33. providerName,
  34. modelId,
  35. hasDeprecated,
  36. modelDisabled,
  37. isInWorkflow,
  38. }) => {
  39. const { t } = useTranslation()
  40. const language = useLanguage()
  41. const { modelProviders } = useProviderContext()
  42. return (
  43. <div
  44. className={cn(
  45. 'relative flex items-center px-2 h-8 rounded-lg cursor-pointer',
  46. !isInWorkflow && 'border hover:border-[1.5px]',
  47. !isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
  48. isInWorkflow && 'pr-[30px] bg-gray-100 border border-gray-100 hover:border-gray-200',
  49. )}
  50. >
  51. {
  52. currentProvider && (
  53. <ModelIcon
  54. className='mr-1.5 !w-5 !h-5'
  55. provider={currentProvider}
  56. modelName={currentModel?.model}
  57. />
  58. )
  59. }
  60. {
  61. !currentProvider && (
  62. <ModelIcon
  63. className='mr-1.5 !w-5 !h-5'
  64. provider={modelProviders.find(item => item.provider === providerName)}
  65. modelName={modelId}
  66. />
  67. )
  68. }
  69. {
  70. currentModel && (
  71. <ModelName
  72. className='mr-1.5 text-gray-900'
  73. modelItem={currentModel}
  74. showMode
  75. modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
  76. showFeatures
  77. featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
  78. />
  79. )
  80. }
  81. {
  82. !currentModel && (
  83. <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
  84. {modelId}
  85. </div>
  86. )
  87. }
  88. {
  89. disabled
  90. ? (
  91. <Tooltip
  92. popupContent={
  93. hasDeprecated
  94. ? t('common.modelProvider.deprecated')
  95. : (modelDisabled && currentModel)
  96. ? MODEL_STATUS_TEXT[currentModel.status as string][language]
  97. : ''
  98. }
  99. >
  100. <AlertTriangle className='w-4 h-4 text-[#F79009]' />
  101. </Tooltip>
  102. )
  103. : (
  104. <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
  105. )
  106. }
  107. {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
  108. </div>
  109. )
  110. }
  111. export default Trigger