feat: install progress

web/app/components/plugins/card/index.tsx

@@ -11,7 +11,7 @@ import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 
-type Props = {
+export type Props = {
   className?: string
   payload: Plugin
   titleLeft?: React.ReactNode

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

@@ -1,56 +1,46 @@
 'use client'
 
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useContext } from 'use-context-selector'
-import { RiLoader2Line } from '@remixicon/react'
-import Card from '../../card'
-import { toolNotion } from '../../card/card-mock'
 import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
 import I18n from '@/context/i18n'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Uploading from './steps/uploading'
+import Install from './steps/install'
+import Installed from './steps/installed'
 
 type InstallFromLocalPackageProps = {
   file: File
+  onSuccess: () => void
   onClose: () => void
 }
 
-const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClose }) => {
+const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
-  const [status, setStatus] = useState<'uploading' | 'ready' | 'installing' | 'installed'>('uploading')
+  file,
+  onClose
+}) => {
+  const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
   const { locale } = useContext(I18n)
 
-  useEffect(() => {
+  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
-    const timer = setTimeout(() => setStatus('ready'), 1500)
+  const [manifest, setManifest] = useState<PluginDeclaration | null>({
-    return () => clearTimeout(timer)
+    name: 'Notion Sync',
-  }, [])
+    description: 'Sync your Notion notes with Dify',
+  } as any)
 
-  const handleInstall = useCallback(async () => {
+  const handleUploaded = useCallback((result: {
-    setStatus('installing')
+    uniqueIdentifier: string
-    await new Promise(resolve => setTimeout(resolve, 1000))
+    manifest: PluginDeclaration
-    setStatus('installed')
+  }) => {
+    setUniqueIdentifier(result.uniqueIdentifier)
+    setManifest(result.manifest)
+    setStep(InstallStep.readyToInstall)
   }, [])
 
-  const renderStatusMessage = () => {
+  const handleInstalled = useCallback(async () => {
-    switch (status) {
+    setStep(InstallStep.installed)
-      case 'uploading':
+  }, [])
-        return (
-          <div className='flex items-center gap-1 self-stretch'>
-            <RiLoader2Line className='text-text-accent w-4 h-4' />
-            <div className='text-text-secondary system-md-regular'>
-              Uploading notion-sync.difypkg ...
-            </div>
-          </div>
-        )
-      case 'installed':
-        return <p className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</p>
-      default:
-        return (
-          <div className='text-text-secondary system-md-regular'>
-            <p>About to install the following plugin.</p>
-            <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
-          </div>
-        )
-    }
-  }
 
   return (
     <Modal
@@ -64,39 +54,30 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
           Install plugin
         </div>
       </div>
-      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+      {step === InstallStep.uploading && (
-        {renderStatusMessage()}
+        <Uploading
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          file={file}
-          <Card
+          onCancel={onClose}
-            className='w-full'
+          onUploaded={handleUploaded}
-            payload={status === 'uploading' ? { name: 'notion-sync' } as any : toolNotion as any}
+        />
-            isLoading={status === 'uploading'}
+      )}
-            loadingFileName='notion-sync.difypkg'
+      {
-            installed={status === 'installed'}
+        step === InstallStep.readyToInstall && (
+          <Install
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
           />
-        </div>
+        )
-      </div>
+      }
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+      {
-        {status === 'installed'
+        step === InstallStep.installed && (
-          ? (
+          <Installed
-            <Button variant='primary' onClick={onClose}>Close</Button>
+            payload={manifest!}
-          )
+            onCancel={onClose}
-          : (
+          />
-            <>
+        )
-              <Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
+      }
-                Cancel
-              </Button>
-              <Button
-                variant='primary'
-                className='min-w-[72px]'
-                disabled={status !== 'ready'}
-                onClick={handleInstall}
-              >
-                {status === 'installing' ? 'Installing...' : 'Install'}
-              </Button>
-            </>
-          )}
-      </div>
     </Modal>
   )
 }

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

@@ -0,0 +1,63 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import Button from '@/app/components/base/button'
+import { sleep } from '@/utils'
+
+type Props = {
+  payload: PluginDeclaration
+  onCancel: () => void
+  onInstalled: () => void
+}
+
+const Installed: FC<Props> = ({
+  payload,
+  onCancel,
+  onInstalled,
+}) => {
+  const [isInstalling, setIsInstalling] = React.useState(false)
+
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    await sleep(1500)
+    onInstalled()
+  }
+
+  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>About to install the following plugin.</p>
+          <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
+        </div>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={pluginManifestToCardPluginProps(payload)}
+          />
+        </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}>
+            Cancel
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          disabled={isInstalling}
+          onClick={handleInstall}
+        >
+          {isInstalling ? 'Installing...' : 'Install'}
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

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

@@ -0,0 +1,44 @@
+'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 { pluginManifestToCardPluginProps } from '../../utils'
+
+type Props = {
+  payload: PluginDeclaration
+  onCancel: () => void
+
+}
+
+const Installed: FC<Props> = ({
+  payload,
+  onCancel
+}) => {
+  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'>The plugin has been installed successfully.</p>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={pluginManifestToCardPluginProps(payload)}
+            installed
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          close
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

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

@@ -0,0 +1,76 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiLoader2Line } from '@remixicon/react'
+import Card from '../../../card'
+import type { PluginDeclaration } from '../../../types'
+import Button from '@/app/components/base/button'
+import { sleep } from '@/utils'
+
+type Props = {
+  file: File
+  onCancel: () => void
+  onUploaded: (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => void
+}
+
+const Uploading: FC<Props> = ({
+  file,
+  onCancel,
+  onUploaded,
+}) => {
+  const fileName = file.name
+  const handleUpload = async () => {
+    await sleep(1500)
+    onUploaded({
+      uniqueIdentifier: 'yeuoly/neko:0.0.1@5395654da2c0b919b3d9b946a1a0545b737004380765e5f3b8c49976d3276c87',
+      manifest: {
+        name: 'Notion Sync',
+        description: 'Sync your Notion notes with Dify',
+      } as any,
+    })
+  }
+
+  React.useEffect(() => {
+    handleUpload()
+  }, [])
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='flex items-center gap-1 self-stretch'>
+          <RiLoader2Line className='text-text-accent w-4 h-4' />
+          <div className='text-text-secondary system-md-regular'>
+            Uploading {fileName}...
+          </div>
+        </div>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={{ name: fileName } as any}
+            isLoading
+            loadingFileName={fileName}
+            installed={false}
+          />
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          disabled
+        >
+          installing
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Uploading)

web/app/components/plugins/install-plugin/utils.ts

@@ -0,0 +1,21 @@
+import type { Plugin, PluginDeclaration } from "../types"
+
+export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
+  return {
+    type: pluginManifest.category,
+    category: pluginManifest.category,
+    name: pluginManifest.name,
+    version: pluginManifest.version,
+    latest_version: '',
+    org: pluginManifest.author,
+    label: pluginManifest.label,
+    brief: pluginManifest.description,
+    icon: pluginManifest.icon,
+    introduction: '',
+    repository: '',
+    install_count: 0,
+    endpoint: {
+      settings: []
+    }
+  }
+}

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

@@ -149,7 +149,11 @@ const PluginPage = ({
             <span className="system-xs-regular">Drop plugin package here to install</span>
           </div>
           {currentFile && (
-            <InstallFromLocalPackage file={currentFile} onClose={removeFile ?? (() => { })} />
+            <InstallFromLocalPackage
+              file={currentFile}
+              onClose={removeFile ?? (() => { })}
+              onSuccess={() => { }}
+            />
           )}
           <input
             ref={fileUploader}

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

@@ -94,11 +94,13 @@ const InstallPluginDropdown = () => {
         </PortalToFollowElemContent>
       </div>
       {selectedAction === 'marketplace' && <InstallFromMarketplace onClose={() => setSelectedAction(null)} />}
-      {selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)}/>}
+      {selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)} />}
       {selectedAction === 'local' && selectedFile
         && (<InstallFromLocalPackage
           file={selectedFile}
-          onClose={() => setSelectedAction(null)}/>
+          onClose={() => setSelectedAction(null)}
+          onSuccess={() => { }}
+        />
         )
       }
     </PortalToFollowElem>

web/app/components/plugins/types.ts

@@ -52,6 +52,7 @@ export type EndpointListItem = {
   hook_id: string
 }
 
+// Plugin manifest
 export type PluginDeclaration = {
   version: string
   author: string
@@ -150,6 +151,13 @@ export type UpdateEndpointRequest = {
   name: string
 }
 
+export enum InstallStep {
+  uploading = 'uploading',
+  readyToInstall = 'readyToInstall',
+  installing = 'installing',
+  installed = 'installed',
+}
+
 export type GitHubAsset = {
   id: number
   name: string