Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com>
Signed-off-by: -LAN- <laipz8200@outlook.com>
Signed-off-by: xhe <xw897002528@gmail.com>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: takatost <takatost@gmail.com>
Co-authored-by: kurokobo <kuro664@gmail.com>
Co-authored-by: Novice Lee <novicelee@NoviPro.local>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: AkaraChen <akarachen@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com>
Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com>
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: 非法操作 <hjlarry@163.com>
Co-authored-by: Novice <857526207@qq.com>
Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com>
Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com>
Co-authored-by: eux <euxuuu@gmail.com>
Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com>
Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com>
Co-authored-by: lotsik <lotsik@mail.ru>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com>
Co-authored-by: CN-P5 <heibai2006@gmail.com>
Co-authored-by: CN-P5 <heibai2006@qq.com>
Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com>
Co-authored-by: yihong <zouzou0208@gmail.com>
Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Boris Feld <lothiraldan@gmail.com>
Co-authored-by: mbo <himabo@gmail.com>
Co-authored-by: mabo <mabo@aeyes.ai>
Co-authored-by: Warren Chen <warren.chen830@gmail.com>
Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com>
Co-authored-by: jiandanfeng <chenjh3@wangsu.com>
Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com>
Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com>
Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com>
Co-authored-by: Xu Song <xusong.vip@gmail.com>
Co-authored-by: rayshaw001 <396301947@163.com>
Co-authored-by: Ding Jiatong <dingjiatong@gmail.com>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: JasonVV <jasonwangiii@outlook.com>
Co-authored-by: le0zh <newlight@qq.com>
Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com>
Co-authored-by: k-zaku <zaku99@outlook.jp>
Co-authored-by: luckylhb90 <luckylhb90@gmail.com>
Co-authored-by: hobo.l <hobo.l@binance.com>
Co-authored-by: jiangbo721 <365065261@qq.com>
Co-authored-by: 刘江波 <jiangbo721@163.com>
Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com>
Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com>
Co-authored-by: lowell <lowell.hu@zkteco.in>
Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com>
Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com>
Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com>
Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com>
Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com>
Co-authored-by: Jason <ggbbddjm@gmail.com>
Co-authored-by: Xin Zhang <sjhpzx@gmail.com>
Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com>
Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com>
Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com>
Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com>
Co-authored-by: Yingchun Lai <laiyingchun@apache.org>
Co-authored-by: Hash Brown <hi@xzd.me>
Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com>
Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com>
Co-authored-by: aplio <ryo.091219@gmail.com>
Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com>
Co-authored-by: Nam Vu <zuzoovn@gmail.com>
Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com>
Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com>
Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com>
Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com>
Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp>
Co-authored-by: HQidea <HQidea@users.noreply.github.com>
Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com>
Co-authored-by: xhe <xw897002528@gmail.com>
Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com>
Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com>
Co-authored-by: engchina <12236799+engchina@users.noreply.github.com>
Co-authored-by: engchina <atjapan2015@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: Kemal <kemalmeler@outlook.com>
Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com>
Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com>
Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com>
Co-authored-by: steven <sunzwj@digitalchina.com>
Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com>
Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com>
Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com>
Co-authored-by: 胡春东 <gycm520@gmail.com>
Co-authored-by: Junjie.M <118170653@qq.com>
Co-authored-by: MuYu <mr.muzea@gmail.com>
Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com>
Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com>
Co-authored-by: Fei He <droxer.he@gmail.com>
Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com>
Co-authored-by: Yuanbo Li <ybalbert@amazon.com>
Co-authored-by: douxc <7553076+douxc@users.noreply.github.com>
Co-authored-by: liuzhenghua <1090179900@qq.com>
Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com>
Co-authored-by: AugNSo <song.tiankai@icloud.com>
Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com>
Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com>
Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com>
Co-authored-by: Hundredwz <1808096180@qq.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>

web/app/components/header/account-dropdown/index.tsx

@@ -9,7 +9,6 @@ import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountAbout from '../account-about'
 import { mailToSupport } from '../utils/util'
-import WorkplaceSelector from './workplace-selector'
 import classNames from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
