feat: install bundle ui

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

@@ -1,19 +1,21 @@
-import { handleDelete } from './actions'
+'use client'
 import Card from '@/app/components/plugins/card'
-import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
+import { customTool, extensionDallE, modelGPT4, toolNeko, toolNotion } from '@/app/components/plugins/card/card-mock'
-import PluginItem from '@/app/components/plugins/plugin-item'
+// import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
-import ProviderCard from '@/app/components/plugins/provider-card'
+// import ProviderCard from '@/app/components/plugins/provider-card'
 import Badge from '@/app/components/base/badge'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
 
-const PluginList = async () => {
+const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
 
   return (
     <div className='pb-3 bg-white'>
+      <InstallBundle onClose={() => { }} plugins={[toolNeko, { ...toolNeko, plugin_unique_identifier: `${toolNeko.plugin_unique_identifier}xxx` }]} />
       <div className='mx-3 '>
-        <h2 className='my-3'>Dify Plugin list</h2>
+        {/* <h2 className='my-3'>Dify Plugin list</h2> */}
-        <div className='grid grid-cols-2 gap-3'>
+        {/* <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
             <PluginItem
               key={index}
@@ -21,7 +23,7 @@ const PluginList = async () => {
               onDelete={handleDelete}
             />
           ))}
-        </div>
+        </div> */}
 
         <h2 className='my-3'>Install Plugin / Package under bundle</h2>
         <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
@@ -33,21 +35,21 @@ const PluginList = async () => {
             }
           />
         </div>
-        <h3 className='my-1'>Installed</h3>
+        {/* <h3 className='my-1'>Installed</h3>
         <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
           <Card
             payload={toolNotion as any}
             descriptionLineRows={1}
             installed
           />
-        </div>
+        </div> */}
 
-        <h3 className='my-1'>Install model provide</h3>
+        {/* <h3 className='my-1'>Install model provide</h3>
         <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
             <ProviderCard key={index} payload={plugin as any} />
           ))}
-        </div>
+        </div> */}
 
         <div className='my-3 h-[px] bg-gray-50'></div>
         <h2 className='my-3'>Marketplace Plugin list</h2>
@@ -67,8 +69,8 @@ const PluginList = async () => {
   )
 }
 
-export const metadata = {
+// export const metadata = {
-  title: 'Plugins - Card',
+//   title: 'Plugins - Card',
-}
+// }
 
 export default PluginList

web/app/components/plugins/card/card-mock.ts

@@ -2,6 +2,7 @@ import type { PluginDeclaration } from '../types'
 import { PluginType } from '../types'
 
 export const toolNeko: PluginDeclaration = {
+  plugin_unique_identifier: 'xxxxxx',
   version: '0.0.1',
   author: 'langgenius',
   name: 'neko',

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

@@ -1,9 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
 import type { PluginDeclaration } from '../../types'
-import SelectPackage from './steps/select-package'
+import Install from './steps/install'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 export enum InstallType {
   fromLocal = 'fromLocal',
@@ -14,24 +18,47 @@ export enum InstallType {
 type Props = {
   installType?: InstallType
   plugins?: PluginDeclaration[]
+  onClose: () => void
 }
 
 const InstallBundle: FC<Props> = ({
   installType = InstallType.fromMarketplace,
   plugins = [],
+  onClose,
 }) => {
+  const { t } = useTranslation()
   const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-  const [selectedPlugins, setSelectedPlugins] = useState<PluginDeclaration[]>([])
 
-  const handleSelectedPluginsChange = (plugins: PluginDeclaration[]) => {
+  const getTitle = useCallback(() => {
-    setSelectedPlugins(plugins)
+    if (step === InstallStep.uploadFailed)
-  }
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (step === InstallStep.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [step, t])
+
   return (
-    <div>
+    <Modal
+      isShow={true}
+      onClose={onClose}
+      className='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>
       {step === InstallStep.readyToInstall && (
-        <SelectPackage plugins={plugins || []} onChange={handleSelectedPluginsChange} />
+        <Install
+          plugins={plugins || []}
+          onCancel={onClose}
+        />
       )}
-    </div>
+    </Modal>
   )
 }
 

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

@@ -0,0 +1,85 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+import Card from '../../../card'
+import Button from '@/app/components/base/button'
+import { RiLoader2Line } from '@remixicon/react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
+import Checkbox from '@/app/components/base/checkbox'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  plugins: PluginDeclaration[],
+  onCancel: () => void
+}
+
+const Install: FC<Props> = ({
+  plugins,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const [selectedPlugins, setSelectedPlugins] = React.useState<PluginDeclaration[]>([])
+  const selectedPluginsNum = selectedPlugins.length
+  const handleSelect = (plugin: PluginDeclaration) => {
+    return () => {
+      const isSelected = !!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)
+      let nextSelectedPlugins
+      if (isSelected)
+        nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_unique_identifier !== plugin.plugin_unique_identifier)
+      else
+        nextSelectedPlugins = [...selectedPlugins, plugin]
+      setSelectedPlugins(nextSelectedPlugins)
+    }
+  }
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const handleInstall = () => {
+
+  }
+  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'>
+          {plugins.map(plugin => (
+            <div className='flex items-center space-x-2' key={plugin.plugin_unique_identifier}>
+              <Checkbox
+                className='shrink-0'
+                checked={!!selectedPlugins.find(p => p.plugin_unique_identifier === plugin.plugin_unique_identifier)}
+                onCheck={handleSelect(plugin)}
+              />
+              <Card
+                className='grow'
+                payload={pluginManifestToCardPluginProps(plugin)}
+                titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge>}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <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={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)

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

@@ -1,20 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import type { PluginDeclaration } from '../../../types'
-
-type Props = {
-  plugins: PluginDeclaration[],
-  onChange: (plugins: PluginDeclaration[]) => void
-}
-
-const SelectPackage: FC<Props> = ({
-  plugins,
-  onChange,
-}) => {
-  return (
-    <div>
-    </div>
-  )
-}
-export default React.memo(SelectPackage)

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

@@ -61,7 +61,9 @@ const PluginItem: FC<Props> = ({
           ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
           : 'bg-background-section-burn',
       )}
-      onClick={() => setCurrentPluginDetail(plugin)}
+      onClick={() => {
+        setCurrentPluginDetail(plugin)
+      }}
     >
       <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
         <CornerMark text={category} />

web/i18n/en-US/plugin.ts

@@ -80,7 +80,9 @@ const translation = {
     install: 'Install',
     installing: 'Installing...',
     uploadingPackage: 'Uploading {{packageName}}...',
-    readyToInstall: 'About to install the following plugin.',
+    readyToInstall: 'About to install the following plugin',
+    readyToInstallPackage: 'About to install the following plugin',
+    readyToInstallPackages: 'About to install the following {{num}} plugins',
     fromTrustSource: 'Please make sure that you only install plugins from a <trustSource>trusted source</trustSource>.',
     labels: {
       repository: 'Repository',

web/i18n/zh-Hans/plugin.ts

@@ -80,7 +80,9 @@ const translation = {
     install: '安装',
     installing: '安装中...',
     uploadingPackage: '上传 {{packageName}} 中...',
-    readyToInstall: '即将安装以下插件。',
+    readyToInstall: '即将安装以下插件',
+    readyToInstallPackage: '即将安装以下插件',
+    readyToInstallPackages: '即将安装以下 {{num}} 个插件',
     fromTrustSource: '请保证仅从<trustSource>可信源</trustSource>安装插件。',
     labels: {
       repository: '仓库',