From 415178fb0d89c1eabd00be44dab4744633cb5212 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Mon, 11 Aug 2025 10:37:14 +0800
Subject: [PATCH] add auth panel

---
 .../model-auth/auth-panel.tsx                 | 83 +++++++++++++++++++
 web/i18n/en-US/common.ts                      |  1 +
 web/i18n/zh-Hans/common.ts                    |  1 +
 3 files changed, 85 insertions(+)
 create mode 100644 web/app/components/header/account-setting/model-provider-page/model-auth/auth-panel.tsx

diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/auth-panel.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/auth-panel.tsx
new file mode 100644
index 0000000000..ac0cd5dcfd
--- /dev/null
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/auth-panel.tsx
@@ -0,0 +1,83 @@
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiEqualizer2Line,
+  RiMoreFill,
+} from '@remixicon/react'
+import type { ModelProvider } from '../declarations'
+import {
+  CustomConfigurationStatusEnum,
+} from '../declarations'
+import Indicator from '@/app/components/header/indicator'
+import Button from '@/app/components/base/button'
+import {
+  AuthCategory,
+  Authorized,
+} from '@/app/components/plugins/plugin-auth'
+
+type AuthPanelProps = {
+  provider: ModelProvider
+  onSetup: () => void
+}
+const AuthPanel: FC<AuthPanelProps> = ({
+  provider,
+  onSetup,
+}) => {
+  const authorized = false
+  const { t } = useTranslation()
+  const customConfig = provider.custom_configuration
+  const isCustomConfigured = customConfig.status === CustomConfigurationStatusEnum.active
+
+  const renderTrigger = useCallback(() => {
+    return (
+      <Button
+        className='h-6 w-6'
+        size='small'
+      >
+        <RiMoreFill className='h-4 w-4' />
+      </Button>
+    )
+  }, [])
+
+  return (
+    <>
+      {
+        provider.provider_credential_schema && (
+          <div className='relative ml-1 w-[112px] shrink-0 rounded-lg border-[0.5px] border-components-panel-border bg-white/[0.18] p-1'>
+            <div className='system-xs-medium-uppercase mb-1 flex h-5 items-center justify-between pl-2 pr-[7px] pt-1 text-text-tertiary'>
+              API-KEY
+              <Indicator color={isCustomConfigured ? 'green' : 'red'} />
+            </div>
+            <div className='flex items-center gap-0.5'>
+              <Button
+                className='mr-0.5 grow'
+                size='small'
+                onClick={onSetup}
+              >
+                <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
+                {
+                  authorized ? t('common.operation.config') : t('common.operation.setup')
+                }
+              </Button>
+              {
+                authorized && (
+                  <Authorized
+                    pluginPayload={{
+                      category: AuthCategory.model,
+                      provider: provider.provider,
+                    }}
+                    credentials={[]}
+                    renderTrigger={renderTrigger}
+                  />
+                )
+              }
+            </div>
+          </div>
+        )
+      }
+    </>
+  )
+}
+
+export default AuthPanel
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index d9b17dcbad..0eef43296f 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -66,6 +66,7 @@ const translation = {
     more: 'More',
     selectAll: 'Select All',
     deSelectAll: 'Deselect All',
+    config: 'Config',
   },
   errorMsg: {
     fieldRequired: '{{field}} is required',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index e51b84c37e..cd3632e44f 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -66,6 +66,7 @@ const translation = {
     more: '更多',
     selectAll: '全选',
     deSelectAll: '取消全选',
+    config: '配置',
   },
   errorMsg: {
     fieldRequired: '{{field}} 为必填项',