Merge branch 'feat/plugins' into dev/plugin-deploy

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

@@ -8,7 +8,7 @@ const PluginList = async () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace locale={locale} shouldExclude />}
+      marketplace={<Marketplace locale={locale} shouldExclude pluginTypeSwitchClassName='top-[60px]' />}
     />
   )
 }

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

@@ -285,3 +285,25 @@ export const useMarketplace = (providers: ModelProvider[], searchText: string) =
     plugins: plugins?.filter(plugin => plugin.type !== 'bundle'),
   }
 }
+
+export const useMarketplaceAllPlugins = () => {
+  const {
+    plugins,
+    queryPlugins,
+    isLoading,
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    queryPlugins({
+      query: '',
+      category: PluginType.model,
+      type: 'plugin',
+      pageSize: 1000,
+    })
+  }, [queryPlugins])
+
+  return {
+    plugins: plugins?.filter(plugin => plugin.type !== 'bundle'),
+    isLoading,
+  }
+}

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

@@ -22,6 +22,7 @@ import {
 import {
   useDefaultModel,
   useMarketplace,
+  useMarketplaceAllPlugins,
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
@@ -128,6 +129,10 @@ const ModelProviderPage = ({ searchText }: Props) => {
     marketplaceCollectionPluginsMap,
     isLoading: isPluginsLoading,
   } = useMarketplace(providers, searchText)
+  const {
+    plugins: allPlugins,
+    isLoading: isAllPluginsLoading,
+  } = useMarketplaceAllPlugins()
 
   const cardRender = useCallback((plugin: Plugin) => {
     if (plugin.type === 'bundle')
@@ -206,12 +211,12 @@ const ModelProviderPage = ({ searchText }: Props) => {
           <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'>
-              Dify Marketplace
+              {t('plugin.marketplace.difyMarketplace')}
               <RiArrowRightUpLine className='w-4 h-4' />
             </Link>
           </div>
         </div>
-        {!collapse && isPluginsLoading && <Loading type='area' />}
+        {!collapse && (isPluginsLoading || isAllPluginsLoading) && <Loading type='area' />}
         {
           !isPluginsLoading && (
             <List
@@ -225,6 +230,19 @@ const ModelProviderPage = ({ searchText }: Props) => {
             />
           )
         }
+        {
+          !isAllPluginsLoading && (
+            <List
+              marketplaceCollections={[]}
+              marketplaceCollectionPluginsMap={{}}
+              plugins={allPlugins}
+              showInstallButton
+              locale={locale}
+              cardContainerClassName='grid grid-cols-2 gap-2'
+              cardRender={cardRender}
+            />
+          )
+        }
       </div>
     </div>
   )

web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx

@@ -1,24 +1,24 @@
 'use client'
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import Button from '@/app/components/base/button'
-import { type PluginDeclaration, type PluginType, TaskStatus, type UpdateFromGitHubPayload } from '../../../types'
+import { type Plugin, type PluginDeclaration, TaskStatus, type UpdateFromGitHubPayload } from '../../../types'
 import Card from '../../../card'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useTranslation } from 'react-i18next'
 import { updateFromGitHub } from '@/service/plugins'
 import { useInstallPackageFromGitHub } from '@/service/use-plugins'
 import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTaskList } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
 import { parseGitHubUrl } from '../../utils'
-import { useCategories } from '../../../hooks'
+import Version from '../../base/version'
 
 type LoadedProps = {
   updatePayload: UpdateFromGitHubPayload
   uniqueIdentifier: string
-  payload: PluginDeclaration
+  payload: PluginDeclaration | Plugin
   repoUrl: string
   selectedVersion: string
   selectedPackage: string
@@ -41,21 +41,36 @@ const Loaded: React.FC<LoadedProps> = ({
   onFailed,
 }) => {
   const { t } = useTranslation()
-  const { categoriesMap } = useCategories()
+  const toInstallVersion = payload.version
+  const pluginId = (payload as Plugin).plugin_id
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
   const { handleRefetch } = usePluginTaskList()
   const { check } = checkTaskStatus()
 
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+  }, [hasInstalled])
+
   const handleInstall = async () => {
     if (isInstalling) return
     setIsInstalling(true)
 
     try {
       const { owner, repo } = parseGitHubUrl(repoUrl)
       let taskId
+      let isInstalled
       if (updatePayload) {
-        const { all_installed: isInstalled, task_id } = await updateFromGitHub(
+        const { all_installed, task_id } = await updateFromGitHub(
           `${owner}/${repo}`,
           selectedVersion,
           selectedPackage,
@@ -64,32 +79,42 @@ const Loaded: React.FC<LoadedProps> = ({
         )
 
         taskId = task_id
-
-        if (isInstalled) {
-          onInstalled()
-          return
-        }
-
-        handleRefetch()
+        isInstalled = all_installed
       }
       else {
-        const { all_installed: isInstalled, task_id } = await installPackageFromGitHub({
-          repoUrl: `${owner}/${repo}`,
-          selectedVersion,
-          selectedPackage,
-          uniqueIdentifier,
-        })
-
-        taskId = task_id
-
-        if (isInstalled) {
-          onInstalled()
-          return
+        if (hasInstalled) {
+          const {
+            all_installed,
+            task_id,
+          } = await updateFromGitHub(
+            `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            installedInfoPayload.uniqueIdentifier,
+            uniqueIdentifier,
+          )
+          taskId = task_id
+          isInstalled = all_installed
         }
+        else {
+          const { all_installed, task_id } = await installPackageFromGitHub({
+            repoUrl: `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            uniqueIdentifier,
+          })
 
-        handleRefetch()
+          taskId = task_id
+          isInstalled = all_installed
+        }
+      }
+      if (isInstalled) {
+        onInstalled()
+        return
       }
 
+      handleRefetch()
+
       const { status, error } = await check({
         taskId,
         pluginUniqueIdentifier: uniqueIdentifier,
@@ -120,8 +145,12 @@ const Loaded: React.FC<LoadedProps> = ({
       <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
         <Card
           className='w-full'
-          payload={{ ...pluginManifestToCardPluginProps(payload), type: categoriesMap[payload.category].label as PluginType }}
-          titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
+          payload={pluginManifestToCardPluginProps(payload as PluginDeclaration)}
+          titleLeft={!isLoading && <Version
+            hasInstalled={hasInstalled}
+            installedVersion={installedVersion}
+            toInstallVersion={toInstallVersion}
+          />}
         />
       </div>
       <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
@@ -134,7 +163,7 @@ const Loaded: React.FC<LoadedProps> = ({
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
           onClick={handleInstall}
-          disabled={isInstalling}
+          disabled={isInstalling || isLoading}
         >
           {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
           <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>