fix: install bunlde support update

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

@@ -1,10 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin } from '../../../types'
+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'
@@ -13,7 +14,7 @@ type Props = {
   allPlugins: Dependency[]
   selectedPlugins: Plugin[]
   onSelect: (plugin: Plugin, selectedIndex: number) => void
-  onLoadedAllPlugin: () => void
+  onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
   isFromMarketPlace?: boolean
 }
 
@@ -28,6 +29,7 @@ const InstallByDSLList: FC<Props> = ({
   const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.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)
@@ -45,6 +47,7 @@ const InstallByDSLList: FC<Props> = ({
     })
     return _plugins
   })())
+
   const pluginsRef = React.useRef<(Plugin | undefined)[]>(plugins)
 
   const setPlugins = useCallback((p: (Plugin | undefined)[]) => {
@@ -132,11 +135,30 @@ const InstallByDSLList: FC<Props> = ({
   }, [infoByMetaError, infoByIdError])
 
   const isLoadedAllData = (plugins.filter(p => !!p).length + errorIndexes.length) === allPlugins.length
+
+  const { installedInfo, isLoading: isLoadingCheckInstalled } = useCheckInstalled({
+    pluginIds: plugins?.filter(p => !!p).map((d) => {
+      return `${d?.org}/${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)
-      onLoadedAllPlugin()
+    if (isLoadedAllData && installedInfo)
+      onLoadedAllPlugin(installedInfo!)
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoadedAllData])
+  }, [isLoadedAllData, installedInfo])
 
   const handleSelect = useCallback((index: number) => {
     return () => {
@@ -151,6 +173,7 @@ const InstallByDSLList: FC<Props> = ({
             <LoadingError key={index} />
           )
         }
+        const plugin = plugins[index]
         if (d.type === 'github') {
           return (<GithubItem
             key={index}
@@ -159,6 +182,7 @@ const InstallByDSLList: FC<Props> = ({
             dependency={d as GitHubItemAndMarketPlaceDependency}
             onFetchedPayload={handleGitHubPluginFetched(index)}
             onFetchError={handleGitHubPluginFetchError(index)}
+            versionInfo={getVersionInfo(`${plugin?.org}/${plugin?.name}`)}
           />)
         }
 
@@ -169,6 +193,8 @@ const InstallByDSLList: FC<Props> = ({
               checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
               onCheckedChange={handleSelect(index)}
               payload={plugins[index] as Plugin}
+              version={(d as GitHubItemAndMarketPlaceDependency).value.version!}
+              versionInfo={getVersionInfo(`${plugin?.org}/${plugin?.name}`)}
             />
           )
         }
@@ -181,6 +207,7 @@ const InstallByDSLList: FC<Props> = ({
             onCheckedChange={handleSelect(index)}
             payload={d as PackageDependency}
             isFromMarketPlace={isFromMarketPlace}
+            versionInfo={getVersionInfo(`${plugin?.org}/${plugin?.name}`)}
           />
         )
       })

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

@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import type { Dependency, InstallStatusResponse, Plugin } from '../../../types'
+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 { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
+import { useInstallOrUpdate } from '@/service/use-plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'
 
@@ -43,12 +43,15 @@ const Install: FC<Props> = ({
   }
 
   const [canInstall, setCanInstall] = React.useState(false)
-  const handleLoadedAllPlugin = useCallback(() => {
+  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: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
+  const { mutate: installOrUpdate, isPending: isInstalling } = useInstallOrUpdate({
     onSuccess: (res: InstallStatusResponse[]) => {
       onInstalled(selectedPlugins, res.map((r, i) => {
         return ({
@@ -62,9 +65,10 @@ const Install: FC<Props> = ({
     },
   })
   const handleInstall = () => {
-    installFromMarketplaceAndGitHub({
+    installOrUpdate({
       payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
       plugin: selectedPlugins,
+      installedInfo: installedInfo!,
     })
   }
   return (