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 1cf9fc23ef..dddaf1fd40 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 @@ -16,6 +16,7 @@ import type { StrategyPluginDetail } from '@/app/components/plugins/types' import type { ToolWithProvider } from '../../../types' import { CollectionType } from '@/app/components/tools/types' import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon' +import type { StrategyStatus } from '../../agent/use-config' const ExternalNotInstallWarn = () => { const { t } = useTranslation() @@ -67,10 +68,11 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s export type AgentStrategySelectorProps = { value?: Strategy, onChange: (value?: Strategy) => void, + strategyStatus?: StrategyStatus } export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => { - const { value, onChange } = props + const { value, onChange, strategyStatus } = props const [open, setOpen] = useState(false) const [viewType, setViewType] = useState(ViewType.flat) const [query, setQuery] = useState('') @@ -81,8 +83,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => if (!list) return [] return list.filter(tool => tool.name.toLowerCase().includes(query.toLowerCase())) }, [query, list]) - // TODO: should be replaced by real data - const isExternalInstalled = true + const isShowError = (['plugin-not-found', 'strategy-not-found'] as Array).includes(strategyStatus) const icon = list?.find( coll => coll.tools?.find(tool => tool.name === value?.agent_strategy_name), )?.icon as string | undefined @@ -104,8 +105,8 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}

{value &&
- e.stopPropagation()} size={'small'} /> - {isExternalInstalled ? : } + {strategyStatus === 'plugin-not-found' && e.stopPropagation()} size={'small'} />} + {isShowError ? : }
} @@ -143,9 +144,6 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => - {/*
- aaa -
*/} }) diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx index 4ec46a6d61..fdd3e4f059 100644 --- a/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx +++ b/web/app/components/workflow/nodes/_base/components/agent-strategy.tsx @@ -19,6 +19,7 @@ import { useWorkflowStore } from '../../../store' import { useRenderI18nObject } from '@/hooks/use-i18n' import type { NodeOutPutVar } from '../../../types' import type { Node } from 'reactflow' +import type { StrategyStatus } from '../../agent/use-config' export type Strategy = { agent_strategy_provider_name: string @@ -36,6 +37,7 @@ export type AgentStrategyProps = { onFormValueChange: (value: ToolVarInputs) => void nodeOutputVars?: NodeOutPutVar[], availableNodes?: Node[], + strategyStatus: StrategyStatus } type CustomSchema = Omit & { type: Type } & Field @@ -54,7 +56,7 @@ type StringSchema = CustomSchema<'string', { type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema | StringSchema export const AgentStrategy = memo((props: AgentStrategyProps) => { - const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes } = props + const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, strategyStatus } = props const { t } = useTranslation() const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration) const renderI18nObject = useRenderI18nObject() @@ -176,7 +178,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => { } } return
- + { strategy ?
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx index 1ae5fab864..992dfc05e4 100644 --- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx +++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx @@ -3,14 +3,31 @@ import { RiInstallLine, RiLoader2Line } from '@remixicon/react' import type { ComponentProps } from 'react' import classNames from '@/utils/classnames' import { useTranslation } from 'react-i18next' +import { useCheckInstalled, useInstallPackageFromMarketPlace } from '@/service/use-plugins' -type InstallPluginButtonProps = Omit, 'children'> +type InstallPluginButtonProps = Omit, 'children' | 'loading'> & { + uniqueIdentifier: string +} export const InstallPluginButton = (props: InstallPluginButtonProps) => { - const { loading, className, ...rest } = props + const { className, uniqueIdentifier, ...rest } = props const { t } = useTranslation() - return } diff --git a/web/app/components/workflow/nodes/agent/panel.tsx b/web/app/components/workflow/nodes/agent/panel.tsx index ab8ff1c4b9..cc6ebf3ca2 100644 --- a/web/app/components/workflow/nodes/agent/panel.tsx +++ b/web/app/components/workflow/nodes/agent/panel.tsx @@ -30,6 +30,7 @@ const AgentPanel: FC> = (props) => { inputs, setInputs, currentStrategy, + currentStrategyStatus, formData, onFormChange, @@ -95,6 +96,7 @@ const AgentPanel: FC> = (props) => { onFormValueChange={onFormChange} nodeOutputVars={availableVars} availableNodes={availableNodesWithParent} + strategyStatus={currentStrategyStatus} />
diff --git a/web/app/components/workflow/nodes/agent/use-config.ts b/web/app/components/workflow/nodes/agent/use-config.ts index 45dd648989..5f68581ea1 100644 --- a/web/app/components/workflow/nodes/agent/use-config.ts +++ b/web/app/components/workflow/nodes/agent/use-config.ts @@ -13,6 +13,8 @@ import type { Var } from '../../types' import { VarType as VarKindType } from '../../types' import useAvailableVarList from '../_base/hooks/use-available-var-list' +export type StrategyStatus = 'loading' | 'plugin-not-found' | 'strategy-not-found' | 'success' + const useConfig = (id: string, payload: AgentNodeType) => { const { nodesReadOnly: readOnly } = useNodesReadOnly() const { inputs, setInputs } = useNodeCrud(id, payload) @@ -27,7 +29,7 @@ const useConfig = (id: string, payload: AgentNodeType) => { const currentStrategy = strategyProvider.data?.declaration.strategies.find( str => str.identity.name === inputs.agent_strategy_name, ) - const currentStrategyStatus: 'loading' | 'plugin-not-found' | 'strategy-not-found' | 'success' = useMemo(() => { + const currentStrategyStatus: StrategyStatus = useMemo(() => { if (strategyProvider.isLoading) return 'loading' if (strategyProvider.isError) return 'plugin-not-found' if (!currentStrategy) return 'strategy-not-found' diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index 5ad7d831d9..8a7b565350 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -22,6 +22,7 @@ import type { PluginsSearchParams, } from '@/app/components/plugins/marketplace/types' import { get, getMarketplace, post, postMarketplace } from './base' +import type { MutateOptions } from '@tanstack/react-query' import { useMutation, useQuery, @@ -72,8 +73,9 @@ export const useInvalidateInstalledPluginList = () => { } } -export const useInstallPackageFromMarketPlace = () => { +export const useInstallPackageFromMarketPlace = (options?: MutateOptions) => { return useMutation({ + ...options, mutationFn: (uniqueIdentifier: string) => { return post('/workspaces/current/plugin/install/marketplace', { body: { plugin_unique_identifiers: [uniqueIdentifier] } }) },