mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 09:58:04 +08:00
feat: support setting show on click
This commit is contained in:
Joel
@ -9,7 +9,7 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headless
|
||||
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
||||
|
||||
import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useContext, useEffect, useMemo, useState } from 'react'
|
||||
import CheckboxList from '@/app/components/base/checkbox-list'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { SimpleSelect } from '@/app/components/base/select'
|
||||
@ -18,6 +18,8 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
|
||||
import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
|
||||
import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
|
||||
import { PluginCategoryEnum } from '@/app/components/plugins/types'
|
||||
import { WorkflowContext } from '@/app/components/workflow/context'
|
||||
import { HooksStoreContext } from '@/app/components/workflow/hooks-store/provider'
|
||||
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
|
||||
@ -47,6 +49,87 @@ type Props = {
|
||||
disableVariableInsertion?: boolean
|
||||
}
|
||||
|
||||
type VariableReferenceFieldsProps = {
|
||||
nodeId: string
|
||||
isString: boolean
|
||||
showVariableSelector: boolean
|
||||
readOnly: boolean
|
||||
schema: CredentialFormSchema
|
||||
varInput: ResourceVarInputs[string]
|
||||
targetVarType: string
|
||||
filterVar?: (payload: Var, selector: ValueSelector) => boolean
|
||||
onValueChange: (newValue: any) => void
|
||||
onVariableSelectorChange: (newValue: ValueSelector | string) => void
|
||||
showManageInputField?: boolean
|
||||
onManageInputField?: () => void
|
||||
disableVariableInsertion?: boolean
|
||||
inPanel?: boolean
|
||||
currentTool?: Tool | Event
|
||||
currentProvider?: ToolWithProvider | TriggerWithProvider
|
||||
isFilterFileVar?: boolean
|
||||
}
|
||||
|
||||
const VariableReferenceFields: FC<VariableReferenceFieldsProps> = ({
|
||||
nodeId,
|
||||
isString,
|
||||
showVariableSelector,
|
||||
readOnly,
|
||||
schema,
|
||||
varInput,
|
||||
targetVarType,
|
||||
filterVar,
|
||||
onValueChange,
|
||||
onVariableSelectorChange,
|
||||
showManageInputField,
|
||||
onManageInputField,
|
||||
disableVariableInsertion,
|
||||
inPanel,
|
||||
currentTool,
|
||||
currentProvider,
|
||||
isFilterFileVar,
|
||||
}) => {
|
||||
const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
|
||||
onlyLeafNodeVar: false,
|
||||
filterVar: filterVar || (() => true),
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{isString && (
|
||||
<MixedVariableTextInput
|
||||
readOnly={readOnly}
|
||||
value={varInput?.value as string || ''}
|
||||
onChange={onValueChange}
|
||||
nodesOutputVars={availableVars}
|
||||
availableNodes={availableNodesWithParent}
|
||||
showManageInputField={showManageInputField}
|
||||
onManageInputField={onManageInputField}
|
||||
disableVariableInsertion={disableVariableInsertion}
|
||||
/>
|
||||
)}
|
||||
{showVariableSelector && (
|
||||
<VarReferencePicker
|
||||
zIndex={inPanel ? 1000 : undefined}
|
||||
className="h-8 grow"
|
||||
readonly={readOnly}
|
||||
isShowNodeName
|
||||
nodeId={nodeId}
|
||||
value={varInput?.value || []}
|
||||
onChange={onVariableSelectorChange}
|
||||
filterVar={filterVar}
|
||||
schema={schema}
|
||||
valueTypePlaceHolder={targetVarType}
|
||||
currentTool={currentTool}
|
||||
currentProvider={currentProvider}
|
||||
isFilterFileVar={isFilterFileVar}
|
||||
availableVars={availableVars}
|
||||
availableNodes={availableNodesWithParent}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const FormInputItem: FC<Props> = ({
|
||||
readOnly,
|
||||
nodeId,
|
||||
@ -63,6 +146,9 @@ const FormInputItem: FC<Props> = ({
|
||||
disableVariableInsertion = false,
|
||||
}) => {
|
||||
const language = useLanguage()
|
||||
const hooksStore = useContext(HooksStoreContext)
|
||||
const workflowStore = useContext(WorkflowContext)
|
||||
const canUseWorkflowHooks = !!hooksStore && !!workflowStore
|
||||
const [toolsOptions, setToolsOptions] = useState<FormOption[] | null>(null)
|
||||
const [isLoadingToolsOptions, setIsLoadingToolsOptions] = useState(false)
|
||||
|
||||
@ -89,17 +175,11 @@ const FormInputItem: FC<Props> = ({
|
||||
const isDynamicSelect = type === FormTypeEnum.dynamicSelect
|
||||
const isAppSelector = type === FormTypeEnum.appSelector
|
||||
const isModelSelector = type === FormTypeEnum.modelSelector
|
||||
const showTypeSwitch = isNumber || isBoolean || isObject || isArray || isSelect
|
||||
const showTypeSwitch = canUseWorkflowHooks && (isNumber || isBoolean || isObject || isArray || isSelect)
|
||||
const isConstant = varInput?.type === VarKindType.constant || !varInput?.type
|
||||
const showVariableSelector = isFile || varInput?.type === VarKindType.variable
|
||||
const showVariableSelector = canUseWorkflowHooks && (isFile || varInput?.type === VarKindType.variable)
|
||||
const isMultipleSelect = multiple && (isSelect || isDynamicSelect)
|
||||
|
||||
const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
|
||||
onlyLeafNodeVar: false,
|
||||
filterVar: (varPayload: Var) => {
|
||||
return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
|
||||
},
|
||||
})
|
||||
const canRenderVariableReference = canUseWorkflowHooks && !!nodeId
|
||||
|
||||
const targetVarType = () => {
|
||||
if (isString)
|
||||
@ -327,16 +407,34 @@ const FormInputItem: FC<Props> = ({
|
||||
{showTypeSwitch && (
|
||||
<FormInputTypeSwitch value={varInput?.type || VarKindType.constant} onChange={handleTypeChange} />
|
||||
)}
|
||||
{isString && (
|
||||
<MixedVariableTextInput
|
||||
readOnly={readOnly}
|
||||
{isString && !canRenderVariableReference && (
|
||||
<Input
|
||||
className="h-8 grow"
|
||||
value={varInput?.value as string || ''}
|
||||
onChange={handleValueChange}
|
||||
nodesOutputVars={availableVars}
|
||||
availableNodes={availableNodesWithParent}
|
||||
onChange={e => handleValueChange(e.target.value)}
|
||||
placeholder={placeholder?.[language] || placeholder?.en_US}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
)}
|
||||
{canRenderVariableReference && (
|
||||
<VariableReferenceFields
|
||||
nodeId={nodeId}
|
||||
isString={isString}
|
||||
showVariableSelector={showVariableSelector}
|
||||
readOnly={readOnly}
|
||||
schema={schema}
|
||||
varInput={varInput}
|
||||
targetVarType={targetVarType()}
|
||||
filterVar={getFilterVar()}
|
||||
onValueChange={handleValueChange}
|
||||
onVariableSelectorChange={newValue => handleVariableSelectorChange(newValue, variable)}
|
||||
showManageInputField={showManageInputField}
|
||||
onManageInputField={onManageInputField}
|
||||
disableVariableInsertion={disableVariableInsertion}
|
||||
inPanel={inPanel}
|
||||
currentTool={currentTool}
|
||||
currentProvider={currentProvider}
|
||||
isFilterFileVar={isBoolean}
|
||||
/>
|
||||
)}
|
||||
{isNumber && isConstant && (
|
||||
@ -572,23 +670,6 @@ const FormInputItem: FC<Props> = ({
|
||||
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}
|
||||
isFilterFileVar={isBoolean}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -240,8 +240,6 @@ const ToolBlockComponent: FC<ToolBlockComponentProps> = ({
|
||||
value={toolValue}
|
||||
onChange={handleToolValueChange}
|
||||
nodeId={undefined}
|
||||
nodeOutputVars={[]}
|
||||
availableNodes={[]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -1,26 +1,23 @@
|
||||
'use client'
|
||||
|
||||
import type { FC } from 'react'
|
||||
import type { Node } from 'reactflow'
|
||||
import type { Tool } from '@/app/components/tools/types'
|
||||
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
|
||||
import type { NodeOutPutVar, ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import type { ToolWithProvider } from '@/app/components/workflow/types'
|
||||
import * as React from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import TabSlider from '@/app/components/base/tab-slider-plain'
|
||||
import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
|
||||
import { getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
import ToolForm from '@/app/components/workflow/nodes/tool/components/tool-form'
|
||||
import { toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
|
||||
import { VarKindType } from '@/app/components/workflow/nodes/_base/types'
|
||||
|
||||
type ToolSettingsSectionProps = {
|
||||
currentProvider?: ToolWithProvider
|
||||
currentTool?: Tool
|
||||
value?: ToolValue
|
||||
nodeId?: string
|
||||
nodeOutputVars?: NodeOutPutVar[]
|
||||
availableNodes?: Node[]
|
||||
onChange?: (value: ToolValue) => void
|
||||
}
|
||||
|
||||
@ -29,12 +26,9 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
currentTool,
|
||||
value,
|
||||
nodeId,
|
||||
nodeOutputVars = [],
|
||||
availableNodes = [],
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [currType, setCurrType] = useState<'settings' | 'params'>('settings')
|
||||
const safeNodeId = nodeId ?? ''
|
||||
|
||||
const currentToolSettings = useMemo(() => {
|
||||
@ -52,17 +46,12 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
const paramsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams])
|
||||
|
||||
const allowReasoning = !!safeNodeId
|
||||
const showTabSlider = allowReasoning && currentToolSettings.length > 0 && currentToolParams.length > 0
|
||||
const userSettingsOnly = currentToolSettings.length > 0 && (!allowReasoning || !currentToolParams.length)
|
||||
const reasoningConfigOnly = allowReasoning && currentToolParams.length > 0 && currentToolSettings.length === 0
|
||||
|
||||
const handleSettingsFormChange = (v: Record<string, any>) => {
|
||||
if (!value || !onChange)
|
||||
return
|
||||
const newValue = getStructureValue(v)
|
||||
onChange({
|
||||
...value,
|
||||
settings: newValue,
|
||||
settings: v,
|
||||
})
|
||||
}
|
||||
|
||||
@ -81,40 +70,51 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
if (!currentToolSettings.length && !currentToolParams.length)
|
||||
return null
|
||||
|
||||
const showSettingsSection = currentToolSettings.length > 0
|
||||
const showParamsSection = allowReasoning && currentToolParams.length > 0
|
||||
const getVarKindType = (type: FormTypeEnum) => {
|
||||
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
|
||||
return VarKindType.constant
|
||||
}
|
||||
const getSafeConfigValue = (rawValue: Record<string, any> | undefined, schemas: any[]) => {
|
||||
const nextValue = { ...(rawValue || {}) }
|
||||
schemas.forEach((schema) => {
|
||||
if (!nextValue[schema.variable]) {
|
||||
nextValue[schema.variable] = {
|
||||
auto: 0,
|
||||
value: {
|
||||
type: getVarKindType(schema.type as FormTypeEnum),
|
||||
value: schema.default ?? null,
|
||||
},
|
||||
}
|
||||
return
|
||||
}
|
||||
if (nextValue[schema.variable].auto === undefined)
|
||||
nextValue[schema.variable].auto = 0
|
||||
if (nextValue[schema.variable].value === undefined) {
|
||||
nextValue[schema.variable].value = {
|
||||
type: getVarKindType(schema.type as FormTypeEnum),
|
||||
value: schema.default ?? null,
|
||||
}
|
||||
}
|
||||
})
|
||||
return nextValue
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Divider className="my-1 w-full" />
|
||||
{/* tabs */}
|
||||
{showTabSlider && (
|
||||
<TabSlider
|
||||
className="mt-1 shrink-0 px-4"
|
||||
itemClassName="py-3"
|
||||
noBorderBottom
|
||||
smallItem
|
||||
value={currType}
|
||||
onChange={(value) => {
|
||||
setCurrType(value as 'settings' | 'params')
|
||||
}}
|
||||
options={[
|
||||
{ value: 'settings', text: t('detailPanel.toolSelector.settings', { ns: 'plugin' })! },
|
||||
{ value: 'params', text: t('detailPanel.toolSelector.params', { ns: 'plugin' })! },
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{showTabSlider && currType === 'params' && (
|
||||
<div className="px-4 py-2">
|
||||
<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>
|
||||
)}
|
||||
{/* user settings only */}
|
||||
{userSettingsOnly && (
|
||||
{showSettingsSection && (
|
||||
<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 */}
|
||||
{reasoningConfigOnly && (
|
||||
{showParamsSection && (
|
||||
<div className="mb-1 p-4 pb-1">
|
||||
<div className="system-sm-semibold-uppercase text-text-primary">{t('detailPanel.toolSelector.params', { ns: 'plugin' })}</div>
|
||||
<div className="pb-1">
|
||||
@ -123,28 +123,22 @@ const ToolSettingsSection: FC<ToolSettingsSectionProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* user settings form */}
|
||||
{(currType === 'settings' || userSettingsOnly) && (
|
||||
<div className="px-4 py-2">
|
||||
<ToolForm
|
||||
inPanel
|
||||
readOnly={false}
|
||||
nodeId={safeNodeId}
|
||||
schema={settingsFormSchemas as any}
|
||||
value={getPlainValue(value?.settings || {})}
|
||||
onChange={handleSettingsFormChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* reasoning config form */}
|
||||
{allowReasoning && (currType === 'params' || reasoningConfigOnly) && (
|
||||
{showSettingsSection && (
|
||||
<ReasoningConfigForm
|
||||
value={value?.parameters || {}}
|
||||
value={getSafeConfigValue(value?.settings, settingsFormSchemas)}
|
||||
onChange={handleSettingsFormChange}
|
||||
schemas={settingsFormSchemas as any}
|
||||
nodeId={safeNodeId}
|
||||
disableVariableReference
|
||||
/>
|
||||
)}
|
||||
{showParamsSection && (
|
||||
<ReasoningConfigForm
|
||||
value={getSafeConfigValue(value?.parameters, paramsFormSchemas)}
|
||||
onChange={handleParamsFormChange}
|
||||
schemas={paramsFormSchemas as any}
|
||||
nodeOutputVars={nodeOutputVars}
|
||||
availableNodes={availableNodes}
|
||||
nodeId={safeNodeId}
|
||||
disableVariableReference
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user