feat: add multi model credentials (#24451)

Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx

@@ -0,0 +1,111 @@
+import {
+  memo,
+  useCallback,
+  useMemo,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddCircleFill,
+} from '@remixicon/react'
+import {
+  Button,
+} from '@/app/components/base/button'
+import type {
+  CustomConfigurationModelFixedFields,
+  ModelProvider,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import Authorized from './authorized'
+import {
+  useAuth,
+  useCustomModels,
+} from './hooks'
+import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+
+type AddCustomModelProps = {
+  provider: ModelProvider,
+  configurationMethod: ConfigurationMethodEnum,
+  currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
+}
+const AddCustomModel = ({
+  provider,
+  configurationMethod,
+  currentCustomConfigurationModelFixedFields,
+}: AddCustomModelProps) => {
+  const { t } = useTranslation()
+  const customModels = useCustomModels(provider)
+  const noModels = !customModels.length
+  const {
+    handleOpenModal,
+  } = useAuth(provider, configurationMethod, currentCustomConfigurationModelFixedFields, true)
+  const notAllowCustomCredential = provider.allow_custom_token === false
+  const handleClick = useCallback(() => {
+    if (notAllowCustomCredential)
+      return
+
+    handleOpenModal()
+  }, [handleOpenModal, notAllowCustomCredential])
+  const ButtonComponent = useMemo(() => {
+    const Item = (
+      <Button
+        variant='ghost-accent'
+        size='small'
+        onClick={handleClick}
+        className={cn(
+          notAllowCustomCredential && 'cursor-not-allowed opacity-50',
+        )}
+      >
+        <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
+        {t('common.modelProvider.addModel')}
+      </Button>
+    )
+    if (notAllowCustomCredential) {
+      return (
+        <Tooltip
+          asChild
+          popupContent={t('plugin.auth.credentialUnavailable')}
+        >
+          {Item}
+        </Tooltip>
+      )
+    }
+    return Item
+  }, [handleClick, notAllowCustomCredential, t])
+
+  const renderTrigger = useCallback((open?: boolean) => {
+    const Item = (
+      <Button
+        variant='ghost'
+        size='small'
+        className={cn(
+          open && 'bg-components-button-ghost-bg-hover',
+        )}
+      >
+        <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
+        {t('common.modelProvider.addModel')}
+      </Button>
+    )
+    return Item
+  }, [t])
+
+  if (noModels)
+    return ButtonComponent
+
+  return (
+    <Authorized
+      provider={provider}
+      configurationMethod={ConfigurationMethodEnum.customizableModel}
+      items={customModels.map(model => ({
+        model,
+        credentials: model.available_model_credentials ?? [],
+      }))}
+      renderTrigger={renderTrigger}
+      isModelCredential
+      enableAddModelCredential
+      bottomAddModelCredentialText={t('common.modelProvider.auth.addNewModel')}
+    />
+  )
+}
+
+export default memo(AddCustomModel)