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
2024-11-05 13:02:09 +08:00
parent 0d494fde45
commit b0a14c585d
19 changed files with 442 additions and 176 deletions
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
+++ b/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 } }) => (
-            <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}
+            />
          )}
        />
      )}
--- a/projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/RenderInput.tsx
+++ b/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);

--- a/projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/renderPluginInput.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/renderPluginInput.tsx
@@ -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) {
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoop.tsx
+++ b/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;
 };
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/Loop/NodeLoopStart.tsx
+++ b/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.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>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeDatasetConcat.tsx
+++ b/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
            }
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
+++ b/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}
    />
  );
 };
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/PluginOutput.tsx
+++ b/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 && (
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeVariableUpdate.tsx
+++ b/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}
    />
  );
 };
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
+++ b/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}
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/DynamicInputs/index.tsx
+++ b/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 && (
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderInput/templates/Reference.tsx
+++ b/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'} />
-              <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);
--- a/projects/app/src/web/core/workflow/utils.ts
+++ b/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) {
-            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;
      })