Improvement: subblocks

[emir-karabeg]

Summary

Subblock improvements.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Solo.

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 16, 2026 6:57am

[greptile-apps]

Greptile Summary

Improved subblock input components with enhanced UX features and AI wand integration.

Key Changes:

• Refactored wand UI from icon to button-based interface with inline prompt input
• Added auto-show tag dropdown on focus for empty inputs across all input types
• Implemented streaming AI generation support in messages-input with JSON parsing
• Removed unused streaming-effect CSS and code-shimmer animations
• Increased default panel width from 290px to 320px
• Improved handleFocus in use-sub-block-input.ts by reading values from event target directly instead of using setTimeout

Issues:

• globals.css was modified, violating project style guide that prefers local component styling

Confidence Score: 4/5

• Safe to merge with minor style guide violation
• Code is well-structured and implements consistent UX improvements across multiple input types. The streaming message parsing logic appears robust. Minor deduction for violating the globals.css style guide rule, though the changes themselves are functional and don't introduce bugs.
• Check apps/sim/app/_styles/globals.css - consider moving panel width to component-level CSS variable instead of global styles

Important Files Changed

Filename	Overview
apps/sim/app/_styles/globals.css	Removed unused streaming-effect styles and increased panel width from 290px to 320px. Violates style guide (rule c3b5e4b0-6580-4307-83aa-ba28f105b3c4) to avoid editing globals.css.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx	Refactored wand UI from icon-based to button-based interface, improved parameter ordering, and added wandControlRef prop. Code is well-structured with improved UX.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input.ts	Added shouldForceTagDropdown option and improved onFocus handler to read values directly from event target. Removed unnecessary setTimeout, improving performance.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx	Added wand AI integration with streaming support and message parsing. Includes role selector UI improvements. Complex streaming logic appears well-implemented.

Sequence Diagram

sequenceDiagram
    participant User
    participant SubBlock
    participant Input as Input Component<br/>(ShortInput/LongInput/<br/>MessagesInput/Code)
    participant Hook as useSubBlockInput
    participant Wand as useWand Hook
    participant TagDropdown
    participant Store as Workflow Store

    User->>SubBlock: Focus on empty input field
    SubBlock->>Input: Render with config
    Input->>Hook: Initialize with shouldForceTagDropdown
    Hook->>Hook: handleFocus(event)
    Hook->>Hook: Check shouldForceTagDropdown
    Hook-->>Input: setShowTags(true)
    Input->>TagDropdown: Show dropdown at cursor
    
    User->>SubBlock: Click "Generate" button (wand)
    SubBlock->>Input: wandControlRef.onWandTrigger(prompt)
    Input->>Wand: generateStream({ prompt })
    Wand->>Wand: onStreamStart()
    Wand-->>Input: Clear buffer, set initial state
    
    loop Streaming chunks
        Wand->>Wand: onStreamChunk(chunk)
        Wand->>Input: Update with chunk
        Input->>Input: extractStreamingMessages(buffer)
        Input->>Input: Parse and update local state
        Input-->>User: Display streaming content
    end
    
    Wand->>Wand: onGeneratedContent(content)
    Wand->>Input: Final parsed content
    Input->>Store: setMessages(validMessages)
    Store-->>User: Persist to workflow
    
    User->>Input: Select from TagDropdown
    TagDropdown->>Input: onSelect(newValue)
    Input->>Store: Update value
    Store-->>SubBlock: Trigger re-render

Loading

[greptile-apps]

_{24 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Violates style guide to avoid editing globals.css. Consider moving the panel width update to a CSS variable set in the component or store instead of modifying this global file.

Context Used: Context from dashboard - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/_styles/globals.css
Line: 14:14

Comment:
**style:** Violates style guide to avoid editing `globals.css`. Consider moving the panel width update to a CSS variable set in the component or store instead of modifying this global file.

**Context Used:** Context from `dashboard` - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... ([source](https://app.greptile.com/review/custom-context?memory=c3b5e4b0-6580-4307-83aa-ba28f105b3c4))

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.