Introduce Plugins (#13836)

Signed-off-by: yihong0618 <zouzou0208@gmail.com> Signed-off-by: -LAN- <laipz8200@outlook.com> Signed-off-by: xhe <xw897002528@gmail.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: takatost <takatost@gmail.com> Co-authored-by: kurokobo <kuro664@gmail.com> Co-authored-by: Novice Lee <novicelee@NoviPro.local> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: AkaraChen <akarachen@outlook.com> Co-authored-by: Yi <yxiaoisme@gmail.com> Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com> Co-authored-by: AkaraChen <85140972+AkaraChen@users.noreply.github.com> Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Co-authored-by: 非法操作 <hjlarry@163.com> Co-authored-by: Novice <857526207@qq.com> Co-authored-by: Hiroki Nagai <82458324+nagaihiroki-git@users.noreply.github.com> Co-authored-by: Gen Sato <52241300+halogen22@users.noreply.github.com> Co-authored-by: eux <euxuuu@gmail.com> Co-authored-by: huangzhuo1949 <167434202+huangzhuo1949@users.noreply.github.com> Co-authored-by: huangzhuo <huangzhuo1@xiaomi.com> Co-authored-by: lotsik <lotsik@mail.ru> Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: nite-knite <nkCoding@gmail.com> Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: gakkiyomi <gakkiyomi@aliyun.com> Co-authored-by: CN-P5 <heibai2006@gmail.com> Co-authored-by: CN-P5 <heibai2006@qq.com> Co-authored-by: Chuehnone <1897025+chuehnone@users.noreply.github.com> Co-authored-by: yihong <zouzou0208@gmail.com> Co-authored-by: Kevin9703 <51311316+Kevin9703@users.noreply.github.com> Co-authored-by: -LAN- <laipz8200@outlook.com> Co-authored-by: Boris Feld <lothiraldan@gmail.com> Co-authored-by: mbo <himabo@gmail.com> Co-authored-by: mabo <mabo@aeyes.ai> Co-authored-by: Warren Chen <warren.chen830@gmail.com> Co-authored-by: JzoNgKVO <27049666+JzoNgKVO@users.noreply.github.com> Co-authored-by: jiandanfeng <chenjh3@wangsu.com> Co-authored-by: zhu-an <70234959+xhdd123321@users.noreply.github.com> Co-authored-by: zhaoqingyu.1075 <zhaoqingyu.1075@bytedance.com> Co-authored-by: 海狸大師 <86974027+yenslife@users.noreply.github.com> Co-authored-by: Xu Song <xusong.vip@gmail.com> Co-authored-by: rayshaw001 <396301947@163.com> Co-authored-by: Ding Jiatong <dingjiatong@gmail.com> Co-authored-by: Bowen Liang <liangbowen@gf.com.cn> Co-authored-by: JasonVV <jasonwangiii@outlook.com> Co-authored-by: le0zh <newlight@qq.com> Co-authored-by: zhuxinliang <zhuxinliang@didiglobal.com> Co-authored-by: k-zaku <zaku99@outlook.jp> Co-authored-by: luckylhb90 <luckylhb90@gmail.com> Co-authored-by: hobo.l <hobo.l@binance.com> Co-authored-by: jiangbo721 <365065261@qq.com> Co-authored-by: 刘江波 <jiangbo721@163.com> Co-authored-by: Shun Miyazawa <34241526+miya@users.noreply.github.com> Co-authored-by: EricPan <30651140+Egfly@users.noreply.github.com> Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: sino <sino2322@gmail.com> Co-authored-by: Jhvcc <37662342+Jhvcc@users.noreply.github.com> Co-authored-by: lowell <lowell.hu@zkteco.in> Co-authored-by: Boris Polonsky <BorisPolonsky@users.noreply.github.com> Co-authored-by: Ademílson Tonato <ademilsonft@outlook.com> Co-authored-by: Ademílson Tonato <ademilson.tonato@refurbed.com> Co-authored-by: IWAI, Masaharu <iwaim.sub@gmail.com> Co-authored-by: Yueh-Po Peng (Yabi) <94939112+y10ab1@users.noreply.github.com> Co-authored-by: Jason <ggbbddjm@gmail.com> Co-authored-by: Xin Zhang <sjhpzx@gmail.com> Co-authored-by: yjc980121 <3898524+yjc980121@users.noreply.github.com> Co-authored-by: heyszt <36215648+hieheihei@users.noreply.github.com> Co-authored-by: Abdullah AlOsaimi <osaimiacc@gmail.com> Co-authored-by: Abdullah AlOsaimi <189027247+osaimi@users.noreply.github.com> Co-authored-by: Yingchun Lai <laiyingchun@apache.org> Co-authored-by: Hash Brown <hi@xzd.me> Co-authored-by: zuodongxu <192560071+zuodongxu@users.noreply.github.com> Co-authored-by: Masashi Tomooka <tmokmss@users.noreply.github.com> Co-authored-by: aplio <ryo.091219@gmail.com> Co-authored-by: Obada Khalili <54270856+obadakhalili@users.noreply.github.com> Co-authored-by: Nam Vu <zuzoovn@gmail.com> Co-authored-by: Kei YAMAZAKI <1715090+kei-yamazaki@users.noreply.github.com> Co-authored-by: TechnoHouse <13776377+deephbz@users.noreply.github.com> Co-authored-by: Riddhimaan-Senapati <114703025+Riddhimaan-Senapati@users.noreply.github.com> Co-authored-by: MaFee921 <31881301+2284730142@users.noreply.github.com> Co-authored-by: te-chan <t-nakanome@sakura-is.co.jp> Co-authored-by: HQidea <HQidea@users.noreply.github.com> Co-authored-by: Joshbly <36315710+Joshbly@users.noreply.github.com> Co-authored-by: xhe <xw897002528@gmail.com> Co-authored-by: weiwenyan-dev <154779315+weiwenyan-dev@users.noreply.github.com> Co-authored-by: ex_wenyan.wei <ex_wenyan.wei@tcl.com> Co-authored-by: engchina <12236799+engchina@users.noreply.github.com> Co-authored-by: engchina <atjapan2015@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: 呆萌闷油瓶 <253605712@qq.com> Co-authored-by: Kemal <kemalmeler@outlook.com> Co-authored-by: Lazy_Frog <4590648+lazyFrogLOL@users.noreply.github.com> Co-authored-by: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com> Co-authored-by: Steven sun <98230804+Tuyohai@users.noreply.github.com> Co-authored-by: steven <sunzwj@digitalchina.com> Co-authored-by: Kalo Chin <91766386+fdb02983rhy@users.noreply.github.com> Co-authored-by: Katy Tao <34019945+KatyTao@users.noreply.github.com> Co-authored-by: depy <42985524+h4ckdepy@users.noreply.github.com> Co-authored-by: 胡春东 <gycm520@gmail.com> Co-authored-by: Junjie.M <118170653@qq.com> Co-authored-by: MuYu <mr.muzea@gmail.com> Co-authored-by: Naoki Takashima <39912547+takatea@users.noreply.github.com> Co-authored-by: Summer-Gu <37869445+gubinjie@users.noreply.github.com> Co-authored-by: Fei He <droxer.he@gmail.com> Co-authored-by: ybalbert001 <120714773+ybalbert001@users.noreply.github.com> Co-authored-by: Yuanbo Li <ybalbert@amazon.com> Co-authored-by: douxc <7553076+douxc@users.noreply.github.com> Co-authored-by: liuzhenghua <1090179900@qq.com> Co-authored-by: Wu Jiayang <62842862+Wu-Jiayang@users.noreply.github.com> Co-authored-by: Your Name <you@example.com> Co-authored-by: kimjion <45935338+kimjion@users.noreply.github.com> Co-authored-by: AugNSo <song.tiankai@icloud.com> Co-authored-by: llinvokerl <38915183+llinvokerl@users.noreply.github.com> Co-authored-by: liusurong.lsr <liusurong.lsr@alibaba-inc.com> Co-authored-by: Vasu Negi <vasu-negi@users.noreply.github.com> Co-authored-by: Hundredwz <1808096180@qq.com> Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>
2025-12-12 12:26:54 +08:00 · 2025-02-17 17:05:13 +08:00
parent 222df44d21
commit 403e2d58b9
3272 changed files with 66339 additions and 281594 deletions
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -0,0 +1,75 @@
+'use client'
+import type { FC } from 'react'
+import Modal from '@/app/components/base/modal'
+import React, { useCallback, useState } from 'react'
+import { InstallStep } from '../../types'
+import type { Dependency } from '../../types'
+import ReadyToInstall from './ready-to-install'
+import { useTranslation } from 'react-i18next'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.installModal'
+
+export enum InstallType {
+  fromLocal = 'fromLocal',
+  fromMarketplace = 'fromMarketplace',
+  fromDSL = 'fromDSL',
+}
+
+type Props = {
+  installType?: InstallType
+  fromDSLPayload: Dependency[]
+  // plugins?: PluginDeclaration[]
+  onClose: () => void
+}
+
+const InstallBundle: FC<Props> = ({
+  installType = InstallType.fromMarketplace,
+  fromDSLPayload,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [step, t])
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      closable
+    >
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+          {getTitle()}
+        </div>
+      </div>
+      <ReadyToInstall
+        step={step}
+        onStepChange={setStep}
+        onStartToInstall={handleStartToInstall}
+        setIsInstalling={setIsInstalling}
+        allPlugins={fromDSLPayload}
+        onClose={onClose}
+      />
+    </Modal>
+  )
+}
+
+export default React.memo(InstallBundle)
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -0,0 +1,62 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useUploadGitHub } from '@/service/use-plugins'
+import Loading from '../../base/loading'
+import LoadedItem from './loaded-item'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  dependency: GitHubItemAndMarketPlaceDependency
+  versionInfo: VersionProps
+  onFetchedPayload: (payload: Plugin) => void
+  onFetchError: () => void
+}
+
+const Item: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  dependency,
+  versionInfo,
+  onFetchedPayload,
+  onFetchError,
+}) => {
+  const info = dependency.value
+  const { data, error } = useUploadGitHub({
+    repo: info.repo!,
+    version: info.release! || info.version!,
+    package: info.packages! || info.package!,
+  })
+  const [payload, setPayload] = React.useState<Plugin | null>(null)
+  useEffect(() => {
+    if (data) {
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
+      onFetchedPayload(payload)
+      setPayload(payload)
+    }
+    // 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
+      payload={payload}
+      versionInfo={versionInfo}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  )
+}
+export default React.memo(Item)
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@@ -0,0 +1,51 @@
+'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 useGetIcon from '../../base/use-get-icon'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import Version from '../../base/version'
+import type { VersionProps } from '../../../types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: Plugin
+  isFromMarketPlace?: boolean
+  versionInfo: VersionProps
+}
+
+const LoadedItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+  isFromMarketPlace,
+  versionInfo: particleVersionInfo,
+}) => {
+  const { getIconUrl } = useGetIcon()
+  const versionInfo = {
+    ...particleVersionInfo,
+    toInstallVersion: payload.version,
+  }
+  return (
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={checked}
+        onCheck={() => onCheckedChange(payload)}
+      />
+      <Card
+        className='grow'
+        payload={{
+          ...payload,
+          icon: isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${payload.org}/${payload.name}/icon` : getIconUrl(payload.icon),
+        }}
+        titleLeft={payload.version ? <Version {...versionInfo} /> : null}
+      />
+    </div>
+  )
+}
+
+export default React.memo(LoadedItem)
--- a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Loading from '../../base/loading'
+import LoadedItem from './loaded-item'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload?: Plugin
+  version: string
+  versionInfo: VersionProps
+}
+
+const MarketPlaceItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+  version,
+  versionInfo,
+}) => {
+  if (!payload) return <Loading />
+  return (
+    <LoadedItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      payload={{ ...payload, version }}
+      isFromMarketPlace
+      versionInfo={versionInfo}
+    />
+  )
+}
+
+export default React.memo(MarketPlaceItem)
--- a/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
@@ -0,0 +1,41 @@
+'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'
+import LoadingError from '../../base/loading-error'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: PackageDependency
+  isFromMarketPlace?: boolean
+  versionInfo: VersionProps
+}
+
+const PackageItem: FC<Props> = ({
+  payload,
+  checked,
+  onCheckedChange,
+  isFromMarketPlace,
+  versionInfo,
+}) => {
+  if (!payload.value?.manifest)
+    return <LoadingError />
+
+  const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
+  return (
+    <LoadedItem
+      payload={plugin}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      isFromMarketPlace={isFromMarketPlace}
+      versionInfo={versionInfo}
+    />
+  )
+}
+
+export default React.memo(PackageItem)
--- a/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
@@ -0,0 +1,57 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from './steps/installed'
+import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
+  allPlugins: Dependency[]
+  onClose: () => void
+  isFromMarketPlace?: boolean
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onStartToInstall,
+  setIsInstalling,
+  allPlugins,
+  onClose,
+  isFromMarketPlace,
+}) => {
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    onStepChange(InstallStep.installed)
+    setIsInstalling(false)
+  }, [onStepChange, setIsInstalling])
+  return (
+    <>
+      {step === InstallStep.readyToInstall && (
+        <Install
+          allPlugins={allPlugins}
+          onCancel={onClose}
+          onStartToInstall={onStartToInstall}
+          onInstalled={handleInstalled}
+          isFromMarketPlace={isFromMarketPlace}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
@@ -0,0 +1,221 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin, VersionInfo } from '../../../types'
+import MarketplaceItem from '../item/marketplace-item'
+import GithubItem from '../item/github-item'
+import { useFetchPluginsInMarketPlaceByIds, useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import produce from 'immer'
+import PackageItem from '../item/package-item'
+import LoadingError from '../../base/loading-error'
+
+type Props = {
+  allPlugins: Dependency[]
+  selectedPlugins: Plugin[]
+  onSelect: (plugin: Plugin, selectedIndex: number) => void
+  onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
+  isFromMarketPlace?: boolean
+}
+
+const InstallByDSLList: FC<Props> = ({
+  allPlugins,
+  selectedPlugins,
+  onSelect,
+  onLoadedAllPlugin,
+  isFromMarketPlace,
+}) => {
+  // DSL has id, to get plugin info to show more info
+  const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.marketplace_plugin_unique_identifier!))
+  // has meta(org,name,version), to get id
+  const { isLoading: isFetchingDataByMeta, data: infoByMeta, error: infoByMetaError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value!))
+
+  const [plugins, doSetPlugins] = useState<(Plugin | undefined)[]>((() => {
+    const hasLocalPackage = allPlugins.some(d => d.type === 'package')
+    if (!hasLocalPackage)
+      return []
+
+    const _plugins = allPlugins.map((d) => {
+      if (d.type === 'package') {
+        return {
+          ...(d as any).value.manifest,
+          plugin_id: (d as any).value.unique_identifier,
+        }
+      }
+
+      return undefined
+    })
+    return _plugins
+  })())
+
+  const pluginsRef = React.useRef<(Plugin | undefined)[]>(plugins)
+
+  const setPlugins = useCallback((p: (Plugin | undefined)[]) => {
+    doSetPlugins(p)
+    pluginsRef.current = p
+  }, [])
+
+  const [errorIndexes, setErrorIndexes] = useState<number[]>([])
+
+  const handleGitHubPluginFetched = useCallback((index: number) => {
+    return (p: Plugin) => {
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        draft[index] = p
+      })
+      setPlugins(nextPlugins)
+    }
+  }, [setPlugins])
+
+  const handleGitHubPluginFetchError = useCallback((index: number) => {
+    return () => {
+      setErrorIndexes([...errorIndexes, index])
+    }
+  }, [errorIndexes])
+
+  const marketPlaceInDSLIndex = useMemo(() => {
+    const res: number[] = []
+    allPlugins.forEach((d, index) => {
+      if (d.type === 'marketplace')
+        res.push(index)
+    })
+    return res
+  }, [allPlugins])
+
+  useEffect(() => {
+    if (!isFetchingMarketplaceDataById && infoGetById?.data.plugins) {
+      const payloads = infoGetById?.data.plugins
+      const failedIndex: number[] = []
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        marketPlaceInDSLIndex.forEach((index, i) => {
+          if (payloads[i]) {
+            draft[index] = {
+              ...payloads[i],
+              version: payloads[i].version || payloads[i].latest_version,
+            }
+          }
+          else { failedIndex.push(index) }
+        })
+      })
+      setPlugins(nextPlugins)
+
+      if (failedIndex.length > 0)
+        setErrorIndexes([...errorIndexes, ...failedIndex])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingMarketplaceDataById])
+
+  useEffect(() => {
+    if (!isFetchingDataByMeta && infoByMeta?.data.list) {
+      const payloads = infoByMeta?.data.list
+      const failedIndex: number[] = []
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        marketPlaceInDSLIndex.forEach((index, i) => {
+          if (payloads[i]) {
+            const item = payloads[i]
+            draft[index] = {
+              ...item.plugin,
+              plugin_id: item.version.unique_identifier,
+            }
+          }
+          else {
+            failedIndex.push(index)
+          }
+        })
+      })
+      setPlugins(nextPlugins)
+      if (failedIndex.length > 0)
+        setErrorIndexes([...errorIndexes, ...failedIndex])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingDataByMeta])
+
+  useEffect(() => {
+    // get info all failed
+    if (infoByMetaError || infoByIdError)
+      setErrorIndexes([...errorIndexes, ...marketPlaceInDSLIndex])
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoByMetaError, infoByIdError])
+
+  const isLoadedAllData = (plugins.filter(p => !!p).length + errorIndexes.length) === allPlugins.length
+
+  const { installedInfo } = useCheckInstalled({
+    pluginIds: plugins?.filter(p => !!p).map((d) => {
+      return `${d?.org || d?.author}/${d?.name}`
+    }) || [],
+    enabled: isLoadedAllData,
+  })
+
+  const getVersionInfo = useCallback((pluginId: string) => {
+    const pluginDetail = installedInfo?.[pluginId]
+    const hasInstalled = !!pluginDetail
+    return {
+      hasInstalled,
+      installedVersion: pluginDetail?.installedVersion,
+      toInstallVersion: '',
+    }
+  }, [installedInfo])
+
+  useEffect(() => {
+    if (isLoadedAllData && installedInfo)
+      onLoadedAllPlugin(installedInfo!)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadedAllData, installedInfo])
+
+  const handleSelect = useCallback((index: number) => {
+    return () => {
+      onSelect(plugins[index]!, index)
+    }
+  }, [onSelect, plugins])
+  return (
+    <>
+      {allPlugins.map((d, index) => {
+        if (errorIndexes.includes(index)) {
+          return (
+            <LoadingError key={index} />
+          )
+        }
+        const plugin = plugins[index]
+        if (d.type === 'github') {
+          return (<GithubItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+            onCheckedChange={handleSelect(index)}
+            dependency={d as GitHubItemAndMarketPlaceDependency}
+            onFetchedPayload={handleGitHubPluginFetched(index)}
+            onFetchError={handleGitHubPluginFetchError(index)}
+            versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+          />)
+        }
+
+        if (d.type === 'marketplace') {
+          return (
+            <MarketplaceItem
+              key={index}
+              checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+              onCheckedChange={handleSelect(index)}
+              payload={plugin}
+              version={(d as GitHubItemAndMarketPlaceDependency).value.version! || plugin?.version || ''}
+              versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+            />
+          )
+        }
+
+        // Local package
+        return (
+          <PackageItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+            onCheckedChange={handleSelect(index)}
+            payload={d as PackageDependency}
+            isFromMarketPlace={isFromMarketPlace}
+            versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+          />
+        )
+      })
+      }
+    </>
+  )
+}
+export default React.memo(InstallByDSLList)
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -0,0 +1,116 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import type { Dependency, InstallStatusResponse, Plugin, VersionInfo } from '../../../types'
+import Button from '@/app/components/base/button'
+import { RiLoader2Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import InstallMulti from './install-multi'
+import { useInstallOrUpdate } from '@/service/use-plugins'
+import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  allPlugins: Dependency[]
+  onStartToInstall?: () => void
+  onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
+  onCancel: () => void
+  isFromMarketPlace?: boolean
+  isHideButton?: boolean
+}
+
+const Install: FC<Props> = ({
+  allPlugins,
+  onStartToInstall,
+  onInstalled,
+  onCancel,
+  isFromMarketPlace,
+  isHideButton,
+}) => {
+  const { t } = useTranslation()
+  const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
+  const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
+  const selectedPluginsNum = selectedPlugins.length
+  const { refreshPluginList } = useRefreshPluginList()
+  const handleSelect = (plugin: Plugin, selectedIndex: number) => {
+    const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
+    let nextSelectedPlugins
+    if (isSelected)
+      nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_id !== plugin.plugin_id)
+    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 [installedInfo, setInstalledInfo] = useState<Record<string, VersionInfo> | undefined>(undefined)
+
+  const handleLoadedAllPlugin = useCallback((installedInfo: Record<string, VersionInfo> | undefined) => {
+    setInstalledInfo(installedInfo)
+    setCanInstall(true)
+  }, [])
+
+  // Install from marketplace and github
+  const { mutate: installOrUpdate, isPending: isInstalling } = useInstallOrUpdate({
+    onSuccess: (res: InstallStatusResponse[]) => {
+      onInstalled(selectedPlugins, res.map((r, i) => {
+        return ({
+          ...r,
+          isFromMarketPlace: allPlugins[selectedIndexes[i]].type === 'marketplace',
+        })
+      }))
+      const hasInstallSuccess = res.some(r => r.success)
+      if (hasInstallSuccess)
+        refreshPluginList(undefined, true)
+    },
+  })
+  const handleInstall = () => {
+    onStartToInstall?.()
+    installOrUpdate({
+      payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
+      plugin: selectedPlugins,
+      installedInfo: installedInfo!,
+    })
+  }
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <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'>
+          <InstallMulti
+            allPlugins={allPlugins}
+            selectedPlugins={selectedPlugins}
+            onSelect={handleSelect}
+            onLoadedAllPlugin={handleLoadedAllPlugin}
+            isFromMarketPlace={isFromMarketPlace}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      {!isHideButton && (
+        <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+          {!canInstall && (
+            <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+              {t('common.operation.cancel')}
+            </Button>
+          )}
+          <Button
+            variant='primary'
+            className='min-w-[72px] flex space-x-0.5'
+            disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
+            onClick={handleInstall}
+          >
+            {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+            <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+          </Button>
+        </div>
+      )}
+
+    </>
+  )
+}
+export default React.memo(Install)
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@@ -0,0 +1,65 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { InstallStatusResponse, Plugin } from '../../../types'
+import Card from '@/app/components/plugins/card'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+
+type Props = {
+  list: Plugin[]
+  installStatus: InstallStatusResponse[]
+  onCancel: () => void
+  isHideButton?: boolean
+}
+
+const Installed: FC<Props> = ({
+  list,
+  installStatus,
+  onCancel,
+  isHideButton,
+}) => {
+  const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        {/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
+          {list.map((plugin, index) => {
+            return (
+              <Card
+                key={plugin.plugin_id}
+                className='w-full'
+                payload={{
+                  ...plugin,
+                  icon: installStatus[index].isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon` : getIconUrl(plugin.icon),
+                }}
+                installed={installStatus[index].success}
+                installFailed={!installStatus[index].success}
+                titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
+              />
+            )
+          })}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      {!isHideButton && (
+        <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+          <Button
+            variant='primary'
+            className='min-w-[72px]'
+            onClick={onCancel}
+          >
+            {t('common.operation.close')}
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default React.memo(Installed)