fix: element of Array[string] and Array[number] and size attribution (#23074)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx

@@ -15,18 +15,21 @@ import cn from '@/utils/classnames'
 import { VarType } from '../../../types'
 
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
+import { getConditionValueAsString } from '@/app/components/workflow/nodes/utils'
 
 const VAR_INPUT_SUPPORTED_KEYS: Record<string, VarType> = {
   name: VarType.string,
   url: VarType.string,
   extension: VarType.string,
   mime_type: VarType.string,
-  related_id: VarType.number,
+  related_id: VarType.string,
+  size: VarType.number,
 }
 
 type Props = {
   condition: Condition
   onChange: (condition: Condition) => void
+  varType: VarType
   hasSubVariable: boolean
   readOnly: boolean
   nodeId: string
@@ -34,6 +37,7 @@ type Props = {
 
 const FilterCondition: FC<Props> = ({
   condition = { key: '', comparison_operator: ComparisonOperator.equal, value: '' },
+  varType,
   onChange,
   hasSubVariable,
   readOnly,
@@ -42,7 +46,7 @@ const FilterCondition: FC<Props> = ({
   const { t } = useTranslation()
   const [isFocus, setIsFocus] = useState(false)
 
-  const expectedVarType = VAR_INPUT_SUPPORTED_KEYS[condition.key]
+  const expectedVarType = condition.key ? VAR_INPUT_SUPPORTED_KEYS[condition.key] : varType
   const supportVariableInput = !!expectedVarType
 
   const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
@@ -93,6 +97,59 @@ const FilterCondition: FC<Props> = ({
     })
   }, [onChange, expectedVarType])
 
+  // Extract input rendering logic to avoid nested ternary
+  let inputElement: React.ReactNode = null
+  if (!comparisonOperatorNotRequireValue(condition.comparison_operator)) {
+    if (isSelect) {
+      inputElement = (
+        <Select
+          items={selectOptions}
+          defaultValue={isArrayValue ? (condition.value as string[])[0] : condition.value as string}
+          onSelect={item => handleChange('value')(item.value)}
+          className='!text-[13px]'
+          wrapperClassName='grow h-8'
+          placeholder='Select value'
+        />
+      )
+    }
+    else if (supportVariableInput) {
+      inputElement = (
+        <Input
+          instanceId='filter-condition-input'
+          className={cn(
+            isFocus
+              ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
+              : 'border-components-input-border-hover bg-components-input-bg-normal',
+            'w-0 grow rounded-lg border px-3 py-[6px]',
+          )}
+          value={
+            getConditionValueAsString(condition)
+          }
+          onChange={handleChange('value')}
+          readOnly={readOnly}
+          nodesOutputVars={availableVars}
+          availableNodes={availableNodesWithParent}
+          onFocusChange={setIsFocus}
+          placeholder={!readOnly ? t('workflow.nodes.http.insertVarPlaceholder')! : ''}
+          placeholderClassName='!leading-[21px]'
+        />
+      )
+    }
+    else {
+      inputElement = (
+        <input
+          type={((hasSubVariable && condition.key === 'size') || (!hasSubVariable && varType === VarType.number)) ? 'number' : 'text'}
+          className='grow rounded-lg border border-components-input-border-hover bg-components-input-bg-normal px-3 py-[6px]'
+          value={
+            getConditionValueAsString(condition)
+          }
+          onChange={e => handleChange('value')(e.target.value)}
+          readOnly={readOnly}
+        />
+      )
+    }
+  }
+
   return (
     <div>
       {hasSubVariable && (
@@ -111,46 +168,7 @@ const FilterCondition: FC<Props> = ({
           file={hasSubVariable ? { key: condition.key } : undefined}
           disabled={readOnly}
         />
-        {!comparisonOperatorNotRequireValue(condition.comparison_operator) && (
+        {inputElement}
-          <>
-            {isSelect ? (
-              <Select
-                items={selectOptions}
-                defaultValue={isArrayValue ? (condition.value as string[])[0] : condition.value as string}
-                onSelect={item => handleChange('value')(item.value)}
-                className='!text-[13px]'
-                wrapperClassName='grow h-8'
-                placeholder='Select value'
-              />
-            ) : supportVariableInput ? (
-              <Input
-                instanceId='filter-condition-input'
-                className={cn(
-                  isFocus
-                    ? 'border-components-input-border-active bg-components-input-bg-active shadow-xs'
-                    : 'border-components-input-border-hover bg-components-input-bg-normal',
-                  'w-0 grow rounded-lg border px-3 py-[6px]',
-                )}
-                value={condition.value}
-                onChange={handleChange('value')}
-                readOnly={readOnly}
-                nodesOutputVars={availableVars}
-                availableNodes={availableNodesWithParent}
-                onFocusChange={setIsFocus}
-                placeholder={!readOnly ? t('workflow.nodes.http.extractListPlaceholder')! : ''}
-                placeholderClassName='!leading-[21px]'
-              />
-            ) : (
-              <input
-                type={(condition.key === 'size' || expectedVarType === VarType.number) ? 'number' : 'text'}
-                className='grow rounded-lg border border-components-input-border-hover bg-components-input-bg-normal px-3 py-[6px]'
-                value={condition.value}
-                onChange={e => handleChange('value')(e.target.value)}
-                readOnly={readOnly}
-              />
-            )}
-          </>
-        )}
       </div>
     </div>
   )

web/app/components/workflow/nodes/utils.ts

@@ -28,3 +28,13 @@ export const findVariableWhenOnLLMVision = (valueSelector: ValueSelector, availa
     formType,
   }
 }
+
+export const getConditionValueAsString = (condition: { value: any }) => {
+  if (Array.isArray(condition.value))
+    return condition.value[0] ?? ''
+
+  if (typeof condition.value === 'number')
+    return String(condition.value)
+
+  return condition.value ?? ''
+}