dify

dify/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx

@@ -0,0 +1,76 @@
+import { memo } from 'react'
+import {
+  RiEqualizer2Line,
+  RiScales3Line,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+
+type ConfigModelProps = {
+  onClick?: () => void
+  loadBalancingEnabled?: boolean
+  loadBalancingInvalid?: boolean
+  credentialRemoved?: boolean
+}
+const ConfigModel = ({
+  onClick,
+  loadBalancingEnabled,
+  loadBalancingInvalid,
+  credentialRemoved,
+}: ConfigModelProps) => {
+  const { t } = useTranslation()
+
+  if (loadBalancingInvalid) {
+    return (
+      <div
+        className='system-2xs-medium-uppercase relative flex h-[18px] cursor-pointer items-center rounded-[5px] border border-text-warning bg-components-badge-bg-dimm px-1.5 text-text-warning'
+        onClick={onClick}
+      >
+        <RiScales3Line className='mr-0.5 h-3 w-3' />
+        {t('common.modelProvider.auth.authorizationError')}
+        <Indicator color='orange' className='absolute right-[-1px] top-[-1px] h-1.5 w-1.5' />
+      </div>
+    )
+  }
+
+  return (
+    <Button
+      variant='secondary'
+      size='small'
+      className={cn(
+        'hidden shrink-0 group-hover:flex',
+        credentialRemoved && 'flex',
+      )}
+      onClick={onClick}
+    >
+      {
+        credentialRemoved && (
+          <>
+            {t('common.modelProvider.auth.credentialRemoved')}
+            <Indicator color='red' className='ml-2' />
+          </>
+        )
+      }
+      {
+        !loadBalancingEnabled && !credentialRemoved && !loadBalancingInvalid && (
+          <>
+            <RiEqualizer2Line className='mr-1 h-4 w-4' />
+            {t('common.operation.config')}
+          </>
+        )
+      }
+      {
+        loadBalancingEnabled && !credentialRemoved && !loadBalancingInvalid && (
+          <>
+            <RiScales3Line className='mr-1 h-4 w-4' />
+            {t('common.modelProvider.auth.configLoadBalancing')}
+          </>
+        )
+      }
+    </Button>
+  )
+}
+
+export default memo(ConfigModel)