⚡ (numberInput) Variabalize min, max, step

apps/builder/src/features/blocks/inputs/number/components/NumberInputSettings.tsx

@@ -14,9 +14,11 @@ export const NumberInputSettings = ({ options, onOptionsChange }: Props) => {
     onOptionsChange({ ...options, labels: { ...options.labels, placeholder } })
   const handleButtonLabelChange = (button: string) =>
     onOptionsChange({ ...options, labels: { ...options.labels, button } })
-  const handleMinChange = (min?: number) => onOptionsChange({ ...options, min })
-  const handleMaxChange = (max?: number) => onOptionsChange({ ...options, max })
-  const handleStepChange = (step?: number) =>
+  const handleMinChange = (min?: NumberInputOptions['min']) =>
+    onOptionsChange({ ...options, min })
+  const handleMaxChange = (max?: NumberInputOptions['max']) =>
+    onOptionsChange({ ...options, max })
+  const handleStepChange = (step?: NumberInputOptions['step']) =>
     onOptionsChange({ ...options, step })
   const handleVariableChange = (variable?: Variable) => {
     onOptionsChange({ ...options, variableId: variable?.id })
@@ -38,19 +40,16 @@ export const NumberInputSettings = ({ options, onOptionsChange }: Props) => {
         label="Min:"
         defaultValue={options.min}
         onValueChange={handleMinChange}
-        withVariableButton={false}
       />
       <NumberInput
         label="Max:"
         defaultValue={options.max}
         onValueChange={handleMaxChange}
-        withVariableButton={false}
       />
       <NumberInput
         label="Step:"
         defaultValue={options.step}
         onValueChange={handleStepChange}
-        withVariableButton={false}
       />
       <Stack>
         <FormLabel mb="0" htmlFor="variable">

apps/viewer/src/features/chat/helpers/executeGroup.ts

@@ -14,6 +14,7 @@ import {
   isInputBlock,
   isIntegrationBlock,
   isLogicBlock,
+  isNotEmpty,
 } from '@typebot.io/lib'
 import { executeLogic } from './executeLogic'
 import { getNextGroup } from './getNextGroup'
@@ -195,6 +196,29 @@ const parseInput =
           state.typebot.variables
         )(block)
       }
+      case InputBlockType.NUMBER: {
+        const parsedBlock = deepParseVariables(state.typebot.variables)({
+          ...block,
+          prefilledValue: getPrefilledInputValue(state.typebot.variables)(
+            block
+          ),
+        })
+        return {
+          ...parsedBlock,
+          options: {
+            ...parsedBlock.options,
+            min: isNotEmpty(parsedBlock.options.min as string)
+              ? Number(parsedBlock.options.min)
+              : undefined,
+            max: isNotEmpty(parsedBlock.options.max as string)
+              ? Number(parsedBlock.options.max)
+              : undefined,
+            step: isNotEmpty(parsedBlock.options.step as string)
+              ? Number(parsedBlock.options.step)
+              : undefined,
+          },
+        }
+      }
       default: {
         return deepParseVariables(state.typebot.variables)({
           ...block,

packages/schemas/features/blocks/inputs/number.ts

@@ -3,14 +3,15 @@ import { optionBaseSchema, blockBaseSchema } from '../baseSchemas'
 import { defaultButtonLabel } from './constants'
 import { InputBlockType } from './enums'
 import { textInputOptionsBaseSchema } from './text'
+import { variableStringSchema } from '../../utils'
 
 export const numberInputOptionsSchema = optionBaseSchema
   .merge(textInputOptionsBaseSchema)
   .merge(
     z.object({
-      min: z.number().optional(),
-      max: z.number().optional(),
-      step: z.number().optional(),
+      min: z.number().or(variableStringSchema).optional(),
+      max: z.number().or(variableStringSchema).optional(),
+      step: z.number().or(variableStringSchema).optional(),
     })
   )