datasource page add marketplace

web/app/components/header/account-setting/data-source-page-new/card.tsx

@@ -6,7 +6,7 @@ const Card = () => {
   return (
     <div className='rounded-xl bg-background-section-burn'>
       <div className='flex items-center p-3 pb-2'>
-        <div className='shrinkj-0 mr-3 flex h-10 w-10 items-center justify-center'></div>
+        <div className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center'></div>
         <div className='grow'>
           <div className='system-md-semibold text-text-primary'>
             Notion Data Source

web/app/components/header/account-setting/data-source-page-new/hooks.ts

@@ -0,0 +1,80 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+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'
+
+export const useMarketplaceAllPlugins = (providers: any[], 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.datasource,
+        exclude,
+        type: 'plugin',
+        sortBy: 'install_count',
+        sortOrder: 'DESC',
+      })
+    }
+    else {
+      queryPlugins({
+        query: '',
+        category: PluginType.datasource,
+        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,
+  }
+}

web/app/components/header/account-setting/data-source-page-new/index.tsx

@@ -1,12 +1,26 @@
+import { memo } from 'react'
 import Card from './card'
+import InstallFromMarketplace from './install-from-marketplace'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const DataSourcePage = () => {
+  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
   return (
-    <div className='space-y-2'>
-      <Card />
-      <Card />
+    <div>
+      <div className='space-y-2'>
+        <Card />
+        <Card />
+      </div>
+      {
+        enable_marketplace && (
+          <InstallFromMarketplace
+            providers={[]}
+            searchText={''}
+          />
+        )
+      }
     </div>
   )
 }
 
-export default DataSourcePage
+export default memo(DataSourcePage)

web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import {
+  RiArrowDownSLine,
+  RiArrowRightUpLine,
+} from '@remixicon/react'
+import {
+  useMarketplaceAllPlugins,
+} from './hooks'
+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 type { Plugin } from '@/app/components/plugins/types'
+import cn from '@/utils/classnames'
+import { getLocaleOnClient } from '@/i18n'
+import { getMarketplaceUrl } from '@/utils/var'
+
+type InstallFromMarketplaceProps = {
+  providers: any[]
+  searchText: string
+}
+const InstallFromMarketplace = ({
+  providers,
+  searchText,
+}: InstallFromMarketplaceProps) => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  const [collapse, setCollapse] = useState(false)
+  const locale = getLocaleOnClient()
+  const {
+    plugins: allPlugins,
+    isLoading: isAllPluginsLoading,
+  } = useMarketplaceAllPlugins(providers, searchText)
+
+  const cardRender = useCallback((plugin: Plugin) => {
+    if (plugin.type === 'bundle')
+      return null
+
+    return <ProviderCard key={plugin.plugin_id} payload={plugin} />
+  }, [])
+
+  return (
+    <div className='mb-2'>
+      <Divider className='!mt-4 h-px' />
+      <div className='flex items-center justify-between'>
+        <div className='system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary' onClick={() => setCollapse(!collapse)}>
+          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
+          {t('common.modelProvider.installProvider')}
+        </div>
+        <div className='mb-2 flex items-center pt-2'>
+          <span className='system-sm-regular pr-1 text-text-tertiary'>{t('common.modelProvider.discoverMore')}</span>
+          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className='system-sm-medium inline-flex items-center text-text-accent'>
+            {t('plugin.marketplace.difyMarketplace')}
+            <RiArrowRightUpLine className='h-4 w-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>
+  )
+}
+
+export default InstallFromMarketplace