fix: Update default value handling for number input in useInitialData hook

web/app/components/base/input-number/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, useCallback } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
 import classNames from '@/utils/classnames'
@@ -19,13 +19,28 @@ export type InputNumberProps = {
 } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, amount = 1, value, size = 'regular', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
+  const {
+    unit,
+    className,
+    onChange,
+    amount = 1,
+    value,
+    size = 'regular',
+    max,
+    min,
+    defaultValue,
+    wrapClassName,
+    controlWrapClassName,
+    controlClassName,
+    disabled,
+    ...rest
+  } = props
 
-  const isValidValue = (v: number) => {
+  const isValidValue = useCallback((v: number) => {
     if (typeof max === 'number' && v > max)
       return false
     return !(typeof min === 'number' && v < min)
-  }
+  }, [max, min])
 
   const inc = () => {
     if (disabled) return
@@ -52,6 +67,20 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(newValue)
   }
 
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      onChange(undefined)
+      return
+    }
+    const parsed = Number(e.target.value)
+    if (Number.isNaN(parsed))
+      return
+
+    if (!isValidValue(parsed))
+      return
+    onChange(parsed)
+  }, [isValidValue, onChange])
+
   return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
@@ -61,24 +90,13 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       max={max}
       min={min}
       disabled={disabled}
-      onChange={(e) => {
-        if (e.target.value === '')
-          onChange(undefined)
-
-        const parsed = Number(e.target.value)
-        if (Number.isNaN(parsed))
-          return
-
-        if (!isValidValue(parsed))
-          return
-        onChange(parsed)
-      }}
+      onChange={handleInputChange}
       unit={unit}
       size={size}
     />
     <div className={classNames(
-      'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
-      disabled && 'opacity-50 cursor-not-allowed',
+      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+      disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
       <button

web/app/components/rag-pipeline/hooks/use-input-fields.ts

@@ -12,7 +12,7 @@ export const useInitialData = (variables: RAGPipelineVariables, lastRunInputData
       if ([BaseFieldType.textInput, BaseFieldType.paragraph, BaseFieldType.select].includes(type))
         acc[variableName] = defaultValue ?? ''
       if (type === BaseFieldType.numberInput)
-        acc[variableName] = defaultValue ?? 0
+        acc[variableName] = defaultValue
       if (type === BaseFieldType.checkbox)
         acc[variableName] = defaultValue ?? false
       if ([BaseFieldType.file, BaseFieldType.fileList].includes(type))