chore: show credit help link (#2393)

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 }

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>
       )

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 ')} >
                   {

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

web/i18n/lang/tools.pt.ts

@@ -97,6 +97,7 @@ const translation = {
   },
   builtInPromptTitle: 'Prompt',
   toolRemoved: 'Ferramenta removida',
+  howToGet: 'Como conseguir',
 }
 
 export default translation

web/i18n/lang/tools.zh.ts

@@ -90,6 +90,7 @@ const translation = {
   builtInPromptTitle: '提示词',
   toolRemoved: '工具已被移除',
   notAuthorized: '工具未授权',
+  howToGet: '如何获取',
 }
 
 export default translation