From 4cc6dfa2329d4babf38e4f3d8091d556d304068b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 11 Oct 2024 13:55:09 +0800
Subject: [PATCH] new style of provider card

---
 .../header/account-setting/model-provider-page/index.tsx | 2 +-
 .../provider-added-card/credential-panel.tsx             | 6 +++---
 .../model-provider-page/provider-added-card/index.tsx    | 9 +++++----
 .../provider-added-card/model-list.tsx                   | 9 ++++++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 744e8b8daa..84916fb05a 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -124,7 +124,7 @@ const ModelProviderPage = () => {
         </div>
       )}
       {!!configuredProviders?.length && (
-        <div className='pb-3'>
+        <div className='relative'>
           {configuredProviders?.map(provider => (
             <ProviderAddedCard
               key={provider.provider}
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index f141e0018c..e7f865f198 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiEqualizer2Line } from '@remixicon/react'
 import type { ModelProvider } from '../declarations'
 import {
   ConfigurationMethodEnum,
@@ -14,7 +15,6 @@ import PrioritySelector from './priority-selector'
 import PriorityUseTip from './priority-use-tip'
 import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './index'
 import Indicator from '@/app/components/header/indicator'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
 import { changeModelProviderPriority } from '@/service/common'
 import { useToastContext } from '@/app/components/base/toast'
@@ -69,7 +69,7 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
           <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
             <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
               API-KEY
-              <Indicator color={isCustomConfigured ? 'green' : 'gray'} />
+              <Indicator color={isCustomConfigured ? 'green' : 'red'} />
             </div>
             <div className='flex items-center gap-0.5'>
               <Button
@@ -77,7 +77,7 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
                 size='small'
                 onClick={onSetup}
               >
-                <Settings01 className='mr-1 w-3 h-3' />
+                <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
                 {t('common.operation.setup')}
               </Button>
               {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index 5e73b36c42..9cb3899235 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightSLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type {
@@ -21,7 +22,6 @@ import CredentialPanel from './credential-panel'
 import QuotaPanel from './quota-panel'
 import ModelList from './model-list'
 import AddModelButton from './add-model-button'
-import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
 import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { IS_CE_EDITION } from '@/config'
@@ -116,23 +116,24 @@ 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 pl-1 pr-1.5 h-6 leading-6'>
+            <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}
             >
-              <ChevronDownDouble className='mr-0.5 w-3 h-3' />
               {
                 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' />
@@ -143,7 +144,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
               configurationMethods.includes(ConfigurationMethodEnum.customizableModel) && isCurrentWorkspaceManager && (
                 <AddModelButton
                   onClick={() => onOpenModal(ConfigurationMethodEnum.customizableModel)}
-                  className='hidden group-hover:flex group-hover:text-primary-600'
+                  className='flex'
                 />
               )
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
index e321d4076d..709560b419 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list.tsx
@@ -1,6 +1,9 @@
 import type { FC } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiArrowRightSLine,
+} from '@remixicon/react'
 import type {
   CustomConfigurationModelFixedFields,
   ModelItem,
@@ -12,7 +15,6 @@ import {
 // import Tab from './tab'
 import AddModelButton from './add-model-button'
 import ModelListItem from './model-list-item'
-import { ChevronDownDouble } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useAppContext } from '@/context/app-context'
 
@@ -53,13 +55,14 @@ const ModelList: FC<ModelListProps> = ({
           <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'>
               {t('common.modelProvider.modelsNum', { num: models.length })}
+              <RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
             </span>
             <span
               className='hidden group-hover:inline-flex items-center pl-1 pr-1.5 h-6 text-xs font-medium text-gray-500 bg-gray-50 cursor-pointer rounded-lg'
               onClick={() => onCollapse()}
             >
-              <ChevronDownDouble className='mr-0.5 w-3 h-3 rotate-180' />
-              {t('common.modelProvider.collapse')}
+              {t('common.modelProvider.modelsNum', { num: models.length })}
+              <RiArrowRightSLine className='mr-0.5 w-4 h-4 rotate-90' />
             </span>
           </span>
           {/* {