Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

web/app/components/plugins/card/index.tsx

@@ -11,6 +11,7 @@ import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
+import { useCategories } from '../hooks'
 
 export type Props = {
   className?: string
@@ -41,9 +42,9 @@ const Card = ({
 }: Props) => {
   const defaultLocale = useGetLanguage()
   const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
-
-  const { type, name, org, label, brief, icon, verified } = payload
-
+  const { categoriesMap } = useCategories()
+  const { type, category, name, org, label, brief, icon, verified } = payload
+  const cornerMark = type !== 'plugin' ? type : categoriesMap[category].label
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
 
@@ -59,7 +60,7 @@ const Card = ({
 
   return (
     <div className={wrapClassName}>
-      {!hideCornerMark && <CornerMark text={type} />}
+      {!hideCornerMark && <CornerMark text={cornerMark} />}
       {/* Header */}
       <div className="flex">
         <Icon src={icon} installed={installed} installFailed={installFailed} />

web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import type { Plugin, PluginManifestInMarket } from '../../types'
+import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
 import { InstallStep, PluginType } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
@@ -10,12 +10,15 @@ import { useTranslation } from 'react-i18next'
 import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 
 const i18nPrefix = 'plugin.installModal'
 
 type InstallFromMarketplaceProps = {
   uniqueIdentifier: string
   manifest: PluginManifestInMarket | Plugin
+  isBundle?: boolean
+  dependencies?: Dependency[]
   onSuccess: () => void
   onClose: () => void
 }
@@ -23,6 +26,8 @@ type InstallFromMarketplaceProps = {
 const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
   uniqueIdentifier,
   manifest,
+  isBundle,
+  dependencies,
   onSuccess,
   onClose,
 }) => {
@@ -83,7 +88,14 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
         )
       }
       {
-        ([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+        isBundle ? (
+          <ReadyToInstallBundle
+            step={step}
+            onStepChange={setStep}
+            onClose={onClose}
+            allPlugins={dependencies!}
+          />
+        ) : ([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
           <Installed
             payload={manifest!}
             isMarketPayload

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -173,7 +173,7 @@ const DetailHeader = ({
             <Title title={label[locale]} />
             {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
             <PluginVersionPicker
-              disabled={!isFromMarketplace || !hasNewVersion}
+              disabled={!isFromMarketplace}
               isShow={isShow}
               onShowChange={setIsShow}
               pluginID={plugin_id}
@@ -187,13 +187,13 @@ const DetailHeader = ({
                   className={cn(
                     'mx-1',
                     isShow && 'bg-state-base-hover',
-                    (isShow || isFromMarketplace) && hasNewVersion && 'hover:bg-state-base-hover',
+                    (isShow || isFromMarketplace) && 'hover:bg-state-base-hover',
                   )}
                   uppercase={false}
                   text={
                     <>
                       <div>{isFromGitHub ? meta!.version : version}</div>
-                      {isFromMarketplace && hasNewVersion && <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />}
+                      {isFromMarketplace && <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />}
                     </>
                   }
                   hasRedCornerMark={hasNewVersion}

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -6,26 +6,23 @@ import EndpointList from './endpoint-list'
 import ActionList from './action-list'
 import ModelList from './model-list'
 import Drawer from '@/app/components/base/drawer'
-import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
 
 type Props = {
   detail?: PluginDetail
   onUpdate: () => void
+  onHide: () => void
 }
 
 const PluginDetailPanel: FC<Props> = ({
   detail,
   onUpdate,
+  onHide,
 }) => {
-  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
-
-  const handleHide = () => setCurrentPluginID(undefined)
-
   const handleUpdate = (isDelete = false) => {
     if (isDelete)
-      handleHide()
+      onHide()
     onUpdate()
   }
 
@@ -36,7 +33,7 @@ const PluginDetailPanel: FC<Props> = ({
     <Drawer
       isOpen={!!detail}
       clickOutsideNotOpen={false}
-      onClose={handleHide}
+      onClose={onHide}
       footer={null}
       mask={false}
       positionCenter={false}
@@ -46,7 +43,7 @@ const PluginDetailPanel: FC<Props> = ({
         <>
           <DetailHeader
             detail={detail}
-            onHide={handleHide}
+            onHide={onHide}
             onUpdate={handleUpdate}
           />
           <div className='grow overflow-y-auto'>

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -15,6 +15,7 @@ const PluginsPanel = () => {
   const { data: pluginList, isLoading: isPluginListLoading } = useInstalledPluginList()
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
+  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
 
   const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
     setFilters(filters)
@@ -37,6 +38,8 @@ const PluginsPanel = () => {
     return detail
   }, [currentPluginID, pluginList?.plugins])
 
+  const handleHide = () => setCurrentPluginID(undefined)
+
   return (
     <>
       <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
@@ -54,7 +57,11 @@ const PluginsPanel = () => {
       ) : (
         <Empty />
       )}
-      <PluginDetailPanel detail={currentPluginDetail} onUpdate={() => invalidateInstalledPluginList()}/>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={handleHide}
+      />
     </>
   )
 }

web/app/components/plugins/types.ts

@@ -107,7 +107,7 @@ export type PluginDetail = {
 }
 
 export type Plugin = {
-  type: PluginType
+  type: 'plugin' | 'bundle'
   org: string
   name: string
   plugin_id: string

web/app/components/tools/provider-list.tsx

@@ -14,8 +14,10 @@ import CustomCreateCard from '@/app/components/tools/provider/custom-create-card
 import WorkflowToolEmpty from '@/app/components/tools/add-tool-modal/empty'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useAllToolProviders } from '@/service/use-tools'
+import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 
 const ProviderList = () => {
   const { t } = useTranslation()
@@ -52,8 +54,15 @@ const ProviderList = () => {
   }, [activeTab, tagFilterValue, keywords, collectionList])
 
   const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
+  const { data: pluginList } = useInstalledPluginList()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const currentPluginDetail = useMemo(() => {
+    const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentProvider?.plugin_id)
+    return detail
+  }, [currentProvider?.plugin_id, pluginList?.plugins])
 
   return (
+    <>
       <div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
         <div
           ref={containerRef}
@@ -130,14 +139,20 @@ const ProviderList = () => {
             )
           }
         </div>
-      {currentProvider && (
+      </div>
+      {currentProvider && !currentProvider.plugin_id && (
         <ProviderDetail
           collection={currentProvider}
           onHide={() => setCurrentProvider(undefined)}
           onRefreshData={refetch}
         />
       )}
-    </div>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={() => setCurrentProvider(undefined)}
+      />
+    </>
   )
 }
 ProviderList.displayName = 'ToolProviderList'

web/app/components/tools/types.ts

@@ -48,6 +48,7 @@ export type Collection = {
   is_team_authorization: boolean
   allow_delete: boolean
   labels: string[]
+  plugin_id?: string
 }
 
 export type ToolParameter = {