feat: support local installed package

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

@@ -56,7 +56,7 @@ const InstallBundle: FC<Props> = ({
       <ReadyToInstall
         step={step}
         onStepChange={setStep}
-        dependencies={fromDSLPayload}
+        allPlugins={fromDSLPayload}
         onClose={onClose}
       />
     </Modal>

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
-import type { Dependency, Plugin } from '../../../types'
+import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useUploadGitHub } from '@/service/use-plugins'
 import Loading from './loading'
@@ -10,8 +10,9 @@ import LoadedItem from './loaded-item'
 type Props = {
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
-  dependency: Dependency
+  dependency: GitHubItemAndMarketPlaceDependency
   onFetchedPayload: (payload: Plugin) => void
+  onFetchError: () => void
 }
 
 const Item: FC<Props> = ({
@@ -19,9 +20,10 @@ const Item: FC<Props> = ({
   onCheckedChange,
   dependency,
   onFetchedPayload,
+  onFetchError,
 }) => {
   const info = dependency.value
-  const { data } = useUploadGitHub({
+  const { data, error } = useUploadGitHub({
     repo: info.repo!,
     version: info.version!,
     package: info.package!,
@@ -38,6 +40,12 @@ const Item: FC<Props> = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data])
+  useEffect(() => {
+    if (error)
+      onFetchError()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error])
   if (!payload) return <Loading />
   return (
     <LoadedItem

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

@@ -0,0 +1,30 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import type { PackageDependency } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import LoadedItem from './loaded-item'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: PackageDependency
+}
+
+const PackageItem: FC<Props> = ({
+  payload,
+  checked,
+  onCheckedChange,
+}) => {
+  const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
+  return (
+    <LoadedItem
+      payload={plugin}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  )
+}
+
+export default React.memo(PackageItem)

web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx

@@ -9,14 +9,14 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
 type Props = {
   step: InstallStep
   onStepChange: (step: InstallStep) => void,
-  dependencies: Dependency[]
+  allPlugins: Dependency[]
   onClose: () => void
 }
 
 const ReadyToInstall: FC<Props> = ({
   step,
   onStepChange,
-  dependencies,
+  allPlugins,
   onClose,
 }) => {
   const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
@@ -30,7 +30,7 @@ const ReadyToInstall: FC<Props> = ({
     <>
       {step === InstallStep.readyToInstall && (
         <Install
-          fromDSLPayload={dependencies}
+          allPlugins={allPlugins}
           onCancel={onClose}
           onInstalled={handleInstalled}
         />

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

@@ -1,30 +1,34 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import type { Dependency, Plugin } from '../../../types'
+import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, 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'
+import PackageItem from '../item/package-item'
 
 type Props = {
-  fromDSLPayload: Dependency[]
+  allPlugins: Dependency[]
   selectedPlugins: Plugin[]
   onSelect: (plugin: Plugin, selectedIndex: number) => void
   onLoadedAllPlugin: () => void
 }
 
 const InstallByDSLList: FC<Props> = ({
-  fromDSLPayload,
+  allPlugins,
   selectedPlugins,
   onSelect,
   onLoadedAllPlugin,
 }) => {
-  const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(fromDSLPayload.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
+  const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
 
   const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
-  const handlePlugInFetched = useCallback((index: number) => {
+
+  const [errorIndexes, setErrorIndexes] = useState<number[]>([])
+
+  const handleGitHubPluginFetched = useCallback((index: number) => {
     return (p: Plugin) => {
       const nextPlugins = produce(getPlugins(), (draft) => {
         draft[index] = p
@@ -33,14 +37,20 @@ const InstallByDSLList: FC<Props> = ({
     }
   }, [getPlugins, setPlugins])
 
+  const handleGitHubPluginFetchError = useCallback((index: number) => {
+    return () => {
+      setErrorIndexes([...errorIndexes, index])
+    }
+  }, [errorIndexes])
+
   const marketPlaceInDSLIndex = useMemo(() => {
     const res: number[] = []
-    fromDSLPayload.forEach((d, index) => {
+    allPlugins.forEach((d, index) => {
       if (d.type === 'marketplace')
         res.push(index)
     })
     return res
-  }, [fromDSLPayload])
+  }, [allPlugins])
 
   useEffect(() => {
     if (!isFetchingMarketplaceData && marketplaceRes?.data.plugins && marketplaceRes?.data.plugins.length > 0) {
@@ -57,7 +67,7 @@ const InstallByDSLList: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetchingMarketplaceData])
 
-  const isLoadedAllData = fromDSLPayload.length === plugins.length && plugins.every(p => !!p)
+  const isLoadedAllData = allPlugins.length === plugins.length && plugins.every(p => !!p)
   useEffect(() => {
     if (isLoadedAllData)
       onLoadedAllPlugin()
@@ -71,22 +81,44 @@ const InstallByDSLList: FC<Props> = ({
   }, [onSelect, plugins])
   return (
     <>
-      {fromDSLPayload.map((d, index) => (
+      {allPlugins.map((d, index) => {
-        d.type === 'github'
+        if (errorIndexes.includes(index)) {
-          ? <GithubItem
+          return (
+            <div key={index}>error</div>
+          )
+        }
+        if (d.type === 'github') {
+          return (<GithubItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
             onCheckedChange={handleSelect(index)}
-            dependency={d}
+            dependency={d as GitHubItemAndMarketPlaceDependency}
-            onFetchedPayload={handlePlugInFetched(index)}
+            onFetchedPayload={handleGitHubPluginFetched(index)}
-          />
+            onFetchError={handleGitHubPluginFetchError(index)}
-          : <MarketplaceItem
+          />)
+        }
+
+        if (d.type === 'marketplace') {
+          return (
+            <MarketplaceItem
+              key={index}
+              checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+              onCheckedChange={handleSelect(index)}
+              payload={plugins[index] as Plugin}
+            />
+          )
+        }
+
+        return (
+          <PackageItem
             key={index}
             checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
             onCheckedChange={handleSelect(index)}
-            payload={plugins[index] as Plugin}
+            payload={d as PackageDependency}
           />
-      ))}
+        )
+      })
+      }
     </>
   )
 }

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

@@ -5,19 +5,19 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../../types'
 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 InstallByDSLList from './install-multi'
 import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
-  fromDSLPayload: Dependency[]
+  allPlugins: Dependency[]
   onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
   onCancel: () => void
 }
 
 const Install: FC<Props> = ({
-  fromDSLPayload,
+  allPlugins,
   onInstalled,
   onCancel,
 }) => {
@@ -49,7 +49,7 @@ const Install: FC<Props> = ({
       onInstalled(selectedPlugins, res.map((r, i) => {
         return ({
           ...r,
-          isFromMarketPlace: fromDSLPayload[selectedIndexes[i]].type === 'marketplace',
+          isFromMarketPlace: allPlugins[selectedIndexes[i]].type === 'marketplace',
         })
       }))
       const hasInstallSuccess = res.some(r => r.success)
@@ -58,7 +58,7 @@ const Install: FC<Props> = ({
     },
   })
   const handleInstall = () => {
-    installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
+    installFromMarketplaceAndGitHub(allPlugins.filter((_d, index) => selectedIndexes.includes(index)))
   }
   return (
     <>
@@ -68,7 +68,7 @@ const Install: FC<Props> = ({
         </div>
         <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
           <InstallByDSLList
-            fromDSLPayload={fromDSLPayload}
+            allPlugins={allPlugins}
             selectedPlugins={selectedPlugins}
             onSelect={handleSelect}
             onLoadedAllPlugin={handleLoadedAllPlugin}

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

@@ -98,7 +98,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
           step={step}
           onStepChange={setStep}
           onClose={onClose}
-          dependencies={dependencies}
+          allPlugins={dependencies}
         />
       ) : (
         <ReadyToInstallPackage

web/app/components/plugins/types.ts

@@ -311,7 +311,7 @@ export type PluginsFromMarketplaceResponse = {
   plugins: Plugin[]
 }
 
-export type Dependency = {
+export type GitHubItemAndMarketPlaceDependency = {
   type: 'github' | 'marketplace' | 'package'
   value: {
     repo?: string
@@ -323,6 +323,16 @@ export type Dependency = {
   }
 }
 
+export type PackageDependency = {
+  type: 'github' | 'marketplace' | 'package'
+  value: {
+    unique_identifier: string
+    manifest: PluginDeclaration
+  }
+}
+
+export type Dependency = GitHubItemAndMarketPlaceDependency | PackageDependency
+
 export type Version = {
   plugin_org: string
   plugin_name: string