typebot.io icon indicating copy to clipboard operation
typebot.io copied to clipboard

Issue 2146: Block Validation UI Feedback

Open Swap-nagras opened this issue 5 months ago • 2 comments

This PR implements in-builder validation for misconfigured blocks, surfacing schema errors directly in the graph and closing issue #2146.

image

Key changes

  • Block validation helper (blockValidation.ts):

    • Uses the blockSchemaV6 Zod 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”).
  • useBlockValidation hook (useBlockValidation.ts):

    • Wraps validateBlock in a useMemo to return { isValid, errors, hasErrors } for any given block.
    • Catches Zod errors and exposes them for UI consumption.
  • UI integration (BlockNode.tsx):

    • Calls useBlockValidation(block) on each node.
    • If hasErrors, applies a red outline and renders a Chakra Tooltip listing each validation error on hover.
    • Falls back to existing styling/behavior when blocks are valid.

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.

Swap-nagras avatar Jun 10 '25 00:06 Swap-nagras