admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: the frontend part of mcp (#22131)

Browse Source 
Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
This commit is contained in:
Joel
2025-07-10 14:14:02 +08:00
committed by GitHub
parent 535fff62f3
commit 5375d9bb27
152 changed files with 6340 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
View File

@@ -68,6 +68,7 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
icon: getIcon(item.declaration.identity.icon),
label: item.declaration.identity.label as any,
type: CollectionType.all,
meta: item.meta,
tools: item.declaration.strategies.map(strategy => ({
name: strategy.identity.name,
author: strategy.identity.author,
@@ -89,10 +90,13 @@ function formatStrategy(input: StrategyPluginDetail[], getIcon: (i: string) => s
export type AgentStrategySelectorProps = {
value?: Strategy,
onChange: (value?: Strategy) => void,
canChooseMCPTool: boolean,
}
export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) => {
const { value, onChange } = props
const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
const { value, onChange, canChooseMCPTool } = props
const [open, setOpen] = useState(false)
const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
const [query, setQuery] = useState('')
@@ -132,8 +136,6 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
plugins: notInstalledPlugins = [],
} = useMarketplacePlugins()
const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
useEffect(() => {
if (!enable_marketplace) return
if (query) {
@@ -214,21 +216,25 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
agent_strategy_label: tool!.tool_label,
agent_output_schema: tool!.output_schema,
plugin_unique_identifier: tool!.provider_id,
meta: tool!.meta,
})
setOpen(false)
}}
className='h-full max-h-full max-w-none overflow-y-auto'
indexBarClassName='top-0 xl:top-36' showWorkflowEmpty={false} hasSearchText={false} />
{enable_marketplace
&& <PluginList
indexBarClassName='top-0 xl:top-36'
hasSearchText={false}
canNotSelectMultiple
canChooseMCPTool={canChooseMCPTool}
isAgent
/>
{enable_marketplace && <PluginList
ref={pluginRef}
wrapElemRef={wrapElemRef}
list={notInstalledPlugins}
searchText={query}
tags={DEFAULT_TAGS}
disableMaxWidth
/>
}
/>}
</main>
</div>
</PortalToFollowElemContent>

13
web/app/components/workflow/nodes/_base/components/agent-strategy.tsx
View File

@@ -19,6 +19,8 @@ import { useWorkflowStore } from '../../../store'
import { useRenderI18nObject } from '@/hooks/use-i18n'
import type { NodeOutPutVar } from '../../../types'
import type { Node } from 'reactflow'
import type { PluginMeta } from '@/app/components/plugins/types'
import { noop } from 'lodash'
import { useDocLink } from '@/context/i18n'
export type Strategy = {
@@ -27,6 +29,7 @@ export type Strategy = {
agent_strategy_label: string
agent_output_schema: Record<string, any>
plugin_unique_identifier: string
meta?: PluginMeta
}
export type AgentStrategyProps = {
@@ -38,6 +41,7 @@ export type AgentStrategyProps = {
nodeOutputVars?: NodeOutPutVar[],
availableNodes?: Node[],
nodeId?: string
canChooseMCPTool: boolean
}
type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
@@ -48,7 +52,7 @@ type MultipleToolSelectorSchema = CustomSchema<'array[tools]'>
type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema
export const AgentStrategy = memo((props: AgentStrategyProps) => {
const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId } = props
const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId, canChooseMCPTool } = props
const { t } = useTranslation()
const docLink = useDocLink()
const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
@@ -57,6 +61,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
const {
setControlPromptEditorRerenderKey,
} = workflowStore.getState()
const override: ComponentProps<typeof Form<CustomField>>['override'] = [
[FormTypeEnum.textNumber, FormTypeEnum.textInput],
(schema, props) => {
@@ -168,6 +173,8 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
value={value}
onSelect={item => onChange(item)}
onDelete={() => onChange(null)}
canChooseMCPTool={canChooseMCPTool}
onSelectMultiple={noop}
/>
</Field>
)
@@ -189,13 +196,14 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
onChange={onChange}
supportCollapse
required={schema.required}
canChooseMCPTool={canChooseMCPTool}
/>
)
}
}
}
return <div className='space-y-2'>
<AgentStrategySelector value={strategy} onChange={onStrategyChange} />
<AgentStrategySelector value={strategy} onChange={onStrategyChange} canChooseMCPTool={canChooseMCPTool} />
{
strategy
? <div>
@@ -215,6 +223,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
nodeId={nodeId}
nodeOutputVars={nodeOutputVars || []}
availableNodes={availableNodes || []}
canChooseMCPTool={canChooseMCPTool}
/>
</div>
: <ListEmpty

2
web/app/components/workflow/nodes/_base/components/editor/base.tsx
View File

@@ -76,7 +76,7 @@ const Base: FC<Props> = ({
return (
<Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
<div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', !isFocus ? 'border-transparent bg-components-input-bg-normal' : 'overflow-hidden border-components-input-border-hover bg-components-input-bg-hover')}>
<div className='flex h-7 items-center justify-between pl-3 pr-2 pt-1'>
<div className='system-xs-semibold-uppercase text-text-secondary'>{title}</div>
<div className='flex items-center' onClick={(e) => {

2
web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
View File

@@ -23,7 +23,7 @@ export type Props = {
value?: string | object
placeholder?: React.JSX.Element | string
onChange?: (value: string) => void
title?: React.JSX.Element
title?: string | React.JSX.Element
language: CodeLanguage
headerRight?: React.JSX.Element
readOnly?: boolean

35
web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx Normal file
View File

@@ -0,0 +1,35 @@
'use client'
import type { FC } from 'react'
import cn from '@/utils/classnames'
type Props = {
value: boolean
onChange: (value: boolean) => void
}
const FormInputBoolean: FC<Props> = ({
value,
onChange,
}) => {
return (
<div className='flex w-full space-x-1'>
<div
className={cn(
'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
!value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
)}
onClick={() => onChange(true)}
>True</div>
<div
className={cn(
'system-sm-regular flex h-8 grow cursor-default items-center justify-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
value && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
!value && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
)}
onClick={() => onChange(false)}
>False</div>
</div>
)
}
export default FormInputBoolean

279
web/app/components/workflow/nodes/_base/components/form-input-item.tsx Normal file
View File

@@ -0,0 +1,279 @@
'use client'
import type { FC } from 'react'
import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
import { VarType } from '@/app/components/workflow/types'
import type { ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
import FormInputTypeSwitch from './form-input-type-switch'
import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
import Input from '@/app/components/base/input'
import { SimpleSelect } from '@/app/components/base/select'
import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
import FormInputBoolean from './form-input-boolean'
import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import cn from '@/utils/classnames'
import type { Tool } from '@/app/components/tools/types'
type Props = {
readOnly: boolean
nodeId: string
schema: CredentialFormSchema
value: ToolVarInputs
onChange: (value: any) => void
inPanel?: boolean
currentTool?: Tool
currentProvider?: ToolWithProvider
}
const FormInputItem: FC<Props> = ({
readOnly,
nodeId,
schema,
value,
onChange,
inPanel,
currentTool,
currentProvider,
}) => {
const language = useLanguage()
const {
placeholder,
variable,
type,
default: defaultValue,
options,
scope,
} = schema as any
const varInput = value[variable]
const isString = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
const isNumber = type === FormTypeEnum.textNumber
const isObject = type === FormTypeEnum.object
const isArray = type === FormTypeEnum.array
const isShowJSONEditor = isObject || isArray
const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
const isBoolean = type === FormTypeEnum.boolean
const isSelect = type === FormTypeEnum.select || type === FormTypeEnum.dynamicSelect
const isAppSelector = type === FormTypeEnum.appSelector
const isModelSelector = type === FormTypeEnum.modelSelector
const showTypeSwitch = isNumber || isObject || isArray
const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
const showVariableSelector = isFile || varInput?.type === VarKindType.variable
const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
onlyLeafNodeVar: false,
filterVar: (varPayload: Var) => {
return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
},
})
const targetVarType = () => {
if (isString)
return VarType.string
else if (isNumber)
return VarType.number
else if (type === FormTypeEnum.files)
return VarType.arrayFile
else if (type === FormTypeEnum.file)
return VarType.file
// else if (isSelect)
// return VarType.select
// else if (isAppSelector)
// return VarType.appSelector
// else if (isModelSelector)
// return VarType.modelSelector
// else if (isBoolean)
// return VarType.boolean
else if (isObject)
return VarType.object
else if (isArray)
return VarType.arrayObject
else
return VarType.string
}
const getFilterVar = () => {
if (isNumber)
return (varPayload: any) => varPayload.type === VarType.number
else if (isString)
return (varPayload: any) => [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
else if (isFile)
return (varPayload: any) => [VarType.file, VarType.arrayFile].includes(varPayload.type)
else if (isBoolean)
return (varPayload: any) => varPayload.type === VarType.boolean
else if (isObject)
return (varPayload: any) => varPayload.type === VarType.object
else if (isArray)
return (varPayload: any) => [VarType.array, VarType.arrayString, VarType.arrayNumber, VarType.arrayObject].includes(varPayload.type)
return undefined
}
const getVarKindType = () => {
if (isFile)
return VarKindType.variable
if (isSelect || isBoolean || isNumber || isArray || isObject)
return VarKindType.constant
if (isString)
return VarKindType.mixed
}
const handleTypeChange = (newType: string) => {
if (newType === VarKindType.variable) {
onChange({
...value,
[variable]: {
...varInput,
type: VarKindType.variable,
value: '',
},
})
}
else {
onChange({
...value,
[variable]: {
...varInput,
type: VarKindType.constant,
value: defaultValue,
},
})
}
}
const handleValueChange = (newValue: any) => {
onChange({
...value,
[variable]: {
...varInput,
type: getVarKindType(),
value: isNumber ? Number.parseFloat(newValue) : newValue,
},
})
}
const handleAppOrModelSelect = (newValue: any) => {
onChange({
...value,
[variable]: {
...varInput,
...newValue,
},
})
}
const handleVariableSelectorChange = (newValue: ValueSelector | string, variable: string) => {
onChange({
...value,
[variable]: {
...varInput,
type: VarKindType.variable,
value: newValue || '',
},
})
}
return (
<div className={cn('gap-1', !(isShowJSONEditor && isConstant) && 'flex')}>
{showTypeSwitch && (
<FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange}/>
)}
{isString && (
<MixedVariableTextInput
readOnly={readOnly}
value={varInput?.value as string || ''}
onChange={handleValueChange}
nodesOutputVars={availableVars}
availableNodes={availableNodesWithParent}
/>
)}
{isNumber && isConstant && (
<Input
className='h-8 grow'
type='number'
value={varInput?.value || ''}
onChange={e => handleValueChange(e.target.value)}
placeholder={placeholder?.[language] || placeholder?.en_US}
/>
)}
{isBoolean && (
<FormInputBoolean
value={varInput?.value as boolean}
onChange={handleValueChange}
/>
)}
{isSelect && (
<SimpleSelect
wrapperClassName='h-8 grow'
disabled={readOnly}
defaultValue={varInput?.value}
items={options.filter((option: { show_on: any[] }) => {
if (option.show_on.length)
return option.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value)
return true
}).map((option: { value: any; label: { [x: string]: any; en_US: any } }) => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
onSelect={item => handleValueChange(item.value as string)}
placeholder={placeholder?.[language] || placeholder?.en_US}
/>
)}
{isShowJSONEditor && isConstant && (
<div className='mt-1 w-full'>
<CodeEditor
title='JSON'
value={varInput?.value as any}
isExpand
isInNode
language={CodeLanguage.json}
onChange={handleValueChange}
className='w-full'
placeholder={<div className='whitespace-pre'>{placeholder?.[language] || placeholder?.en_US}</div>}
/>
</div>
)}
{isAppSelector && (
<AppSelector
disabled={readOnly}
scope={scope || 'all'}
value={varInput?.value as any}
onSelect={handleAppOrModelSelect}
/>
)}
{isModelSelector && isConstant && (
<ModelParameterModal
popupClassName='!w-[387px]'
isAdvancedMode
isInWorkflow
value={varInput?.value as any}
setModel={handleAppOrModelSelect}
readonly={readOnly}
scope={scope}
/>
)}
{showVariableSelector && (
<VarReferencePicker
zIndex={inPanel ? 1000 : undefined}
className='h-8 grow'
readonly={readOnly}
isShowNodeName
nodeId={nodeId}
value={varInput?.value || []}
onChange={value => handleVariableSelectorChange(value, variable)}
filterVar={getFilterVar()}
schema={schema}
valueTypePlaceHolder={targetVarType()}
currentTool={currentTool}
currentProvider={currentProvider}
/>
)}
</div>
)
}
export default FormInputItem

47
web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx Normal file
View File

@@ -0,0 +1,47 @@
'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiEditLine,
} from '@remixicon/react'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import Tooltip from '@/app/components/base/tooltip'
import { VarType } from '@/app/components/workflow/nodes/tool/types'
import cn from '@/utils/classnames'
type Props = {
value: VarType
onChange: (value: VarType) => void
}
const FormInputTypeSwitch: FC<Props> = ({
value,
onChange,
}) => {
const { t } = useTranslation()
return (
<div className='inline-flex h-8 shrink-0 gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'>
<Tooltip
popupContent={value === VarType.variable ? '' : t('workflow.nodes.common.typeSwitch.variable')}
>
<div
className={cn('cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover', value === VarType.variable && 'bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg')}
onClick={() => onChange(VarType.variable)}
>
<Variable02 className='h-4 w-4' />
</div>
</Tooltip>
<Tooltip
popupContent={value === VarType.constant ? '' : t('workflow.nodes.common.typeSwitch.input')}
>
<div
className={cn('cursor-pointer rounded-lg px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover', value === VarType.constant && 'bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg')}
onClick={() => onChange(VarType.constant)}
>
<RiEditLine className='h-4 w-4' />
</div>
</Tooltip>
</div>
)
}
export default FormInputTypeSwitch

22
web/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip.tsx Normal file
View File

@@ -0,0 +1,22 @@
'use client'
import Tooltip from '@/app/components/base/tooltip'
import { RiAlertFill } from '@remixicon/react'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
const McpToolNotSupportTooltip: FC = () => {
const { t } = useTranslation()
return (
<Tooltip
popupContent={
<div className='w-[256px]'>
{t('plugin.detailPanel.toolSelector.unsupportedMCPTool')}
</div>
}
>
<RiAlertFill className='size-4 text-text-warning-secondary' />
</Tooltip>
)
}
export default React.memo(McpToolNotSupportTooltip)

2
web/app/components/workflow/nodes/_base/components/setting-item.tsx
View File

@@ -13,7 +13,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
const needTooltip = ['error', 'warning'].includes(status as any)
return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
<div className={classNames('shrink-0 truncate text-text-tertiary system-xs-medium-uppercase', !!children && 'max-w-[100px]')}>
<div className={classNames('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
{label}
</div>
<Tooltip popupContent={tooltip} disabled={!needTooltip}>

1
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View File

@@ -528,6 +528,7 @@ const VarReferencePicker: FC<Props> = ({
onChange={handleVarReferenceChange}
itemWidth={isAddBtnTrigger ? 260 : (minWidth || triggerWidth)}
isSupportFileVar={isSupportFileVar}
zIndex={zIndex}
/>
)}
</PortalToFollowElemContent>

3
web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx
View File

@@ -13,6 +13,7 @@ type Props = {
onChange: (value: ValueSelector, varDetail: Var) => void
itemWidth?: number
isSupportFileVar?: boolean
zIndex?: number
}
const VarReferencePopup: FC<Props> = ({
vars,
@@ -20,6 +21,7 @@ const VarReferencePopup: FC<Props> = ({
onChange,
itemWidth,
isSupportFileVar = true,
zIndex,
}) => {
const { t } = useTranslation()
const docLink = useDocLink()
@@ -60,6 +62,7 @@ const VarReferencePopup: FC<Props> = ({
onChange={onChange}
itemWidth={itemWidth}
isSupportFileVar={isSupportFileVar}
zIndex={zIndex}
/>
}
</div >

7
web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
View File

@@ -46,6 +46,7 @@ type ItemProps = {
isSupportFileVar?: boolean
isException?: boolean
isLoopVar?: boolean
zIndex?: number
}
const objVarTypes = [VarType.object, VarType.file]
@@ -60,6 +61,7 @@ const Item: FC<ItemProps> = ({
isSupportFileVar,
isException,
isLoopVar,
zIndex,
}) => {
const isStructureOutput = itemData.type === VarType.object && (itemData.children as StructuredOutput)?.schema?.properties
const isFile = itemData.type === VarType.file && !isStructureOutput
@@ -171,7 +173,7 @@ const Item: FC<ItemProps> = ({
</div >
</PortalToFollowElemTrigger >
<PortalToFollowElemContent style={{
zIndex: 100,
zIndex: zIndex || 100,
}}>
{(isStructureOutput || isObj) && (
<PickerStructurePanel
@@ -260,6 +262,7 @@ type Props = {
maxHeightClass?: string
onClose?: () => void
onBlur?: () => void
zIndex?: number
autoFocus?: boolean
}
const VarReferenceVars: FC<Props> = ({
@@ -272,6 +275,7 @@ const VarReferenceVars: FC<Props> = ({
maxHeightClass,
onClose,
onBlur,
zIndex,
autoFocus = true,
}) => {
const { t } = useTranslation()
@@ -357,6 +361,7 @@ const VarReferenceVars: FC<Props> = ({
isSupportFileVar={isSupportFileVar}
isException={v.isException}
isLoopVar={item.isLoop}
zIndex={zIndex}
/>
))}
</div>))

6
web/app/components/workflow/nodes/_base/node.tsx
View File

@@ -32,6 +32,7 @@ import {
import { useNodeIterationInteractions } from '../iteration/use-interactions'
import { useNodeLoopInteractions } from '../loop/use-interactions'
import type { IterationNodeType } from '../iteration/types'
import CopyID from '../tool/components/copy-id'
import {
NodeSourceHandle,
NodeTargetHandle,
@@ -321,6 +322,11 @@ const BaseNode: FC<BaseNodeProps> = ({
</div>
)
}
{data.type === BlockEnum.Tool && (
<div className='px-3 pb-2'>
<CopyID content={data.provider_id || ''} />
</div>
)}
</div>
</div>
)

54
web/app/components/workflow/nodes/agent/components/tool-icon.tsx
View File

@@ -2,10 +2,11 @@ import Tooltip from '@/app/components/base/tooltip'
import Indicator from '@/app/components/header/indicator'
import classNames from '@/utils/classnames'
import { memo, useMemo, useRef, useState } from 'react'
import { useAllBuiltInTools, useAllCustomTools, useAllWorkflowTools } from '@/service/use-tools'
import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
import { getIconFromMarketPlace } from '@/utils/get-icon'
import { useTranslation } from 'react-i18next'
import { Group } from '@/app/components/base/icons/src/vender/other'
import AppIcon from '@/app/components/base/app-icon'
type Status = 'not-installed' | 'not-authorized' | undefined
@@ -19,19 +20,21 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
const { data: buildInTools } = useAllBuiltInTools()
const { data: customTools } = useAllCustomTools()
const { data: workflowTools } = useAllWorkflowTools()
const isDataReady = !!buildInTools && !!customTools && !!workflowTools
const { data: mcpTools } = useAllMCPTools()
const isDataReady = !!buildInTools && !!customTools && !!workflowTools && !!mcpTools
const currentProvider = useMemo(() => {
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
return mergedTools.find((toolWithProvider) => {
return toolWithProvider.name === providerName
return toolWithProvider.name === providerName || toolWithProvider.id === providerName
})
}, [buildInTools, customTools, providerName, workflowTools])
}, [buildInTools, customTools, providerName, workflowTools, mcpTools])
const providerNameParts = providerName.split('/')
const author = providerNameParts[0]
const name = providerNameParts[1]
const icon = useMemo(() => {
if (!isDataReady) return ''
if (currentProvider) return currentProvider.icon as string
if (currentProvider) return currentProvider.icon
const iconFromMarketPlace = getIconFromMarketPlace(`${author}/${name}`)
return iconFromMarketPlace
}, [author, currentProvider, name, isDataReady])
@@ -62,19 +65,32 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
)}
ref={containerRef}
>
{(!iconFetchError && isDataReady)
? <img
src={icon}
alt='tool icon'
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
: <Group className="h-3 w-3 opacity-35" />
}
{(() => {
if (iconFetchError || !icon)
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'w-full h-full size-3.5 object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
})()}
{indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
</div>
</Tooltip>

18
web/app/components/workflow/nodes/agent/default.ts
View File

@@ -7,6 +7,7 @@ import { renderI18nObject } from '@/i18n'
const nodeDefault: NodeDefault<AgentNodeType> = {
defaultValue: {
version: '2',
},
getAvailablePrevNodes(isChatMode) {
return isChatMode
@@ -60,15 +61,28 @@ const nodeDefault: NodeDefault<AgentNodeType> = {
const schemas = toolValue.schemas || []
const userSettings = toolValue.settings
const reasoningConfig = toolValue.parameters
const version = payload.version
schemas.forEach((schema: any) => {
if (schema?.required) {
if (schema.form === 'form' && !userSettings[schema.name]?.value) {
if (schema.form === 'form' && !version && !userSettings[schema.name]?.value) {
return {
isValid: false,
errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
}
}
if (schema.form === 'llm' && reasoningConfig[schema.name].auto === 0 && !userSettings[schema.name]?.value) {
if (schema.form === 'form' && version && !userSettings[schema.name]?.value.value) {
return {
isValid: false,
errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
}
}
if (schema.form === 'llm' && !version && reasoningConfig[schema.name].auto === 0 && !reasoningConfig[schema.name]?.value) {
return {
isValid: false,
errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),
}
}
if (schema.form === 'llm' && version && reasoningConfig[schema.name].auto === 0 && !reasoningConfig[schema.name]?.value.value) {
return {
isValid: false,
errorMessage: t('workflow.errorMsg.toolParameterRequired', { field: renderI18nObject(param.label, language), param: renderI18nObject(schema.label, language) }),

2
web/app/components/workflow/nodes/agent/node.tsx
View File

@@ -104,7 +104,7 @@ const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
{t('workflow.nodes.agent.toolbox')}
</GroupLabel>}>
<div className='grid grid-cols-10 gap-0.5'>
{tools.map(tool => <ToolIcon {...tool} key={tool.id} />)}
{tools.map((tool, i) => <ToolIcon {...tool} key={tool.id + i} />)}
</div>
</Group>}
</div>

5
web/app/components/workflow/nodes/agent/panel.tsx
View File

@@ -38,11 +38,11 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
readOnly,
outputSchema,
handleMemoryChange,
canChooseMCPTool,
} = useConfig(props.id, props.data)
const { t } = useTranslation()
const resetEditor = useStore(s => s.setControlPromptEditorRerenderKey)
return <div className='my-2'>
<Field
required
@@ -56,6 +56,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
agent_strategy_label: inputs.agent_strategy_label!,
agent_output_schema: inputs.output_schema,
plugin_unique_identifier: inputs.plugin_unique_identifier!,
meta: inputs.meta,
} : undefined}
onStrategyChange={(strategy) => {
setInputs({
@@ -65,6 +66,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
agent_strategy_label: strategy?.agent_strategy_label,
output_schema: strategy!.agent_output_schema,
plugin_unique_identifier: strategy!.plugin_unique_identifier,
meta: strategy?.meta,
})
resetEditor(Date.now())
}}
@@ -74,6 +76,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
nodeOutputVars={availableVars}
availableNodes={availableNodesWithParent}
nodeId={props.id}
canChooseMCPTool={canChooseMCPTool}
/>
</Field>
<div className='px-4 py-2'>

3
web/app/components/workflow/nodes/agent/types.ts
View File

@@ -1,14 +1,17 @@
import type { CommonNodeType, Memory } from '@/app/components/workflow/types'
import type { ToolVarInputs } from '../tool/types'
import type { PluginMeta } from '@/app/components/plugins/types'
export type AgentNodeType = CommonNodeType & {
agent_strategy_provider_name?: string
agent_strategy_name?: string
agent_strategy_label?: string
agent_parameters?: ToolVarInputs
meta?: PluginMeta
output_schema: Record<string, any>
plugin_unique_identifier?: string
memory?: Memory
version?: string
}
export enum AgentFeature {

45
web/app/components/workflow/nodes/agent/use-config.ts
View File

@@ -6,13 +6,16 @@ import {
useIsChatMode,
useNodesReadOnly,
} from '@/app/components/workflow/hooks'
import { useCallback, useMemo } from 'react'
import { useCallback, useEffect, useMemo } from 'react'
import { type ToolVarInputs, VarType } from '../tool/types'
import { useCheckInstalled, useFetchPluginsInMarketPlaceByIds } from '@/service/use-plugins'
import type { Memory, Var } from '../../types'
import { VarType as VarKindType } from '../../types'
import useAvailableVarList from '../_base/hooks/use-available-var-list'
import produce from 'immer'
import { isSupportMCP } from '@/utils/plugin-version-feature'
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { generateAgentToolValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
export type StrategyStatus = {
plugin: {
@@ -85,11 +88,12 @@ const useConfig = (id: string, payload: AgentNodeType) => {
})
const formData = useMemo(() => {
const paramNameList = (currentStrategy?.parameters || []).map(item => item.name)
return Object.fromEntries(
const res = Object.fromEntries(
Object.entries(inputs.agent_parameters || {}).filter(([name]) => paramNameList.includes(name)).map(([key, value]) => {
return [key, value.value]
}),
)
return res
}, [inputs.agent_parameters, currentStrategy?.parameters])
const onFormChange = (value: Record<string, any>) => {
const res: ToolVarInputs = {}
@@ -105,6 +109,42 @@ const useConfig = (id: string, payload: AgentNodeType) => {
})
}
const formattingToolData = (data: any) => {
const settingValues = generateAgentToolValue(data.settings, toolParametersToFormSchemas(data.schemas.filter((param: { form: string }) => param.form !== 'llm') as any))
const paramValues = generateAgentToolValue(data.parameters, toolParametersToFormSchemas(data.schemas.filter((param: { form: string }) => param.form === 'llm') as any), true)
const res = produce(data, (draft: any) => {
draft.settings = settingValues
draft.parameters = paramValues
})
return res
}
const formattingLegacyData = () => {
if (inputs.version)
return inputs
const newData = produce(inputs, (draft) => {
const schemas = currentStrategy?.parameters || []
Object.keys(draft.agent_parameters || {}).forEach((key) => {
const targetSchema = schemas.find(schema => schema.name === key)
if (targetSchema?.type === FormTypeEnum.toolSelector)
draft.agent_parameters![key].value = formattingToolData(draft.agent_parameters![key].value)
if (targetSchema?.type === FormTypeEnum.multiToolSelector)
draft.agent_parameters![key].value = draft.agent_parameters![key].value.map((tool: any) => formattingToolData(tool))
})
draft.version = '2'
})
return newData
}
// formatting legacy data
useEffect(() => {
if (!currentStrategy)
return
const newData = formattingLegacyData()
setInputs(newData)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentStrategy])
// vars
const filterMemoryPromptVar = useCallback((varPayload: Var) => {
@@ -172,6 +212,7 @@ const useConfig = (id: string, payload: AgentNodeType) => {
outputSchema,
handleMemoryChange,
isChatMode,
canChooseMCPTool: isSupportMCP(inputs.meta?.version),
}
}

4
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts
View File

@@ -6,6 +6,7 @@ import type { EditData } from './edit-card'
import { ArrayType, type Field, Type } from '../../../types'
import Toast from '@/app/components/base/toast'
import { findPropertyWithPath } from '../../../utils'
import _ from 'lodash'
type ChangeEventParams = {
path: string[],
@@ -19,7 +20,8 @@ type AddEventParams = {
}
export const useSchemaNodeOperations = (props: VisualEditorProps) => {
const { schema: jsonSchema, onChange } = props
const { schema: jsonSchema, onChange: doOnChange } = props
const onChange = doOnChange || _.noop
const backupSchema = useVisualEditorStore(state => state.backupSchema)
const setBackupSchema = useVisualEditorStore(state => state.setBackupSchema)
const isAddingNewField = useVisualEditorStore(state => state.isAddingNewField)

13
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
View File

@@ -2,24 +2,29 @@ import type { FC } from 'react'
import type { SchemaRoot } from '../../../types'
import SchemaNode from './schema-node'
import { useSchemaNodeOperations } from './hooks'
import cn from '@/utils/classnames'
export type VisualEditorProps = {
className?: string
schema: SchemaRoot
onChange: (schema: SchemaRoot) => void
rootName?: string
readOnly?: boolean
onChange?: (schema: SchemaRoot) => void
}
const VisualEditor: FC<VisualEditorProps> = (props) => {
const { schema } = props
const { className, schema, readOnly } = props
useSchemaNodeOperations(props)
return (
<div className='h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2'>
<div className={cn('h-full overflow-auto rounded-xl bg-background-section-burn p-1 pl-2', className)}>
<SchemaNode
name='structured_output'
name={props.rootName || 'structured_output'}
schema={schema}
required={false}
path={[]}
depth={0}
readOnly={readOnly}
/>
</div>
)

6
web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
View File

@@ -19,6 +19,7 @@ type SchemaNodeProps = {
path: string[]
parentPath?: string[]
depth: number
readOnly?: boolean
}
// Support 10 levels of indentation
@@ -57,6 +58,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
path,
parentPath,
depth,
readOnly,
}) => {
const [isExpanded, setIsExpanded] = useState(true)
const hoveringProperty = useVisualEditorStore(state => state.hoveringProperty)
@@ -77,11 +79,13 @@ const SchemaNode: FC<SchemaNodeProps> = ({
}
const handleMouseEnter = () => {
if(!readOnly) return
if (advancedEditing || isAddingNewField) return
setHoveringPropertyDebounced(path.join('.'))
}
const handleMouseLeave = () => {
if(!readOnly) return
if (advancedEditing || isAddingNewField) return
setHoveringPropertyDebounced(null)
}
@@ -183,7 +187,7 @@ const SchemaNode: FC<SchemaNodeProps> = ({
)}
{
depth === 0 && !isAddingNewField && (
!readOnly && depth === 0 && !isAddingNewField && (
<AddField />
)
}

51
web/app/components/workflow/nodes/tool/components/copy-id.tsx Normal file
View File

@@ -0,0 +1,51 @@
'use client'
import React, { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { RiFileCopyLine } from '@remixicon/react'
import copy from 'copy-to-clipboard'
import { debounce } from 'lodash-es'
import Tooltip from '@/app/components/base/tooltip'
type Props = {
content: string
}
const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
const CopyFeedbackNew = ({ content }: Props) => {
const { t } = useTranslation()
const [isCopied, setIsCopied] = useState<boolean>(false)
const onClickCopy = debounce(() => {
copy(content)
setIsCopied(true)
}, 100)
const onMouseLeave = debounce(() => {
setIsCopied(false)
}, 100)
return (
<div className='inline-flex pb-0.5' onClick={e => e.stopPropagation()} onMouseLeave={onMouseLeave}>
<Tooltip
popupContent={
(isCopied
? t(`${prefixEmbedded}.copied`)
: t(`${prefixEmbedded}.copy`)) || ''
}
>
<div
className='group/copy flex items-center gap-0.5 '
onClick={onClickCopy}
>
<div
className='system-2xs-regular cursor-pointer text-text-quaternary group-hover:text-text-tertiary'
>{content}</div>
<RiFileCopyLine className='h-3 w-3 text-text-tertiary opacity-0 group-hover/copy:opacity-100' />
</div>
</Tooltip>
</div>
)
}
export default CopyFeedbackNew

62
web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx Normal file
View File

@@ -0,0 +1,62 @@
import {
memo,
} from 'react'
import { useTranslation } from 'react-i18next'
import PromptEditor from '@/app/components/base/prompt-editor'
import Placeholder from './placeholder'
import type {
Node,
NodeOutPutVar,
} from '@/app/components/workflow/types'
import { BlockEnum } from '@/app/components/workflow/types'
import cn from '@/utils/classnames'
type MixedVariableTextInputProps = {
readOnly?: boolean
nodesOutputVars?: NodeOutPutVar[]
availableNodes?: Node[]
value?: string
onChange?: (text: string) => void
}
const MixedVariableTextInput = ({
readOnly = false,
nodesOutputVars,
availableNodes = [],
value = '',
onChange,
}: MixedVariableTextInputProps) => {
const { t } = useTranslation()
return (
<PromptEditor
wrapperClassName={cn(
'w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
)}
className='caret:text-text-accent'
editable={!readOnly}
value={value}
workflowVariableBlock={{
show: true,
variables: nodesOutputVars || [],
workflowNodesMap: availableNodes.reduce((acc, node) => {
acc[node.id] = {
title: node.data.title,
type: node.data.type,
}
if (node.data.type === BlockEnum.Start) {
acc.sys = {
title: t('workflow.blocks.start'),
type: BlockEnum.Start,
}
}
return acc
}, {} as any),
}}
placeholder={<Placeholder />}
onChange={onChange}
/>
)
}
export default memo(MixedVariableTextInput)

51
web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/placeholder.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { FOCUS_COMMAND } from 'lexical'
import { $insertNodes } from 'lexical'
import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
import Badge from '@/app/components/base/badge'
const Placeholder = () => {
const { t } = useTranslation()
const [editor] = useLexicalComposerContext()
const handleInsert = useCallback((text: string) => {
editor.update(() => {
const textNode = new CustomTextNode(text)
$insertNodes([textNode])
})
editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
}, [editor])
return (
<div
className='pointer-events-auto flex h-full w-full cursor-text items-center px-2'
onClick={(e) => {
e.stopPropagation()
handleInsert('')
}}
>
<div className='flex grow items-center'>
{t('workflow.nodes.tool.insertPlaceholder1')}
<div className='system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder'>/</div>
<div
className='system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary'
onClick={((e) => {
e.stopPropagation()
handleInsert('/')
})}
>
{t('workflow.nodes.tool.insertPlaceholder2')}
</div>
</div>
<Badge
className='shrink-0'
text='String'
uppercase={false}
/>
</div>
)
}
export default Placeholder

51
web/app/components/workflow/nodes/tool/components/tool-form/index.tsx Normal file
View File

@@ -0,0 +1,51 @@
'use client'
import type { FC } from 'react'
import type { ToolVarInputs } from '../../types'
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
import ToolFormItem from './item'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import type { Tool } from '@/app/components/tools/types'
type Props = {
readOnly: boolean
nodeId: string
schema: CredentialFormSchema[]
value: ToolVarInputs
onChange: (value: ToolVarInputs) => void
onOpen?: (index: number) => void
inPanel?: boolean
currentTool?: Tool
currentProvider?: ToolWithProvider
}
const ToolForm: FC<Props> = ({
readOnly,
nodeId,
schema,
value,
onChange,
inPanel,
currentTool,
currentProvider,
}) => {
return (
<div className='space-y-1'>
{
schema.map((schema, index) => (
<ToolFormItem
key={index}
readOnly={readOnly}
nodeId={nodeId}
schema={schema}
value={value}
onChange={onChange}
inPanel={inPanel}
currentTool={currentTool}
currentProvider={currentProvider}
/>
))
}
</div>
)
}
export default ToolForm

105
web/app/components/workflow/nodes/tool/components/tool-form/item.tsx Normal file
View File

@@ -0,0 +1,105 @@
'use client'
import type { FC } from 'react'
import {
RiBracesLine,
} from '@remixicon/react'
import type { ToolVarInputs } from '../../types'
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import Button from '@/app/components/base/button'
import Tooltip from '@/app/components/base/tooltip'
import FormInputItem from '@/app/components/workflow/nodes/_base/components/form-input-item'
import { useBoolean } from 'ahooks'
import SchemaModal from '@/app/components/plugins/plugin-detail-panel/tool-selector/schema-modal'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import type { Tool } from '@/app/components/tools/types'
type Props = {
readOnly: boolean
nodeId: string
schema: CredentialFormSchema
value: ToolVarInputs
onChange: (value: ToolVarInputs) => void
inPanel?: boolean
currentTool?: Tool
currentProvider?: ToolWithProvider
}
const ToolFormItem: FC<Props> = ({
readOnly,
nodeId,
schema,
value,
onChange,
inPanel,
currentTool,
currentProvider,
}) => {
const language = useLanguage()
const { name, label, type, required, tooltip, input_schema } = schema
const showSchemaButton = type === FormTypeEnum.object || type === FormTypeEnum.array
const showDescription = type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput
const [isShowSchema, {
setTrue: showSchema,
setFalse: hideSchema,
}] = useBoolean(false)
return (
<div className='space-y-0.5 py-1'>
<div>
<div className='flex h-6 items-center'>
<div className='system-sm-medium text-text-secondary'>{label[language] || label.en_US}</div>
{required && (
<div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>
)}
{!showDescription && tooltip && (
<Tooltip
popupContent={<div className='w-[200px]'>
{tooltip[language] || tooltip.en_US}
</div>}
triggerClassName='ml-1 w-4 h-4'
asChild={false}
/>
)}
{showSchemaButton && (
<>
<div className='system-xs-regular ml-1 mr-0.5 text-text-quaternary'>·</div>
<Button
variant='ghost'
size='small'
onClick={showSchema}
className='system-xs-regular px-1 text-text-tertiary'
>
<RiBracesLine className='mr-1 size-3.5' />
<span>JSON Schema</span>
</Button>
</>
)}
</div>
{showDescription && tooltip && (
<div className='body-xs-regular pb-0.5 text-text-tertiary'>{tooltip[language] || tooltip.en_US}</div>
)}
</div>
<FormInputItem
readOnly={readOnly}
nodeId={nodeId}
schema={schema}
value={value}
onChange={onChange}
inPanel={inPanel}
currentTool={currentTool}
currentProvider={currentProvider}
/>
{isShowSchema && (
<SchemaModal
isShow
onClose={hideSchema}
rootName={name}
schema={input_schema!}
/>
)}
</div>
)
}
export default ToolFormItem

3
web/app/components/workflow/nodes/tool/default.ts
View File

@@ -10,6 +10,7 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
defaultValue: {
tool_parameters: {},
tool_configurations: {},
version: '2',
},
getAvailablePrevNodes(isChatMode: boolean) {
const nodes = isChatMode
@@ -55,6 +56,8 @@ const nodeDefault: NodeDefault<ToolNodeType> = {
const value = payload.tool_configurations[field.variable]
if (!errorMessages && (value === undefined || value === null || value === ''))
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
if (!errorMessages && typeof value === 'object' && !!value.type && (value.value === undefined || value.value === null || value.value === '' || (Array.isArray(value.value) && value.value.length === 0)))
errorMessages = t(`${i18nPrefix}.fieldRequired`, { field: field.label[language] })
})
}

13
web/app/components/workflow/nodes/tool/node.tsx
View File

@@ -21,14 +21,14 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
<div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'>
{key}
</div>
{typeof tool_configurations[key] === 'string' && (
{typeof tool_configurations[key].value === 'string' && (
<div title={tool_configurations[key]} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
{paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key]}
{paramSchemas?.find(i => i.name === key)?.type === FormTypeEnum.secretInput ? '********' : tool_configurations[key].value}
</div>
)}
{typeof tool_configurations[key] === 'number' && (
{typeof tool_configurations[key].value === 'number' && (
<div title={tool_configurations[key].toString()} className='w-0 shrink-0 grow truncate text-right text-xs font-normal text-text-secondary'>
{tool_configurations[key]}
{tool_configurations[key].value}
</div>
)}
{typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.modelSelector && (
@@ -36,11 +36,6 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
{tool_configurations[key].model}
</div>
)}
{/* {typeof tool_configurations[key] !== 'string' && tool_configurations[key]?.type === FormTypeEnum.appSelector && (
<div title={tool_configurations[key].app_id} className='grow w-0 shrink-0 truncate text-right text-xs font-normal text-gray-700'>
{tool_configurations[key].app_id}
</div>
)} */}
</div>
))}

52
web/app/components/workflow/nodes/tool/panel.tsx
View File

@@ -4,11 +4,10 @@ import { useTranslation } from 'react-i18next'
import Split from '../_base/components/split'
import type { ToolNodeType } from './types'
import useConfig from './use-config'
import InputVarList from './components/input-var-list'
import ToolForm from './components/tool-form'
import Button from '@/app/components/base/button'
import Field from '@/app/components/workflow/nodes/_base/components/field'
import type { NodePanelProps } from '@/app/components/workflow/types'
import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
import Loading from '@/app/components/base/loading'
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -28,8 +27,6 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
inputs,
toolInputVarSchema,
setInputVar,
handleOnVarOpen,
filterVar,
toolSettingSchema,
toolSettingValue,
setToolSettingValue,
@@ -45,6 +42,8 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
currTool,
} = useConfig(id, data)
const [collapsed, setCollapsed] = React.useState(false)
if (isLoading) {
return <div className='flex h-[200px] items-center justify-center'>
<Loading />
@@ -66,21 +65,19 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
</div>
</>
)}
{!isShowAuthBtn && <>
<div className='space-y-4 px-4'>
{!isShowAuthBtn && (
<div className='relative'>
{toolInputVarSchema.length > 0 && (
<Field
className='px-4'
title={t(`${i18nPrefix}.inputVars`)}
>
<InputVarList
<ToolForm
readOnly={readOnly}
nodeId={id}
schema={toolInputVarSchema as any}
value={inputs.tool_parameters}
onChange={setInputVar}
filterVar={filterVar}
isSupportConstantValue
onOpen={handleOnVarOpen}
currentProvider={currCollection}
currentTool={currTool}
/>
@@ -88,24 +85,29 @@ const Panel: FC<NodePanelProps<ToolNodeType>> = ({
)}
{toolInputVarSchema.length > 0 && toolSettingSchema.length > 0 && (
<Split />
<Split className='mt-1' />
)}
<Form
className='space-y-4'
itemClassName='!py-0'
fieldLabelClassName='!text-[13px] !font-semibold !text-text-secondary uppercase'
value={toolSettingValue}
onChange={setToolSettingValue}
formSchemas={toolSettingSchema as any}
isEditMode={false}
showOnVariableMap={{}}
validating={false}
// inputClassName='!bg-gray-50'
readonly={readOnly}
/>
{toolSettingSchema.length > 0 && (
<>
<OutputVars
title={t(`${i18nPrefix}.settings`)}
collapsed={collapsed}
onCollapse={setCollapsed}
>
<ToolForm
readOnly={readOnly}
nodeId={id}
schema={toolSettingSchema as any}
value={toolSettingValue}
onChange={setToolSettingValue}
/>
</OutputVars>
<Split />
</>
)}
</div>
</>}
)}
{showSetAuth && (
<ConfigCredential

1
web/app/components/workflow/nodes/tool/types.ts
View File

@@ -22,4 +22,5 @@ export type ToolNodeType = CommonNodeType & {
tool_configurations: Record<string, any>
output_schema: Record<string, any>
paramSchemas?: Record<string, any>[]
version?: string
}

67
web/app/components/workflow/nodes/tool/use-config.ts
View File

@@ -8,10 +8,12 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
import { CollectionType } from '@/app/components/tools/types'
import { updateBuiltInToolCredential } from '@/service/tools'
import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
import {
getConfiguredValue,
toolParametersToFormSchemas,
} from '@/app/components/tools/utils/to-form-schema'
import Toast from '@/app/components/base/toast'
import { VarType as VarVarType } from '@/app/components/workflow/types'
import type { InputVar, Var } from '@/app/components/workflow/types'
import type { InputVar } from '@/app/components/workflow/types'
import {
useFetchToolsData,
useNodesReadOnly,
@@ -26,17 +28,18 @@ const useConfig = (id: string, payload: ToolNodeType) => {
const language = useLanguage()
const { inputs, setInputs: doSetInputs } = useNodeCrud<ToolNodeType>(id, payload)
/*
* tool_configurations: tool setting, not dynamic setting
* tool_parameters: tool dynamic setting(by user)
* tool_configurations: tool setting, not dynamic setting (form type = form)
* tool_parameters: tool dynamic setting(form type = llm)
* output_schema: tool dynamic output
*/
const { provider_id, provider_type, tool_name, tool_configurations, output_schema } = inputs
const { provider_id, provider_type, tool_name, tool_configurations, output_schema, tool_parameters } = inputs
const isBuiltIn = provider_type === CollectionType.builtIn
const buildInTools = useStore(s => s.buildInTools)
const customTools = useStore(s => s.customTools)
const workflowTools = useStore(s => s.workflowTools)
const mcpTools = useStore(s => s.mcpTools)
const currentTools = (() => {
const currentTools = useMemo(() => {
switch (provider_type) {
case CollectionType.builtIn:
return buildInTools
@@ -44,10 +47,12 @@ const useConfig = (id: string, payload: ToolNodeType) => {
return customTools
case CollectionType.workflow:
return workflowTools
case CollectionType.mcp:
return mcpTools
default:
return []
}
})()
}, [buildInTools, customTools, mcpTools, provider_type, workflowTools])
const currCollection = currentTools.find(item => canFindTool(item.id, provider_id))
// Auth
@@ -91,10 +96,10 @@ const useConfig = (id: string, payload: ToolNodeType) => {
const value = newConfig[key]
if (schema?.type === 'boolean') {
if (typeof value === 'string')
newConfig[key] = Number.parseInt(value, 10)
newConfig[key] = value === 'true' || value === '1'
if (typeof value === 'boolean')
newConfig[key] = value ? 1 : 0
if (typeof value === 'number')
newConfig[key] = value === 1
}
if (schema?.type === 'number-input') {
@@ -107,12 +112,11 @@ const useConfig = (id: string, payload: ToolNodeType) => {
doSetInputs(newInputs)
}, [doSetInputs, formSchemas, hasShouldTransferTypeSettingInput])
const [notSetDefaultValue, setNotSetDefaultValue] = useState(false)
const toolSettingValue = (() => {
const toolSettingValue = useMemo(() => {
if (notSetDefaultValue)
return tool_configurations
return addDefaultValue(tool_configurations, toolSettingSchema)
})()
return getConfiguredValue(tool_configurations, toolSettingSchema)
}, [notSetDefaultValue, toolSettingSchema, tool_configurations])
const setToolSettingValue = useCallback((value: Record<string, any>) => {
setNotSetDefaultValue(true)
setInputs({
@@ -121,16 +125,20 @@ const useConfig = (id: string, payload: ToolNodeType) => {
})
}, [inputs, setInputs])
const formattingParameters = () => {
const inputsWithDefaultValue = produce(inputs, (draft) => {
if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
draft.tool_configurations = getConfiguredValue(tool_configurations, toolSettingSchema)
if (!draft.tool_parameters || Object.keys(draft.tool_parameters).length === 0)
draft.tool_parameters = getConfiguredValue(tool_parameters, toolInputVarSchema)
})
return inputsWithDefaultValue
}
useEffect(() => {
if (!currTool)
return
const inputsWithDefaultValue = produce(inputs, (draft) => {
if (!draft.tool_configurations || Object.keys(draft.tool_configurations).length === 0)
draft.tool_configurations = addDefaultValue(tool_configurations, toolSettingSchema)
if (!draft.tool_parameters)
draft.tool_parameters = {}
})
const inputsWithDefaultValue = formattingParameters()
setInputs(inputsWithDefaultValue)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currTool])
@@ -143,19 +151,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
})
}, [inputs, setInputs])
const [currVarIndex, setCurrVarIndex] = useState(-1)
const currVarType = toolInputVarSchema[currVarIndex]?._type
const handleOnVarOpen = useCallback((index: number) => {
setCurrVarIndex(index)
}, [])
const filterVar = useCallback((varPayload: Var) => {
if (currVarType)
return varPayload.type === currVarType
return varPayload.type !== VarVarType.arrayFile
}, [currVarType])
const isLoading = currTool && (isBuiltIn ? !currCollection : false)
const getMoreDataForCheckValid = () => {
@@ -220,8 +215,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
setToolSettingValue,
toolInputVarSchema,
setInputVar,
handleOnVarOpen,
filterVar,
currCollection,
isShowAuthBtn,
showSetAuth,

12
web/app/components/workflow/nodes/tool/use-single-run-form-params.ts
View File

@@ -34,7 +34,12 @@ const useSingleRunFormParams = ({
const hadVarParams = Object.keys(inputs.tool_parameters)
.filter(key => inputs.tool_parameters[key].type !== VarType.constant)
.map(k => inputs.tool_parameters[k])
const varInputs = getInputVars(hadVarParams.map((p) => {
const hadVarSettings = Object.keys(inputs.tool_configurations)
.filter(key => typeof inputs.tool_configurations[key] === 'object' && inputs.tool_configurations[key].type && inputs.tool_configurations[key].type !== VarType.constant)
.map(k => inputs.tool_configurations[k])
const varInputs = getInputVars([...hadVarParams, ...hadVarSettings].map((p) => {
if (p.type === VarType.variable) {
// handle the old wrong value not crash the page
if (!(p.value as any).join)
@@ -55,8 +60,11 @@ const useSingleRunFormParams = ({
const res = produce(inputVarValues, (draft) => {
Object.keys(inputs.tool_parameters).forEach((key: string) => {
const { type, value } = inputs.tool_parameters[key]
if (type === VarType.constant && (value === undefined || value === null))
if (type === VarType.constant && (value === undefined || value === null)) {
if(!draft.tool_parameters || !draft.tool_parameters[key])
return
draft[key] = value
}
})
})
return res