feat: workflow input node add selectMulti; MultipleSelect component (#4527)

* feat: workflow input node add selectMulti; MultipleSelect component add disabled state (#4440)

* perf: input form support multiple select

---------

Co-authored-by: mmagi <magizhang@qq.com>

packages/global/core/workflow/node/constant.ts

@@ -7,6 +7,7 @@ export enum FlowNodeInputTypeEnum { // render ui
   numberInput = 'numberInput',
   switch = 'switch', // true/false
   select = 'select',
+  multipleSelect = 'multipleSelect',
 
   // editor
   JSONEditor = 'JSONEditor',
@@ -46,6 +47,9 @@ export const FlowNodeInputMap: Record<
   [FlowNodeInputTypeEnum.select]: {
     icon: 'core/workflow/inputType/option'
   },
+  [FlowNodeInputTypeEnum.multipleSelect]: {
+    icon: 'core/workflow/inputType/option'
+  },
   [FlowNodeInputTypeEnum.switch]: {
     icon: 'core/workflow/inputType/switch'
   },

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

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   ButtonProps,
   Checkbox,
   Flex,
@@ -26,13 +27,14 @@ export type SelectProps<T = any> = {
   }[];
   value: T[];
   isSelectAll: boolean;
-  setIsSelectAll: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSelectAll?: React.Dispatch<React.SetStateAction<boolean>>;
 
   placeholder?: string;
   maxH?: number;
   itemWrap?: boolean;
   onSelect: (val: T[]) => void;
   closeable?: boolean;
+  isDisabled?: boolean;
   ScrollData?: ReturnType<typeof useScrollPagination>['ScrollData'];
 } & Omit<ButtonProps, 'onSelect'>;
 
@@ -47,6 +49,7 @@ const MultipleSelect = <T = any,>({
   ScrollData,
   isSelectAll,
   setIsSelectAll,
+  isDisabled = false,
   ...props
 }: SelectProps<T>) => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -70,7 +73,7 @@ const MultipleSelect = <T = any,>({
       // 全选状态下，value 实际上上空。
       if (isSelectAll) {
         onSelect(list.map((item) => item.value).filter((i) => i !== val));
-        setIsSelectAll(false);
+        setIsSelectAll?.(false);
         return;
       }
 
@@ -87,7 +90,7 @@ const MultipleSelect = <T = any,>({
     const hasSelected = isSelectAll || value.length > 0;
     onSelect(hasSelected ? [] : list.map((item) => item.value));
 
-    setIsSelectAll((state) => !state);
+    setIsSelectAll?.((state) => !state);
   }, [value, list, setIsSelectAll, onSelect]);
 
   const ListRender = useMemo(() => {
@@ -126,11 +129,11 @@ const MultipleSelect = <T = any,>({
   }, [value, list, isSelectAll]);
 
   return (
-    <Box>
+    <Box h={'100%'} w={'100%'}>
       <Menu
         autoSelect={false}
-        isOpen={isOpen}
-        onOpen={onOpen}
+        isOpen={isOpen && !isDisabled}
+        onOpen={isDisabled ? undefined : onOpen}
         onClose={onClose}
         strategy={'fixed'}
         matchWidth
@@ -138,21 +141,23 @@ const MultipleSelect = <T = any,>({
       >
         <MenuButton
           as={Flex}
+          h={'100%'}
           alignItems={'center'}
           ref={ref}
           px={3}
           borderRadius={'md'}
           border={'base'}
           userSelect={'none'}
-          cursor={'pointer'}
+          cursor={isDisabled ? 'not-allowed' : 'pointer'}
           _active={{
             transform: 'none'
           }}
           _hover={{
-            borderColor: 'primary.300'
+            borderColor: isDisabled ? 'myGray.200' : 'primary.300'
           }}
+          opacity={isDisabled ? 0.6 : 1}
           {...props}
-          {...(isOpen
+          {...(isOpen && !isDisabled
             ? {
                 boxShadow: '0px 0px 4px #A8DBFF',
                 borderColor: 'primary.500',

packages/web/i18n/en/workflow.json

@@ -77,6 +77,7 @@
   "ifelse.Input value": "Input Value",
   "ifelse.Select value": "Select Value",
   "input_description": "Field Description",
+  "input_type_multiple_select": "Multiple selection boxes",
   "input_variable_list": "Type / to invoke variable list",
   "intro_assigned_reply": "This module can directly reply with a specified content. Commonly used for guidance or prompts. Non-string content will be converted to string for output.",
   "intro_custom_feedback": "When this module is triggered, a feedback will be added to the current conversation record. It can be used to automatically record conversation effects, etc.",
@@ -152,6 +153,7 @@
   "response.read files": "Read Files",
   "select_an_application": "Select an Application",
   "select_another_application_to_call": "You can choose another application to call",
+  "select_default_option": "Select the default value",
   "special_array_format": "Special array format, returns an empty array when the search result is empty.",
   "start_with": "Starts With",
   "support_code_language": "Support import list: pandas，numpy",

packages/web/i18n/zh-CN/workflow.json

@@ -77,6 +77,7 @@
   "ifelse.Input value": "输入值",
   "ifelse.Select value": "选择值",
   "input_description": "字段描述",
+  "input_type_multiple_select": "多选框",
   "input_variable_list": "可输入 / 唤起变量列表",
   "intro_assigned_reply": "该模块可以直接回复一段指定的内容。常用于引导、提示。非字符串内容传入时，会转成字符串进行输出。",
   "intro_custom_feedback": "该模块被触发时，会给当前的对话记录增加一条反馈。可用于自动记录对话效果等。",
@@ -152,6 +153,7 @@
   "response.read files": "解析的文档",
   "select_an_application": "选择一个应用",
   "select_another_application_to_call": "可以选择一个其他应用进行调用",
+  "select_default_option": "选择默认值",
   "special_array_format": "特殊数组格式，搜索结果为空时，返回空数组。",
   "start_with": "开始为",
   "support_code_language": "支持import列表：pandas，numpy",
@@ -201,4 +203,4 @@
   "workflow.Switch_success": "切换成功",
   "workflow.Team cloud": "团队云端",
   "workflow.exit_tips": "您的更改尚未保存，「直接退出」将不会保存您的编辑记录。"
-}
+}

packages/web/i18n/zh-Hant/workflow.json

@@ -77,6 +77,7 @@
   "ifelse.Input value": "輸入值",
   "ifelse.Select value": "選擇值",
   "input_description": "欄位描述",
+  "input_type_multiple_select": "多選框",
   "input_variable_list": "輸入 / 叫出變數清單",
   "intro_assigned_reply": "這個模組可以直接回覆指定的內容。常用於引導、提示。非字串內容傳入時，會轉換成字串輸出。",
   "intro_custom_feedback": "當這個模組被觸發時，會在目前的對話紀錄中新增一條回饋。可以用於自動記錄對話效果等等。",
@@ -152,6 +153,7 @@
   "response.read files": "解析的檔案",
   "select_an_application": "選擇一個應用程式",
   "select_another_application_to_call": "可以選擇另一個應用程式來呼叫",
+  "select_default_option": "選擇默認值",
   "special_array_format": "特殊陣列格式，搜尋結果為空時，回傳空陣列。",
   "start_with": "開頭為",
   "support_code_language": "支援 import 列表：pandas，numpy",