unconfigured provider

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { RiAlertFill, RiBrainLine } from '@remixicon/react'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
-import ProviderCard from './provider-card'
+// import ProviderCard from './provider-card'
 import type {
   CustomConfigurationModelFixedFields,
   ModelProvider,
@@ -134,30 +134,23 @@ const ModelProviderPage = () => {
           ))}
         </div>
       )}
-      <div className='flex items-center mb-2 pt-2'>{t('common.modelProvider.configureRequired')}</div>
+      {!!notConfiguredProviders?.length && (
+        <>
+          <div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.configureRequired')}</div>
+          <div className='relative'>
+            {notConfiguredProviders?.map(provider => (
+              <ProviderAddedCard
+                notConfigured
+                key={provider.provider}
+                provider={provider}
+                onOpenModal={(configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurationMethod, currentCustomConfigurationModelFixedFields)}
+              />
+            ))}
+          </div>
+        </>
+      )}
       <div className='flex items-center mb-2 pt-2'>{t('common.modelProvider.installProvider')}</div>
       <div className='flex items-center mb-2 pt-2'>{t('common.modelProvider.discoverMore')}</div>
-      {
-        !!notConfiguredProviders?.length && (
-          <>
-            <div className='flex items-center mb-2 text-xs font-semibold text-gray-500'>
-              + {t('common.modelProvider.addMoreModelProvider')}
-              <span className='grow ml-3 h-[1px] bg-gradient-to-r from-[#f3f4f6]' />
-            </div>
-            <div className='grid grid-cols-3 gap-2'>
-              {
-                notConfiguredProviders?.map(provider => (
-                  <ProviderCard
-                    key={provider.provider}
-                    provider={provider}
-                    onOpenModal={(configurationMethod: ConfigurationMethodEnum) => handleOpenModal(provider, configurationMethod)}
-                  />
-                ))
-              }
-            </div>
-          </>
-        )
-      }
     </div>
   )
 }

web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiArrowRightSLine,
+  RiInformation2Fill,
   RiLoader2Line,
 } from '@remixicon/react'
 import type {
@@ -29,10 +30,12 @@ import { useAppContext } from '@/context/app-context'
 
 export const UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST = 'UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST'
 type ProviderAddedCardProps = {
+  notConfigured?: boolean
   provider: ModelProvider
   onOpenModal: (configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => void
 }
 const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
+  notConfigured,
   provider,
   onOpenModal,
 }) => {
@@ -47,6 +50,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
   const hasModelList = fetched && !!modelList.length
   const { isCurrentWorkspaceManager } = useAppContext()
   const showQuota = systemConfig.enabled && [...MODEL_PROVIDER_QUOTA_GET_PAID].includes(provider.provider) && !IS_CE_EDITION
+  const showCredential = configurationMethods.includes(ConfigurationMethodEnum.predefinedModel) && isCurrentWorkspaceManager
 
   const getModelList = async (providerName: string) => {
     if (loading)
@@ -105,7 +109,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
           )
         }
         {
-          configurationMethods.includes(ConfigurationMethodEnum.predefinedModel) && isCurrentWorkspaceManager && (
+          showCredential && (
             <CredentialPanel
               onSetup={() => onOpenModal(ConfigurationMethodEnum.predefinedModel)}
               provider={provider}
@@ -116,30 +120,40 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
       {
         collapsed && (
           <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-black/5 bg-white/30 text-xs font-medium text-gray-500'>
-            <div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
-              {
-                hasModelList
-                  ? t('common.modelProvider.modelsNum', { num: modelList.length })
-                  : t('common.modelProvider.showModels')
-              }
-              {!loading && <RiArrowRightSLine className='w-4 h-4' />}
-            </div>
-            <div
-              className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-white cursor-pointer'
-              onClick={handleOpenModelList}
-            >
-              {
-                hasModelList
-                  ? t('common.modelProvider.showModelsNum', { num: modelList.length })
-                  : t('common.modelProvider.showModels')
-              }
-              {!loading && <RiArrowRightSLine className='w-4 h-4' />}
-              {
-                loading && (
-                  <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
-                )
-              }
-            </div>
+            {(showQuota || !notConfigured) && (
+              <>
+                <div className='group-hover:hidden flex items-center pl-1 pr-1.5 h-6 leading-6'>
+                  {
+                    hasModelList
+                      ? t('common.modelProvider.modelsNum', { num: modelList.length })
+                      : t('common.modelProvider.showModels')
+                  }
+                  {!loading && <RiArrowRightSLine className='w-4 h-4' />}
+                </div>
+                <div
+                  className='hidden group-hover:flex items-center pl-1 pr-1.5 h-6 rounded-lg hover:bg-white cursor-pointer'
+                  onClick={handleOpenModelList}
+                >
+                  {
+                    hasModelList
+                      ? t('common.modelProvider.showModelsNum', { num: modelList.length })
+                      : t('common.modelProvider.showModels')
+                  }
+                  {!loading && <RiArrowRightSLine className='w-4 h-4' />}
+                  {
+                    loading && (
+                      <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
+                    )
+                  }
+                </div>
+              </>
+            )}
+            {!showQuota && notConfigured && (
+              <div className='flex items-center pl-1 pr-1.5 h-6'>
+                <RiInformation2Fill className='mr-1 w-4 h-4 text-text-accent' />
+                <span>{t('common.modelProvider.configureTip')}</span>
+              </div>
+            )}
             {
               configurationMethods.includes(ConfigurationMethodEnum.customizableModel) && isCurrentWorkspaceManager && (
                 <AddModelButton

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx

@@ -53,7 +53,7 @@ const ModelList: FC<ModelListProps> = ({
       <div className='py-1 bg-white rounded-lg'>
         <div className='flex items-center pl-1 pr-[3px]'>
           <span className='group shrink-0 flex items-center mr-2'>
-            <span className='group-hover:hidden pl-1 pr-1.5 h-6 leading-6 text-xs font-medium text-gray-500'>
+            <span className='group-hover:hidden inline-flex pl-1 pr-1.5 h-6 leading-6 text-xs font-medium text-gray-500'>
               {t('common.modelProvider.modelsNum', { num: models.length })}
               <RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
             </span>