feat: can show install plugins

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

@@ -1,6 +1,6 @@
 'use client'
 import Card from '@/app/components/plugins/card'
-import { customTool, extensionDallE, modelGPT4, toolNeko, toolNotion } from '@/app/components/plugins/card/card-mock'
+import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 // import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 // import ProviderCard from '@/app/components/plugins/provider-card'
@@ -12,7 +12,23 @@ const PluginList = () => {
 
   return (
     <div className='pb-3 bg-white'>
-      <InstallBundle onClose={() => { }} plugins={[toolNeko, { ...toolNeko, plugin_unique_identifier: `${toolNeko.plugin_unique_identifier}xxx` }]} />
+      <InstallBundle onClose={() => { }} fromDSLPayload={[
+        {
+          type: 'marketplace',
+          value: {
+            plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+          },
+        },
+        {
+          type: 'github',
+          value: {
+            repo: 'YIXIAO0/test',
+            version: '1.11.5',
+            package: 'test.difypkg',
+            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+          },
+        },
+      ]} />
       <div className='mx-3 '>
         {/* <h2 className='my-3'>Dify Plugin list</h2> */}
         {/* <div className='grid grid-cols-2 gap-3'>

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import Modal from '@/app/components/base/modal'
 import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
-import type { PluginDeclaration } from '../../types'
+import type { Dependency } from '../../types'
 import Install from './steps/install'
 import { useTranslation } from 'react-i18next'
 
@@ -17,13 +17,14 @@ export enum InstallType {
 
 type Props = {
   installType?: InstallType
-  plugins?: PluginDeclaration[]
+  fromDSLPayload: Dependency[]
+  // plugins?: PluginDeclaration[]
   onClose: () => void
 }
 
 const InstallBundle: FC<Props> = ({
   installType = InstallType.fromMarketplace,
-  plugins = [],
+  fromDSLPayload,
   onClose,
 }) => {
   const { t } = useTranslation()
@@ -54,7 +55,7 @@ const InstallBundle: FC<Props> = ({
       </div>
       {step === InstallStep.readyToInstall && (
         <Install
-          plugins={plugins || []}
+          fromDSLPayload={fromDSLPayload}
           onCancel={onClose}
         />
       )}

web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx

@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { Dependency, Plugin } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useUploadGitHub } from '@/service/use-plugins'
+import Loading from './loading'
+import LoadedItem from './loaded-item'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  dependency: Dependency
+  onFetchedPayload: (payload: Plugin) => void
+}
+
+const Item: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  dependency,
+  onFetchedPayload,
+}) => {
+  const info = dependency.value
+  const { data } = useUploadGitHub({
+    repo: info.repo!,
+    version: info.version!,
+    package: info.package!,
+  })
+  const [payload, setPayload] = React.useState<Plugin | null>(null)
+  useEffect(() => {
+    if (data) {
+      const payload = pluginManifestToCardPluginProps(data.manifest)
+      onFetchedPayload(payload)
+      setPayload(payload)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data])
+  if (!payload) return <Loading />
+  return (
+    <LoadedItem
+      payload={payload}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  )
+}
+export default React.memo(Item)

web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx

@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Card from '../../../card'
+import Checkbox from '@/app/components/base/checkbox'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: Plugin
+}
+
+const LoadedItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+}) => {
+  return (
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={checked}
+        onCheck={() => onCheckedChange(payload)}
+      />
+      <Card
+        className='grow'
+        payload={payload}
+        titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
+      />
+    </div>
+  )
+}
+
+export default React.memo(LoadedItem)

web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react'
+
+const Loading = () => {
+  return (
+    <div>
+      Loading...
+    </div>
+  )
+}
+
+export default React.memo(Loading)

web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx

@@ -0,0 +1,29 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Loading from './loading'
+import LoadedItem from './loaded-item'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload?: Plugin
+}
+
+const MarketPlaceItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+}) => {
+  if (!payload) return <Loading />
+  return (
+    <LoadedItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      payload={payload}
+    />
+  )
+}
+
+export default React.memo(MarketPlaceItem)

web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx

@@ -0,0 +1,83 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import type { Dependency, Plugin } from '../../../types'
+import MarketplaceItem from '../item/marketplace-item'
+import GithubItem from '../item/github-item'
+import { useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
+import produce from 'immer'
+import { useGetState } from 'ahooks'
+
+type Props = {
+  fromDSLPayload: Dependency[]
+  selectedPlugins: Plugin[]
+  handleSelect: (plugin: Plugin) => void
+  onLoadedAllPlugin: () => void
+}
+
+const InstallByDSLList: FC<Props> = ({
+  fromDSLPayload,
+  selectedPlugins,
+  handleSelect,
+  onLoadedAllPlugin,
+}) => {
+  const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(fromDSLPayload.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
+  const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
+  const handlePlugInFetched = useCallback((index: number) => {
+    return (p: Plugin) => {
+      setPlugins(plugins.map((item, i) => i === index ? p : item))
+    }
+  }, [plugins])
+
+  const marketPlaceInDSLIndex = useMemo(() => {
+    const res: number[] = []
+    fromDSLPayload.forEach((d, index) => {
+      if (d.type === 'marketplace')
+        res.push(index)
+    })
+    return res
+  }, [fromDSLPayload])
+
+  useEffect(() => {
+    if (!isFetchingMarketplaceData && marketplaceRes?.data.plugins && marketplaceRes?.data.plugins.length > 0) {
+      const payloads = marketplaceRes?.data.plugins
+
+      const nextPlugins = produce(getPlugins(), (draft) => {
+        marketPlaceInDSLIndex.forEach((index, i) => {
+          draft[index] = payloads[i]
+        })
+      })
+      setPlugins(nextPlugins)
+      // marketplaceRes?.data.plugins
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingMarketplaceData])
+
+  const isLoadedAllData = fromDSLPayload.length === plugins.length && plugins.every(p => !!p)
+  useEffect(() => {
+    if (isLoadedAllData)
+      onLoadedAllPlugin()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadedAllData])
+  return (
+    <>
+      {fromDSLPayload.map((d, index) => (
+        d.type === 'github'
+          ? <GithubItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === d.value.plugin_unique_identifier)}
+            onCheckedChange={handleSelect}
+            dependency={d}
+            onFetchedPayload={handlePlugInFetched(index)}
+          />
+          : <MarketplaceItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === d.value.plugin_unique_identifier)}
+            onCheckedChange={handleSelect}
+            payload={plugins[index] as Plugin}
+          />
+      ))}
+    </>
+  )
+}
+export default React.memo(InstallByDSLList)

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -1,41 +1,42 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
-import type { PluginDeclaration } from '../../../types'
-import Card from '../../../card'
+import React, { useCallback } from 'react'
+import type { Dependency, Plugin } from '../../../types'
 import Button from '@/app/components/base/button'
 import { RiLoader2Line } from '@remixicon/react'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { pluginManifestToCardPluginProps } from '../../utils'
 import { useTranslation } from 'react-i18next'
-import Checkbox from '@/app/components/base/checkbox'
+import InstallByDSLList from './install-by-dsl-list'
 
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
-  plugins: PluginDeclaration[],
+  fromDSLPayload: Dependency[]
   onCancel: () => void
 }
 
 const Install: FC<Props> = ({
-  plugins,
+  fromDSLPayload,
   onCancel,
 }) => {
   const { t } = useTranslation()
-  const [selectedPlugins, setSelectedPlugins] = React.useState<PluginDeclaration[]>([])
+  const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
   const selectedPluginsNum = selectedPlugins.length
-  const handleSelect = (plugin: PluginDeclaration) => {
+
+  const handleSelect = (plugin: Plugin) => {
     return () => {
-      const isSelected = !!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)
+      const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
       let nextSelectedPlugins
       if (isSelected)
-        nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_unique_identifier !== plugin.plugin_unique_identifier)
+        nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_id !== plugin.plugin_id)
       else
         nextSelectedPlugins = [...selectedPlugins, plugin]
       setSelectedPlugins(nextSelectedPlugins)
     }
   }
-  const [isInstalling, setIsInstalling] = React.useState(false)
+  const [canInstall, setCanInstall] = React.useState(false)
+  const handleLoadedAllPlugin = useCallback(() => {
+    setCanInstall(true)
+  }, [])
   const handleInstall = () => {
 
   }
@@ -46,25 +47,17 @@ const Install: FC<Props> = ({
           <p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
         </div>
         <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
-          {plugins.map(plugin => (
-            <div className='flex items-center space-x-2' key={plugin.plugin_unique_identifier}>
-              <Checkbox
-                className='shrink-0'
-                checked={!!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)}
-                onCheck={handleSelect(plugin)}
+          <InstallByDSLList
+            fromDSLPayload={fromDSLPayload}
+            selectedPlugins={selectedPlugins}
+            handleSelect={handleSelect}
+            onLoadedAllPlugin={handleLoadedAllPlugin}
           />
-              <Card
-                className='grow'
-                payload={pluginManifestToCardPluginProps(plugin)}
-                titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge>}
-              />
-            </div>
-          ))}
         </div>
       </div>
       {/* Action Buttons */}
       <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
-        {!isInstalling && (
+        {!canInstall && (
           <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
             {t('common.operation.cancel')}
           </Button>
@@ -72,11 +65,11 @@ const Install: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={isInstalling || selectedPlugins.length === 0}
+          disabled={canInstall || selectedPlugins.length === 0}
           onClick={handleInstall}
         >
-          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
-          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+          {canInstall && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${canInstall ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
     </>

web/service/use-plugins.ts

@@ -7,6 +7,7 @@ import type {
   Permissions,
   PluginTask,
   PluginsFromMarketplaceResponse,
+  uploadGitHubResponse,
 } from '@/app/components/plugins/types'
 import type {
   PluginsSearchParams,
@@ -60,6 +61,19 @@ export const useInstallPackageFromLocal = () => {
   })
 }
 
+export const useUploadGitHub = (payload: {
+  repo: string
+  version: string
+  package: string
+}) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'uploadGitHub', payload],
+    queryFn: () => post<uploadGitHubResponse>('/workspaces/current/plugin/upload/github', {
+      body: payload,
+    }),
+  })
+}
+
 export const useDebugKey = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'debugKey'],
@@ -123,6 +137,17 @@ export const useMutationPluginsFromMarketplace = () => {
   })
 }
 
+export const useFetchPluginsInMarketPlaceByIds = (unique_identifiers: string[]) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'fetchPluginsInMarketPlaceByIds', unique_identifiers],
+    queryFn: () => postMarketplace<{ data: PluginsFromMarketplaceResponse }>('/plugins/identifier/batch', {
+      body: {
+        unique_identifiers,
+      },
+    }),
+  })
+}
+
 const usePluginTaskListKey = [NAME_SPACE, 'pluginTaskList']
 export const usePluginTaskList = () => {
   const [enabled, setEnabled] = useState(true)