just add

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

@@ -28,6 +28,12 @@ const PluginList = () => {
             github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
           },
         },
+        {
+          type: 'marketplace',
+          value: {
+            plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+          },
+        },
       ]} />
       <div className='mx-3 '>
         {/* <h2 className='my-3'>Dify Plugin list</h2> */}

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

@@ -11,17 +11,18 @@ import { useGetState } from 'ahooks'
 type Props = {
   fromDSLPayload: Dependency[]
   selectedPlugins: Plugin[]
-  handleSelect: (plugin: Plugin) => void
+  onSelect: (plugin: Plugin, selectedIndex: number) => void
   onLoadedAllPlugin: () => void
 }
 
 const InstallByDSLList: FC<Props> = ({
   fromDSLPayload,
   selectedPlugins,
-  handleSelect,
+  onSelect,
   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) => {
@@ -59,6 +60,12 @@ const InstallByDSLList: FC<Props> = ({
       onLoadedAllPlugin()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadedAllData])
+
+  const handleSelect = useCallback((index: number) => {
+    return () => {
+      onSelect(plugins[index], index)
+    }
+  }, [onSelect, plugins])
   return (
     <>
       {fromDSLPayload.map((d, index) => (
@@ -66,14 +73,14 @@ const InstallByDSLList: FC<Props> = ({
           ? <GithubItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
-            onCheckedChange={handleSelect}
+            onCheckedChange={handleSelect(index)}
             dependency={d}
             onFetchedPayload={handlePlugInFetched(index)}
           />
           : <MarketplaceItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
-            onCheckedChange={handleSelect}
+            onCheckedChange={handleSelect(index)}
             payload={plugins[index] as Plugin}
           />
       ))}

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

@@ -6,6 +6,7 @@ import Button from '@/app/components/base/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import InstallByDSLList from './install-by-dsl-list'
+import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -20,9 +21,10 @@ const Install: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
+  const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
   const selectedPluginsNum = selectedPlugins.length
 
-  const handleSelect = (plugin: Plugin) => {
+  const handleSelect = (plugin: Plugin, selectedIndex: number) => {
     const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
     let nextSelectedPlugins
     if (isSelected)
@@ -30,13 +32,23 @@ const Install: FC<Props> = ({
     else
       nextSelectedPlugins = [...selectedPlugins, plugin]
     setSelectedPlugins(nextSelectedPlugins)
+    const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
+    setSelectedIndexes(nextSelectedIndexes)
   }
   const [canInstall, setCanInstall] = React.useState(false)
   const handleLoadedAllPlugin = useCallback(() => {
     setCanInstall(true)
-  }, [])
+  }, [selectedPlugins, selectedIndexes])
-  const handleInstall = () => {
 
+  // Install from marketplace and github
+  const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
+    onSuccess: () => {
+      console.log('success!')
+    },
+  })
+  console.log(canInstall, !isInstalling, selectedPlugins.length === 0)
+  const handleInstall = () => {
+    installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
   }
   return (
     <>
@@ -48,7 +60,7 @@ const Install: FC<Props> = ({
           <InstallByDSLList
             fromDSLPayload={fromDSLPayload}
             selectedPlugins={selectedPlugins}
-            handleSelect={handleSelect}
+            onSelect={handleSelect}
             onLoadedAllPlugin={handleLoadedAllPlugin}
           />
         </div>
@@ -63,11 +75,11 @@ const Install: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={canInstall || selectedPlugins.length === 0}
+          disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
           onClick={handleInstall}
         >
-          {canInstall && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
-          <span>{t(`${i18nPrefix}.${canInstall ? 'installing' : 'install'}`)}</span>
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
         </Button>
       </div>
     </>

web/service/use-plugins.ts

@@ -94,6 +94,42 @@ export const useUploadGitHub = (payload: {
   })
 }
 
+export const useInstallFromMarketplaceAndGitHub = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationFn: (payload: Dependency[]) => {
+      return Promise.all(payload.map(async (item) => {
+        try {
+          if (item.type === 'github') {
+            await post<InstallPackageResponse>('/workspaces/current/plugin/install/github', {
+              body: {
+                repo: item.value.repo!,
+                version: item.value.version!,
+                package: item.value.package!,
+                plugin_unique_identifier: item.value.github_plugin_unique_identifier!,
+              },
+            })
+            return ({ success: true })
+          }
+          await post<InstallPackageResponse>('/workspaces/current/plugin/install/marketplace', {
+            body: {
+              plugin_unique_identifiers: [item.value.plugin_unique_identifier!],
+            },
+          })
+          return ({ success: true })
+        }
+        catch (e) {
+          return Promise.resolve({ success: false })
+        }
+      }))
+    },
+    onSuccess,
+  })
+}
+
 export const useDebugKey = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'debugKey'],