From b1379fcc483356c179c023f5894b31a0002b4828 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Thu, 21 Aug 2025 11:17:49 +0800
Subject: [PATCH] fix: modal title

---
 .../model-provider-page/model-icon/index.tsx  |  6 +-
 .../model-provider-page/model-modal/index.tsx | 83 +++++++++++++++++--
 web/i18n/en-US/common.ts                      |  5 ++
 web/i18n/zh-Hans/common.ts                    |  5 ++
 4 files changed, 89 insertions(+), 10 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index f6fb1dc6f6..02c7c404ab 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -13,12 +13,14 @@ type ModelIconProps = {
   provider?: Model | ModelProvider
   modelName?: string
   className?: string
+  iconClassName?: string
   isDeprecated?: boolean
 }
 const ModelIcon: FC<ModelIconProps> = ({
   provider,
   className,
   modelName,
+  iconClassName,
   isDeprecated = false,
 }) => {
   const language = useLanguage()
@@ -34,7 +36,7 @@ const ModelIcon: FC<ModelIconProps> = ({
   if (provider?.icon_small) {
     return (
       <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}>
-        <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)}/>
+        <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)} className={iconClassName} />
       </div>
     )
   }
@@ -44,7 +46,7 @@ const ModelIcon: FC<ModelIconProps> = ({
       'flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
       className,
     )}>
-      <div className='flex h-5 w-5 items-center justify-center opacity-35'>
+      <div className={cn('flex h-5 w-5 items-center justify-center opacity-35', iconClassName)}>
         <Group className='h-3 w-3 text-text-tertiary' />
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 39b26246fc..c655c6f294 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -2,8 +2,10 @@ import type { FC } from 'react'
 import {
   memo,
   useCallback,
+  useMemo,
   useRef,
 } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type {
   CustomConfigurationModelFixedFields,
@@ -40,6 +42,9 @@ import {
   useAuth,
   useCredentialData,
 } from '@/app/components/header/account-setting/model-provider-page/model-auth/hooks'
+import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
+import Badge from '@/app/components/base/badge'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
 
 type ModelModalProps = {
   provider: ModelProvider
@@ -62,6 +67,7 @@ const ModelModal: FC<ModelModalProps> = ({
   credential,
   isModelCredential,
 }) => {
+  const renderI18nObject = useRenderI18nObject()
   const providerFormSchemaPredefined = configurateMethod === ConfigurationMethodEnum.predefinedModel
   const {
     isLoading,
@@ -124,19 +130,80 @@ const ModelModal: FC<ModelModalProps> = ({
     }
   }, [handleSaveCredential, credential?.credential_id, model])
 
-  const renderTitlePrefix = () => {
-    const prefix = isEditMode ? t('common.operation.setup') : t('common.operation.add')
-    return `${prefix} ${provider.label[language] || provider.label.en_US}`
-  }
+  const modalTitle = useMemo(() => {
+    if (!providerFormSchemaPredefined && !model) {
+      return (
+        <div className='flex items-center'>
+          <ModelIcon
+            className='mr-2 h-10 w-10 shrink-0'
+            iconClassName='h-10 w-10'
+            provider={provider}
+          />
+          <div>
+            <div className='system-xs-medium-uppercase text-text-tertiary'>{t('common.modelProvider.auth.apiKeyModal.addModel')}</div>
+            <div className='system-md-semibold text-text-primary'>{renderI18nObject(provider.label)}</div>
+          </div>
+        </div>
+      )
+    }
+    let label = t('common.modelProvider.auth.apiKeyModal.title')
+
+    if (model)
+      label = t('common.modelProvider.auth.addModelCredential')
+
+    return (
+      <div className='title-2xl-semi-bold text-text-primary'>
+        {label}
+      </div>
+    )
+  }, [providerFormSchemaPredefined, t, model, renderI18nObject])
+
+  const modalDesc = useMemo(() => {
+    if (providerFormSchemaPredefined) {
+      return (
+        <div className='system-xs-regular mt-1 text-text-tertiary'>
+          {t('common.modelProvider.auth.apiKeyModal.desc')}
+        </div>
+      )
+    }
+
+    return null
+  }, [providerFormSchemaPredefined, t])
+
+  const modalModel = useMemo(() => {
+    if (model) {
+      return (
+        <div className='mt-2 flex items-center'>
+          <ModelIcon
+            className='mr-2 h-4 w-4 shrink-0'
+            provider={provider}
+            modelName={model.model}
+          />
+          <div className='system-md-regular mr-1 text-text-secondary'>{model.model}</div>
+          <Badge>{model.model_type}</Badge>
+        </div>
+      )
+    }
+
+    return null
+  }, [model, provider])
 
   return (
     <PortalToFollowElem open>
       <PortalToFollowElemContent className='z-[60] h-full w-full'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] overflow-auto rounded-2xl bg-components-panel-bg shadow-xl'>
-            <div className='px-8 pt-8'>
-              <div className='mb-2 flex items-center'>
-                <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
+          <div className='relative w-[640px] rounded-2xl bg-components-panel-bg shadow-xl'>
+            <div
+              className='absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center'
+              onClick={onCancel}
+            >
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+            </div>
+            <div className='px-6 pt-6'>
+              <div className='pb-3'>
+                {modalTitle}
+                {modalDesc}
+                {modalModel}
               </div>
 
               <div className='max-h-[calc(100vh-320px)] overflow-y-auto'>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index f4622c3068..8cbc05d1f4 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -503,6 +503,11 @@ const translation = {
       specifyModelCredentialTip: 'Use a configured model credential.',
       providerManaged: 'Provider managed',
       providerManagedTip: 'The current configuration is hosted by the provider.',
+      apiKeyModal: {
+        title: 'API Key Authorization Configuration',
+        desc: 'After configuring credentials, all members within the workspace can use this model when orchestrating applications.',
+        addModel: 'Add model',
+      },
     },
   },
   dataSource: {
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index fcbf825bbc..8d24aa264e 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -503,6 +503,11 @@ const translation = {
       specifyModelCredentialTip: '使用已配置的模型凭据。',
       providerManaged: '由模型供应商管理',
       providerManagedTip: '使用模型供应商提供的单组凭据。',
+      apiKeyModal: {
+        title: 'API 密钥授权配置',
+        desc: '配置凭据后，工作空间中的所有成员都可以在编排应用时使用此模型。',
+        addModel: '添加模型',
+      },
     },
   },
   dataSource: {