outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support local installed package

Browse Source
This commit is contained in:
Joel 2024-11-19 16:04:17 +08:00
parent 43d7a538dc
commit 2e3442f74c
8 changed files with 113 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,7 +56,7 @@ const InstallBundle: FC<Props> = ({
<ReadyToInstall
step={step}
onStepChange={setStep}
dependencies={fromDSLPayload}
allPlugins={fromDSLPayload}
onClose={onClose}
/>
</Modal>

14
web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
View File

@ -1,7 +1,7 @@
'use client'
import type { FC } from 'react'
import React, { useEffect } from 'react'
import type { Dependency, Plugin } from '../../../types'
import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
import { pluginManifestToCardPluginProps } from '../../utils'
import { useUploadGitHub } from '@/service/use-plugins'
import Loading from './loading'
@ -10,8 +10,9 @@ import LoadedItem from './loaded-item'
type Props = {
checked: boolean
onCheckedChange: (plugin: Plugin) => void
dependency: Dependency
dependency: GitHubItemAndMarketPlaceDependency
onFetchedPayload: (payload: Plugin) => void
onFetchError: () => void
}
const Item: FC<Props> = ({
@ -19,9 +20,10 @@ const Item: FC<Props> = ({
onCheckedChange,
dependency,
onFetchedPayload,
onFetchError,
}) => {
const info = dependency.value
const { data } = useUploadGitHub({
const { data, error } = useUploadGitHub({
repo: info.repo!,
version: info.version!,
package: info.package!,
@ -38,6 +40,12 @@ const Item: FC<Props> = ({
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data])
useEffect(() => {
if (error)
onFetchError()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [error])
if (!payload) return <Loading />
return (
<LoadedItem

30
web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx Normal file
View File

@ -0,0 +1,30 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import type { Plugin } from '../../../types'
import type { PackageDependency } from '../../../types'
import { pluginManifestToCardPluginProps } from '../../utils'
import LoadedItem from './loaded-item'
type Props = {
checked: boolean
onCheckedChange: (plugin: Plugin) => void
payload: PackageDependency
}
const PackageItem: FC<Props> = ({
payload,
checked,
onCheckedChange,
}) => {
const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
return (
<LoadedItem
payload={plugin}
checked={checked}
onCheckedChange={onCheckedChange}
/>
)
}
export default React.memo(PackageItem)

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

@ -9,14 +9,14 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
type Props = {
step: InstallStep
onStepChange: (step: InstallStep) => void,
dependencies: Dependency[]
allPlugins: Dependency[]
onClose: () => void
}
const ReadyToInstall: FC<Props> = ({
step,
onStepChange,
dependencies,
allPlugins,
onClose,
}) => {
const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
@ -30,7 +30,7 @@ const ReadyToInstall: FC<Props> = ({
<>
{step === InstallStep.readyToInstall && (
<Install
fromDSLPayload={dependencies}
allPlugins={allPlugins}
onCancel={onClose}
onInstalled={handleInstalled}
/>

68
web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx → web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
View File

@ -1,30 +1,34 @@
'use client'
import type { FC } from 'react'
import React, { useCallback, useEffect, useMemo } from 'react'
import type { Dependency, Plugin } from '../../../types'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin } from '../../../types'
import MarketplaceItem from '../item/marketplace-item'
import GithubItem from '../item/github-item'
import { useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
import produce from 'immer'
import { useGetState } from 'ahooks'
import PackageItem from '../item/package-item'
type Props = {
fromDSLPayload: Dependency[]
allPlugins: Dependency[]
selectedPlugins: Plugin[]
onSelect: (plugin: Plugin, selectedIndex: number) => void
onLoadedAllPlugin: () => void
}
const InstallByDSLList: FC<Props> = ({
fromDSLPayload,
allPlugins,
selectedPlugins,
onSelect,
onLoadedAllPlugin,
}) => {
const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(fromDSLPayload.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!))
const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
const handlePlugInFetched = useCallback((index: number) => {
const [errorIndexes, setErrorIndexes] = useState<number[]>([])
const handleGitHubPluginFetched = useCallback((index: number) => {
return (p: Plugin) => {
const nextPlugins = produce(getPlugins(), (draft) => {
draft[index] = p
@ -33,14 +37,20 @@ const InstallByDSLList: FC<Props> = ({
}
}, [getPlugins, setPlugins])
const handleGitHubPluginFetchError = useCallback((index: number) => {
return () => {
setErrorIndexes([...errorIndexes, index])
}
}, [errorIndexes])
const marketPlaceInDSLIndex = useMemo(() => {
const res: number[] = []
fromDSLPayload.forEach((d, index) => {
allPlugins.forEach((d, index) => {
if (d.type === 'marketplace')
res.push(index)
})
return res
}, [fromDSLPayload])
}, [allPlugins])
useEffect(() => {
if (!isFetchingMarketplaceData && marketplaceRes?.data.plugins && marketplaceRes?.data.plugins.length > 0) {
@ -57,7 +67,7 @@ const InstallByDSLList: FC<Props> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFetchingMarketplaceData])
const isLoadedAllData = fromDSLPayload.length === plugins.length && plugins.every(p => !!p)
const isLoadedAllData = allPlugins.length === plugins.length && plugins.every(p => !!p)
useEffect(() => {
if (isLoadedAllData)
onLoadedAllPlugin()
@ -71,22 +81,44 @@ const InstallByDSLList: FC<Props> = ({
}, [onSelect, plugins])
return (
<>
{fromDSLPayload.map((d, index) => (
d.type === 'github'
? <GithubItem
{allPlugins.map((d, index) => {
if (errorIndexes.includes(index)) {
return (
<div key={index}>error</div>
)
}
if (d.type === 'github') {
return (<GithubItem
key={index}
checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
onCheckedChange={handleSelect(index)}
dependency={d}
onFetchedPayload={handlePlugInFetched(index)}
/>
: <MarketplaceItem
dependency={d as GitHubItemAndMarketPlaceDependency}
onFetchedPayload={handleGitHubPluginFetched(index)}
onFetchError={handleGitHubPluginFetchError(index)}
/>)
}
if (d.type === 'marketplace') {
return (
<MarketplaceItem
key={index}
checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
onCheckedChange={handleSelect(index)}
payload={plugins[index] as Plugin}
/>
)
}
return (
<PackageItem
key={index}
checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
onCheckedChange={handleSelect(index)}
payload={plugins[index] as Plugin}
payload={d as PackageDependency}
/>
))}
)
})
}
</>
)
}

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

@ -5,19 +5,19 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../../types'
import Button from '@/app/components/base/button'
import { RiLoader2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import InstallByDSLList from './install-by-dsl-list'
import InstallByDSLList from './install-multi'
import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
const i18nPrefix = 'plugin.installModal'
type Props = {
fromDSLPayload: Dependency[]
allPlugins: Dependency[]
onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
onCancel: () => void
}
const Install: FC<Props> = ({
fromDSLPayload,
allPlugins,
onInstalled,
onCancel,
}) => {
@ -49,7 +49,7 @@ const Install: FC<Props> = ({
onInstalled(selectedPlugins, res.map((r, i) => {
return ({
...r,
isFromMarketPlace: fromDSLPayload[selectedIndexes[i]].type === 'marketplace',
isFromMarketPlace: allPlugins[selectedIndexes[i]].type === 'marketplace',
})
}))
const hasInstallSuccess = res.some(r => r.success)
@ -58,7 +58,7 @@ const Install: FC<Props> = ({
},
})
const handleInstall = () => {
installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
installFromMarketplaceAndGitHub(allPlugins.filter((_d, index) => selectedIndexes.includes(index)))
}
return (
<>
@ -68,7 +68,7 @@ const Install: FC<Props> = ({
</div>
<div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
<InstallByDSLList
fromDSLPayload={fromDSLPayload}
allPlugins={allPlugins}
selectedPlugins={selectedPlugins}
onSelect={handleSelect}
onLoadedAllPlugin={handleLoadedAllPlugin}

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

@ -98,7 +98,7 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
step={step}
onStepChange={setStep}
onClose={onClose}
dependencies={dependencies}
allPlugins={dependencies}
/>
) : (
<ReadyToInstallPackage

12
web/app/components/plugins/types.ts
View File

@ -311,7 +311,7 @@ export type PluginsFromMarketplaceResponse = {
plugins: Plugin[]
}
export type Dependency = {
export type GitHubItemAndMarketPlaceDependency = {
type: 'github' | 'marketplace' | 'package'
value: {
repo?: string
@ -323,6 +323,16 @@ export type Dependency = {
}
}
export type PackageDependency = {
type: 'github' | 'marketplace' | 'package'
value: {
unique_identifier: string
manifest: PluginDeclaration
}
}
export type Dependency = GitHubItemAndMarketPlaceDependency | PackageDependency
export type Version = {
plugin_org: string
plugin_name: string