From ac42ba880a2b399394f13f3121593a1a49569a11 Mon Sep 17 00:00:00 2001 From: JzoNg Date: Thu, 21 Nov 2024 17:11:22 +0800 Subject: [PATCH] fix: install handle of list refresh --- .../plugins/install-plugin/base/installed.tsx | 5 ----- .../install-from-github/index.tsx | 18 ++++++++++++++---- .../ready-to-install.tsx | 17 +++++++++++++---- .../install-from-marketplace/index.tsx | 16 +++++++++++++--- .../plugin-detail-panel/detail-header.tsx | 8 ++++++-- .../components/plugins/plugin-item/index.tsx | 6 +++++- web/service/use-tools.ts | 4 ++++ 7 files changed, 55 insertions(+), 19 deletions(-) diff --git a/web/app/components/plugins/install-plugin/base/installed.tsx b/web/app/components/plugins/install-plugin/base/installed.tsx index eba50a6b21..efe8d4af76 100644 --- a/web/app/components/plugins/install-plugin/base/installed.tsx +++ b/web/app/components/plugins/install-plugin/base/installed.tsx @@ -4,8 +4,6 @@ import React from 'react' import { useTranslation } from 'react-i18next' import Card from '../../card' import Button from '@/app/components/base/button' -import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks' -import { PluginType } from '../../types' import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types' import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils' import Badge, { BadgeState } from '@/app/components/base/badge/index' @@ -26,12 +24,9 @@ const Installed: FC = ({ onCancel, }) => { const { t } = useTranslation() - const updateModelProviders = useUpdateModelProviders() const handleClose = () => { onCancel() - if (payload?.category === PluginType.model) - updateModelProviders() } return ( <> 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 c74071e808..d55ea4de85 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 } from '../../types' +import { InstallStepFromGitHub, PluginType } from '../../types' import Toast from '@/app/components/base/toast' import SetURL from './steps/setURL' import SelectPackage from './steps/selectPackage' @@ -15,6 +15,8 @@ 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' const i18nPrefix = 'plugin.installFromGitHub' @@ -28,6 +30,8 @@ const InstallFromGitHub: React.FC = ({ updatePayload, on const { t } = useTranslation() const { getIconUrl } = useGetIcon() const { fetchReleases } = useGitHubReleases() + const updateModelProviders = useUpdateModelProviders() + const invalidateAllToolProviders = useInvalidateAllToolProviders() const [state, setState] = useState({ step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl, repoUrl: updatePayload?.originalPackageInfo?.repo @@ -63,7 +67,7 @@ const InstallFromGitHub: React.FC = ({ updatePayload, on return t(`${i18nPrefix}.installFailed`) return updatePayload ? t(`${i18nPrefix}.updatePlugin`) : t(`${i18nPrefix}.installPlugin`) - }, [state.step]) + }, [state.step, t, updatePayload]) const handleUrlSubmit = async () => { const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl) @@ -111,8 +115,14 @@ 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() onSuccess() - }, [onSuccess]) + }, [invalidateAllToolProviders, manifest, onSuccess, updateModelProviders]) const handleFailed = useCallback((errorMsg?: string) => { setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed })) @@ -142,7 +152,7 @@ const InstallFromGitHub: React.FC = ({ updatePayload, on closable >
-
+
{getTitle()}
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 9f81b1e918..f41ecd3469 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,11 +2,12 @@ import type { FC } from 'react' import React, { useCallback } from 'react' import type { PluginDeclaration } from '../../types' -import { InstallStep } from '../../types' +import { InstallStep, PluginType } 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' type Props = { step: InstallStep onStepChange: (step: InstallStep) => void, @@ -27,11 +28,19 @@ const ReadyToInstall: FC = ({ onError, }) => { const invalidateInstalledPluginList = useInvalidateInstalledPluginList() + const updateModelProviders = useUpdateModelProviders() + const invalidateAllToolProviders = useInvalidateAllToolProviders() const handleInstalled = useCallback(() => { - invalidateInstalledPluginList() onStepChange(InstallStep.installed) - }, [invalidateInstalledPluginList, onStepChange]) + invalidateInstalledPluginList() + if (!manifest) + return + if (PluginType.model.includes(manifest.category)) + updateModelProviders() + if (PluginType.tool.includes(manifest.category)) + invalidateAllToolProviders() + }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest, onStepChange, updateModelProviders]) const handleFailed = useCallback((errorMsg?: string) => { onStepChange(InstallStep.installFailed) diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx index ad5b596b73..553c30f6be 100644 --- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx +++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx @@ -3,10 +3,13 @@ import React, { useCallback, useState } from 'react' import Modal from '@/app/components/base/modal' import type { Plugin, PluginManifestInMarket } from '../../types' -import { InstallStep } from '../../types' +import { InstallStep, PluginType } from '../../types' import Install from './steps/install' import Installed from '../base/installed' import { useTranslation } from 'react-i18next' +import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks' +import { useInvalidateInstalledPluginList } from '@/service/use-plugins' +import { useInvalidateAllToolProviders } from '@/service/use-tools' const i18nPrefix = 'plugin.installModal' @@ -27,7 +30,9 @@ const InstallFromMarketplace: React.FC = ({ // readyToInstall -> check installed -> installed/failed const [step, setStep] = useState(InstallStep.readyToInstall) const [errorMsg, setErrorMsg] = useState(null) - + const updateModelProviders = useUpdateModelProviders() + const invalidateAllToolProviders = useInvalidateAllToolProviders() + const invalidateInstalledPluginList = useInvalidateInstalledPluginList() // TODO: check installed in beta version. const getTitle = useCallback(() => { @@ -40,7 +45,12 @@ const InstallFromMarketplace: React.FC = ({ const handleInstalled = useCallback(() => { setStep(InstallStep.installed) - }, []) + invalidateInstalledPluginList() + if (PluginType.model.includes(manifest.category)) + updateModelProviders() + if (PluginType.tool.includes(manifest.category)) + invalidateAllToolProviders() + }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest.category, updateModelProviders]) const handleFailed = useCallback((errorMsg?: string) => { setStep(InstallStep.installFailed) diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx index 440b5de320..1037f4670e 100644 --- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx +++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx @@ -31,6 +31,7 @@ import { uninstallPlugin } from '@/service/plugins' import { useGetLanguage } from '@/context/i18n' import { useModalContext } from '@/context/modal-context' import { useProviderContext } from '@/context/provider-context' +import { useInvalidateAllToolProviders } from '@/service/use-tools' import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config' import cn from '@/utils/classnames' @@ -52,6 +53,7 @@ const DetailHeader = ({ const { checkForUpdates, fetchReleases } = useGitHubReleases() const { setShowUpdatePluginModal } = useModalContext() const { refreshModelProviders } = useProviderContext() + const invalidateAllToolProviders = useInvalidateAllToolProviders() const { installation_id, @@ -150,10 +152,12 @@ const DetailHeader = ({ if (res.success) { hideDeleteConfirm() onUpdate(true) - if (category === PluginType.model) + if (PluginType.model.includes(category)) refreshModelProviders() + if (PluginType.tool.includes(category)) + invalidateAllToolProviders() } - }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders]) + }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders]) // #plugin TODO# used in apps // const usedInApps = 3 diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx index d8bc72c158..430ceae7de 100644 --- a/web/app/components/plugins/plugin-item/index.tsx +++ b/web/app/components/plugins/plugin-item/index.tsx @@ -22,6 +22,7 @@ import cn from '@/utils/classnames' import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config' import { useLanguage } from '../../header/account-setting/model-provider-page/hooks' import { useInvalidateInstalledPluginList } from '@/service/use-plugins' +import { useInvalidateAllToolProviders } from '@/service/use-tools' import { useCategories } from '../hooks' import { useProviderContext } from '@/context/provider-context' @@ -40,6 +41,7 @@ const PluginItem: FC = ({ const currentPluginID = usePluginPageContext(v => v.currentPluginID) const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID) const invalidateInstalledPluginList = useInvalidateInstalledPluginList() + const invalidateAllToolProviders = useInvalidateAllToolProviders() const { refreshModelProviders } = useProviderContext() const { @@ -59,8 +61,10 @@ const PluginItem: FC = ({ const handleDelete = () => { invalidateInstalledPluginList() - if (category === PluginType.model) + if (PluginType.model.includes(category)) refreshModelProviders() + if (PluginType.tool.includes(category)) + invalidateAllToolProviders() } return (
{ }) } +export const useInvalidateAllToolProviders = () => { + return useInvalid(useAllToolProvidersKey) +} + const useAllBuiltInToolsKey = [NAME_SPACE, 'builtIn'] export const useAllBuiltInTools = () => { return useQuery({