provider card

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -43,7 +43,7 @@ const PluginList = async () => {
         <h3 className='my-1'>Install model provide</h3>
         <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
-            <InstallModelItem key={index} payload={plugin as any} />
+            <InstallModelItem key={index} locale={locale} payload={plugin as any} />
           ))}
         </div>
 

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

@@ -1,6 +1,13 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiAlertFill, RiBrainLine } from '@remixicon/react'
+import Link from 'next/link'
+import {
+  RiAlertFill,
+  RiArrowDownSLine,
+  RiArrowRightUpLine,
+  RiBrainLine,
+} from '@remixicon/react'
+import { useContext } from 'use-context-selector'
 import SystemModelSelector from './system-model-selector'
 import ProviderAddedCard, { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 // import ProviderCard from './provider-card'
@@ -18,11 +25,16 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
+import Divider from '@/app/components/base/divider'
+import ProviderCard from '@/app/components/plugins/provider-card'
+import I18n from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import cn from '@/utils/classnames'
 
+import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+
 const ModelProviderPage = () => {
   const { t } = useTranslation()
   const { eventEmitter } = useEventEmitterContextContext()
@@ -89,6 +101,12 @@ const ModelProviderPage = () => {
     })
   }
 
+  const [collapse, setCollapse] = useState(false)
+  const { locale } = useContext(I18n)
+
+  // TODO #Plugin list API#
+  const pluginList = [toolNotion, extensionDallE, modelGPT4]
+
   return (
     <div className='relative pt-1 -mt-2'>
       <div className={cn('flex items-center mb-2')}>
@@ -134,7 +152,7 @@ const ModelProviderPage = () => {
           ))}
         </div>
       )}
-      {!!notConfiguredProviders?.length && (
+      {false && !!notConfiguredProviders?.length && (
         <>
           <div className='flex items-center mb-2 pt-2 text-text-primary system-md-semibold'>{t('common.modelProvider.configureRequired')}</div>
           <div className='relative'>
@@ -149,8 +167,29 @@ const ModelProviderPage = () => {
           </div>
         </>
       )}
-      <div className='flex items-center mb-2 pt-2'>{t('common.modelProvider.installProvider')}</div>
-      <div className='flex items-center mb-2 pt-2'>{t('common.modelProvider.discoverMore')}</div>
+      <div className='mb-2'>
+        <Divider className='!mt-4 h-px' />
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-1 text-text-primary system-md-semibold cursor-pointer' onClick={() => setCollapse(!collapse)}>
+            <RiArrowDownSLine className={cn('w-4 h-4', collapse && '-rotate-90')} />
+            {t('common.modelProvider.installProvider')}
+          </div>
+          <div className='flex items-center mb-2 pt-2'>
+            <span className='pr-1 text-text-tertiary system-sm-regular'>{t('common.modelProvider.discoverMore')}</span>
+            <Link target="_blank" href="/plugins" className='inline-flex items-center system-sm-medium text-text-accent'>
+              Dify Marketplace
+              <RiArrowRightUpLine className='w-4 h-4' />
+            </Link>
+          </div>
+        </div>
+        {!collapse && (
+          <div className='grid grid-cols-2 gap-2'>
+            {pluginList.map((plugin, index) => (
+              <ProviderCard key={index} locale={locale} payload={plugin as any} />
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   )
 }

web/app/components/plugins/install-model-item.tsx

@@ -1,5 +1,5 @@
-import type { FC } from 'react'
 import React from 'react'
+import type { FC } from 'react'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import Badge from '../base/badge'
 import type { Plugin } from './types'
@@ -7,19 +7,20 @@ import Description from './card/base/description'
 import Icon from './card/base/card-icon'
 import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
-import { getLocaleOnServer } from '@/i18n/server'
+import type { Locale } from '@/i18n'
 import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
+  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
   payload: Plugin
 }
 
 const PluginItem: FC<Props> = async ({
   className,
+  locale,
   payload,
 }) => {
-  const locale = getLocaleOnServer()
   const { org, label } = payload
 
   return (

web/app/components/plugins/provider-card.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import type { FC } from 'react'
+import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import Badge from '../base/badge'
+import type { Plugin } from './types'
+import Description from './card/base/description'
+import Icon from './card/base/card-icon'
+import Title from './card/base/title'
+import DownloadCount from './card/base/download-count'
+import Button from '@/app/components/base/button'
+import type { Locale } from '@/i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
+  payload: Plugin
+}
+
+const ProviderCard: FC<Props> = ({
+  className,
+  locale,
+  payload,
+}) => {
+  const { org, label } = payload
+
+  return (
+    <div className={cn('group relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+      {/* Header */}
+      <div className="flex">
+        <Icon src={payload.icon} />
+        <div className="ml-3 w-0 grow">
+          <div className="flex items-center h-5">
+            <Title title={label[locale]} />
+            <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+          </div>
+          <div className='mb-1 flex justify-between items-center h-4'>
+            <div className='flex items-center'>
+              <div className='text-text-tertiary system-xs-regular'>{org}</div>
+              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+              <DownloadCount downloadCount={payload.install_count || 0} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
+      <div className='mt-3 flex space-x-0.5'>
+        {['LLM', 'text embedding', 'speech2text'].map(tag => (
+          <Badge key={tag} text={tag} />
+        ))}
+      </div>
+      <div
+        className='hidden group-hover:flex items-center gap-2 absolute bottom-0 left-0 right-0 p-4 pt-8'
+        style={{ background: 'linear-gradient(0deg, #F9FAFB 60.27%, rgba(249, 250, 251, 0.00) 100%)' }}
+      >
+        <Button
+          className='flex-grow'
+          variant='primary'
+        >
+          Install
+        </Button>
+        <Button
+          className='flex-grow'
+          variant='secondary'
+        >
+          Details
+          <RiArrowRightUpLine className='w-4 h-4' />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default ProviderCard

web/i18n/en-US/common.ts

@@ -377,7 +377,7 @@ const translation = {
     configureRequired: 'Configure required',
     configureTip: 'Set up api-key or add model to use',
     installProvider: 'Install model providers',
-    discoverMore: 'Discover more in',
+    discoverMore: 'Discover more in ',
     emptyProviderTitle: 'Model provider not set up',
     emptyProviderTip: 'Please install a model provider first.',
   },