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

* 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

packages/global/core/workflow/constants.ts

@@ -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
+};

packages/global/core/workflow/runtime/utils.ts

@@ -235,9 +235,9 @@ export const getReferenceVariableValue = ({
   variables: Record<string, any>;
 }) => {
   const nodeIds = nodes.map((node) => node.nodeId);
-  if (!isReferenceValue(value, nodeIds)) {
+
-    return value;
+  // handle single reference value
-  }
+  if (isReferenceValue(value, nodeIds)) {
     const sourceNodeId = value[0];
     const outputId = value[1];
 
@@ -246,14 +246,46 @@ export const getReferenceVariableValue = ({
     }
 
     const node = nodes.find((node) => node.nodeId === sourceNodeId);
+    if (!node) {
+      return undefined;
+    }
 
+    return node.outputs.find((output) => output.id === outputId)?.value;
+  }
+
+  // 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];
+      }
+
+      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 outputValue;
+    return result.flat();
+  }
+
+  return value;
 };
 
 export const textAdaptGptResponse = ({

packages/global/core/workflow/template/system/datasetConcat.ts

@@ -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

packages/service/core/workflow/dispatch/tools/runUpdateVar.ts

@@ -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;
       }
     })();
 

packages/web/components/common/MySelect/MultipleRowSelect.tsx

@@ -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,24 +31,56 @@ const MultipleRowSelect = ({
 
   const RenderList = useCallback(
     ({ index, list }: { index: number; list: MultipleSelectProps['list'] }) => {
-      const selectedValue = cloneValue[index];
+      const currentNav = navigationPath[index];
-      const selectedIndex = list.findIndex((item) => item.value === selectedValue);
+      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) => (
+            {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]);
+
+              return (
                 <Flex
                   key={item.value}
                   py={2}
@@ -56,31 +91,20 @@ const MultipleRowSelect = ({
                     bg: 'primary.50',
                     color: 'primary.600'
                   }}
-                onClick={() => {
+                  onClick={() => handleSelect(item)}
-                  const newValue = [...cloneValue];
+                  {...(isSelected ? { color: 'primary.600' } : {})}
-
-                  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'
-                    }
-                  : {})}
                 >
+                  {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'}

packages/web/components/common/MySelect/type.d.ts

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

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

@@ -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 } }) => (
+          render={({ field: { value, onChange } }) => (
-            <NumberInput
+            <MyNumberInput
               step={1}
               min={item.min}
               max={item.max}
               bg={'white'}
-              rounded={'md'}
-              clampValueOnBlur={false}
               value={value}
-              onChange={(valueString) => onChange(Number(valueString))}
+              onChange={onChange}
-            >
+            />
-              <NumberInputField ref={ref} bg={'white'} />
-              <NumberInputStepper>
-                <NumberIncrementStepper />
-                <NumberDecrementStepper />
-              </NumberInputStepper>
-            </NumberInput>
           )}
         />
       )}

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

@@ -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);
 

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

@@ -1,15 +1,4 @@
-import {
+import { Box, Button, Flex, Switch, Textarea } from '@chakra-ui/react';
-  Box,
-  Button,
-  Flex,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  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}
-        >
+          value={value}
-          <NumberInputField value={value} onChange={onChange} defaultValue={input.defaultValue} />
+          onChange={onChange}
-          <NumberInputStepper>
+          defaultValue={input.defaultValue}
-            <NumberIncrementStepper />
+        />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
       );
     }
     if (input.valueType === WorkflowIOValueTypeEnum.boolean) {

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

@@ -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;
 };

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

@@ -19,8 +19,7 @@ const typeMap = {
   [WorkflowIOValueTypeEnum.arrayString]: WorkflowIOValueTypeEnum.string,
   [WorkflowIOValueTypeEnum.arrayNumber]: WorkflowIOValueTypeEnum.number,
   [WorkflowIOValueTypeEnum.arrayBoolean]: WorkflowIOValueTypeEnum.boolean,
-  [WorkflowIOValueTypeEnum.arrayObject]: WorkflowIOValueTypeEnum.object,
+  [WorkflowIOValueTypeEnum.arrayObject]: WorkflowIOValueTypeEnum.object
-  [WorkflowIOValueTypeEnum.arrayAny]: WorkflowIOValueTypeEnum.any
 };
 
 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
+    return typeMap[parentArrayInput?.valueType as keyof typeof typeMap];
-      ? (nodeList
-          .find((node) => node.nodeId === parentArrayInput?.value[0])
-          ?.outputs.find((output) => output.id === parentArrayInput?.value[1])
-          ?.valueType as keyof typeof typeMap)
-      : undefined;
   }, [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>

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

@@ -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
             }

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

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

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

@@ -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 && (

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

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

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

@@ -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}

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

@@ -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 && (

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

@@ -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'} />
+              <Avatar src={node.avatar} w={isArray ? '1rem' : '1.25rem'} borderRadius={'xs'} />
-              <Box ml={2}>{t(node.name as any)}</Box>
+              <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 (
+    // convert origin reference [variableId, outputId] to new reference [[variableId, outputId], ...]
-      Array.isArray(value) &&
+    if (isReference(value)) {
-      value.length === 2 &&
+      return [value] as ReferenceValueProps[];
-      typeof value[0] === 'string' &&
+    } else if (Array.isArray(value) && value.every((item) => isReference(item))) {
-      typeof value[1] === 'string'
+      return value as ReferenceValueProps[];
-    ) {
-      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(() => {
+  const { t } = useTranslation();
-    if (!value) {
+
+  const selectValue = useMemo(() => {
+    if (!value || value.every((item) => !item || item.every((subItem) => !subItem))) {
       return;
     }
-    const firstColumn = list.find((item) => item.value === value[0]);
+    return value.map((valueItem) => {
+      const firstColumn = list.find((item) => item.value === valueItem[0]);
       if (!firstColumn) {
         return;
       }
-    const secondColumn = firstColumn.children.find((item) => item.value === value[1]);
+      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 ? (
+          selectValue && selectValue.length > 0 ? (
-            <Flex alignItems={'center'}>
+            <Flex
-              {selectItemLabel[0].label}
+              gap={2}
-              <MyIcon name={'core/chat/chevronRight'} mx={1} w={4} />
+              flexWrap={isArray ? 'wrap' : undefined}
-              {selectItemLabel[1].label}
+              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>{placeholder}</Box>
+                <Box pl={2} py={1} fontSize={'14px'}>
+                  {placeholder}
+                </Box>
+              )}
+            </Flex>
+          ) : (
+            <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);

projects/app/src/web/core/workflow/utils.ts

@@ -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) {
+          const checkReference = (value: [string, string]) => {
-            return true;
+            if (value[0] === VARIABLE_NODE_ID) {
-          }
-
-          // 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 === value[0]);
-          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) {
+            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]);
+          }
+
+          // 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;
       })