From 5817c07db6f959624583d57257dd9ee271df58a6 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 7 Jan 2025 16:33:58 +0800 Subject: [PATCH 1/3] feat: local install refresh --- .../hooks/use-refresh-plugin-list.tsx | 12 ++++++----- .../install-bundle/steps/install.tsx | 6 +++--- .../ready-to-install.tsx | 21 ++++++------------- 3 files changed, 16 insertions(+), 23 deletions(-) diff --git a/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx index 6bcb8f0321..acb486c703 100644 --- a/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx +++ b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx @@ -3,7 +3,7 @@ import { useProviderContext } from '@/context/provider-context' import { useInvalidateInstalledPluginList } from '@/service/use-plugins' import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools' import { useInvalidateStrategyProviders } from '@/service/use-strategy' -import type { Plugin, PluginManifestInMarket } from '../../types' +import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types' import { PluginType } from '../../types' const useRefreshPluginList = () => { @@ -16,25 +16,27 @@ const useRefreshPluginList = () => { const invalidateStrategyProviders = useInvalidateStrategyProviders() return { - refreshPluginList: (manifest: PluginManifestInMarket | Plugin) => { + refreshPluginList: (manifest?: PluginManifestInMarket | Plugin | PluginDeclaration | null, refreshAllType?: boolean) => { // installed list invalidateInstalledPluginList() + if (!manifest) return + // tool page, tool select - if (PluginType.tool.includes(manifest.category)) { + if (PluginType.tool.includes(manifest.category) || refreshAllType) { invalidateAllToolProviders() invalidateAllBuiltInTools() // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins } // model select - if (PluginType.model.includes(manifest.category)) { + if (PluginType.model.includes(manifest.category) || refreshAllType) { updateModelProviders() refreshModelProviders() } // agent select - if (PluginType.agent.includes(manifest.category)) + if (PluginType.agent.includes(manifest.category) || refreshAllType) invalidateStrategyProviders() }, } diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx index 7f33c5cef3..a1a17f2df1 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx @@ -7,7 +7,7 @@ import { RiLoader2Line } from '@remixicon/react' import { useTranslation } from 'react-i18next' import InstallMulti from './install-multi' import { useInstallOrUpdate } from '@/service/use-plugins' -import { useInvalidateInstalledPluginList } from '@/service/use-plugins' +import useRefreshPluginList from '../../hooks/use-refresh-plugin-list' const i18nPrefix = 'plugin.installModal' type Props = { @@ -29,7 +29,7 @@ const Install: FC = ({ const [selectedPlugins, setSelectedPlugins] = React.useState([]) const [selectedIndexes, setSelectedIndexes] = React.useState([]) const selectedPluginsNum = selectedPlugins.length - const invalidateInstalledPluginList = useInvalidateInstalledPluginList() + const { refreshPluginList } = useRefreshPluginList() const handleSelect = (plugin: Plugin, selectedIndex: number) => { const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id) let nextSelectedPlugins @@ -61,7 +61,7 @@ const Install: FC = ({ })) const hasInstallSuccess = res.some(r => r.success) if (hasInstallSuccess) - invalidateInstalledPluginList() + refreshPluginList(undefined, true) }, }) const handleInstall = () => { diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx index f41ecd3469..78907f4494 100644 --- a/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx +++ b/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx @@ -2,12 +2,11 @@ import type { FC } from 'react' import React, { useCallback } from 'react' import type { PluginDeclaration } from '../../types' -import { InstallStep, PluginType } from '../../types' +import { InstallStep } from '../../types' import Install from './steps/install' import Installed from '../base/installed' -import { useInvalidateInstalledPluginList } from '@/service/use-plugins' -import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks' -import { useInvalidateAllToolProviders } from '@/service/use-tools' +import useRefreshPluginList from '../hooks/use-refresh-plugin-list' + type Props = { step: InstallStep onStepChange: (step: InstallStep) => void, @@ -27,20 +26,12 @@ const ReadyToInstall: FC = ({ errorMsg, onError, }) => { - const invalidateInstalledPluginList = useInvalidateInstalledPluginList() - const updateModelProviders = useUpdateModelProviders() - const invalidateAllToolProviders = useInvalidateAllToolProviders() + const { refreshPluginList } = useRefreshPluginList() const handleInstalled = useCallback(() => { onStepChange(InstallStep.installed) - invalidateInstalledPluginList() - if (!manifest) - return - if (PluginType.model.includes(manifest.category)) - updateModelProviders() - if (PluginType.tool.includes(manifest.category)) - invalidateAllToolProviders() - }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest, onStepChange, updateModelProviders]) + refreshPluginList(manifest) + }, [manifest, onStepChange, refreshPluginList]) const handleFailed = useCallback((errorMsg?: string) => { onStepChange(InstallStep.installFailed) From a6d172f11103e0db46b1d293775ecb76d44e6150 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 7 Jan 2025 16:42:40 +0800 Subject: [PATCH 2/3] feat: github refresh plugin list --- .../install-from-github/index.tsx | 18 ++++++------------ .../plugins/plugin-page/empty/index.tsx | 7 +++---- .../plugin-page/install-plugin-dropdown.tsx | 4 +--- 3 files changed, 10 insertions(+), 19 deletions(-) diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx index d55ea4de85..71f81f0ffa 100644 --- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx +++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx @@ -7,7 +7,7 @@ import type { InstallState } from '@/app/components/plugins/types' import { useGitHubReleases } from '../hooks' import { convertRepoToUrl, parseGitHubUrl } from '../utils' import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types' -import { InstallStepFromGitHub, PluginType } from '../../types' +import { InstallStepFromGitHub } from '../../types' import Toast from '@/app/components/base/toast' import SetURL from './steps/setURL' import SelectPackage from './steps/selectPackage' @@ -15,8 +15,7 @@ import Installed from '../base/installed' import Loaded from './steps/loaded' import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon' import { useTranslation } from 'react-i18next' -import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks' -import { useInvalidateAllToolProviders } from '@/service/use-tools' +import useRefreshPluginList from '../hooks/use-refresh-plugin-list' const i18nPrefix = 'plugin.installFromGitHub' @@ -30,8 +29,8 @@ const InstallFromGitHub: React.FC = ({ updatePayload, on const { t } = useTranslation() const { getIconUrl } = useGetIcon() const { fetchReleases } = useGitHubReleases() - const updateModelProviders = useUpdateModelProviders() - const invalidateAllToolProviders = useInvalidateAllToolProviders() + const { refreshPluginList } = useRefreshPluginList() + const [state, setState] = useState({ step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl, repoUrl: updatePayload?.originalPackageInfo?.repo @@ -115,14 +114,9 @@ const InstallFromGitHub: React.FC = ({ updatePayload, on const handleInstalled = useCallback(() => { setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed })) - if (!manifest) - return - if (PluginType.model.includes(manifest.category)) - updateModelProviders() - if (PluginType.tool.includes(manifest.category)) - invalidateAllToolProviders() + refreshPluginList(manifest) onSuccess() - }, [invalidateAllToolProviders, manifest, onSuccess, updateModelProviders]) + }, [manifest, onSuccess, refreshPluginList]) const handleFailed = useCallback((errorMsg?: string) => { setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed })) diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx index 408f724df7..3263f6a0c3 100644 --- a/web/app/components/plugins/plugin-page/empty/index.tsx +++ b/web/app/components/plugins/plugin-page/empty/index.tsx @@ -8,7 +8,7 @@ import { usePluginPageContext } from '../context' import { Group } from '@/app/components/base/icons/src/vender/other' import { useSelector as useAppContextSelector } from '@/context/app-context' import Line from '../../marketplace/empty/line' -import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins' +import { useInstalledPluginList } from '@/service/use-plugins' import { useTranslation } from 'react-i18next' import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config' @@ -29,14 +29,13 @@ const Empty = () => { } const filters = usePluginPageContext(v => v.filters) const { data: pluginList } = useInstalledPluginList() - const invalidateInstalledPluginList = useInvalidateInstalledPluginList() const text = useMemo(() => { if (pluginList?.plugins.length === 0) return t('plugin.list.noInstalled') if (filters.categories.length > 0 || filters.tags.length > 0 || filters.searchQuery) return t('plugin.list.notFound') - }, [pluginList, filters]) + }, [pluginList?.plugins.length, t, filters.categories.length, filters.tags.length, filters.searchQuery]) return (
@@ -100,7 +99,7 @@ const Empty = () => {
{selectedAction === 'github' && { invalidateInstalledPluginList() }} + onSuccess={() => { }} onClose={() => setSelectedAction(null)} />} {selectedAction === 'local' && selectedFile diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx index e8d68e1bbf..4c2d543e14 100644 --- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx +++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx @@ -15,7 +15,6 @@ import { PortalToFollowElemTrigger, } from '@/app/components/base/portal-to-follow-elem' 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' @@ -31,7 +30,6 @@ const InstallPluginDropdown = ({ const [selectedAction, setSelectedAction] = useState(null) const [selectedFile, setSelectedFile] = useState(null) const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures) - const invalidateInstalledPluginList = useInvalidateInstalledPluginList() const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0] @@ -120,7 +118,7 @@ const InstallPluginDropdown = ({ {selectedAction === 'github' && { invalidateInstalledPluginList() }} + onSuccess={() => { }} onClose={() => setSelectedAction(null)} />} {selectedAction === 'local' && selectedFile From 768e1b9da38b4d3202844b1960e4951d0aaa9fcd Mon Sep 17 00:00:00 2001 From: AkaraChen Date: Tue, 7 Jan 2025 16:43:36 +0800 Subject: [PATCH 3/3] fix: wrong tooltip content for switch plugin version --- web/app/components/base/tooltip/content.tsx | 22 +++++++++++++++++++ .../components/agent-strategy-selector.tsx | 6 ++++- .../components/switch-plugin-version.tsx | 3 ++- web/app/dev-preview/page.tsx | 7 +++++- web/i18n/en-US/workflow.ts | 1 - web/i18n/zh-Hans/workflow.ts | 1 - 6 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 web/app/components/base/tooltip/content.tsx diff --git a/web/app/components/base/tooltip/content.tsx b/web/app/components/base/tooltip/content.tsx new file mode 100644 index 0000000000..fe357ccfa6 --- /dev/null +++ b/web/app/components/base/tooltip/content.tsx @@ -0,0 +1,22 @@ +import type { FC, PropsWithChildren, ReactNode } from 'react' + +export type ToolTipContentProps = { + title?: ReactNode + action?: ReactNode +} & PropsWithChildren + +export const ToolTipContent: FC = ({ + title, + action, + children, +}) => { + return ( +
+ {title && ( +
{title}
+ )} +
{children}
+ {action &&
{action}
} +
+ ) +} diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx index c5862dab02..db684ea2df 100644 --- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx +++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx @@ -20,6 +20,7 @@ import { useStrategyInfo } from '../../agent/use-config' import { SwitchPluginVersion } from './switch-plugin-version' import PluginList from '@/app/components/workflow/block-selector/market-place-plugin/list' import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks' +import { ToolTipContent } from '@/app/components/base/tooltip/content' const NotFoundWarn = (props: { title: ReactNode, @@ -178,7 +179,10 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => } {showSwitchVersion && + {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')} + } onChange={() => { // TODO: refresh all strategies }} diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx index ad7414ca0c..e459a4b49e 100644 --- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx +++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx @@ -4,6 +4,7 @@ import Badge from '@/app/components/base/badge' import Tooltip from '@/app/components/base/tooltip' import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker' import { RiArrowLeftRightLine } from '@remixicon/react' +import type { ReactNode } from 'react' import { type FC, useCallback, useState } from 'react' import cn from '@/utils/classnames' import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place' @@ -12,7 +13,7 @@ import { useCheckInstalled } from '@/service/use-plugins' export type SwitchPluginVersionProps = { uniqueIdentifier: string - tooltip?: string + tooltip?: ReactNode onChange?: (version: string) => void } diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx index 49afe537cd..24631aa28e 100644 --- a/web/app/dev-preview/page.tsx +++ b/web/app/dev-preview/page.tsx @@ -1,5 +1,6 @@ 'use client' +import { ToolTipContent } from '../components/base/tooltip/content' import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version' import { useTranslation } from 'react-i18next' @@ -8,7 +9,11 @@ export default function Page() { return
+ {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')} + } />
} diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index 858f69db94..a9b0fe5587 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -755,7 +755,6 @@ const translation = { checkList: { strategyNotSelected: 'Strategy not selected', }, - switchToNewVersion: 'Switch to new version', }, tracing: { stopBy: 'Stop by {{user}}', diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index b90fec2371..11996ae982 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -754,7 +754,6 @@ const translation = { checkList: { strategyNotSelected: '未选择策略', }, - switchToNewVersion: '切换到新版', }, }, tracing: {