fix(wand): improved flickering for invalid JSON icon while streaming

[waleedlatif1]

Summary

improved flickering for invalid JSON icon while streaming

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 17, 2026 6:20pm

[greptile-apps]

Greptile Summary

This PR fixes flickering of the invalid JSON warning icon during AI streaming by conditionally hiding the icon when wandState?.isStreaming is true. The fix includes two main improvements:

In sub-block.tsx:

• Added !wandState?.isStreaming check to prevent the AlertTriangle icon from rendering during streaming (line 213)
• This prevents the icon from flickering as JSON validation runs on incomplete streamed content
• Added explicit TypeScript event types to event handlers

In code.tsx:

• Simplified validation logic by removing the lastValidationStatus ref that was preventing proper state updates
• Changed to immediately call onValidationChange(true) for valid JSON, and debounce only invalid states (150ms)
• This ensures the parent component receives timely updates about validation status
• Added explicit type annotations for callback parameters
• Removed several unnecessary code comments

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are well-isolated, address a specific UI flickering issue, and improve the validation logic. The fix correctly identifies that streaming content should not trigger validation warnings until streaming completes. The type annotations improve code safety without changing behavior.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx	Improved JSON validation logic by simplifying debounce behavior and removing unnecessary ref tracking; added explicit type annotations
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx	Fixed flickering by hiding invalid JSON icon during streaming; improved type safety with explicit event handler types

Sequence Diagram

sequenceDiagram
    participant User
    participant SubBlock
    participant Code
    participant Wand
    participant ValidationEffect

    User->>SubBlock: Click "Generate" button
    SubBlock->>Code: Trigger wand streaming
    Code->>Wand: generateStream(prompt)
    Wand->>Wand: setIsStreaming(true)
    
    loop Streaming chunks
        Wand->>Code: onStreamChunk(chunk)
        Code->>Code: setCode(prev + chunk)
        Code->>ValidationEffect: isValidJson recalculated
        ValidationEffect->>ValidationEffect: Check isValid = !shouldValidateJson || isValidJson
        
        alt JSON is valid or not validating
            ValidationEffect->>SubBlock: onValidationChange(true)
            SubBlock->>SubBlock: setIsValidJson(true)
            Note over SubBlock: Icon hidden (!isValidJson = false)
        else JSON is invalid
            ValidationEffect->>ValidationEffect: setTimeout 150ms
            ValidationEffect->>SubBlock: onValidationChange(false)
            SubBlock->>SubBlock: setIsValidJson(false)
            Note over SubBlock: Icon still hidden (isStreaming = true)
        end
    end
    
    Wand->>Code: Streaming complete
    Wand->>Wand: setIsStreaming(false)
    Code->>ValidationEffect: Final validation
    ValidationEffect->>SubBlock: onValidationChange(isValid)
    SubBlock->>SubBlock: Icon now shows if invalid

Loading