typebot.io
typebot.io copied to clipboard
Issue 2146: Block Validation UI Feedback
This PR implements in-builder validation for misconfigured blocks, surfacing schema errors directly in the graph and closing issue #2146.
Key changes
-
Block validation helper (
blockValidation.ts):- Uses the
blockSchemaV6Zod schema to validate every block’s configuration. - Converts raw Zod issues into a
BlockValidationError[]with friendly messages (e.g. “This field is required”, “Must be at least X characters”).
- Uses the
-
useBlockValidationhook (useBlockValidation.ts):- Wraps
validateBlockin auseMemoto return{ isValid, errors, hasErrors }for any given block. - Catches Zod errors and exposes them for UI consumption.
- Wraps
-
UI integration (
BlockNode.tsx):- Calls
useBlockValidation(block)on each node. - If
hasErrors, applies a red outline and renders a ChakraTooltiplisting each validation error on hover. - Falls back to existing styling/behavior when blocks are valid.
- Calls
Motivation
Without in-builder feedback, misconfigured blocks can slip through to runtime and cause unexpected failures. This change highlights invalid blocks immediately in the editor, making it far easier for creators to catch and fix configuration issues early
Impact
- Backward-compatible: no changes to existing block schemas or runtime behavior.
- Dev-only UI enhancement: only affects the Builder app.
Closes #2146.