From 5e145c1c22bb2e78060dc81c9cb7b3d9bbc1a2ab Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Mon, 5 Feb 2024 16:22:30 +0800
Subject: [PATCH] chore: show credit help link (#2393)

---
 .../model-provider-page/declarations.ts               |  1 +
 .../model-provider-page/model-modal/Form.tsx          |  5 +++++
 .../tools/setting/build-in/config-credentials.tsx     | 11 +++++++++++
 web/i18n/lang/tools.en.ts                             |  1 +
 web/i18n/lang/tools.pt.ts                             |  1 +
 web/i18n/lang/tools.zh.ts                             |  1 +
 6 files changed, 20 insertions(+)

diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
index 90aa758187..7a683c8df8 100644
--- a/web/app/components/header/account-setting/model-provider-page/declarations.ts
+++ b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -98,6 +98,7 @@ export type CredentialFormSchemaBase = {
   default?: string
   tooltip?: TypeWithI18N
   show_on: FormShowOnObject[]
+  url?: string
 }
 
 export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index ec1f41a64e..365cefc26a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -28,6 +28,7 @@ type FormProps = {
   readonly?: boolean
   inputClassName?: string
   isShowDefaultValue?: boolean
+  fieldMoreInfo?: (payload: CredentialFormSchema) => JSX.Element | null
 }
 
 const Form: FC<FormProps> = ({
@@ -41,6 +42,7 @@ const Form: FC<FormProps> = ({
   readonly,
   inputClassName,
   isShowDefaultValue = false,
+  fieldMoreInfo,
 }) => {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
@@ -106,6 +108,7 @@ const Form: FC<FormProps> = ({
             type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
             {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
           />
+          {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
       )
@@ -162,6 +165,7 @@ const Form: FC<FormProps> = ({
               ))
             }
           </div>
+          {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
       )
@@ -205,6 +209,7 @@ const Form: FC<FormProps> = ({
             onSelect={item => handleFormChange(variable, item.value as string)}
             placeholder={placeholder?.[language]}
           />
+          {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
       )
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index fdca7abb07..d5365001c8 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -10,6 +10,7 @@ import Button from '@/app/components/base/button'
 import { fetchBuiltInToolCredentialSchema } from '@/service/tools'
 import Loading from '@/app/components/base/loading'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 
 type Props = {
   collection: Collection
@@ -62,6 +63,16 @@ const ConfigCredential: FC<Props> = ({
                   showOnVariableMap={{}}
                   validating={false}
                   inputClassName='!bg-gray-50'
+                  fieldMoreInfo={item => item.url
+                    ? (<a
+                      href={item.url}
+                      target='_blank' rel='noopener noreferrer'
+                      className='inline-flex items-center text-xs text-primary-600'
+                    >
+                      {t('tools.howToGet')}
+                      <LinkExternal02 className='ml-1 w-3 h-3' />
+                    </a>)
+                    : null}
                 />
                 <div className={cn(collection.is_team_authorization ? 'justify-between' : 'justify-end', 'mt-2 flex ')} >
                   {
diff --git a/web/i18n/lang/tools.en.ts b/web/i18n/lang/tools.en.ts
index 7b8314f188..57f12d3bf4 100644
--- a/web/i18n/lang/tools.en.ts
+++ b/web/i18n/lang/tools.en.ts
@@ -98,6 +98,7 @@ const translation = {
   builtInPromptTitle: 'Prompt',
   toolRemoved: 'Tool removed',
   notAuthorized: 'Tool not authorized',
+  howToGet: 'How to get',
 }
 
 export default translation
diff --git a/web/i18n/lang/tools.pt.ts b/web/i18n/lang/tools.pt.ts
index 99892ce780..9e2da08a1a 100644
--- a/web/i18n/lang/tools.pt.ts
+++ b/web/i18n/lang/tools.pt.ts
@@ -97,6 +97,7 @@ const translation = {
   },
   builtInPromptTitle: 'Prompt',
   toolRemoved: 'Ferramenta removida',
+  howToGet: 'Como conseguir',
 }
 
 export default translation
diff --git a/web/i18n/lang/tools.zh.ts b/web/i18n/lang/tools.zh.ts
index 40753ddc9b..6777ace235 100644
--- a/web/i18n/lang/tools.zh.ts
+++ b/web/i18n/lang/tools.zh.ts
@@ -90,6 +90,7 @@ const translation = {
   builtInPromptTitle: '提示词',
   toolRemoved: '工具已被移除',
   notAuthorized: '工具未授权',
+  howToGet: '如何获取',
 }
 
 export default translation