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 f4dbe7c021
commit 0db0cbf376
19 changed files with 442 additions and 176 deletions
--- a/packages/global/core/workflow/constants.ts
+++ b/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
+};
--- a/packages/global/core/workflow/runtime/utils.ts
+++ b/packages/global/core/workflow/runtime/utils.ts
@@ -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 = ({
--- a/packages/global/core/workflow/template/system/datasetConcat.ts
+++ b/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
--- a/packages/service/core/workflow/dispatch/tools/runUpdateVar.ts
+++ b/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;
      }
    })();

--- a/packages/web/components/common/MySelect/MultipleRowSelect.tsx
+++ b/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,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'}
--- a/packages/web/components/common/MySelect/type.d.ts
+++ b/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;
 };