From 87d7df3ed41193dfdb57fc72ef3ee90e34fa06dc Mon Sep 17 00:00:00 2001 From: Yi Date: Wed, 8 Jan 2025 16:51:06 +0800 Subject: [PATCH 1/7] fix: make the status indicator component compatible with the switch plugin version component --- .../status-indicators.tsx | 46 +++++++++++++------ .../components/switch-plugin-version.tsx | 2 +- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx index 1c28ef3019..9f3543a475 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/status-indicators.tsx @@ -45,20 +45,38 @@ const StatusIndicators = ({ needsConfiguration, modelProvider, inModelList, disa {/* plugin installed and model is in model list but disabled */} {/* plugin installed from github/local and model is not in model list */} {!needsConfiguration && modelProvider && disabled && ( - - {!pluginInfo ? : plugin.name === pluginInfo.name)?.plugin_unique_identifier ?? ''} />} - + <> + {inModelList ? ( + + + + ) : !pluginInfo ? ( + + + + ) : ( + plugin.name === pluginInfo.name)?.plugin_unique_identifier ?? ''} + /> + )} + )} {!modelProvider && !pluginInfo && ( = (props) => { } const { t } = useTranslation() return -
+
e.stopPropagation()}> {isShowUpdateModal && pluginDetail && Date: Wed, 8 Jan 2025 16:56:56 +0800 Subject: [PATCH 2/7] fix: agent node getNodeUsedVars --- .../nodes/_base/components/variable/utils.ts | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/web/app/components/workflow/nodes/_base/components/variable/utils.ts b/web/app/components/workflow/nodes/_base/components/variable/utils.ts index 6f3ec8794f..482bb7acf7 100644 --- a/web/app/components/workflow/nodes/_base/components/variable/utils.ts +++ b/web/app/components/workflow/nodes/_base/components/variable/utils.ts @@ -807,10 +807,17 @@ export const getNodeUsedVars = (node: Node): ValueSelector[] => { case BlockEnum.Agent: { const payload = data as AgentNodeType - const params = payload.agent_parameters || {} - const mixVars = matchNotSystemVars(Object.keys(params)?.filter(key => params[key].type === ToolVarType.mixed).map(key => params[key].value) as string[]) - const vars = Object.keys(params).filter(key => params[key].type === ToolVarType.variable).map(key => params[key].value as string) || [] - res = [...(mixVars as ValueSelector[]), ...(vars as any)] + const valueSelectors: ValueSelector[] = [] + if (!payload.agent_parameters) + break + + Object.keys(payload.agent_parameters || {}).forEach((key) => { + const { value } = payload.agent_parameters![key] + if (typeof value === 'string') + valueSelectors.push(...matchNotSystemVars([value])) + }) + res = valueSelectors + break } } return res || [] From c3215a8f944f6fd4aa4789d72cfc7b26e195b0ad Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 8 Jan 2025 17:02:18 +0800 Subject: [PATCH 3/7] feat: fold into animation --- .../hooks/use-fold-anim-into.ts | 37 +++++++++++++++++++ .../install-from-marketplace/index.tsx | 13 +++++-- .../plugin-page/plugin-tasks/index.tsx | 1 + 3 files changed, 48 insertions(+), 3 deletions(-) create mode 100644 web/app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts diff --git a/web/app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts b/web/app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts new file mode 100644 index 0000000000..f1c2a612d6 --- /dev/null +++ b/web/app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts @@ -0,0 +1,37 @@ +import { sleep } from '@/utils' + +// modalElem fold into plugin install task btn +const animTime = 2000 + +function getElemCenter(elem: HTMLElement) { + const rect = elem.getBoundingClientRect() + return { + x: rect.left + rect.width / 2 + window.scrollX, + y: rect.top + rect.height / 2 + window.scrollY, + } +} + +const useFoldAnimInto = (onClose: () => void) => { + return async function foldIntoAnim(modalClassName: string) { + const modalElem = document.querySelector(`.${modalClassName}`) as HTMLElement + const pluginTaskTriggerElem = document.getElementById('plugin-task-trigger') + + if (!modalElem || !pluginTaskTriggerElem) { + onClose() + return + } + + const modelCenter = getElemCenter(modalElem) + const modalElemRect = modalElem.getBoundingClientRect() + const pluginTaskTriggerCenter = getElemCenter(pluginTaskTriggerElem) + const xDiff = pluginTaskTriggerCenter.x - modelCenter.x + const yDiff = pluginTaskTriggerCenter.y - modelCenter.y + const scale = 1 / Math.max(modalElemRect.width, modalElemRect.height) + modalElem.style.transition = `all cubic-bezier(0.4, 0, 0.2, 1) ${animTime}ms` + modalElem.style.transform = `translate(${xDiff}px, ${yDiff}px) scale(${scale})` + await sleep(animTime) + onClose() + } +} + +export default useFoldAnimInto 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 7ac271b83f..67ed8ee547 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 @@ -1,6 +1,6 @@ 'use client' -import React, { useCallback, useState } from 'react' +import React, { useCallback, useRef, useState } from 'react' import Modal from '@/app/components/base/modal' import type { Dependency, Plugin, PluginManifestInMarket } from '../../types' import { InstallStep } from '../../types' @@ -9,6 +9,8 @@ import Installed from '../base/installed' import { useTranslation } from 'react-i18next' import useRefreshPluginList from '../hooks/use-refresh-plugin-list' import ReadyToInstallBundle from '../install-bundle/ready-to-install' +import useFoldAnimInto from '../hooks/use-fold-anim-into' +import cn from '@/utils/classnames' const i18nPrefix = 'plugin.installModal' @@ -35,6 +37,9 @@ const InstallFromMarketplace: React.FC = ({ const [errorMsg, setErrorMsg] = useState(null) const { refreshPluginList } = useRefreshPluginList() + const modalRef = useRef(null) + const foldAnimInto = useFoldAnimInto(onClose) + const getTitle = useCallback(() => { if (isBundle && step === InstallStep.installed) return t(`${i18nPrefix}.installComplete`) @@ -56,12 +61,14 @@ const InstallFromMarketplace: React.FC = ({ setErrorMsg(errorMsg) }, []) + const modalClassName = 'install-modal' + return ( step === InstallStep.readyToInstall ? foldAnimInto(modalClassName) : onClose()} wrapperClassName='z-[9999]' - className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl' + className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')} closable >
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx index 328cc2a868..997877e3a4 100644 --- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx +++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx @@ -87,6 +87,7 @@ const PluginTasks = () => { 'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover', (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer', )} + id="plugin-task-trigger" > { (isInstalling || isInstallingWithError) && ( From 62d53399aeaca42d33be6a95efe497911e6fd704 Mon Sep 17 00:00:00 2001 From: Yi Date: Wed, 8 Jan 2025 17:11:55 +0800 Subject: [PATCH 4/7] fix: add bg color to the top section in plugins page --- web/app/components/plugins/plugin-page/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx index 05b5acf8e7..7851f05aaf 100644 --- a/web/app/components/plugins/plugin-page/index.tsx +++ b/web/app/components/plugins/plugin-page/index.tsx @@ -146,7 +146,7 @@ const PluginPage = ({ >
From c357ec0f7c4f7b66e5976334c8af457f1eb96529 Mon Sep 17 00:00:00 2001 From: Yi Date: Wed, 8 Jan 2025 17:27:03 +0800 Subject: [PATCH 5/7] chore: add loading to the model selector trigger --- .../model-parameter-modal/agent-model-trigger.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx index be56b95a95..52b73924cc 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx @@ -12,6 +12,7 @@ import { import type { PluginInfoFromMarketPlace } from '@/app/components/plugins/types' import { useInvalidateInstalledPluginList } from '@/service/use-plugins' import ConfigurationButton from './configuration-button' +import Loading from '@/app/components/base/loading' import { PluginType } from '@/app/components/plugins/types' import { useModelModalHandler, @@ -104,7 +105,7 @@ const AgentModelTrigger: FC = ({ }, [providerName, modelId, currentProvider]) if (modelId && !isPluginChecked) - return null + return return (
Date: Wed, 8 Jan 2025 17:36:26 +0800 Subject: [PATCH 6/7] fix: number not supported --- web/app/components/tools/utils/to-form-schema.ts | 2 +- .../nodes/_base/components/agent-strategy.tsx | 16 ++++++++++++++-- .../nodes/_base/components/prompt/editor.tsx | 4 ++-- .../components/workflow/nodes/agent/panel.tsx | 2 ++ 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/web/app/components/tools/utils/to-form-schema.ts b/web/app/components/tools/utils/to-form-schema.ts index 4e83248c9b..7086c903d1 100644 --- a/web/app/components/tools/utils/to-form-schema.ts +++ b/web/app/components/tools/utils/to-form-schema.ts @@ -1,5 +1,5 @@ import type { ToolCredential, ToolParameter } from '../types' -const toType = (type: string) => { +export const toType = (type: string) => { switch (type) { case 'string': return 'text-input' 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..7efd77b4c5 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 { toType } from '@/app/components/tools/utils/to-form-schema' export type Strategy = { agent_strategy_provider_name: string @@ -150,7 +151,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => { onGenerated={handleGenerated} title={renderI18nObject(schema.label)} headerClassName='bg-transparent px-0 text-text-secondary system-sm-semibold-uppercase' - containerClassName='bg-transparent' + containerBackgroundClassName='bg-transparent' gradientBorder={false} isSupportPromptGenerator={!!schema.auto_generate?.type} titleTooltip={schema.tooltip && renderI18nObject(schema.tooltip)} @@ -181,7 +182,18 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => { strategy ?
- formSchemas={formSchema} + formSchemas={[...formSchema, { + name: 'max_iteration', + type: toType('number'), + required: true, + label: { + en_US: 'Max Iteration', + zh_Hans: '最大迭代次数', + pt_BR: 'Max Iteration', + }, + show_on: [], + variable: 'max-ite', + }]} value={formValue} onChange={onFormValueChange} validating={false} diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx index e1d43e10e3..43db8a276e 100644 --- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx +++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx @@ -68,7 +68,7 @@ type Props = { onEditionTypeChange?: (editionType: EditionType) => void varList?: Variable[] handleAddVariable?: (payload: any) => void - containerClassName?: string + containerBackgroundClassName?: string gradientBorder?: boolean titleTooltip?: ReactNode inputClassName?: string @@ -103,7 +103,7 @@ const Editor: FC = ({ handleAddVariable, onGenerated, modelConfig, - containerClassName, + containerBackgroundClassName: containerClassName, gradientBorder = true, titleTooltip, inputClassName, diff --git a/web/app/components/workflow/nodes/agent/panel.tsx b/web/app/components/workflow/nodes/agent/panel.tsx index ab8ff1c4b9..2b1f3827b3 100644 --- a/web/app/components/workflow/nodes/agent/panel.tsx +++ b/web/app/components/workflow/nodes/agent/panel.tsx @@ -14,6 +14,7 @@ import ResultPanel from '@/app/components/workflow/run/result-panel' import formatTracing from '@/app/components/workflow/run/utils/format-log' import { useLogs } from '@/app/components/workflow/run/hooks' import type { Props as FormProps } from '@/app/components/workflow/nodes/_base/components/before-run-form/form' +import { toType } from '@/app/components/tools/utils/to-form-schema' const i18nPrefix = 'workflow.nodes.agent' @@ -22,6 +23,7 @@ export function strategyParamToCredientialForm(param: StrategyParamItem): Creden ...param as any, variable: param.name, show_on: [], + type: toType(param.type), } } From 0248c8cb8c4b101ca008becb5b0dda666783218c Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Wed, 8 Jan 2025 17:47:47 +0800 Subject: [PATCH 7/7] fix: agent key --- web/app/components/plugins/constants.ts | 2 +- web/app/components/plugins/hooks.ts | 12 ++++++------ web/app/components/plugins/types.ts | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/web/app/components/plugins/constants.ts b/web/app/components/plugins/constants.ts index 40a3f0da83..02439be510 100644 --- a/web/app/components/plugins/constants.ts +++ b/web/app/components/plugins/constants.ts @@ -21,7 +21,7 @@ export const tagKeys = [ export const categoryKeys = [ 'model', 'tool', - 'agent', + 'agent-strategy', 'extension', 'bundle', ] diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts index 371b769019..f4b81d98c1 100644 --- a/web/app/components/plugins/hooks.ts +++ b/web/app/components/plugins/hooks.ts @@ -42,10 +42,10 @@ export const useCategories = (translateFromOut?: TFunction) => { const t = translateFromOut || translation const categories = categoryKeys.map((category) => { - if (category === 'agent') { + if (category === 'agent-strategy') { return { - name: 'agent_strategy', - label: t(`plugin.category.${category}s`), + name: 'agent-strategy', + label: t('plugin.category.agents'), } } return { @@ -70,10 +70,10 @@ export const useSingleCategories = (translateFromOut?: TFunction) => { const t = translateFromOut || translation const categories = categoryKeys.map((category) => { - if (category === 'agent') { + if (category === 'agent-strategy') { return { - name: 'agent_strategy', - label: t(`plugin.categorySingle.${category}`), + name: 'agent-strategy', + label: t('plugin.categorySingle.agent'), } } return { diff --git a/web/app/components/plugins/types.ts b/web/app/components/plugins/types.ts index b58c25f9e3..15da9991a6 100644 --- a/web/app/components/plugins/types.ts +++ b/web/app/components/plugins/types.ts @@ -6,7 +6,7 @@ export enum PluginType { tool = 'tool', model = 'model', extension = 'extension', - agent = 'agent_strategy', + agent = 'agent-strategy', } export enum PluginSource {