gitea/FastGPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support array reference multi-select (#3041)

Browse Source 
* feat: support array reference multi-select

* fix build

* fix

* fix loop multi-select

* adjust condition

* fix get value

* array and non-array conversion

* fix plugin input

* merge func
This commit is contained in:
heheer 2024-11-05 13:02:09 +08:00 committed by archer
parent f4dbe7c021
commit 0db0cbf376
No known key found for this signature in database
GPG Key ID: 4446499B846D4A9E
19 changed files with 442 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/global/core/workflow/constants.ts
View File

@ -334,3 +334,14 @@ export enum ContentTypes {
xml = 'xml',
raw = 'raw-text'
}
export const ArrayTypeMap = {
[WorkflowIOValueTypeEnum.string]: WorkflowIOValueTypeEnum.arrayString,
[WorkflowIOValueTypeEnum.number]: WorkflowIOValueTypeEnum.arrayNumber,
[WorkflowIOValueTypeEnum.boolean]: WorkflowIOValueTypeEnum.arrayBoolean,
[WorkflowIOValueTypeEnum.object]: WorkflowIOValueTypeEnum.arrayObject,
[WorkflowIOValueTypeEnum.arrayString]: WorkflowIOValueTypeEnum.arrayString,
[WorkflowIOValueTypeEnum.arrayNumber]: WorkflowIOValueTypeEnum.arrayNumber,
[WorkflowIOValueTypeEnum.arrayBoolean]: WorkflowIOValueTypeEnum.arrayBoolean,
[WorkflowIOValueTypeEnum.arrayObject]: WorkflowIOValueTypeEnum.arrayObject
};

58
packages/global/core/workflow/runtime/utils.ts
View File

@ -235,25 +235,57 @@ export const getReferenceVariableValue = ({
variables: Record<string, any>;
}) => {
const nodeIds = nodes.map((node) => node.nodeId);
if (!isReferenceValue(value, nodeIds)) {
return value;
}
const sourceNodeId = value[0];
const outputId = value[1];
if (sourceNodeId === VARIABLE_NODE_ID && outputId) {
return variables[outputId];
// handle single reference value
if (isReferenceValue(value, nodeIds)) {
const sourceNodeId = value[0];
const outputId = value[1];
if (sourceNodeId === VARIABLE_NODE_ID && outputId) {
return variables[outputId];
}
const node = nodes.find((node) => node.nodeId === sourceNodeId);
if (!node) {
return undefined;
}
return node.outputs.find((output) => output.id === outputId)?.value;
}
const node = nodes.find((node) => node.nodeId === sourceNodeId);
// handle reference array
if (
Array.isArray(value) &&
value.every(
(val) => val?.length === 2 && typeof val[0] === 'string' && typeof val[1] === 'string'
)
) {
const result = value.map((val) => {
if (!isReferenceValue(val, nodeIds)) {
return [val];
}
if (!node) {
return undefined;
const sourceNodeId = val?.[0];
const outputId = val?.[1];
if (sourceNodeId === VARIABLE_NODE_ID && outputId) {
const variableValue = variables[outputId];
return Array.isArray(variableValue) ? variableValue : [variableValue];
}
const node = nodes.find((node) => node.nodeId === sourceNodeId);
if (!node) {
return undefined;
}
const outputValue = node.outputs.find((output) => output.id === outputId)?.value;
return Array.isArray(outputValue) ? outputValue : [outputValue];
});
return result.flat();
}
const outputValue = node.outputs.find((output) => output.id === outputId)?.value;
return outputValue;
return value;
};
export const textAdaptGptResponse = ({

2
packages/global/core/workflow/template/system/datasetConcat.ts
View File

@ -25,7 +25,7 @@ export const getOneQuoteInputTemplate = ({
}): FlowNodeInputItemType => ({
key,
renderTypeList: [FlowNodeInputTypeEnum.reference],
label: `${i18nT('workflow:quote_num')},{ num: ${index} }`,
label: `${i18nT('workflow:quote_num')}`,
debugLabel: i18nT('workflow:knowledge_base_reference'),
canEdit: true,
valueType: WorkflowIOValueTypeEnum.datasetQuote

4
packages/service/core/workflow/dispatch/tools/runUpdateVar.ts
View File

@ -40,11 +40,13 @@ export const dispatchUpdateVariable = async (props: Props): Promise<Response> =>
})
: formatValue;
} else {
return getReferenceVariableValue({
const value = getReferenceVariableValue({
value: item.value,
variables,
nodes: runtimeNodes
});
return value;
}
})();

131
packages/web/components/common/MySelect/MultipleRowSelect.tsx
View File

@ -1,9 +1,10 @@
import React, { useRef, useCallback, useState } from 'react';
import { Button, useDisclosure, Box, Flex, useOutsideClick } from '@chakra-ui/react';
import { Button, useDisclosure, Box, Flex, useOutsideClick, Checkbox } from '@chakra-ui/react';
import { MultipleSelectProps } from './type';
import EmptyTip from '../EmptyTip';
import { useTranslation } from 'next-i18next';
import MyIcon from '../../common/Icon';
import { ChevronDownIcon } from '@chakra-ui/icons';
const MultipleRowSelect = ({
placeholder,
@ -14,12 +15,14 @@ const MultipleRowSelect = ({
maxH = 300,
onSelect,
popDirection = 'bottom',
styles
styles,
isArray = false
}: MultipleSelectProps) => {
const { t } = useTranslation();
const ref = useRef<HTMLDivElement>(null);
const { isOpen, onOpen, onClose } = useDisclosure();
const [cloneValue, setCloneValue] = useState(value);
const [navigationPath, setNavigationPath] = useState<string[]>([]);
useOutsideClick({
ref: ref,
@ -28,59 +31,80 @@ const MultipleRowSelect = ({
const RenderList = useCallback(
({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
const selectedValue = cloneValue[index];
const selectedIndex = list.findIndex((item) => item.value === selectedValue);
const currentNav = navigationPath[index];
const selectedIndex = list.findIndex((item) => item.value === currentNav);
const children = list[selectedIndex]?.children || [];
const hasChildren = list.some((item) => item.children && item.children?.length > 0);
const handleSelect = (item: any) => {
if (hasChildren) {
// Update parent menu path
const newPath = [...navigationPath];
newPath[index] = item.value;
// Clear sub paths
newPath.splice(index + 1);
setNavigationPath(newPath);
} else {
if (!isArray) {
onSelect([navigationPath[0], item.value]);
onClose();
} else {
const parentValue = navigationPath[0];
const newValues = [...value];
const newValue = [parentValue, item.value];
if (newValues.some((v) => v[0] === parentValue && v[1] === item.value)) {
onSelect(newValues.filter((v) => !(v[0] === parentValue && v[1] === item.value)));
} else {
onSelect([...newValues, newValue]);
}
}
}
};
return (
<>
<Box
className="nowheel"
flex={'1 0 auto'}
// width={0}
px={2}
borderLeft={index !== 0 ? 'base' : 'none'}
maxH={`${maxH}px`}
overflowY={'auto'}
whiteSpace={'nowrap'}
>
{list.map((item) => (
<Flex
key={item.value}
py={2}
cursor={'pointer'}
px={2}
borderRadius={'md'}
_hover={{
bg: 'primary.50',
color: 'primary.600'
}}
onClick={() => {
const newValue = [...cloneValue];
{list.map((item) => {
const isSelected = item.value === currentNav;
const showCheckbox = isArray && index !== 0;
const isChecked =
showCheckbox &&
value.some((v) => v[1] === item.value && v[0] === navigationPath[0]);
if (item.value === selectedValue) {
newValue[index] = undefined;
setCloneValue(newValue);
onSelect(newValue);
} else {
newValue[index] = item.value;
setCloneValue(newValue);
if (!hasChildren) {
onSelect(newValue);
onClose();
}
}
}}
{...(item.value === selectedValue
? {
color: 'primary.600'
}
: {})}
>
{item.label}
</Flex>
))}
return (
<Flex
key={item.value}
py={2}
cursor={'pointer'}
px={2}
borderRadius={'md'}
_hover={{
bg: 'primary.50',
color: 'primary.600'
}}
onClick={() => handleSelect(item)}
{...(isSelected ? { color: 'primary.600' } : {})}
>
{showCheckbox && (
<Checkbox
isChecked={isChecked}
icon={<MyIcon name={'common/check'} w={'12px'} />}
mr={1}
/>
)}
{item.label}
</Flex>
);
})}
{list.length === 0 && (
<EmptyTip
text={emptyTip ?? t('common:common.MultipleRowSelect.No data')}
@ -93,28 +117,39 @@ const MultipleRowSelect = ({
</>
);
},
[cloneValue]
[navigationPath, value, isArray, onSelect]
);
const onOpenSelect = useCallback(() => {
setCloneValue(value);
setNavigationPath(isArray ? [] : [value[0]?.[0], value[0]?.[1]]);
onOpen();
}, [value, onOpen]);
}, [value, isArray, onOpen]);
return (
<Box ref={ref} position={'relative'}>
<Button
<Flex
justifyContent={'space-between'}
alignItems={'center'}
overflow={'auto'}
width={'100%'}
variant={'whitePrimaryOutline'}
size={'lg'}
fontSize={'sm'}
px={3}
py={1}
minH={10}
maxH={24}
outline={'none'}
rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
border={'1px solid'}
borderRadius={'md'}
bg={'white'}
_active={{
transform: 'none'
}}
_hover={{
borderColor: 'primary.500'
}}
{...(isOpen
? {
borderColor: 'primary.600',
@ -127,9 +162,13 @@ const MultipleRowSelect = ({
})}
{...styles}
onClick={() => (isOpen ? onClose() : onOpenSelect())}
className="nowheel"
>
<Box>{label ?? placeholder}</Box>
</Button>
<Flex alignItems={'center'} ml={1}>
<ChevronDownIcon />
</Flex>
</Flex>
{isOpen && (
<Box
position={'absolute'}

1
packages/web/components/common/MySelect/type.d.ts vendored
View File

@ -14,4 +14,5 @@ export type MultipleSelectProps<T = any> = {
onSelect: (val: any[]) => void;
styles?: ButtonProps;
popDirection?: 'top' | 'bottom';
isArray?: boolean;
};

17
projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
View File

@ -24,6 +24,7 @@ import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
import { useDeepCompareEffect } from 'ahooks';
import { VariableItemType } from '@fastgpt/global/core/app/type';
import MyTextarea from '@/components/common/Textarea/MyTextarea';
import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
export const VariableInputItem = ({
item,
@ -108,23 +109,15 @@ export const VariableInputItem = ({
control={control}
name={`variables.${item.key}`}
rules={{ required: item.required, min: item.min, max: item.max }}
render={({ field: { ref, value, onChange } }) => (
<NumberInput
render={({ field: { value, onChange } }) => (
<MyNumberInput
step={1}
min={item.min}
max={item.max}
bg={'white'}
rounded={'md'}
clampValueOnBlur={false}
value={value}
onChange={(valueString) => onChange(Number(valueString))}
>
<NumberInputField ref={ref} bg={'white'} />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
onChange={onChange}
/>
)}
/>
)}

7
projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/RenderInput.tsx
View File

@ -80,7 +80,7 @@ const RenderInput = () => {
setRestartData(e);
onNewChat?.();
},
[onNewChat]
[onNewChat, setRestartData]
);
const formatPluginInputs = useMemo(() => {
@ -101,12 +101,12 @@ const RenderInput = () => {
useEffect(() => {
// Set config default value
if (histories.length === 0) {
// Restart
if (restartData) {
reset(restartData);
setRestartData(undefined);
return;
}
const defaultFormValues = formatPluginInputs.reduce(
(acc, input) => {
acc[input.key] = input.defaultValue;
@ -160,7 +160,8 @@ const RenderInput = () => {
variables: historyVariables,
files: historyFileList
});
}, [histories.length]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [histories]);
const [uploading, setUploading] = useState(false);

55
projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/renderPluginInput.tsx
View File

@ -1,15 +1,4 @@
import {
Box,
Button,
Flex,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberInputStepper,
Switch,
Textarea
} from '@chakra-ui/react';
import { Box, Button, Flex, Switch, Textarea } from '@chakra-ui/react';
import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io';
@ -27,17 +16,21 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useEffect, useMemo } from 'react';
import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
import { useFieldArray } from 'react-hook-form';
import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
import { isEqual } from 'lodash';
const JsonEditor = dynamic(() => import('@fastgpt/web/components/common/Textarea/JsonEditor'));
const FileSelector = ({
input,
setUploading,
onChange
onChange,
value
}: {
input: FlowNodeInputItemType;
setUploading: React.Dispatch<React.SetStateAction<boolean>>;
onChange: (...event: any[]) => void;
value: any;
}) => {
const { t } = useTranslation();
const { variablesForm, histories, chatId, outLinkAuthData } = useContextSelector(
@ -56,7 +49,8 @@ const FileSelector = ({
uploadFiles,
onOpenSelectFile,
onSelectFile,
removeFiles
removeFiles,
replaceFiles
} = useFileUpload({
outLinkAuthData,
chatId: chatId || '',
@ -68,6 +62,22 @@ const FileSelector = ({
// @ts-ignore
fileCtrl
});
useEffect(() => {
if (!Array.isArray(value)) {
replaceFiles([]);
return;
}
// compare file names and update if different
const valueFileNames = value.map((item) => item.name);
const currentFileNames = fileList.map((item) => item.name);
if (!isEqual(valueFileNames, currentFileNames)) {
replaceFiles(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
const isDisabledInput = histories.length > 0;
useRequest2(uploadFiles, {
manual: false,
@ -151,7 +161,9 @@ const RenderPluginInput = ({
);
}
if (inputType === FlowNodeInputTypeEnum.fileSelect) {
return <FileSelector onChange={onChange} input={input} setUploading={setUploading} />;
return (
<FileSelector onChange={onChange} input={input} setUploading={setUploading} value={value} />
);
}
if (input.valueType === WorkflowIOValueTypeEnum.string) {
@ -169,20 +181,17 @@ const RenderPluginInput = ({
}
if (input.valueType === WorkflowIOValueTypeEnum.number) {
return (
<NumberInput
<MyNumberInput
step={1}
min={input.min}
max={input.max}
bg={'myGray.50'}
isDisabled={isDisabled}
isInvalid={isInvalid}
>
<NumberInputField value={value} onChange={onChange} defaultValue={input.defaultValue} />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
value={value}
onChange={onChange}
defaultValue={input.defaultValue}
/>
);
}
if (input.valueType === WorkflowIOValueTypeEnum.boolean) {

53
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoop.tsx
View File

@ -15,15 +15,26 @@ import RenderInput from '../render/RenderInput';
import { Box } from '@chakra-ui/react';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
import RenderOutput from '../render/RenderOutput';
import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
import {
ArrayTypeMap,
NodeInputKeyEnum,
VARIABLE_NODE_ID,
WorkflowIOValueTypeEnum
} from '@fastgpt/global/core/workflow/constants';
import { Input_Template_Children_Node_List } from '@fastgpt/global/core/workflow/template/input';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
import { cloneDeep } from 'lodash';
import { getWorkflowGlobalVariables } from '@/web/core/workflow/utils';
import { AppContext } from '../../../../context';
const NodeLoop = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const { t } = useTranslation();
const { nodeId, inputs, outputs, isFolded } = data;
const { onChangeNode, nodeList } = useContextSelector(WorkflowContext, (v) => v);
const { appDetail } = useContextSelector(AppContext, (v) => v);
const arrayValue = inputs.find((input) => input.key === NodeInputKeyEnum.loopInputArray)?.value;
const { nodeWidth, nodeHeight } = useMemo(() => {
return {
@ -37,6 +48,42 @@ const NodeLoop = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
);
}, [nodeId, nodeList]);
// Detect and update array input type
useEffect(() => {
const inputsClone = cloneDeep(inputs);
const globalVariables = getWorkflowGlobalVariables({
nodes: nodeList,
chatConfig: appDetail.chatConfig
});
let arrayType: WorkflowIOValueTypeEnum | undefined;
if (arrayValue[0]?.[0] === VARIABLE_NODE_ID) {
arrayType = globalVariables.find((item) => item.key === arrayValue[0]?.[1])?.valueType;
} else {
const node = nodeList.find((node) => node.nodeId === arrayValue[0]?.[0]);
const output = node?.outputs.find((output) => output.id === arrayValue[0]?.[1]);
arrayType = output?.valueType;
}
const arrayInput = inputsClone.find((input) => input.key === NodeInputKeyEnum.loopInputArray);
if (!arrayInput) {
return;
}
onChangeNode({
nodeId,
type: 'updateInput',
key: NodeInputKeyEnum.loopInputArray,
value: {
...arrayInput,
valueType: arrayType
? ArrayTypeMap[arrayType as keyof typeof ArrayTypeMap]
: WorkflowIOValueTypeEnum.arrayAny
}
});
}, [appDetail.chatConfig, arrayValue, inputs, nodeId, nodeList, onChangeNode]);
useEffect(() => {
onChangeNode({
nodeId,
@ -47,7 +94,7 @@ const NodeLoop = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
value: JSON.parse(childrenNodeIdList)
}
});
}, [childrenNodeIdList]);
}, [childrenNodeIdList, nodeId, onChangeNode]);
const Render = useMemo(() => {
return (
@ -80,7 +127,7 @@ const NodeLoop = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
</Container>
</NodeCard>
);
}, [selected, nodeWidth, nodeHeight, data, t, nodeId, inputs, outputs]);
}, [selected, isFolded, nodeWidth, nodeHeight, data, t, nodeId, inputs, outputs]);
return Render;
};

16
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoopStart.tsx
View File

@ -19,8 +19,7 @@ const typeMap = {
[WorkflowIOValueTypeEnum.arrayString]: WorkflowIOValueTypeEnum.string,
[WorkflowIOValueTypeEnum.arrayNumber]: WorkflowIOValueTypeEnum.number,
[WorkflowIOValueTypeEnum.arrayBoolean]: WorkflowIOValueTypeEnum.boolean,
[WorkflowIOValueTypeEnum.arrayObject]: WorkflowIOValueTypeEnum.object,
[WorkflowIOValueTypeEnum.arrayAny]: WorkflowIOValueTypeEnum.any
[WorkflowIOValueTypeEnum.arrayObject]: WorkflowIOValueTypeEnum.object
};
const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
@ -39,12 +38,7 @@ const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
const parentArrayInput = parentNode?.inputs.find(
(input) => input.key === NodeInputKeyEnum.loopInputArray
);
return parentArrayInput?.value
? (nodeList
.find((node) => node.nodeId === parentArrayInput?.value[0])
?.outputs.find((output) => output.id === parentArrayInput?.value[1])
?.valueType as keyof typeof typeMap)
: undefined;
return typeMap[parentArrayInput?.valueType as keyof typeof typeMap];
}, [loopStartNode?.parentNodeId, nodeList]);
// Auth update loopStartInput output
@ -71,7 +65,7 @@ const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
key: NodeOutputKeyEnum.loopStartInput,
label: t('workflow:Array_element'),
type: FlowNodeOutputTypeEnum.static,
valueType: typeMap[loopItemInputType as keyof typeof typeMap]
valueType: loopItemInputType
}
});
}
@ -83,7 +77,7 @@ const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
key: NodeOutputKeyEnum.loopStartInput,
value: {
...loopArrayOutput,
valueType: typeMap[loopItemInputType as keyof typeof typeMap]
valueType: loopItemInputType
}
});
}
@ -128,7 +122,7 @@ const NodeLoopStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
{t('workflow:Array_element')}
</Flex>
</Td>
<Td>{typeMap[loopItemInputType]}</Td>
<Td>{loopItemInputType}</Td>
</Tr>
</Tbody>
</Table>

4
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeDatasetConcat.tsx
View File

@ -48,7 +48,7 @@ const NodeDatasetConcat = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
});
const onSelect = useCallback(
(e: ReferenceValueProps) => {
(e: ReferenceValueProps | ReferenceValueProps[]) => {
const workflowStartNode = nodeList.find(
(node) => node.flowNodeType === FlowNodeTypeEnum.workflowStart
);
@ -60,7 +60,7 @@ const NodeDatasetConcat = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
value: {
...inputChildren,
value:
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1])
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1] as string)
? [VARIABLE_NODE_ID, e[1]]
: e
}

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
View File

@ -324,7 +324,7 @@ const Reference = ({
placeholder={t('common:select_reference_variable')}
list={referenceList}
value={formatValue}
onSelect={onSelect}
onSelect={onSelect as any}
/>
);
};

5
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/PluginOutput.tsx
View File

@ -118,13 +118,13 @@ function Reference({
const [editField, setEditField] = useState<FlowNodeInputItemType>();
const onSelect = useCallback(
(e: ReferenceValueProps) => {
(e: ReferenceValueProps | ReferenceValueProps[]) => {
const workflowStartNode = nodeList.find(
(node) => node.flowNodeType === FlowNodeTypeEnum.workflowStart
);
const value =
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1])
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1] as string)
? [VARIABLE_NODE_ID, e[1]]
: e;
@ -219,6 +219,7 @@ function Reference({
list={referenceList}
value={formatValue}
onSelect={onSelect}
isArray={input.valueType?.includes('array')}
/>
{!!editField && (

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeVariableUpdate.tsx
View File

@ -326,7 +326,7 @@ const Reference = ({
placeholder={t('common:select_reference_variable')}
list={referenceList}
value={formatValue}
onSelect={onSelect}
onSelect={onSelect as any}
/>
);
};

2
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
View File

@ -365,7 +365,7 @@ const NodeCard = (props: Props) => {
>
<NodeDebugResponse nodeId={nodeId} debugResult={debugResult} />
{Header}
<Flex flexDirection={'column'} flex={1} my={4} gap={2}>
<Flex flexDirection={'column'} flex={1} my={!isFolded ? 4 : 0} gap={2}>
{!isFolded ? children : <Box h={4} />}
</Flex>
{RenderHandle}

35
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/DynamicInputs/index.tsx
View File

@ -12,7 +12,7 @@ import { WorkflowContext } from '@/pages/app/detail/components/WorkflowComponent
import { defaultInput } from '../../FieldEditModal';
import { getInputComponentProps } from '@fastgpt/global/core/workflow/node/io/utils';
import { VARIABLE_NODE_ID } from '@fastgpt/global/core/workflow/constants';
import { ReferSelector, useReference } from '../Reference';
import { isReference, ReferSelector, useReference } from '../Reference';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
import ValueTypeLabel from '../../../ValueTypeLabel';
import MyIcon from '@fastgpt/web/components/common/Icon';
@ -126,13 +126,13 @@ function Reference({
const [editField, setEditField] = useState<FlowNodeInputItemType>();
const onSelect = useCallback(
(e: ReferenceValueProps) => {
(e: ReferenceValueProps | ReferenceValueProps[]) => {
const workflowStartNode = nodeList.find(
(node) => node.flowNodeType === FlowNodeTypeEnum.workflowStart
);
const newValue =
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1])
e[0] === workflowStartNode?.id && !isWorkflowStartOutput(e[1] as string)
? [VARIABLE_NODE_ID, e[1]]
: e;
@ -155,18 +155,42 @@ function Reference({
value: inputChildren.value
});
// handle array and non-array type conversion
const getValueTypeChange = useCallback(
(data: FlowNodeInputItemType, oldType: string | undefined) => {
const newType = data.valueType;
if (oldType === newType) return data.value;
if (!oldType?.includes('array') && newType?.includes('array')) {
return Array.isArray(data.value) && data.value.every((item) => isReference(item))
? data.value
: [data.value];
}
if (oldType?.includes('array') && !newType?.includes('array')) {
return Array.isArray(data.value) ? data.value[0] : data.value;
}
return data.value;
},
[]
);
const onUpdateField = useCallback(
({ data }: { data: FlowNodeInputItemType }) => {
if (!data.key) return;
const updatedValue = getValueTypeChange(data, inputChildren.valueType);
onChangeNode({
nodeId,
type: 'replaceInput',
key: inputChildren.key,
value: data
value: {
...data,
value: updatedValue
}
});
},
[inputChildren.key, nodeId, onChangeNode]
[inputChildren, nodeId, onChangeNode, getValueTypeChange]
);
const onDel = useCallback(() => {
onChangeNode({
@ -212,6 +236,7 @@ function Reference({
list={referenceList}
value={formatValue}
onSelect={onSelect}
isArray={inputChildren.valueType?.includes('array')}
/>
{!!editField && !!item.customInputConfig && (

168
projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Reference.tsx
View File

@ -22,7 +22,7 @@ const MultipleRowSelect = dynamic(
const Avatar = dynamic(() => import('@fastgpt/web/components/common/Avatar'));
type SelectProps = {
value?: ReferenceValueProps;
value?: ReferenceValueProps[];
placeholder?: string;
list: {
label: string | React.ReactNode;
@ -33,18 +33,25 @@ type SelectProps = {
valueType?: WorkflowIOValueTypeEnum;
}[];
}[];
onSelect: (val: ReferenceValueProps) => void;
onSelect: (val: ReferenceValueProps | ReferenceValueProps[]) => void;
popDirection?: 'top' | 'bottom';
styles?: ButtonProps;
isArray?: boolean;
};
export const isReference = (val: any) =>
Array.isArray(val) &&
val.length === 2 &&
typeof val[0] === 'string' &&
typeof val[1] === 'string';
const Reference = ({ item, nodeId }: RenderInputProps) => {
const { t } = useTranslation();
const onChangeNode = useContextSelector(WorkflowContext, (v) => v.onChangeNode);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const onSelect = useCallback(
(e: ReferenceValueProps) => {
(e: ReferenceValueProps | ReferenceValueProps[]) => {
const workflowStartNode = nodeList.find(
(node) => node.flowNodeType === FlowNodeTypeEnum.workflowStart
);
@ -92,6 +99,7 @@ const Reference = ({ item, nodeId }: RenderInputProps) => {
value={formatValue}
onSelect={onSelect}
popDirection={popDirection}
isArray={item.valueType?.includes('array')}
/>
);
};
@ -111,6 +119,8 @@ export const useReference = ({
const { appDetail } = useContextSelector(AppContext, (v) => v);
const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
const edges = useContextSelector(WorkflowContext, (v) => v.edges);
const isArray = valueType?.includes('array');
const currentType = isArray ? valueType.replace('array', '').toLowerCase() : valueType;
const referenceList = useMemo(() => {
const sourceNodes = computedNodeInputReference({
@ -129,8 +139,8 @@ export const useReference = ({
return {
label: (
<Flex alignItems={'center'}>
<Avatar src={node.avatar} w={'1.25rem'} borderRadius={'xs'} />
<Box ml={2}>{t(node.name as any)}</Box>
<Avatar src={node.avatar} w={isArray ? '1rem' : '1.25rem'} borderRadius={'xs'} />
<Box ml={1}>{t(node.name as any)}</Box>
</Flex>
),
value: node.nodeId,
@ -139,10 +149,20 @@ export const useReference = ({
(output) =>
valueType === WorkflowIOValueTypeEnum.any ||
output.valueType === WorkflowIOValueTypeEnum.any ||
currentType === output.valueType ||
// array
output.valueType === valueType ||
// When valueType is arrayAny, return all array type outputs
(valueType === WorkflowIOValueTypeEnum.arrayAny &&
output.valueType?.includes('array'))
[
WorkflowIOValueTypeEnum.arrayString,
WorkflowIOValueTypeEnum.arrayNumber,
WorkflowIOValueTypeEnum.arrayBoolean,
WorkflowIOValueTypeEnum.arrayObject,
WorkflowIOValueTypeEnum.string,
WorkflowIOValueTypeEnum.number,
WorkflowIOValueTypeEnum.boolean,
WorkflowIOValueTypeEnum.object
].includes(output.valueType as WorkflowIOValueTypeEnum))
)
.filter((output) => output.id !== NodeOutputKeyEnum.addOutputParam)
.map((output) => {
@ -157,16 +177,14 @@ export const useReference = ({
.filter((item) => item.children.length > 0);
return list;
}, [appDetail.chatConfig, edges, nodeId, nodeList, t, valueType]);
}, [appDetail.chatConfig, currentType, edges, isArray, nodeId, nodeList, t, valueType]);
const formatValue = useMemo(() => {
if (
Array.isArray(value) &&
value.length === 2 &&
typeof value[0] === 'string' &&
typeof value[1] === 'string'
) {
return value as ReferenceValueProps;
// convert origin reference [variableId, outputId] to new reference [[variableId, outputId], ...]
if (isReference(value)) {
return [value] as ReferenceValueProps[];
} else if (Array.isArray(value) && value.every((item) => isReference(item))) {
return value as ReferenceValueProps[];
}
return undefined;
}, [value]);
@ -176,40 +194,115 @@ export const useReference = ({
formatValue
};
};
export const ReferSelector = ({
const ReferSelectorComponent = ({
placeholder,
value,
list = [],
onSelect,
popDirection
popDirection,
isArray
}: SelectProps) => {
const selectItemLabel = useMemo(() => {
if (!value) {
const { t } = useTranslation();
const selectValue = useMemo(() => {
if (!value || value.every((item) => !item || item.every((subItem) => !subItem))) {
return;
}
const firstColumn = list.find((item) => item.value === value[0]);
if (!firstColumn) {
return;
}
const secondColumn = firstColumn.children.find((item) => item.value === value[1]);
if (!secondColumn) {
return;
}
return [firstColumn, secondColumn];
return value.map((valueItem) => {
const firstColumn = list.find((item) => item.value === valueItem[0]);
if (!firstColumn) {
return;
}
const secondColumn = firstColumn.children.find((item) => item.value === valueItem[1]);
if (!secondColumn) {
return;
}
return [firstColumn, secondColumn];
});
}, [list, value]);
const Render = useMemo(() => {
return (
<MultipleRowSelect
label={
selectItemLabel ? (
<Flex alignItems={'center'}>
{selectItemLabel[0].label}
<MyIcon name={'core/chat/chevronRight'} mx={1} w={4} />
{selectItemLabel[1].label}
selectValue && selectValue.length > 0 ? (
<Flex
gap={2}
flexWrap={isArray ? 'wrap' : undefined}
alignItems={'center'}
fontSize={'14px'}
>
{isArray ? (
// [[variableId, outputId], ...]
selectValue.map((item, index) => {
const isInvalidItem = item === undefined;
return (
<Flex
alignItems={'center'}
key={index}
bg={isInvalidItem ? 'red.50' : 'primary.50'}
color={isInvalidItem ? 'red.600' : 'myGray.900'}
py={1}
px={1.5}
rounded={'sm'}
>
{isInvalidItem ? (
t('common:invalid_variable')
) : (
<>
{item?.[0].label}
<MyIcon
name={'common/rightArrowLight'}
mx={1}
w={'12px'}
color={'myGray.500'}
/>
{item?.[1].label}
</>
)}
<MyIcon
name={'common/closeLight'}
w={'16px'}
ml={1}
cursor={'pointer'}
color={'myGray.500'}
_hover={{
color: 'primary.600'
}}
onClick={(e) => {
e.stopPropagation();
if (isInvalidItem) {
const filteredValue = value?.filter((_, i) => i !== index);
onSelect(filteredValue as any);
return;
}
const filteredValue = value?.filter(
(val) => val[0] !== item?.[0].value || val[1] !== item?.[1].value
);
filteredValue && onSelect(filteredValue);
}}
/>
</Flex>
);
})
) : // [variableId, outputId]
selectValue[0] ? (
<Flex py={1} pl={1}>
{selectValue[0][0].label}
<MyIcon name={'common/rightArrowLight'} mx={1} w={'12px'} color={'myGray.500'} />
{selectValue[0][1].label}
</Flex>
) : (
<Box pl={2} py={1} fontSize={'14px'}>
{placeholder}
</Box>
)}
</Flex>
) : (
<Box>{placeholder}</Box>
<Box pl={2} py={1} fontSize={'14px'}>
{placeholder}
</Box>
)
}
value={value as any[]}
@ -218,9 +311,14 @@ export const ReferSelector = ({
onSelect(e as ReferenceValueProps);
}}
popDirection={popDirection}
isArray={isArray}
/>
);
}, [list, onSelect, placeholder, popDirection, selectItemLabel, value]);
}, [isArray, list, onSelect, placeholder, popDirection, selectValue, t, value]);
return Render;
};
ReferSelectorComponent.displayName = 'ReferSelector';
export const ReferSelector = React.memo(ReferSelectorComponent);

45
projects/app/src/web/core/workflow/utils.ts
View File

@ -327,24 +327,37 @@ export const checkWorkflowNodeAndConnection = ({
// check reference invalid
const renderType = input.renderTypeList[input.selectedTypeIndex || 0];
if (renderType === FlowNodeInputTypeEnum.reference && input.required) {
if (!input.value || !Array.isArray(input.value) || input.value.length !== 2) {
return true;
const checkReference = (value: [string, string]) => {
if (value[0] === VARIABLE_NODE_ID) {
return false;
}
const sourceNode = nodes.find((item) => item.data.nodeId === value[0]);
if (!sourceNode) {
return true;
}
const sourceOutput = sourceNode.data.outputs.find((item) => item.id === value[1]);
return !sourceOutput;
};
// Old format
if (
Array.isArray(input.value) &&
input.value.length === 2 &&
typeof input.value[0] === 'string' &&
typeof input.value[1] === 'string'
) {
return checkReference(input.value as [string, string]);
}
// variable key not need to check
if (input.value[0] === VARIABLE_NODE_ID) {
return false;
}
// Can not find key
const sourceNode = nodes.find((item) => item.data.nodeId === input.value[0]);
if (!sourceNode) {
return true;
}
const sourceOutput = sourceNode.data.outputs.find((item) => item.id === input.value[1]);
if (!sourceOutput) {
return true;
}
// New format
return input.value.some((inputItem: ReferenceValueProps) => {
if (!Array.isArray(inputItem) || inputItem.length !== 2) {
return true;
}
return checkReference(inputItem as [string, string]);
});
}
return false;
})