diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx index 692b2ecd26..4d20c0877d 100644 --- a/web/app/components/plugins/plugin-detail-panel/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/index.tsx @@ -9,7 +9,6 @@ import AgentStrategyList from './agent-strategy-list' import Drawer from '@/app/components/base/drawer' import type { PluginDetail } from '@/app/components/plugins/types' import cn from '@/utils/classnames' -import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector' type Props = { detail?: PluginDetail @@ -28,16 +27,6 @@ const PluginDetailPanel: FC = ({ onUpdate() } - const [value, setValue] = React.useState({ - provider_name: 'langgenius/google/google', - tool_name: 'google_search', - }) - - const testHandle = (item: any) => { - console.log(item) - setValue(item) - } - if (!detail) return null @@ -63,17 +52,6 @@ const PluginDetailPanel: FC = ({ {!!detail.declaration.agent_strategy && } {!!detail.declaration.endpoint && } {!!detail.declaration.model && } - {false && ( -
- testHandle(item)} - onDelete={() => testHandle(null)} - supportEnableSwitch - /> -
- )} )} diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx index 220edc22ca..e20673f7fa 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx @@ -102,7 +102,7 @@ const ToolSelector: FC = ({ const currentProvider = useMemo(() => { const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])] return mergedTools.find((toolWithProvider) => { - return toolWithProvider.id === value?.provider_name && toolWithProvider.tools.some(tool => tool.name === value?.tool_name) + return toolWithProvider.id === value?.provider_name }) }, [value, buildInTools, customTools, workflowTools]) @@ -172,7 +172,9 @@ const ToolSelector: FC = ({ }) // install from marketplace - + const currentTool = useMemo(() => { + return currentProvider?.tools.find(tool => tool.name === value?.tool_name) + }, [currentProvider?.tools, value?.tool_name]) const manifestIcon = useMemo(() => { if (!manifest) return '' @@ -193,7 +195,10 @@ const ToolSelector: FC = ({ > { + if (!currentProvider || !currentTool) return + handleTriggerClick() + }} > {trigger} {!trigger && !value?.provider_name && ( @@ -214,19 +219,22 @@ const ToolSelector: FC = ({ switchValue={value.enabled} onSwitchChange={handleEnabledChange} onDelete={onDelete} - noAuth={currentProvider && !currentProvider.is_team_authorization} + noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization} onAuth={() => setShowSettingAuth(true)} uninstalled={!currentProvider && inMarketPlace} + versionMismatch={currentProvider && inMarketPlace && !currentTool} installInfo={manifest?.latest_package_identifier} onInstall={() => handleInstall()} - isError={!currentProvider && !inMarketPlace} - errorTip={
-

{t('plugin.detailPanel.toolSelector.uninstalledTitle')}

-

{t('plugin.detailPanel.toolSelector.uninstalledContent')}

-

- {t('plugin.detailPanel.toolSelector.uninstalledLink')} -

-
} + isError={(!currentProvider || !currentTool) && !inMarketPlace} + errorTip={ +
+

{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}

+

{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}

+

+ {t('plugin.detailPanel.toolSelector.uninstalledLink')} +

+
+ } /> )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx index 45a9abd592..3e32e66929 100644 --- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx +++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx @@ -13,7 +13,9 @@ import Button from '@/app/components/base/button' import Indicator from '@/app/components/header/indicator' import ActionButton from '@/app/components/base/action-button' import Tooltip from '@/app/components/base/tooltip' +import { ToolTipContent } from '@/app/components/base/tooltip/content' import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button' +import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version' import cn from '@/utils/classnames' type Props = { @@ -31,6 +33,7 @@ type Props = { uninstalled?: boolean installInfo?: string onInstall?: () => void + versionMismatch?: boolean open: boolean } @@ -50,10 +53,11 @@ const ToolItem = ({ onInstall, isError, errorTip, + versionMismatch, }: Props) => { const { t } = useTranslation() const providerNameText = providerName?.split('/').pop() - const isTransparent = uninstalled || isError + const isTransparent = uninstalled || versionMismatch || isError const [isDeleting, setIsDeleting] = useState(false) return ( @@ -82,7 +86,7 @@ const ToolItem = ({
{toolName}
- {!noAuth && !isError && !uninstalled && ( + {!noAuth && !isError && !uninstalled && !versionMismatch && ( @@ -99,7 +103,7 @@ const ToolItem = ({
- {!isError && !uninstalled && !noAuth && showSwitch && ( + {!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
e.stopPropagation()}>
)} - {!isError && !uninstalled && noAuth && ( + {!isError && !uninstalled && !versionMismatch && noAuth && ( )} + {!isError && !uninstalled && versionMismatch && installInfo && ( +
e.stopPropagation()}> + + {`${t('plugin.detailPanel.toolSelector.unsupportedContent')} ${t('plugin.detailPanel.toolSelector.unsupportedContent2')}`} + + } + onChange={() => { + onInstall?.() + }} + /> +
+ )} {!isError && uninstalled && installInfo && ( e.stopPropagation()} 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 c375d3198a..8f6f751bc3 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 @@ -6,19 +6,20 @@ import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-v 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' import { useBoolean } from 'ahooks' import { useCheckInstalled } from '@/service/use-plugins' +import cn from '@/utils/classnames' export type SwitchPluginVersionProps = { uniqueIdentifier: string tooltip?: ReactNode onChange?: (version: string) => void + className?: string } export const SwitchPluginVersion: FC = (props) => { - const { uniqueIdentifier, tooltip, onChange } = props + const { uniqueIdentifier, tooltip, onChange, className } = props const [pluginId] = uniqueIdentifier.split(':') const [isShow, setIsShow] = useState(false) const [isShowUpdateModal, { setTrue: showUpdateModal, setFalse: hideUpdateModal }] = useBoolean(false) @@ -40,7 +41,7 @@ export const SwitchPluginVersion: FC = (props) => { return uniqueIdentifier.replaceAll(pluginDetail.version, targetVersion) })() return -
+
{isShowUpdateModal && pluginDetail &&