feat: can upload and parse bundle

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

@@ -47,7 +47,7 @@ const PluginList = () => {
             {
               type: 'marketplace',
               value: {
-                plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+                plugin_unique_identifier: 'langgenius/openai:0.0.2@7baee9635a07573ea192621ebfdacb39db466fa691e75255beaf48bf41d44375',
               },
             },
           ]} />

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

@@ -3,9 +3,8 @@ 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, InstallStatusResponse, Plugin } from '../../types'
-import Install from './steps/install'
-import Installed from './steps/installed'
+import type { Dependency } from '../../types'
+import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'plugin.installModal'
@@ -30,8 +29,7 @@ const InstallBundle: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
-  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
+
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
       return t(`${i18nPrefix}.uploadFailed`)
@@ -43,12 +41,6 @@ const InstallBundle: FC<Props> = ({
     return t(`${i18nPrefix}.installPlugin`)
   }, [step, t])
 
-  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
-    setInstallStatus(installStatus)
-    setInstalledPlugins(plugins)
-    setStep(InstallStep.installed)
-  }, [])
-
   return (
     <Modal
       isShow={true}
@@ -61,20 +53,12 @@ const InstallBundle: FC<Props> = ({
           {getTitle()}
         </div>
       </div>
-      {step === InstallStep.readyToInstall && (
-        <Install
-          fromDSLPayload={fromDSLPayload}
-          onCancel={onClose}
-          onInstalled={handleInstalled}
-        />
-      )}
-      {step === InstallStep.installed && (
-        <Installed
-          list={installedPlugins}
-          installStatus={installStatus}
-          onCancel={onClose}
-        />
-      )}
+      <ReadyToInstall
+        step={step}
+        onStepChange={setStep}
+        dependencies={fromDSLPayload}
+        onClose={onClose}
+      />
     </Modal>
   )
 }

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

@@ -0,0 +1,48 @@
+'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,
+  dependencies: Dependency[]
+  onClose: () => void
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  dependencies,
+  onClose,
+}) => {
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    onStepChange(InstallStep.installed)
+  }, [onStepChange])
+  return (
+    <>
+      {step === InstallStep.readyToInstall && (
+        <Install
+          fromDSLPayload={dependencies}
+          onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import type { Plugin } from '../../../types'
+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'
@@ -11,7 +11,7 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 
 type Props = {
   list: Plugin[]
-  installStatus: { success: boolean, isFromMarketPlace: boolean }[]
+  installStatus: InstallStatusResponse[]
   onCancel: () => void
 }
 

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

@@ -2,14 +2,13 @@
 
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import type { PluginDeclaration } from '../../types'
+import type { Dependency, PluginDeclaration } from '../../types'
 import { InstallStep } from '../../types'
 import Uploading from './steps/uploading'
-import Install from './steps/install'
-import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import ReadyToInstallPackage from './ready-to-install'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -29,7 +28,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
   const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
   const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const isBundle = file.name.endsWith('.bundle')
+  const [dependencies, setDependencies] = useState<Dependency[]>([])
 
   const getTitle = useCallback(() => {
     if (step === InstallStep.uploadFailed)
@@ -44,7 +44,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
 
   const { getIconUrl } = useGetIcon()
 
-  const handleUploaded = useCallback(async (result: {
+  const handlePackageUploaded = useCallback(async (result: {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => {
@@ -61,22 +61,16 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
     setStep(InstallStep.readyToInstall)
   }, [getIconUrl])
 
+  const handleBundleUploaded = useCallback((result: Dependency[]) => {
+    setDependencies(result)
+    setStep(InstallStep.readyToInstall)
+  }, [])
+
   const handleUploadFail = useCallback((errorMsg: string) => {
     setErrorMsg(errorMsg)
     setStep(InstallStep.uploadFailed)
   }, [])
 
-  const handleInstalled = useCallback(() => {
-    invalidateInstalledPluginList()
-    setStep(InstallStep.installed)
-  }, [invalidateInstalledPluginList])
-
-  const handleFailed = useCallback((errorMsg?: string) => {
-    setStep(InstallStep.installFailed)
-    if (errorMsg)
-      setErrorMsg(errorMsg)
-  }, [])
-
   return (
     <Modal
       isShow={true}
@@ -91,33 +85,32 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
       </div>
       {step === InstallStep.uploading && (
         <Uploading
+          isBundle={isBundle}
           file={file}
           onCancel={onClose}
-          onUploaded={handleUploaded}
+          onPackageUploaded={handlePackageUploaded}
+          onBundleUploaded={handleBundleUploaded}
           onFailed={handleUploadFail}
         />
       )}
-      {
-        step === InstallStep.readyToInstall && (
-          <Install
-            uniqueIdentifier={uniqueIdentifier!}
-            payload={manifest!}
-            onCancel={onClose}
-            onInstalled={handleInstalled}
-            onFailed={handleFailed}
-          />
-        )
-      }
-      {
-        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
-          <Installed
-            payload={manifest}
-            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
-            errMsg={errorMsg}
-            onCancel={onClose}
-          />
-        )
-      }
+      {isBundle ? (
+        <ReadyToInstallBundle
+          step={step}
+          onStepChange={setStep}
+          onClose={onClose}
+          dependencies={dependencies}
+        />
+      ) : (
+        <ReadyToInstallPackage
+          step={step}
+          onStepChange={setStep}
+          onClose={onClose}
+          uniqueIdentifier={uniqueIdentifier}
+          manifest={manifest}
+          errorMsg={errorMsg}
+          onError={setErrorMsg}
+        />
+      )}
     </Modal>
   )
 }

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

@@ -0,0 +1,68 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from '../base/installed'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onClose: () => void
+  uniqueIdentifier: string | null,
+  manifest: PluginDeclaration | null,
+  errorMsg: string | null,
+  onError: (errorMsg: string) => void,
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onClose,
+  uniqueIdentifier,
+  manifest,
+  errorMsg,
+  onError,
+}) => {
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  const handleInstalled = useCallback(() => {
+    invalidateInstalledPluginList()
+    onStepChange(InstallStep.installed)
+  }, [invalidateInstalledPluginList, onStepChange])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    onStepChange(InstallStep.installFailed)
+    if (errorMsg)
+      onError(errorMsg)
+  }, [onError, onStepChange])
+
+  return (
+    <>
+      {
+        step === InstallStep.readyToInstall && (
+          <Install
+            uniqueIdentifier={uniqueIdentifier!}
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
+            onFailed={handleFailed}
+          />
+        )
+      }
+      {
+        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+          <Installed
+            payload={manifest}
+            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
+            errMsg={errorMsg}
+            onCancel={onClose}
+          />
+        )
+      }
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

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

@@ -3,34 +3,37 @@ import type { FC } from 'react'
 import React from 'react'
 import { RiLoader2Line } from '@remixicon/react'
 import Card from '../../../card'
-import type { PluginDeclaration } from '../../../types'
+import type { Dependency, PluginDeclaration } from '../../../types'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
-import { uploadPackageFile } from '@/service/plugins'
+import { uploadFile } from '@/service/plugins'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
+  isBundle: boolean
   file: File
   onCancel: () => void
-  onUploaded: (result: {
+  onPackageUploaded: (result: {
     uniqueIdentifier: string
     manifest: PluginDeclaration
   }) => void
+  onBundleUploaded: (result: Dependency[]) => void
   onFailed: (errorMsg: string) => void
 }
 
 const Uploading: FC<Props> = ({
+  isBundle,
   file,
   onCancel,
-  onUploaded,
+  onPackageUploaded,
+  onBundleUploaded,
   onFailed,
 }) => {
   const { t } = useTranslation()
   const fileName = file.name
   const handleUpload = async () => {
     try {
-      const res = await uploadPackageFile(file)
-      onUploaded(res)
+      await uploadFile(file, isBundle)
     }
     catch (e: any) {
       if (e.response?.message) {
@@ -38,7 +41,11 @@ const Uploading: FC<Props> = ({
       }
       else { // Why it would into this branch?
         const res = e.response
-        onUploaded({
+        if (isBundle) {
+          onBundleUploaded(res)
+          return
+        }
+        onPackageUploaded({
           uniqueIdentifier: res.unique_identifier,
           manifest: res.manifest,
         })

web/app/components/plugins/plugin-page/empty/index.tsx

@@ -10,6 +10,7 @@ import { useSelector as useAppContextSelector } from '@/context/app-context'
 import Line from '../../marketplace/empty/line'
 import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useTranslation } from 'react-i18next'
+import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 
 const Empty = () => {
   const { t } = useTranslation()
@@ -42,11 +43,11 @@ const Empty = () => {
       {/* skeleton */}
       <div className='h-full w-full px-12 absolute top-0 grid grid-cols-2 gap-2 overflow-hidden z-10'>
         {Array.from({ length: 20 }).fill(0).map((_, i) => (
-          <div key={i} className='h-[100px] bg-components-card-bg rounded-xl'/>
+          <div key={i} className='h-[100px] bg-components-card-bg rounded-xl' />
         ))}
       </div>
       {/* mask */}
-      <div className='h-full w-full absolute z-20 bg-gradient-to-b from-background-gradient-mask-transparent to-white'/>
+      <div className='h-full w-full absolute z-20 bg-gradient-to-b from-background-gradient-mask-transparent to-white' />
       <div className='flex items-center justify-center h-full relative z-30'>
         <div className='flex flex-col items-center gap-y-3'>
           <div className='relative -z-10 flex items-center justify-center w-[52px] h-[52px] rounded-xl
@@ -66,7 +67,7 @@ const Empty = () => {
               ref={fileInputRef}
               style={{ display: 'none' }}
               onChange={handleFileChange}
-              accept='.difypkg'
+              accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
             />
             <div className='w-full flex flex-col gap-y-1'>
               {[

web/app/components/plugins/plugin-page/index.tsx

@@ -32,6 +32,7 @@ import type { PluginDeclaration, PluginManifestInMarket } from '../types'
 import { sleep } from '@/utils'
 import { fetchManifestFromMarketPlace } from '@/service/plugins'
 import { marketplaceApiPrefix } from '@/config'
+import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 
 const PACKAGE_IDS_KEY = 'package-ids'
 
@@ -186,7 +187,7 @@ const PluginPage = ({
             className="hidden"
             type="file"
             id="fileUploader"
-            accept='.difypkg'
+            accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
             onChange={fileChangeHandle ?? (() => { })}
           />
         </>

web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx

@@ -17,6 +17,7 @@ import {
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useTranslation } from 'react-i18next'
+import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 
 type Props = {
   onSwitchToMarketplaceTab: () => void
@@ -81,7 +82,7 @@ const InstallPluginDropdown = ({
               ref={fileInputRef}
               style={{ display: 'none' }}
               onChange={handleFileChange}
-              accept='.difypkg'
+              accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS}
             />
             <div className='w-full'>
               {[
@@ -126,7 +127,7 @@ const InstallPluginDropdown = ({
         && (<InstallFromLocalPackage
           file={selectedFile}
           onClose={() => setSelectedAction(null)}
-          onSuccess={() => {}}
+          onSuccess={() => { }}
         />
         )
       }

web/config/index.ts

@@ -273,3 +273,5 @@ export const TEXT_GENERATION_TIMEOUT_MS = textGenerationTimeoutMs
 export const DISABLE_UPLOAD_IMAGE_AS_ICON = process.env.NEXT_PUBLIC_DISABLE_UPLOAD_IMAGE_AS_ICON === 'true'
 
 export const GITHUB_ACCESS_TOKEN = process.env.NEXT_PUBLIC_GITHUB_ACCESS_TOKEN || globalThis.document?.body?.getAttribute('data-public-github-access-token') || ''
+
+export const SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS = '.difypkg,.bundle'

web/service/plugins.ts

@@ -16,13 +16,13 @@ import type {
   MarketplaceCollectionsResponse,
 } from '@/app/components/plugins/marketplace/types'
 
-export const uploadPackageFile = async (file: File) => {
+export const uploadFile = async (file: File, isBundle: boolean) => {
   const formData = new FormData()
-  formData.append('pkg', file)
+  formData.append(isBundle ? 'bundle' : 'pkg', file)
   return upload({
     xhr: new XMLHttpRequest(),
     data: formData,
-  }, false, '/workspaces/current/plugin/upload/pkg')
+  }, false, `/workspaces/current/plugin/upload/${isBundle ? 'bundle' : 'pkg'}`)
 }
 
 export const updateFromMarketPlace = async (body: Record<string, string>) => {