From 902de72cc080628eb768426bf359f9bde0e6c3d0 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 10 Oct 2024 12:58:28 +0800
Subject: [PATCH 1/7] new style of settings

---
 .../header/account-dropdown/index.tsx         |  2 +-
 .../header/account-setting/index.tsx          | 61 ++++++++++---------
 .../header/account-setting/menu-dialog.tsx    | 46 ++++++++++++++
 web/i18n/en-US/common.ts                      |  1 +
 web/i18n/zh-Hans/common.ts                    |  1 +
 5 files changed, 81 insertions(+), 30 deletions(-)
 create mode 100644 web/app/components/header/account-setting/menu-dialog.tsx

diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 4c42374ffd..c29e0f159b 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -102,7 +102,7 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                   </Menu.Item>
                   <div className="px-1 py-1">
                     <Menu.Item>
-                      <div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'account' })}>
+                      <div className={itemClassName} onClick={() => setShowAccountSettingModal({ payload: 'provider' })}>
                         <div>{t('common.userProfile.settings')}</div>
                       </div>
                     </Menu.Item>
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index c8f757de28..d56f231a55 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -6,8 +6,8 @@ import {
   RiAccountCircleLine,
   RiApps2AddFill,
   RiApps2AddLine,
-  RiBox3Fill,
-  RiBox3Line,
+  RiBrainFill,
+  RiBrainLine,
   RiCloseLine,
   RiColorFilterFill,
   RiColorFilterLine,
@@ -31,17 +31,14 @@ import ModelProviderPage from './model-provider-page'
 import cn from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
-import Modal from '@/app/components/base/modal'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useAppContext } from '@/context/app-context'
+import MenuDialog from '@/app/components/header/account-setting/menu-dialog'
+import Input from '@/app/components/base/input'
 
 const iconClassName = `
-  w-4 h-4 ml-3 mr-2
-`
-
-const scrolledClassName = `
-  border-b shadow-xs bg-white/[.98]
+  w-5 h-5 mr-2
 `
 
 type IAccountSettingProps = {
@@ -59,7 +56,7 @@ type GroupItem = {
 
 export default function AccountSetting({
   onCancel,
-  activeTab = 'account',
+  activeTab = 'provider',
 }: IAccountSettingProps) {
   const [activeMenu, setActiveMenu] = useState(activeTab)
   const { t } = useTranslation()
@@ -73,8 +70,8 @@ export default function AccountSetting({
       {
         key: 'provider',
         name: t('common.settings.provider'),
-        icon: <RiBox3Line className={iconClassName} />,
-        activeIcon: <RiBox3Fill className={iconClassName} />,
+        icon: <RiBrainLine className={iconClassName} />,
+        activeIcon: <RiBrainFill className={iconClassName} />,
       },
       {
         key: 'members',
@@ -122,7 +119,7 @@ export default function AccountSetting({
     },
     {
       key: 'account-group',
-      name: t('common.settings.accountGroup'),
+      name: t('common.settings.generalGroup'),
       items: [
         {
           key: 'account',
@@ -161,32 +158,31 @@ export default function AccountSetting({
 
   const activeItem = [...menuItems[0].items, ...menuItems[1].items].find(item => item.key === activeMenu)
 
+  const [searchValue, setSearchValue] = useState<string>('')
+
   return (
-    <Modal
-      isShow
+    <MenuDialog
+      show
       onClose={() => { }}
-      className='my-[60px] p-0 max-w-[1024px] rounded-xl overflow-y-auto'
-      wrapperClassName='pt-[60px]'
     >
-      <div className='flex'>
-        <div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-gray-100 shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
-          <div className='mb-8 ml-0 sm:ml-2 text-sm sm:text-base font-medium leading-6 text-gray-900'>{t('common.userProfile.settings')}</div>
+      <div className='mx-auto max-w-[1048px] h-[100vh] flex'>
+        <div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
+          <div className='mt-6 mb-8 px-3 py-2 text-text-primary title-2xl-semi-bold'>{t('common.userProfile.settings')}</div>
           <div className='w-full'>
             {
               menuItems.map(menuItem => (
-                <div key={menuItem.key} className='mb-4'>
+                <div key={menuItem.key} className='mb-2'>
                   {!isCurrentWorkspaceDatasetOperator && (
-                    <div className='px-2 mb-[6px] text-[10px] sm:text-xs font-medium text-gray-500'>{menuItem.name}</div>
+                    <div className='py-2 pl-3 pb-1 mb-0.5 text-text-tertiary system-xs-medium-uppercase'>{menuItem.name}</div>
                   )}
                   <div>
                     {
                       menuItem.items.map(item => (
                         <div
                           key={item.key}
-                          className={`
-                            flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
-                            ${activeMenu === item.key ? 'font-semibold text-primary-600 bg-primary-50' : 'font-light text-gray-700'}
-                          `}
+                          className={cn(
+                            'flex items-center mb-0.5 p-1 pl-3 h-[37px] text-sm cursor-pointer rounded-lg',
+                            activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium')}
                           title={item.name}
                           onClick={() => setActiveMenu(item.key)}
                         >
@@ -201,15 +197,22 @@ export default function AccountSetting({
             }
           </div>
         </div>
-        <div ref={scrollRef} className='relative w-[824px] h-[720px] pb-4 overflow-y-auto'>
-          <div className={cn('sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
-            <div className='shrink-0'>{activeItem?.name}</div>
+        <div ref={scrollRef} className='relative w-[824px] pb-4 bg-components-panel-bg overflow-y-auto'>
+          <div className={cn('sticky top-0 px-8 py-[26px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b shadow-xs')}>
+            <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
             {
               activeItem?.description && (
                 <div className='shrink-0 ml-2 text-xs text-gray-600'>{activeItem?.description}</div>
               )
             }
             <div className='grow flex justify-end'>
+              <Input
+                showLeftIcon
+                wrapperClassName='!w-[200px]'
+                className='!h-8 !text-[13px]'
+                onChange={e => setSearchValue(e.target.value)}
+                value={searchValue}
+              />
               <div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
                 <RiCloseLine className='w-4 h-4 text-gray-400' />
               </div>
@@ -228,6 +231,6 @@ export default function AccountSetting({
           </div>
         </div>
       </div>
-    </Modal>
+    </MenuDialog>
   )
 }
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
new file mode 100644
index 0000000000..2f13311d0d
--- /dev/null
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -0,0 +1,46 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const MenuDialog = ({
+  className,
+  children,
+  show,
+  onClose,
+}: DialogProps) => {
+  const close = useCallback(() => onClose?.(), [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-40" onClose={close}>
+        <div className="fixed inset-0">
+          <div className="flex flex-col items-center justify-center min-h-full">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
+                <div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/>
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default MenuDialog
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 23e301485a..483c4788e6 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -142,6 +142,7 @@ const translation = {
   settings: {
     accountGroup: 'ACCOUNT',
     workplaceGroup: 'WORKSPACE',
+    generalGroup: 'GENERAL',
     account: 'My account',
     members: 'Members',
     billing: 'Billing',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 7947d32f25..7d906ed0b4 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -142,6 +142,7 @@ const translation = {
   settings: {
     accountGroup: '账户',
     workplaceGroup: '工作空间',
+    generalGroup: '通用',
     account: '我的账户',
     members: '成员',
     billing: '账单',

From 49856d8d174672172752d17dfbbe36762e2b3b96 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 10 Oct 2024 16:01:07 +0800
Subject: [PATCH 2/7] setting content header & close button

---
 .../header/account-setting/index.tsx          |  6 +---
 .../header/account-setting/menu-dialog.tsx    | 30 +++++++++++++++++--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index d56f231a55..02895b0255 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -8,7 +8,6 @@ import {
   RiApps2AddLine,
   RiBrainFill,
   RiBrainLine,
-  RiCloseLine,
   RiColorFilterFill,
   RiColorFilterLine,
   RiDatabase2Fill,
@@ -163,7 +162,7 @@ export default function AccountSetting({
   return (
     <MenuDialog
       show
-      onClose={() => { }}
+      onClose={onCancel}
     >
       <div className='mx-auto max-w-[1048px] h-[100vh] flex'>
         <div className='w-[44px] sm:w-[224px] pl-4 pr-6 border-r border-divider-burn flex flex-col'>
@@ -213,9 +212,6 @@ export default function AccountSetting({
                 onChange={e => setSearchValue(e.target.value)}
                 value={searchValue}
               />
-              <div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
-                <RiCloseLine className='w-4 h-4 text-gray-400' />
-              </div>
             </div>
           </div>
           <div className='px-4 sm:px-8 pt-2'>
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index 2f13311d0d..19639488da 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,6 +1,8 @@
-import { Fragment, useCallback } from 'react'
+import { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
+import { RiCloseLine } from '@remixicon/react'
 import { Dialog, Transition } from '@headlessui/react'
+import Button from '@/app/components/base/button'
 import cn from '@/utils/classnames'
 
 type DialogProps = {
@@ -17,9 +19,22 @@ const MenuDialog = ({
   onClose,
 }: DialogProps) => {
   const close = useCallback(() => onClose?.(), [onClose])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape')
+        close()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [close])
+
   return (
     <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-40" onClose={close}>
+      <Dialog as="div" className="relative z-40" onClose={() => {}}>
         <div className="fixed inset-0">
           <div className="flex flex-col items-center justify-center min-h-full">
             <Transition.Child
@@ -33,6 +48,17 @@ const MenuDialog = ({
             >
               <Dialog.Panel className={cn('grow relative w-full h-full p-0 overflow-hidden text-left align-middle transition-all transform bg-background-sidenav-bg backdrop-blur-md', className)}>
                 <div className='absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg'/>
+                <div className='absolute top-6 right-6 flex flex-col items-center'>
+                  <Button
+                    variant='tertiary'
+                    size='large'
+                    className='px-2'
+                    onClick={close}
+                  >
+                    <RiCloseLine className='w-5 h-5' />
+                  </Button>
+                  <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
+                </div>
                 {children}
               </Dialog.Panel>
             </Transition.Child>

From d68ca56b3aaafbb4b126783f5839d66f6ed956ee Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 11 Oct 2024 12:26:53 +0800
Subject: [PATCH 3/7] system default model

---
 .../header/account-setting/index.tsx          |  2 +-
 .../model-provider-page/index.tsx             | 43 +++++++++++--------
 .../system-model-selector/index.tsx           | 17 ++++----
 web/i18n/en-US/common.ts                      |  2 +-
 web/i18n/zh-Hans/common.ts                    |  2 +-
 5 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 02895b0255..33b4a0f68a 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -197,7 +197,7 @@ export default function AccountSetting({
           </div>
         </div>
         <div ref={scrollRef} className='relative w-[824px] pb-4 bg-components-panel-bg overflow-y-auto'>
-          <div className={cn('sticky top-0 px-8 py-[26px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b shadow-xs')}>
+          <div className={cn('sticky top-0 mx-8 pt-[27px] pb-2 mb-[18px] flex items-center bg-components-panel-bg z-20', scrolled && 'border-b')}>
             <div className='shrink-0 text-text-primary title-2xl-semi-bold'>{activeItem?.name}</div>
             {
               activeItem?.description && (
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 a8a5a0cf42..8862b0029b 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
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiAlertFill } 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'
@@ -17,10 +18,10 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import cn from '@/utils/classnames'
 
 const ModelProviderPage = () => {
   const { t } = useTranslation()
@@ -90,24 +91,28 @@ const ModelProviderPage = () => {
 
   return (
     <div className='relative pt-1 -mt-2'>
-      <div className={`flex items-center justify-between mb-2 h-8 ${defaultModelNotConfigured && 'px-3 bg-[#FFFAEB] rounded-lg border border-[#FEF0C7]'}`}>
-        {
-          defaultModelNotConfigured
-            ? (
-              <div className='flex items-center text-xs font-medium text-gray-700'>
-                <AlertTriangle className='mr-1 w-3 h-3 text-[#F79009]' />
-                {t('common.modelProvider.notConfigured')}
-              </div>
-            )
-            : <div className='text-sm font-medium text-gray-800'>{t('common.modelProvider.models')}</div>
-        }
-        <SystemModelSelector
-          textGenerationDefaultModel={textGenerationDefaultModel}
-          embeddingsDefaultModel={embeddingsDefaultModel}
-          rerankDefaultModel={rerankDefaultModel}
-          speech2textDefaultModel={speech2textDefaultModel}
-          ttsDefaultModel={ttsDefaultModel}
-        />
+      <div className={cn('flex items-center mb-2')}>
+        <div className='grow text-text-primary system-md-semibold'>{t('common.modelProvider.models')}</div>
+        <div className={cn(
+          'shrink-0 relative flex items-center justify-end gap-2 p-0.5 rounded-lg border border-transparent',
+          defaultModelNotConfigured && 'pl-2 bg-components-panel-bg-blur border-components-panel-border shadow-xs',
+        )}>
+          {defaultModelNotConfigured && <div className='absolute top-0 bottom-0 right-0 left-0 opacity-40' style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }}/>}
+          {defaultModelNotConfigured && (
+            <div className='flex items-center gap-1 text-text-primary system-xs-medium'>
+              <RiAlertFill className='w-4 h-4 text-text-warning-secondary' />
+              {t('common.modelProvider.notConfigured')}
+            </div>
+          )}
+          <SystemModelSelector
+            notConfigured={defaultModelNotConfigured}
+            textGenerationDefaultModel={textGenerationDefaultModel}
+            embeddingsDefaultModel={embeddingsDefaultModel}
+            rerankDefaultModel={rerankDefaultModel}
+            speech2textDefaultModel={speech2textDefaultModel}
+            ttsDefaultModel={ttsDefaultModel}
+          />
+        </div>
       </div>
       {
         !!configuredProviders?.length && (
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 1574785898..846738d4ae 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiEqualizer2Line } from '@remixicon/react'
 import ModelSelector from '../model-selector'
 import {
   useModelList,
@@ -13,7 +14,6 @@ import type {
 } from '../declarations'
 import { ModelTypeEnum } from '../declarations'
 import Tooltip from '@/app/components/base/tooltip'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -31,6 +31,7 @@ type SystemModelSelectorProps = {
   rerankDefaultModel: DefaultModelResponse | undefined
   speech2textDefaultModel: DefaultModelResponse | undefined
   ttsDefaultModel: DefaultModelResponse | undefined
+  notConfigured: boolean
 }
 const SystemModel: FC<SystemModelSelectorProps> = ({
   textGenerationDefaultModel,
@@ -38,6 +39,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
   rerankDefaultModel,
   speech2textDefaultModel,
   ttsDefaultModel,
+  notConfigured,
 }) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -128,14 +130,13 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
       }}
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className={`
-          flex items-center px-2 h-6 text-xs text-gray-700 cursor-pointer bg-white rounded-md border-[0.5px] border-gray-200 shadow-xs
-          hover:bg-gray-100 hover:shadow-none
-          ${open && 'bg-gray-100 shadow-none'}
-        `}>
-          <Settings01 className='mr-1 w-3 h-3 text-gray-500' />
+        <Button
+          variant={notConfigured ? 'primary' : 'secondary'}
+          size='small'
+        >
+          <RiEqualizer2Line className='mr-1 w-3.5 h-3.5' />
           {t('common.modelProvider.systemModelSettings')}
-        </div>
+        </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-50'>
         <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-black/5 bg-white shadow-xl'>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 483c4788e6..3bdeb7cec9 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -276,7 +276,7 @@ const translation = {
     },
   },
   modelProvider: {
-    notConfigured: 'The system model has not yet been fully configured, and some functions may be unavailable.',
+    notConfigured: 'The system model has not yet been fully configured',
     systemModelSettings: 'System Model Settings',
     systemModelSettingsLink: 'Why is it necessary to set up a system model?',
     selectModel: 'Select your model',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index 7d906ed0b4..f80afe8fca 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -276,7 +276,7 @@ const translation = {
     },
   },
   modelProvider: {
-    notConfigured: '系统模型尚未完全配置，部分功能可能无法使用。',
+    notConfigured: '系统模型尚未完全配置',
     systemModelSettings: '系统模型设置',
     systemModelSettingsLink: '为什么需要设置系统模型？',
     selectModel: '选择您的模型',

From d1452d4af4ec2d41e90f7f3db68ae81bfdc4e280 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 11 Oct 2024 13:04:57 +0800
Subject: [PATCH 4/7] no provider installed

---
 .../model-provider-page/index.tsx             | 48 +++++++++++--------
 web/i18n/en-US/common.ts                      |  6 +++
 web/i18n/zh-Hans/common.ts                    |  6 +++
 3 files changed, 40 insertions(+), 20 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 8862b0029b..744e8b8daa 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
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiAlertFill } from '@remixicon/react'
+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'
@@ -58,25 +58,25 @@ const ModelProviderPage = () => {
 
   const handleOpenModal = (
     provider: ModelProvider,
-    configurateMethod: ConfigurationMethodEnum,
+    configurationMethod: ConfigurationMethodEnum,
     CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
   ) => {
     setShowModelModal({
       payload: {
         currentProvider: provider,
-        currentConfigurationMethod: configurateMethod,
+        currentConfigurationMethod: configurationMethod,
         currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
       },
       onSaveCallback: () => {
         updateModelProviders()
 
-        if (configurateMethod === ConfigurationMethodEnum.predefinedModel) {
+        if (configurationMethod === ConfigurationMethodEnum.predefinedModel) {
           provider.supported_model_types.forEach((type) => {
             updateModelList(type)
           })
         }
 
-        if (configurateMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
+        if (configurationMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
           eventEmitter?.emit({
             type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
             payload: provider.provider,
@@ -114,21 +114,29 @@ const ModelProviderPage = () => {
           />
         </div>
       </div>
-      {
-        !!configuredProviders?.length && (
-          <div className='pb-3'>
-            {
-              configuredProviders?.map(provider => (
-                <ProviderAddedCard
-                  key={provider.provider}
-                  provider={provider}
-                  onOpenModal={(configurateMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurateMethod, currentCustomConfigurationModelFixedFields)}
-                />
-              ))
-            }
+      {!configuredProviders?.length && (
+        <div className='mb-2 p-4 rounded-[10px]' style={{ background: 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)' }}>
+          <div className='w-10 h-10 flex items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur'>
+            <RiBrainLine className='w-5 h-5 text-text-primary' />
           </div>
-        )
-      }
+          <div className='mt-2 text-text-secondary system-sm-medium'>{t('common.modelProvider.emptyProviderTitle')}</div>
+          <div className='mt-1 text-text-tertiary system-xs-regular'>{t('common.modelProvider.emptyProviderTip')}</div>
+        </div>
+      )}
+      {!!configuredProviders?.length && (
+        <div className='pb-3'>
+          {configuredProviders?.map(provider => (
+            <ProviderAddedCard
+              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.configureRequired')}</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 && (
           <>
@@ -142,7 +150,7 @@ const ModelProviderPage = () => {
                   <ProviderCard
                     key={provider.provider}
                     provider={provider}
-                    onOpenModal={(configurateMethod: ConfigurationMethodEnum) => handleOpenModal(provider, configurateMethod)}
+                    onOpenModal={(configurationMethod: ConfigurationMethodEnum) => handleOpenModal(provider, configurationMethod)}
                   />
                 ))
               }
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 3bdeb7cec9..11db6f7359 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -374,6 +374,12 @@ const translation = {
     loadBalancingLeastKeyWarning: 'To enable load balancing at least 2 keys must be enabled.',
     loadBalancingInfo: 'By default, load balancing uses the Round-robin strategy. If rate limiting is triggered, a 1-minute cooldown period will be applied.',
     upgradeForLoadBalancing: 'Upgrade your plan to enable Load Balancing.',
+    configureRequired: 'Configure required',
+    configureTip: 'Set up api-key or add model to use',
+    installProvider: 'Install model providers',
+    discoverMore: 'Discover more in',
+    emptyProviderTitle: 'Model provider not set up',
+    emptyProviderTip: 'Please install a model provider first.',
   },
   dataSource: {
     add: 'Add a data source',
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index f80afe8fca..17edc3a958 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -374,6 +374,12 @@ const translation = {
     loadBalancingInfo: '默认情况下，负载平衡使用 Round-robin 策略。如果触发速率限制，将应用 1 分钟的冷却时间',
     upgradeForLoadBalancing: '升级以解锁负载均衡功能',
     apiKey: 'API 密钥',
+    configureRequired: '尚未配置',
+    configureTip: '请配置 API 密钥，添加模型。',
+    installProvider: '安装模型供应商',
+    discoverMore: '发现更多就在',
+    emptyProviderTitle: '尚未安装模型供应商',
+    emptyProviderTip: '请安装模型供应商。',
   },
   dataSource: {
     add: '添加数据源',

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 5/7] 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>
           {/* {

From 495dec143c6314af0a0e0d87a52bdf0b55cd77c5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 11 Oct 2024 15:14:13 +0800
Subject: [PATCH 6/7] unconfigured provider

---
 .../model-provider-page/index.tsx             | 39 +++++------
 .../provider-added-card/index.tsx             | 64 +++++++++++--------
 .../provider-added-card/model-list.tsx        |  2 +-
 3 files changed, 56 insertions(+), 49 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 84916fb05a..8dc6513c05 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
@@ -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>
   )
 }
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 9cb3899235..46ef6add24 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
@@ -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
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 709560b419..5e70a0def1 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
@@ -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>

From e7dc16fd08d09966c2fd191bbe28a2d51413f2fe Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Fri, 11 Oct 2024 16:21:03 +0800
Subject: [PATCH 7/7] provider card

---
 .../(commonLayout)/plugins/test/card/page.tsx |  2 +-
 .../model-provider-page/index.tsx             | 49 ++++++++++--
 .../components/plugins/install-model-item.tsx |  7 +-
 web/app/components/plugins/provider-card.tsx  | 74 +++++++++++++++++++
 web/i18n/en-US/common.ts                      |  2 +-
 5 files changed, 124 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/plugins/provider-card.tsx

diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index e7ba6849bb..0b76e183f9 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -43,7 +43,7 @@ const PluginList = async () => {
         <h3 className='my-1'>Install model provide</h3>
         <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
-            <InstallModelItem key={index} payload={plugin as any} />
+            <InstallModelItem key={index} locale={locale} payload={plugin as any} />
           ))}
         </div>
 
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 8dc6513c05..5f0ac829c1 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
@@ -1,6 +1,13 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiAlertFill, RiBrainLine } from '@remixicon/react'
+import Link from 'next/link'
+import {
+  RiAlertFill,
+  RiArrowDownSLine,
+  RiArrowRightUpLine,
+  RiBrainLine,
+} from '@remixicon/react'
+import { useContext } from 'use-context-selector'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 // import ProviderCard from './provider-card'
@@ -18,11 +25,16 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
+import Divider from '@/app/components/base/divider'
+import ProviderCard from '@/app/components/plugins/provider-card'
+import I18n from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
 
+import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+
 const ModelProviderPage = () => {
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
@@ -89,6 +101,12 @@ const ModelProviderPage = () => {
     })
   }
 
+  const [collapse, setCollapse] = useState(false)
+  const { locale } = useContext(I18n)
+
+  // TODO #Plugin list API#
+  const pluginList = [toolNotion, extensionDallE, modelGPT4]
+
   return (
     <div className='relative pt-1 -mt-2'>
       <div className={cn('flex items-center mb-2')}>
@@ -134,7 +152,7 @@ const ModelProviderPage = () => {
           ))}
         </div>
       )}
-      {!!notConfiguredProviders?.length && (
+      {false && !!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'>
@@ -149,8 +167,29 @@ const ModelProviderPage = () => {
           </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>
+      <div className='mb-2'>
+        <Divider className='!mt-4 h-px' />
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-1 text-text-primary system-md-semibold cursor-pointer' onClick={() => setCollapse(!collapse)}>
+            <RiArrowDownSLine className={cn('w-4 h-4', collapse && '-rotate-90')} />
+            {t('common.modelProvider.installProvider')}
+          </div>
+          <div className='flex items-center mb-2 pt-2'>
+            <span className='pr-1 text-text-tertiary system-sm-regular'>{t('common.modelProvider.discoverMore')}</span>
+            <Link target="_blank" href="/plugins" className='inline-flex items-center system-sm-medium text-text-accent'>
+              Dify Marketplace
+              <RiArrowRightUpLine className='w-4 h-4' />
+            </Link>
+          </div>
+        </div>
+        {!collapse && (
+          <div className='grid grid-cols-2 gap-2'>
+            {pluginList.map((plugin, index) => (
+              <ProviderCard key={index} locale={locale} payload={plugin as any} />
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/plugins/install-model-item.tsx b/web/app/components/plugins/install-model-item.tsx
index 05d8426566..57a00ce1ef 100644
--- a/web/app/components/plugins/install-model-item.tsx
+++ b/web/app/components/plugins/install-model-item.tsx
@@ -1,5 +1,5 @@
-import type { FC } from 'react'
 import React from 'react'
+import type { FC } from 'react'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import Badge from '../base/badge'
 import type { Plugin } from './types'
@@ -7,19 +7,20 @@ import Description from './card/base/description'
 import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
-import { getLocaleOnServer } from '@/i18n/server'
+import type { Locale } from '@/i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
+  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
   payload: Plugin
 }
 
 const PluginItem: FC<Props> = async ({
   className,
+  locale,
   payload,
 }) => {
-  const locale = getLocaleOnServer()
   const { org, label } = payload
 
   return (
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
new file mode 100644
index 0000000000..4892d9da29
--- /dev/null
+++ b/web/app/components/plugins/provider-card.tsx
@@ -0,0 +1,74 @@
+import React from 'react'
+import type { FC } from 'react'
+import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import Badge from '../base/badge'
+import type { Plugin } from './types'
+import Description from './card/base/description'
+import Icon from './card/base/card-icon'
+import Title from './card/base/title'
+import DownloadCount from './card/base/download-count'
+import Button from '@/app/components/base/button'
+import type { Locale } from '@/i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
+  payload: Plugin
+}
+
+const ProviderCard: FC<Props> = ({
+  className,
+  locale,
+  payload,
+}) => {
+  const { org, label } = payload
+
+  return (
+    <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+      {/* Header */}
+      <div className="flex">
+        <Icon src={payload.icon} />
+        <div className="ml-3 w-0 grow">
+          <div className="flex items-center h-5">
+            <Title title={label[locale]} />
+            <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+          </div>
+          <div className='mb-1 flex justify-between items-center h-4'>
+            <div className='flex items-center'>
+              <div className='text-text-tertiary system-xs-regular'>{org}</div>
+              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+              <DownloadCount downloadCount={payload.install_count || 0} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
+      <div className='mt-3 flex space-x-0.5'>
+        {['LLM', 'text embedding', 'speech2text'].map(tag => (
+          <Badge key={tag} text={tag} />
+        ))}
+      </div>
+      <div
+        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8'
+        style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }}
+      >
+        <Button
+          className='flex-grow'
+          variant='primary'
+        >
+          Install
+        </Button>
+        <Button
+          className='flex-grow'
+          variant='secondary'
+        >
+          Details
+          <RiArrowRightUpLine className='w-4 h-4' />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ProviderCard
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index 11db6f7359..963a9d6a59 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -377,7 +377,7 @@ const translation = {
     configureRequired: 'Configure required',
     configureTip: 'Set up api-key or add model to use',
     installProvider: 'Install model providers',
-    discoverMore: 'Discover more in',
+    discoverMore: 'Discover more in ',
     emptyProviderTitle: 'Model provider not set up',
     emptyProviderTip: 'Please install a model provider first.',
   },