Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

web/app/components/plugins/hooks.ts

@@ -1,15 +0,0 @@
-import { useRequest } from 'ahooks'
-
-export const useCheckInstallStatus = () => {
-  const { data, run, cancel } = useRequest(async () => {}, {
-    manual: true,
-    pollingInterval: 5000,
-    pollingErrorRetryCount: 2,
-  })
-
-  return {
-    data,
-    run,
-    cancel,
-  }
-}

web/app/components/plugins/plugin-page/hooks.ts

@@ -0,0 +1,37 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { useRequest } from 'ahooks'
+import type { PluginTask } from '../types'
+import { fetchPluginTasks } from '@/service/plugins'
+
+export const usePluginTasks = () => {
+  const [pluginTasks, setPluginTasks] = useState<PluginTask[]>([])
+
+  const handleUpdatePluginTasks = async (callback: (tasks: PluginTask[]) => void) => {
+    const { tasks } = await fetchPluginTasks()
+    setPluginTasks(tasks)
+    callback(tasks)
+  }
+
+  const { run, cancel } = useRequest(handleUpdatePluginTasks, {
+    manual: true,
+    pollingInterval: 3000,
+    pollingErrorRetryCount: 2,
+  })
+
+  const checkHasPluginTasks = useCallback((tasks: PluginTask[]) => {
+    if (!tasks.length)
+      cancel()
+  }, [cancel])
+
+  useEffect(() => {
+    run(checkHasPluginTasks)
+  }, [run, checkHasPluginTasks])
+
+  return {
+    pluginTasks,
+  }
+}

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

@@ -17,6 +17,7 @@ import InstallPluginDropdown from './install-plugin-dropdown'
 import { useUploader } from './use-uploader'
 import usePermission from './use-permission'
 import DebugInfo from './debug-info'
+import { usePluginTasks } from './hooks'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
@@ -124,6 +125,8 @@ const PluginPage = ({
 
   const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps
 
+  const { pluginTasks } = usePluginTasks()
+
   return (
     <div
       ref={containerRef}

web/app/components/plugins/types.ts

@@ -224,16 +224,22 @@ export type PluginStatus = {
   message: string
 }
 
+export type PluginTask = {
+  id: string
+  created_at: string
+  updated_at: string
+  status: string
+  total_plugins: number
+  completed_plugins: number
+  plugins: PluginStatus[]
+}
+
 export type TaskStatusResponse = {
-  task: {
-    id: string
-    created_at: string
-    updated_at: string
-    status: string
-    total_plugins: number
-    completed_plugins: number
-    plugins: PluginStatus[]
-  }
+  task: PluginTask
+}
+
+export type PluginTasksResponse = {
+  tasks: PluginTask[]
 }
 
 export type MetaData = {

web/service/plugins.ts

@@ -10,6 +10,7 @@ import type {
   Permissions,
   PluginDeclaration,
   PluginManifestInMarket,
+  PluginTasksResponse,
   TaskStatusResponse,
   UninstallPluginResponse,
   UpdateEndpointRequest,
@@ -101,6 +102,10 @@ export const fetchMarketplaceCollectionPlugins: Fetcher<MarketplaceCollectionPlu
   return get<MarketplaceCollectionPluginsResponse>(url)
 }
 
+export const fetchPluginTasks = async () => {
+  return get<PluginTasksResponse>('/workspaces/current/plugin/tasks?page=1&page_size=255')
+}
+
 export const checkTaskStatus = async (taskId: string) => {
   return get<TaskStatusResponse>(`/workspaces/current/plugin/tasks/${taskId}`)
 }