mirror of
https://github.com/langgenius/dify.git
synced 2026-05-06 02:18:08 +08:00
merge
This commit is contained in:
Joel
@ -0,0 +1,8 @@
|
||||
export { default as ReasoningConfigForm } from './reasoning-config-form'
|
||||
export { default as SchemaModal } from './schema-modal'
|
||||
export { default as ToolAuthorizationSection } from './tool-authorization-section'
|
||||
export { default as ToolBaseForm } from './tool-base-form'
|
||||
export { default as ToolCredentialsForm } from './tool-credentials-form'
|
||||
export { default as ToolItem } from './tool-item'
|
||||
export { default as ToolSettingsPanel } from './tool-settings-panel'
|
||||
export { default as ToolTrigger } from './tool-trigger'
|
||||
@ -0,0 +1,407 @@
|
||||
import type { Node } from 'reactflow'
|
||||
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import type { ToolFormSchema } from '@/app/components/tools/utils/to-form-schema'
|
||||
import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
|
||||
import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
|
||||
import type {
|
||||
NodeOutPutVar,
|
||||
ValueSelector,
|
||||
Var,
|
||||
} from '@/app/components/workflow/types'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
RiBracesLine,
|
||||
} from '@remixicon/react'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import { produce } from 'immer'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { SimpleSelect } from '@/app/components/base/select'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
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 AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
|
||||
import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import FormInputBoolean from '@/app/components/workflow/nodes/_base/components/form-input-boolean'
|
||||
import FormInputTypeSwitch from '@/app/components/workflow/nodes/_base/components/form-input-type-switch'
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
|
||||
import MixedVariableTextInput from '@/app/components/workflow/nodes/tool/components/mixed-variable-text-input'
|
||||
import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import SchemaModal from './schema-modal'
|
||||
|
||||
type ReasoningConfigInputValue = {
|
||||
type?: VarKindType
|
||||
value?: unknown
|
||||
} | null
|
||||
|
||||
type ReasoningConfigInput = {
|
||||
value: ReasoningConfigInputValue
|
||||
auto?: 0 | 1
|
||||
}
|
||||
|
||||
export type ReasoningConfigValue = Record<string, ReasoningConfigInput>
|
||||
|
||||
type Props = {
|
||||
value: ReasoningConfigValue
|
||||
onChange: (val: ReasoningConfigValue) => void
|
||||
schemas: ToolFormSchema[]
|
||||
nodeOutputVars: NodeOutPutVar[]
|
||||
availableNodes: Node[]
|
||||
nodeId: string
|
||||
disableVariableReference?: boolean
|
||||
}
|
||||
|
||||
const ReasoningConfigForm: React.FC<Props> = ({
|
||||
value,
|
||||
onChange,
|
||||
schemas,
|
||||
nodeOutputVars = [],
|
||||
availableNodes = [],
|
||||
nodeId,
|
||||
disableVariableReference = false,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const language = useLanguage()
|
||||
const allowVariableReference = !disableVariableReference && !!nodeId
|
||||
const getVarKindType = (type: string) => {
|
||||
if (type === FormTypeEnum.file || type === FormTypeEnum.files)
|
||||
return VarKindType.variable
|
||||
if (type === FormTypeEnum.select || type === FormTypeEnum.checkbox || type === FormTypeEnum.textNumber || type === FormTypeEnum.array || type === FormTypeEnum.object)
|
||||
return VarKindType.constant
|
||||
if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
|
||||
return VarKindType.mixed
|
||||
}
|
||||
|
||||
// eslint-disable-next-line ts/no-explicit-any
|
||||
const handleAutomatic = (key: string, val: any, type: FormTypeEnum) => {
|
||||
if (type === FormTypeEnum.modelSelector)
|
||||
return
|
||||
onChange({
|
||||
...value,
|
||||
[key]: {
|
||||
value: val ? null : { type: getVarKindType(type), value: null },
|
||||
auto: val ? 1 : 0,
|
||||
},
|
||||
})
|
||||
}
|
||||
const handleTypeChange = useCallback((variable: string, defaultValue: unknown) => {
|
||||
return (newType: VarKindType) => {
|
||||
const res = produce(value, (draft: ToolVarInputs) => {
|
||||
draft[variable].value = {
|
||||
type: newType,
|
||||
value: newType === VarKindType.variable ? '' : defaultValue,
|
||||
}
|
||||
})
|
||||
onChange(res)
|
||||
}
|
||||
}, [onChange, value])
|
||||
const handleValueChange = useCallback((variable: string, varType: string) => {
|
||||
return (newValue: unknown) => {
|
||||
const res = produce(value, (draft: ToolVarInputs) => {
|
||||
draft[variable].value = {
|
||||
type: getVarKindType(varType),
|
||||
value: newValue,
|
||||
}
|
||||
})
|
||||
onChange(res)
|
||||
}
|
||||
}, [onChange, value])
|
||||
const handleAppChange = useCallback((variable: string) => {
|
||||
return (app: {
|
||||
app_id: string
|
||||
inputs: Record<string, unknown>
|
||||
files?: unknown[]
|
||||
}) => {
|
||||
const newValue = produce(value, (draft: ToolVarInputs) => {
|
||||
draft[variable].value = app
|
||||
})
|
||||
onChange(newValue)
|
||||
}
|
||||
}, [onChange, value])
|
||||
const handleModelChange = useCallback((variable: string) => {
|
||||
return (model: Record<string, unknown>) => {
|
||||
const newValue = produce(value, (draft: ToolVarInputs) => {
|
||||
const currentValue = draft[variable].value as Record<string, unknown> | undefined
|
||||
draft[variable].value = {
|
||||
...currentValue,
|
||||
...model,
|
||||
}
|
||||
})
|
||||
onChange(newValue)
|
||||
}
|
||||
}, [onChange, value])
|
||||
const handleVariableSelectorChange = useCallback((variable: string) => {
|
||||
return (newValue: ValueSelector | string) => {
|
||||
const res = produce(value, (draft: ToolVarInputs) => {
|
||||
draft[variable].value = {
|
||||
type: VarKindType.variable,
|
||||
value: newValue,
|
||||
}
|
||||
})
|
||||
onChange(res)
|
||||
}
|
||||
}, [onChange, value])
|
||||
|
||||
const [isShowSchema, {
|
||||
setTrue: showSchema,
|
||||
setFalse: hideSchema,
|
||||
}] = useBoolean(false)
|
||||
|
||||
const [schema, setSchema] = useState<SchemaRoot | null>(null)
|
||||
const [schemaRootName, setSchemaRootName] = useState<string>('')
|
||||
|
||||
const renderField = (schema: ToolFormSchema, showSchema: (schema: SchemaRoot, rootName: string) => void) => {
|
||||
const {
|
||||
default: defaultValue,
|
||||
variable,
|
||||
label,
|
||||
required,
|
||||
tooltip,
|
||||
type,
|
||||
scope,
|
||||
url,
|
||||
input_schema,
|
||||
placeholder,
|
||||
options,
|
||||
} = schema
|
||||
const canUseAuto = ![FormTypeEnum.modelSelector, FormTypeEnum.appSelector].includes(type as FormTypeEnum)
|
||||
const auto = canUseAuto ? value[variable]?.auto : 0
|
||||
const tooltipContent = (tooltip && (
|
||||
<Tooltip
|
||||
popupContent={(
|
||||
<div className="w-[200px]">
|
||||
{tooltip[language] || tooltip.en_US}
|
||||
</div>
|
||||
)}
|
||||
triggerClassName="ml-0.5 w-4 h-4"
|
||||
asChild={false}
|
||||
/>
|
||||
))
|
||||
const varInput = value[variable].value
|
||||
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.checkbox
|
||||
const isSelect = type === FormTypeEnum.select
|
||||
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 = allowVariableReference && (isFile || varInput?.type === VarKindType.variable)
|
||||
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 (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: Var) => varPayload.type === VarType.number
|
||||
else if (isString)
|
||||
return (varPayload: Var) => [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
|
||||
else if (isFile)
|
||||
return (varPayload: Var) => [VarType.file, VarType.arrayFile].includes(varPayload.type)
|
||||
else if (isBoolean)
|
||||
return (varPayload: Var) => varPayload.type === VarType.boolean
|
||||
else if (isObject)
|
||||
return (varPayload: Var) => varPayload.type === VarType.object
|
||||
else if (isArray)
|
||||
return (varPayload: Var) => [VarType.array, VarType.arrayString, VarType.arrayNumber, VarType.arrayObject].includes(varPayload.type)
|
||||
return undefined
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={variable} className="space-y-0.5">
|
||||
<div className="system-sm-semibold flex items-center justify-between py-2 text-text-secondary">
|
||||
<div className="flex items-center">
|
||||
<span className={cn('code-sm-semibold max-w-[140px] truncate text-text-secondary')} title={label[language] || label.en_US}>{label[language] || label.en_US}</span>
|
||||
{required && (
|
||||
<span className="ml-1 text-red-500">*</span>
|
||||
)}
|
||||
{tooltipContent}
|
||||
<span className="system-xs-regular mx-1 text-text-quaternary">·</span>
|
||||
<span className="system-xs-regular text-text-tertiary">{targetVarType()}</span>
|
||||
{isShowJSONEditor && (
|
||||
<Tooltip
|
||||
popupContent={(
|
||||
<div className="system-xs-medium text-text-secondary">
|
||||
{t('nodes.agent.clickToViewParameterSchema', { ns: 'workflow' })}
|
||||
</div>
|
||||
)}
|
||||
asChild={false}
|
||||
>
|
||||
<div
|
||||
className="ml-0.5 cursor-pointer rounded-[4px] p-px text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
|
||||
onClick={() => showSchema(input_schema as SchemaRoot, label[language] || label.en_US)}
|
||||
>
|
||||
<RiBracesLine className="size-3.5" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
</div>
|
||||
{canUseAuto && (
|
||||
<div className="flex cursor-pointer items-center gap-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter px-2 py-1 hover:bg-state-base-hover" onClick={() => handleAutomatic(variable, !auto, type as FormTypeEnum)}>
|
||||
<span className="system-xs-medium text-text-secondary">{t('detailPanel.toolSelector.auto', { ns: 'plugin' })}</span>
|
||||
<Switch
|
||||
size="xs"
|
||||
defaultValue={!!auto}
|
||||
onChange={val => handleAutomatic(variable, val, type as FormTypeEnum)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{auto === 0 && (
|
||||
<div className={cn('gap-1', !(isShowJSONEditor && isConstant) && 'flex')}>
|
||||
{showTypeSwitch && (
|
||||
<FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange(variable, defaultValue)} />
|
||||
)}
|
||||
{isString && allowVariableReference && (
|
||||
<MixedVariableTextInput
|
||||
value={varInput?.value as string || ''}
|
||||
onChange={handleValueChange(variable, type)}
|
||||
nodesOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
/>
|
||||
)}
|
||||
{isString && !allowVariableReference && (
|
||||
<Input
|
||||
className="h-8 grow"
|
||||
value={varInput?.value as string || ''}
|
||||
onChange={e => handleValueChange(variable, type as FormTypeEnum)(e.target.value)}
|
||||
placeholder={placeholder?.[language] || placeholder?.en_US}
|
||||
/>
|
||||
)}
|
||||
{isNumber && isConstant && (
|
||||
<Input
|
||||
className="h-8 grow"
|
||||
type="number"
|
||||
value={(varInput?.value as string | number) || ''}
|
||||
onChange={e => handleValueChange(variable, type)(e.target.value)}
|
||||
placeholder={placeholder?.[language] || placeholder?.en_US}
|
||||
/>
|
||||
)}
|
||||
{isBoolean && (
|
||||
<FormInputBoolean
|
||||
value={varInput?.value as boolean}
|
||||
onChange={handleValueChange(variable, type)}
|
||||
/>
|
||||
)}
|
||||
{isSelect && options && (
|
||||
<SimpleSelect
|
||||
wrapperClassName="h-8 grow"
|
||||
defaultValue={varInput?.value as string | number | undefined}
|
||||
items={options.filter((option) => {
|
||||
if (option.show_on.length)
|
||||
return option.show_on.every(showOnItem => value[showOnItem.variable]?.value?.value === showOnItem.value)
|
||||
|
||||
return true
|
||||
}).map(option => ({ value: option.value, name: option.label[language] || option.label.en_US }))}
|
||||
onSelect={item => handleValueChange(variable, type)(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 string}
|
||||
isExpand
|
||||
isInNode
|
||||
height={100}
|
||||
language={CodeLanguage.json}
|
||||
onChange={handleValueChange(variable, type)}
|
||||
className="w-full"
|
||||
placeholder={<div className="whitespace-pre">{placeholder?.[language] || placeholder?.en_US}</div>}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{isAppSelector && (
|
||||
<AppSelector
|
||||
disabled={false}
|
||||
scope={scope || 'all'}
|
||||
value={varInput as { app_id: string, inputs: Record<string, unknown>, files?: unknown[] } | undefined}
|
||||
onSelect={handleAppChange(variable)}
|
||||
/>
|
||||
)}
|
||||
{isModelSelector && (
|
||||
<ModelParameterModal
|
||||
popupClassName="!w-[387px]"
|
||||
isAdvancedMode
|
||||
isInWorkflow
|
||||
value={varInput}
|
||||
setModel={handleModelChange(variable)}
|
||||
scope={scope}
|
||||
/>
|
||||
)}
|
||||
{showVariableSelector && (
|
||||
<VarReferencePicker
|
||||
zIndex={1001}
|
||||
className="h-8 grow"
|
||||
readonly={false}
|
||||
isShowNodeName
|
||||
nodeId={nodeId || ''}
|
||||
value={(varInput?.value as string | ValueSelector) || []}
|
||||
onChange={handleVariableSelectorChange(variable)}
|
||||
filterVar={getFilterVar()}
|
||||
schema={schema as Partial<CredentialFormSchema>}
|
||||
valueTypePlaceHolder={targetVarType()}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{url && (
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center text-xs text-text-accent"
|
||||
>
|
||||
{t('howToGet', { ns: 'tools' })}
|
||||
<RiArrowRightUpLine className="ml-1 h-3 w-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className="space-y-3 px-4 py-2">
|
||||
{!isShowSchema && schemas.map(schema => renderField(schema, (s: SchemaRoot, rootName: string) => {
|
||||
setSchema(s)
|
||||
setSchemaRootName(rootName)
|
||||
showSchema()
|
||||
}))}
|
||||
{isShowSchema && (
|
||||
<SchemaModal
|
||||
isShow={isShowSchema}
|
||||
schema={schema!}
|
||||
rootName={schemaRootName}
|
||||
onClose={hideSchema}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReasoningConfigForm
|
||||
@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import * as React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import VisualEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor'
|
||||
import { MittProvider, VisualEditorContextProvider } from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context'
|
||||
|
||||
type Props = {
|
||||
isShow: boolean
|
||||
schema: SchemaRoot
|
||||
rootName: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const SchemaModal: FC<Props> = ({
|
||||
isShow,
|
||||
schema,
|
||||
rootName,
|
||||
onClose,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Modal
|
||||
isShow={isShow}
|
||||
onClose={onClose}
|
||||
className="max-w-[960px] p-0"
|
||||
wrapperClassName="z-[9999]"
|
||||
>
|
||||
<div className="pb-6">
|
||||
{/* Header */}
|
||||
<div className="relative flex p-6 pb-3 pr-14">
|
||||
<div className="title-2xl-semi-bold grow truncate text-text-primary">
|
||||
{t('nodes.agent.parameterSchema', { ns: 'workflow' })}
|
||||
</div>
|
||||
<div className="absolute right-5 top-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
|
||||
<RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="flex max-h-[700px] overflow-y-auto px-6 py-2">
|
||||
<MittProvider>
|
||||
<VisualEditorContextProvider>
|
||||
<VisualEditor
|
||||
className="w-full"
|
||||
schema={schema}
|
||||
rootName={rootName}
|
||||
readOnly
|
||||
>
|
||||
</VisualEditor>
|
||||
</VisualEditorContextProvider>
|
||||
</MittProvider>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
export default React.memo(SchemaModal)
|
||||
@ -0,0 +1,48 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import {
|
||||
AuthCategory,
|
||||
PluginAuthInAgent,
|
||||
} from '@/app/components/plugins/plugin-auth'
|
||||
import { CollectionType } from '@/app/components/tools/types'
|
||||
|
||||
type ToolAuthorizationSectionProps = {
|
||||
currentProvider?: ToolWithProvider
|
||||
credentialId?: string
|
||||
onAuthorizationItemClick: (id: string) => void
|
||||
}
|
||||
|
||||
const ToolAuthorizationSection: FC<ToolAuthorizationSectionProps> = ({
|
||||
currentProvider,
|
||||
credentialId,
|
||||
onAuthorizationItemClick,
|
||||
}) => {
|
||||
// Only show for built-in providers that allow deletion
|
||||
const shouldShow = currentProvider
|
||||
&& currentProvider.type === CollectionType.builtIn
|
||||
&& currentProvider.allow_delete
|
||||
|
||||
if (!shouldShow)
|
||||
return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider className="my-1 w-full" />
|
||||
<div className="px-4 py-2">
|
||||
<PluginAuthInAgent
|
||||
pluginPayload={{
|
||||
provider: currentProvider.name,
|
||||
category: AuthCategory.tool,
|
||||
providerType: currentProvider.type,
|
||||
}}
|
||||
credentialId={credentialId}
|
||||
onAuthorizationItemClick={onAuthorizationItemClick}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToolAuthorizationSection
|
||||
@ -0,0 +1,98 @@
|
||||
'use client'
|
||||
import type { OffsetOptions } from '@floating-ui/react'
|
||||
import type { FC } from 'react'
|
||||
import type { PluginDetail } from '@/app/components/plugins/types'
|
||||
import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
|
||||
import { ReadmeEntrance } from '../../../readme-panel/entrance'
|
||||
import ToolTrigger from './tool-trigger'
|
||||
|
||||
type ToolBaseFormProps = {
|
||||
value?: ToolValue
|
||||
currentProvider?: ToolWithProvider
|
||||
offset?: OffsetOptions
|
||||
scope?: string
|
||||
selectedTools?: ToolValue[]
|
||||
isShowChooseTool: boolean
|
||||
panelShowState?: boolean
|
||||
hasTrigger: boolean
|
||||
onShowChange: (show: boolean) => void
|
||||
onPanelShowStateChange?: (state: boolean) => void
|
||||
onSelectTool: (tool: ToolDefaultValue) => void
|
||||
onSelectMultipleTool: (tools: ToolDefaultValue[]) => void
|
||||
onDescriptionChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
|
||||
}
|
||||
|
||||
const ToolBaseForm: FC<ToolBaseFormProps> = ({
|
||||
value,
|
||||
currentProvider,
|
||||
offset = 4,
|
||||
scope,
|
||||
selectedTools,
|
||||
isShowChooseTool,
|
||||
panelShowState,
|
||||
hasTrigger,
|
||||
onShowChange,
|
||||
onPanelShowStateChange,
|
||||
onSelectTool,
|
||||
onSelectMultipleTool,
|
||||
onDescriptionChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 px-4 py-2">
|
||||
{/* Tool picker */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
|
||||
{t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
|
||||
{currentProvider?.plugin_unique_identifier && (
|
||||
<ReadmeEntrance
|
||||
pluginDetail={currentProvider as unknown as PluginDetail}
|
||||
showShortTip
|
||||
className="pb-0"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<ToolPicker
|
||||
placement="bottom"
|
||||
offset={offset}
|
||||
trigger={(
|
||||
<ToolTrigger
|
||||
open={panelShowState || isShowChooseTool}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
)}
|
||||
isShow={panelShowState || isShowChooseTool}
|
||||
onShowChange={hasTrigger ? (onPanelShowStateChange || (() => {})) : onShowChange}
|
||||
disabled={false}
|
||||
supportAddCustomTool
|
||||
onSelect={onSelectTool}
|
||||
onSelectMultiple={onSelectMultipleTool}
|
||||
scope={scope}
|
||||
selectedTools={selectedTools}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="system-sm-semibold flex h-6 items-center text-text-secondary">
|
||||
{t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}
|
||||
</div>
|
||||
<Textarea
|
||||
className="resize-none"
|
||||
placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
|
||||
value={value?.extra?.description || ''}
|
||||
onChange={onDescriptionChange}
|
||||
disabled={!value?.provider_name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToolBaseForm
|
||||
@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { Collection } from '@/app/components/tools/types'
|
||||
import type { ToolCredentialFormSchema } from '@/app/components/tools/utils/to-form-schema'
|
||||
import {
|
||||
RiArrowRightUpLine,
|
||||
} from '@remixicon/react'
|
||||
@ -19,7 +20,7 @@ import { cn } from '@/utils/classnames'
|
||||
type Props = {
|
||||
collection: Collection
|
||||
onCancel: () => void
|
||||
onSaved: (value: Record<string, any>) => void
|
||||
onSaved: (value: Record<string, unknown>) => void
|
||||
}
|
||||
|
||||
const ToolCredentialForm: FC<Props> = ({
|
||||
@ -29,9 +30,9 @@ const ToolCredentialForm: FC<Props> = ({
|
||||
}) => {
|
||||
const getValueFromI18nObject = useRenderI18nObject()
|
||||
const { t } = useTranslation()
|
||||
const [credentialSchema, setCredentialSchema] = useState<any>(null)
|
||||
const [credentialSchema, setCredentialSchema] = useState<ToolCredentialFormSchema[] | null>(null)
|
||||
const { name: collectionName } = collection
|
||||
const [tempCredential, setTempCredential] = React.useState<any>({})
|
||||
const [tempCredential, setTempCredential] = React.useState<Record<string, unknown>>({})
|
||||
useEffect(() => {
|
||||
fetchBuiltInToolCredentialSchema(collectionName).then(async (res) => {
|
||||
const toolCredentialSchemas = toolCredentialToFormSchemas(res)
|
||||
@ -44,6 +45,8 @@ const ToolCredentialForm: FC<Props> = ({
|
||||
}, [])
|
||||
|
||||
const handleSave = () => {
|
||||
if (!credentialSchema)
|
||||
return
|
||||
for (const field of credentialSchema) {
|
||||
if (field.required && !tempCredential[field.name]) {
|
||||
Toast.notify({ type: 'error', message: t('errorMsg.fieldRequired', { ns: 'common', field: getValueFromI18nObject(field.label) }) })
|
||||
@ -22,7 +22,7 @@ import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/compo
|
||||
import { cn } from '@/utils/classnames'
|
||||
|
||||
type Props = {
|
||||
icon?: any
|
||||
icon?: string | { content?: string, background?: string }
|
||||
providerName?: string
|
||||
isMCPTool?: boolean
|
||||
providerShowName?: string
|
||||
@ -33,7 +33,7 @@ type Props = {
|
||||
onDelete?: () => void
|
||||
noAuth?: boolean
|
||||
isError?: boolean
|
||||
errorTip?: any
|
||||
errorTip?: React.ReactNode
|
||||
uninstalled?: boolean
|
||||
installInfo?: string
|
||||
onInstall?: () => void
|
||||
@ -0,0 +1,157 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import type { Node } from 'reactflow'
|
||||
import type { TabType } from '../hooks/use-tool-selector-state'
|
||||
import type { ReasoningConfigValue } from './reasoning-config-form'
|
||||
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import type { ToolFormSchema } from '@/app/components/tools/utils/to-form-schema'
|
||||
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
|
||||
import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import TabSlider from '@/app/components/base/tab-slider-plain'
|
||||
import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
|
||||
import ReasoningConfigForm from './reasoning-config-form'
|
||||
|
||||
type ToolSettingsPanelProps = {
|
||||
value?: ToolValue
|
||||
currentProvider?: ToolWithProvider
|
||||
nodeId: string
|
||||
currType: TabType
|
||||
settingsFormSchemas: ToolFormSchema[]
|
||||
paramsFormSchemas: ToolFormSchema[]
|
||||
settingsValue: ToolVarInputs
|
||||
showTabSlider: boolean
|
||||
userSettingsOnly: boolean
|
||||
reasoningConfigOnly: boolean
|
||||
nodeOutputVars: NodeOutPutVar[]
|
||||
availableNodes: Node[]
|
||||
onCurrTypeChange: (type: TabType) => void
|
||||
onSettingsFormChange: (v: ToolVarInputs) => void
|
||||
onParamsFormChange: (v: ReasoningConfigValue) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the settings/params tips section
|
||||
*/
|
||||
const ParamsTips: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="pb-1">
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{t('detailPanel.toolSelector.paramsTip1', { ns: 'plugin' })}
|
||||
</div>
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{t('detailPanel.toolSelector.paramsTip2', { ns: 'plugin' })}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ToolSettingsPanel: FC<ToolSettingsPanelProps> = ({
|
||||
value,
|
||||
currentProvider,
|
||||
nodeId,
|
||||
currType,
|
||||
settingsFormSchemas,
|
||||
paramsFormSchemas,
|
||||
settingsValue,
|
||||
showTabSlider,
|
||||
userSettingsOnly,
|
||||
reasoningConfigOnly,
|
||||
nodeOutputVars,
|
||||
availableNodes,
|
||||
onCurrTypeChange,
|
||||
onSettingsFormChange,
|
||||
onParamsFormChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
// Check if panel should be shown
|
||||
const hasSettings = settingsFormSchemas.length > 0
|
||||
const hasParams = paramsFormSchemas.length > 0
|
||||
const isTeamAuthorized = currentProvider?.is_team_authorization
|
||||
|
||||
if ((!hasSettings && !hasParams) || !isTeamAuthorized)
|
||||
return null
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider className="my-1 w-full" />
|
||||
|
||||
{/* Tab slider - shown only when both settings and params exist */}
|
||||
{nodeId && showTabSlider && (
|
||||
<TabSlider
|
||||
className="mt-1 shrink-0 px-4"
|
||||
itemClassName="py-3"
|
||||
noBorderBottom
|
||||
smallItem
|
||||
value={currType}
|
||||
onChange={(v) => {
|
||||
if (v === 'settings' || v === 'params')
|
||||
onCurrTypeChange(v)
|
||||
}}
|
||||
options={[
|
||||
{ value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
|
||||
{ value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Params tips when tab slider and params tab is active */}
|
||||
{nodeId && showTabSlider && currType === 'params' && (
|
||||
<div className="px-4 py-2">
|
||||
<ParamsTips />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User settings only header */}
|
||||
{userSettingsOnly && (
|
||||
<div className="p-4 pb-1">
|
||||
<div className="system-sm-semibold-uppercase text-text-primary">
|
||||
{t('detailPanel.toolSelector.settings', { ns: 'plugin' })}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reasoning config only header */}
|
||||
{nodeId && reasoningConfigOnly && (
|
||||
<div className="mb-1 p-4 pb-1">
|
||||
<div className="system-sm-semibold-uppercase text-text-primary">
|
||||
{t('detailPanel.toolSelector.params', { ns: 'plugin' })}
|
||||
</div>
|
||||
<ParamsTips />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* User settings form */}
|
||||
{(currType === 'settings' || userSettingsOnly) && (
|
||||
<div className="px-4 py-2">
|
||||
<ToolForm
|
||||
inPanel
|
||||
readOnly={false}
|
||||
nodeId={nodeId}
|
||||
schema={settingsFormSchemas as CredentialFormSchema[]}
|
||||
value={settingsValue}
|
||||
onChange={onSettingsFormChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reasoning config form */}
|
||||
{nodeId && (currType === 'params' || reasoningConfigOnly) && (
|
||||
<ReasoningConfigForm
|
||||
value={(value?.parameters || {}) as ReasoningConfigValue}
|
||||
onChange={onParamsFormChange}
|
||||
schemas={paramsFormSchemas}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
nodeId={nodeId}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToolSettingsPanel
|
||||
@ -0,0 +1,3 @@
|
||||
export { usePluginInstalledCheck } from './use-plugin-installed-check'
|
||||
export { useToolSelectorState } from './use-tool-selector-state'
|
||||
export type { TabType, ToolSelectorState, UseToolSelectorStateProps } from './use-tool-selector-state'
|
||||
@ -10,5 +10,6 @@ export const usePluginInstalledCheck = (providerName = '') => {
|
||||
return {
|
||||
inMarketPlace: !!manifest,
|
||||
manifest: manifest?.data.plugin,
|
||||
pluginID,
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,250 @@
|
||||
'use client'
|
||||
import type { ReasoningConfigValue } from '../components/reasoning-config-form'
|
||||
import type { ToolParameter } from '@/app/components/tools/types'
|
||||
import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ResourceVarInputs } from '@/app/components/workflow/nodes/_base/types'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
|
||||
import {
|
||||
useAllBuiltInTools,
|
||||
useAllCustomTools,
|
||||
useAllMCPTools,
|
||||
useAllWorkflowTools,
|
||||
useInvalidateAllBuiltInTools,
|
||||
} from '@/service/use-tools'
|
||||
import { getIconFromMarketPlace } from '@/utils/get-icon'
|
||||
import { usePluginInstalledCheck } from './use-plugin-installed-check'
|
||||
|
||||
export type TabType = 'settings' | 'params'
|
||||
|
||||
export type UseToolSelectorStateProps = {
|
||||
value?: ToolValue
|
||||
onSelect: (tool: ToolValue) => void
|
||||
onSelectMultiple?: (tool: ToolValue[]) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook for managing tool selector state and computed values.
|
||||
* Consolidates state management, data fetching, and event handlers.
|
||||
*/
|
||||
export const useToolSelectorState = ({
|
||||
value,
|
||||
onSelect,
|
||||
onSelectMultiple,
|
||||
}: UseToolSelectorStateProps) => {
|
||||
// Panel visibility states
|
||||
const [isShow, setIsShow] = useState(false)
|
||||
const [isShowChooseTool, setIsShowChooseTool] = useState(false)
|
||||
const [currType, setCurrType] = useState<TabType>('settings')
|
||||
|
||||
// Fetch all tools data
|
||||
const { data: buildInTools } = useAllBuiltInTools()
|
||||
const { data: customTools } = useAllCustomTools()
|
||||
const { data: workflowTools } = useAllWorkflowTools()
|
||||
const { data: mcpTools } = useAllMCPTools()
|
||||
const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
|
||||
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
|
||||
|
||||
// Plugin info check
|
||||
const { inMarketPlace, manifest, pluginID } = usePluginInstalledCheck(value?.provider_name)
|
||||
|
||||
// Merge all tools and find current provider
|
||||
const currentProvider = useMemo(() => {
|
||||
const mergedTools = [
|
||||
...(buildInTools || []),
|
||||
...(customTools || []),
|
||||
...(workflowTools || []),
|
||||
...(mcpTools || []),
|
||||
]
|
||||
return mergedTools.find(toolWithProvider => toolWithProvider.id === value?.provider_name)
|
||||
}, [value, buildInTools, customTools, workflowTools, mcpTools])
|
||||
|
||||
// Current tool from provider
|
||||
const currentTool = useMemo(() => {
|
||||
return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
|
||||
}, [currentProvider?.tools, value?.tool_name])
|
||||
|
||||
// Tool settings and params
|
||||
const currentToolSettings = useMemo(() => {
|
||||
if (!currentProvider)
|
||||
return []
|
||||
return currentProvider.tools
|
||||
.find(tool => tool.name === value?.tool_name)
|
||||
?.parameters
|
||||
.filter(param => param.form !== 'llm') || []
|
||||
}, [currentProvider, value])
|
||||
|
||||
const currentToolParams = useMemo(() => {
|
||||
if (!currentProvider)
|
||||
return []
|
||||
return currentProvider.tools
|
||||
.find(tool => tool.name === value?.tool_name)
|
||||
?.parameters
|
||||
.filter(param => param.form === 'llm') || []
|
||||
}, [currentProvider, value])
|
||||
|
||||
// Form schemas
|
||||
const settingsFormSchemas = useMemo(
|
||||
() => toolParametersToFormSchemas(currentToolSettings),
|
||||
[currentToolSettings],
|
||||
)
|
||||
const paramsFormSchemas = useMemo(
|
||||
() => toolParametersToFormSchemas(currentToolParams),
|
||||
[currentToolParams],
|
||||
)
|
||||
|
||||
// Tab visibility flags
|
||||
const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
|
||||
const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
|
||||
const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
|
||||
|
||||
// Manifest icon URL
|
||||
const manifestIcon = useMemo(() => {
|
||||
if (!manifest || !pluginID)
|
||||
return ''
|
||||
return getIconFromMarketPlace(pluginID)
|
||||
}, [manifest, pluginID])
|
||||
|
||||
// Convert tool default value to tool value format
|
||||
const getToolValue = useCallback((tool: ToolDefaultValue): ToolValue => {
|
||||
const settingValues = generateFormValue(
|
||||
tool.params,
|
||||
toolParametersToFormSchemas((tool.paramSchemas as ToolParameter[]).filter(param => param.form !== 'llm')),
|
||||
)
|
||||
const paramValues = generateFormValue(
|
||||
tool.params,
|
||||
toolParametersToFormSchemas((tool.paramSchemas as ToolParameter[]).filter(param => param.form === 'llm')),
|
||||
true,
|
||||
)
|
||||
return {
|
||||
provider_name: tool.provider_id,
|
||||
provider_show_name: tool.provider_name,
|
||||
tool_name: tool.tool_name,
|
||||
tool_label: tool.tool_label,
|
||||
tool_description: tool.tool_description,
|
||||
settings: settingValues,
|
||||
parameters: paramValues,
|
||||
enabled: tool.is_team_authorization,
|
||||
extra: {
|
||||
description: tool.tool_description,
|
||||
},
|
||||
}
|
||||
}, [])
|
||||
|
||||
// Event handlers
|
||||
const handleSelectTool = useCallback((tool: ToolDefaultValue) => {
|
||||
const toolValue = getToolValue(tool)
|
||||
onSelect(toolValue)
|
||||
}, [getToolValue, onSelect])
|
||||
|
||||
const handleSelectMultipleTool = useCallback((tools: ToolDefaultValue[]) => {
|
||||
const toolValues = tools.map(item => getToolValue(item))
|
||||
onSelectMultiple?.(toolValues)
|
||||
}, [getToolValue, onSelectMultiple])
|
||||
|
||||
const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
if (!value)
|
||||
return
|
||||
onSelect({
|
||||
...value,
|
||||
extra: {
|
||||
...value.extra,
|
||||
description: e.target.value || '',
|
||||
},
|
||||
})
|
||||
}, [value, onSelect])
|
||||
|
||||
const handleSettingsFormChange = useCallback((v: ResourceVarInputs) => {
|
||||
if (!value)
|
||||
return
|
||||
const newValue = getStructureValue(v)
|
||||
onSelect({
|
||||
...value,
|
||||
settings: newValue,
|
||||
})
|
||||
}, [value, onSelect])
|
||||
|
||||
const handleParamsFormChange = useCallback((v: ReasoningConfigValue) => {
|
||||
if (!value)
|
||||
return
|
||||
onSelect({
|
||||
...value,
|
||||
parameters: v,
|
||||
})
|
||||
}, [value, onSelect])
|
||||
|
||||
const handleEnabledChange = useCallback((state: boolean) => {
|
||||
if (!value)
|
||||
return
|
||||
onSelect({
|
||||
...value,
|
||||
enabled: state,
|
||||
})
|
||||
}, [value, onSelect])
|
||||
|
||||
const handleAuthorizationItemClick = useCallback((id: string) => {
|
||||
if (!value)
|
||||
return
|
||||
onSelect({
|
||||
...value,
|
||||
credential_id: id,
|
||||
})
|
||||
}, [value, onSelect])
|
||||
|
||||
const handleInstall = useCallback(async () => {
|
||||
try {
|
||||
await invalidateAllBuiltinTools()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to invalidate built-in tools cache', error)
|
||||
}
|
||||
try {
|
||||
await invalidateInstalledPluginList()
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to invalidate installed plugin list cache', error)
|
||||
}
|
||||
}, [invalidateAllBuiltinTools, invalidateInstalledPluginList])
|
||||
|
||||
const getSettingsValue = useCallback((): ResourceVarInputs => {
|
||||
return getPlainValue((value?.settings || {}) as Record<string, { value: unknown }>) as ResourceVarInputs
|
||||
}, [value?.settings])
|
||||
|
||||
return {
|
||||
// State
|
||||
isShow,
|
||||
setIsShow,
|
||||
isShowChooseTool,
|
||||
setIsShowChooseTool,
|
||||
currType,
|
||||
setCurrType,
|
||||
|
||||
// Computed values
|
||||
currentProvider,
|
||||
currentTool,
|
||||
currentToolSettings,
|
||||
currentToolParams,
|
||||
settingsFormSchemas,
|
||||
paramsFormSchemas,
|
||||
showTabSlider,
|
||||
userSettingsOnly,
|
||||
reasoningConfigOnly,
|
||||
manifestIcon,
|
||||
inMarketPlace,
|
||||
manifest,
|
||||
|
||||
// Event handlers
|
||||
handleSelectTool,
|
||||
handleSelectMultipleTool,
|
||||
handleDescriptionChange,
|
||||
handleSettingsFormChange,
|
||||
handleParamsFormChange,
|
||||
handleEnabledChange,
|
||||
handleAuthorizationItemClick,
|
||||
handleInstall,
|
||||
getSettingsValue,
|
||||
}
|
||||
}
|
||||
|
||||
export type ToolSelectorState = ReturnType<typeof useToolSelectorState>
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,37 +5,27 @@ import type {
|
||||
} from '@floating-ui/react'
|
||||
import type { FC } from 'react'
|
||||
import type { Node } from 'reactflow'
|
||||
import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { NodeOutPutVar } from '@/app/components/workflow/types'
|
||||
import Link from 'next/link'
|
||||
import * as React from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Textarea from '@/app/components/base/textarea'
|
||||
import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
|
||||
import ToolAuthorizationSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-authorization-section'
|
||||
import ToolSettingsSection from '@/app/components/plugins/plugin-detail-panel/tool-selector/sections/tool-settings-section'
|
||||
import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
|
||||
import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
|
||||
import { CollectionType } from '@/app/components/tools/types'
|
||||
import { generateFormValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
|
||||
import { MARKETPLACE_API_PREFIX } from '@/config'
|
||||
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
|
||||
import {
|
||||
useAllBuiltInTools,
|
||||
useAllCustomTools,
|
||||
useAllMCPTools,
|
||||
useAllWorkflowTools,
|
||||
useInvalidateAllBuiltInTools,
|
||||
} from '@/service/use-tools'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { ReadmeEntrance } from '../../readme-panel/entrance'
|
||||
import {
|
||||
ToolAuthorizationSection,
|
||||
ToolBaseForm,
|
||||
ToolItem,
|
||||
// ToolSettingsPanel,
|
||||
ToolTrigger,
|
||||
} from './components'
|
||||
import { useToolSelectorState } from './hooks/use-tool-selector-state'
|
||||
import ToolSettingsSection from './sections/tool-settings-section'
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean
|
||||
@ -59,6 +49,7 @@ type Props = {
|
||||
availableNodes: Node[]
|
||||
nodeId?: string
|
||||
}
|
||||
|
||||
const ToolSelector: FC<Props> = ({
|
||||
value,
|
||||
selectedTools,
|
||||
@ -81,215 +72,159 @@ const ToolSelector: FC<Props> = ({
|
||||
nodeId = '',
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [isShow, onShowChange] = useState(false)
|
||||
|
||||
// Use custom hook for state management
|
||||
const state = useToolSelectorState({ value, onSelect, onSelectMultiple })
|
||||
const {
|
||||
isShow,
|
||||
setIsShow,
|
||||
isShowChooseTool,
|
||||
setIsShowChooseTool,
|
||||
currentProvider,
|
||||
currentTool,
|
||||
manifestIcon,
|
||||
inMarketPlace,
|
||||
manifest,
|
||||
handleSelectTool,
|
||||
handleSelectMultipleTool,
|
||||
handleDescriptionChange,
|
||||
handleEnabledChange,
|
||||
handleAuthorizationItemClick,
|
||||
handleInstall,
|
||||
} = state
|
||||
|
||||
const handleTriggerClick = () => {
|
||||
if (disabled)
|
||||
return
|
||||
onShowChange(true)
|
||||
setIsShow(true)
|
||||
}
|
||||
|
||||
const { data: buildInTools } = useAllBuiltInTools()
|
||||
const { data: customTools } = useAllCustomTools()
|
||||
const { data: workflowTools } = useAllWorkflowTools()
|
||||
const { data: mcpTools } = useAllMCPTools()
|
||||
const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
|
||||
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
|
||||
// Determine portal open state based on controlled vs uncontrolled mode
|
||||
const portalOpen = trigger ? controlledState : isShow
|
||||
const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
|
||||
|
||||
// plugin info check
|
||||
const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
|
||||
|
||||
const currentProvider = useMemo(() => {
|
||||
const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || []), ...(mcpTools || [])]
|
||||
return mergedTools.find((toolWithProvider) => {
|
||||
return toolWithProvider.id === value?.provider_name
|
||||
})
|
||||
}, [value, buildInTools, customTools, workflowTools, mcpTools])
|
||||
|
||||
const [isShowChooseTool, setIsShowChooseTool] = useState(false)
|
||||
const getToolValue = (tool: ToolDefaultValue) => {
|
||||
const settingValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any))
|
||||
const paramValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any), true)
|
||||
return {
|
||||
provider_name: tool.provider_id,
|
||||
provider_show_name: tool.provider_name,
|
||||
type: tool.provider_type,
|
||||
tool_name: tool.tool_name,
|
||||
tool_label: tool.tool_label,
|
||||
tool_description: tool.tool_description,
|
||||
settings: settingValues,
|
||||
parameters: paramValues,
|
||||
enabled: tool.is_team_authorization,
|
||||
extra: {
|
||||
description: tool.tool_description,
|
||||
},
|
||||
schemas: tool.paramSchemas,
|
||||
}
|
||||
}
|
||||
const handleSelectTool = (tool: ToolDefaultValue) => {
|
||||
const toolValue = getToolValue(tool)
|
||||
onSelect(toolValue)
|
||||
// setIsShowChooseTool(false)
|
||||
}
|
||||
const handleSelectMultipleTool = (tool: ToolDefaultValue[]) => {
|
||||
const toolValues = tool.map(item => getToolValue(item))
|
||||
onSelectMultiple?.(toolValues)
|
||||
}
|
||||
|
||||
const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
onSelect({
|
||||
...value,
|
||||
extra: {
|
||||
...value?.extra,
|
||||
description: e.target.value || '',
|
||||
},
|
||||
} as any)
|
||||
}
|
||||
|
||||
const handleEnabledChange = (state: boolean) => {
|
||||
onSelect({
|
||||
...value,
|
||||
enabled: state,
|
||||
} as any)
|
||||
}
|
||||
|
||||
// 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 ''
|
||||
return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
|
||||
}, [manifest])
|
||||
const handleInstall = async () => {
|
||||
invalidateAllBuiltinTools()
|
||||
invalidateInstalledPluginList()
|
||||
}
|
||||
const handleAuthorizationItemClick = (id: string) => {
|
||||
onSelect({
|
||||
...value,
|
||||
credential_id: id,
|
||||
} as any)
|
||||
}
|
||||
// Build error tooltip content
|
||||
const renderErrorTip = () => (
|
||||
<div className="max-w-[240px] space-y-1 text-xs">
|
||||
<h3 className="font-semibold text-text-primary">
|
||||
{currentTool
|
||||
? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' })
|
||||
: t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}
|
||||
</h3>
|
||||
<p className="tracking-tight text-text-secondary">
|
||||
{currentTool
|
||||
? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' })
|
||||
: t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}
|
||||
</p>
|
||||
<p>
|
||||
<Link href="/plugins" className="tracking-tight text-text-accent">
|
||||
{t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<PortalToFollowElem
|
||||
placement={placement}
|
||||
offset={offset}
|
||||
open={trigger ? controlledState : isShow}
|
||||
onOpenChange={trigger ? onControlledStateChange : onShowChange}
|
||||
<PortalToFollowElem
|
||||
placement={placement}
|
||||
offset={offset}
|
||||
open={portalOpen}
|
||||
onOpenChange={onPortalOpenChange}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
if (!currentProvider || !currentTool)
|
||||
return
|
||||
handleTriggerClick()
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
className="w-full"
|
||||
onClick={() => {
|
||||
if (!currentProvider || !currentTool)
|
||||
return
|
||||
handleTriggerClick()
|
||||
}}
|
||||
{trigger}
|
||||
|
||||
{/* Default trigger - no value */}
|
||||
{!trigger && !value?.provider_name && (
|
||||
<ToolTrigger
|
||||
isConfigure
|
||||
open={isShow}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Default trigger - with value */}
|
||||
{!trigger && value?.provider_name && (
|
||||
<ToolItem
|
||||
open={isShow}
|
||||
icon={currentProvider?.icon || manifestIcon}
|
||||
isMCPTool={currentProvider?.type === CollectionType.mcp}
|
||||
providerName={value.provider_name}
|
||||
providerShowName={value.provider_show_name}
|
||||
toolLabel={value.tool_label || value.tool_name}
|
||||
showSwitch={supportEnableSwitch}
|
||||
switchValue={value.enabled}
|
||||
onSwitchChange={handleEnabledChange}
|
||||
onDelete={onDelete}
|
||||
noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
|
||||
uninstalled={!currentProvider && inMarketPlace}
|
||||
versionMismatch={currentProvider && inMarketPlace && !currentTool}
|
||||
installInfo={manifest?.latest_package_identifier}
|
||||
onInstall={handleInstall}
|
||||
isError={(!currentProvider || !currentTool) && !inMarketPlace}
|
||||
errorTip={renderErrorTip()}
|
||||
/>
|
||||
)}
|
||||
</PortalToFollowElemTrigger>
|
||||
|
||||
<PortalToFollowElemContent className="z-10">
|
||||
<div className={cn(
|
||||
'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
|
||||
'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
|
||||
'overflow-y-auto pb-2 pb-4 shadow-lg backdrop-blur-sm',
|
||||
)}
|
||||
>
|
||||
{trigger}
|
||||
{!trigger && !value?.provider_name && (
|
||||
<ToolTrigger
|
||||
isConfigure
|
||||
open={isShow}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
)}
|
||||
{!trigger && value?.provider_name && (
|
||||
<ToolItem
|
||||
open={isShow}
|
||||
icon={currentProvider?.icon || manifestIcon}
|
||||
isMCPTool={currentProvider?.type === CollectionType.mcp}
|
||||
providerName={value.provider_name}
|
||||
providerShowName={value.provider_show_name}
|
||||
toolLabel={value.tool_label || value.tool_name}
|
||||
showSwitch={supportEnableSwitch}
|
||||
switchValue={value.enabled}
|
||||
onSwitchChange={handleEnabledChange}
|
||||
onDelete={onDelete}
|
||||
noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
|
||||
uninstalled={!currentProvider && inMarketPlace}
|
||||
versionMismatch={currentProvider && inMarketPlace && !currentTool}
|
||||
installInfo={manifest?.latest_package_identifier}
|
||||
onInstall={() => handleInstall()}
|
||||
isError={(!currentProvider || !currentTool) && !inMarketPlace}
|
||||
errorTip={(
|
||||
<div className="max-w-[240px] space-y-1 text-xs">
|
||||
<h3 className="font-semibold text-text-primary">{currentTool ? t('detailPanel.toolSelector.uninstalledTitle', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedTitle', { ns: 'plugin' })}</h3>
|
||||
<p className="tracking-tight text-text-secondary">{currentTool ? t('detailPanel.toolSelector.uninstalledContent', { ns: 'plugin' }) : t('detailPanel.toolSelector.unsupportedContent', { ns: 'plugin' })}</p>
|
||||
<p>
|
||||
<Link href="/plugins" className="tracking-tight text-text-accent">{t('detailPanel.toolSelector.uninstalledLink', { ns: 'plugin' })}</Link>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className="z-10">
|
||||
<div className={cn('relative max-h-[642px] min-h-20 w-[361px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-4 shadow-lg backdrop-blur-sm', 'overflow-y-auto pb-2')}>
|
||||
<>
|
||||
<div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">{t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}</div>
|
||||
{/* base form */}
|
||||
<div className="flex flex-col gap-3 px-4 py-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="system-sm-semibold flex h-6 items-center justify-between text-text-secondary">
|
||||
{t('detailPanel.toolSelector.toolLabel', { ns: 'plugin' })}
|
||||
<ReadmeEntrance pluginDetail={currentProvider as any} showShortTip className="pb-0" />
|
||||
</div>
|
||||
<ToolPicker
|
||||
placement="bottom"
|
||||
offset={offset}
|
||||
trigger={(
|
||||
<ToolTrigger
|
||||
open={panelShowState || isShowChooseTool}
|
||||
value={value}
|
||||
provider={currentProvider}
|
||||
/>
|
||||
)}
|
||||
isShow={panelShowState || isShowChooseTool}
|
||||
onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
|
||||
disabled={false}
|
||||
supportAddCustomTool
|
||||
onSelect={handleSelectTool}
|
||||
onSelectMultiple={handleSelectMultipleTool}
|
||||
scope={scope}
|
||||
selectedTools={selectedTools}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="system-sm-semibold flex h-6 items-center text-text-secondary">{t('detailPanel.toolSelector.descriptionLabel', { ns: 'plugin' })}</div>
|
||||
<Textarea
|
||||
className="resize-none"
|
||||
placeholder={t('detailPanel.toolSelector.descriptionPlaceholder', { ns: 'plugin' })}
|
||||
value={value?.extra?.description || ''}
|
||||
onChange={handleDescriptionChange}
|
||||
disabled={!value?.provider_name}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* authorization */}
|
||||
<ToolAuthorizationSection
|
||||
currentProvider={currentProvider}
|
||||
credentialId={value?.credential_id}
|
||||
onAuthorizationItemClick={handleAuthorizationItemClick}
|
||||
/>
|
||||
{/* tool settings */}
|
||||
<ToolSettingsSection
|
||||
currentProvider={currentProvider}
|
||||
currentTool={currentTool}
|
||||
value={value}
|
||||
nodeId={nodeId}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
onChange={onSelect}
|
||||
/>
|
||||
</>
|
||||
{/* Header */}
|
||||
<div className="system-xl-semibold px-4 pb-1 pt-3.5 text-text-primary">
|
||||
{t(`detailPanel.toolSelector.${isEdit ? 'toolSetting' : 'title'}`, { ns: 'plugin' })}
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
</>
|
||||
|
||||
{/* Base form: tool picker + description */}
|
||||
<ToolBaseForm
|
||||
value={value}
|
||||
currentProvider={currentProvider}
|
||||
offset={offset}
|
||||
scope={scope}
|
||||
selectedTools={selectedTools}
|
||||
isShowChooseTool={isShowChooseTool}
|
||||
panelShowState={panelShowState}
|
||||
hasTrigger={!!trigger}
|
||||
onShowChange={setIsShowChooseTool}
|
||||
onPanelShowStateChange={onPanelShowStateChange}
|
||||
onSelectTool={handleSelectTool}
|
||||
onSelectMultipleTool={handleSelectMultipleTool}
|
||||
onDescriptionChange={handleDescriptionChange}
|
||||
/>
|
||||
|
||||
{/* Authorization section */}
|
||||
<ToolAuthorizationSection
|
||||
currentProvider={currentProvider}
|
||||
credentialId={value?.credential_id}
|
||||
onAuthorizationItemClick={handleAuthorizationItemClick}
|
||||
/>
|
||||
|
||||
{/* Settings panel */}
|
||||
<ToolSettingsSection
|
||||
currentProvider={currentProvider}
|
||||
currentTool={currentTool}
|
||||
value={value}
|
||||
nodeId={nodeId}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
onChange={onSelect}
|
||||
/>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ToolSelector)
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
|
||||
import type { FC } from 'react'
|
||||
import type { Node } from 'reactflow'
|
||||
import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import type { Tool } from '@/app/components/tools/types'
|
||||
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { ResourceVarInputs } from '@/app/components/workflow/nodes/_base/types'
|
||||
import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import * as React from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
@ -56,7 +58,7 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
const userSettingsOnly = currentToolSettings.length > 0 && (!allowReasoning || !currentToolParams.length)
|
||||
const reasoningConfigOnly = allowReasoning && currentToolParams.length > 0 && currentToolSettings.length === 0
|
||||
|
||||
const handleSettingsFormChange = (v: Record<string, any>) => {
|
||||
const handleSettingsFormChange = (v: Record<string, unknown>) => {
|
||||
if (!value || !onChange)
|
||||
return
|
||||
const newValue = getStructureValue(v)
|
||||
@ -66,7 +68,7 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
})
|
||||
}
|
||||
|
||||
const handleParamsFormChange = (v: Record<string, any>) => {
|
||||
const handleParamsFormChange = (v: Record<string, unknown>) => {
|
||||
if (!value || !onChange)
|
||||
return
|
||||
onChange({
|
||||
@ -130,8 +132,8 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
inPanel
|
||||
readOnly={false}
|
||||
nodeId={safeNodeId}
|
||||
schema={settingsFormSchemas as any}
|
||||
value={getPlainValue(value?.settings || {})}
|
||||
schema={settingsFormSchemas as CredentialFormSchema[]}
|
||||
value={getPlainValue((value?.settings || {}) as Record<string, { value: unknown }>) as ResourceVarInputs}
|
||||
onChange={handleSettingsFormChange}
|
||||
/>
|
||||
</div>
|
||||
@ -141,7 +143,7 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
<ReasoningConfigForm
|
||||
value={value?.parameters || {}}
|
||||
onChange={handleParamsFormChange}
|
||||
schemas={paramsFormSchemas as any}
|
||||
schemas={paramsFormSchemas as CredentialFormSchema[]}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
nodeId={safeNodeId}
|
||||
|
||||
Reference in New Issue
Block a user