@@ -99,10 +98,6 @@ export default function AppSelector({ isMobile }: IAppSelector) {
                       </div>
                     </div>
                   </Menu.Item>
-                  <div className='px-1 py-1'>
-                    <div className='mt-2 px-3 text-xs font-medium text-text-tertiary'>{t('common.userProfile.workspace')}</div>
-                    <WorkplaceSelector />
-                  </div>
                   <div className="px-1 py-1">
                     <Menu.Item>
                       {({ active }) => <Link

web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -2,34 +2,21 @@ import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { Menu, Transition } from '@headlessui/react'
-import s from './index.module.css'
+import { RiArrowDownSLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
-import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
-import { Check } from '@/app/components/base/icons/src/vender/line/general'
+import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
-import classNames from '@/utils/classnames'
-
-const itemClassName = `
-  flex items-center px-3 py-2 h-10 cursor-pointer
-`
-const itemIconClassName = `
-  shrink-0 mr-2 flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600
-`
-const itemNameClassName = `
-  grow mr-2 text-sm text-gray-700 text-left
-`
-const itemCheckClassName = `
-  shrink-0 w-4 h-4 text-primary-600
-`
+import PremiumBadge from '@/app/components/base/premium-badge'
 
 const WorkplaceSelector = () => {
   const { t } = useTranslation()
+  const { plan } = useProviderContext()
   const { notify } = useContext(ToastContext)
   const { workspaces } = useWorkspacesContext()
   const currentWorkspace = workspaces.find(v => v.current)
-
+  const isFreePlan = plan.type === 'sandbox'
   const handleSwitchWorkspace = async (tenant_id: string) => {
     try {
       if (currentWorkspace?.id === tenant_id)
@@ -50,13 +37,15 @@ const WorkplaceSelector = () => {
           <>
             <Menu.Button className={cn(
               `
-                ${itemClassName} w-full
-                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-lg
+                flex items-center p-0.5 gap-1.5 w-full
+                group hover:bg-state-base-hover cursor-pointer ${open && 'bg-state-base-hover'} rounded-[10px]
               `,
             )}>
-              <div className={itemIconClassName}>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
-              <div className={`${itemNameClassName} truncate`}>{currentWorkspace?.name}</div>
-              <ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
+              <div className='flex items-center justify-center w-7 h-7 bg-[#EFF4FF] rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.name[0].toLocaleUpperCase()}</div>
+              <div className='flex flex-row'>
+                <div className={'truncate max-w-[80px] text-text-secondary system-sm-medium'}>{currentWorkspace?.name}</div>
+                <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
+              </div>
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -70,25 +59,29 @@ const WorkplaceSelector = () => {
               <Menu.Items
                 className={cn(
                   `
-                    absolute top-[1px] min-w-[200px] max-h-[70vh] overflow-y-scroll z-10 bg-white border-[0.5px] border-gray-200
-                    divide-y divide-gray-100 origin-top-right rounded-xl focus:outline-none
+                    flex w-[280px] flex-col items-start absolute left-[-15px] mt-1 rounded-xl shadows-shadow-lg
                   `,
-                  s.popup,
                 )}
               >
-                <div className="px-1 py-1">
+                <div className="flex flex-col p-1 pb-2 items-start self-stretch w-full rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg ">
+                  <div className='flex px-3 pt-1 pb-0.5 items-start self-stretch'>
+                    <span className='flex-1 text-text-tertiary system-xs-medium-uppercase'>{t('common.userProfile.workspace')}</span>
+                  </div>
                   {
                     workspaces.map(workspace => (
-                      <Menu.Item key={workspace.id}>
-                        {({ active }) => <div className={classNames(itemClassName,
-                          active && 'bg-state-base-hover',
-                        )} key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
-                          <div className={itemIconClassName}>{workspace.name[0].toLocaleUpperCase()}</div>
-                          <div className={itemNameClassName}>{workspace.name}</div>
-                          {workspace.current && <Check className={itemCheckClassName} />}
-                        </div>}
-
-                      </Menu.Item>
+                      <div className='flex py-1 pl-3 pr-2 items-center gap-2 self-stretch hover:bg-state-base-hover rounded-lg' key={workspace.id} onClick={() => handleSwitchWorkspace(workspace.id)}>
+                        <div className='flex items-center justify-center w-6 h-6 bg-[#EFF4FF] rounded-md text-xs font-medium text-primary-600'>{workspace.name[0].toLocaleUpperCase()}</div>
+                        <div className='line-clamp-1 grow overflow-hidden text-text-secondary text-ellipsis system-md-regular cursor-pointer'>{workspace.name}</div>
+                        {
+                          <PremiumBadge size='s' color='gray' allowHover={false}>
+                            <div className='system-2xs-medium'>
+                              <span className='p-[2px]'>
+                                {plan.type === 'professional' ? 'PRO' : plan.type.toUpperCase()}
+                              </span>
+                            </div>
+                          </PremiumBadge>
+                        }
+                      </div>
                     ))
                   }
                 </div>

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -77,7 +77,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
       onClose={() => { }}
       className='!p-8 !pb-6 !max-w-none !w-[640px]'
     >
-      <div className='mb-2 text-xl font-semibold text-gray-900'>
+      <div className='mb-2 text-xl font-semibold text-text-primary'>
         {
           data.name
             ? t('common.apiBasedExtension.modal.editTitle')
@@ -85,44 +85,44 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
         }
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
+        <div className='leading-9 text-sm font-medium text-text-primary'>
           {t('common.apiBasedExtension.modal.name.title')}
         </div>
         <input
           value={localeData.name || ''}
           onChange={e => handleDataChange('name', e.target.value)}
-          className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+          className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
           placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
         />
       </div>
       <div className='py-2'>
-        <div className='flex justify-between items-center h-9 text-sm font-medium text-gray-900'>
+        <div className='flex justify-between items-center h-9 text-sm font-medium text-text-primary'>
           {t('common.apiBasedExtension.modal.apiEndpoint.title')}
           <a
             href={t('common.apiBasedExtension.linkUrl') || '/'}
             target='_blank' rel='noopener noreferrer'
-            className='group flex items-center text-xs text-gray-500 font-normal hover:text-primary-600'
+            className='group flex items-center text-xs text-text-tertiary font-normal hover:text-text-accent'
           >
-            <BookOpen01 className='mr-1 w-3 h-3 text-gray-500 group-hover:text-primary-600' />
+            <BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-text-accent' />
             {t('common.apiBasedExtension.link')}
           </a>
         </div>
         <input
           value={localeData.api_endpoint || ''}
           onChange={e => handleDataChange('api_endpoint', e.target.value)}
-          className='block px-3 w-full h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+          className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
           placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
         />
       </div>
       <div className='py-2'>
-        <div className='leading-9 text-sm font-medium text-gray-900'>
+        <div className='leading-9 text-sm font-medium text-text-primary'>
           {t('common.apiBasedExtension.modal.apiKey.title')}
         </div>
         <div className='flex items-center'>
           <input
             value={localeData.api_key || ''}
             onChange={e => handleDataChange('api_key', e.target.value)}
-            className='block grow mr-2 px-3 h-9 bg-gray-100 rounded-lg text-sm text-gray-900 outline-none appearance-none'
+            className='block grow mr-2 px-3 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
             placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
           />
         </div>

web/app/components/header/account-setting/api-based-extension-page/selector.tsx

@@ -54,33 +54,33 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
         {
           currentItem
             ? (
-              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg cursor-pointer'>
-                <div className='text-sm text-gray-900'>{currentItem.name}</div>
+              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg cursor-pointer'>
+                <div className='text-sm text-text-primary'>{currentItem.name}</div>
                 <div className='flex items-center'>
-                  <div className='mr-1.5 w-[270px] text-xs text-gray-400 truncate text-right'>
+                  <div className='mr-1.5 w-[270px] text-xs text-text-quaternary truncate text-right'>
                     {currentItem.api_endpoint}
                   </div>
-                  <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+                  <RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
                 </div>
               </div>
             )
             : (
-              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-gray-100 rounded-lg text-sm text-gray-400 cursor-pointer'>
+              <div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-quaternary cursor-pointer'>
                 {t('common.apiBasedExtension.selector.placeholder')}
-                <RiArrowDownSLine className={`w-4 h-4 text-gray-700 ${!open && 'opacity-60'}`} />
+                <RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
               </div>
             )
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
-        <div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
+        <div className='w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg z-10'>
           <div className='p-1'>
             <div className='flex items-center justify-between px-3 pt-2 pb-1'>
-              <div className='text-xs font-medium text-gray-500'>
+              <div className='text-xs font-medium text-text-tertiary'>
                 {t('common.apiBasedExtension.selector.title')}
               </div>
               <div
-                className='flex items-center text-xs text-primary-600 cursor-pointer'
+                className='flex items-center text-xs text-text-accent cursor-pointer'
                 onClick={() => {
                   setOpen(false)
                   setShowAccountSettingModal({ payload: 'api-based-extension' })
@@ -95,20 +95,20 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
                 data?.map(item => (
                   <div
                     key={item.id}
-                    className='px-3 py-1.5 w-full cursor-pointer hover:bg-gray-50 rounded-md text-left'
+                    className='px-3 py-1.5 w-full cursor-pointer hover:stroke-state-base-hover rounded-md text-left'
                     onClick={() => handleSelect(item.id!)}
                   >
-                    <div className='text-sm text-gray-900'>{item.name}</div>
-                    <div className='text-xs text-gray-500'>{item.api_endpoint}</div>
+                    <div className='text-sm text-text-primary'>{item.name}</div>
+                    <div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
                   </div>
                 ))
               }
             </div>
           </div>
-          <div className='h-[1px] bg-gray-100' />
+          <div className='h-[1px] bg-divider-regular' />
           <div className='p-1'>
             <div
-              className='flex items-center px-3 h-8 text-sm text-primary-600 cursor-pointer'
+              className='flex items-center px-3 h-8 text-sm text-text-accent cursor-pointer'
               onClick={() => {
                 setOpen(false)
                 setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })

web/app/components/header/account-setting/index.module.css

@@ -1,8 +0,0 @@
-.modal {
-  max-width: 1024px !important;
-  border-radius: 12px !important;
-  margin-top: 60px;
-  margin-bottom: 60px;
-  padding: 0 !important;
-  overflow-y: auto;
-}

web/app/components/header/account-setting/index.tsx

@@ -2,8 +2,8 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import {
-  RiBox3Fill,
-  RiBox3Line,
+  RiBrain2Fill,
+  RiBrain2Line,
   RiCloseLine,
   RiColorFilterFill,
   RiColorFilterLine,
@@ -17,26 +17,23 @@ import {
   RiPuzzle2Line,
   RiTranslate2,
 } from '@remixicon/react'
+import Button from '../../base/button'
 import MembersPage from './members-page'
 import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelProviderPage from './model-provider-page'
-import s from './index.module.css'
 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 = {
@@ -68,8 +65,8 @@ export default function AccountSetting({
       {
         key: 'provider',
         name: t('common.settings.provider'),
-        icon: <RiBox3Line className={iconClassName} />,
-        activeIcon: <RiBox3Fill className={iconClassName} />,
+        icon: <RiBrain2Line className={iconClassName} />,
+        activeIcon: <RiBrain2Fill className={iconClassName} />,
       },
       {
         key: 'members',
@@ -117,7 +114,7 @@ export default function AccountSetting({
     },
     {
       key: 'account-group',
-      name: t('common.settings.accountGroup'),
+      name: t('common.settings.generalGroup'),
       items: [
         {
           key: 'language',
@@ -144,32 +141,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
-      onClose={() => { }}
-      className={s.modal}
-      wrapperClassName='pt-[60px]'
+    <MenuDialog
+      show
+      onClose={onCancel}
     >
-      <div className='flex'>
-        <div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-divider-burn shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
-          <div className='mb-8 ml-0 sm:ml-2 sm:text-base title-2xl-semi-bold text-text-primary'>{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] sm:text-xs system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
+                    <div className='py-2 pl-3 pb-1 mb-0.5 system-xs-medium-uppercase text-text-tertiary'>{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 ? 'system-sm-semibold text-components-menu-item-text-active bg-state-base-active' : 'system-sm-medium text-components-menu-item-text'}
-                          `}
+                          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)}
                         >
@@ -184,31 +180,50 @@ 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-components-panel-bg title-2xl-semi-bold text-text-primary z-20', scrolled && scrolledClassName)}>
-            <div className='shrink-0'>{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'>
-              <div className='z-[10] flex items-center justify-center -mr-4 p-2 cursor-pointer rounded-[10px] hover:bg-components-button-tertiary-bg' onClick={onCancel}>
-                <RiCloseLine className='w-5 h-5 text-components-button-tertiary-text' />
-              </div>
-            </div>
+        <div className='relative flex w-[824px]'>
+          <div className='absolute top-6 -right-11 flex flex-col items-center z-[9999]'>
+            <Button
+              variant='tertiary'
+              size='large'
+              className='px-2'
+              onClick={onCancel}
+            >
+              <RiCloseLine className='w-5 h-5' />
+            </Button>
+            <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>ESC</div>
           </div>
-          <div className='px-4 sm:px-8 pt-2'>
-            {activeMenu === 'members' && <MembersPage />}
-            {activeMenu === 'billing' && <BillingPage />}
-            {activeMenu === 'language' && <LanguagePage />}
-            {activeMenu === 'provider' && <ModelProviderPage />}
-            {activeMenu === 'data-source' && <DataSourcePage />}
-            {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
-            {activeMenu === 'custom' && <CustomPage />}
+          <div ref={scrollRef} className='w-full pb-4 bg-components-panel-bg overflow-y-auto'>
+            <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 border-divider-regular')}>
+              <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-text-tertiary'>{activeItem?.description}</div>
+                )
+              }
+              {activeItem?.key === 'provider' && (
+                <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>
+              )}
+            </div>
+            <div className='px-4 sm:px-8 pt-2'>
+              {activeMenu === 'provider' && <ModelProviderPage searchText={searchValue} />}
+              {activeMenu === 'members' && <MembersPage />}
+              {activeMenu === 'billing' && <BillingPage />}
+              {activeMenu === 'data-source' && <DataSourcePage />}
+              {activeMenu === 'api-based-extension' && <ApiBasedExtensionPage />}
+              {activeMenu === 'custom' && <CustomPage />}
+              {activeMenu === 'language' && <LanguagePage />}
+            </div>
           </div>
         </div>
       </div>
-    </Modal>
+    </MenuDialog>
   )
 }

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

@@ -47,7 +47,7 @@ const MembersPage = () => {
   return (
     <>
       <div className='flex flex-col'>
-        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+        <div className='flex items-center mb-4 p-3 gap-1 bg-gray-50 rounded-2xl'>
           <LogoEmbeddedChatHeader className='!w-10 !h-10' />
           <div className='grow mx-2'>
             <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>

web/app/components/header/account-setting/menu-dialog.tsx

@@ -0,0 +1,59 @@
+import { Fragment, useCallback, useEffect } 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])
+
+  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-[60]" onClose={() => {}}>
+        <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 top-0 right-0 h-full w-1/2 bg-components-panel-bg' />
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default MenuDialog

web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -15,6 +15,10 @@ export enum FormTypeEnum {
   boolean = 'boolean',
   files = 'files',
   file = 'file',
+  modelSelector = 'model-selector',
+  toolSelector = 'tool-selector',
+  multiToolSelector = 'array[tools]',
+  appSelector = 'app-selector',
 }
 
 export type FormOption = {
@@ -109,9 +113,19 @@ export type CredentialFormSchemaBase = {
   tooltip?: TypeWithI18N
   show_on: FormShowOnObject[]
   url?: string
+  scope?: string
 }
 
-export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & { max_length?: number; placeholder?: TypeWithI18N }
+export type CredentialFormSchemaTextInput = CredentialFormSchemaBase & {
+  max_length?: number;
+  placeholder?: TypeWithI18N,
+  template?: {
+    enabled: boolean
+  },
+  auto_generate?: {
+    type: string
+  }
+}
 export type CredentialFormSchemaNumberInput = CredentialFormSchemaBase & { min?: number; max?: number; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaSelect = CredentialFormSchemaBase & { options: FormOption[]; placeholder?: TypeWithI18N }
 export type CredentialFormSchemaRadio = CredentialFormSchemaBase & { options: FormOption[] }

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -11,10 +11,12 @@ import type {
   DefaultModel,
   DefaultModelResponse,
   Model,
+  ModelProvider,
   ModelTypeEnum,
 } from './declarations'
 import {
   ConfigurationMethodEnum,
+  CustomConfigurationStatusEnum,
   ModelStatusEnum,
 } from './declarations'
 import I18n from '@/context/i18n'
@@ -26,6 +28,15 @@ import {
   getPayUrl,
 } from '@/service/common'
 import { useProviderContext } from '@/context/provider-context'
+import {
+  useMarketplacePlugins,
+} from '@/app/components/plugins/marketplace/hooks'
+import type { Plugin } from '@/app/components/plugins/types'
+import { PluginType } from '@/app/components/plugins/types'
+import { getMarketplacePluginsByCollectionId } from '@/app/components/plugins/marketplace/utils'
+import { useModalContextSelector } from '@/context/modal-context'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 
 type UseDefaultModelAndModelList = (
   defaultModel: DefaultModelResponse | undefined,
@@ -233,3 +244,110 @@ export const useUpdateModelProviders = () => {
 
   return updateModelProviders
 }
+
+export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText: string) => {
+  const exclude = useMemo(() => {
+    return providers.map(provider => provider.provider.replace(/(.+)\/([^/]+)$/, '$1'))
+  }, [providers])
+  const [collectionPlugins, setCollectionPlugins] = useState<Plugin[]>([])
+
+  const {
+    plugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading,
+  } = useMarketplacePlugins()
+
+  const getCollectionPlugins = useCallback(async () => {
+    const collectionPlugins = await getMarketplacePluginsByCollectionId('__model-settings-pinned-models')
+
+    setCollectionPlugins(collectionPlugins)
+  }, [])
+
+  useEffect(() => {
+    getCollectionPlugins()
+  }, [getCollectionPlugins])
+
+  useEffect(() => {
+    if (searchText) {
+      queryPluginsWithDebounced({
+        query: searchText,
+        category: PluginType.model,
+        exclude,
+        type: 'plugin',
+        sortBy: 'install_count',
+        sortOrder: 'DESC',
+      })
+    }
+    else {
+      queryPlugins({
+        query: '',
+        category: PluginType.model,
+        type: 'plugin',
+        pageSize: 1000,
+        exclude,
+        sortBy: 'install_count',
+        sortOrder: 'DESC',
+      })
+    }
+  }, [queryPlugins, queryPluginsWithDebounced, searchText, exclude])
+
+  const allPlugins = useMemo(() => {
+    const allPlugins = [...collectionPlugins.filter(plugin => !exclude.includes(plugin.plugin_id))]
+
+    if (plugins?.length) {
+      for (let i = 0; i < plugins.length; i++) {
+        const plugin = plugins[i]
+
+        if (plugin.type !== 'bundle' && !allPlugins.find(p => p.plugin_id === plugin.plugin_id))
+          allPlugins.push(plugin)
+      }
+    }
+
+    return allPlugins
+  }, [plugins, collectionPlugins, exclude])
+
+  return {
+    plugins: allPlugins,
+    isLoading,
+  }
+}
+
+export const useModelModalHandler = () => {
+  const setShowModelModal = useModalContextSelector(state => state.setShowModelModal)
+  const updateModelProviders = useUpdateModelProviders()
+  const updateModelList = useUpdateModelList()
+  const { eventEmitter } = useEventEmitterContextContext()
+
+  return (
+    provider: ModelProvider,
+    configurationMethod: ConfigurationMethodEnum,
+    CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
+  ) => {
+    setShowModelModal({
+      payload: {
+        currentProvider: provider,
+        currentConfigurationMethod: configurationMethod,
+        currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
+      },
+      onSaveCallback: () => {
+        updateModelProviders()
+
+        provider.supported_model_types.forEach((type) => {
+          updateModelList(type)
+        })
+
+        if (configurationMethod === ConfigurationMethodEnum.customizableModel
+            && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
+          eventEmitter?.emit({
+            type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
+            payload: provider.provider,
+          } as any)
+
+          if (CustomConfigurationModelFixedFields?.__model_type)
+            updateModelList(CustomConfigurationModelFixedFields.__model_type)
+        }
+      },
+    })
+  }
+}

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

@@ -1,39 +1,53 @@
-import { useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import { useDebounce } from 'ahooks'
+import {
+  RiAlertFill,
+  RiArrowDownSLine,
+  RiArrowRightUpLine,
+  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 ProviderAddedCard from './provider-added-card'
 import type {
+  ConfigurationMethodEnum,
   CustomConfigurationModelFixedFields,
+
   ModelProvider,
 } from './declarations'
 import {
-  ConfigurationMethodEnum,
   CustomConfigurationStatusEnum,
   ModelTypeEnum,
 } from './declarations'
 import {
   useDefaultModel,
-  useUpdateModelList,
-  useUpdateModelProviders,
+  useMarketplaceAllPlugins,
+  useModelModalHandler,
 } from './hooks'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
+import Divider from '@/app/components/base/divider'
+import Loading from '@/app/components/base/loading'
+import ProviderCard from '@/app/components/plugins/provider-card'
+import List from '@/app/components/plugins/marketplace/list'
 import { useProviderContext } from '@/context/provider-context'
-import { useModalContextSelector } from '@/context/modal-context'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
+import type { Plugin } from '@/app/components/plugins/types'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
+import cn from '@/utils/classnames'
+import { getLocaleOnClient } from '@/i18n'
 
-const ModelProviderPage = () => {
+type Props = {
+  searchText: string
+}
+
+const ModelProviderPage = ({ searchText }: Props) => {
+  const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
-  const { eventEmitter } = useEventEmitterContextContext()
-  const updateModelProviders = useUpdateModelProviders()
-  const updateModelList = useUpdateModelList()
   const { data: textGenerationDefaultModel } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel } = useDefaultModel(ModelTypeEnum.rerank)
   const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: ttsDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
   const { modelProviders: providers } = useProviderContext()
-  const setShowModelModal = useModalContextSelector(state => state.setShowModelModal)
   const defaultModelNotConfigured = !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []
@@ -54,97 +68,125 @@ const ModelProviderPage = () => {
 
     return [configuredProviders, notConfiguredProviders]
   }, [providers])
+  const [filteredConfiguredProviders, filteredNotConfiguredProviders] = useMemo(() => {
+    const filteredConfiguredProviders = configuredProviders.filter(
+      provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
+        || Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
+    )
+    const filteredNotConfiguredProviders = notConfiguredProviders.filter(
+      provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
+        || Object.values(provider.label).some(text => text.toLowerCase().includes(debouncedSearchText.toLowerCase())),
+    )
 
-  const handleOpenModal = (
-    provider: ModelProvider,
-    configurateMethod: ConfigurationMethodEnum,
-    CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
-  ) => {
-    setShowModelModal({
-      payload: {
-        currentProvider: provider,
-        currentConfigurationMethod: configurateMethod,
-        currentCustomConfigurationModelFixedFields: CustomConfigurationModelFixedFields,
-      },
-      onSaveCallback: () => {
-        updateModelProviders()
+    return [filteredConfiguredProviders, filteredNotConfiguredProviders]
+  }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
-        if (configurateMethod === ConfigurationMethodEnum.predefinedModel) {
-          provider.supported_model_types.forEach((type) => {
-            updateModelList(type)
-          })
-        }
+  const handleOpenModal = useModelModalHandler()
+  const [collapse, setCollapse] = useState(false)
+  const locale = getLocaleOnClient()
+  const {
+    plugins: allPlugins,
+    isLoading: isAllPluginsLoading,
+  } = useMarketplaceAllPlugins(providers, searchText)
 
-        if (configurateMethod === ConfigurationMethodEnum.customizableModel && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
-          eventEmitter?.emit({
-            type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-            payload: provider.provider,
-          } as any)
+  const cardRender = useCallback((plugin: Plugin) => {
+    if (plugin.type === 'bundle')
+      return null
 
-          if (CustomConfigurationModelFixedFields?.__model_type)
-            updateModelList(CustomConfigurationModelFixedFields?.__model_type)
-        }
-      },
-    })
-  }
+    return <ProviderCard key={plugin.plugin_id} payload={plugin} />
+  }, [])
 
   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-px 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 && (
-          <div className='pb-3'>
-            {
-              configuredProviders?.map(provider => (
-                <ProviderAddedCard
-                  key={provider.provider}
-                  provider={provider}
-                  onOpenModal={(configurateMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurateMethod, currentCustomConfigurationModelFixedFields)}
-                />
-              ))
-            }
+      {!filteredConfiguredProviders?.length && (
+        <div className='mb-2 p-4 rounded-[10px] bg-workflow-process-bg'>
+          <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>
-        )
-      }
-      {
-        !!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={(configurateMethod: ConfigurationMethodEnum) => handleOpenModal(provider, configurateMethod)}
-                  />
-                ))
-              }
-            </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>
+      )}
+      {!!filteredConfiguredProviders?.length && (
+        <div className='relative'>
+          {filteredConfiguredProviders?.map(provider => (
+            <ProviderAddedCard
+              key={provider.provider}
+              provider={provider}
+              onOpenModal={(configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurationMethod, currentCustomConfigurationModelFixedFields)}
+            />
+          ))}
+        </div>
+      )}
+      {!!filteredNotConfiguredProviders?.length && (
+        <>
+          <div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.toBeConfigured')}</div>
+          <div className='relative'>
+            {filteredNotConfiguredProviders?.map(provider => (
+              <ProviderAddedCard
+                notConfigured
+                key={provider.provider}
+                provider={provider}
+                onOpenModal={(configurationMethod: ConfigurationMethodEnum, currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields) => handleOpenModal(provider, configurationMethod, currentCustomConfigurationModelFixedFields)}
+              />
+            ))}
+          </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={`${MARKETPLACE_URL_PREFIX}`} className='inline-flex items-center system-sm-medium text-text-accent'>
+              {t('plugin.marketplace.difyMarketplace')}
+              <RiArrowRightUpLine className='w-4 h-4' />
+            </Link>
+          </div>
+        </div>
+        {!collapse && isAllPluginsLoading && <Loading type='area' />}
+        {
+          !isAllPluginsLoading && !collapse && (
+            <List
+              marketplaceCollections={[]}
+              marketplaceCollectionPluginsMap={{}}
+              plugins={allPlugins}
+              showInstallButton
+              locale={locale}
+              cardContainerClassName='grid grid-cols-2 gap-2'
+              cardRender={cardRender}
+              emptyClassName='h-auto'
+            />
+          )
+        }
+      </div>
     </div>
   )
 }

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

@@ -4,40 +4,45 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { useLanguage } from '../hooks'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm'
+import cn from '@/utils/classnames'
+import { renderI18nObject } from '@/hooks/use-i18n'
 
 type ModelIconProps = {
   provider?: Model | ModelProvider
   modelName?: string
   className?: string
+  isDeprecated?: boolean
 }
 const ModelIcon: FC<ModelIconProps> = ({
   provider,
   className,
   modelName,
+  isDeprecated = false,
 }) => {
   const language = useLanguage()
-
-  if (provider?.provider === 'openai' && (modelName?.startsWith('gpt-4') || modelName?.includes('4o')))
-    return <OpenaiViolet className={`w-4 h-4 ${className}`}/>
+  if (provider?.provider.includes('openai') && modelName?.includes('gpt-4o'))
+    return <div className='flex items-center justify-center'><OpenaiBlue className={cn('w-5 h-5', className)} /></div>
+  if (provider?.provider.includes('openai') && modelName?.startsWith('gpt-4'))
+    return <div className='flex items-center justify-center'><OpenaiViolet className={cn('w-5 h-5', className)} /></div>
 
   if (provider?.icon_small) {
     return (
-      <img
-        alt='model-icon'
-        src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
-        className={`w-4 h-4 ${className}`}
-      />
+      <div className={cn('flex items-center justify-center w-5 h-5', isDeprecated && 'opacity-50', className)}>
+        <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)}/>
+      </div>
     )
   }
 
   return (
-    <div className={`
-      flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50
-      ${className}
-    `}>
-      <CubeOutline className='w-4 h-4 text-gray-400' />
+    <div className={cn(
+      'flex items-center justify-center rounded-md border-[0.5px] w-5 h-5 border-components-panel-border-subtle bg-background-default-subtle',
+      className,
+    )}>
+      <div className='flex w-5 h-5 items-center justify-center opacity-35'>
+        <Group className='text-text-tertiary w-3 h-3' />
+      </div>
     </div>
   )
 }

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

@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import type { FC } from 'react'
+import { useCallback, useState } from 'react'
+import type { ReactNode } from 'react'
 import { ValidatingTip } from '../../key-validator/ValidateStatus'
 import type {
   CredentialFormSchema,
@@ -17,24 +17,48 @@ import cn from '@/utils/classnames'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 import Radio from '@/app/components/base/radio'
-type FormProps = {
+import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import RadioE from '@/app/components/base/radio/ui'
+import type {
+  NodeOutPutVar,
+} from '@/app/components/workflow/types'
+import type { Node } from 'reactflow'
+
+type FormProps<
+  CustomFormSchema extends Omit<CredentialFormSchema, 'type'> & { type: string } = never,
+> = {
   className?: string
   itemClassName?: string
   fieldLabelClassName?: string
   value: FormValue
   onChange: (val: FormValue) => void
-  formSchemas: CredentialFormSchema[]
+  formSchemas: Array<CredentialFormSchema | CustomFormSchema>
   validating: boolean
   validatedSuccess?: boolean
   showOnVariableMap: Record<string, string[]>
   isEditMode: boolean
+  isAgentStrategy?: boolean
   readonly?: boolean
   inputClassName?: string
   isShowDefaultValue?: boolean
-  fieldMoreInfo?: (payload: CredentialFormSchema) => JSX.Element | null
+  fieldMoreInfo?: (payload: CredentialFormSchema | CustomFormSchema) => ReactNode
+  customRenderField?: (
+    formSchema: CustomFormSchema,
+    props: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'>
+  ) => ReactNode
+  // If return falsy value, this field will fallback to default render
+  override?: [Array<FormTypeEnum>, (formSchema: CredentialFormSchema, props: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'>) => ReactNode]
+  nodeId?: string
+  nodeOutputVars?: NodeOutPutVar[],
+  availableNodes?: Node[],
 }
 
-const Form: FC<FormProps> = ({
+function Form<
+  CustomFormSchema extends Omit<CredentialFormSchema, 'type'> & { type: string } = never,
+>({
   className,
   itemClassName,
   fieldLabelClassName,
@@ -45,13 +69,35 @@ const Form: FC<FormProps> = ({
   validatedSuccess,
   showOnVariableMap,
   isEditMode,
+  isAgentStrategy = false,
   readonly,
   inputClassName,
   isShowDefaultValue = false,
   fieldMoreInfo,
-}) => {
+  customRenderField,
+  override,
+  nodeId,
+  nodeOutputVars,
+  availableNodes,
+}: FormProps<CustomFormSchema>) {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
+  const filteredProps: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'> = {
+    className,
+    itemClassName,
+    fieldLabelClassName,
+    value,
+    onChange,
+    formSchemas,
+    validating,
+    validatedSuccess,
+    showOnVariableMap,
+    isEditMode,
+    readonly,
+    inputClassName,
+    isShowDefaultValue,
+    fieldMoreInfo,
+  }
 
   const handleFormChange = (key: string, val: string | boolean) => {
     if (isEditMode && (key === '__model_type' || key === '__model_name'))
@@ -68,25 +114,37 @@ const Form: FC<FormProps> = ({
     onChange({ ...value, [key]: val, ...shouldClearVariable })
   }
 
-  const renderField = (formSchema: CredentialFormSchema) => {
+  const handleModelChanged = useCallback((key: string, model: any) => {
+    const newValue = {
+      ...value[key],
+      ...model,
+      type: FormTypeEnum.modelSelector,
+    }
+    onChange({ ...value, [key]: newValue })
+  }, [onChange, value])
+
+  const renderField = (formSchema: CredentialFormSchema | CustomFormSchema) => {
     const tooltip = formSchema.tooltip
     const tooltipContent = (tooltip && (
       <Tooltip
-        popupContent={
-          <div className='w-[200px]'>
-            {tooltip[language] || tooltip.en_US}
-          </div>}
+        popupContent={<div className='w-[200px]'>
+          {tooltip[language] || tooltip.en_US}
+        </div>}
         triggerClassName='ml-1 w-4 h-4'
-        asChild={false}
-      />
+        asChild={false} />
     ))
+    if (override) {
+      const [overrideTypes, overrideRender] = override
+      if (overrideTypes.includes(formSchema.type as FormTypeEnum)) {
+        const node = overrideRender(formSchema as CredentialFormSchema, filteredProps)
+        if (node)
+          return node
+      }
+    }
+
     if (formSchema.type === FormTypeEnum.textInput || formSchema.type === FormTypeEnum.secretInput || formSchema.type === FormTypeEnum.textNumber) {
       const {
-        variable,
-        label,
-        placeholder,
-        required,
-        show_on,
+        variable, label, placeholder, required, show_on,
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
 
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
@@ -95,13 +153,11 @@ const Form: FC<FormProps> = ({
       const disabled = readonly || (isEditMode && (variable === '__model_type' || variable === '__model_name'))
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
-            {
-              required && (
-                <span className='ml-1 text-red-500'>*</span>
-              )
-            }
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
             {tooltipContent}
           </div>
           <Input
@@ -112,8 +168,7 @@ const Form: FC<FormProps> = ({
             placeholder={placeholder?.[language] || placeholder?.en_US}
             disabled={disabled}
             type={formSchema.type === FormTypeEnum.textNumber ? 'number' : 'text'}
-            {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})}
-          />
+            {...(formSchema.type === FormTypeEnum.textNumber ? { min: (formSchema as CredentialFormSchemaNumberInput).min, max: (formSchema as CredentialFormSchemaNumberInput).max } : {})} />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
@@ -122,11 +177,7 @@ const Form: FC<FormProps> = ({
 
     if (formSchema.type === FormTypeEnum.radio) {
       const {
-        options,
-        variable,
-        label,
-        show_on,
-        required,
+        options, variable, label, show_on, required,
       } = formSchema as CredentialFormSchemaRadio
 
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
@@ -136,40 +187,34 @@ const Form: FC<FormProps> = ({
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
-            {
-              required && (
-                <span className='ml-1 text-red-500'>*</span>
-              )
-            }
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
             {tooltipContent}
           </div>
           <div className={`grid grid-cols-${options?.length} gap-3`}>
-            {
-              options.filter((option) => {
-                if (option.show_on.length)
-                  return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
+            {options.filter((option) => {
+              if (option.show_on.length)
+                return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
 
-                return true
-              }).map(option => (
-                <div
-                  className={`
-                    flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
-                    ${value[variable] === option.value && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
+              return true
+            }).map(option => (
+              <div
+                className={`
+                    flex items-center gap-2 px-3 py-2 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer
+                    ${value[variable] === option.value && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border shadow-sm'}
                     ${disabled && '!cursor-not-allowed opacity-60'}
                   `}
-                  onClick={() => handleFormChange(variable, option.value)}
-                  key={`${variable}-${option.value}`}
-                >
-                  <div className={`
-                    flex justify-center items-center mr-2 w-4 h-4 border border-gray-300 rounded-full
-                    ${value[variable] === option.value && 'border-[5px] border-primary-600'}
-                  `} />
-                  <div className='text-sm text-gray-900'>{option.label[language] || option.label.en_US}</div>
-                </div>
-              ))
-            }
+                onClick={() => handleFormChange(variable, option.value)}
+                key={`${variable}-${option.value}`}
+              >
+                <RadioE isChecked={value[variable] === option.value} />
+
+                <div className='system-sm-regular text-text-secondary'>{option.label[language] || option.label.en_US}</div>
+              </div>
+            ))}
           </div>
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
@@ -177,14 +222,9 @@ const Form: FC<FormProps> = ({
       )
     }
 
-    if (formSchema.type === 'select') {
+    if (formSchema.type === FormTypeEnum.select) {
       const {
-        options,
-        variable,
-        label,
-        show_on,
-        required,
-        placeholder,
+        options, variable, label, show_on, required, placeholder,
       } = formSchema as CredentialFormSchemaSelect
 
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
@@ -192,17 +232,16 @@ const Form: FC<FormProps> = ({
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
             {label[language] || label.en_US}
 
-            {
-              required && (
-                <span className='ml-1 text-red-500'>*</span>
-              )
-            }
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
             {tooltipContent}
           </div>
           <SimpleSelect
+            wrapperClassName='h-8'
             className={cn(inputClassName)}
             disabled={readonly}
             defaultValue={(isShowDefaultValue && ((value[variable] as string) === '' || value[variable] === undefined || value[variable] === null)) ? formSchema.default : value[variable]}
@@ -213,20 +252,16 @@ const Form: FC<FormProps> = ({
               return true
             }).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
             onSelect={item => handleFormChange(variable, item.value as string)}
-            placeholder={placeholder?.[language] || placeholder?.en_US}
-          />
+            placeholder={placeholder?.[language] || placeholder?.en_US} />
           {fieldMoreInfo?.(formSchema)}
           {validating && changeKey === variable && <ValidatingTip />}
         </div>
       )
     }
 
-    if (formSchema.type === 'boolean') {
+    if (formSchema.type === FormTypeEnum.boolean) {
       const {
-        variable,
-        label,
-        show_on,
-        required,
+        variable, label, show_on, required,
       } = formSchema as CredentialFormSchemaRadio
 
       if (show_on.length && !show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
@@ -234,14 +269,12 @@ const Form: FC<FormProps> = ({
 
       return (
         <div key={variable} className={cn(itemClassName, 'py-3')}>
-          <div className='flex items-center justify-between py-2 text-sm text-gray-900'>
+          <div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
             <div className='flex items-center space-x-2'>
-              <span className={cn(fieldLabelClassName, 'flex items-center py-2 text-sm text-gray-900')}>{label[language] || label.en_US}</span>
-              {
-                required && (
-                  <span className='ml-1 text-red-500'>*</span>
-                )
-              }
+              <span className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-regular text-text-secondary')}>{label[language] || label.en_US}</span>
+              {required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )}
               {tooltipContent}
             </div>
             <Radio.Group
@@ -257,13 +290,130 @@ const Form: FC<FormProps> = ({
         </div>
       )
     }
+
+    if (formSchema.type === FormTypeEnum.modelSelector) {
+      const {
+        variable, label, required, scope,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
+            {tooltipContent}
+          </div>
+          <ModelParameterModal
+            popupClassName='!w-[387px]'
+            isAdvancedMode
+            isInWorkflow
+            isAgentStrategy={isAgentStrategy}
+            value={value[variable]}
+            setModel={model => handleModelChanged(variable, model)}
+            readonly={readonly}
+            scope={scope} />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === FormTypeEnum.toolSelector) {
+      const {
+        variable,
+        label,
+        required,
+        scope,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
+            {tooltipContent}
+          </div>
+          <ToolSelector
+            scope={scope}
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars || []}
+            availableNodes={availableNodes || []}
+            disabled={readonly}
+            value={value[variable]}
+            // selectedTools={value[variable] ? [value[variable]] : []}
+            onSelect={item => handleFormChange(variable, item as any)}
+            onDelete={() => handleFormChange(variable, null as any)}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === FormTypeEnum.multiToolSelector) {
+      const {
+        variable,
+        label,
+        tooltip,
+        required,
+        scope,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <MultipleToolSelector
+            disabled={readonly}
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars || []}
+            availableNodes={availableNodes || []}
+            scope={scope}
+            label={label[language] || label.en_US}
+            required={required}
+            tooltip={tooltip?.[language] || tooltip?.en_US}
+            value={value[variable] || []}
+            onChange={item => handleFormChange(variable, item as any)}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    if (formSchema.type === FormTypeEnum.appSelector) {
+      const {
+        variable, label, required, scope,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
+            {tooltipContent}
+          </div>
+          <AppSelector
+            disabled={readonly}
+            scope={scope}
+            value={value[variable]}
+            onSelect={item => handleFormChange(variable, { ...item, type: FormTypeEnum.appSelector } as any)} />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
+    // @ts-expect-error it work
+    if (!Object.values(FormTypeEnum).includes(formSchema.type))
+      return customRenderField?.(formSchema as CustomFormSchema, filteredProps)
   }
 
   return (
     <div className={className}>
-      {
-        formSchemas.map(formSchema => renderField(formSchema))
-      }
+      {formSchemas.map(formSchema => renderField(formSchema))}
     </div>
   )
 }

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

@@ -26,14 +26,14 @@ const Input: FC<InputProps> = ({
   max,
 }) => {
   const toLimit = (v: string) => {
-    const minNum = parseFloat(`${min}`)
-    const maxNum = parseFloat(`${max}`)
-    if (!isNaN(minNum) && parseFloat(v) < minNum) {
+    const minNum = Number.parseFloat(`${min}`)
+    const maxNum = Number.parseFloat(`${max}`)
+    if (!isNaN(minNum) && Number.parseFloat(v) < minNum) {
       onChange(`${min}`)
       return
     }
 
-    if (!isNaN(maxNum) && parseFloat(v) > maxNum)
+    if (!isNaN(maxNum) && Number.parseFloat(v) > maxNum)
       onChange(`${max}`)
   }
   return (
@@ -41,11 +41,11 @@ const Input: FC<InputProps> = ({
       <input
         tabIndex={0}
         className={`
-          block px-3 w-full h-9 bg-gray-100 text-sm rounded-lg border border-transparent
+          block px-3 w-full h-8 bg-components-input-bg-normal text-sm text-components-input-text-filled rounded-lg border border-transparent
           appearance-none outline-none caret-primary-600
-          hover:border-[rgba(0,0,0,0.08)] hover:bg-gray-50
-          focus:bg-white focus:border-gray-300 focus:shadow-xs
-          placeholder:text-sm placeholder:text-gray-400
+          hover:border-components-input-border-hover hover:bg-components-input-bg-hover
+          focus:bg-components-input-bg-active focus:border-components-input-border-active focus:shadow-xs
+          placeholder:text-sm placeholder:text-text-tertiary
           ${validated && 'pr-[30px]'}
           ${className}
         `}

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

@@ -35,7 +35,6 @@ import {
   useLanguage,
   useProviderCredentialsAndLoadBalancing,
 } from '../hooks'
-import ProviderIcon from '../provider-icon'
 import { useValidate } from '../../key-validator/hooks'
 import { ValidatedStatus } from '../../key-validator/declarations'
 import ModelLoadBalancingConfigs from '../provider-added-card/model-load-balancing-configs'
@@ -280,11 +279,10 @@ const ModelModal: FC<ModelModalProps> = ({
     <PortalToFollowElem open>
       <PortalToFollowElemContent className='w-full h-full z-[60]'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
             <div className='px-8 pt-8'>
-              <div className='flex justify-between items-center mb-2'>
-                <div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div>
-                <ProviderIcon provider={provider} />
+              <div className='flex items-center mb-2'>
+                <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
               </div>
 
               <Form
@@ -297,7 +295,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 isEditMode={isEditMode}
               />
 
-              <div className='mt-1 mb-4 border-t-[0.5px] border-t-gray-100' />
+              <div className='mt-1 mb-4 border-t-[0.5px] border-t-divider-regular' />
               <ModelLoadBalancingConfigs withSwitch {...{
                 draftConfig,
                 setDraftConfig,
@@ -306,7 +304,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 configurationMethod: configurateMethod,
               }} />
 
-              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-white'>
+              <div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-components-panel-bg'>
                 {
                   (provider.help && (provider.help.title || provider.help.url))
                     ? (
@@ -326,8 +324,9 @@ const ModelModal: FC<ModelModalProps> = ({
                   {
                     isEditMode && (
                       <Button
+                        variant='warning'
                         size='large'
-                        className='mr-2 text-[#D92D20]'
+                        className='mr-2'
                         onClick={() => setShowConfirm(true)}
                       >
                         {t('common.operation.remove')}
@@ -357,21 +356,21 @@ const ModelModal: FC<ModelModalProps> = ({
                 </div>
               </div>
             </div>
-            <div className='border-t-[0.5px] border-t-black/5'>
+            <div className='border-t-[0.5px] border-t-divider-regular'>
               {
                 (validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
                   ? (
-                    <div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
+                    <div className='flex px-[10px] py-3 bg-background-section-burn text-xs text-[#D92D20]'>
                       <RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
                       {validatedStatusState.message}
                     </div>
                   )
                   : (
-                    <div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
-                      <Lock01 className='mr-1 w-3 h-3 text-gray-500' />
+                    <div className='flex justify-center items-center py-3 bg-background-section-burn text-xs text-text-tertiary'>
+                      <Lock01 className='mr-1 w-3 h-3 text-text-tertiary' />
                       {t('common.modelProvider.encrypted.front')}
                       <a
-                        className='text-primary-600 mx-1'
+                        className='text-text-accent mx-1'
                         target='_blank' rel='noopener noreferrer'
                         href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
                       >

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

@@ -37,43 +37,45 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('flex items-center truncate text-components-input-text-filled system-sm-regular', className)}>
+    <div className={cn('flex gap-0.5 items-center overflow-hidden text-ellipsis truncate text-components-input-text-filled system-sm-regular', className)}>
       <div
         className='truncate'
         title={modelItem.label[language] || modelItem.label.en_US}
       >
         {modelItem.label[language] || modelItem.label.en_US}
       </div>
-      {
-        showModelType && modelItem.model_type && (
-          <ModelBadge className={cn('ml-1', modelTypeClassName)}>
-            {modelTypeFormat(modelItem.model_type)}
-          </ModelBadge>
-        )
-      }
-      {
-        modelItem.model_properties.mode && showMode && (
-          <ModelBadge className={cn('ml-1', modeClassName)}>
-            {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
-          </ModelBadge>
-        )
-      }
-      {
-        showFeatures && modelItem.features?.map(feature => (
-          <FeatureIcon
-            key={feature}
-            feature={feature}
-            className={featuresClassName}
-          />
-        ))
-      }
-      {
-        showContextSize && modelItem.model_properties.context_size && (
-          <ModelBadge className='ml-1'>
-            {sizeFormat(modelItem.model_properties.context_size as number)}
-          </ModelBadge>
-        )
-      }
+      <div className='flex items-center gap-0.5'>
+        {
+          showModelType && modelItem.model_type && (
+            <ModelBadge className={modelTypeClassName}>
+              {modelTypeFormat(modelItem.model_type)}
+            </ModelBadge>
+          )
+        }
+        {
+          modelItem.model_properties.mode && showMode && (
+            <ModelBadge className={modeClassName}>
+              {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+            </ModelBadge>
+          )
+        }
+        {
+          showFeatures && modelItem.features?.map(feature => (
+            <FeatureIcon
+              key={feature}
+              feature={feature}
+              className={featuresClassName}
+            />
+          ))
+        }
+        {
+          showContextSize && modelItem.model_properties.context_size && (
+            <ModelBadge>
+              {sizeFormat(modelItem.model_properties.context_size as number)}
+            </ModelBadge>
+          )
+        }
+      </div>
       {children}
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx

@@ -0,0 +1,154 @@
+import type { FC } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  ModelItem,
+  ModelProvider,
+} from '../declarations'
+import {
+  CustomConfigurationStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import ConfigurationButton from './configuration-button'
+import Loading from '@/app/components/base/loading'
+import {
+  useModelModalHandler,
+  useUpdateModelList,
+  useUpdateModelProviders,
+} from '../hooks'
+import ModelIcon from '../model-icon'
+import ModelDisplay from './model-display'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
+import StatusIndicators from './status-indicators'
+import cn from '@/utils/classnames'
+import { useProviderContext } from '@/context/provider-context'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { useModelInList, usePluginInfo } from '@/service/use-plugins'
+
+export type AgentModelTriggerProps = {
+  open?: boolean
+  disabled?: boolean
+  currentProvider?: ModelProvider
+  currentModel?: ModelItem
+  providerName?: string
+  modelId?: string
+  hasDeprecated?: boolean
+  scope?: string
+}
+
+const AgentModelTrigger: FC<AgentModelTriggerProps> = ({
+  disabled,
+  currentProvider,
+  currentModel,
+  providerName,
+  modelId,
+  hasDeprecated,
+  scope,
+}) => {
+  const { t } = useTranslation()
+  const { modelProviders } = useProviderContext()
+  const updateModelProviders = useUpdateModelProviders()
+  const updateModelList = useUpdateModelList()
+  const { modelProvider, needsConfiguration } = useMemo(() => {
+    const modelProvider = modelProviders.find(item => item.provider === providerName)
+    const needsConfiguration = modelProvider?.custom_configuration.status === CustomConfigurationStatusEnum.noConfigure && !(
+      modelProvider.system_configuration.enabled === true
+      && modelProvider.system_configuration.quota_configurations.find(
+        item => item.quota_type === modelProvider.system_configuration.current_quota_type,
+      )
+    )
+    return {
+      modelProvider,
+      needsConfiguration,
+    }
+  }, [modelProviders, providerName])
+  const [installed, setInstalled] = useState(false)
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const handleOpenModal = useModelModalHandler()
+
+  const { data: inModelList = false } = useModelInList(currentProvider, modelId)
+  const { data: pluginInfo, isLoading: isPluginLoading } = usePluginInfo(providerName)
+
+  if (modelId && isPluginLoading)
+    return <Loading />
+
+  return (
+    <div
+      className={cn(
+        'relative group flex items-center p-1 gap-[2px] flex-grow rounded-lg bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+      )}
+    >
+      {modelId ? (
+        <>
+          <ModelIcon
+            className='p-0.5'
+            provider={currentProvider || modelProvider}
+            modelName={currentModel?.model || modelId}
+            isDeprecated={hasDeprecated}
+          />
+          <ModelDisplay
+            currentModel={currentModel}
+            modelId={modelId}
+          />
+          {needsConfiguration && (
+            <ConfigurationButton
+              modelProvider={modelProvider}
+              handleOpenModal={handleOpenModal}
+            />
+          )}
+          <StatusIndicators
+            needsConfiguration={needsConfiguration}
+            modelProvider={!!modelProvider}
+            inModelList={inModelList}
+            disabled={!!disabled}
+            pluginInfo={pluginInfo}
+            t={t}
+          />
+          {!installed && !modelProvider && pluginInfo && (
+            <InstallPluginButton
+              onClick={e => e.stopPropagation()}
+              size={'small'}
+              uniqueIdentifier={pluginInfo.latest_package_identifier}
+              onSuccess={() => {
+                [
+                  ModelTypeEnum.textGeneration,
+                  ModelTypeEnum.textEmbedding,
+                  ModelTypeEnum.rerank,
+                  ModelTypeEnum.moderation,
+                  ModelTypeEnum.speech2text,
+                  ModelTypeEnum.tts,
+                ].forEach((type: ModelTypeEnum) => {
+                  if (scope?.includes(type))
+                    updateModelList(type)
+                },
+                )
+                updateModelProviders()
+                invalidateInstalledPluginList()
+                setInstalled(true)
+              }}
+            />
+          )}
+          {modelProvider && !disabled && !needsConfiguration && (
+            <div className="flex pr-1 items-center">
+              <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+            </div>
+          )}
+        </>
+      ) : (
+        <>
+          <div className="flex p-1 pl-2 items-center gap-1 grow">
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular text-components-input-text-placeholder">
+              {t('workflow.nodes.agent.configureModel')}
+            </span>
+          </div>
+          <div className="flex pr-1 items-center">
+            <RiEqualizer2Line className="w-4 h-4 text-text-tertiary group-hover:text-text-secondary" />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default AgentModelTrigger

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/configuration-button.tsx

@@ -0,0 +1,32 @@
+import Button from '@/app/components/base/button'
+import { ConfigurationMethodEnum } from '../declarations'
+import { useTranslation } from 'react-i18next'
+
+type ConfigurationButtonProps = {
+  modelProvider: any
+  handleOpenModal: any
+}
+
+const ConfigurationButton = ({ modelProvider, handleOpenModal }: ConfigurationButtonProps) => {
+  const { t } = useTranslation()
+  return (
+    <Button
+      size="small"
+      className="z-[100]"
+      onClick={(e) => {
+        e.stopPropagation()
+        handleOpenModal(modelProvider, ConfigurationMethodEnum.predefinedModel, undefined)
+      }}
+    >
+      <div className="flex px-[3px] justify-center items-center gap-1">
+        {t('workflow.nodes.agent.notAuthorized')}
+      </div>
+      <div className="flex w-[14px] h-[14px] justify-center items-center">
+        <div className="w-2 h-2 shrink-0 rounded-[3px] border border-components-badge-status-light-warning-border-inner
+          bg-components-badge-status-light-warning-bg shadow-components-badge-status-light-warning-halo" />
+      </div>
+    </Button>
+  )
+}
+
+export default ConfigurationButton

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

@@ -48,6 +48,7 @@ export type ModelParameterModalProps = {
   renderTrigger?: (v: TriggerProps) => ReactNode
   readonly?: boolean
   isInWorkflow?: boolean
+  scope?: string
 }
 const stopParameterRule: ModelParameterRule = {
   default: [],
@@ -68,7 +69,7 @@ const stopParameterRule: ModelParameterRule = {
   },
 }
 
-const PROVIDER_WITH_PRESET_TONE = ['openai', 'azure_openai']
+const PROVIDER_WITH_PRESET_TONE = ['langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
 const ModelParameterModal: FC<ModelParameterModalProps> = ({
   popupClassName,
   portalToFollowElemContentClassName,
@@ -84,6 +85,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   renderTrigger,
   readonly,
   isInWorkflow,
+  scope = 'text-generation',
 }) => {
   const { t } = useTranslation()
   const { isAPIKeySet } = useProviderContext()
@@ -190,26 +192,22 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               )
           }
         </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={cn(portalToFollowElemContentClassName, 'z-[60]')}>
-          <div className={cn(popupClassName, 'w-[496px] rounded-xl border border-gray-100 bg-white shadow-xl')}>
-            <div className={cn(
-              'max-h-[480px]  overflow-y-auto',
-              !isInWorkflow && 'px-10 pt-6 pb-8',
-              isInWorkflow && 'p-4')}>
-              <div className='flex items-center justify-between h-8'>
-                <div className={cn('font-semibold text-gray-900 shrink-0', isInWorkflow && 'text-[13px]')}>
+        <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
+          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
+            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
+              <div className='relative'>
+                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
                   {t('common.modelProvider.model').toLocaleUpperCase()}
                 </div>
                 <ModelSelector
                   defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
                   modelList={activeTextGenerationModelList}
                   onSelect={handleChangeModel}
-                  triggerClassName='max-w-[295px]'
                 />
               </div>
               {
                 !!parameterRules.length && (
-                  <div className='my-5 h-[1px] bg-gray-100' />
+                  <div className='my-3 h-[1px] bg-divider-subtle' />
                 )
               }
               {
@@ -219,8 +217,8 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               }
               {
                 !isLoading && !!parameterRules.length && (
-                  <div className='flex items-center justify-between mb-4'>
-                    <div className={cn('font-semibold text-gray-900', isInWorkflow && 'text-[13px]')}>{t('common.modelProvider.parameters')}</div>
+                  <div className='flex items-center justify-between mb-2'>
+                    <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
                     {
                       PROVIDER_WITH_PRESET_TONE.includes(provider) && (
                         <PresetsParameter onSelect={handleSelectPresetParameter} />
@@ -237,7 +235,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
                   ].map(parameter => (
                     <ParameterItem
                       key={`${modelId}-${parameter.name}`}
-                      className='mb-4'
                       parameterRule={parameter}
                       value={completionParams?.[parameter.name]}
                       onChange={v => handleParamChange(parameter.name, v)}
@@ -250,7 +247,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
             </div>
             {!hideDebugWithMultipleModel && (
               <div
-                className='flex items-center justify-between px-6 h-[50px] bg-gray-50 border-t border-t-gray-100 text-xs font-medium text-primary-600 cursor-pointer rounded-b-xl'
+                className='flex items-center justify-between px-4 h-[50px] bg-components-section-burn border-t border-t-divider-subtle system-sm-regular text-text-accent cursor-pointer rounded-b-xl'
                 onClick={() => onDebugWithMultipleModelChange?.()}
               >
                 {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/model-display.tsx

@@ -0,0 +1,25 @@
+import ModelName from '../model-name'
+
+type ModelDisplayProps = {
+  currentModel: any
+  modelId: string
+}
+
+const ModelDisplay = ({ currentModel, modelId }: ModelDisplayProps) => {
+  return currentModel ? (
+    <ModelName
+      className="flex px-1 py-[3px] items-center gap-1 grow"
+      modelItem={currentModel}
+      showMode
+      showFeatures
+    />
+  ) : (
+    <div className="flex py-[3px] px-1 items-center gap-1 grow opacity-50 truncate">
+      <div className="text-components-input-text-filled text-ellipsis overflow-hidden system-sm-regular">
+        {modelId}
+      </div>
+    </div>
+  )
+}
+
+export default ModelDisplay

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -17,7 +17,6 @@ type ParameterItemProps = {
   parameterRule: ModelParameterRule
   value?: ParameterValue
   onChange?: (value: ParameterValue) => void
-  className?: string
   onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
   isInWorkflow?: boolean
 }
@@ -25,7 +24,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
   parameterRule,
   value,
   onChange,
-  className,
   onSwitch,
   isInWorkflow,
 }) => {
@@ -150,7 +148,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -175,7 +173,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
           />}
           <input
             ref={numberInputRef}
-            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900'
+            className='shrink-0 block ml-4 pl-3 w-16 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
             type='number'
             max={parameterRule.max}
             min={parameterRule.min}
@@ -190,12 +188,12 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'boolean') {
       return (
         <Radio.Group
-          className='w-[200px] flex items-center'
+          className='w-[178px] flex items-center'
           value={renderValue ? 1 : 0}
           onChange={handleRadioChange}
         >
-          <Radio value={1} className='!mr-1 w-[94px]'>True</Radio>
-          <Radio value={0} className='w-[94px]'>False</Radio>
+          <Radio value={1} className='w-[83px]'>True</Radio>
+          <Radio value={0} className='w-[83px]'>False</Radio>
         </Radio.Group>
       )
     }
@@ -203,7 +201,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'string' && !parameterRule.options?.length) {
       return (
         <input
-          className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-gray-100 text-[13px] text-gra-900')}
+          className={cn(isInWorkflow ? 'w-[178px]' : 'w-full', 'ml-4 flex items-center px-3 h-8 appearance-none outline-none rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular')}
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -213,7 +211,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
     if (parameterRule.type === 'text') {
       return (
         <textarea
-          className='w-full h-20 ml-4 px-1 rounded-lg bg-gray-100 outline-none text-[12px] text-gray-900'
+          className='w-full h-20 ml-4 px-1 rounded-lg bg-components-input-bg-normal text-components-input-text-filled system-sm-regular'
           value={renderValue as string}
           onChange={handleStringInputChange}
         />
@@ -224,7 +222,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
       return (
         <SimpleSelect
           className='!py-0'
-          wrapperClassName={cn(isInWorkflow ? '!w-[200px]' : 'w-full', 'ml-4 !h-8')}
+          wrapperClassName={cn('w-full !h-8')}
           defaultValue={renderValue as string}
           onSelect={handleSelect}
           items={parameterRule.options.map(option => ({ value: option, name: option }))}
@@ -234,7 +232,7 @@ const ParameterItem: FC<ParameterItemProps> = ({
 
     if (parameterRule.type === 'tag') {
       return (
-        <div className={cn(isInWorkflow ? 'w-[200px]' : 'w-full', 'ml-4')}>
+        <div className={cn('w-full !h-8')}>
           <TagInput
             items={renderValue as string[]}
             onChange={handleTagChange}
@@ -249,11 +247,22 @@ const ParameterItem: FC<ParameterItemProps> = ({
   }
 
   return (
-    <div className={`flex items-center justify-between ${className}`}>
-      <div>
-        <div className={cn(isInWorkflow ? 'w-[140px]' : 'w-full', 'ml-4 shrink-0 flex items-center')}>
+    <div className='flex items-center justify-between mb-2'>
+      <div className='shrink-0 basis-1/2'>
+        <div className={cn('shrink-0 w-full flex items-center')}>
+          {
+            !parameterRule.required && parameterRule.name !== 'stop' && (
+              <div className='mr-2 w-7'>
+                <Switch
+                  defaultValue={!isNullOrUndefined(value)}
+                  onChange={handleSwitch}
+                  size='md'
+                />
+              </div>
+            )
+          }
           <div
-            className='mr-0.5 text-[13px] font-medium text-gray-700 truncate'
+            className='mr-0.5 system-xs-regular text-text-secondary truncate'
             title={parameterRule.label[language] || parameterRule.label.en_US}
           >
             {parameterRule.label[language] || parameterRule.label.en_US}
@@ -262,27 +271,17 @@ const ParameterItem: FC<ParameterItemProps> = ({
             parameterRule.help && (
               <Tooltip
                 popupContent={(
-                  <div className='w-[200px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div>
+                  <div className='w-[178px] whitespace-pre-wrap'>{parameterRule.help[language] || parameterRule.help.en_US}</div>
                 )}
                 popupClassName='mr-1'
                 triggerClassName='mr-1 w-4 h-4 shrink-0'
               />
             )
           }
-          {
-            !parameterRule.required && parameterRule.name !== 'stop' && (
-              <Switch
-                className='mr-1'
-                defaultValue={!isNullOrUndefined(value)}
-                onChange={handleSwitch}
-                size='md'
-              />
-            )
-          }
         </div>
         {
           parameterRule.type === 'tag' && (
-            <div className={cn(!isInWorkflow && 'w-[200px]', 'text-gray-400 text-xs font-normal')}>
+            <div className={cn(!isInWorkflow && 'w-[178px]', 'text-text-tertiary system-xs-regular')}>
               {parameterRule?.tagPlaceholder?.[language]}
             </div>
           )

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx

@@ -2,12 +2,13 @@ import type { FC } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 import Dropdown from '@/app/components/base/dropdown'
-import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { TONE_LIST } from '@/config'
+import cn from '@/utils/classnames'
 
 type PresetsParameterProps = {
   onSelect: (toneId: number) => void
@@ -18,19 +19,16 @@ const PresetsParameter: FC<PresetsParameterProps> = ({
   const { t } = useTranslation()
   const renderTrigger = useCallback((open: boolean) => {
     return (
-      <div
-        className={`
-          flex items-center px-[7px] h-7 rounded-md border-[0.5px] border-gray-200 shadow-xs
-          text-xs font-medium text-gray-700 cursor-pointer
-          ${open && 'bg-gray-100'}
-        `}
+      <Button
+        size={'small'}
+        variant={'secondary'}
+        className={cn(open && 'bg-state-base-hover')}
       >
-        <SlidersH className='mr-[5px] w-3.5 h-3.5 text-gray-500' />
         {t('common.modelProvider.loadPresets')}
-        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5 text-gray-500' />
-      </div>
+        <RiArrowDownSLine className='ml-0.5 w-3.5 h-3.5' />
+      </Button>
     )
-  }, [])
+  }, [t])
   const getToneIcon = (toneId: number) => {
     const className = 'mr-2 w-[14px] h-[14px]'
     const res = ({

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx

@@ -0,0 +1,99 @@
+import Tooltip from '@/app/components/base/tooltip'
+import Link from 'next/link'
+import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
+import { useInstalledPluginList } from '@/service/use-plugins'
+import { RiErrorWarningFill } from '@remixicon/react'
+
+type StatusIndicatorsProps = {
+  needsConfiguration: boolean
+  modelProvider: boolean
+  inModelList: boolean
+  disabled: boolean
+  pluginInfo: any
+  t: any
+}
+
+const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disabled, pluginInfo, t }: StatusIndicatorsProps) => {
+  const { data: pluginList } = useInstalledPluginList()
+  const renderTooltipContent = (title: string, description?: string, linkText?: string, linkHref?: string) => {
+    return (
+      <div className='flex w-[240px] max-w-[240px] gap-1 flex-col px-1 py-1.5' onClick={e => e.stopPropagation()}>
+        <div className='text-text-primary title-xs-semi-bold'>{title}</div>
+        {description && (
+          <div className='min-w-[200px] text-text-secondary body-xs-regular'>
+            {description}
+          </div>
+        )}
+        {linkText && linkHref && (
+          <div className='text-text-accent body-xs-regular cursor-pointer z-[100]'>
+            <Link
+              href={linkHref}
+              onClick={(e) => {
+                e.stopPropagation()
+              }}
+            >
+              {linkText}
+            </Link>
+          </div>
+        )}
+      </div>
+    )
+  }
+  // const installedPluginUniqueIdentifier = pluginList?.plugins.find(plugin => plugin.name === pluginInfo.name)?.plugin_unique_identifier
+  return (
+    <>
+      {/* plugin installed and model is in model list but disabled */}
+      {/* plugin installed from github/local and model is not in model list */}
+      {!needsConfiguration && modelProvider && disabled && (
+        <>
+          {inModelList ? (
+            <Tooltip
+              popupContent={t('workflow.nodes.agent.modelSelectorTooltips.deprecated')}
+              asChild={false}
+              needsDelay={false}
+            >
+              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+            </Tooltip>
+          ) : !pluginInfo ? (
+            <Tooltip
+              popupContent={renderTooltipContent(
+                t('workflow.nodes.agent.modelNotSupport.title'),
+                t('workflow.nodes.agent.modelNotSupport.desc'),
+                t('workflow.nodes.agent.linkToPlugin'),
+                '/plugins',
+              )}
+              asChild={false}
+              needsDelay={true}
+            >
+              <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+            </Tooltip>
+          ) : (
+            <SwitchPluginVersion
+              tooltip={renderTooltipContent(
+                t('workflow.nodes.agent.modelNotSupport.title'),
+                t('workflow.nodes.agent.modelNotSupport.descForVersionSwitch'),
+              )}
+              uniqueIdentifier={pluginList?.plugins.find(plugin => plugin.name === pluginInfo.name)?.plugin_unique_identifier ?? ''}
+            />
+          )}
+        </>
+      )}
+      {!modelProvider && !pluginInfo && (
+        <Tooltip
+          popupContent={renderTooltipContent(
+            t('workflow.nodes.agent.modelNotInMarketplace.title'),
+            t('workflow.nodes.agent.modelNotInMarketplace.desc'),
+            t('workflow.nodes.agent.linkToPlugin'),
+            '/plugins',
+          )}
+          asChild={false}
+          needsDelay
+        >
+          <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+        </Tooltip>
+      )}
+    </>
+  )
+}
+
+export default StatusIndicators

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx

@@ -71,18 +71,16 @@ const Trigger: FC<TriggerProps> = ({
       {
         currentModel && (
           <ModelName
-            className='mr-1.5 text-gray-900'
+            className='mr-1.5 text-text-primary'
             modelItem={currentModel}
             showMode
-            modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
             showFeatures
-            featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
           />
         )
       }
       {
         !currentModel && (
-          <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
+          <div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
             {modelId}
           </div>
         )
@@ -103,10 +101,10 @@ const Trigger: FC<TriggerProps> = ({
             </Tooltip>
           )
           : (
-            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
           )
       }
-      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
+      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
     </div>
   )
 }

web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx

@@ -4,16 +4,21 @@ import ModelIcon from '../model-icon'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type ModelTriggerProps = {
   modelName: string
   providerName: string
   className?: string
+  showWarnIcon?: boolean
+  contentClassName?: string
 }
 const ModelTrigger: FC<ModelTriggerProps> = ({
   modelName,
   providerName,
   className,
+  showWarnIcon,
+  contentClassName,
 }) => {
   const { t } = useTranslation()
   const { modelProviders } = useProviderContext()
@@ -21,23 +26,26 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={`
-        group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
-        ${className}
-      `}
+      className={cn('group flex flex-grow box-content items-center p-[3px] pl-1 h-8 gap-1 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
     >
-      <ModelIcon
-        className='shrink-0 mr-1.5'
-        provider={currentProvider}
-        modelName={modelName}
-      />
-      <div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
-        {modelName}
-      </div>
-      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <Tooltip popupContent={t('common.modelProvider.deprecated')}>
-          <AlertTriangle className='w-4 h-4 text-[#F79009]' />
-        </Tooltip>
+      <div className={cn('flex items-center w-full', contentClassName)}>
+        <div className='flex items-center py-[1px] gap-1 min-w-0 flex-1'>
+          <ModelIcon
+            className="w-4 h-4"
+            provider={currentProvider}
+            modelName={modelName}
+          />
+          <div className='system-sm-regular text-components-input-text-filled truncate'>
+            {modelName}
+          </div>
+        </div>
+        <div className='shrink-0 flex items-center justify-center'>
+          {showWarnIcon && (
+            <Tooltip popupContent={t('common.modelProvider.deprecated')}>
+              <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
+            </Tooltip>
+          )}
+        </div>
       </div>
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx

@@ -1,7 +1,8 @@
 import type { FC } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { RiEqualizer2Line } from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
 type ModelTriggerProps = {
   open: boolean
   className?: string
@@ -10,27 +11,27 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
   open,
   className,
 }) => {
+  const { t } = useTranslation()
   return (
     <div
-      className={`
-        flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
-        ${className}
-        ${open && '!bg-gray-200'}
-      `}
+      className={cn(
+        'flex items-center p-1 gap-0.5 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover cursor-pointer', open && 'bg-components-input-bg-hover',
+        className,
+      )}
     >
       <div className='grow flex items-center'>
-        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-black/5'>
-          <CubeOutline className='w-3 h-3 text-gray-400' />
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-divider-regular'>
+          <CubeOutline className='w-3 h-3 text-text-quaternary' />
         </div>
         <div
-          className='text-[13px] text-gray-500 truncate'
-          title='Select model'
+          className='text-[13px] text-text-tertiary truncate'
+          title='Configure model'
         >
-          Select model
+          {t('plugin.detailPanel.configureModel')}
         </div>
       </div>
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500' />
+        <RiEqualizer2Line className='w-3.5 h-3.5 text-text-tertiary' />
       </div>
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx

@@ -6,10 +6,13 @@ import {
   ModelFeatureTextEnum,
 } from '../declarations'
 import {
+  AudioSupportIcon,
+  DocumentSupportIcon,
   // MagicBox,
   MagicEyes,
   // MagicWand,
   // Robot,
+  VideoSupportIcon,
 } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import Tooltip from '@/app/components/base/tooltip'
 
@@ -65,7 +68,7 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
             <MagicEyes className='w-3 h-3' />
           </ModelBadge>
         </div>
@@ -73,6 +76,48 @@ const FeatureIcon: FC<FeatureIconProps> = ({
     )
   }
 
+  if (feature === ModelFeatureEnum.document) {
+    return (
+      <Tooltip
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.document })}
+      >
+        <div className='inline-block cursor-help'>
+          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
+            <DocumentSupportIcon className='w-3 h-3' />
+          </ModelBadge>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  if (feature === ModelFeatureEnum.audio) {
+    return (
+      <Tooltip
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.audio })}
+      >
+        <div className='inline-block cursor-help'>
+          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
+            <AudioSupportIcon className='w-3 h-3' />
+          </ModelBadge>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  if (feature === ModelFeatureEnum.video) {
+    return (
+      <Tooltip
+        popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.video })}
+      >
+        <div className='inline-block cursor-help'>
+          <ModelBadge className={`!px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
+            <VideoSupportIcon className='w-3 h-3' />
+          </ModelBadge>
+        </div>
+      </Tooltip>
+    )
+  }
+
   return null
 }
 

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

@@ -15,6 +15,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import classNames from '@/utils/classnames'
 
 type ModelSelectorProps = {
   defaultModel?: DefaultModel
@@ -23,6 +24,9 @@ type ModelSelectorProps = {
   popupClassName?: string
   onSelect?: (model: DefaultModel) => void
   readonly?: boolean
+  scopeFeatures?: string[]
+  deprecatedClassName?: string
+  showDeprecatedWarnIcon?: boolean
 }
 const ModelSelector: FC<ModelSelectorProps> = ({
   defaultModel,
@@ -31,6 +35,9 @@ const ModelSelector: FC<ModelSelectorProps> = ({
   popupClassName,
   onSelect,
   readonly,
+  scopeFeatures = [],
+  deprecatedClassName,
+  showDeprecatedWarnIcon = false,
 }) => {
   const [open, setOpen] = useState(false)
   const {
@@ -62,7 +69,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
       placement='bottom-start'
       offset={4}
     >
-      <div className='relative'>
+      <div className={classNames('relative')}>
         <PortalToFollowElemTrigger
           onClick={handleToggle}
           className='block'
@@ -84,6 +91,8 @@ const ModelSelector: FC<ModelSelectorProps> = ({
                 modelName={defaultModel?.model || ''}
                 providerName={defaultModel?.provider || ''}
                 className={triggerClassName}
+                showWarnIcon={showDeprecatedWarnIcon}
+                contentClassName={deprecatedClassName}
               />
             )
           }
@@ -101,6 +110,8 @@ const ModelSelector: FC<ModelSelectorProps> = ({
             defaultModel={defaultModel}
             modelList={modelList}
             onSelect={handleSelect}
+            scopeFeatures={scopeFeatures}
+            onHide={() => setOpen(false)}
           />
         </PortalToFollowElemContent>
       </div>

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

@@ -13,7 +13,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
@@ -33,42 +33,44 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={classNames(
-        'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
+      className={cn(
+        'group flex items-center p-1 h-8 gap-0.5 rounded-lg bg-components-input-bg-normal',
         !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
+        open && 'bg-components-input-bg-hover',
+        model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',
         className,
-        open && '!bg-components-input-bg-hover',
-        model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
       )}
     >
       <ModelIcon
-        className='shrink-0 mr-1.5'
+        className='p-0.5'
         provider={provider}
         modelName={model.model}
       />
-      <ModelName
-        className='grow'
-        modelItem={model}
-        showMode
-        showFeatures
-      />
-      {!readonly && (
-        <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-          {
-            model.status !== ModelStatusEnum.active
-              ? (
-                <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
-                  <AlertTriangle className='w-4 h-4 text-[#F79009]' />
-                </Tooltip>
-              )
-              : (
-                <RiArrowDownSLine
-                  className='w-3.5 h-3.5 text-gray-500'
-                />
-              )
-          }
-        </div>
-      )}
+      <div className='flex px-1 py-[3px] items-center gap-1 grow truncate'>
+        <ModelName
+          className='grow'
+          modelItem={model}
+          showMode
+          showFeatures
+        />
+        {!readonly && (
+          <div className='shrink-0 flex items-center justify-center w-4 h-4'>
+            {
+              model.status !== ModelStatusEnum.active
+                ? (
+                  <Tooltip popupContent={MODEL_STATUS_TEXT[model.status][language]}>
+                    <AlertTriangle className='w-4 h-4 text-text-warning-secondary' />
+                  </Tooltip>
+                )
+                : (
+                  <RiArrowDownSLine
+                    className='w-3.5 h-3.5 text-text-tertiary'
+                  />
+                )
+            }
+          </div>
+        )}
+      </div>
     </div>
   )
 }

web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx

@@ -1,10 +1,25 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiFileTextLine,
+  RiFilmAiLine,
+  RiImageCircleAiLine,
+  RiVoiceAiFill,
+} from '@remixicon/react'
 import type {
   DefaultModel,
   Model,
   ModelItem,
 } from '../declarations'
+import {
+  ModelFeatureEnum,
+  ModelFeatureTextEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import {
+  modelTypeFormat,
+  sizeFormat,
+} from '../utils'
 import {
   useLanguage,
   useUpdateModelList,
@@ -12,15 +27,16 @@ import {
 } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import ModelBadge from '../model-badge'
 import {
   ConfigurationMethodEnum,
-  MODEL_STATUS_TEXT,
   ModelStatusEnum,
 } from '../declarations'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type PopupItemProps = {
   defaultModel?: DefaultModel
@@ -64,50 +80,104 @@ const PopupItem: FC<PopupItemProps> = ({
 
   return (
     <div className='mb-1'>
-      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
+      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
         {model.label[language] || model.label.en_US}
       </div>
       {
         model.models.map(modelItem => (
           <Tooltip
             key={modelItem.model}
-            popupContent={modelItem.status !== ModelStatusEnum.active ? MODEL_STATUS_TEXT[modelItem.status][language] : undefined}
             position='right'
+            popupClassName='p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl'
+            popupContent={
+              <div className='flex flex-col gap-1'>
+                <div className='flex flex-col items-start gap-2'>
+                  <ModelIcon
+                    className={cn('shrink-0 w-5 h-5')}
+                    provider={model}
+                    modelName={modelItem.model}
+                  />
+                  <div className='truncate text-text-primary system-md-medium'>{modelItem.label[language] || modelItem.label.en_US}</div>
+                </div>
+                {/* {currentProvider?.description && (
+                  <div className='text-text-tertiary system-xs-regular'>{currentProvider?.description?.[language] || currentProvider?.description?.en_US}</div>
+                )} */}
+                <div className='flex flex-wrap gap-1'>
+                  {modelItem.model_type && (
+                    <ModelBadge>
+                      {modelTypeFormat(modelItem.model_type)}
+                    </ModelBadge>
+                  )}
+                  {modelItem.model_properties.mode && (
+                    <ModelBadge>
+                      {(modelItem.model_properties.mode as string).toLocaleUpperCase()}
+                    </ModelBadge>
+                  )}
+                  {modelItem.model_properties.context_size && (
+                    <ModelBadge>
+                      {sizeFormat(modelItem.model_properties.context_size as number)}
+                    </ModelBadge>
+                  )}
+                </div>
+                {modelItem.model_type === ModelTypeEnum.textGeneration && modelItem.features?.some(feature => [ModelFeatureEnum.vision, ModelFeatureEnum.audio, ModelFeatureEnum.video, ModelFeatureEnum.document].includes(feature)) && (
+                  <div className='pt-2'>
+                    <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('common.model.capabilities')}</div>
+                    <div className='flex flex-wrap gap-1'>
+                      {modelItem.features?.includes(ModelFeatureEnum.vision) && (
+                        <ModelBadge>
+                          <RiImageCircleAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.vision}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.audio) && (
+                        <ModelBadge>
+                          <RiVoiceAiFill className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.audio}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.video) && (
+                        <ModelBadge>
+                          <RiFilmAiLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.video}</span>
+                        </ModelBadge>
+                      )}
+                      {modelItem.features?.includes(ModelFeatureEnum.document) && (
+                        <ModelBadge>
+                          <RiFileTextLine className='w-3.5 h-3.5 mr-0.5' />
+                          <span>{ModelFeatureTextEnum.document}</span>
+                        </ModelBadge>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            }
           >
             <div
               key={modelItem.model}
-              className={`
-                group relative flex items-center px-3 py-1.5 h-8 rounded-lg
-                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
-              `}
+              className={cn('group relative flex items-center px-3 py-1.5 h-8 rounded-lg gap-1', modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt')}
               onClick={() => handleSelect(model.provider, modelItem)}
             >
-              <ModelIcon
-                className={`
-                  shrink-0 mr-2 w-4 h-4
-                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                `}
-                provider={model}
-                modelName={modelItem.model}
-              />
-              <ModelName
-                className={`
-                  grow text-sm font-normal text-gray-900
-                  ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
-                `}
-                modelItem={modelItem}
-                showMode
-                showFeatures
-              />
+              <div className='flex items-center gap-2'>
+                <ModelIcon
+                  className={cn('shrink-0 w-5 h-5')}
+                  provider={model}
+                  modelName={modelItem.model}
+                />
+                <ModelName
+                  className={cn('text-text-secondary system-sm-medium', modelItem.status !== ModelStatusEnum.active && 'opacity-60')}
+                  modelItem={modelItem}
+                />
+              </div>
               {
                 defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
-                  <Check className='shrink-0 w-4 h-4 text-primary-600' />
+                  <Check className='shrink-0 w-4 h-4 text-text-accent' />
                 )
               }
               {
                 modelItem.status === ModelStatusEnum.noConfigure && (
                   <div
-                    className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
+                    className='hidden group-hover:block text-xs font-medium text-text-accent cursor-pointer'
                     onClick={handleOpenModelModal}
                   >
                     {t('common.operation.add').toLocaleUpperCase()}

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

@@ -1,6 +1,8 @@
 import type { FC } from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightUpLine,
   RiSearchLine,
 } from '@remixicon/react'
 import type {
@@ -8,51 +10,69 @@ import type {
   Model,
   ModelItem,
 } from '../declarations'
+import { ModelFeatureEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import PopupItem from './popup-item'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import { useModalContext } from '@/context/modal-context'
 
 type PopupProps = {
   defaultModel?: DefaultModel
   modelList: Model[]
   onSelect: (provider: string, model: ModelItem) => void
+  scopeFeatures?: string[]
+  onHide: () => void
 }
 const Popup: FC<PopupProps> = ({
   defaultModel,
   modelList,
   onSelect,
+  scopeFeatures = [],
+  onHide,
 }) => {
+  const { t } = useTranslation()
   const language = useLanguage()
   const [searchText, setSearchText] = useState('')
+  const { setShowAccountSettingModal } = useModalContext()
 
-  const filteredModelList = modelList.map((model) => {
-    const filteredModels = model.models.filter((modelItem) => {
-      if (modelItem.label[language] !== undefined)
-        return modelItem.label[language].toLowerCase().includes(searchText.toLowerCase())
-
-      return Object.values(modelItem.label).some(label =>
-        label.toLowerCase().includes(searchText.toLowerCase()),
-      )
-    })
-
-    return { ...model, models: filteredModels }
-  }).filter(model => model.models.length > 0)
+  const filteredModelList = useMemo(() => {
+    return modelList.map((model) => {
+      const filteredModels = model.models
+        .filter((modelItem) => {
+          if (modelItem.label[language] !== undefined)
+            return modelItem.label[language].toLowerCase().includes(searchText.toLowerCase())
+          return Object.values(modelItem.label).some(label =>
+            label.toLowerCase().includes(searchText.toLowerCase()),
+          )
+        })
+        .filter((modelItem) => {
+          if (scopeFeatures.length === 0)
+            return true
+          return scopeFeatures.every((feature) => {
+            if (feature === ModelFeatureEnum.toolCall)
+              return modelItem.features?.some(featureItem => featureItem === ModelFeatureEnum.toolCall || featureItem === ModelFeatureEnum.multiToolCall)
+            return modelItem.features?.some(featureItem => featureItem === feature)
+          })
+        })
+      return { ...model, models: filteredModels }
+    }).filter(model => model.models.length > 0)
+  }, [language, modelList, scopeFeatures, searchText])
 
   return (
-    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>
-      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-white z-10'>
+    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>
+      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-components-panel-bg z-10'>
         <div className={`
           flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
-          ${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
+          ${searchText ? 'bg-components-input-bg-active border-components-input-border-active shadow-xs' : 'bg-components-input-bg-normal border-transparent'}
         `}>
           <RiSearchLine
             className={`
               shrink-0 mr-[7px] w-[14px] h-[14px]
-              ${searchText ? 'text-gray-500' : 'text-gray-400'}
+              ${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
             `}
           />
           <input
-            className='block grow h-[18px] text-[13px] appearance-none outline-none bg-transparent'
+            className='block grow h-[18px] text-[13px] text-text-primary appearance-none outline-none bg-transparent'
             placeholder='Search model'
             value={searchText}
             onChange={e => setSearchText(e.target.value)}
@@ -60,7 +80,7 @@ const Popup: FC<PopupProps> = ({
           {
             searchText && (
               <XCircle
-                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-gray-400 cursor-pointer'
+                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-text-quaternary cursor-pointer'
                 onClick={() => setSearchText('')}
               />
             )
@@ -80,12 +100,19 @@ const Popup: FC<PopupProps> = ({
         }
         {
           !filteredModelList.length && (
-            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-gray-500 break-all'>
+            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-text-tertiary break-all'>
               {`No model found for “${searchText}”`}
             </div>
           )
         }
       </div>
+      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only bg-components-panel-bg rounded-b-lg' onClick={() => {
+        onHide()
+        setShowAccountSettingModal({ payload: 'provider' })
+      }}>
+        <span className='system-xs-medium'>{t('common.model.settingsLink')}</span>
+        <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+      </div>
     </div>
   )
 }

web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx

@@ -1,27 +0,0 @@
-import {
-  RiExternalLinkLine,
-} from '@remixicon/react'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-
-const ModelTrigger = () => {
-  return (
-    <div className='flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'>
-      <div className='grow flex items-center'>
-        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border-dashed border-black/5'>
-          <CubeOutline className='w-[11px] h-[11px] text-gray-400' />
-        </div>
-        <div
-          className='text-[13px] text-gray-500 truncate'
-          title='Select model'
-        >
-          Please setup the Rerank model
-        </div>
-      </div>
-      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <RiExternalLinkLine className='w-3.5 h-3.5 text-gray-500' />
-      </div>
-    </div>
-  )
-}
-
-export default ModelTrigger

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

@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
+import cn from '@/utils/classnames'
 
 type AddModelButtonProps = {
   className?: string
@@ -14,10 +15,7 @@ const AddModelButton: FC<AddModelButtonProps> = ({
 
   return (
     <span
-      className={`
-        shrink-0 flex items-center px-1.5 h-6 text-xs font-medium text-gray-500 cursor-pointer
-      hover:bg-primary-50 hover:text-primary-600 rounded-md ${className}
-      `}
+      className={cn('shrink-0 flex items-center px-1.5 h-6 text-text-tertiary system-xs-medium cursor-pointer hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text rounded-md', className)}
       onClick={onClick}
     >
       <PlusCircle className='mr-1 w-3 h-3' />

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

@@ -19,10 +19,10 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
     [currentTime],
   )
 
-  const countdownTimeout = useRef<NodeJS.Timeout>()
+  const countdownTimeout = useRef<number>(undefined)
   const clearCountdown = useCallback(() => {
     if (countdownTimeout.current) {
-      clearTimeout(countdownTimeout.current)
+      window.clearTimeout(countdownTimeout.current)
       countdownTimeout.current = undefined
     }
   }, [])
@@ -31,7 +31,7 @@ const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
 
   const countdown = useCallback(() => {
     clearCountdown()
-    countdownTimeout.current = setTimeout(() => {
+    countdownTimeout.current = window.setTimeout(() => {
       const now = Date.now()
       if (now <= targetTime.current) {
         setCurrentTime(Date.now())

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'
@@ -66,10 +66,10 @@ const CredentialPanel: FC<CredentialPanelProps> = ({
     <>
       {
         provider.provider_credential_schema && (
-          <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'>
+          <div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border'>
+            <div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 system-xs-medium-uppercase text-text-tertiary'>
               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>
               {

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

@@ -2,6 +2,8 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiArrowRightSLine,
+  RiInformation2Fill,
   RiLoader2Line,
 } from '@remixicon/react'
 import type {
@@ -11,7 +13,6 @@ import type {
 } from '../declarations'
 import { ConfigurationMethodEnum } from '../declarations'
 import {
-  DEFAULT_BACKGROUND_COLOR,
   MODEL_PROVIDER_QUOTA_GET_PAID,
   modelTypeFormat,
 } from '../utils'
@@ -21,18 +22,20 @@ 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'
 import { useAppContext } from '@/context/app-context'
+import cn from '@/utils/classnames'
 
 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)
@@ -78,8 +82,11 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
 
   return (
     <div
-      className='mb-2 rounded-xl border-[0.5px] border-black/5 shadow-xs'
-      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
+      className={cn(
+        'mb-2 rounded-xl border-[0.5px] border-divider-regular shadow-xs bg-third-party-model-bg-default',
+        provider.provider === 'langgenius/openai/openai' && 'bg-third-party-model-bg-openai',
+        provider.provider === 'langgenius/anthropic/anthropic' && 'bg-third-party-model-bg-anthropic',
+      )}
     >
       <div className='flex pl-3 py-2 pr-2 rounded-t-xl'>
         <div className='grow px-1 pt-1 pb-0.5'>
@@ -105,7 +112,7 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
           )
         }
         {
-          configurationMethods.includes(ConfigurationMethodEnum.predefinedModel) && isCurrentWorkspaceManager && (
+          showCredential && (
             <CredentialPanel
               onSetup={() => onOpenModal(ConfigurationMethodEnum.predefinedModel)}
               provider={provider}
@@ -115,35 +122,46 @@ const ProviderAddedCard: FC<ProviderAddedCardProps> = ({
       </div>
       {
         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'>
-              {
-                hasModelList
-                  ? t('common.modelProvider.modelsNum', { num: modelList.length })
-                  : t('common.modelProvider.showModels')
-              }
-            </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 && (
-                  <RiLoader2Line className='ml-0.5 animate-spin w-3 h-3' />
-                )
-              }
-            </div>
+          <div className='group flex items-center justify-between pl-2 py-1.5 pr-[11px] border-t border-t-divider-subtle text-text-tertiary system-xs-medium'>
+            {(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-components-button-ghost-bg-hover 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 className='text-text-secondary system-xs-medium'>{t('common.modelProvider.configureTip')}</span>
+              </div>
+            )}
             {
               configurationMethods.includes(ConfigurationMethodEnum.customizableModel) && isCurrentWorkspaceManager && (
                 <AddModelButton
                   onClick={() => onOpenModal(ConfigurationMethodEnum.customizableModel)}
-                  className='hidden group-hover:flex group-hover:text-primary-600'
+                  className='flex'
                 />
               )
             }

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

@@ -49,7 +49,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
       key={model.model}
       className={classNames(
         'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
-        isConfigurable && 'hover:bg-gray-50',
+        isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
         model.deprecated && 'opacity-60',
       )}
     >
@@ -59,14 +59,14 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
         modelName={model.model}
       />
       <ModelName
-        className='grow text-sm font-normal text-gray-900'
+        className='grow system-md-regular text-text-secondary'
         modelItem={model}
         showModelType
         showMode
         showContextSize
       >
         {modelLoadBalancingEnabled && !model.deprecated && model.load_balancing_enabled && (
-          <ModelBadge className='ml-1 uppercase text-indigo-600 border-indigo-300'>
+          <ModelBadge className='ml-1 uppercase text-text-accent-secondary border-text-accent-secondary'>
             <Balance className='w-3 h-3 mr-0.5' />
             {t('common.modelProvider.loadBalancingHeadline')}
           </ModelBadge>
@@ -77,20 +77,22 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
           model.fetch_from === ConfigurationMethodEnum.customizableModel
             ? (isCurrentWorkspaceManager && (
               <Button
-                className='hidden group-hover:flex h-7'
+                size='small'
+                className='hidden group-hover:flex'
                 onClick={() => onConfig({ __model_name: model.model, __model_type: model.model_type })}
               >
-                <Settings01 className='mr-[5px] w-3.5 h-3.5' />
+                <Settings01 className='mr-1 w-3.5 h-3.5' />
                 {t('common.modelProvider.config')}
               </Button>
             ))
             : (isCurrentWorkspaceManager && (modelLoadBalancingEnabled || plan.type === Plan.sandbox) && !model.deprecated && [ModelStatusEnum.active, ModelStatusEnum.disabled].includes(model.status))
               ? (
                 <Button
-                  className='opacity-0 group-hover:opacity-100 h-[28px] transition-opacity'
+                  size='small'
+                  className='opacity-0 group-hover:opacity-100 transition-opacity'
                   onClick={() => onModifyLoadBalancing?.(model)}
                 >
-                  <Balance className='mr-1 w-[14px] h-[14px]' />
+                  <Balance className='mr-1 w-3.5 h-3.5' />
                   {t('common.modelProvider.configLoadBalancing')}
                 </Button>
               )

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'
 
@@ -48,18 +50,19 @@ const ModelList: FC<ModelListProps> = ({
 
   return (
     <div className='px-2 pb-2 rounded-b-xl'>
-      <div className='py-1 bg-white rounded-lg'>
+      <div className='py-1 bg-components-panel-bg 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 items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary'>
               {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'
+              className='hidden group-hover:inline-flex items-center pl-1 pr-1.5 h-6 system-xs-medium text-text-tertiary bg-state-base-hover 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>
           {/* {

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx

@@ -145,19 +145,19 @@ const ModelLoadBalancingConfigs = ({
     <>
       <div
         className={classNames(
-          'min-h-16 bg-gray-50 border rounded-xl transition-colors',
-          (withSwitch || !draftConfig.enabled) ? 'border-gray-200' : 'border-primary-400',
+          'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
+          (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
           (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
           className,
         )}
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
       >
         <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-primary-600 bg-indigo-50 border border-indigo-100 rounded-lg'>
+          <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 text-util-colors-blue-blue-600 bg-util-colors-indigo-indigo-50 border border-util-colors-indigo-indigo-100 rounded-lg'>
             <Balance className='w-4 h-4' />
           </div>
           <div className='grow'>
-            <div className='flex items-center gap-1 text-sm'>
+            <div className='flex items-center gap-1 text-sm text-text-primary'>
               {t('common.modelProvider.loadBalancing')}
               <Tooltip
                 popupContent={t('common.modelProvider.loadBalancingInfo')}
@@ -165,7 +165,7 @@ const ModelLoadBalancingConfigs = ({
                 triggerClassName='w-3 h-3'
               />
             </div>
-            <div className='text-xs text-gray-500'>{t('common.modelProvider.loadBalancingDescription')}</div>
+            <div className='text-xs text-text-tertiary'>{t('common.modelProvider.loadBalancingDescription')}</div>
           </div>
           {
             withSwitch && (
@@ -184,7 +184,7 @@ const ModelLoadBalancingConfigs = ({
             {draftConfig.configs.map((config, index) => {
               const isProviderManaged = config.name === '__inherit__'
               return (
-                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-white border border-gray-200 rounded-lg shadow-xs'>
+                <div key={config.id || index} className='group flex items-center px-3 h-10 bg-components-panel-on-panel-item-bg border border-components-panel-border rounded-lg shadow-xs'>
                   <div className='grow flex items-center'>
                     <div className='flex items-center justify-center mr-2 w-3 h-3'>
                       {(config.in_cooldown && Boolean(config.ttl))
@@ -201,7 +201,7 @@ const ModelLoadBalancingConfigs = ({
                       {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
                     </div>
                     {isProviderManaged && (
-                      <span className='px-1 text-2xs uppercase text-gray-500 border border-black/8 rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
+                      <span className='px-1 text-2xs uppercase text-text-tertiary border border-divider-regular rounded-[5px]'>{t('common.modelProvider.providerManaged')}</span>
                     )}
                   </div>
                   <div className='flex items-center gap-1'>
@@ -209,18 +209,18 @@ const ModelLoadBalancingConfigs = ({
                       <>
                         <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
                             onClick={() => toggleEntryModal(index, config)}
                           >
                             <Edit02 className='w-4 h-4' />
                           </span>
                           <span
-                            className='flex items-center justify-center w-8 h-8 text-gray-500 bg-white rounded-lg transition-colors cursor-pointer hover:bg-black/5'
+                            className='flex items-center justify-center w-8 h-8 text-text-tertiary bg-components-button-secondary-bg rounded-lg transition-colors cursor-pointer hover:bg-components-button-secondary-bg-hover'
                             onClick={() => updateConfigEntry(index, () => undefined)}
                           >
                             <RiDeleteBinLine className='w-4 h-4' />
                           </span>
-                          <span className='mr-2 h-3 border-r border-r-gray-100' />
+                          <span className='mr-2 h-3 border-r border-r-divider-subtle' />
                         </div>
                       </>
                     )}
@@ -247,7 +247,7 @@ const ModelLoadBalancingConfigs = ({
         )}
         {
           draftConfig.enabled && draftConfig.configs.length < 2 && (
-            <div className='flex items-center px-6 h-[34px] text-xs text-gray-700 bg-black/2 border-t border-t-black/5'>
+            <div className='flex items-center px-6 h-[34px] text-xs text-text-secondary bg-components-panel-bg border-t border-t-divider-subtle'>
               <AlertTriangle className='mr-1 w-3 h-3 text-[#f79009]' />
               {t('common.modelProvider.loadBalancingLeastKeyWarning')}
             </div>
@@ -257,7 +257,7 @@ const ModelLoadBalancingConfigs = ({
 
       {!modelLoadBalancingEnabled && !IS_CE_EDITION && (
         <GridMask canvasClassName='!rounded-xl'>
-          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-gray-200 rounded-xl shadow-md'>
+          <div className='flex items-center justify-between mt-2 px-4 h-14 border-[0.5px] border-components-panel-border rounded-xl shadow-md'>
             <div
               className={classNames('text-sm font-semibold leading-tight text-gradient', s.textGradient)}
             >

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx

@@ -119,7 +119,7 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
                 modelName={model!.model}
               />
               <ModelName
-                className='grow text-sm font-normal text-gray-900'
+                className='grow system-md-regular text-text-secondary'
                 modelItem={model!}
                 showModelType
                 showMode
@@ -137,20 +137,20 @@ const ModelLoadBalancingModal = ({ provider, model, open = false, onClose, onSav
             <div className='py-2'>
               <div
                 className={classNames(
-                  'min-h-16 bg-gray-50 border rounded-xl transition-colors',
-                  draftConfig.enabled ? 'border-gray-200 cursor-pointer' : 'border-primary-400 cursor-default',
+                  'min-h-16 bg-components-panel-bg border rounded-xl transition-colors',
+                  draftConfig.enabled ? 'border-components-panel-border cursor-pointer' : 'border-util-colors-blue-blue-600 cursor-default',
                 )}
                 onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
               >
                 <div className='flex items-center px-[15px] py-3 gap-2 select-none'>
-                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-white border rounded-lg'>
+                  <div className='grow-0 shrink-0 flex items-center justify-center w-8 h-8 bg-components-card-bg border border-components-card-border rounded-lg'>
                     {Boolean(model) && (
                       <ModelIcon className='shrink-0' provider={provider} modelName={model!.model} />
                     )}
                   </div>
                   <div className='grow'>
-                    <div className='text-sm'>{t('common.modelProvider.providerManaged')}</div>
-                    <div className='text-xs text-gray-500'>{t('common.modelProvider.providerManagedDescription')}</div>
+                    <div className='text-sm text-text-secondary'>{t('common.modelProvider.providerManaged')}</div>
+                    <div className='text-xs text-text-tertiary'>{t('common.modelProvider.providerManagedDescription')}</div>
                   </div>
                 </div>
               </div>

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

@@ -8,6 +8,7 @@ import {
 } from '@remixicon/react'
 import { PreferredProviderTypeEnum } from '../declarations'
 import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
 
 type SelectorProps = {
   value?: string
@@ -34,11 +35,11 @@ const Selector: FC<SelectorProps> = ({
       <Popover.Button>
         {
           ({ open }) => (
-            <Button className={`
-              px-0 w-6 h-6 bg-white rounded-md
-              ${open && '!bg-gray-100'}
-            `}>
-              <RiMoreFill className='w-3 h-3 text-gray-700' />
+            <Button className={cn(
+              'px-0 w-6 h-6 rounded-md',
+              open && 'bg-components-button-secondary-bg-hover',
+            )}>
+              <RiMoreFill className='w-3 h-3' />
             </Button>
           )
         }
@@ -49,18 +50,18 @@ const Selector: FC<SelectorProps> = ({
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'>
+        <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-lg shadow-lg z-10'>
           <div className='p-1'>
-            <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div>
+            <div className='px-3 pt-2 pb-1 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div>
             {
               options.map(option => (
                 <Popover.Button as={Fragment} key={option.key}>
                   <div
-                    className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
+                    className='flex items-center justify-between px-3 h-9 text-sm text-text-secondary rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
                     onClick={() => onSelect(option.key)}
                   >
                     <div className='grow'>{option.text}</div>
-                    {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />}
+                    {value === option.key && <RiCheckLine className='w-4 h-4 text-text-accent' />}
                   </div>
                 </Popover.Button>
               ))

web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-use-tip.tsx

@@ -9,8 +9,8 @@ const PriorityUseTip = () => {
     <Tooltip
       popupContent={t('common.modelProvider.priorityUsing') || ''}
     >
-      <div className='absolute -right-[5px] -top-[5px] bg-indigo-50 rounded-[5px] border-[0.5px] border-indigo-100 cursor-pointer'>
-        <ChevronDownDouble className='rotate-180 w-3 h-3 text-indigo-600' />
+      <div className='absolute -right-[5px] -top-[5px] bg-util-colors-indigo-indigo-50 rounded-[5px] border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer'>
+        <ChevronDownDouble className='rotate-180 w-3 h-3 text-util-colors-indigo-indigo-600' />
       </div>
     </Tooltip>
   )

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

@@ -28,8 +28,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
   const openaiOrAnthropic = MODEL_PROVIDER_QUOTA_GET_PAID.includes(provider.provider)
 
   return (
-    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
-      <div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
+    <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.18] border-[0.5px] border-components-panel-border shadow-xs'>
+      <div className='flex items-center mb-2 h-4 system-xs-medium-uppercase text-text-tertiary'>
         {t('common.modelProvider.quota')}
         <Tooltip popupContent={
           openaiOrAnthropic
@@ -40,8 +40,8 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
       </div>
       {
         currentQuota && (
-          <div className='flex items-center h-4 text-xs text-gray-500'>
-            <span className='mr-0.5 text-sm font-semibold text-gray-700'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
+          <div className='flex items-center h-4 text-xs text-text-tertiary'>
+            <span className='mr-0.5 system-md-semibold-uppercase text-text-secondary'>{formatNumber((currentQuota?.quota_limit || 0) - (currentQuota?.quota_used || 0))}</span>
             {
               currentQuota?.quota_unit === QuotaUnitEnum.tokens && 'Tokens'
             }

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

@@ -1,45 +0,0 @@
-import type { FC } from 'react'
-
-type TabProps = {
-  active: string
-  onSelect: (active: string) => void
-}
-const Tab: FC<TabProps> = ({
-  active,
-  onSelect,
-}) => {
-  const tabs = [
-    {
-      key: 'all',
-      text: 'All',
-    },
-    {
-      key: 'added',
-      text: 'Added',
-    },
-    {
-      key: 'build-in',
-      text: 'Build-in',
-    },
-  ]
-  return (
-    <div className='flex items-center'>
-      {
-        tabs.map(tab => (
-          <div
-            key={tab.key}
-            className={`
-              flex items-center mr-1 px-[5px] h-[18px] rounded-md text-xs cursor-pointer
-              ${active === tab.key ? 'bg-gray-200 font-medium text-gray-900' : 'text-gray-500 font-normal'}
-            `}
-            onClick={() => onSelect(tab.key)}
-          >
-            {tab.text}
-          </div>
-        ))
-      }
-    </div>
-  )
-}
-
-export default Tab

web/app/components/header/account-setting/model-provider-page/provider-card/index.module.css

@@ -1,4 +0,0 @@
-.vender {
-  background: linear-gradient(131deg, #2250F2 0%, #0EBCF3 100%);
-  background-clip: text;
-}

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

@@ -1,103 +0,0 @@
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  RiAddLine,
-} from '@remixicon/react'
-import type {
-  ModelProvider,
-} from '../declarations'
-import { ConfigurationMethodEnum } from '../declarations'
-import {
-  DEFAULT_BACKGROUND_COLOR,
-  modelTypeFormat,
-} from '../utils'
-import {
-  useLanguage,
-} from '../hooks'
-import ModelBadge from '../model-badge'
-import ProviderIcon from '../provider-icon'
-import s from './index.module.css'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import Button from '@/app/components/base/button'
-import { useAppContext } from '@/context/app-context'
-
-type ProviderCardProps = {
-  provider: ModelProvider
-  onOpenModal: (configurateMethod: ConfigurationMethodEnum) => void
-}
-
-const ProviderCard: FC<ProviderCardProps> = ({
-  provider,
-  onOpenModal,
-}) => {
-  const { t } = useTranslation()
-  const language = useLanguage()
-  const { isCurrentWorkspaceManager } = useAppContext()
-  const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurationMethodEnum.fetchFromRemote)
-
-  return (
-    <div
-      className='group relative flex flex-col px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg'
-      style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }}
-    >
-      <div className='grow h-0'>
-        <div className='py-0.5'>
-          <ProviderIcon provider={provider} />
-        </div>
-        {
-          provider.description && (
-            <div
-              className='mt-1 leading-4 text-xs text-black/[48] line-clamp-4'
-              title={provider.description[language] || provider.description.en_US}
-            >
-              {provider.description[language] || provider.description.en_US}
-            </div>
-          )
-        }
-      </div>
-      <div className='shrink-0'>
-        <div className={'flex flex-wrap group-hover:hidden gap-0.5'}>
-          {
-            provider.supported_model_types.map(modelType => (
-              <ModelBadge key={modelType}>
-                {modelTypeFormat(modelType)}
-              </ModelBadge>
-            ))
-          }
-        </div>
-        <div className={`hidden group-hover:grid grid-cols-${configurateMethods.length} gap-1`}>
-          {
-            configurateMethods.map((method) => {
-              if (method === ConfigurationMethodEnum.predefinedModel) {
-                return (
-                  <Button
-                    key={method}
-                    className={'h-7 text-xs shrink-0'}
-                    onClick={() => onOpenModal(method)}
-                    disabled={!isCurrentWorkspaceManager}
-                  >
-                    <Settings01 className={`mr-[5px] w-3.5 h-3.5 ${s.icon}`} />
-                    <span className='text-xs inline-flex items-center justify-center overflow-ellipsis shrink-0'>{t('common.operation.setup')}</span>
-                  </Button>
-                )
-              }
-              return (
-                <Button
-                  key={method}
-                  className='px-0 h-7 text-xs'
-                  onClick={() => onOpenModal(method)}
-                  disabled={!isCurrentWorkspaceManager}
-                >
-                  <RiAddLine className='mr-[5px] w-3.5 h-3.5' />
-                  {t('common.modelProvider.addModel')}
-                </Button>
-              )
-            })
-          }
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ProviderCard

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

@@ -1,6 +1,12 @@
 import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
 import { useLanguage } from '../hooks'
+import { useAppContext } from '@/context/app-context'
+import { Openai } from '@/app/components/base/icons/src/vender/other'
+import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
+import { renderI18nObject } from '@/hooks/use-i18n'
+import { Theme } from '@/types/app'
+import cn from '@/utils/classnames'
 
 type ProviderIconProps = {
   provider: ModelProvider
@@ -10,22 +16,35 @@ const ProviderIcon: FC<ProviderIconProps> = ({
   provider,
   className,
 }) => {
+  const { theme } = useAppContext()
   const language = useLanguage()
 
-  if (provider.icon_large) {
+  if (provider.provider === 'langgenius/anthropic/anthropic') {
     return (
-      <img
-        alt='provider-icon'
-        src={`${provider.icon_large[language] || provider.icon_large.en_US}`}
-        className={`w-auto h-6 ${className}`}
-      />
+      <div className='mb-2 py-[7px]'>
+        {theme === Theme.dark && <AnthropicLight className='w-[90px] h-2.5' />}
+        {theme === Theme.light && <AnthropicDark className='w-[90px] h-2.5' />}
+      </div>
+    )
+  }
+
+  if (provider.provider === 'langgenius/openai/openai') {
+    return (
+      <div className='mb-2'>
+        <Openai className='w-auto h-6 text-text-inverted-dimmed' />
+      </div>
     )
   }
 
   return (
-    <div className={`inline-flex items-center ${className}`}>
-      <div className='text-xs font-semibold text-black'>
-        {provider.label[language] || provider.label.en_US}
+    <div className={cn('inline-flex items-center gap-2', className)}>
+      <img
+        alt='provider-icon'
+        src={renderI18nObject(provider.icon_small, language)}
+        className='w-6 h-6'
+      />
+      <div className='system-md-semibold text-text-primary'>
+        {renderI18nObject(provider.label, language)}
       </div>
     </div>
   )

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,23 +130,23 @@ 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
+          className='relative'
+          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'>
+      <PortalToFollowElemContent className='z-[60]'>
+        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.systemReasoningModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.systemReasoningModel.tip')}
                   </div>
                 }
@@ -160,11 +162,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.embeddingModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.embeddingModel.tip')}
                   </div>
                 }
@@ -180,11 +182,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.rerankModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.rerankModel.tip')}
                   </div>
                 }
@@ -200,11 +202,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.speechToTextModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.speechToTextModel.tip')}
                   </div>
                 }
@@ -220,11 +222,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.ttsModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.ttsModel.tip')}
                   </div>
                 }

web/app/components/header/account-setting/model-provider-page/utils.ts

@@ -18,9 +18,7 @@ import {
   validateModelProvider,
 } from '@/service/common'
 
-export const MODEL_PROVIDER_QUOTA_GET_PAID = ['anthropic', 'openai', 'azure_openai']
-
-export const DEFAULT_BACKGROUND_COLOR = '#F3F4F6'
+export const MODEL_PROVIDER_QUOTA_GET_PAID = ['langgenius/anthropic/anthropic', 'langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
 
 export const isNullOrUndefined = (value: any) => {
   return value === undefined || value === null

web/app/components/header/app-nav/index.tsx

@@ -11,7 +11,7 @@ import {
   RiRobot2Line,
 } from '@remixicon/react'
 import Nav from '../nav'
-import { type NavItem } from '../nav/nav-selector'
+import type { NavItem } from '../nav/nav-selector'
 import { fetchAppList } from '@/service/apps'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'

web/app/components/header/index.tsx

@@ -4,23 +4,24 @@ import Link from 'next/link'
 import { useBoolean } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { useContextSelector } from 'use-context-selector'
-import HeaderBillingBtn from '../billing/header-billing-btn'
+import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
+import PremiumBadge from '../base/premium-badge'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
+import PluginsNav from './plugins-nav'
 import ExploreNav from './explore-nav'
 import ToolsNav from './tools-nav'
-import GithubStar from './github-star'
 import LicenseNav from './license-env'
 import { WorkspaceProvider } from '@/context/workspace-context'
-import AppContext, { useAppContext } from '@/context/app-context'
+import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import WorkplaceSelector from '@/app/components/header/account-dropdown/workplace-selector'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
-import { LicenseStatus } from '@/types/feature'
+import { useTranslation } from 'react-i18next'
 
 const navClassName = `
   flex items-center relative mr-0 sm:mr-3 px-3 h-8 rounded-xl
@@ -30,7 +31,8 @@ const navClassName = `
 
 const Header = () => {
   const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator } = useAppContext()
-  const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
+  const { t } = useTranslation()
+
   const selectedSegment = useSelectedLayoutSegment()
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -58,50 +60,84 @@ const Header = () => {
         >
           <Bars3Icon className="h-4 w-4 text-gray-500" />
         </div>}
-        {!isMobile && <>
-          <Link href="/apps" className='flex items-center mr-4'>
-            <LogoSite className='object-contain' />
-          </Link>
-          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
-        </>}
-      </div>
+        {
+          !isMobile
+          && <div className='flex w-64 p-2 pl-3 gap-1.5 items-center shrink-0 self-stretch'>
+            <Link href="/apps" className='flex w-8 h-8 items-center justify-center gap-2 shrink-0'>
+              <LogoSite className='object-contain' />
+            </Link>
+            <div className='font-light text-divider-deep'>/</div>
+            <div className='flex items-center gap-0.5'>
+              <WorkspaceProvider>
+                <WorkplaceSelector />
+              </WorkspaceProvider>
+              {enableBilling && (
+                <div className='select-none'>
+                  <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
+                    <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                    <div className='system-xs-medium'>
+                      <span className='p-1'>
+                        {t('billing.upgradeBtn.encourageShort')}
+                      </span>
+                    </div>
+                  </PremiumBadge>
+                </div>
+              )}
+            </div>
+          </div>
+        }
+      </div >
       {isMobile && (
         <div className='flex'>
           <Link href="/apps" className='flex items-center mr-4'>
             <LogoSite />
           </Link>
-          {systemFeatures.license.status === LicenseStatus.NONE && <GithubStar />}
-        </div>
+          <div className='font-light text-divider-deep'>/</div>
+          {
+            enableBilling && (
+              <div className='select-none'>
+                <PremiumBadge color='blue' allowHover={true} onClick={handlePlanClick}>
+                  <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
+                  <div className='system-xs-medium'>
+                    <span className='p-1'>
+                      {t('billing.upgradeBtn.encourageShort')}
+                    </span>
+                  </div>
+                </PremiumBadge>
+              </div>
+            )
+          }
+        </div >
       )}
-      {!isMobile && (
-        <div className='flex items-center'>
-          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
-        </div>
-      )}
-      <div className='flex items-center flex-shrink-0'>
+      {
+        !isMobile && (
+          <div className='flex items-center'>
+            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+          </div>
+        )
+      }
+      <div className='flex items-center shrink-0'>
         <LicenseNav />
         <EnvNav />
-        {enableBilling && (
-          <div className='mr-3 select-none'>
-            <HeaderBillingBtn onClick={handlePlanClick} />
-          </div>
-        )}
-        <WorkspaceProvider>
-          <AccountDropdown isMobile={isMobile} />
-        </WorkspaceProvider>
-      </div>
-      {(isMobile && isShowNavMenu) && (
-        <div className='w-full flex flex-col p-2 gap-y-1'>
-          {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
-          {!isCurrentWorkspaceDatasetOperator && <AppNav />}
-          {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
-          {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+        <div className='mr-3'>
+          <PluginsNav />
         </div>
-      )}
-    </div>
+        <AccountDropdown isMobile={isMobile} />
+      </div>
+      {
+        (isMobile && isShowNavMenu) && (
+          <div className='w-full flex flex-col p-2 gap-y-1'>
+            {!isCurrentWorkspaceDatasetOperator && <ExploreNav className={navClassName} />}
+            {!isCurrentWorkspaceDatasetOperator && <AppNav />}
+            {(isCurrentWorkspaceEditor || isCurrentWorkspaceDatasetOperator) && <DatasetNav />}
+            {!isCurrentWorkspaceDatasetOperator && <ToolsNav className={navClassName} />}
+          </div>
+        )
+      }
+    </div >
   )
 }
 export default Header

web/app/components/header/nav/index.tsx

@@ -68,7 +68,7 @@ const Nav = ({
       {
         curNav && isActivated && (
           <>
-            <div className='font-light text-gray-300 '>/</div>
+            <div className='font-light text-divider-deep'>/</div>
             <NavSelector
               isApp={isApp}
               curNav={curNav}

web/app/components/header/plugins-nav/downloading-icon.module.css

@@ -0,0 +1,44 @@
+@keyframes realistic-blink {
+  0% { fill: #37ff37; opacity: 0.4; }
+  15% { fill: #37ff37; opacity: 0.9; }
+  25% { fill: #37ff37; opacity: 0.3; }
+  38% { fill: #ff4444; opacity: 0.8; }
+  42% { fill: #ff4444; opacity: 0.3; }
+  58% { fill: #37ff37; opacity: 0.9; }
+  65% { fill: #37ff37; opacity: 0.4; }
+  79% { fill: #ff4444; opacity: 0.8; }
+  84% { fill: #ff4444; opacity: 0.3; }
+  92% { fill: #37ff37; opacity: 0.8; }
+  100% { fill: #37ff37; opacity: 0.4; }
+}
+
+@keyframes drop {
+  0% { 
+    transform: translateY(-4px); 
+    opacity: 0;
+  }
+  5% { 
+    transform: translateY(-4px); 
+    opacity: 1;
+  }
+  65% { 
+    transform: translateY(2px);
+    opacity: 1;
+  }
+  80% {
+    transform: translateY(2px);
+    opacity: 0;
+  }
+  100% { 
+    transform: translateY(2px);
+    opacity: 0;
+  }
+}
+
+#downloadingIconLight {
+  animation: realistic-blink 3s infinite ease-in-out;
+}
+
+#downloadingIconArrow {
+  animation: drop 1.2s cubic-bezier(0.4, 0, 1, 1) infinite;
+}

web/app/components/header/plugins-nav/downloading-icon.tsx

@@ -0,0 +1,17 @@
+import s from './downloading-icon.module.css'
+
+const DownloadingIcon = () => {
+  return (
+    <div className="inline-flex text-components-button-secondary-text">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="install-icon">
+        <g id="install-line">
+          <path d="M8 2V4H5L4.999 14H18.999L19 4H16V2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H8ZM18.999 16H4.999L5 20H19L18.999 16Z" fill="currentColor"/>
+          <path id={s.downloadingIconLight} d="M17 19V17H15V19H17Z"/>
+          <path id={s.downloadingIconArrow} d="M13 2V7H16L12 11L8 7H11V2H13Z" fill="currentColor"/>
+        </g>
+      </svg>
+    </div>
+  )
+}
+
+export default DownloadingIcon

web/app/components/header/plugins-nav/index.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import classNames from '@/utils/classnames'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import DownloadingIcon from './downloading-icon'
+import { usePluginTaskStatus } from '@/app/components/plugins/plugin-page/plugin-tasks/hooks'
+import Indicator from '@/app/components/header/indicator'
+
+type PluginsNavProps = {
+  className?: string
+}
+
+const PluginsNav = ({
+  className,
+}: PluginsNavProps) => {
+  const { t } = useTranslation()
+  const selectedSegment = useSelectedLayoutSegment()
+  const activated = selectedSegment === 'plugins'
+  const {
+    isInstalling,
+    isInstallingWithError,
+    isFailed,
+  } = usePluginTaskStatus()
+
+  return (
+    <Link href="/plugins" className={classNames(
+      className, 'group', 'plugins-nav-button', // used for use-fold-anim-into.ts
+    )}>
+      <div
+        className={classNames(
+          'relative flex flex-row h-8 p-1.5 gap-0.5 border border-transparent items-center justify-center rounded-xl system-sm-medium-uppercase',
+          activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active shadow-md text-components-main-nav-nav-button-text',
+          !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle',
+        )}
+      >
+        {
+          (isFailed || isInstallingWithError) && !activated && (
+            <Indicator
+              color='red'
+              className='absolute top-[-1px] left-[-1px]'
+            />
+          )
+        }
+        <div className='flex mr-0.5 w-5 h-5 justify-center items-center'>
+          {
+            (!(isInstalling || isInstallingWithError) || activated) && (
+              <Group className='w-4 h-4' />
+            )
+          }
+          {
+            (isInstalling || isInstallingWithError) && !activated && (
+              <DownloadingIcon />
+            )
+          }
+        </div>
+        <span className='px-0.5'>{t('common.menus.plugins')}</span>
+      </div>
+    </Link>
+  )
+}
+
+export default PluginsNav