feat: support bool type variable frontend (#24437)

Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>

web/app/components/workflow/nodes/start/components/var-item.tsx

@@ -19,7 +19,7 @@ type Props = {
   className?: string
   readonly: boolean
   payload: InputVar
-  onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
+  onChange?: (item: InputVar, moreInfo?: MoreInfo) => boolean
   onRemove?: () => void
   rightContent?: React.JSX.Element
   varKeys?: string[]
@@ -31,7 +31,7 @@ const VarItem: FC<Props> = ({
   className,
   readonly,
   payload,
-  onChange = noop,
+  onChange = () => true,
   onRemove = noop,
   rightContent,
   varKeys = [],
@@ -48,7 +48,9 @@ const VarItem: FC<Props> = ({
   }] = useBoolean(false)
 
   const handlePayloadChange = useCallback((payload: InputVar, moreInfo?: MoreInfo) => {
-    onChange(payload, moreInfo)
+    const isValid = onChange(payload, moreInfo)
+    if(!isValid)
+      return
     hideEditVarModal()
   }, [onChange, hideEditVarModal])
   return (

web/app/components/workflow/nodes/start/components/var-list.tsx

@@ -9,6 +9,8 @@ import { v4 as uuid4 } from 'uuid'
 import { ReactSortable } from 'react-sortablejs'
 import { RiDraggable } from '@remixicon/react'
 import cn from '@/utils/classnames'
+import { hasDuplicateStr } from '@/utils/var'
+import Toast from '@/app/components/base/toast'
 
 type Props = {
   readonly: boolean
@@ -28,7 +30,26 @@ const VarList: FC<Props> = ({
       const newList = produce(list, (draft) => {
         draft[index] = payload
       })
+      let errorMsgKey = ''
+      let typeName = ''
+      if (hasDuplicateStr(newList.map(item => item.variable))) {
+        errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+        typeName = 'appDebug.variableConfig.varName'
+      }
+      else if (hasDuplicateStr(newList.map(item => item.label as string))) {
+        errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+        typeName = 'appDebug.variableConfig.labelName'
+      }
+
+      if (errorMsgKey) {
+        Toast.notify({
+          type: 'error',
+          message: t(errorMsgKey, { key: t(typeName) }),
+        })
+        return false
+      }
       onChange(newList, moreInfo ? { index, payload: moreInfo } : undefined)
+      return true
     }
   }, [list, onChange])
 

web/app/components/workflow/nodes/start/panel.tsx

@@ -34,7 +34,8 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
   } = useConfig(id, data)
 
   const handleAddVarConfirm = (payload: InputVar) => {
-    handleAddVariable(payload)
+    const isValid = handleAddVariable(payload)
+    if (!isValid) return
     hideAddVarModal()
   }
 

web/app/components/workflow/nodes/start/use-config.ts

@@ -11,8 +11,12 @@ import {
   useWorkflow,
 } from '@/app/components/workflow/hooks'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
+import { hasDuplicateStr } from '@/utils/var'
+import Toast from '@/app/components/base/toast'
+import { useTranslation } from 'react-i18next'
 
 const useConfig = (id: string, payload: StartNodeType) => {
+  const { t } = useTranslation()
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
   const { handleOutVarRenameChange, isVarUsedInNodes, removeUsedVarInNodes } = useWorkflow()
   const isChatMode = useIsChatMode()
@@ -80,7 +84,27 @@ const useConfig = (id: string, payload: StartNodeType) => {
     const newInputs = produce(inputs, (draft: StartNodeType) => {
       draft.variables.push(payload)
     })
+    const newList = newInputs.variables
+    let errorMsgKey = ''
+    let typeName = ''
+    if(hasDuplicateStr(newList.map(item => item.variable))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.varName'
+    }
+    else if(hasDuplicateStr(newList.map(item => item.label as string))) {
+      errorMsgKey = 'appDebug.varKeyError.keyAlreadyExists'
+      typeName = 'appDebug.variableConfig.labelName'
+    }
+
+    if (errorMsgKey) {
+      Toast.notify({
+        type: 'error',
+        message: t(errorMsgKey, { key: t(typeName) }),
+      })
+      return false
+    }
     setInputs(newInputs)
+    return true
   }, [inputs, setInputs])
   return {
     readOnly,